react-science 19.1.0 → 19.3.0

package/src/components/form/components/input_groups/form_group.tsx

@@ -0,0 +1,126 @@
+import type { Intent } from '@blueprintjs/core';
+import { Classes } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { ReactNode } from 'react';
+
+import type { Layout } from './form.js';
+import { useFormContext } from './form.js';
+
+const INPUT_HEIGHT = 30;
+
+const FormContainer = styled.div<{
+  layout?: Layout;
+}>`
+  min-height: ${INPUT_HEIGHT}px;
+  width: 100%;
+  display: grid;
+  margin: 0;
+  grid-template-columns: ${(props) =>
+    props.layout === 'inline' ? '[label] 30% [input] 70%' : '1fr'};
+  grid-template-rows: ${(props) =>
+    props.layout === 'inline' ? 'auto auto' : 'auto'};
+`;
+
+const RequiredSpan = styled.span`
+  color: red;
+`;
+
+const ContainerElement = styled.div<{
+  height?: number | 'auto';
+  fullWidth?: boolean;
+  layout?: Layout;
+}>`
+  display: inline-block;
+  grid-column: ${(props) =>
+    props.fullWidth
+      ? '1 / -1'
+      : props.layout === 'inline'
+        ? 'input'
+        : '1 / -1'};
+  height: ${(props) =>
+    props.height === 'auto' ? props.height : `${props.height}px`};
+  width: fit-content;
+`;
+
+const Label = styled.label<{ layout: Layout }>`
+  padding-top: calc(${INPUT_HEIGHT}px - 26px);
+  grid-column: ${(props) => (props.layout === 'inline' ? 'label' : '1 / -1')};
+  height: 30px;
+
+  @media (width < 48rem) {
+    padding: 0;
+  }
+`;
+
+const ErrorAndHelpText = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export interface FormGroupInputProps {
+  label?: string;
+  required?: boolean;
+  placeholder?: string;
+  helpText?: string;
+  layout?: Layout;
+  fullWidth?: boolean;
+}
+
+interface FormGroupProps {
+  label?: string;
+  intent?: Intent;
+  name: string;
+  required?: boolean;
+  helpText?: string;
+  children?: ReactNode;
+  error?: string;
+  layout?: Layout;
+  fullWidth?: boolean;
+}
+
+export function FormGroup(props: FormGroupProps) {
+  const {
+    label,
+    intent,
+    name,
+    required,
+    children,
+    helpText,
+    error,
+    layout,
+    fullWidth = false,
+  } = props;
+
+  const { layout: formLayout } = useFormContext();
+
+  return (
+    <FormContainer
+      layout={layout || formLayout}
+      className={`${Classes.FORM_GROUP} ${Classes.intentClass(intent)}`}
+    >
+      {label && (
+        <Label
+          layout={layout || formLayout}
+          className={Classes.LABEL}
+          htmlFor={name}
+        >
+          {label}{' '}
+          {required && (
+            <RequiredSpan className={Classes.TEXT_MUTED}>*</RequiredSpan>
+          )}
+        </Label>
+      )}
+      <ContainerElement fullWidth={fullWidth} layout={layout || formLayout}>
+        {children}
+
+        <ErrorAndHelpText>
+          {helpText && (
+            <span className={Classes.FORM_HELPER_TEXT}>{helpText}</span>
+          )}
+
+          {error && <span className={Classes.FORM_HELPER_TEXT}>{error}</span>}
+        </ErrorAndHelpText>
+      </ContainerElement>
+    </FormContainer>
+  );
+}

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

