react-science 19.1.0 → 19.2.0

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

@@ -0,0 +1,196 @@
+import type { FormGroupProps } from '@blueprintjs/core';
+import { FormGroup } 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 { useInputId } from '../hooks/use_input_id.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;
+  id?: string;
+  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>;
+  formGroupProps: Pick<
+    ComponentProps<typeof FormGroup>,
+    'helperText' | 'intent' | 'label' | 'className' | 'inline'
+  > & {
+    required?: boolean;
+  };
+}
+
+export function Select<
+  OptionType extends SelectOption<ID>,
+  ID extends SelectId,
+>(props: RealSelectProps<OptionType, ID>): ReactElement {
+  const {
+    renderButton,
+    id,
+    disabled,
+    selected,
+    getLabel: _getLabel,
+    getValue: _getValue,
+    formGroupProps: { className, helperText, inline, intent, label, required },
+    // Weirdly, setting the filterable prop on BP's Select component activates the filter input
+    filterable = false,
+    items,
+    onChange,
+    onBlur,
+  } = 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],
+  );
+
+  const inputId = useInputId(id, null);
+
+  return (
+    <FormGroup
+      label={label}
+      labelFor={inputId}
+      helperText={helperText}
+      intent={intent}
+      style={{ margin: 0, position: 'relative' }}
+      className={className}
+      inline={inline}
+      disabled={disabled}
+      labelInfo={required && <span style={{ color: 'red' }}>*</span>}
+    >
+      <BPSelect<OptionType>
+        filterable={filterable}
+        items={items}
+        onItemSelect={onItemSelect}
+        itemRenderer={itemRenderer}
+        disabled={disabled}
+      >
+        {renderButton ? (
+          renderButton({ selectedOption, error: undefined }, onBlur)
+        ) : (
+          <Button
+            id={inputId}
+            text={getLabel(selectedOption) || 'Select ...'}
+            endIcon="double-caret-vertical"
+            variant="outlined"
+            intent={intent}
+            disabled={disabled}
+            style={{ minWidth: 180 }}
+            onBlur={onBlur}
+          />
+        )}
+      </BPSelect>
+    </FormGroup>
+  );
+}

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/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/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/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"}