react-science 20.4.0 → 20.6.0

package/src/components/form/components/input/draggable_numeric_input.tsx

@@ -0,0 +1,107 @@
+import type { Intent } from '@blueprintjs/core';
+import { NumericInput as BPNumericInput } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+
+import { Draggable as InputDraggable } from '../../../draggable/draggable.tsx';
+import { useFieldContext } from '../../context/use_ts_form.ts';
+import { getIntent } from '../../utils/use_intent.ts';
+import { FormGroup } from '../input_groups/index.ts';
+
+import type { NumericInputProps } from './numeric_input.tsx';
+
+interface DraggableNumericInputProps extends NumericInputProps {
+  draggableLabel: string;
+  draggableIntent?: Intent;
+  hideInput?: boolean;
+}
+
+const DraggableNumericInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+`;
+
+const Draggable = styled(InputDraggable)`
+  flex: 1;
+`;
+
+export function DraggableNumericInput(props: DraggableNumericInputProps) {
+  const {
+    label,
+    required,
+    helpText,
+    placeholder,
+    step,
+    min,
+    max,
+    layout,
+    fullWidth,
+    draggableLabel,
+    draggableIntent = 'success',
+    hideInput = false,
+    majorStepSize,
+    minorStepSize,
+    ...otherProps
+  } = props;
+
+  const field = useFieldContext<string>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  const intent = getIntent(error);
+
+  function onChange(_: number, valueAsString: string) {
+    return field.handleChange(valueAsString);
+  }
+
+  return (
+    <FormGroup
+      name={field.name}
+      label={label}
+      intent={intent}
+      required={required}
+      helpText={helpText}
+      layout={layout}
+      error={undefined}
+      fullWidth={fullWidth}
+      contentFullWidth
+    >
+      <DraggableNumericInputContainer>
+        {!hideInput && (
+          <BPNumericInput
+            {...otherProps}
+            id={field.name}
+            name={field.name}
+            stepSize={step}
+            min={min}
+            max={max}
+            majorStepSize={majorStepSize}
+            minorStepSize={minorStepSize}
+            value={field.state.value ?? ''}
+            onValueChange={onChange}
+            onBlur={field.handleBlur}
+            intent={intent}
+            placeholder={placeholder}
+            required={required}
+          />
+        )}
+
+        <Draggable
+          value={Number(field.state.value)}
+          onBlur={field.handleBlur}
+          onChange={onChange}
+          step={step}
+          min={min}
+          max={max}
+          majorStepSize={majorStepSize}
+          minorStepSize={minorStepSize}
+          intent={draggableIntent}
+        >
+          {draggableLabel}
+        </Draggable>
+      </DraggableNumericInputContainer>
+    </FormGroup>
+  );
+}

package/src/components/form/components/input/index.ts

@@ -11,3 +11,4 @@ export type {
 } from './select.js';
 export type { SubmitButton as _SubmitButton } from './submit_button.js';
 export type { Switch as _Switch } from './switch.js';
+export type { DraggableNumericInput as _DraggableNumericInput } from './draggable_numeric_input.js';

package/src/components/form/components/input/numeric_input.tsx

@@ -6,7 +6,8 @@ import { getIntent } from '../../utils/use_intent.js';
 import type { FormGroupInputProps } from '../input_groups/form_group.js';
 import { FormGroup } from '../input_groups/form_group.js';
 
-interface NumericInputProps extends FormGroupInputProps, BPNumericInputProps {
+export interface NumericInputProps
+  extends FormGroupInputProps, BPNumericInputProps {
   step?: number;
   min?: number;
   max?: number;

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

@@ -16,7 +16,7 @@ const FormContainer = styled.div<{
   display: grid;
   margin: 0;
   grid-template-columns: ${(props) =>
-    props.layout === 'inline' ? '[label] 30% [input] 70%' : '1fr'};
+    props.layout === 'inline' ? '[label] 3fr [input] 7fr' : '1fr'};
   gap: 5px 20px;
   grid-template-rows: ${(props) =>
     props.layout === 'inline' ? 'auto auto' : 'auto'};
@@ -29,6 +29,7 @@ const RequiredSpan = styled.span`
 const ContainerElement = styled.div<{
   height?: number | 'auto';
   fullWidth?: boolean;
+  contentFullWidth?: boolean;
   layout?: Layout;
 }>`
   display: inline-block;
@@ -40,7 +41,7 @@ const ContainerElement = styled.div<{
         : '1 / -1'};
   height: ${(props) =>
     props.height === 'auto' ? props.height : `${props.height}px`};
-  width: fit-content;
+  width: ${(props) => (props.contentFullWidth ? '100%' : 'fit-content')};
   min-width: 180px;
 `;
 
@@ -85,6 +86,7 @@ interface FormGroupProps {
   error?: string;
   layout?: Layout;
   fullWidth?: boolean;
+  contentFullWidth?: boolean;
 }
 
 export function FormGroup(props: FormGroupProps) {
@@ -98,6 +100,7 @@ export function FormGroup(props: FormGroupProps) {
     error,
     layout,
     fullWidth = false,
+    contentFullWidth = false,
   } = props;
 
   const { layout: formLayout } = useFormContext();
@@ -122,7 +125,11 @@ export function FormGroup(props: FormGroupProps) {
           )}
         </Label>
       )}
-      <ContainerElement fullWidth={fullWidth} layout={layout || formLayout}>
+      <ContainerElement
+        fullWidth={fullWidth}
+        layout={layout || formLayout}
+        contentFullWidth={contentFullWidth}
+      >
         {children}
 
         <ErrorAndHelpText>

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

