react-science 19.0.0 → 19.2.0

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

@@ -0,0 +1,67 @@
+import { MenuItem } from '@blueprintjs/core';
+import type { ItemRenderer } from '@blueprintjs/select';
+import type { ReactNode } from 'react';
+
+export type SelectId = string | number | null;
+
+export type GetOptionValue<OptionType, ID extends SelectId> = (
+  option: OptionType | undefined,
+) => ID | undefined;
+export type GetOptionLabel<OptionType> = (
+  option: OptionType | undefined,
+) => ReactNode;
+
+export interface GetItemRendererOptions<OptionType, ID extends SelectId> {
+  selected: ID | undefined;
+  getValue: GetOptionValue<OptionType, ID>;
+  getLabel: GetOptionLabel<OptionType>;
+}
+
+export function getItemRenderer<OptionType, ID extends SelectId>(
+  options: GetItemRendererOptions<OptionType, ID>,
+) {
+  const { selected, getValue, getLabel } = options;
+
+  const render: ItemRenderer<OptionType> = (
+    item,
+    { handleClick, handleFocus, modifiers, index },
+  ) => {
+    const label = getLabel(item);
+    const { active, disabled, matchesPredicate } = modifiers;
+    if (!matchesPredicate) return null;
+    return (
+      <MenuItem
+        active={active}
+        disabled={disabled}
+        selected={selected === getValue(item)}
+        key={index}
+        onClick={handleClick}
+        onFocus={handleFocus}
+        roleStructure="listoption"
+        text={label}
+      />
+    );
+  };
+
+  return render;
+}
+
+export interface SelectOptionLabel {
+  label: string;
+}
+
+export function getSelectLabel(
+  option: SelectOptionLabel | undefined,
+): string | undefined {
+  return option?.label;
+}
+
+export interface SelectOption<ID> extends SelectOptionLabel {
+  value: ID;
+}
+
+export function getSelectValue<Option extends SelectOption<unknown>>(
+  option: Option | undefined,
+): Option['value'] | undefined {
+  return option?.value;
+}

package/src/components/form/context/use_ts_form.ts

@@ -0,0 +1,31 @@
+import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
+
+import { Checkbox } from '../components/input/checkbox.js';
+import { Input } from '../components/input/input.js';
+import { NumericInput } from '../components/input/numeric_input.js';
+import { ResetButton } from '../components/input/reset_button.js';
+import { Select } from '../components/input/select.js';
+import { SubmitButton } from '../components/input/submit_button.js';
+import { Switch } from '../components/input/switch.js';
+
+const { useFormContext, useFieldContext, formContext, fieldContext } =
+  createFormHookContexts();
+
+const { useAppForm, withForm } = createFormHook({
+  fieldContext,
+  formContext,
+  formComponents: {
+    SubmitButton,
+    ResetButton,
+  },
+  fieldComponents: {
+    Input,
+    NumericInput,
+    Checkbox,
+    Select,
+    Switch,
+  },
+});
+
+export const useForm = useAppForm;
+export { useFieldContext, useFormContext, withForm };

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

@@ -0,0 +1,5 @@
+import { useId } from 'react';
+
+export function useFieldId(fieldName: string) {
+  return `input-${fieldName}-${useId()}`;
+}

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

@@ -0,0 +1,5 @@
+import type { Intent } from '@blueprintjs/core';
+
+export function getIntent(error?: string): Intent | undefined {
+  return error !== undefined ? 'danger' : undefined;
+}

