react-science 19.10.4 → 20.0.0

package/src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -1,5 +1,5 @@
-import type { PopoverProps } from '@blueprintjs/core';
-import { Popover } from '@blueprintjs/core';
+import type { PopoverNextProps } from '@blueprintjs/core';
+import { PopoverNext } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 
 import FixedColorPreview from '../preview/FixedColorPreview.js';
@@ -16,7 +16,7 @@ export interface ColorPickerDropdownProps extends Pick<
   | 'onChangeComplete'
   | 'onBlur'
 > {
-  popoverProps?: Omit<PopoverProps, 'content'>;
+  popoverProps?: Omit<PopoverNextProps, 'content'>;
 
   /**
    * To link with label
@@ -45,10 +45,12 @@ export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
   const { hex } = colorHelper.toState(color || 'white');
 
   return (
-    <Popover
+    <PopoverNext
       targetProps={{ style: { width: '100%' } }}
       content={<ColorPicker color={color} {...otherProps} />}
-      minimal
+      shouldReturnFocusOnClose={false}
+      animation="minimal"
+      arrow={false}
       {...popoverProps}
     >
       <ColorPickerRoot type="button" id={id}>
@@ -56,6 +58,6 @@ export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
           <FixedColorPreview color={hex} />
         </ColorPickerPreview>
       </ColorPickerRoot>
-    </Popover>
+    </PopoverNext>
   );
 }

package/src/components/color-picker/gradient_select/gradient_select.tsx

@@ -26,7 +26,7 @@ const GradientSelectChevron = styled(FaChevronDown)`
   right: 0.5rem;
 `;
 
-const GradientSelectOption = styled.li`
+const GradientSelectOption = styled.div`
   display: flex;
   flex-direction: column;
   padding-top: 5px;

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

@@ -6,6 +6,7 @@ import { defaultColorPalette } from '../palette.js';
 
 import { Alpha, CheckBoard, Hue, Saturation } from './common/index.js';
 import * as colorHelper from './helpers/color.js';
+import type { SketchFieldsProps } from './sketch/SketchFields.js';
 import SketchFields from './sketch/SketchFields.js';
 import SketchPresetColors from './sketch/SketchPresetColors.js';
 
@@ -168,11 +169,14 @@ export function ColorPicker(props: ColorPickerProps) {
     setState(colorHelper.toState(color, 0));
   }
 
-  const handleChange = useCallback(
-    (data: any, event: any) => {
+  const handleChange = useCallback<SketchFieldsProps['onChange']>(
+    (data, event) => {
       const isValidColor = colorHelper.simpleCheckForValidColor(data);
       if (isValidColor) {
-        const colors = colorHelper.toState(data, data.h || state.oldHue);
+        const colors = colorHelper.toState(
+          data,
+          ('h' in data && data.h) || state.oldHue,
+        );
         setState(colors);
         if (onChangeComplete) {
           debounceRef.current(onChangeComplete, colors, event);
@@ -245,7 +249,7 @@ export function ColorPicker(props: ColorPickerProps) {
       />
       <SketchPresetColors
         colors={presetColors}
-        onClick={(data, e) => handleChange?.(data as ChangeCallbackProps, e)}
+        onClick={(data, e) => handleChange(data, e)}
         onSwatchHover={handleSwatchHover}
       />
     </div>

package/src/components/color-picker/react-color/common/EditableInput.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 
 const DEFAULT_ARROW_OFFSET = 1;
 
@@ -11,8 +11,6 @@ const VALID_KEY_CODES = new Set([UP_KEY_CODE, DOWN_KEY_CODE]);
 const isValidKeyCode = (keyCode) => VALID_KEY_CODES.has(keyCode);
 const getNumberValue = (value) => Number(String(value).replaceAll('%', ''));
 
-let idCounter = 1;
-
 const styles = {
   wrap: {
     position: 'relative',
@@ -27,7 +25,7 @@ const EditableInput = (props) => {
   const inputRef = useRef();
   const valueRef = useRef<number>(props.value);
 
-  const inputId = useRef(`rc-editable-input-${idCounter++}`).current;
+  const inputId = `rc-editable-input-${useId()}`;
 
   useEffect(() => {
     valueRef.current = props.value;

package/src/components/color-picker/react-color/common/Hue.tsx

@@ -59,28 +59,35 @@ const styles = {
 };
 
 const Hue = (props) => {
+  const {
+    direction = 'horizontal',
+    hsl,
+    style,
+    pointer,
+    onBlur,
+    onChange,
+  } = props;
+  const { borderRadius, boxShadow } = style;
+
   const containerRef = useRef();
 
   const handleChange = useCallback(
     (e) => {
       const change = hue.calculateChange(
         e,
-        props.direction,
-        props.hsl,
+        direction,
+        hsl,
         containerRef.current,
       );
-      if (change && typeof props.onChange === 'function') {
-        props.onChange(change, e);
+      if (change && typeof onChange === 'function') {
+        onChange(change, e);
       }
     },
-    [props],
+    [direction, hsl, onChange],
   );
 
   const handleMouseDown = useOnChange(handleChange);
 
-  const { direction = 'horizontal', hsl, style, pointer } = props;
-  const { borderRadius, boxShadow } = style;
-
   return (
     <div style={styles.hue(borderRadius, boxShadow)}>
       <div
@@ -89,7 +96,7 @@ const Hue = (props) => {
         onMouseDown={handleMouseDown}
         onTouchMove={handleChange}
         onTouchStart={handleChange}
-        onBlur={props.onBlur}
+        onBlur={onBlur}
       >
         <div style={styles.pointer(direction, hsl)}>
           {pointer ? (

package/src/components/color-picker/react-color/sketch/SketchFields.tsx

@@ -5,7 +5,7 @@ import type { HSL, RGB } from '../ColorPicker.js';
 import { EditableInput } from '../common/index.js';
 import * as color from '../helpers/color.js';
 
-interface SketchFieldsProps {
+export interface SketchFieldsProps {
   onChange: (
     data: (RGB | HSL | { hex: string }) & { source: string },
     e: Event,

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

@@ -1,6 +1,6 @@
 import type { RadioGroupProps as BPRadioGroupProps } from '@blueprintjs/core';
 import { RadioGroup as BPRadioGroup } from '@blueprintjs/core';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 
 import { useFieldContext } from '../../context/use_ts_form.ts';
 import { useFormContext } from '../input_groups/form_context.ts';
@@ -41,7 +41,7 @@ export function RadioGroup(props: RadioGroupProps) {
     .errors.map((e) => e.message)
     .at(0);
 
-  function onChange(event: FormEvent<HTMLInputElement>) {
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
     return field.handleChange(event.currentTarget.value);
   }
 

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

@@ -1,4 +1,4 @@
-import type { MutableRefObject, ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import { useMemo } from 'react';
 import { useFullScreenHandle } from 'react-full-screen';
 
@@ -9,7 +9,7 @@ export interface FullscreenProviderProps {
    * Callback providing the ref which should be passed to the element that can be displayed fullscreen.
    * @param ref
    */
-  children: (ref: MutableRefObject<HTMLDivElement | null>) => ReactNode;
+  children: (ref: RefObject<HTMLDivElement | null>) => ReactNode;
   /**
    * Callback which will be called in case toggling results in an error.
    * @param error - The error that happened. Value is not necessarily an instance of `Error` and may even be `undefined`.

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

@@ -277,19 +277,20 @@ function valueSearch(
   search: string,
   lowerCase = true,
 ): boolean {
+  let stringValue = match(value)
+    .with(P.boolean, String)
+    .with(P.number, String)
+    .with(P.string, (value) => {
+      return value === 'true' ? 'yes' : value === 'false' ? 'no' : value;
+    })
+    .with({}, (value) => JSON.stringify(value))
+    .otherwise(() => null);
+  if (stringValue === null) {
+    return true;
+  }
   if (lowerCase) {
-    value = String(value as unknown).toLowerCase();
+    stringValue = stringValue.toLowerCase();
     search = search.toLowerCase();
   }
-  return match(value)
-    .with(P.boolean, (value) => String(value).includes(search))
-    .with(P.number, (value) => String(value).includes(search))
-    .with(P.string, (value) => {
-      const newValue =
-        value === 'true' ? 'yes' : value === 'false' ? 'no' : value;
-
-      return newValue.includes(search);
-    })
-    .with({}, (value) => JSON.stringify(value).includes(search))
-    .otherwise(() => true);
+  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 { ReactElement } from 'react';
 import { Children, cloneElement } from 'react';
 
 import { RadioButton } from './RadioButton.js';
@@ -68,13 +69,17 @@ export function RadioButtonGroup(props: RadioButtonGroupProps) {
             return child;
           }
           if (child.type === RadioButton) {
-            return cloneElement(child, {
-              ...child.props,
+            const radioChild = child as ReactElement<
+              RadioProps,
+              typeof RadioButton
+            >;
+            return cloneElement(radioChild, {
+              ...radioChild.props,
               size,
               name,
               onChange,
-              checked: child.props.value === selectedValue,
-              disabled: groupDisabled || child.props.disabled,
+              checked: radioChild.props.value === selectedValue,
+              disabled: groupDisabled || radioChild.props.disabled,
             });
           }
           return child;

package/src/components/root-layout/root_layout.tsx

@@ -1,5 +1,5 @@
 import { BlueprintProvider, FocusStyleManager } from '@blueprintjs/core';
-import type { CSSProperties, MutableRefObject, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 
 import { AccordionProvider } from '../accordion/index.js';
@@ -43,9 +43,7 @@ export function RootLayout(props: RootLayoutProps) {
           id="root-layout"
           ref={(node) => {
             if (node) {
-              const mutableRef =
-                fullscreenRef as MutableRefObject<HTMLDivElement>;
-              mutableRef.current = node;
+              fullscreenRef.current = node;
               refCallback(node);
             }
           }}

package/src/components/split_pane/split_pane.tsx

@@ -223,7 +223,7 @@ interface SplitterProps {
   direction: SplitPaneDirection;
   isOpen: boolean;
   isResizing: boolean;
-  splitterRef: RefObject<HTMLDivElement>;
+  splitterRef: RefObject<HTMLDivElement | null>;
 }
 
 function Splitter(props: SplitterProps) {

package/src/components/split_pane/use_split_pane_size.tsx

@@ -12,7 +12,7 @@ import { serializeSize } from './split_pane_helpers.js';
 interface UseSplitPaneSizeOptions {
   controlledSide: SplitPaneSide;
   direction: SplitPaneDirection;
-  splitterRef: RefObject<HTMLDivElement>;
+  splitterRef: RefObject<HTMLDivElement | null>;
   sizeType: SplitPaneType;
   onSizeChange: (newSize: ParsedSplitPaneSize) => void;
   onResize?: (newSize: SplitPaneSize) => void;

package/src/components/table/flash_row/use_flash_row_effect.ts

@@ -6,7 +6,7 @@ import { useFlashedRowContext } from './flashed_row_context.js';
 
 export function useFlashRowEffect(
   id: string,
-  tableRowRef: RefObject<HTMLTableRowElement>,
+  tableRowRef: RefObject<HTMLTableRowElement | null>,
 ) {
   const [flashedItemId, setFlashedItemId] = useFlashedRowContext();
   useEffect(() => {

package/src/components/table/reorder_rows/draggable_row_context.ts

@@ -5,7 +5,7 @@ import type { DraggableItemState } from './item_data.js';
 
 export interface DraggableRowContext {
   state: DraggableItemState;
-  dragHandleRef: RefObject<HTMLButtonElement>;
+  dragHandleRef: RefObject<HTMLButtonElement | null>;
 }
 
 export const draggableRowContext = createContext<DraggableRowContext | null>(

package/src/components/table/reorder_rows/draggable_row_tr.tsx

@@ -73,7 +73,7 @@ export function TableDraggableRowTr<TData extends RowData>(
       );
     }
 
-    const data = getItemData(row as Row<unknown>, instanceId);
+    const data = getItemData(row, instanceId);
 
     return combine(
       draggable({

package/src/components/table/reorder_rows/item_data.ts

@@ -11,7 +11,10 @@ export interface ItemData {
   [key: symbol]: unknown;
 }
 
-export function getItemData(row: Row<unknown>, instanceId: symbol): ItemData {
+export function getItemData<RowType>(
+  row: Row<RowType>,
+  instanceId: symbol,
+): ItemData {
   return {
     [itemKey]: true,
     id: row.id,

package/src/components/table/reorder_rows/item_order_provider.tsx

@@ -43,14 +43,16 @@ export function ItemOrderProvider<T = unknown>(
     [items, onOrderChanged],
   );
 
-  const value = useMemo(
-    () => ({
+  const value = useMemo(() => {
+    // This assertion is necessary because the provider cannot contain the
+    // T type instantiated by this component.
+    const contextItems = items as Array<Row<unknown>>;
+    return {
       reorderItem,
-      items: items as Array<Row<unknown>>,
+      items: contextItems,
       instanceId,
-    }),
-    [reorderItem, items, instanceId],
-  );
+    };
+  }, [reorderItem, items, instanceId]);
 
   return (
     <itemOrderContext.Provider value={value}>

package/src/components/table/reorder_rows/use_drop_monitor.ts

@@ -21,7 +21,7 @@ import { useItemOrder } from './item_order_context.js';
  * @param enabled Enable or disable the monitoring.
  */
 export function useDropMonitor(
-  scrollElementRef: RefObject<Element>,
+  scrollElementRef: RefObject<Element | null>,
   enabled: boolean,
 ) {
   const { reorderItem, items } = useItemOrder();

package/src/components/table/table_body.tsx

@@ -40,9 +40,11 @@ export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
     rows,
     tdStyle,
     getTdProps,
+    isReorderingEnabled,
+    renderRowPreview,
     renderRowTr = getDefaultRenderRowTr(
-      props.isReorderingEnabled,
-      props.renderRowPreview as TableRowPreviewRenderer<unknown>,
+      isReorderingEnabled,
+      renderRowPreview as TableRowPreviewRenderer<unknown>,
     ) as TableRowTrRenderer<TData>,
     virtualizer,
     virtualizeRows,

package/src/components/table/table_root.tsx

@@ -215,7 +215,7 @@ interface RegularTableProps<
    * By default, the table itself is used as the scrollable element, but
    * you must style it to make it scrollable.
    */
-  scrollableElementRef?: RefObject<Element>;
+  scrollableElementRef?: RefObject<Element | null>;
 }
 
 interface VirtualizedTableProps<
@@ -282,6 +282,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     count: data.length,
     getScrollElement: () => virtualScrollElementRef.current,
     estimateSize:
+      // eslint-disable-next-line unicorn/consistent-destructuring
       (props.virtualizeRows && props.estimatedRowHeight) || (() => 0),
     overscan: 5,
   });