@@ -0,0 +1,175 @@
+import type { FormGroup, FormGroupProps } from '@blueprintjs/core';
+import type { SelectProps as BPSelectProps } from '@blueprintjs/select';
+import { Select as BPSelect } from '@blueprintjs/select';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import { useCallback, useMemo } from 'react';
+
+import { Button } from '../../../button/index.js';
+import type {
+  GetOptionLabel,
+  GetOptionValue,
+  SelectId,
+  SelectOption,
+  SelectOptionLabel,
+} from '../util/select.js';
+import {
+  getItemRenderer,
+  getSelectLabel,
+  getSelectValue,
+} from '../util/select.js';
+
+type FieldGroupProps = Pick<FormGroupProps, 'label' | 'inline'>;
+
+export interface SelectPropsRenderButtonState<OptionType> {
+  error: string | undefined;
+  selectedOption: OptionType | undefined;
+}
+
+interface SelectCustomProps<OptionType, ID extends SelectId> {
+  renderButton?: (state: SelectPropsRenderButtonState<OptionType>) => ReactNode;
+  onChange?: (selected: ID | undefined, option: OptionType | undefined) => void;
+  id?: string;
+  selected?: ID;
+
+  required?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type SelectGetValue<OptionType, ID extends SelectId> = {
+  /**
+   * Optional if OptionType extends SelectOption<ID>
+   * @default getSelectValue
+   */
+  getValue: GetOptionValue<OptionType, ID>;
+};
+
+type SelectGetValueProps<OptionType, ID extends SelectId> =
+  OptionType extends SelectOption<ID>
+    ? Partial<SelectGetValue<OptionType, ID>>
+    : SelectGetValue<OptionType, ID>;
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type SelectGetLabel<OptionType> = {
+  /**
+   * Optional if OptionType extends SelectOptionLabel
+   * @default getSelectLabel
+   */
+  getLabel: GetOptionLabel<OptionType>;
+};
+
+type SelectGetLabelProps<OptionType> = OptionType extends SelectOptionLabel
+  ? Partial<SelectGetLabel<OptionType>>
+  : SelectGetLabel<OptionType>;
+
+export type SelectProps<OptionType, ID extends SelectId> = FieldGroupProps &
+  Pick<
+    BPSelectProps<OptionType>,
+    | 'placeholder'
+    | 'items'
+    | 'className'
+    | 'disabled'
+    | 'popoverProps'
+    | 'filterable'
+    | 'itemDisabled'
+    | 'itemListPredicate'
+    | 'resetOnClose'
+  > &
+  Pick<ComponentProps<typeof FormGroup>, 'helperText' | 'intent'> &
+  SelectCustomProps<OptionType, ID> &
+  SelectGetValueProps<OptionType, ID> &
+  SelectGetLabelProps<OptionType>;
+
+/**
+ * A wrapper for the BlueprintJS Select component that integrates with react-hook-form.
+ * Store in form the selected value.
+ * Find selected option getValue.
+ * Display options with getLabel.
+ *
+ * @param props
+ * @constructor
+ */
+
+interface RealSelectProps<OptionType, ID extends SelectId>
+  extends Pick<BPSelectProps<OptionType>, 'filterable' | 'items'> {
+  onBlur: () => void;
+  renderButton?: (
+    state: SelectPropsRenderButtonState<OptionType>,
+    onBlur: () => void,
+  ) => ReactNode;
+  disabled?: boolean;
+  selected?: ID;
+  onChange?: (selected: ID | undefined, option: OptionType | undefined) => void;
+  getLabel?: GetOptionLabel<OptionType>;
+  getValue?: GetOptionValue<OptionType, ID>;
+  intent?: FormGroupProps['intent'];
+  name?: string;
+}
+
+export function Select<
+  OptionType extends SelectOption<ID>,
+  ID extends SelectId,
+>(props: RealSelectProps<OptionType, ID>): ReactElement {
+  const {
+    renderButton,
+    disabled,
+    selected,
+    getLabel: _getLabel,
+    getValue: _getValue,
+    intent,
+    // Weirdly, setting the filterable prop on BP's Select component activates the filter input
+    filterable = false,
+    items,
+    onChange,
+    onBlur,
+    name = null,
+  } = props;
+
+  const getValue: GetOptionValue<OptionType, ID> = _getValue ?? getSelectValue;
+  const getLabel: GetOptionLabel<OptionType> = _getLabel ?? getSelectLabel;
+
+  const selectedOption = useMemo(
+    () => items.find((item) => getValue(item) === selected),
+    [getValue, items, selected],
+  );
+
+  const itemRenderer = useMemo(() => {
+    return getItemRenderer<OptionType, ID>({
+      selected,
+      getValue,
+      getLabel,
+    });
+  }, [getLabel, getValue, selected]);
+
+  const onItemSelect = useCallback(
+    (option: OptionType | undefined) => {
+      const value = getValue(option);
+      onChange?.(value, option);
+    },
+    [getValue, onChange],
+  );
+
+  return (
+    <BPSelect<OptionType>
+      filterable={filterable}
+      items={items}
+      onItemSelect={onItemSelect}
+      itemRenderer={itemRenderer}
+      disabled={disabled}
+    >
+      {renderButton ? (
+        renderButton({ selectedOption, error: undefined }, onBlur)
+      ) : (
+        <Button
+          id={name || undefined}
+          text={getLabel(selectedOption) || 'Select ...'}
+          endIcon="double-caret-vertical"
+          variant="outlined"
+          intent={intent}
+          disabled={disabled}
+          style={{ minWidth: 180 }}
+          onBlur={onBlur}
+        />
+      )}
+    </BPSelect>
+  );
+}

package/src/components/form/components/layout/Section.tsx

@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+import type { ReactNode } from 'react';
+
+const ContainerInformation = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  > h2 {
+    font-weight: 600;
+    font-size: 1rem;
+    line-height: 1.75rem;
+  }
+
+  > h3 {
+    color: #737373;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+  }
+`;
+
+const Container = styled.div`
+  margin-top: 15px;
+  gap: 5px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const ContainerContent = styled.div`
+  outline: 1px solid rgb(17 24 39 / 5%);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 0.75rem;
+  padding: 7px 10px 2px;
+`;
+
+interface SectionProps {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}
+
+export function Section(props: SectionProps) {
+  const { title, description, children } = props;
+
+  return (
+    <Container>
+      <ContainerInformation>
+        <h2>{title}</h2>
+        <h3>{description}</h3>
+      </ContainerInformation>
+
+      <ContainerContent>{children}</ContainerContent>
+    </Container>
+  );
+}

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,33 @@
+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';
+import { Section } from '../components/layout/Section.js';
+
+const { useFormContext, useFieldContext, formContext, fieldContext } =
+  createFormHookContexts();
+
+const { useAppForm, withForm } = createFormHook({
+  fieldContext,
+  formContext,
+  formComponents: {
+    SubmitButton,
+    ResetButton,
+    Section,
+  },
+  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/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,8 +14,10 @@ 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';
 export * from './selected-total/index.js';
+export * from './svg/index.js';
 export * as ValueRenderers from './value-renderers/index.js';

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

@@ -110,9 +110,10 @@ export function InfoPanel(props: InfoPanelProps) {
       const includes: InfoPanelDatum[] = [];
       const valueContains: InfoPanelDatum[] = [];
 
-      for (const [parameter, value] of Object.entries(data).sort(([a], [b]) => {
-        return a.localeCompare(b);
-      })) {
+      const sortedDataEntries = Object.entries(data);
+      sortedDataEntries.sort(([a], [b]) => a.localeCompare(b));
+
+      for (const [parameter, value] of sortedDataEntries) {
         const lowerKey = parameter.toLowerCase();
         const lowerSearch = search.toLowerCase();
         if (lowerKey === lowerSearch) {

package/src/components/{forms → input}/radio-button-group/RadioButton.tsx

@@ -12,12 +12,12 @@ const HiddenInput = styled.input`
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border-width: 0;
 
   /* Label associated with the checked input. */
-  &:checked + label {
+  :checked + label {
     color: ${enabledColor};
     border-color: ${enabledColor};
     opacity: ${(props) => (props.disabled ? 0.25 : 1)};
@@ -25,7 +25,7 @@ const HiddenInput = styled.input`
   }
 
   /* Next label after the one that is checked. */
-  &:checked + label + input + label {
+  :checked + label + input + label {
     border-left-width: 0;
   }
 `;
@@ -46,7 +46,7 @@ const Label = styled.label<{ size?: RadioProps['size']; disabled?: boolean }>`
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   white-space: nowrap;
 
-  &:hover {
+  :hover {
     color: ${enabledColor};
   }
 `;

package/src/components/{forms → input}/radio-button-group/RadioButtonGroup.tsx

@@ -12,14 +12,14 @@ export interface RadioButtonGroupProps extends RadioGroupProps {
 const RadioButtonContainer = styled.div<{ size?: RadioProps['size'] }>`
   display: flex;
 
-  & label:first-of-type {
+  label:first-of-type {
     border-bottom-left-radius: ${(props) =>
       props.size === 'large' ? '6px' : '4px'};
     border-top-left-radius: ${(props) =>
       props.size === 'large' ? '6px' : '4px'};
   }
 
-  & label:last-of-type {
+  label:last-of-type {
     border-right-width: 1px;
     border-bottom-right-radius: ${(props) =>
       props.size === 'large' ? '6px' : '4px'};

package/src/components/root-layout/css-reset/customPreflight.ts

@@ -25,7 +25,7 @@ export const CustomDivPreflight = styled.div`
   height: 100%;
   position: relative;
 
-  &:fullscreen::backdrop,
+  :fullscreen::backdrop,
   *:fullscreen::backdrop {
     /* Override user agent default */
     background-color: white;

package/src/components/split_pane/use_split_pane_size.tsx

@@ -42,63 +42,64 @@ export function useSplitPaneSize(options: UseSplitPaneSizeOptions) {
   }, [onResize, onSizeChange]);
 
   useEffect(() => {
-    if (isResizing) {
-      let lastSize: ParsedSplitPaneSize | null = null;
-      function moveCallback(event: PointerEvent) {
-        if (!splitterRef.current) return;
-        const { clientX, clientY } = event;
-        const parentDiv = splitterRef.current.parentElement as HTMLDivElement;
-        const bounds = parentDiv.getBoundingClientRect();
-        const parentDimension =
-          direction === 'horizontal'
-            ? parentDiv.clientWidth
-            : parentDiv.clientHeight;
-
-        const client =
-          direction === 'horizontal'
-            ? clientX - bounds.left
-            : clientY - bounds.top;
-
-        const centralizingValue =
-          direction === 'horizontal'
-            ? splitterRef.current.clientWidth / 2
-            : splitterRef.current.clientHeight / 2;
-
-        const value =
-          controlledSide === 'start' ? client : parentDimension - client;
-
-        if (sizeType === 'px') {
-          const newSize = getValueFromSplitter(value - centralizingValue, {
-            min: 0,
-            max: parentDimension,
-          });
-          lastSize = { value: newSize, type: sizeType };
-          onSizeChangeRef.current?.(lastSize);
-        } else if (sizeType === '%') {
-          const valueDiff = (value / parentDimension) * 100;
-          const newSize = getValueFromSplitter(valueDiff, {
-            min: 0,
-            max: 100,
-          });
-          lastSize = { value: newSize, type: sizeType };
-          onSizeChangeRef.current?.(lastSize);
-        }
+    if (!isResizing) {
+      return;
+    }
+    let lastSize: ParsedSplitPaneSize | null = null;
+    function moveCallback(event: PointerEvent) {
+      if (!splitterRef.current) return;
+      const { clientX, clientY } = event;
+      const parentDiv = splitterRef.current.parentElement as HTMLDivElement;
+      const bounds = parentDiv.getBoundingClientRect();
+      const parentDimension =
+        direction === 'horizontal'
+          ? parentDiv.clientWidth
+          : parentDiv.clientHeight;
+
+      const client =
+        direction === 'horizontal'
+          ? clientX - bounds.left
+          : clientY - bounds.top;
+
+      const centralizingValue =
+        direction === 'horizontal'
+          ? splitterRef.current.clientWidth / 2
+          : splitterRef.current.clientHeight / 2;
+
+      const value =
+        controlledSide === 'start' ? client : parentDimension - client;
+
+      if (sizeType === 'px') {
+        const newSize = getValueFromSplitter(value - centralizingValue, {
+          min: 0,
+          max: parentDimension,
+        });
+        lastSize = { value: newSize, type: sizeType };
+        onSizeChangeRef.current?.(lastSize);
+      } else if (sizeType === '%') {
+        const valueDiff = (value / parentDimension) * 100;
+        const newSize = getValueFromSplitter(valueDiff, {
+          min: 0,
+          max: 100,
+        });
+        lastSize = { value: newSize, type: sizeType };
+        onSizeChangeRef.current?.(lastSize);
       }
-      function upCallback() {
-        setIsResizing(false);
-        if (lastSize) {
-          onResizeRef.current?.(serializeSize(lastSize));
-        }
+    }
+    function upCallback() {
+      setIsResizing(false);
+      if (lastSize) {
+        onResizeRef.current?.(serializeSize(lastSize));
       }
+    }
 
-      window.addEventListener('pointermove', moveCallback);
-      window.addEventListener('pointerup', upCallback);
+    window.addEventListener('pointermove', moveCallback);
+    window.addEventListener('pointerup', upCallback);
 
-      return () => {
-        window.removeEventListener('pointermove', moveCallback);
-        window.removeEventListener('pointerup', upCallback);
-      };
-    }
+    return () => {
+      window.removeEventListener('pointermove', moveCallback);
+      window.removeEventListener('pointerup', upCallback);
+    };
   }, [isResizing, controlledSide, direction, sizeType, splitterRef]);
 
   return {