react-science 23.1.0 → 24.0.0

package/src/components/table/table_root.tsx

@@ -12,7 +12,7 @@ import type {
 import { useEffect, useMemo, useRef } from 'react';
 import { match } from 'ts-pattern';
 
-import { shouldForwardPropExcept } from '../utils/shouldForwardPropExcept.js';
+import { forwardAllPropsExcept } from '../utils/forward_all_props_except.ts';
 
 import { FlashedRowProvider } from './flash_row/flashed_row_provider.js';
 import type { PreviewTablePropsContextValue } from './preview_table_context.js';
@@ -27,7 +27,7 @@ import { ScrollContainer } from './table_scroll_container.js';
 import type {
   GetTdProps,
   Scroller,
-  TableColumnDef,
+  TableColumnDefinition,
   TableRowPreviewRenderer,
   TableRowTrRenderer,
   VirtualScroller,
@@ -35,7 +35,7 @@ import type {
 import { useTableColumns } from './use_table_columns.js';
 
 const CustomHTMLTable = styled(HTMLTable, {
-  shouldForwardProp: shouldForwardPropExcept([
+  shouldForwardProp: forwardAllPropsExcept([
     'striped',
     'stickyHeader',
     'noHeader',
@@ -83,7 +83,7 @@ interface TableBaseProps<TData extends RowData> {
    * Tanstack table definition of columns in the table.
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  columns: Array<TableColumnDef<TData, any>>;
+  columns: Array<TableColumnDefinition<TData, any>>;
   /**
    * Show borders between each cell and row of the table.
    */
@@ -327,7 +327,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}
@@ -380,19 +380,21 @@ function useCheckProps<TData extends RowData>(
 ) {
   const { onRowOrderChanged, getRowId } = props;
   useEffect(() => {
-    if (onRowOrderChanged) {
-      if (!getRowId) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          'When reordering rows is enabled via the `onRowOrderChanged` prop, the `getRowId` prop must be provided to identify each row unambiguously.',
-        );
-      }
-      if (headers.some((header) => header.column.getCanSort())) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          'When reordering rows is enabled via the `onRowOrderChanged` prop, none of the columns should be sortable as data order will be overriden by internal sorting.',
-        );
-      }
+    if (!onRowOrderChanged) {
+      return;
+    }
+
+    if (!getRowId) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'When reordering rows is enabled via the `onRowOrderChanged` prop, the `getRowId` prop must be provided to identify each row unambiguously.',
+      );
+    }
+    if (headers.some((header) => header.column.getCanSort())) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'When reordering rows is enabled via the `onRowOrderChanged` prop, none of the columns should be sortable as data order will be overriden by internal sorting.',
+      );
     }
   }, [onRowOrderChanged, getRowId, headers]);
 }

package/src/components/table/table_utils.ts

@@ -5,11 +5,10 @@ import type { CSSProperties, ReactNode, TdHTMLAttributes } from 'react';
 
 import type { ReactScienceTableFeatures } from './table_features.js';
 
-export type TableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<
-  ReactScienceTableFeatures,
-  TData,
-  TValue
->;
+export type TableColumnDefinition<
+  TData extends RowData,
+  TValue = unknown,
+> = ColumnDef<ReactScienceTableFeatures, TData, TValue>;
 
 type TableTdProps = TdHTMLAttributes<HTMLTableCellElement>;
 

package/src/components/table/use_table_columns.ts

@@ -2,17 +2,17 @@ import type { RowData } from '@tanstack/react-table';
 import { useMemo } from 'react';
 
 import { defaultTableCell } from './default_table_cell.js';
-import type { TableColumnDef } from './table_utils.js';
+import type { TableColumnDefinition } from './table_utils.js';
 
 export function useTableColumns<TData extends RowData, TValue>(
-  columnDefs: Array<TableColumnDef<TData, TValue>>,
+  columnDefs: Array<TableColumnDefinition<TData, TValue>>,
 ) {
-  return useMemo<Array<TableColumnDef<TData, TValue>>>(() => {
-    return columnDefs.map((columnDef) => {
+  return useMemo<Array<TableColumnDefinition<TData, TValue>>>(() => {
+    return columnDefs.map((columnDefinition) => {
       return {
-        ...columnDef,
-        cell: columnDef.cell ?? defaultTableCell,
-        enableSorting: columnDef.enableSorting ?? false,
+        ...columnDefinition,
+        cell: columnDefinition.cell ?? defaultTableCell,
+        enableSorting: columnDefinition.enableSorting ?? false,
       };
     });
   }, [columnDefs]);

package/src/components/table/use_table_scroll.ts

@@ -59,27 +59,24 @@ export function useTableScroll<TData extends RowData>(options: {
           }
         },
       };
-    } else {
-      return {
-        scrollIntoView(
-          id: string,
-          options?: TableVirtualScrollIntoViewOptions,
-        ) {
-          const element = scrollRef.current?.querySelector(
-            selector`tr[data-row-id="${id}"]`,
-          );
-          if (!element) {
-            // eslint-disable-next-line no-console
-            console.warn(
-              `Could not scroll to row with ID ${id}, the row does not exist`,
-            );
-          }
-          element?.scrollIntoView(options);
-          if (options?.flashRow && options.behavior !== 'smooth') {
-            setFlashedRow(id);
-          }
-        },
-      };
     }
+
+    return {
+      scrollIntoView(id: string, options?: TableVirtualScrollIntoViewOptions) {
+        const element = scrollRef.current?.querySelector(
+          selector`tr[data-row-id="${id}"]`,
+        );
+        if (!element) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Could not scroll to row with ID ${id}, the row does not exist`,
+          );
+        }
+        element?.scrollIntoView(options);
+        if (options?.flashRow && options.behavior !== 'smooth') {
+          setFlashedRow(id);
+        }
+      },
+    };
   }, [virtualizeRows, scrollRef, table, virtualizer, setFlashedRow]);
 }

package/src/components/toolbar/OverflowButton.tsx

@@ -20,10 +20,10 @@ export interface OverButtonProps extends BaseOverButtonProps {
 
 function getPlacement(
   placement: Placement,
-  vertical?: boolean,
+  isVertical?: boolean,
 ): PopoverNextProps['placement'] {
   const isEndPlacement = placement === 'end';
-  return vertical
+  return isVertical
     ? `${isEndPlacement ? 'top' : 'bottom'}-start`
     : `${isEndPlacement ? 'left' : 'right'}-start`;
 }
@@ -78,7 +78,7 @@ export function OverflowButton(props: OverButtonProps) {
   );
 }
 
-function getOverflowShadow(placement: Placement, vertical?: boolean) {
+function getOverflowShadow(placement: Placement, isVertical?: boolean) {
   const color = 'rgba(0, 0, 0, 0.15)';
   const offset = 8;
   const blur = 8;
@@ -86,8 +86,8 @@ function getOverflowShadow(placement: Placement, vertical?: boolean) {
 
   const sign = placement === 'start' ? 1 : -1;
 
-  const x = vertical ? 0 : offset * sign;
-  const y = vertical ? offset * sign : 0;
+  const x = isVertical ? 0 : offset * sign;
+  const y = isVertical ? offset * sign : 0;
 
   return `${x}px ${y}px ${blur}px -${spread}px ${color}`;
 }

package/src/components/toolbar/Toolbar.tsx

@@ -13,7 +13,7 @@ import {
 } from '@blueprintjs/core';
 import type { StyledComponent } from '@emotion/styled';
 import styled from '@emotion/styled';
-import type { MouseEvent, ReactNode } from 'react';
+import type { MouseEvent } from 'react';
 import { useLayoutEffect, useMemo, useRef } from 'react';
 
 import type { ButtonProps } from '../button/index.js';
@@ -22,8 +22,7 @@ import { normalizeIcon } from '../icon.js';
 
 import type { BaseOverButtonProps, Placement } from './OverflowButton.tsx';
 import { OverflowButton } from './OverflowButton.tsx';
-import type { ToolbarContext } from './toolbarContext.js';
-import { toolbarContext, useToolbarContext } from './toolbarContext.js';
+import { ToolbarContext, useToolbarContext } from './toolbarContext.js';
 import { useCheckOverflow } from './useCheckOverflow.tsx';
 
 export type Overflow = 'wrap' | 'collapse';
@@ -163,8 +162,8 @@ export function Toolbar(props: ToolbarProps) {
       }
       ref.current.style.width = 'initial';
       const divRect = ref.current.getBoundingClientRect();
-      const lastElemRect = lastElement.getBoundingClientRect();
-      const width = `${lastElemRect.right - divRect.left}px`;
+      const lastElementRect = lastElement.getBoundingClientRect();
+      const width = `${lastElementRect.right - divRect.left}px`;
       if (ref.current.style.width !== width) {
         ref.current.style.width = width;
       }
@@ -182,7 +181,7 @@ export function Toolbar(props: ToolbarProps) {
 
   if (overflow === 'wrap') {
     return (
-      <ToolbarProvider value={contextValue}>
+      <ToolbarContext value={contextValue}>
         <ButtonGroup
           role="toolbar"
           aria-label={ariaLabel}
@@ -197,12 +196,12 @@ export function Toolbar(props: ToolbarProps) {
         >
           {children}
         </ButtonGroup>
-      </ToolbarProvider>
+      </ToolbarContext>
     );
   }
 
   return (
-    <ToolbarProvider value={contextValue}>
+    <ToolbarContext value={contextValue}>
       <Container vertical={vertical} placement={placement}>
         <ButtonGroup
           role="toolbar"
@@ -234,7 +233,7 @@ export function Toolbar(props: ToolbarProps) {
           </OverflowButton>
         )}
       </Container>
-    </ToolbarProvider>
+    </ToolbarContext>
   );
 }
 
@@ -351,14 +350,3 @@ Toolbar.PopoverItem = function ToolbarPopoverItem(
     />
   );
 };
-
-function ToolbarProvider(props: {
-  value: ToolbarContext;
-  children: ReactNode;
-}) {
-  return (
-    <toolbarContext.Provider value={props.value}>
-      {props.children}
-    </toolbarContext.Provider>
-  );
-}

package/src/components/toolbar/TooltipHelpContent.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import type { Mandatory } from '@zakodium/utils';
 import type { CSSProperties } from 'react';
 
 const shortcutBoxSize = 1.5;
@@ -81,14 +82,18 @@ export interface TooltipItem {
   style?: CSSProperties;
 }
 
+const defaultShortCuts: Mandatory<TooltipItem['shortcuts']> = [];
+const defaultSubTitles: Mandatory<TooltipItem['subTitles']> = [];
+const defaultStyle: Mandatory<TooltipItem['style']> = {};
+
 export function TooltipHelpContent(props: TooltipItem) {
   const {
     title,
-    shortcuts = [],
-    subTitles = [],
+    shortcuts = defaultShortCuts,
+    subTitles = defaultSubTitles,
     description = '',
     link,
-    style = {},
+    style = defaultStyle,
   } = props;
 
   return (
@@ -135,8 +140,8 @@ function ShortCuts({ shortcuts }: { shortcuts: string[] }) {
     >
       {shortcuts.map((shortcut, index) => {
         return (
-          // eslint-disable-next-line react/no-array-index-key
-          <ShortcutItem key={`${index}`}>
+          // eslint-disable-next-line @eslint-react/no-array-index-key
+          <ShortcutItem key={index}>
             <span>{shortcut}</span>
           </ShortcutItem>
         );

package/src/components/toolbar/toolbarContext.ts

@@ -1,23 +1,21 @@
 import type { Intent } from '@blueprintjs/core';
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 import type { PopoverInteractionType } from './Toolbar.js';
 
-export interface ToolbarContext {
+export interface ToolbarContextValue {
   intent?: Intent;
   vertical?: boolean;
   disabled?: boolean;
   popoverInteractionKind?: PopoverInteractionType;
 }
 
-export const toolbarContext = createContext<ToolbarContext | null>(null);
+export const ToolbarContext = createContext<ToolbarContextValue | null>(null);
 
 export function useToolbarContext() {
-  const ctx = useContext(toolbarContext);
+  const ctx = use(ToolbarContext);
   if (!ctx) {
-    throw new Error(
-      'useToolbarContext must be used within a ToolbarContextProvider',
-    );
+    throw new Error('useToolbarContext must be used within a ToolbarContext');
   }
   return ctx;
 }

package/src/components/toolbar/useCheckOverflow.tsx

@@ -26,6 +26,7 @@ export function useCheckOverflow(options: UseCheckOverflowOptions) {
       } else {
         isOverflow = container.scrollWidth > container.clientWidth;
       }
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
       setIsOverflow(isOverflow);
     };
 

package/src/components/utils/debounce.ts

@@ -1,16 +1,16 @@
-export function debounce<T extends (...args: any[]) => any>(
-  func: T,
+export function debounce<T extends (...arguments_: any[]) => any>(
+  function_: T,
   wait: number,
-): (...args: Parameters<T>) => void {
+): (...arguments_: Parameters<T>) => void {
   let timeout: ReturnType<typeof setTimeout> | null;
 
-  return (...args: Parameters<T>) => {
+  return (...arguments_: Parameters<T>) => {
     if (timeout) {
       clearTimeout(timeout);
     }
 
     timeout = setTimeout(() => {
-      func.apply({}, args);
+      function_.apply({}, arguments_);
     }, wait);
   };
 }

package/src/components/utils/{shouldForwardPropExcept.ts → forward_all_props_except.ts}

@@ -1,4 +1,4 @@
-export function shouldForwardPropExcept(properties: string[]) {
+export function forwardAllPropsExcept(properties: string[]) {
   const propsSet = new Set(properties);
   return (property: string) => {
     return !propsSet.has(property);

package/src/components/utils/svg.ts

@@ -42,7 +42,9 @@ export function exportSVG(
   options: ExportSVGOptions = {},
 ): string {
   const {
+    // eslint-disable-next-line unicorn/no-non-function-verb-prefix
     removeFromSelector,
+    // eslint-disable-next-line unicorn/no-non-function-verb-prefix
     addBackground = false,
     backgroundColor = 'white',
     customMutations,
@@ -60,8 +62,6 @@ export function exportSVG(
 
   if (addBackground) {
     const background = document.createElementNS(
-      // XML namespaces are immutable. This false-positive is fixed in eslint-plugin-unicorn v66.
-      // eslint-disable-next-line unicorn/prefer-https
       'http://www.w3.org/2000/svg',
       'rect',
     );
@@ -89,7 +89,9 @@ export async function exportSVGAsPNG(
   options: ExportSVGOptions = {},
 ): Promise<Blob> {
   const {
+    // eslint-disable-next-line unicorn/no-non-function-verb-prefix
     removeFromSelector,
+    // eslint-disable-next-line unicorn/no-non-function-verb-prefix
     addBackground = false,
     backgroundColor = 'white',
     customMutations,
@@ -104,6 +106,7 @@ export async function exportSVGAsPNG(
 
   const img = new Image();
   img.src = URL.createObjectURL(svgBlob);
+  // eslint-disable-next-line unicorn/prefer-await
   await img.decode().finally(() => URL.revokeObjectURL(img.src));
 
   const canvas = new OffscreenCanvas(img.naturalWidth, img.naturalHeight);

package/src/components/utils/svg_path_builder.ts

@@ -1,4 +1,6 @@
-/** Better dom readability */
+/**
+ * Better dom readability.
+ */
 const DEFAULT_SEPARATOR = '\n  ';
 const DEFAULT_CLAMP_VALUE = 1e5;
 
@@ -17,7 +19,23 @@ const DEFAULT_CLAMP_VALUE = 1e5;
  * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d
  */
 export class SVGPathBuilder {
+  /**
+   * Merge many path builders into a new single one.
+   *
+   * @param builders
+   */
+  static concat(...builders: SVGPathBuilder[]): SVGPathBuilder {
+    const builder = new SVGPathBuilder();
+
+    builder.#buffer = builder.#buffer.concat(
+      builders.flatMap((path) => path.getBufferSlice()),
+    );
+
+    return builder;
+  }
+
   #buffer: string[] = [];
+
   clampValue: number | null;
 
   /**
@@ -51,10 +69,10 @@ export class SVGPathBuilder {
   /**
    * Get a shallow copy of internal the buffer.
    *
-   * @param sliceArgs
+   * @param sliceArguments
    */
-  getBufferSlice(...sliceArgs: [start?: number, end?: number]) {
-    return this.#buffer.slice(...sliceArgs);
+  getBufferSlice(...sliceArguments: [start?: number, end?: number]) {
+    return this.#buffer.slice(...sliceArguments);
   }
 
   /**
@@ -107,19 +125,4 @@ export class SVGPathBuilder {
   toString(separator = DEFAULT_SEPARATOR): string {
     return this.#buffer.join(separator);
   }
-
-  /**
-   * Merge many path builders into a new single one.
-   *
-   * @param builders
-   */
-  static concat(...builders: SVGPathBuilder[]): SVGPathBuilder {
-    const builder = new SVGPathBuilder();
-
-    builder.#buffer = builder.#buffer.concat(
-      builders.flatMap((path) => path.getBufferSlice()),
-    );
-
-    return builder;
-  }
 }

package/src/components/utils/throttle.ts

@@ -1,18 +1,20 @@
-export function throttle<T extends (...args: any[]) => void>(
-  func: T,
+export function throttle<T extends (...arguments_: any[]) => void>(
+  function_: T,
   limit: number,
 ): T {
-  let inThrottle: boolean;
+  let isInThrottle: boolean;
 
-  const fun = (...args: any[]) => {
-    if (!inThrottle) {
-      func.apply({}, args);
-      inThrottle = true;
-
-      setTimeout(() => {
-        inThrottle = false;
-      }, limit);
+  const fun = (...arguments_: any[]) => {
+    if (isInThrottle) {
+      return;
     }
+
+    function_.apply({}, arguments_);
+    isInThrottle = true;
+
+    setTimeout(() => {
+      isInThrottle = false;
+    }, limit);
   };
 
   return fun as T;

package/lib/components/utils/shouldForwardPropExcept.d.ts

@@ -1,2 +0,0 @@
-export declare function shouldForwardPropExcept(properties: string[]): (property: string) => boolean;
-//# sourceMappingURL=shouldForwardPropExcept.d.ts.map

package/lib/components/utils/shouldForwardPropExcept.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shouldForwardPropExcept.d.ts","sourceRoot":"","sources":["../../../src/components/utils/shouldForwardPropExcept.ts"],"names":[],"mappings":"AAAA,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,EAAE,IAElD,UAAU,MAAM,aAGzB"}

package/lib/components/utils/shouldForwardPropExcept.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shouldForwardPropExcept.js","sourceRoot":"","sources":["../../../src/components/utils/shouldForwardPropExcept.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,uBAAuB,CAAC,UAAoB;IAC1D,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC;IACrC,OAAO,CAAC,QAAgB,EAAE,EAAE;QAC1B,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC,CAAC;AACJ,CAAC"}