react-science 23.1.0 → 24.0.0

package/src/components/form/components/field_groups/svg_text_style.tsx

@@ -56,9 +56,11 @@ export const FieldGroupSVGTextStyleFields = withFieldGroup({
                 <Checkbox
                   labelElement={<BoldLabel>Bold</BoldLabel>}
                   name={field.name}
-                  checked={fontWeightToBoolean(field.state.value)}
-                  onChange={(e) =>
-                    field.handleChange(booleanToFontWeight(e.target.checked))
+                  checked={isBoldFontWeight(field.state.value)}
+                  onChange={(event) =>
+                    field.handleChange(
+                      booleanToFontWeight(event.target.checked),
+                    )
                   }
                   onBlur={field.handleBlur}
                 />
@@ -69,9 +71,9 @@ export const FieldGroupSVGTextStyleFields = withFieldGroup({
                 <Checkbox
                   labelElement={<ItalicLabel>Italic</ItalicLabel>}
                   name={field.name}
-                  checked={fontStyleToBoolean(field.state.value)}
-                  onChange={(e) =>
-                    field.handleChange(booleanToFontStyle(e.target.checked))
+                  checked={isItalicFontStyle(field.state.value)}
+                  onChange={(event) =>
+                    field.handleChange(booleanToFontStyle(event.target.checked))
                   }
                   onBlur={field.handleBlur}
                 />
@@ -123,7 +125,7 @@ function TextStyleFieldPreview(props: TextStyleFieldPreviewProps) {
         <TextStyleFieldPreviewErrorContainer>
           {safeResult.error.issues.map((error) => (
             <li key={`${error.path.join('.')}-${error.code}`}>
-              {error.path.join('.')}: ${error.message}
+              {error.path.join('.')}: {error.message}
             </li>
           ))}
         </TextStyleFieldPreviewErrorContainer>
@@ -159,22 +161,22 @@ const ItalicLabel = styled.span`
   font-style: italic;
 `;
 
-function fontWeightToBoolean(
-  weight: SvgTextStyleFields['fontWeight'],
-): boolean {
+function isBoldFontWeight(weight: SvgTextStyleFields['fontWeight']): boolean {
   return weight === 'bold';
 }
 
 function booleanToFontWeight(
-  weight: boolean,
+  isBold: boolean,
 ): SvgTextStyleFields['fontWeight'] {
-  return weight ? 'bold' : 'normal';
+  return isBold ? 'bold' : 'normal';
 }
 
-function fontStyleToBoolean(weight: SvgTextStyleFields['fontStyle']): boolean {
+function isItalicFontStyle(weight: SvgTextStyleFields['fontStyle']): boolean {
   return weight === 'italic';
 }
 
-function booleanToFontStyle(weight: boolean): SvgTextStyleFields['fontStyle'] {
-  return weight ? 'italic' : 'normal';
+function booleanToFontStyle(
+  isItalic: boolean,
+): SvgTextStyleFields['fontStyle'] {
+  return isItalic ? 'italic' : 'normal';
 }

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

@@ -22,14 +22,14 @@ export function Checkbox(props: CheckboxProps) {
   const field = useFieldContext<boolean>();
   const error = field
     .getMeta()
-    .errors.map((e) => e.message)
+    .errors.map((error) => error.message)
     .at(0);
 
   const intent = getIntent(error);
 
   function onChange(event: ChangeEvent<HTMLInputElement>) {
-    const checked = event.target.checked;
-    return field.handleChange(checked);
+    const isChecked = event.target.checked;
+    return field.handleChange(isChecked);
   }
 
   return (

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

@@ -18,7 +18,7 @@ export function ColorPicker(props: ColorPickerProps) {
   const field = useFieldContext<string>();
   const error = field
     .getMeta()
-    .errors.map((e) => e.message)
+    .errors.map((error) => error.message)
     .at(0);
 
   function onChange(color: ChangeCallbackComponentProps) {

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

@@ -48,7 +48,7 @@ export function DraggableNumericInput(props: DraggableNumericInputProps) {
   const field = useFieldContext<string>();
   const error = field
     .getMeta()
-    .errors.map((e) => e.message)
+    .errors.map((error) => error.message)
     .at(0);
 
   const intent = getIntent(error);

package/src/components/form/components/input/index.ts

@@ -12,3 +12,4 @@ export type {
 export type { SubmitButton as _SubmitButton } from './submit_button.js';
 export type { Switch as _Switch } from './switch.js';
 export type { DraggableNumericInput as _DraggableNumericInput } from './draggable_numeric_input.js';
+export type { TextArea as _TextArea } from './textarea.tsx';

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

@@ -16,7 +16,7 @@ export function Input(props: InputProps) {
   const field = useFieldContext<string>();
   const error = field
     .getMeta()
-    .errors.map((e) => e.message)
+    .errors.map((error) => error.message)
     .at(0);
 
   function onChange(event: ChangeEvent<HTMLInputElement>) {

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

@@ -32,7 +32,7 @@ export function NumericInput(props: NumericInputProps) {
   const field = useFieldContext<string>();
   const error = field
     .getMeta()
-    .errors.map((e) => e.message)
+    .errors.map((error) => error.message)
     .at(0);
 
   const intent = getIntent(error);

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

@@ -38,7 +38,7 @@ export function RadioGroup(props: RadioGroupProps) {
   const field = useFieldContext<string>();
   const error = field
     .getMeta()
-    .errors.map((e) => e.message)
+    .errors.map((error) => error.message)
     .at(0);
 
   function onChange(event: ChangeEvent<HTMLInputElement>) {

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

@@ -41,7 +41,7 @@ export function Select(props: SelectProps) {
   const field = useFieldContext<SelectId | undefined>();
   const error = field
     .getMeta()
-    .errors.map((e) => e.message)
+    .errors.map((error) => error.message)
     .at(0);
 
   const intent = getIntent(error);

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

@@ -26,7 +26,7 @@ export function Switch(props: SwitchProps) {
   const field = useFieldContext<boolean>();
   const error = field
     .getMeta()
-    .errors.map((e) => e.message)
+    .errors.map((error) => error.message)
     .at(0);
 
   function onChange(event: ChangeEvent<HTMLInputElement>) {

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

@@ -20,7 +20,7 @@ export function TextArea(props: TextAreaProps) {
   const field = useFieldContext<string>();
   const error = field
     .getMeta()
-    .errors.map((e) => e.message)
+    .errors.map((error) => error.message)
     .at(0);
 
   function onChange(event: ChangeEvent<HTMLTextAreaElement>) {

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

@@ -2,7 +2,7 @@ import type { FormHTMLAttributes, ReactNode } from 'react';
 import { useMemo } from 'react';
 
 import type { Layout } from './form_context.js';
-import { formContext } from './form_context.js';
+import { FormContext } from './form_context.js';
 
 export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
   children: ReactNode;
@@ -24,8 +24,8 @@ export function Form(props: FormProps) {
   }, [layout]);
 
   return (
-    <formContext.Provider value={contextValue}>
+    <FormContext value={contextValue}>
       <form {...otherProps}>{children}</form>
-    </formContext.Provider>
+    </FormContext>
   );
 }

package/src/components/form/components/input_groups/form_context.ts

@@ -1,11 +1,11 @@
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 export type Layout = 'inline' | 'stacked';
 
-export const formContext = createContext<{ layout: Layout }>({
+export const FormContext = createContext<{ layout: Layout }>({
   layout: 'stacked',
 });
 
 export function useFormContext() {
-  return useContext(formContext);
+  return use(FormContext);
 }

package/src/components/form/components/layout/form.tsx

@@ -61,11 +61,7 @@ export const AppForm = minimalForm(
               event.preventDefault();
               if (onSubmitStopPropagation) event.stopPropagation();
 
-              const meta = onSubmitMeta?.(
-                // onSubmit event is not typed properly.
-                // It uses Event instead of SubmitEvent.
-                event as SyntheticEvent<HTMLFormElement, SubmitEvent>,
-              );
+              const meta = onSubmitMeta?.(event);
               void form.handleSubmit(meta);
             }}
             {...domProps}
@@ -92,7 +88,9 @@ type MinimalProps<Props extends { form: unknown }> = Omit<Props, 'form'> & {
     'pushFieldValue' | 'insertFieldValue' | 'replaceFieldValue'
   >;
 };
-type MinimalFunctionComponent<Props> = (props: Props) => ReactNode;
+type MinimalFunctionComponent<Props> = (
+  props: Props,
+) => ReactNode | Promise<ReactNode>;
 
 function minimalForm<Props extends { form: unknown }>(
   component: MinimalFunctionComponent<Props>,

package/src/components/form/utils/validators.ts

@@ -2,15 +2,21 @@ import type { ZodCodec, ZodNumber, ZodOptional, ZodString } from 'zod';
 import { z } from 'zod';
 
 interface StringToNumberOptionalOptions<
-  Str extends ZodString,
-  Num extends ZodNumber,
+  StringSchema extends ZodString,
+  NumberSchema extends ZodNumber,
 > {
-  /** @default z.string() */
-  strSchema?: Str;
-  /** @default z.number() */
-  numSchema?: Num;
-  /** @default Number */
-  parse?: (str: string) => number;
+  /**
+   * @default z.string()
+   */
+  strSchema?: StringSchema;
+  /**
+   * @default z.number()
+   */
+  numSchema?: NumberSchema;
+  /**
+   * @default Number
+   */
+  parse?: (value: string) => number;
 }
 
 /**
@@ -18,28 +24,28 @@ interface StringToNumberOptionalOptions<
  * @param options
  */
 export function stringToNumberOptional<
-  Str extends ZodString = ZodString,
-  Num extends ZodNumber = ZodNumber,
+  StringSchema extends ZodString = ZodString,
+  NumberSchema extends ZodNumber = ZodNumber,
 >(
-  options: StringToNumberOptionalOptions<Str, Num> = {},
-): ZodCodec<ZodOptional<Str>, ZodOptional<Num>> {
-  const strSchema = options?.strSchema ?? (z.string() as Str);
-  const numSchema = options?.numSchema ?? (z.number() as Num);
+  options: StringToNumberOptionalOptions<StringSchema, NumberSchema> = {},
+): ZodCodec<ZodOptional<StringSchema>, ZodOptional<NumberSchema>> {
+  const stringSchema = options?.strSchema ?? (z.string() as StringSchema);
+  const numberSchema = options?.numSchema ?? (z.number() as NumberSchema);
   const parse = options?.parse ?? Number;
 
-  return z.codec(strSchema.optional(), numSchema.optional(), {
-    encode: (num) => {
-      if (num === undefined) return undefined;
+  return z.codec(stringSchema.optional(), numberSchema.optional(), {
+    encode: (value) => {
+      if (value === undefined) return undefined;
 
-      return String(num) as z.output<ZodOptional<Str>>;
+      return String(value) as z.output<ZodOptional<StringSchema>>;
     },
-    decode: (str) => {
-      if (!str) return undefined;
+    decode: (value) => {
+      if (!value) return undefined;
 
-      const value = parse(str);
-      if (Number.isNaN(value)) return undefined;
+      const parsed = parse(value);
+      if (Number.isNaN(parsed)) return undefined;
 
-      return value as z.input<ZodOptional<Num>>;
+      return parsed as z.input<ZodOptional<NumberSchema>>;
     },
   });
 }

package/src/components/fullscreen/fullscreen_context.provider.tsx

@@ -1,11 +1,8 @@
-import type { MutableRefObject, ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { useMemo } from 'react';
 import { useFullScreenHandle } from 'react-full-screen';
 
-import { fullscreenContext } from './fullscreen_context.js';
-
-// Remove for React 19.
-type RefObject<T> = MutableRefObject<T>;
+import { FullscreenContext } from './fullscreen_context.js';
 
 export interface FullscreenProviderProps {
   /**
@@ -33,7 +30,7 @@ export function FullScreenProvider(props: FullscreenProviderProps) {
         onToggleError?.(error, handle.active ? 'exit' : 'enter');
       }
       try {
-        handleToggle().catch(handleError);
+        void handleToggle().catch(handleError);
       } catch (error) {
         handleError(error);
       }
@@ -45,8 +42,6 @@ export function FullScreenProvider(props: FullscreenProviderProps) {
   }, [handle, onToggleError]);
 
   return (
-    <fullscreenContext.Provider value={value}>
-      {children(handle.node)}
-    </fullscreenContext.Provider>
+    <FullscreenContext value={value}>{children(handle.node)}</FullscreenContext>
   );
 }

package/src/components/fullscreen/fullscreen_context.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 interface FullscreenState {
   isFullScreen: boolean;
@@ -14,10 +14,10 @@ const fullscreenContextInit = {
   },
 };
 
-export const fullscreenContext = createContext<ContextType>(
+export const FullscreenContext = createContext<ContextType>(
   fullscreenContextInit,
 );
 
 export function useFullscreen() {
-  return useContext(fullscreenContext);
+  return use(FullscreenContext);
 }

package/src/components/hooks/useDoubleClick.ts

@@ -11,27 +11,27 @@ export function useDoubleClick<EventData>({
   onDoubleClick,
   delay = 250,
 }: UseDoubleClickOptions<EventData>) {
-  const timeout = useRef<number | null>(null);
+  const timeoutRef = useRef<number | null>(null);
   useEffect(() => {
     return () => {
       // Cleanup timeout when the component is unmounted.
-      if (timeout.current) {
-        window.clearTimeout(timeout.current);
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
       }
     };
   }, []);
   const handleClick = useCallback(
     (data: EventData) => {
-      if (timeout.current === null) {
+      if (timeoutRef.current === null) {
         // No recent click. Start timer to wait for possible double click.
-        timeout.current = window.setTimeout(() => {
-          timeout.current = null;
+        timeoutRef.current = window.setTimeout(() => {
+          timeoutRef.current = null;
           onClick?.(data);
         }, delay);
       } else {
         // A click occured recently. Trigger double click event and stop timer.
-        window.clearTimeout(timeout.current);
-        timeout.current = null;
+        window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
         onDoubleClick?.(data);
       }
     },

package/src/components/hooks/useOnClickOutside.ts

@@ -10,6 +10,8 @@ export function useOnClickOutside<T extends Node = Node>(
   const shadowElement = useRootLayoutContext();
 
   useEffect(() => {
+    if (shadowElement === null) return;
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const listener = (event: any) => {
       // Do nothing if clicking ref's element or descendent elements
@@ -20,8 +22,6 @@ export function useOnClickOutside<T extends Node = Node>(
       handler(event);
     };
 
-    if (shadowElement === null) return;
-
     shadowElement.addEventListener('mousedown', listener);
     shadowElement.addEventListener('touchstart', listener);
 

package/src/components/hooks/useOnOff.ts

@@ -1,11 +1,11 @@
 import { useCallback, useState } from 'react';
 
 export function useOnOff(
-  initialValue = false,
+  isInitialOn = false,
 ): [isOn: boolean, setOn: () => void, setOff: () => void, toggle: () => void] {
-  const [isOn, setOnOff] = useState(initialValue);
-  const setOn = useCallback(() => setOnOff(true), []);
-  const setOff = useCallback(() => setOnOff(false), []);
-  const toggle = useCallback(() => setOnOff((isOn) => !isOn), []);
+  const [isOn, setIsOn] = useState(isInitialOn);
+  const setOn = useCallback(() => setIsOn(true), []);
+  const setOff = useCallback(() => setIsOn(false), []);
+  const toggle = useCallback(() => setIsOn((isOn) => !isOn), []);
   return [isOn, setOn, setOff, toggle];
 }

package/src/components/hooks/useSelect.tsx

@@ -55,10 +55,12 @@ export function useSelect<T>(options: UseSelectOptions<T>) {
   const popoverProps = {
     onOpened: (node: HTMLElement) => {
       const firstUl = node.querySelector('ul');
-      if (firstUl) {
-        firstUl.tabIndex = 0;
-        firstUl.focus();
+      if (!firstUl) {
+        return;
       }
+
+      firstUl.tabIndex = 0;
+      firstUl.focus();
     },
   };
   const popoverTargetProps = {

package/src/components/hooks/useToggle.ts

@@ -1,8 +1,8 @@
 import { useOnOff } from './useOnOff.js';
 
 export function useToggle(
-  initialValue = false,
+  isInitialOn = false,
 ): [isOn: boolean, toggle: () => void] {
-  const [isOn, , , toggle] = useOnOff(initialValue);
+  const [isOn, , , toggle] = useOnOff(isInitialOn);
   return [isOn, toggle];
 }

package/src/components/info-panel/InfoPanel.tsx

@@ -7,7 +7,7 @@ import { P, match } from 'ts-pattern';
 import { Button } from '../button/Button.js';
 import { SelectedTotal } from '../selected-total/index.js';
 import { Table, createTableColumnHelper } from '../table/index.js';
-import { shouldForwardPropExcept } from '../utils/shouldForwardPropExcept.js';
+import { forwardAllPropsExcept } from '../utils/forward_all_props_except.ts';
 import * as ValueRenderers from '../value-renderers/index.js';
 
 export interface InfoPanelData {
@@ -26,7 +26,7 @@ interface InfoPanelProps {
 }
 
 const AccordionButton = styled(Button, {
-  shouldForwardProp: shouldForwardPropExcept(['open']),
+  shouldForwardProp: forwardAllPropsExcept(['open']),
 })<{ open?: boolean }>`
   z-index: 1;
   position: sticky;
@@ -132,9 +132,8 @@ export function InfoPanel(props: InfoPanelProps) {
           includes.push({ parameter, value });
           continue;
         }
-        if (valueSearch(value, search)) {
+        if (isValueMatch(value, search)) {
           valueContains.push({ parameter, value });
-          continue;
         }
       }
       return [...exactMatch, ...startsWith, ...includes, ...valueContains];
@@ -198,7 +197,7 @@ interface InfoPanelContentProps {
 
 const InfoPanelContent = memo((props: InfoPanelContentProps) => {
   const { filteredData } = props;
-  const [isOpen, setIsOpen] = useState<string[]>(
+  const [openDescriptions, setOpenDescriptions] = useState<string[]>(() =>
     filteredData.map(({ description }) => description),
   );
   return (
@@ -213,15 +212,15 @@ const InfoPanelContent = memo((props: InfoPanelContentProps) => {
       }}
     >
       {filteredData.map(({ description, data }) => {
-        const open = isOpen.includes(description);
+        const isOpen = openDescriptions.includes(description);
         return (
           <div key={description}>
             <AccordionButton
-              open={open}
+              open={isOpen}
               variant="minimal"
               onClick={() =>
-                setIsOpen((pred) =>
-                  open
+                setOpenDescriptions((pred) =>
+                  isOpen
                     ? pred.filter((o) => o !== description)
                     : [...pred, description],
                 )
@@ -231,7 +230,7 @@ const InfoPanelContent = memo((props: InfoPanelContentProps) => {
             >
               {description}
             </AccordionButton>
-            <InfoPanelCollapse isOpen={open}>
+            <InfoPanelCollapse isOpen={isOpen}>
               <Table
                 data={data}
                 columns={columns}
@@ -272,10 +271,9 @@ function valueCell(value: number | string | object | boolean) {
  * @param search - Value to search for.
  * @returns - If search exist in value
  */
-function valueSearch(
+function isValueMatch(
   value: number | string | object | boolean,
   search: string,
-  lowerCase = true,
 ): boolean {
   let stringValue = match(value)
     .with(P.boolean, String)
@@ -288,9 +286,7 @@ function valueSearch(
   if (stringValue === null) {
     return true;
   }
-  if (lowerCase) {
-    stringValue = stringValue.toLowerCase();
-    search = search.toLowerCase();
-  }
+  stringValue = stringValue.toLowerCase();
+  search = search.toLowerCase();
   return stringValue.includes(search);
 }

package/src/components/input/radio-button-group/RadioButtonGroup.tsx

@@ -1,6 +1,7 @@
 import type { RadioGroupProps, RadioProps } from '@blueprintjs/core';
 import { RadioGroup } from '@blueprintjs/core';
 import styled from '@emotion/styled';
+import type { Mandatory } from '@zakodium/utils';
 import type { ReactElement } from 'react';
 import { Children, cloneElement } from 'react';
 
@@ -29,10 +30,12 @@ const RadioButtonContainer = styled.div<{ size?: RadioProps['size'] }>`
   }
 `;
 
+const defaultOptions: Mandatory<RadioButtonGroupProps['options']> = [];
+
 export function RadioButtonGroup(props: RadioButtonGroupProps) {
   const {
     disabled: groupDisabled = false,
-    options = [],
+    options = defaultOptions,
     name,
     size,
     selectedValue,
@@ -52,7 +55,7 @@ export function RadioButtonGroup(props: RadioButtonGroupProps) {
         {options?.map(({ value, label, disabled }, index) => {
           return (
             <RadioButton
-              // eslint-disable-next-line react/no-array-index-key
+              // eslint-disable-next-line @eslint-react/no-array-index-key
               key={index}
               value={value}
               label={label}

package/src/components/logger/FifoLoggerDialog.tsx

@@ -119,6 +119,7 @@ export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
               intent="danger"
               icon="trash"
               text="Clear logs"
+              // eslint-disable-next-line @eslint-react/immutability
               onClick={() => logger.clear()}
             />
             <Button

package/src/components/logger/FifoLoggerProvider.tsx

@@ -1,15 +1,13 @@
 import type { FifoLogger } from 'fifo-logger';
 import type { ReactNode } from 'react';
 
-import { fifoLoggerContext } from './loggerContext.js';
+import { FifoLoggerContext } from './loggerContext.js';
 
 export function FifoLoggerProvider(props: {
   logger: FifoLogger;
   children: ReactNode;
 }) {
   return (
-    <fifoLoggerContext.Provider value={props.logger}>
-      {props.children}
-    </fifoLoggerContext.Provider>
+    <FifoLoggerContext value={props.logger}>{props.children}</FifoLoggerContext>
   );
 }

package/src/components/logger/loggerContext.ts

@@ -1,4 +1,4 @@
 import type { FifoLogger } from 'fifo-logger';
 import { createContext } from 'react';
 
-export const fifoLoggerContext = createContext<FifoLogger | null>(null);
+export const FifoLoggerContext = createContext<FifoLogger | null>(null);

package/src/components/logger/useFifoLogger.ts

@@ -1,9 +1,9 @@
-import { useContext, useEffect, useState } from 'react';
+import { use, useEffect, useState } from 'react';
 
-import { fifoLoggerContext } from './loggerContext.js';
+import { FifoLoggerContext } from './loggerContext.js';
 
 export function useFifoLogger() {
-  const fifoLogger = useContext(fifoLoggerContext);
+  const fifoLogger = use(FifoLoggerContext);
   if (!fifoLogger) {
     throw new Error('useFifoLogger must be used within a FifoLoggerProvider');
   }
@@ -14,9 +14,11 @@ export function useFifoLogs() {
   const logger = useFifoLogger();
   const [logs, setLogs] = useState(logger.getLogs());
   useEffect(() => {
-    logger.addEventListener('change', () => {
+    function onChange() {
       setLogs(logger.getLogs());
-    });
+    }
+    logger.addEventListener('change', onChange);
+    return () => logger.removeEventListener('change', onChange);
   }, [logger]);
   return logs;
 }