react-science 19.2.0 → 19.3.1

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

@@ -1,17 +1,25 @@
+import { InputGroup } from '@blueprintjs/core';
 import type { ChangeEvent } from 'react';
 
 import { useFieldContext } from '../../context/use_ts_form.js';
-import { Input as FormGroupInput } from '../input_groups/input.js';
+import type { FormGroupInputProps } from '../input_groups/form_group.js';
+import { FormGroup } from '../input_groups/form_group.js';
 
-interface InputProps {
-  label?: string;
-  inline?: boolean;
-  required?: boolean;
-  placeholder?: string;
+interface InputProps extends FormGroupInputProps {
+  type?: string;
 }
 
 export function Input(props: InputProps) {
-  const { label, required, inline, placeholder } = props;
+  const {
+    label,
+    required,
+    placeholder,
+    type = 'text',
+    helpText,
+    layout,
+    fullWidth,
+  } = props;
+
   const field = useFieldContext<string>();
   const error = field
     .getMeta()
@@ -23,15 +31,27 @@ export function Input(props: InputProps) {
   }
 
   return (
-    <FormGroupInput
+    <FormGroup
+      name={field.name}
+      label={label}
+      intent={error ? 'danger' : 'none'}
       required={required}
       error={error}
-      formGroupProps={{ label, inline }}
-      value={field.state.value}
-      onChange={onChange}
-      name={field.name}
-      placeholder={placeholder}
-      onBlur={field.handleBlur}
-    />
+      helpText={helpText}
+      layout={layout}
+      fullWidth={fullWidth}
+    >
+      <InputGroup
+        id={field.name}
+        name={field.name}
+        required={required}
+        type={type}
+        onChange={onChange}
+        onBlur={field.handleBlur}
+        intent={error ? 'danger' : 'none'}
+        value={field.state.value}
+        placeholder={placeholder}
+      />
+    </FormGroup>
   );
 }

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

@@ -1,20 +1,30 @@
-import type { NumericInputProps as BPNumericInputProps } from '@blueprintjs/core';
-import { FormGroup, NumericInput as BPNumericInput } from '@blueprintjs/core';
+import { NumericInput as BPNumericInput } from '@blueprintjs/core';
 
 import { useFieldContext } from '../../context/use_ts_form.js';
-import { useFieldId } from '../../utils/use_field_id.js';
 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 Omit<BPNumericInputProps, 'defaultValue' | 'name'> {
-  label?: string;
-  required?: boolean;
+interface NumericInputProps extends FormGroupInputProps {
+  step?: number;
+  min?: number;
+  max?: number;
 }
 
 export function NumericInput(props: NumericInputProps) {
-  const { label, required, ...rest } = props;
+  const {
+    label,
+    required,
+    helpText,
+    placeholder,
+    step,
+    min,
+    max,
+    layout,
+    fullWidth,
+  } = props;
+
   const field = useFieldContext<string>();
-  const id = useFieldId(field.name);
   const error = field
     .getMeta()
     .errors.map((e) => e.message)
@@ -28,21 +38,26 @@ export function NumericInput(props: NumericInputProps) {
 
   return (
     <FormGroup
-      helperText={error}
+      name={field.name}
       label={label}
-      labelFor={id}
       intent={intent}
-      labelInfo={label && required && <span style={{ color: 'red' }}>*</span>}
+      required={required}
+      helpText={helpText}
+      layout={layout}
+      error={error}
+      fullWidth={fullWidth}
     >
       <BPNumericInput
-        {...rest}
+        id={field.name}
         name={field.name}
+        stepSize={step}
+        min={min}
+        max={max}
         value={field.state.value ?? ''}
         onValueChange={onChange}
         intent={intent}
+        placeholder={placeholder}
         required={required}
-        id={id}
-        onBlur={field.handleBlur}
       />
     </FormGroup>
   );

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

@@ -1,6 +1,8 @@
 import { useFieldContext } from '../../context/use_ts_form.js';
 import { getIntent } from '../../utils/use_intent.js';
-import { Select as FormGroupSelect } from '../input_groups/select.js';
+import type { FormGroupInputProps } from '../input_groups/form_group.js';
+import { FormGroup } from '../input_groups/form_group.js';
+import { Select as SelectInput } from '../input_groups/select.js';
 import type { SelectId } from '../util/select.js';
 
 interface SelectOptionType {
@@ -8,14 +10,12 @@ interface SelectOptionType {
   value: string;
 }
 
-interface SelectProps {
-  label?: string;
+interface SelectProps extends Omit<FormGroupInputProps, 'placeholder'> {
   items: SelectOptionType[];
-  required?: boolean;
 }
 
 export function Select(props: SelectProps) {
-  const { label, items, required } = props;
+  const { label, items, required, helpText, layout, fullWidth } = props;
 
   const field = useFieldContext<SelectId>();
   const error = field
@@ -31,17 +31,24 @@ export function Select(props: SelectProps) {
   }
 
   return (
-    <FormGroupSelect
-      formGroupProps={{
-        required,
-        label,
-        intent,
-        helperText: error ?? undefined,
-      }}
-      items={items}
-      onChange={onItemSelect}
-      selected={field.state.value}
-      onBlur={field.handleBlur}
-    />
+    <FormGroup
+      name={field.name}
+      required={required}
+      label={label}
+      intent={intent}
+      helpText={helpText}
+      error={error}
+      layout={layout}
+      fullWidth={fullWidth}
+    >
+      <SelectInput
+        onBlur={field.handleBlur}
+        items={items}
+        selected={field.state.value}
+        onChange={onItemSelect}
+        intent={intent}
+        name={field.name}
+      />
+    </FormGroup>
   );
 }

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

@@ -1,14 +1,27 @@
-import { FormGroup, Switch as BPSwitch } from '@blueprintjs/core';
+import { Switch as BPSwitch } from '@blueprintjs/core';
+import styled from '@emotion/styled';
 import type { ChangeEvent } from 'react';
 
 import { useFieldContext } from '../../context/use_ts_form.js';
+import type { Layout } from '../input_groups/form_context.js';
+import { FormGroup } from '../input_groups/form_group.js';
 
 interface SwitchProps {
   label?: string;
+  helpText?: string;
+  fullWidth?: boolean;
+  layout?: Layout;
 }
 
+const StyledSwitch = styled(BPSwitch)`
+  margin: 0 !important;
+  height: 30px;
+  display: flex;
+  align-items: center;
+`;
+
 export function Switch(props: SwitchProps) {
-  const { label } = props;
+  const { label, layout, helpText, fullWidth } = props;
 
   const field = useFieldContext<boolean>();
   const error = field
@@ -21,12 +34,21 @@ export function Switch(props: SwitchProps) {
   }
 
   return (
-    <FormGroup helperText={error ?? undefined} intent="danger">
-      <BPSwitch
+    <FormGroup
+      name={field.name}
+      error={error}
+      intent={error ? 'danger' : undefined}
+      label={label}
+      layout={layout}
+      helpText={helpText}
+      fullWidth={fullWidth}
+    >
+      <StyledSwitch
+        name={field.name}
+        id={field.name}
         checked={field.state.value}
         onChange={onChange}
         onBlur={field.handleBlur}
-        labelElement={label}
       />
     </FormGroup>
   );

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

@@ -0,0 +1,24 @@
+import type { FormHTMLAttributes, ReactNode } from 'react';
+import { useMemo } from 'react';
+
+import type { Layout } from './form_context.js';
+import { formContext } from './form_context.js';
+
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  children: ReactNode;
+  layout?: Layout;
+}
+
+export function Form(props: FormProps) {
+  const { children, layout = 'stacked', ...otherProps } = props;
+
+  const contextValue = useMemo(() => {
+    return { layout };
+  }, [layout]);
+
+  return (
+    <formContext.Provider value={contextValue}>
+      <form {...otherProps}>{children}</form>
+    </formContext.Provider>
+  );
+}

package/src/components/form/components/input_groups/form_context.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+export type Layout = 'inline' | 'stacked';
+
+export const formContext = createContext<{ layout: Layout }>({
+  layout: 'stacked',
+});
+
+export function useFormContext() {
+  return useContext(formContext);
+}

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

@@ -0,0 +1,129 @@
+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_context.js';
+import { useFormContext } from './form_context.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 = 'none',
+    name,
+    required,
+    children,
+    helpText,
+    error,
+    layout,
+    fullWidth = false,
+  } = props;
+
+  const { layout: formLayout } = useFormContext();
+
+  // If intent is undefined or none intentClass will return undefined
+  const intentClass = Classes.intentClass(intent) ?? '';
+
+  return (
+    <FormContainer
+      layout={layout || formLayout}
+      className={`${Classes.FORM_GROUP} ${intentClass}`}
+    >
+      {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

@@ -1,12 +1,10 @@
-import type { FormGroupProps } from '@blueprintjs/core';
-import { FormGroup } from '@blueprintjs/core';
+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 { useInputId } from '../hooks/use_input_id.js';
 import type {
   GetOptionLabel,
   GetOptionValue,
@@ -94,7 +92,6 @@ export type SelectProps<OptionType, ID extends SelectId> = FieldGroupProps &
 interface RealSelectProps<OptionType, ID extends SelectId>
   extends Pick<BPSelectProps<OptionType>, 'filterable' | 'items'> {
   onBlur: () => void;
-  id?: string;
   renderButton?: (
     state: SelectPropsRenderButtonState<OptionType>,
     onBlur: () => void,
@@ -104,12 +101,8 @@ interface RealSelectProps<OptionType, ID extends SelectId>
   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;
-  };
+  intent?: FormGroupProps['intent'];
+  name?: string;
 }
 
 export function Select<
@@ -118,17 +111,17 @@ export function Select<
 >(props: RealSelectProps<OptionType, ID>): ReactElement {
   const {
     renderButton,
-    id,
     disabled,
     selected,
     getLabel: _getLabel,
     getValue: _getValue,
-    formGroupProps: { className, helperText, inline, intent, label, required },
+    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;
@@ -155,42 +148,28 @@ export function Select<
     [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}
+    <BPSelect<OptionType>
+      filterable={filterable}
+      items={items}
+      onItemSelect={onItemSelect}
+      itemRenderer={itemRenderer}
       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>
+      {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/context/use_ts_form.ts

@@ -7,6 +7,7 @@ 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();
@@ -17,6 +18,7 @@ const { useAppForm, withForm } = createFormHook({
   formComponents: {
     SubmitButton,
     ResetButton,
+    Section,
   },
   fieldComponents: {
     Input,

package/src/components/index.ts

@@ -19,4 +19,5 @@ 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/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};
   }
 `;