react-science 7.0.0 → 8.0.1

package/src/components/forms/radio-group/ButtonRadioItem.tsx

@@ -2,9 +2,9 @@
 import { css } from '@emotion/react';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 
-import { enabledColor, InputVariant } from '../styles';
+import { enabledColor, type InputVariant } from '../styles.js';
 
-import { RadioOption, RadioGroupProps } from './RadioGroup';
+import type { RadioGroupProps, RadioOption } from './RadioGroup.js';
 
 const buttonStyles = {
   container: css({

package/src/components/forms/radio-group/RadioGroup.tsx

@@ -1,11 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import * as RadioGroupRadix from '@radix-ui/react-radio-group';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { InputVariant } from '../styles';
+import type { InputVariant } from '../styles.js';
 
-import { ButtonRadioItem } from './ButtonRadioItem';
+import { ButtonRadioItem } from './ButtonRadioItem.js';
 
 export interface RadioOption {
   value: string;

package/src/components/forms/radio-group/index.ts

@@ -1 +1 @@
-export * from './RadioGroup';
+export * from './RadioGroup.js';

package/src/components/forms/utils/SubText.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 export interface SubTextProps {
   help?: string;

package/src/components/forms/utils/index.ts

@@ -1 +1 @@
-export * from './SubText';
+export * from './SubText.js';

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-alert */
-import { ReactNode, useEffect, useMemo, useReducer, useRef } from 'react';
+import { type ReactNode, useEffect, useMemo, useReducer, useRef } from 'react';
 
-import { fullscreenContext, useFullscreen } from './fullscreen_context';
+import { fullscreenContext, useFullscreen } from './fullscreen_context.js';
 
 type ElementType = HTMLDivElement & {
   webkitRequestFullscreen(): Promise<void>;

package/src/components/fullscreen/fullscreen_toolbar_button.tsx

@@ -1,6 +1,6 @@
-import { Toolbar } from '../toolbar';
+import { Toolbar } from '../toolbar/index.js';
 
-import { useFullscreen } from './fullscreen_context';
+import { useFullscreen } from './fullscreen_context.js';
 
 export function FullscreenToolbarButton() {
   const { toggle } = useFullscreen();

package/src/components/fullscreen/index.ts

@@ -1,3 +1,3 @@
-export * from './fullscreen_context';
-export * from './fullscreen_context.provider';
-export * from './fullscreen_toolbar_button';
+export * from './fullscreen_context.js';
+export * from './fullscreen_context.provider.js';
+export * from './fullscreen_toolbar_button.js';

package/src/components/header/Header.tsx

@@ -2,7 +2,7 @@
 import { css } from '@emotion/react';
 import type { ReactElement } from 'react';
 
-import type { ToolbarProps } from '../toolbar/Toolbar';
+import type { ToolbarProps } from '../toolbar/Toolbar.js';
 
 type ReactProps = ReactElement<ToolbarProps>;
 

package/src/components/header/PanelHeader.tsx

@@ -1,9 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { Button } from '../button/Button';
-import { SelectedTotal } from '../selected-total/SelectedTotal';
+import { Button } from '../button/index.js';
+import { SelectedTotal } from '../selected-total/index.js';
 
 const styles = {
   container: css({

package/src/components/header/index.ts

@@ -1,2 +1,2 @@
-export * from './Header';
-export * from './PanelHeader';
+export * from './Header.js';
+export * from './PanelHeader.js';

package/src/components/hooks/index.ts

@@ -1,7 +1,7 @@
-export * from './useDoubleClick';
-export * from './useHashSearchParams';
-export * from './useModifiedPopper';
-export * from './useOnClickOutside';
-export * from './useOnOff';
-export * from './useToggle';
-export * from './useSelect';
+export * from './useDoubleClick.js';
+export * from './useHashSearchParams.js';
+export * from './useModifiedPopper.js';
+export * from './useOnClickOutside.js';
+export * from './useOnOff.js';
+export * from './useToggle.js';
+export * from './useSelect.js';

package/src/components/hooks/useModifiedPopper.ts

@@ -1,6 +1,6 @@
-import { Placement } from '@popperjs/core';
-import { HTMLAttributes, useState } from 'react';
-import { Modifier, usePopper } from 'react-popper';
+import { type Placement } from '@popperjs/core';
+import { type HTMLAttributes, useState } from 'react';
+import { type Modifier, usePopper } from 'react-popper';
 
 const sameWidthModifier: Modifier<'sameWidth'> = {
   name: 'sameWidth',

package/src/components/hooks/useOnClickOutside.ts

@@ -1,6 +1,6 @@
-import { useEffect, RefObject } from 'react';
+import { type RefObject, useEffect } from 'react';
 
-import { useRootLayoutContext } from '../root-layout/root_layout_context';
+import { useRootLayoutContext } from '../root-layout/root_layout_context.js';
 
 export function useOnClickOutside<T extends Node = Node>(
   ref: RefObject<T>,

package/src/components/hooks/useSelect.tsx

@@ -1,6 +1,6 @@
 import { MenuItem } from '@blueprintjs/core';
-import { ItemRenderer } from '@blueprintjs/select';
-import { ReactNode, useState } from 'react';
+import { type ItemRenderer } from '@blueprintjs/select';
+import { type ReactNode, useState } from 'react';
 
 type FilterType<SourceType, Type> = Pick<
   SourceType,

package/src/components/hooks/useToggle.ts

@@ -1,4 +1,4 @@
-import { useOnOff } from './useOnOff';
+import { useOnOff } from './useOnOff.js';
 
 export function useToggle(
   initialValue = false,

package/src/components/index.ts

@@ -1,18 +1,18 @@
-export * from './accordion/index';
-export * from './button/index';
-export * from './color-picker/index';
-export * from './dialog/index';
-export * from './drop-zone/index';
-export * from './forms/index';
-export * from './fullscreen/index';
-export * from './header/index';
-export * from './hooks/index';
-export * from './info-panel/index';
-export * from './logger/index';
-export * from './root-layout/index';
-export * from './split-pane/index';
-export * from './table/index';
-export * from './toolbar/index';
-export * from './utils/index';
-export * from './selected-total/index';
-export * as ValueRenderers from './value-renderers/index';
+export * from './accordion/index.js';
+export * from './button/index.js';
+export * from './color-picker/index.js';
+export * from './dialog/index.js';
+export * from './drop-zone/index.js';
+export * from './forms/index.js';
+export * from './fullscreen/index.js';
+export * from './header/index.js';
+export * from './hooks/index.js';
+export * from './info-panel/index.js';
+export * from './logger/index.js';
+export * from './root-layout/index.js';
+export * from './split-pane/index.js';
+export * from './table/index.js';
+export * from './toolbar/index.js';
+export * from './utils/index.js';
+export * from './selected-total/index.js';
+export * as ValueRenderers from './value-renderers/index.js';

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

@@ -2,11 +2,17 @@
 import { Icon, InputGroup } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { CSSProperties, memo, useCallback, useMemo, useState } from 'react';
+import {
+  type CSSProperties,
+  memo,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 
-import { SelectedTotal } from '../selected-total/SelectedTotal';
-import { createTableColumnHelper, Table } from '../table';
-import * as ValueRenderers from '../value-renderers';
+import { SelectedTotal } from '../selected-total/index.js';
+import { createTableColumnHelper, Table } from '../table/index.js';
+import * as ValueRenderers from '../value-renderers/index.js';
 
 export interface InfoPanelData {
   description: string;

package/src/components/info-panel/index.ts

@@ -1 +1 @@
-export * from './InfoPanel';
+export * from './InfoPanel.js';

package/src/components/logger/FifoLoggerDialog.tsx

@@ -4,12 +4,12 @@ import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { LogEntry } from 'fifo-logger';
-import { CSSProperties, useMemo } from 'react';
+import { type CSSProperties, useMemo } from 'react';
 
-import { Button } from '../button';
-import { createTableColumnHelper, Table } from '../table';
+import { Button } from '../button/index.js';
+import { createTableColumnHelper, Table } from '../table/index.js';
 
-import { useFifoLogger } from './useFifoLogger';
+import { useFifoLogger } from './useFifoLogger.js';
 
 const ActionsFooter = styled.div`
   display: flex;

package/src/components/logger/FifoLoggerProvider.tsx

@@ -1,7 +1,7 @@
 import type { FifoLogger } from 'fifo-logger';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { fifoLoggerContext } from './loggerContext';
+import { fifoLoggerContext } from './loggerContext.js';
 
 export function FifoLoggerProvider(props: {
   logger: FifoLogger;

package/src/components/logger/FifoLoggerToolbarItem.tsx

@@ -2,11 +2,11 @@ import { Intent } from '@blueprintjs/core';
 import type { LogEntry } from 'fifo-logger';
 import { useState } from 'react';
 
-import { useOnOff } from '../hooks';
-import { Toolbar } from '../toolbar';
+import { useOnOff } from '../hooks/index.js';
+import { Toolbar } from '../toolbar/index.js';
 
-import { FifoLoggerDialog } from './FifoLoggerDialog';
-import { useFifoLogs } from './useFifoLogger';
+import { FifoLoggerDialog } from './FifoLoggerDialog.js';
+import { useFifoLogs } from './useFifoLogger.js';
 
 export function FifoLoggerToolbarItem() {
   const [seen, setSeen] = useState(0);

package/src/components/logger/index.ts

@@ -1,4 +1,4 @@
-export * from './FifoLoggerProvider';
-export * from './FifoLoggerDialog';
-export * from './FifoLoggerToolbarItem';
-export * from './useFifoLogger';
+export * from './FifoLoggerProvider.js';
+export * from './FifoLoggerDialog.js';
+export * from './FifoLoggerToolbarItem.js';
+export * from './useFifoLogger.js';

package/src/components/logger/useFifoLogger.ts

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 
-import { fifoLoggerContext } from './loggerContext';
+import { fifoLoggerContext } from './loggerContext.js';
 
 export function useFifoLogger() {
   const fifoLogger = useContext(fifoLoggerContext);

package/src/components/root-layout/index.ts

@@ -1 +1 @@
-export * from './root_layout';
+export * from './root_layout.js';

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

@@ -1,12 +1,17 @@
 import { BlueprintProvider, FocusStyleManager } from '@blueprintjs/core';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { CSSProperties, ReactNode, useCallback, useState } from 'react';
-
-import { AccordionProvider } from '../accordion';
-
-import { CustomDivPreflight } from './css-reset/customPreflight';
-import { queryClient } from './query_client';
-import { RootLayoutProvider } from './root_layout_context.provider';
+import {
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useState,
+} from 'react';
+
+import { AccordionProvider } from '../accordion/index.js';
+
+import { CustomDivPreflight } from './css-reset/customPreflight.js';
+import { queryClient } from './query_client.js';
+import { RootLayoutProvider } from './root_layout_context.provider.js';
 
 FocusStyleManager.onlyShowFocusOnTabs();
 

package/src/components/root-layout/root_layout_context.provider.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { rootLayoutContext } from './root_layout_context';
+import { rootLayoutContext } from './root_layout_context.js';
 
 export function RootLayoutProvider(props: {
   children: ReactNode;

package/src/components/selected-total/index.ts

@@ -1 +1 @@
-export * from './SelectedTotal';
+export * from './SelectedTotal.js';

package/src/components/split-pane/SplitPane.tsx

@@ -1,20 +1,20 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import {
-  PointerEvent as ReactPointerEvent,
-  CSSProperties,
-  ReactNode,
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  type RefObject,
+  useEffect,
+  useReducer,
   useRef,
   useState,
-  RefObject,
-  useReducer,
-  useEffect,
 } from 'react';
 import useResizeObserver from 'use-resize-observer';
 
-import { useOnOff } from '../hooks/useOnOff';
+import { useOnOff } from '../hooks/useOnOff.js';
 
-import { useSplitPaneSize } from './useSplitPaneSize';
+import { useSplitPaneSize } from './useSplitPaneSize.js';
 
 export type SplitPaneDirection = 'vertical' | 'horizontal';
 export type SplitPaneSide = 'start' | 'end';
@@ -118,6 +118,8 @@ export function SplitPane(props: SplitPaneProps) {
     onResize,
   });
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore Module exists.
   const rootSize = useResizeObserver<HTMLDivElement>();
 
   let isFinalClosed = isPaneClosed;

package/src/components/split-pane/index.ts

@@ -1 +1 @@
-export * from './SplitPane';
+export * from './SplitPane.js';

package/src/components/split-pane/useSplitPaneSize.tsx

@@ -5,7 +5,7 @@ import type {
   SplitPaneSide,
   SplitPaneSize,
   SplitPaneType,
-} from './SplitPane';
+} from './SplitPane.js';
 
 interface UseSplitPaneSizeOptions {
   controlledSide: SplitPaneSide;

package/src/components/table/default_table_cell.tsx

@@ -1,6 +1,6 @@
 import type { CellContext, RowData } from '@tanstack/react-table';
 
-import * as ValueRenderers from '../value-renderers';
+import * as ValueRenderers from '../value-renderers/index.js';
 
 // TODO: support Date
 export function defaultTableCell<TData extends RowData, TValue = unknown>(

package/src/components/table/index.ts

@@ -1,2 +1,2 @@
-export * from './table_root';
-export * from './table_utils';
+export * from './table_root.js';
+export * from './table_utils.js';

package/src/components/table/table_body.tsx

@@ -1,11 +1,11 @@
 import type { Row, RowData } from '@tanstack/react-table';
 import { Fragment } from 'react';
 
-import { TableRowCell } from './table_row_cell';
+import { TableRowCell } from './table_row_cell.js';
 import type {
   TableRowTrRenderer,
   TableRowTrRendererProps,
-} from './table_utils';
+} from './table_utils.js';
 
 interface TableBodyProps<TData extends RowData> {
   rows: Array<Row<TData>>;

package/src/components/table/table_header.tsx

@@ -1,7 +1,7 @@
 import type { Header, RowData } from '@tanstack/react-table';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
-import { TableHeaderCell } from './table_header_cell';
+import { TableHeaderCell } from './table_header_cell.js';
 
 const headerStyle: CSSProperties = {
   position: 'sticky',

package/src/components/table/table_root.tsx

@@ -8,12 +8,12 @@ import {
   type TableOptions,
   useReactTable,
 } from '@tanstack/react-table';
-import { TableHTMLAttributes } from 'react';
+import type { TableHTMLAttributes } from 'react';
 
-import { TableBody } from './table_body';
-import { TableHeader } from './table_header';
-import type { TableColumnDef, TableRowTrRenderer } from './table_utils';
-import { useTableColumns } from './use_table_columns';
+import { TableBody } from './table_body.js';
+import { TableHeader } from './table_header.js';
+import type { TableColumnDef, TableRowTrRenderer } from './table_utils.js';
+import { useTableColumns } from './use_table_columns.js';
 
 export interface TableProps<TData extends RowData> {
   data: TData[];

package/src/components/table/use_table_columns.ts

@@ -1,8 +1,8 @@
 import type { ColumnDef, RowData } from '@tanstack/react-table';
 import { useMemo } from 'react';
 
-import { defaultTableCell } from './default_table_cell';
-import type { TableColumnDef } from './table_utils';
+import { defaultTableCell } from './default_table_cell.js';
+import type { TableColumnDef } from './table_utils.js';
 
 export function useTableColumns<TData extends RowData>(
   columnDefs: Array<TableColumnDef<TData>>,

package/src/components/toolbar/PanelPreferencesToolbar.tsx

@@ -2,7 +2,7 @@
 import { css } from '@emotion/react';
 import type { ReactNode } from 'react';
 
-import { Toolbar } from './Toolbar';
+import { Toolbar } from './Toolbar.js';
 
 interface PanelPreferencesToolbarProps {
   title?: ReactNode;

package/src/components/toolbar/Toolbar.tsx

@@ -1,32 +1,32 @@
 /** @jsxImportSource @emotion/react */
 import {
   ButtonGroup,
-  ButtonGroupProps,
+  type ButtonGroupProps,
   Classes,
   Colors,
   Icon,
   Intent,
   Popover,
-  PopoverProps,
-  TooltipProps,
+  type PopoverProps,
+  type TooltipProps,
 } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import {
   cloneElement,
-  MouseEvent,
-  ReactNode,
+  type MouseEvent,
+  type ReactNode,
   useLayoutEffect,
   useMemo,
   useRef,
 } from 'react';
 
-import { Button, ButtonProps } from '../button';
+import { Button, type ButtonProps } from '../button/index.js';
 
 import {
-  ToolbarContext,
+  type ToolbarContext,
   toolbarContext,
   useToolbarContext,
-} from './toolbarContext';
+} from './toolbarContext.js';
 
 export type PopoverInteractionType =
   | 'click'
@@ -274,9 +274,10 @@ Toolbar.PopoverItem = function ToolbarPopoverItem(
           height: 'fit-content',
         },
       }}
-      renderTarget={() => <Toolbar.Item isPopover {...itemProps} />}
       {...other}
-    />
+    >
+      <Toolbar.Item isPopover {...itemProps} />
+    </Popover>
   );
 };
 

package/src/components/toolbar/TooltipHelpContent.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const shortcutBoxSize = 1.5;
 
@@ -137,10 +137,11 @@ function ShortCuts({ shortcuts }: { shortcuts: string[] }) {
         textWrap: 'nowrap',
       }}
     >
-      {shortcuts.map((key) => {
+      {shortcuts.map((shortcut, index) => {
         return (
-          <ShortcutItem key={key}>
-            <span>{key}</span>
+          // eslint-disable-next-line react/no-array-index-key
+          <ShortcutItem key={`${index}`}>
+            <span>{shortcut}</span>
           </ShortcutItem>
         );
       })}

package/src/components/toolbar/index.ts

@@ -1,3 +1,3 @@
-export * from './Toolbar';
-export * from './PanelPreferencesToolbar';
-export * from './TooltipHelpContent';
+export * from './Toolbar.js';
+export * from './PanelPreferencesToolbar.js';
+export * from './TooltipHelpContent.js';

package/src/components/toolbar/toolbarContext.ts

@@ -1,7 +1,7 @@
 import { Intent } from '@blueprintjs/core';
 import { createContext, useContext } from 'react';
 
-import { PopoverInteractionType } from './Toolbar';
+import type { PopoverInteractionType } from './Toolbar.js';
 
 export interface ToolbarContext {
   intent?: Intent;

package/src/components/utils/index.ts

@@ -1 +1 @@
-export * from './assert';
+export * from './assert.js';

package/src/components/value-renderers/Boolean.tsx

@@ -1,4 +1,4 @@
-import type { ValueRenderersProps } from '.';
+import type { ValueRenderersProps } from './index.js';
 
 interface BooleanProps extends ValueRenderersProps {
   value?: boolean;

package/src/components/value-renderers/Color.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 
-import type { ValueRenderersProps } from '.';
+import type { ValueRenderersProps } from './index.js';
 
 interface ColorProps extends ValueRenderersProps {
   value?: string;

package/src/components/value-renderers/Component.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 
-import type { ValueRenderersProps } from '.';
+import type { ValueRenderersProps } from './index.js';
 
 interface ComponentProps extends ValueRenderersProps {
   children?: ReactElement | ReactElement[];

package/src/components/value-renderers/Number.tsx

@@ -1,4 +1,4 @@
-import type { ValueRenderersProps } from '.';
+import type { ValueRenderersProps } from './index.js';
 
 interface NumberProps extends ValueRenderersProps {
   value?: number;

package/src/components/value-renderers/ObjectRenderer.tsx

@@ -1,6 +1,6 @@
 import { ObjectInspector } from 'react-inspector';
 
-import type { ValueRenderersProps } from '.';
+import type { ValueRenderersProps } from './index.js';
 
 interface ObjectRendererProps extends ValueRenderersProps {
   value?: object;

package/src/components/value-renderers/Text.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 
-import type { ValueRenderersProps } from '.';
+import type { ValueRenderersProps } from './index.js';
 
 interface TextProps extends ValueRenderersProps {
   value?: string;

package/src/components/value-renderers/Title.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 
-import type { ValueRenderersProps } from '.';
+import type { ValueRenderersProps } from './index.js';
 
 export interface TitleProps extends ValueRenderersProps {
   value?: string;