react-science 6.0.2 → 8.0.0

package/src/components/color-picker/react-color/common/{Saturation.jsx → Saturation.tsx}

@@ -1,9 +1,12 @@
-import lodashThrottle from 'lodash/throttle';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import lodashThrottle from 'lodash/throttle.js';
 import { useCallback, useRef } from 'react';
 
-import * as saturation from '../helpers/saturation';
+import * as saturation from '../helpers/saturation.js';
 
-import { useOnChange } from './useOnChange';
+import { useOnChange } from './useOnChange.js';
 
 const styles = {
   color: (hsl) => ({

package/src/components/color-picker/react-color/common/{Swatch.jsx → Swatch.tsx}

@@ -1,7 +1,10 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import { useCallback } from 'react';
 
-import CheckBoard from './CheckBoard';
-import { handleFocus } from './interaction';
+import CheckBoard from './CheckBoard.js';
+import { handleFocus } from './interaction.js';
 
 // interface SwatchProps {
 //   color: string;
@@ -21,7 +24,7 @@ const styles = {
   outline: 'none',
 };
 
-export const Swatch = ({
+const SwatchWithFocus = handleFocus(function Swatch({
   color,
   style,
   onClick,
@@ -30,7 +33,7 @@ export const Swatch = ({
   children,
   focus,
   focusStyle = {},
-}) => {
+}) {
   const transparent = color === 'transparent';
 
   const handleClick = useCallback((e) => onClick?.(color, e), [color, onClick]);
@@ -72,6 +75,6 @@ export const Swatch = ({
       )}
     </div>
   );
-};
+});
 
-export default handleFocus(Swatch);
+export default SwatchWithFocus;

package/src/components/color-picker/react-color/common/index.ts

@@ -0,0 +1,6 @@
+export { default as Alpha } from './Alpha.js';
+export { default as CheckBoard } from './CheckBoard.js';
+export { default as EditableInput } from './EditableInput.js';
+export { default as Saturation } from './Saturation.js';
+export { default as Hue } from './Hue.js';
+export { default as Swatch } from './Swatch.js';

package/src/components/color-picker/react-color/common/{interaction.jsx → interaction.tsx}

@@ -1,6 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import { Component } from 'react';
 
-export const handleFocus = (WrappedComponent, Span = 'span') =>
+export const handleFocus = (WrappedComponent: any, Span = 'span'): any =>
   class Focus extends Component {
     state = { focus: false };
     handleFocus = () => this.setState({ focus: true });

package/src/components/color-picker/react-color/helpers/{alpha.js → alpha.ts}

@@ -1,4 +1,13 @@
-export function calculateChange(e, hsl, direction, initialA, container) {
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+export function calculateChange(
+  e,
+  hsl,
+  direction,
+  initialA,
+  container: Element,
+) {
   const containerWidth = container.clientWidth;
   const containerHeight = container.clientHeight;
   const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;

package/src/components/color-picker/react-color/helpers/{checkBoard.js → checkBoard.ts}

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 const checkBoardCache = {};
 
 export function render(c1, c2, size, ServerCanvas) {

package/src/components/color-picker/react-color/helpers/{color.js → color.ts}

@@ -1,4 +1,7 @@
-import each from 'lodash/each';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import each from 'lodash/each.js';
 import tinycolor from 'tinycolor2';
 
 function simpleCheckForValidColor(data) {
@@ -22,7 +25,7 @@ function simpleCheckForValidColor(data) {
   return checked === passed ? data : false;
 }
 
-function toState(data, oldHue) {
+function toState(data, oldHue?: number) {
   const color = data.hex ? tinycolor(data.hex) : tinycolor(data);
   const hsl = color.toHsl();
   const hsv = color.toHsv();
@@ -56,7 +59,7 @@ function isValidHex(hex) {
     return true;
   }
   // disable hex4 and hex8
-  const lh = String(hex).charAt(0) === '#' ? 1 : 0;
+  const lh = String(hex).startsWith('#') ? 1 : 0;
   return (
     hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid()
   );

package/src/components/color-picker/react-color/helpers/{hue.js → hue.ts}

@@ -1,4 +1,7 @@
-export function calculateChange(e, direction, hsl, container) {
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+export function calculateChange(e, direction, hsl, container: Element) {
   const containerWidth = container.clientWidth;
   const containerHeight = container.clientHeight;
   const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;

package/src/components/color-picker/react-color/helpers/{saturation.js → saturation.ts}

@@ -1,4 +1,7 @@
-export function calculateChange(e, hsl, container) {
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+export function calculateChange(e, hsl, container: Element) {
   const { width: containerWidth, height: containerHeight } =
     container.getBoundingClientRect();
   const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;

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

@@ -1,8 +1,8 @@
-import { CSSProperties, useCallback } from 'react';
+import { type CSSProperties, useCallback } from 'react';
 
-import type { HSL, RGB } from '../ColorPicker';
-import { EditableInput } from '../common';
-import * as color from '../helpers/color';
+import type { HSL, RGB } from '../ColorPicker.js';
+import { EditableInput } from '../common/index.js';
+import * as color from '../helpers/color.js';
 
 interface SketchFieldsProps {
   onChange: (

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

@@ -1,6 +1,6 @@
-import { CSSProperties, MouseEvent, useCallback } from 'react';
+import { type CSSProperties, type MouseEvent, useCallback } from 'react';
 
-import { Swatch } from '../common';
+import { Swatch } from '../common/index.js';
 
 interface SketchPresetColorsProps {
   colors: Array<string | { color: string; title: string }>;

package/src/components/dialog/ConfirmDialog.tsx

@@ -3,11 +3,11 @@ import {
   Dialog,
   DialogBody,
   DialogFooter,
-  DialogProps,
+  type DialogProps,
 } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 
-import { Button } from '../button';
+import { Button } from '../button/index.js';
 
 interface ConfirmDialogProps extends Omit<DialogProps, 'isCloseButtonShown'> {
   onConfirm: () => void;

package/src/components/dialog/index.ts

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

package/src/components/drop-zone/DropZone.tsx

@@ -1,11 +1,11 @@
 import { Button, Colors, NonIdealState } from '@blueprintjs/core';
 import type { IconName } from '@blueprintjs/icons';
 import styled from '@emotion/styled';
-import { CSSProperties, MouseEventHandler, ReactElement } from 'react';
-import { DropzoneOptions, useDropzone } from 'react-dropzone';
+import type { CSSProperties, MouseEventHandler, ReactElement } from 'react';
+import * as dropzone from 'react-dropzone';
 import tinycolor from 'tinycolor2';
 
-export interface DropZoneProps extends DropzoneOptions {
+export interface DropZoneProps extends dropzone.DropzoneOptions {
   borderColor?: string;
   emptyIcon?: IconName;
   emptyTitle?: string;
@@ -92,7 +92,7 @@ function DropZoneContent(
 
   const hasChildren = children !== null;
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+  const { getRootProps, getInputProps, isDragActive } = dropzone.useDropzone({
     noClick: noClick ?? hasChildren,
     ...otherProps,
   });

package/src/components/drop-zone/index.ts

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

package/src/components/forms/index.ts

@@ -1 +1 @@
-export * from './radio-group';
+export * from './radio-group/index.js';

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,8 +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 { Button } from '../button/index.js';
+import { SelectedTotal } from '../selected-total/index.js';
 
 const styles = {
   container: css({
@@ -21,12 +22,6 @@ const styles = {
       minWidth: 'auto',
     },
   }),
-  counterLabel: css({
-    margin: 0,
-    textAlign: 'right',
-    lineHeight: '22px',
-    whiteSpace: 'nowrap',
-  }),
 };
 
 interface PanelHeaderProps {
@@ -45,23 +40,10 @@ export function PanelHeader({
   return (
     <div css={styles.container}>
       <div css={styles.leftContainer}>{children}</div>
-      <p css={styles.counterLabel}>{formatCounterLabel(current, total)}</p>
+      <SelectedTotal count={current} total={total} />
       {onClickSettings && (
         <Button color="black" minimal onClick={onClickSettings} icon="cog" />
       )}
     </div>
   );
 }
-
-function formatCounterLabel(current?: number, total?: number) {
-  if (current !== undefined && total !== undefined) {
-    return `${current} / ${total}`;
-  }
-  if (current !== undefined) {
-    return `[ ${current} ]`;
-  }
-  if (total !== undefined) {
-    return `[ ${total} ]`;
-  }
-  return '';
-}

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,17 +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 * 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,10 +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 { 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;
@@ -186,7 +193,7 @@ export function InfoPanel(props: InfoPanelProps) {
           type="search"
           fill
         />
-        [{count}/{total}]
+        <SelectedTotal count={count} total={total} />
       </div>
       <InfoPanelContent filteredData={filteredData} />
     </div>

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/SelectedTotal.tsx

@@ -0,0 +1,32 @@
+interface SelectedTotalProps {
+  total?: number;
+  count?: number;
+}
+
+export function SelectedTotal(props: SelectedTotalProps) {
+  const { total, count } = props;
+  return (
+    <div
+      style={{
+        whiteSpace: 'nowrap',
+        margin: 0,
+      }}
+    >
+      {formatCounterLabel(count, total)}
+    </div>
+  );
+}
+
+function formatCounterLabel(count?: number, total?: number) {
+  const thinSpace = '\u2009';
+  if (count !== undefined && total !== undefined) {
+    return `[${thinSpace}${count}${thinSpace}/${thinSpace}${total}${thinSpace}]`;
+  }
+  if (count !== undefined) {
+    return `[${thinSpace}${count}${thinSpace}]`;
+  }
+  if (total !== undefined) {
+    return `[${thinSpace}${total}${thinSpace}]`;
+  }
+  return '';
+}

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

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