react-science 19.1.0 → 19.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "19.1.0",
+  "version": "19.3.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {
@@ -56,56 +56,59 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.1",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@emotion/styled": "^11.14.1",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@tanstack/react-form": "^1.23.6",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
     "d3-scale-chromatic": "^3.1.0",
-    "react-d3-utils": "^3.1.1",
+    "react-d3-utils": "^3.1.2",
     "react-dropzone": "^14.3.8",
     "react-full-screen": "^1.1.1",
     "react-icons": "^5.5.0",
-    "react-inspector": "^6.0.2",
+    "react-inspector": "^9.0.0",
     "tinycolor2": "^1.6.0",
-    "ts-pattern": "^5.7.1"
+    "ts-pattern": "^5.8.0",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@blueprintjs/core": "6.0.0",
     "@blueprintjs/icons": "6.0.0",
     "@blueprintjs/select": "6.0.0",
-    "@floating-ui/react": "^0.27.13",
-    "@playwright/experimental-ct-react": "^1.54.1",
-    "@playwright/test": "^1.54.1",
-    "@storybook/addon-docs": "^9.0.16",
-    "@storybook/react-vite": "^9.0.16",
-    "@tanstack/react-query": "^5.83.0",
+    "@floating-ui/react": "^0.27.16",
+    "@playwright/experimental-ct-react": "^1.56.0",
+    "@playwright/test": "^1.56.0",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
+    "@tanstack/react-query": "^5.90.2",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.1.0",
-    "@types/node": "^24.0.13",
+    "@types/node": "^24.7.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/tinycolor2": "^1.4.6",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^5.0.4",
     "@vitest/coverage-v8": "^3.2.4",
+    "@zakodium/tsconfig": "^1.0.2",
     "biologic-converter": "^0.6.0",
     "cheminfo-font": "^1.13.1",
     "cheminfo-types": "^1.8.1",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.31.0",
-    "eslint-config-zakodium": "^16.0.0",
-    "eslint-plugin-storybook": "^9.0.16",
-    "fifo-logger": "^2.0.0",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.37.0",
+    "eslint-config-zakodium": "^17.0.0",
+    "eslint-plugin-storybook": "^9.1.10",
+    "fifo-logger": "^2.0.1",
     "filelist-utils": "^1.11.3",
-    "immer": "^10.1.1",
-    "jcampconverter": "^11.0.3",
-    "ml-gsd": "^13.0.1",
+    "immer": "^10.1.3",
+    "jcampconverter": "^11.1.0",
+    "ml-gsd": "^13.1.0",
     "ml-peak-shape-generator": "^4.2.0",
-    "ml-signal-processing": "^2.0.0",
-    "ml-spectra-processing": "^14.13.0",
-    "ms-spectrum": "^3.9.0",
+    "ml-signal-processing": "^2.1.0",
+    "ml-spectra-processing": "^14.18.0",
+    "ms-spectrum": "^3.9.2",
     "netcdfjs": "^3.0.0",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "^3.6.2",
@@ -113,20 +116,20 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^6.0.0",
     "react-kbs": "^2.1.1",
-    "react-ocl": "^8.0.0",
-    "react-plot": "^3.1.0",
+    "react-ocl": "^8.2.0",
+    "react-plot": "^3.1.1",
     "rimraf": "^6.0.1",
     "spc-parser": "^1.0.0",