package/src/components/hooks/useDoubleClick.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 export interface UseDoubleClickOptions<EventData> {
   onClick: (data: EventData) => void;

package/src/components/hooks/useOnOff.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 export function useOnOff(
   initialValue = false,

package/src/components/index.ts

@@ -4,7 +4,7 @@ export * from './color-picker/index.js';
 export * from './dialog/index.js';
 export * from './doi/index.js';
 export * from './drop-zone/index.js';
-export * from './forms/index.js';
+export * from './input/index.js';
 export * from './fullscreen/index.js';
 export * from './header/index.js';
 export * from './hooks/index.js';
@@ -14,6 +14,7 @@ export * from './root-layout/index.js';
 export * from './split_pane/index.js';
 export * from './table/index.js';
 export * from './toolbar/index.js';
+export * from './form/context/use_ts_form.js';
 export * from './activity_bar/index.js';
 export * from './activity_panel/index.js';
 export * from './utils/index.js';

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

@@ -2,11 +2,11 @@ import { Classes, Collapse, InputGroup } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
-import { match, P } from 'ts-pattern';
+import { P, match } from 'ts-pattern';
 
 import { Button } from '../button/Button.js';
 import { SelectedTotal } from '../selected-total/index.js';
-import { createTableColumnHelper, Table } from '../table/index.js';
+import { Table, createTableColumnHelper } from '../table/index.js';
 import { shouldForwardPropExcept } from '../utils/shouldForwardPropExcept.js';
 import * as ValueRenderers from '../value-renderers/index.js';
 

package/src/components/logger/FifoLoggerDialog.tsx

@@ -5,7 +5,7 @@ import type { CSSProperties } from 'react';
 import { useMemo } from 'react';
 
 import { Button } from '../button/index.js';
-import { createTableColumnHelper, Table } from '../table/index.js';
+import { Table, createTableColumnHelper } from '../table/index.js';
 
 import { useFifoLogger } from './useFifoLogger.js';
 

package/src/components/pdnd.cts

@@ -14,7 +14,7 @@ export {
 export { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 export { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 export {
-  extractClosestEdge,
   attachClosestEdge,
+  extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 export { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';

package/src/components/split_pane/split_pane.tsx

@@ -84,6 +84,12 @@ export interface SplitPaneProps {
    */
   onSizeChange?: (size: SplitPaneSize) => void;
 
+  /**
+   * When set to true, only visible children will be rendered. If a side is closed or has a size of 0, it will not be rendered at all.
+   * When not set or set to false, closed or otherwise 0-sized sides will still be rendered.
+   */
+  unmountChildren?: boolean;
+
   /**
    * The two React elements to show on both sides of the pane.
    * If one of the elements is `null`, the splitter will disappear and the
@@ -105,6 +111,7 @@ export function SplitPane(props: SplitPaneProps) {
     closeThreshold = null,
     onResize,
     onOpenChange,
+    unmountChildren = false,
     children,
   } = props;
 
@@ -113,6 +120,7 @@ export function SplitPane(props: SplitPaneProps) {
     defaultProp: defaultOpen,
     onChange: onOpenChange,
   });
+
   const [size, setSize] = useControllableState<SplitPaneSize>({
     prop: sizeProp,
     defaultProp: defaultSize,
@@ -169,9 +177,26 @@ export function SplitPane(props: SplitPaneProps) {
     );
   }
 
+  function shouldMountSide(side: SplitPaneSide) {
+    if (!unmountChildren) {
+      return true;
+    }
+    return isSideVisible(
+      isOpen ?? defaultOpen,
+      controlledSide === side,
+      splitSize,
+      sizeType,
+      rootSize
+        ? direction === 'horizontal'
+          ? rootSize.width
+          : rootSize.height
+        : 0,
+    );
+  }
+
   return (
     <SplitPaneContainer direction={direction} ref={rootRef}>
-      {children[0] !== null && (
+      {children[0] !== null && shouldMountSide('start') && (
         <SplitSide style={getSplitSideStyle('start')}>{children[0]}</SplitSide>
       )}
       {children[0] !== null && children[1] !== null && (
@@ -185,7 +210,7 @@ export function SplitPane(props: SplitPaneProps) {
         />
       )}
 
-      {children[1] !== null && (
+      {children[1] !== null && shouldMountSide('end') && (
         <SplitSide style={getSplitSideStyle('end')}>{children[1]}</SplitSide>
       )}
     </SplitPaneContainer>
@@ -242,6 +267,22 @@ function percentToFlex(percent: number): number {
   return (flexBase - percent * flexBase) / percent;
 }
 
+function isSideVisible(
+  isOpen: boolean,
+  isControlledSide: boolean,
+  size: number,
+  type: SplitPaneType,
+  parentSize: number,
+) {
+  if (!isOpen) {
+    return !isControlledSide;
+  } else if (type === '%') {
+    return isControlledSide ? size !== 0 : size !== 100;
+  } else {
+    return isControlledSide ? size !== 0 : size !== parentSize;
+  }
+}
+
 function getItemStyle(
   isOpen: boolean,
   isControlledSide: boolean,

package/src/components/table/table_body.tsx

@@ -10,8 +10,8 @@ import { TableRowCell } from './table_row_cell.js';
 import type {
   GetTdProps,
   TableRowPreviewRenderer,
-  TableRowTrRenderer,
   TableRowTrRenderProps,
+  TableRowTrRenderer,
 } from './table_utils.js';
 
 interface TableBodyProps<TData extends RowData> {

package/src/components/toolbar/Toolbar.tsx

@@ -60,7 +60,8 @@ const border = '1px solid rgb(247, 247, 247)';
 
 const ToolbarButton = styled(Button)`
   .${Classes.ICON} {
-    color: ${Colors.DARK_GRAY3};
+    /* Color of icon in button is lighter in Blueprintjs. We want a better contrast in the toolbars */
+    color: ${Colors.DARK_GRAY3} !important;
     width: 16px;
     height: 16px;
     font-size: 12px;

package/lib/components/doi/__tests__/parseDoi.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=parseDoi.test.d.ts.map

package/lib/components/doi/__tests__/parseDoi.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"parseDoi.test.d.ts","sourceRoot":"","sources":["../../../../src/components/doi/__tests__/parseDoi.test.ts"],"names":[],"mappings":""}

package/lib/components/doi/__tests__/parseDoi.test.js

@@ -1,19 +0,0 @@
-import { expect, test } from 'vitest';
-import { normalizeDOI } from '../utils.js';
-const dois = [
-    '/10.3762/bjoc.20.4',
-    '10.3762/bjoc.20.4',
-    'http://dx.doi.org//10.3762/bjoc.20.4',
-    'https://dx.doi.org//10.3762/bjoc.20.4',
-    'http://www.doi.org//10.3762/bjoc.20.4',
-    'https://www.doi.org//10.3762/bjoc.20.4',
-    'http://doi.org//10.3762/bjoc.20.4',
-    'https://doi.org//10.3762/bjoc.20.4',
-];
-test('normalize doi', async () => {
-    for (const doi of dois) {
-        const result = normalizeDOI(doi);
-        expect(result).toBe('10.3762/bjoc.20.4');
-    }
-});
-//# sourceMappingURL=parseDoi.test.js.map

package/lib/components/doi/__tests__/parseDoi.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"parseDoi.test.js","sourceRoot":"","sources":["../../../../src/components/doi/__tests__/parseDoi.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,IAAI,GAAG;IACX,oBAAoB;IACpB,mBAAmB;IACnB,sCAAsC;IACtC,uCAAuC;IACvC,uCAAuC;IACvC,wCAAwC;IACxC,mCAAmC;IACnC,oCAAoC;CACrC,CAAC;AAEF,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,MAAM,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACjC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC3C,CAAC;AACH,CAAC,CAAC,CAAC"}

package/lib/components/forms/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}

package/lib/components/forms/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}

package/lib/components/forms/radio-button-group/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/radio-button-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC"}

package/lib/components/forms/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/forms/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,aAAa,YAAY,CAAC"}

package/lib/components/forms/utils/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/components/forms/utils/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}