@@ -338,6 +339,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
                   virtualScrollElementRef
                 : // When not virtualized, ScrollContainer does not render a container, only its children,
                   // And the scrollable element is provided by the user or by default, the <table> element.
+                  // eslint-disable-next-line unicorn/consistent-destructuring
                   props.scrollableElementRef || tableRef
             }
             scrollToRowRef={scrollToRowRef}

package/src/components/table/table_row.tsx

@@ -4,12 +4,12 @@ import { useRef } from 'react';
 
 import { useFlashRowEffect } from './flash_row/use_flash_row_effect.js';
 
-export interface TableRowTrProps {
-  row: Row<unknown>;
+export interface TableRowTrProps<RowType> {
+  row: Row<RowType>;
   trProps: JSX.IntrinsicElements['tr'];
 }
 
-export function TableRowTr(props: TableRowTrProps) {
+export function TableRowTr<RowType>(props: TableRowTrProps<RowType>) {
   const { row, trProps } = props;
   const tableRowRef = useRef<HTMLTableRowElement>(null);
   useFlashRowEffect(row.id, tableRowRef);

package/src/components/table/table_scroll_container.tsx

@@ -28,7 +28,7 @@ interface ScrollContainerProps {
   /**
    * A ref to the effective scroll container.
    */
-  scrollRef: RefObject<Element>;
+  scrollRef: RefObject<Element | null>;
   /**
    * The user provided ref to attach the scroll callbacks to.
    * It is set by the ScrollContainer component if the table is virtualized.
@@ -74,7 +74,7 @@ export function ScrollContainer(props: ScrollContainerProps) {
 }
 
 interface ContainerWithReorderingProps {
-  scrollElementRef: RefObject<Element>;
+  scrollElementRef: RefObject<Element | null>;
   isReorderingEnabled: boolean;
   children: ReactNode;
 }
@@ -91,7 +91,7 @@ function ContainerVirtual(props: ContainerWithReorderingProps) {
 }
 
 interface NoContainerProps {
-  scrollElementRef: RefObject<Element>;
+  scrollElementRef: RefObject<Element | null>;
   enabled: boolean;
   children: ReactNode;
 }

package/src/components/table/use_table_scroll.ts

@@ -19,7 +19,7 @@ export function useTableScroll<TData extends RowData>(options: {
   /**
    * A ref to the effective scroll container.
    */
-  scrollRef: RefObject<Element>;
+  scrollRef: RefObject<Element | null>;
   /*
   Tanstack table instance.
    */
@@ -33,7 +33,6 @@ export function useTableScroll<TData extends RowData>(options: {
   const { scrollToRowRef, virtualizeRows, scrollRef, table, virtualizer } =
     options;
 
-  // @ts-expect-error We cannot call the hook conditionally to satisfy the type checker
   useImperativeHandle(scrollToRowRef, () => {
     if (virtualizeRows) {
       return {

package/src/components/toolbar/OverflowButton.tsx

@@ -1,5 +1,5 @@
-import type { PopoverProps, TooltipProps } from '@blueprintjs/core';
-import { Popover } from '@blueprintjs/core';
+import type { PopoverNextProps, TooltipProps } from '@blueprintjs/core';
+import { PopoverNext } from '@blueprintjs/core';
 import type { ReactNode } from 'react';
 
 import type { ButtonProps } from '../button/Button.tsx';
@@ -10,7 +10,7 @@ export type Placement = 'start' | 'end';
 
 export interface BaseOverButtonProps extends ButtonProps {
   placement?: Placement;
-  popoverProps?: PopoverProps;
+  popoverProps?: PopoverNextProps;
 }
 export interface OverButtonProps extends BaseOverButtonProps {
   vertical?: boolean;
@@ -21,7 +21,7 @@ export interface OverButtonProps extends BaseOverButtonProps {
 function getPlacement(
   placement: Placement,
   vertical?: boolean,
-): PopoverProps['placement'] {
+): PopoverNextProps['placement'] {
   const isEndPlacement = placement === 'end';
   return vertical
     ? `${isEndPlacement ? 'top' : 'bottom'}-start`
@@ -41,17 +41,16 @@ export function OverflowButton(props: OverButtonProps) {
     ...otherProps
   } = props;
   return (
-    <Popover
-      minimal
+    <PopoverNext
+      shouldReturnFocusOnClose={false}
+      animation="minimal"
+      arrow={false}
       disabled={disabled}
       placement={getPlacement(placement, vertical)}
       interactionKind="hover"
       hasBackdrop={false}
       enforceFocus={false}
       autoFocus={false}
-      modifiers={{
-        flip: { enabled: false },
-      }}
       {...popoverProps}
       content={
         <Toolbar
@@ -75,7 +74,7 @@ export function OverflowButton(props: OverButtonProps) {
         }}
         {...otherProps}
       />
-    </Popover>
+    </PopoverNext>
   );
 }