@@ -8,10 +8,21 @@ export interface AppFormProps extends Omit<DomFormProps, 'noValidate'> {
   domValidate?: boolean;
   /**
    * should return meta to pass to `form.handleSubmit`
+   *
+   * @example
+   * ```tsx
+   * onSubmitMeta={(event) => event.nativeEvent.submitter?.dataset.action}
+   * ```
    */
   // Generic meta-result is not possible with higher order component pattern
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onSubmitMeta?: (event: SyntheticEvent<HTMLFormElement, SubmitEvent>) => any;
+
+  /**
+   * onSubmit form will call `event.stopPropagation()`.
+   * It can be useful for nested form.
+   */
+  onSubmitStopPropagation?: boolean;
 }
 
 const props: AppFormProps = { children: null };
@@ -32,7 +43,14 @@ export const AppForm = minimalForm(
     defaultValues,
     props,
     render: function FormRender(props) {
-      const { form, children, domValidate, onSubmitMeta, ...domProps } = props;
+      const {
+        form,
+        children,
+        domValidate,
+        onSubmitMeta,
+        onSubmitStopPropagation,
+        ...domProps
+      } = props;
       const { AppForm } = form;
 
       return (
@@ -41,13 +59,13 @@ export const AppForm = minimalForm(
           <DomForm
             onSubmit={(event) => {
               event.preventDefault();
+              if (onSubmitStopPropagation) event.stopPropagation();
 
               const meta = onSubmitMeta?.(
                 // onSubmit event is not typed properly.
                 // It uses Event instead of SubmitEvent.
                 event as SyntheticEvent<HTMLFormElement, SubmitEvent>,
               );
-
               void form.handleSubmit(meta);
             }}
             {...domProps}

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

@@ -2,6 +2,7 @@ import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
 
 import { Checkbox } from '../components/input/checkbox.js';
 import { ColorPicker } from '../components/input/color_picker.tsx';
+import { DraggableNumericInput } from '../components/input/draggable_numeric_input.js';
 import { Input } from '../components/input/input.js';
 import { NumericInput } from '../components/input/numeric_input.js';
 import { RadioGroup } from '../components/input/radio_group.js';
@@ -37,6 +38,7 @@ const { useAppForm, withForm, withFieldGroup } = createFormHook({
     Switch,
     ColorPicker,
     RadioGroup,
+    DraggableNumericInput,
   },
 });
 

package/src/components/hooks/useSelect.tsx

@@ -24,8 +24,7 @@ interface UseSelectRenderOptions<T> extends UseSelectCommonOptions<T> {
 }
 
 export type UseSelectOptions<T> =
-  | UseSelectBaseOptions<T>
-  | UseSelectRenderOptions<T>;
+  UseSelectBaseOptions<T> | UseSelectRenderOptions<T>;
 
 function isAccessLabelByKey<T>(
   options: UseSelectOptions<T>,

package/src/components/table/reorder_rows/draggable_row_tr.tsx

@@ -9,10 +9,10 @@ import {
   pointerOutsideOfPreview,
   setCustomNativeDragPreview,
 } from '@zakodium/pdnd-esm';
+import { assert } from '@zakodium/utils';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { assert } from '../../utils/index.js';
 import { useFlashRowEffect } from '../flash_row/use_flash_row_effect.js';
 import { PreviewTable } from '../preview_table.js';
 import { useIsPreviewTable } from '../preview_table_context.js';

package/src/components/table/reorder_rows/use_drop_monitor.ts

@@ -5,10 +5,10 @@ import {
   extractClosestEdge,
   monitorForElements,
 } from '@zakodium/pdnd-esm';
+import { assert } from '@zakodium/utils';
 import type { RefObject } from 'react';
 import { useEffect } from 'react';
 
-import { assert } from '../../utils/index.js';
 import { useFlashedRowContext } from '../flash_row/flashed_row_context.js';
 
 import { isItemData } from './item_data.js';

package/src/components/table/table_root.tsx

@@ -232,8 +232,7 @@ interface VirtualizedTableProps<
 }
 
 export type TableProps<TData extends RowData> =
-  | RegularTableProps<TData>
-  | VirtualizedTableProps<TData>;
+  RegularTableProps<TData> | VirtualizedTableProps<TData>;
 
 export function Table<TData extends RowData>(props: TableProps<TData>) {
   const {

package/src/components/toolbar/Toolbar.tsx

@@ -29,10 +29,7 @@ import { useCheckOverflow } from './useCheckOverflow.tsx';
 export type Overflow = 'wrap' | 'collapse';
 
 export type PopoverInteractionType =
-  | 'click'
-  | 'hover'
-  | 'click-target'
-  | 'hover-target';
+  'click' | 'hover' | 'click-target' | 'hover-target';
 
 interface ToolbarBaseProps {
   intent?: Intent;

package/src/components/utils/assert.ts

@@ -1,7 +1,15 @@
+/**
+ * @param x
+ * @deprecated Use `assertUnreachable` from `@zakodium/utils`
+ */
 export function assertUnreachable(x: never): never {
   throw new Error(`unreachable: ${String(x)}`);
 }
 
+/**
+ * @param x
+ * @deprecated Use `assertNotNullish` from `@zakodium/utils`
+ */
 export function assertNotNull<T>(
   value: T | null | undefined,
 ): asserts value is Exclude<T, null | undefined> {
@@ -13,6 +21,11 @@ export function assertNotNull<T>(
   }
 }
 
+/**
+ * @param value
+ * @param message
+ * @deprecated Use `assert` from `@zakodium/utils`
+ */
 export function assert(value: unknown, message?: string): asserts value {
   if (!value) {
     throw new Error(`unreachable${message ? `: ${message}` : ''}`);

package/src/components/utils/svg.ts

@@ -1,4 +1,4 @@
-import { assert } from './assert.ts';
+import { assert } from '@zakodium/utils';
 
 export interface ExportSVGOptions {
   /**