refactor: update react-science

package.json

@@ -56,7 +56,8 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^5.6.0",
+    "@blueprintjs/core": "^5.7.1",
+    "@blueprintjs/icons": "^5.4.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@lukeed/uuid": "^2.0.1",
@@ -80,71 +81,71 @@
     "ml-baseline-correction-regression": "^1.0.2",
     "ml-conrec": "^5.0.2",
     "ml-gsd": "^12.1.3",
-    "ml-matrix": "^6.10.8",
+    "ml-matrix": "^6.11.0",
     "ml-spectra-processing": "^12.8.0",
     "ml-stat": "^1.3.3",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
     "nmr-load-save": "^0.23.9",
     "nmr-processing": "^11.6.1",
-    "nmredata": "^0.9.7",
+    "nmredata": "^0.9.9",
     "numeral": "^2.0.6",
-    "openchemlib": "^8.7.1",
-    "openchemlib-utils": "^5.6.1",
+    "openchemlib": "^8.7.2",
+    "openchemlib-utils": "^5.6.0",
     "papaparse": "^5.4.1",
     "re-resizable": "6.9.11",
     "react-d3-utils": "^1.0.0",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.11",
-    "react-icons": "^4.11.0",
+    "react-icons": "^4.12.0",
     "react-inspector": "^6.0.2",
     "react-mf": "^2.0.2",
     "react-ocl": "^6.1.0",
     "react-ocl-nmr": "^3.0.1",
     "react-plot": "^1.4.2",
     "react-rnd": "^10.4.1",
-    "react-science": "^0.27.0",
+    "react-science": "0.30.2-pre.1702391005",
     "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",
-    "react-use": "^17.4.0",
+    "react-use": "^17.4.2",
     "smart-array-filter": "^4.0.2",
     "yup": "^1.3.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "^7.23.0",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@playwright/test": "^1.39.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@playwright/test": "^1.40.1",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@types/d3": "^7.4.2",
-    "@types/lodash": "^4.14.200",
-    "@types/node": "^20.8.10",
-    "@types/papaparse": "^5.3.10",
-    "@types/react": "^18.2.36",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-table": "^7.7.17",
-    "@vitejs/plugin-react-swc": "^3.4.1",
-    "@vitest/coverage-v8": "^0.34.6",
+    "@types/d3": "^7.4.3",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.10.4",
+    "@types/papaparse": "^5.3.14",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "@types/react-table": "^7.7.18",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/coverage-v8": "^1.0.1",
     "cross-env": "^7.0.3",
-    "cspell": "^7.3.8",
-    "eslint": "^8.53.0",
-    "eslint-config-cheminfo-react": "^10.0.0",
-    "eslint-config-cheminfo-typescript": "^12.0.4",
+    "cspell": "^8.1.3",
+    "eslint": "^8.55.0",
+    "eslint-config-cheminfo-react": "^10.1.0",
+    "eslint-config-cheminfo-typescript": "^12.1.0",
     "modern-normalize": "^2.0.0",
     "postcss-styled-syntax": "^0.5.0",
-    "prettier": "^3.0.3",
-    "rc-menu": "^9.12.2",
+    "prettier": "^3.1.0",
+    "rc-menu": "^9.12.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.18.0",
+    "react-router-dom": "^6.20.1",
     "rimraf": "^5.0.5",
     "rollup-plugin-analyzer": "^4.0.0",
     "serve": "^14.2.1",
     "stylelint": "^15.11.0",
     "stylelint-config-standard": "^34.0.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vitest": "^0.34.6"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.6",
+    "vitest": "^1.0.1"
   }
 }

src/component/1d-2d/tools/BrushXY.tsx

@@ -102,14 +102,14 @@
     dimensionBorder.endX && endX > dimensionBorder.endX
       ? dimensionBorder.endX
       : dimensionBorder.startX && endX < dimensionBorder.startX
-      ? dimensionBorder.startX
-      : endX;
+        ? dimensionBorder.startX
+        : endX;
   endY =
     dimensionBorder.endY && endY > dimensionBorder.endY
       ? dimensionBorder.endY
       : dimensionBorder.startY && endY < dimensionBorder.startY
-      ? dimensionBorder.startY
-      : endY;
+        ? dimensionBorder.startY
+        : endY;
 
   const scaleX =
     brushType === BRUSH_TYPE.X || brushType === BRUSH_TYPE.XY

src/component/elements/ContextMenuBluePrint.tsx

@@ -0,0 +1,67 @@
+import {
+  ContextMenuProps as BluePrintContextMenuProps,
+  Menu,
+  MenuItem,
+  MenuItemProps,
+  showContextMenu,
+} from '@blueprintjs/core';
+import React, { ComponentProps, ElementType, ReactNode } from 'react';
+
+export interface ContextMenuItem extends MenuItemProps {
+  data?: object;
+}
+
+type ElementProps<E = 'div'> = E extends ElementType
+  ? ComponentProps<E>
+  : never;
+
+export interface BaseContextMenuProps {
+  options: ContextMenuItem[];
+  onSelect: (data?: object) => void;
+}
+
+export interface ContextMenuProps<E>
+  extends BaseContextMenuProps,
+    Omit<BluePrintContextMenuProps, 'onSelect' | 'content' | 'children'> {
+  as?: E;
+  children: ReactNode;
+}
+
+export function ContextMenu<E extends ElementType = 'div'>(
+  props: ContextMenuProps<E> & ElementProps<E>,
+) {
+  const { options, onSelect, children, as: Wrapper = 'div', ...other } = props;
+
+  function handleContextMenu(event: React.MouseEvent<HTMLElement>) {
+    if (!Array.isArray(options) || options.length === 0) {
+      return;
+    }
+
+    const content = (
+      <Menu>
+        {options.map((option) => (
+          <MenuItem
+            key={JSON.stringify(option)}
+            {...option}
+            onClick={() => onSelect(option?.data)}
+          />
+        ))}
+      </Menu>
+    );
+
+    event.preventDefault();
+    showContextMenu({
+      content,
+      targetOffset: {
+        left: event.clientX,
+        top: event.clientY,
+      },
+    });
+  }
+
+  return (
+    <Wrapper {...other} onContextMenu={handleContextMenu}>
+      {children}
+    </Wrapper>
+  );
+}

