react-science 19.2.0 → 19.3.0

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.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,32 @@
+import type { FormHTMLAttributes, ReactNode } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+
+export type Layout = 'inline' | 'stacked';
+
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  children: ReactNode;
+  layout?: Layout;
+}
+
+const formContext = createContext<{ layout: Layout }>({
+  layout: 'stacked',
+});
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useFormContext() {
+  return useContext(formContext);
+}
+
+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_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

@@ -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};
   }
 `;

package/src/components/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 {

package/src/components/svg/index.ts

@@ -0,0 +1,4 @@
+export * from './styled/svg_styled_line.js';
+export * from './styled/svg_styled_path.js';
+export * from './styled/svg_styled_text.js';
+export * from './styled/svg_styled_types.js';