-    "storybook": "^9.0.16",
-    "stylelint": "^16.21.1",
-    "stylelint-config-standard": "^38.0.0",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.4",
+    "storybook": "^9.1.10",
+    "stylelint": "^16.25.0",
+    "stylelint-config-standard": "^39.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4",
     "wdf-parser": "^0.3.0"
   },
   "volta": {
-    "node": "24.4.0"
+    "node": "24.9.0"
   },
   "overrides": {
     "storybook": "$storybook"

package/src/components/accordion/accordion.tsx

@@ -82,7 +82,7 @@ const AccordionItemHeader = styled.div`
   justify-content: space-between;
   padding-left: 12px;
 
-  &:hover {
+  :hover {
     background: white
       linear-gradient(${Colors.LIGHT_GRAY4} 5%, ${Colors.LIGHT_GRAY2} 100%)
       repeat scroll 0 0;

package/src/components/color-picker/react-color/ColorPicker.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import { debounce } from '../../utils/index.js';
 import { defaultColorPalette } from '../palette.js';
@@ -152,17 +152,19 @@ export function ColorPicker(props: ColorPickerProps) {
     style = {},
   } = props;
 
-  const [state, setState] = useState(colorHelper.toState(color, 0));
-
   const debounceRef = useRef(
     debounce((fn: any, data: ChangeCallbackProps, event: Event) => {
       fn(data, event);
     }, 100),
   );
 
-  useEffect(() => {
-    setState((prevState) => colorHelper.toState(color, prevState.oldHue));
-  }, [color]);
+  const [state, setState] = useState(() => colorHelper.toState(color, 0));
+
+  const [previousColor, setPreviousColor] = useState(color);
+  if (color !== previousColor) {
+    setPreviousColor(color);
+    setState(colorHelper.toState(color, 0));
+  }
 
   const handleChange = useCallback(
     (data: any, event: any) => {

package/src/components/doi/doi.tsx

@@ -1,6 +1,6 @@
 import { match } from 'ts-pattern';
 
-import { Logo } from './Logo.js';
+import { DoiLogo } from './doi_logo.js';
 import { normalizeDOI } from './utils.js';
 
 type DOISize = 'small' | 'medium' | 'large';
@@ -21,7 +21,7 @@ export function DOI(props: DOIProps) {
       target="_blank"
       rel="noreferrer"
     >
-      <Logo size={getDOISize(size)} />
+      <DoiLogo size={getDOISize(size)} />
     </a>
   );
 }

package/src/components/doi/{Logo.tsx → doi_logo.tsx}

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-const Svg = styled.svg<{ size: string }>`
+const DoiLogoSvg = styled.svg<{ size: string }>`
   display: inline-flex;
   ${(props) => {
     return `
@@ -10,15 +10,19 @@ const Svg = styled.svg<{ size: string }>`
   }}
 `;
 
-interface LogoProps {
+interface DoiLogoProps {
   size: string;
 }
 
-export function Logo(props: LogoProps) {
+export function DoiLogo(props: DoiLogoProps) {
   const { size } = props;
 
   return (
-    <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 130" size={size}>
+    <DoiLogoSvg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 130 130"
+      size={size}
+    >
       <circle fill="#fcb425" cx="65" cy="65" r="64" />
       <path
         fill="##231f20"
@@ -28,6 +32,6 @@ export function Logo(props: LogoProps) {
         fill="#fff"
         d="m 105.42764,25.617918 c -1.97184,0 -3.64919,0.69142 -5.03204,2.074271 -1.357247,1.357245 -2.035864,3.021779 -2.035864,4.993633 0,1.971835 0.678617,3.649193 2.035864,5.032034 1.38285,1.382861 3.0602,2.074281 5.03204,2.074281 1.99744,0 3.67479,-0.678627 5.03203,-2.035861 1.38285,-1.382861 2.07428,-3.073012 2.07428,-5.070454 0,-1.971854 -0.69143,-3.636388 -2.07428,-4.993633 -1.38285,-1.382851 -3.0602,-2.074271 -5.03203,-2.074271 z M 74.219383,45.507921 c -7.323992,0 -12.970625,2.283009 -16.939921,6.848949 -3.277876,3.782438 -4.916803,8.118252 -4.916803,13.008406 0,5.430481 1.626124,10.009834 4.878383,13.738236 3.943689,4.538918 9.475093,6.808622 16.59421,6.808622 7.093512,0 12.612122,-2.269704 16.555801,-6.808622 3.252259,-3.728402 4.878393,-8.1993 4.878393,-13.413648 0,-5.160323 -1.638938,-9.604602 -4.916803,-13.332994 -4.020509,-4.56594 -9.398263,-6.848949 -16.13326,-6.848949 z m 24.908603,1.386686 0,37.634676 12.599304,0 0,-37.634676 -12.599304,0 z M 73.835252,56.975981 c 2.304752,0 4.263793,0.852337 5.877124,2.554426 1.638928,1.675076 2.458402,3.727881 2.458402,6.159457 0,2.458578 -0.806671,4.538022 -2.419992,6.240111 -1.613331,1.675086 -3.585175,2.514099 -5.915534,2.514099 -2.612051,0 -4.737546,-1.027366 -6.376474,-3.080682 -1.331637,-1.648053 -1.997451,-3.539154 -1.997451,-5.673528 0,-2.107362 0.665814,-3.985138 1.997451,-5.633201 1.638928,-2.053316 3.764423,-3.080682 6.376474,-3.080682 z"
       />
-    </Svg>
+    </DoiLogoSvg>
   );
 }

package/src/components/form/components/input/checkbox.tsx

@@ -0,0 +1,53 @@
+import type { CheckboxProps as BPCheckboxProps } from '@blueprintjs/core';
+import { Checkbox as BPCheckbox } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { ChangeEvent } from 'react';
+
+import { useFieldContext } from '../../context/use_ts_form.js';
+import { getIntent } from '../../utils/use_intent.js';
+import { FormGroup } from '../input_groups/form_group.js';
+
+type CheckboxProps = Omit<BPCheckboxProps, 'defaultChecked' | 'name'> & {
+  helpText?: string;
+};
+
+// Keep the margin top for space between inputs. But remove the margin bottom for helperText
+const StyledCheckbox = styled(BPCheckbox)<CheckboxProps>`
+  margin-bottom: 0 !important;
+  width: fit-content;
+`;
+
+export function Checkbox(props: CheckboxProps) {
+  const { helpText, label } = props;
+  const field = useFieldContext<boolean>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  const intent = getIntent(error);
+
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
+    const checked = event.target.checked;
+    return field.handleChange(checked);
+  }
+
+  return (
+    <FormGroup
+      name={field.name}
+      intent={intent}
+      error={error}
+      fullWidth
+      helpText={helpText}
+    >
+      <StyledCheckbox
+        label={label}
+        name={field.name}
+        value={String(field.state.value)}
+        onChange={onChange}
+        onBlur={field.handleBlur}
+        defaultChecked={field.state.value}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input/input.tsx

@@ -0,0 +1,57 @@
+import { InputGroup } from '@blueprintjs/core';
+import type { ChangeEvent } from 'react';
+
+import { useFieldContext } from '../../context/use_ts_form.js';
+import type { FormGroupInputProps } from '../input_groups/form_group.js';
+import { FormGroup } from '../input_groups/form_group.js';
+
+interface InputProps extends FormGroupInputProps {
+  type?: string;
+}
+
+export function Input(props: InputProps) {
+  const {
+    label,
+    required,
+    placeholder,
+    type = 'text',
+    helpText,
+    layout,
+    fullWidth,
+  } = props;
+
+  const field = useFieldContext<string>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
+    return field.handleChange(event.target.value);
+  }
+
+  return (
+    <FormGroup
+      name={field.name}
+      label={label}
+      intent={error ? 'danger' : 'none'}
+      required={required}
+      error={error}
+      helpText={helpText}
+      layout={layout}
+      fullWidth={fullWidth}
+    >
+      <InputGroup
+        id={field.name}
+        name={field.name}
+        required={required}
+        type={type}
+        onChange={onChange}
+        onBlur={field.handleBlur}
+        intent={error ? 'danger' : 'none'}
+        value={field.state.value}
+        placeholder={placeholder}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input/numeric_input.tsx

@@ -0,0 +1,64 @@
+import { NumericInput as BPNumericInput } from '@blueprintjs/core';
+
+import { useFieldContext } from '../../context/use_ts_form.js';
+import { getIntent } from '../../utils/use_intent.js';
+import type { FormGroupInputProps } from '../input_groups/form_group.js';
+import { FormGroup } from '../input_groups/form_group.js';
+
+interface NumericInputProps extends FormGroupInputProps {
+  step?: number;
+  min?: number;
+  max?: number;
+}
+
+export function NumericInput(props: NumericInputProps) {
+  const {
+    label,
+    required,
+    helpText,
+    placeholder,
+    step,
+    min,
+    max,
+    layout,
+    fullWidth,
+  } = props;
+
+  const field = useFieldContext<string>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  const intent = getIntent(error);
+
+  function onChange(_: number, valueAsString: string) {
+    return field.handleChange(valueAsString);
+  }
+
+  return (
+    <FormGroup
+      name={field.name}
+      label={label}
+      intent={intent}
+      required={required}
+      helpText={helpText}
+      layout={layout}
+      error={error}
+      fullWidth={fullWidth}
+    >
+      <BPNumericInput
+        id={field.name}
+        name={field.name}
+        stepSize={step}
+        min={min}
+        max={max}
+        value={field.state.value ?? ''}
+        onValueChange={onChange}
+        intent={intent}
+        placeholder={placeholder}
+        required={required}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input/reset_button.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+import { Button } from '../../../button/index.js';
+import { useFormContext } from '../../context/use_ts_form.js';
+
+interface ResetButtonProps {
+  children: ReactNode;
+}
+
+export function ResetButton(props: ResetButtonProps) {
+  const { children } = props;
+  const form = useFormContext();
+
+  return (
+    <Button intent="danger" type="reset" onClick={() => form.reset()}>
+      {children}
+    </Button>
+  );
+}

package/src/components/form/components/input/select.tsx

@@ -0,0 +1,54 @@
+import { useFieldContext } from '../../context/use_ts_form.js';
+import { getIntent } from '../../utils/use_intent.js';
+import type { FormGroupInputProps } from '../input_groups/form_group.js';
+import { FormGroup } from '../input_groups/form_group.js';
+import { Select as SelectInput } from '../input_groups/select.js';
+import type { SelectId } from '../util/select.js';
+
+interface SelectOptionType {
+  label: string;
+  value: string;
+}
+
+interface SelectProps extends Omit<FormGroupInputProps, 'placeholder'> {
+  items: SelectOptionType[];
+}
+
+export function Select(props: SelectProps) {
+  const { label, items, required, helpText, layout, fullWidth } = props;
+
+  const field = useFieldContext<SelectId>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  const intent = getIntent(error);
+
+  function onItemSelect(selected: SelectId | undefined) {
+    if (!selected) return;
+    return field.handleChange(selected);
+  }
+
+  return (
+    <FormGroup
+      name={field.name}
+      required={required}
+      label={label}
+      intent={intent}
+      helpText={helpText}
+      error={error}
+      layout={layout}
+      fullWidth={fullWidth}
+    >
+      <SelectInput
+        onBlur={field.handleBlur}
+        items={items}
+        selected={field.state.value}
+        onChange={onItemSelect}
+        intent={intent}
+        name={field.name}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input/submit_button.tsx

@@ -0,0 +1,23 @@
+import { useStore } from '@tanstack/react-form';
+
+import type { ButtonProps } from '../../../button/index.js';
+import { Button } from '../../../button/index.js';
+import { useFormContext } from '../../context/use_ts_form.js';
+
+type SubmitButtonProps = ButtonProps;
+
+export function SubmitButton(props: SubmitButtonProps) {
+  const { intent, ...otherProps } = props;
+
+  const form = useFormContext();
+  const isSubmitting = useStore(form.store, (state) => state.isSubmitting);
+
+  return (
+    <Button
+      {...otherProps}
+      intent={intent ?? 'primary'}
+      type="submit"
+      disabled={isSubmitting}
+    />
+  );
+}

package/src/components/form/components/input/switch.tsx

@@ -0,0 +1,55 @@
+import { Switch as BPSwitch } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { ChangeEvent } from 'react';
+
+import { useFieldContext } from '../../context/use_ts_form.js';
+import type { Layout } from '../input_groups/form.js';
+import { FormGroup } from '../input_groups/form_group.js';
+
+interface SwitchProps {
+  label?: string;
+  helpText?: string;
+  fullWidth?: boolean;
+  layout?: Layout;
+}
+
+const StyledSwitch = styled(BPSwitch)`
+  margin: 0 !important;
+  height: 30px;
+  display: flex;
+  align-items: center;
+`;
+
+export function Switch(props: SwitchProps) {
+  const { label, layout, helpText, fullWidth } = props;
+
+  const field = useFieldContext<boolean>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
+    return field.handleChange(event.target.checked);
+  }
+
+  return (
+    <FormGroup
+      name={field.name}
+      error={error}
+      intent={error ? 'danger' : undefined}
+      label={label}
+      layout={layout}
+      helpText={helpText}
+      fullWidth={fullWidth}
+    >
+      <StyledSwitch
+        name={field.name}
+        id={field.name}
+        checked={field.state.value}
+        onChange={onChange}
+        onBlur={field.handleBlur}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/components/input_groups/form.tsx

@@ -0,0 +1,32 @@
+import type { FormHTMLAttributes, ReactNode } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+
+export type Layout = 'inline' | 'stacked';
+
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  children: ReactNode;
+  layout?: Layout;
+}
+
+const formContext = createContext<{ layout: Layout }>({
+  layout: 'stacked',
+});
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useFormContext() {
+  return useContext(formContext);
+}
+
+export function Form(props: FormProps) {
+  const { children, layout = 'stacked', ...otherProps } = props;
+
+  const contextValue = useMemo(() => {
+    return { layout };
+  }, [layout]);
+
+  return (
+    <formContext.Provider value={contextValue}>
+      <form {...otherProps}>{children}</form>
+    </formContext.Provider>
+  );
+}