src/component/elements/DropdownMenu.tsx

@@ -0,0 +1,39 @@
+import {
+  Menu,
+  MenuItem,
+  MenuItemProps,
+  Popover,
+  PopoverProps,
+} from '@blueprintjs/core';
+
+export interface DropdownMenuItem extends MenuItemProps {
+  data?: object;
+}
+
+export interface DropdownMenuProps
+  extends Omit<PopoverProps, 'onSelect' | 'content'> {
+  options: DropdownMenuItem[];
+  onSelect: (data?: object) => void;
+}
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  const { options, onSelect, children, ...other } = props;
+
+  const content = (
+    <Menu>
+      {options.map((option) => (
+        <MenuItem
+          key={JSON.stringify(option)}
+          {...option}
+          onClick={() => onSelect(option?.data)}
+        />
+      ))}
+    </Menu>
+  );
+
+  return (
+    <Popover {...other} content={content}>
+      {children}
+    </Popover>
+  );
+}

src/component/elements/ReactTable/Elements/ReactTableRow.tsx

@@ -1,17 +1,17 @@
 /** @jsxImportSource @emotion/react */
 
-import { css, CSSObject } from '@emotion/react';
+import { css, CSSObject, SerializedStyles } from '@emotion/react';
 import { useMemo, useEffect, useCallback } from 'react';
-import { DropdownMenu } from 'react-science/ui';
 
 import { HighlightEventSource, useHighlight } from '../../../highlight/index';
-import { BaseRowStyle, ContextMenuProps } from '../ReactTable';
+import { ContextMenu } from '../../ContextMenuBluePrint';
+import { BaseRowStyle, TableContextMenuProps } from '../ReactTable';
 
 function getRowStyle(
   isActive: boolean,
   rowStyle: BaseRowStyle = {},
   disableDefaultRowStyle?: boolean,
-) {
+): SerializedStyles {
   const { hover = {}, active = {}, base = {}, activated = {} } = rowStyle;
 
   const hoverStyle = disableDefaultRowStyle
@@ -21,7 +21,7 @@
     ? (active as CSSObject)
     : { backgroundColor: '#ff6f0070', ...active };
   const baseStyle = disableDefaultRowStyle
-    ? (base as CSSObject)
+    ? (base as object)
     : { backgroundColor: 'white', ...base };
 
   return css([
@@ -36,7 +36,7 @@
 export interface ClickEvent {
   onClick?: (event: Event, data: unknown) => void;
 }
-interface ReactTableRowProps extends ClickEvent, ContextMenuProps {
+interface ReactTableRowProps extends ClickEvent, TableContextMenuProps {
   row: any;
   highlightedSource?: HighlightEventSource;
   isRowActive: boolean;
@@ -89,11 +89,11 @@
     [onClick, row],
   );
   return (
-    <DropdownMenu
-      trigger="contextMenu"
+    <ContextMenu
       options={contextMenu}
       onSelect={(selected) => onContextMenuSelect?.(selected, row.original)}
       as="tr"
+      style={{ position: 'static' }}
       key={row.getRowProps().key}
       css={getRowStyle(
         highlight.isActive || isRowActive,
@@ -127,7 +127,7 @@
           );
         }
       })}
-    </DropdownMenu>
+    </ContextMenu>
   );
 }
 

src/component/elements/ReactTable/ReactTable.tsx

@@ -13,7 +13,6 @@
   useEffect,
   useMemo,
 } from 'react';
-import { DropdownMenuProps } from 'react-science/ui';
 import {
   useTable,
   useSortBy,
@@ -28,6 +27,7 @@
 import { useMeasure } from 'react-use';
 
 import { HighlightEventSource } from '../../highlight';
+import { BaseContextMenuProps } from '../ContextMenuBluePrint';
 
 import { EmptyDataRow } from './Elements/EmptyDataRow';
 import ReactTableHeader from './Elements/ReactTableHeader';
@@ -69,14 +69,14 @@
   base?: CSSProperties;
 }
 
-export interface ContextMenuProps {
+export interface TableContextMenuProps {
   onContextMenuSelect?: (
-    selected: Parameters<DropdownMenuProps<any, any>['onSelect']>[0],
+    selected: Parameters<BaseContextMenuProps['onSelect']>[0],
     data: any,
   ) => void;
-  contextMenu?: DropdownMenuProps<any, any>['options'];
+  contextMenu?: BaseContextMenuProps['options'];
 }
-interface ReactTableProps extends ContextMenuProps, ClickEvent, SortEvent {
+interface ReactTableProps extends TableContextMenuProps, ClickEvent, SortEvent {
   data: any;
   columns: any;
   highlightedSource?: HighlightEventSource;