@12-apps/ui 6.46.1 → 6.48.0

package/src/components/form/Select/Select.searchable.tsx

@@ -0,0 +1,203 @@
+import Autocomplete from '@mui/material/Autocomplete/index.js';
+import type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete/index.js';
+import type { SelectChangeEvent } from '@mui/material/Select/index.js';
+import { useTheme } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
+import TextField from '@mui/material/TextField/index.js';
+import React from 'react';
+
+import { SEARCHABLE_MIN_OPTIONS, SELECT_SEARCH } from './Select.metrics';
+import { formControlSize, SelectFieldControl } from './Select.styles';
+import type { SelectOption, SelectProps } from './Select.types';
+
+import { splitTestId } from '../../../platform/test-id';
+import { asFieldSize } from '../../../tokens/field-height';
+import { stackedOverlayZIndex } from '../../../tokens/layers';
+import { rem } from '../../../tokens/relative';
+
+/**
+ * THE SELECT, PAST FIVE OPTIONS: a search box over a list of bounded height.
+ *
+ * Same engine as `CreatableSelect` — MUI `Autocomplete` — so every searchable
+ * dropdown in the library types, filters and scrolls the same way. What it
+ * keeps from `Select` is the whole CONTRACT, so a call site cannot tell which
+ * one it got until it opens it:
+ *
+ * - the field chrome ({@link SelectFieldControl}: variant, size, glow, pulse);
+ * - the floating label, placeholder, helper text and error;
+ * - `onChange(event)` with `event.target.value` — the option's value, a number
+ *   staying a number, exactly what MUI's `Select` hands its handlers;
+ * - disabled options, and the `-select` / `-option-<value>` test ids.
+ *
+ * It cannot be cleared (a `Select` has no "none" either — its placeholder is
+ * disabled), and it never accepts text that is not an option.
+ */
+
+/** Whether `props` should render as a search box. */
+export function shouldSearch(props: SelectProps): boolean {
+  if (props.multiple || props.renderValue) return false;
+  if (props.searchable !== undefined) return props.searchable;
+  return props.options.length >= SEARCHABLE_MIN_OPTIONS;
+}
+
+/**
+ * The change MUI's `Select` would have emitted: handlers read
+ * `event.target.value` (and sometimes `.name`), so that is what they get.
+ */
+function selectChange(value: SelectOption['value'], name: string | undefined): SelectChangeEvent<unknown> {
+  return { target: { value, name: name ?? '' } } as unknown as SelectChangeEvent<unknown>;
+}
+
+function renderOption(
+  props: React.HTMLAttributes<HTMLLIElement>,
+  option: SelectOption,
+  optionTestId: (value: SelectOption['value']) => string,
+): React.JSX.Element {
+  const { key, ...rest } = props as typeof props & { key?: React.Key };
+  return (
+    <li key={key ?? option.value} {...rest} data-testid={optionTestId(option.value)}>
+      {option.label}
+    </li>
+  );
+}
+
+interface FieldProps {
+  params: AutocompleteRenderInputParams;
+  field: Pick<SelectProps, 'label' | 'placeholder' | 'helperText' | 'error' | 'name' | 'required' | 'autoFocus' | 'onBlur' | 'onFocus'>;
+  ariaLabel: string | undefined;
+  disabled: boolean | undefined;
+  triggerTestId: string;
+}
+
+function renderField({ params, field, ariaLabel, disabled, triggerTestId }: FieldProps): React.JSX.Element {
+  return (
+    <TextField
+      {...params}
+      label={field.label}
+      placeholder={field.placeholder}
+      helperText={field.helperText}
+      error={field.error}
+      name={field.name}
+      required={field.required}
+      autoFocus={field.autoFocus}
+      onBlur={field.onBlur as React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined}
+      onFocus={field.onFocus as React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined}
+      // The menu drew its placeholder under a shrunk label (`displayEmpty`);
+      // a floating label left down would hide it until focus.
+      slotProps={field.placeholder ? { inputLabel: { shrink: true } } : undefined}
+      inputProps={{
+        ...params.inputProps,
+        'aria-label': ariaLabel,
+        // The menu's display div carried `aria-disabled`; the input keeps it.
+        'aria-disabled': disabled ? true : undefined,
+        'data-testid': triggerTestId,
+      }}
+    />
+  );
+}
+
+/**
+ * The option the field shows, KEPT STABLE while it is the same one.
+ *
+ * Consumers build `options` inline (`xs.map(...)`), so a fresh `find` returns a
+ * new object on every parent render, which MUI reads as a changed value and
+ * answers by resetting the typed text — a refetch mid-search wiped the query.
+ * Uncontrolled use (`defaultValue`, no `value`) keeps its own state, as MUI's
+ * Select did.
+ */
+function useSelectedOption(
+  options: SelectOption[],
+  value: unknown,
+  defaultValue: unknown,
+): [SelectOption | null, (next: SelectOption) => void] {
+  const [own, setOwn] = React.useState<unknown>(defaultValue ?? '');
+  const current = value === undefined ? own : value;
+  const match = options.find((option) => String(option.value) === String(current ?? '')) ?? null;
+  const key = match === null ? null : `${String(match.value)}\u0000${match.label}\u0000${match.disabled === true}`;
+  // Keyed on the option's identity, not the object `find` just returned.
+  const stable = React.useMemo(() => match, [key]);
+  return [stable, (next) => setOwn(next.value)];
+}
+
+/**
+ * A field that does not fill its row sizes to its longest option, the way the
+ * menu sized to its selected text: MUI's Autocomplete input is `width: 0`, so
+ * without this a `fullWidth={false}` select collapsed to its arrow.
+ */
+function intrinsicWidth(
+  theme: Theme,
+  options: SelectOption[],
+  fullWidth: boolean,
+): React.CSSProperties | undefined {
+  if (fullWidth) return undefined;
+  const longest = options.reduce((max, option) => Math.max(max, option.label.length), 0);
+  // The label in `ch`, plus the field's inline padding and the arrow's slot.
+  return { minWidth: `calc(${longest}ch + ${rem(theme, SELECT_SEARCH.fieldChrome)})` };
+}
+
+export const SearchableSelect = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
+  const { variant, options, fullWidth = true, size, error, glow, pulse, value, defaultValue } = props;
+  const { onChange, disabled, name, noOptionsText, sx, className, style, id } = props;
+  const { testId: dataTestId } = splitTestId(props as unknown as Record<string, unknown>);
+  const [selected, setOwn] = useSelectedOption(options, value, defaultValue);
+  const theme = useTheme();
+  const optionTestId = (optionValue: SelectOption['value']): string =>
+    dataTestId ? `${dataTestId}-option-${optionValue}` : `option-${optionValue}`;
+
+  return (
+    <SelectFieldControl
+      fullWidth={fullWidth}
+      size={formControlSize(size)}
+      error={error}
+      customVariant={variant}
+      fieldSize={asFieldSize(size)}
+      glow={glow}
+      pulse={pulse}
+      ref={ref}
+      sx={sx}
+      className={className}
+      style={{ ...intrinsicWidth(theme, options, fullWidth), ...style }}
+      data-testid={dataTestId}
+    >
+      <Autocomplete<SelectOption, false, true, false>
+        id={id}
+        value={selected as SelectOption}
+        options={options}
+        disabled={disabled}
+        disableClearable
+        autoHighlight
+        handleHomeEndKeys
+        size={formControlSize(size)}
+        noOptionsText={noOptionsText ?? null}
+        getOptionLabel={(option) => option.label}
+        // Two people may share a name; the value is what tells them apart.
+        getOptionKey={(option) => String(option.value)}
+        getOptionDisabled={(option) => option.disabled === true}
+        isOptionEqualToValue={(option, current) => String(option.value) === String(current.value)}
+        onChange={(_event, next) => {
+          setOwn(next);
+          onChange?.(selectChange(next.value, name), null);
+        }}
+        renderOption={(optionProps, option) => renderOption(optionProps, option, optionTestId)}
+        slotProps={{
+          // Above stacked sheets and dialogs, as `CreatableSelect` does.
+          popper: { sx: { zIndex: stackedOverlayZIndex } },
+          // THE bounded height: MUI's own default is 40vh, which on a tall
+          // screen is the whole page again.
+          listbox: { sx: (theme) => ({ maxHeight: rem(theme, SELECT_SEARCH.listMaxHeight) }) },
+        }}
+        renderInput={(params) =>
+          renderField({
+            params,
+            field: props,
+            ariaLabel: props['aria-label'],
+            disabled,
+            triggerTestId: dataTestId ? `${dataTestId}-select` : 'select',
+          })
+        }
+      />
+    </SelectFieldControl>
+  );
+});
+
+SearchableSelect.displayName = 'SearchableSelect';

package/src/components/form/Select/Select.styles.tsx

@@ -0,0 +1,195 @@
+import FormControl, { type FormControlProps } from '@mui/material/FormControl/index.js';
+import { alpha, type CSSObject, keyframes, styled, type Theme } from '@mui/material/styles/index.js';
+import React from 'react';
+
+import {
+  SELECT_BORDER,
+  SELECT_GLASS,
+  SELECT_GLOW,
+  SELECT_GRADIENT,
+  SELECT_PULSE,
+  selectInputSize,
+} from './Select.metrics';
+import type { SelectProps } from './Select.types';
+
+import { fieldEdge } from '../../../tokens/field-edge';
+import { FIELD_BORDER_WIDTH, fieldControlStyles, fieldHeight } from '../../../tokens/field-height';
+import type { SizeValue } from '../../../tokens/vocabulary';
+import { fieldRadius } from '../../../tokens/field-radius';
+import { absoluteInk } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
+
+/**
+ * THE FIELD CHROME BOTH WEB SELECTS WEAR — the menu `Select` and the searchable
+ * one it becomes past {@link SEARCHABLE_MIN_OPTIONS} options. Shared so the two
+ * cannot drift: a form whose short select and long select were drawn by two
+ * copies of these rules would show it the first time one of them changed.
+ */
+
+// Define pulse animation
+const pulseAnimation = (theme: Theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, SELECT_PULSE.spread)} currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+
+/** Glow ring on the outlined input, keyed off the `glow` prop. */
+const glowStyles = (theme: Theme): CSSObject => ({
+  '& .MuiOutlinedInput-root': {
+    boxShadow: `0 0 ${rem(theme, SELECT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.rest.alpha)}`,
+    '&.Mui-focused': {
+      boxShadow: `0 0 ${rem(theme, SELECT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.focused.alpha)}`,
+    },
+  },
+});
+
+/** Pulsing halo behind the control, keyed off the `pulse` prop. */
+const pulseStyles = (theme: Theme, size: SizeValue): CSSObject => ({
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    top: '50%',
+    left: '0',
+    right: '0',
+    height: fieldHeight(theme, size),
+    transform: 'translateY(-50%)',
+    borderRadius: fieldRadius(theme),
+    backgroundColor: theme.palette.primary.main,
+    opacity: SELECT_PULSE.opacity,
+    animation: `${pulseAnimation(theme)} ${SELECT_PULSE.ms / 1000}s infinite`,
+    pointerEvents: 'none',
+    zIndex: -1,
+  },
+});
+
+/** `glass` variant: translucent, blurred background. */
+const glassVariant = (theme: Theme): CSSObject => ({
+  backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.rest),
+  backdropFilter: `blur(${rem(theme, SELECT_GLASS.blur)})`,
+  // `SELECT_BORDER.rest` is the field hairline.
+  border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,
+  '& fieldset': { border: 'none' },
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.hover),
+    borderColor: alpha(theme.palette.primary.main, SELECT_GLASS.hoverBorderAlpha),
+  },
+  '&.Mui-focused': {
+    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.focused),
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 ${rem(theme, SELECT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, SELECT_GLASS.focusRing.alpha)}`,
+  },
+});
+
+/** `gradient` variant: gradient fill with a masked gradient border. */
+const gradientFill = (theme: Theme, strength: number): string =>
+  `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;
+
+const gradientVariant = (theme: Theme): CSSObject => ({
+  background: gradientFill(theme, SELECT_GRADIENT.fill.rest),
+  border: `${rem(theme, SELECT_GRADIENT.borderWidth)} solid transparent`,
+  backgroundOrigin: 'border-box',
+  backgroundClip: 'padding-box, border-box',
+  position: 'relative',
+  '& fieldset': { border: 'none' },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 'inherit',
+    background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+    mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
+    maskComposite: 'exclude',
+    padding: rem(theme, SELECT_GRADIENT.borderWidth),
+    zIndex: -1,
+  },
+  '&:hover': {
+    background: gradientFill(theme, SELECT_GRADIENT.fill.hover),
+  },
+  '&.Mui-focused': {
+    background: gradientFill(theme, SELECT_GRADIENT.fill.focused),
+    '&::before': {
+      background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,
+    },
+  },
+});
+
+/** `default` variant: standard outlined borders with hover/focus/error states. */
+const defaultVariant = (theme: Theme): CSSObject => ({
+  '& fieldset': { borderColor: fieldEdge(theme) },
+  '&:hover fieldset': { borderColor: theme.palette.primary.main },
+  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: rem(theme, SELECT_BORDER.focused) },
+  '&.Mui-error fieldset': { borderColor: theme.palette.error.main },
+});
+
+/** Pick the variant style block for the outlined input. */
+const variantStyles = (theme: Theme, variant: SelectProps['variant']): CSSObject => {
+  if (variant === 'glass') return glassVariant(theme);
+  if (variant === 'gradient') return gradientVariant(theme);
+  return defaultVariant(theme);
+};
+
+const StyledFormControl = styled(FormControl, {
+  shouldForwardProp: (prop) =>
+    prop !== 'customVariant' && prop !== 'fieldSize' && prop !== 'glow' && prop !== 'pulse',
+})<{
+  customVariant?: SelectProps['variant'];
+  fieldSize: SizeValue;
+  glow?: boolean;
+  pulse?: boolean;
+}>(({ theme, customVariant, fieldSize, glow, pulse }) => ({
+  position: 'relative',
+  // The theme's field height for this size — the height `Input` draws for it.
+  ...fieldControlStyles(theme, fieldSize),
+  ...(glow ? glowStyles(theme) : {}),
+  ...(pulse ? pulseStyles(theme, fieldSize) : {}),
+  '& .MuiOutlinedInput-root': {
+    transition: 'all 0.3s ease',
+    borderRadius: fieldRadius(theme),
+    ...variantStyles(theme, customVariant),
+  },
+}));
+
+/** What {@link SelectFieldControl} takes: a FormControl, plus the four look switches. */
+export interface SelectFieldControlProps extends FormControlProps {
+  customVariant?: SelectProps['variant'];
+  fieldSize: SizeValue;
+  glow?: boolean;
+  pulse?: boolean;
+  'data-testid'?: string;
+}
+
+/**
+ * The styled FormControl, behind a component with a NAMED type: a `styled()`
+ * export's inferred type reaches into `@mui/system`'s pnpm path, which the
+ * declaration build refuses to write (TS2742).
+ */
+export const SelectFieldControl = React.forwardRef<HTMLDivElement, SelectFieldControlProps>(
+  (props, ref) => <StyledFormControl ref={ref} {...props} />,
+);
+
+SelectFieldControl.displayName = 'SelectFieldControl';
+
+/**
+ * The house scale as a FormControl size.
+ *
+ * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes
+ * only two. This component's scale is already narrowed to `sm | md`, so the map
+ * is exact rather than lossy.
+ */
+export const formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {
+  if (size === undefined) return undefined;
+  return selectInputSize(size) === 'sm' ? 'small' : 'medium';
+};
+

package/src/components/form/Select/Select.tsx

@@ -1,163 +1,15 @@
-import FormControl from '@mui/material/FormControl/index.js';
 import FormHelperText from '@mui/material/FormHelperText/index.js';
 import InputLabel from '@mui/material/InputLabel/index.js';
 import MenuItem from '@mui/material/MenuItem/index.js';
 import MuiSelect from '@mui/material/Select/index.js';
-import { alpha, type CSSObject, keyframes, styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import {
-  SELECT_BORDER,
-  SELECT_GLASS,
-  SELECT_GLOW,
-  SELECT_GRADIENT,
-  SELECT_PULSE,
-  selectInputSize,
-} from './Select.metrics';
+import { SearchableSelect, shouldSearch } from './Select.searchable';
+import { formControlSize, SelectFieldControl } from './Select.styles';
 import type { SelectProps } from './Select.types';
 
 import { splitTestId } from '../../../platform/test-id';
-import { fieldEdge } from '../../../tokens/field-edge';
-import { asFieldSize, FIELD_BORDER_WIDTH, fieldControlStyles, fieldHeight } from '../../../tokens/field-height';
-import type { SizeValue } from '../../../tokens/vocabulary';
-import { fieldRadius } from '../../../tokens/field-radius';
-import { absoluteInk } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
-
-// Define pulse animation
-const pulseAnimation = (theme: Theme) => keyframes`
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 1;
-  }
-  70% {
-    box-shadow: 0 0 0 ${rem(theme, SELECT_PULSE.spread)} currentColor;
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0;
-  }
-`;
-
-/** Glow ring on the outlined input, keyed off the `glow` prop. */
-const glowStyles = (theme: Theme): CSSObject => ({
-  '& .MuiOutlinedInput-root': {
-    boxShadow: `0 0 ${rem(theme, SELECT_GLOW.rest.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.rest.alpha)}`,
-    '&.Mui-focused': {
-      boxShadow: `0 0 ${rem(theme, SELECT_GLOW.focused.blur)} ${alpha(theme.palette.primary.main, SELECT_GLOW.focused.alpha)}`,
-    },
-  },
-});
-
-/** Pulsing halo behind the control, keyed off the `pulse` prop. */
-const pulseStyles = (theme: Theme, size: SizeValue): CSSObject => ({
-  '&::after': {
-    content: '""',
-    position: 'absolute',
-    top: '50%',
-    left: '0',
-    right: '0',
-    height: fieldHeight(theme, size),
-    transform: 'translateY(-50%)',
-    borderRadius: fieldRadius(theme),
-    backgroundColor: theme.palette.primary.main,
-    opacity: SELECT_PULSE.opacity,
-    animation: `${pulseAnimation(theme)} ${SELECT_PULSE.ms / 1000}s infinite`,
-    pointerEvents: 'none',
-    zIndex: -1,
-  },
-});
-
-/** `glass` variant: translucent, blurred background. */
-const glassVariant = (theme: Theme): CSSObject => ({
-  backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.rest),
-  backdropFilter: `blur(${rem(theme, SELECT_GLASS.blur)})`,
-  // `SELECT_BORDER.rest` is the field hairline.
-  border: `${FIELD_BORDER_WIDTH}px solid ${fieldEdge(theme)}`,
-  '& fieldset': { border: 'none' },
-  '&:hover': {
-    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.hover),
-    borderColor: alpha(theme.palette.primary.main, SELECT_GLASS.hoverBorderAlpha),
-  },
-  '&.Mui-focused': {
-    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.focused),
-    borderColor: theme.palette.primary.main,
-    boxShadow: `0 0 0 ${rem(theme, SELECT_GLASS.focusRing.width)} ${alpha(theme.palette.primary.main, SELECT_GLASS.focusRing.alpha)}`,
-  },
-});
-
-/** `gradient` variant: gradient fill with a masked gradient border. */
-const gradientFill = (theme: Theme, strength: number): string =>
-  `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;
-
-const gradientVariant = (theme: Theme): CSSObject => ({
-  background: gradientFill(theme, SELECT_GRADIENT.fill.rest),
-  border: `${rem(theme, SELECT_GRADIENT.borderWidth)} solid transparent`,
-  backgroundOrigin: 'border-box',
-  backgroundClip: 'padding-box, border-box',
-  position: 'relative',
-  '& fieldset': { border: 'none' },
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderRadius: 'inherit',
-    background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
-    mask: `linear-gradient(${absoluteInk(theme).white} 0 0) content-box, linear-gradient(${absoluteInk(theme).white} 0 0)`,
-    maskComposite: 'exclude',
-    padding: rem(theme, SELECT_GRADIENT.borderWidth),
-    zIndex: -1,
-  },
-  '&:hover': {
-    background: gradientFill(theme, SELECT_GRADIENT.fill.hover),
-  },
-  '&.Mui-focused': {
-    background: gradientFill(theme, SELECT_GRADIENT.fill.focused),
-    '&::before': {
-      background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,
-    },
-  },
-});
-
-/** `default` variant: standard outlined borders with hover/focus/error states. */
-const defaultVariant = (theme: Theme): CSSObject => ({
-  '& fieldset': { borderColor: fieldEdge(theme) },
-  '&:hover fieldset': { borderColor: theme.palette.primary.main },
-  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: rem(theme, SELECT_BORDER.focused) },
-  '&.Mui-error fieldset': { borderColor: theme.palette.error.main },
-});
-
-/** Pick the variant style block for the outlined input. */
-const variantStyles = (theme: Theme, variant: SelectProps['variant']): CSSObject => {
-  if (variant === 'glass') return glassVariant(theme);
-  if (variant === 'gradient') return gradientVariant(theme);
-  return defaultVariant(theme);
-};
-
-const StyledFormControl = styled(FormControl, {
-  shouldForwardProp: (prop) =>
-    prop !== 'customVariant' && prop !== 'fieldSize' && prop !== 'glow' && prop !== 'pulse',
-})<{
-  customVariant?: SelectProps['variant'];
-  fieldSize: SizeValue;
-  glow?: boolean;
-  pulse?: boolean;
-}>(({ theme, customVariant, fieldSize, glow, pulse }) => ({
-  position: 'relative',
-  // The theme's field height for this size — the height `Input` draws for it.
-  ...fieldControlStyles(theme, fieldSize),
-  ...(glow ? glowStyles(theme) : {}),
-  ...(pulse ? pulseStyles(theme, fieldSize) : {}),
-  '& .MuiOutlinedInput-root': {
-    transition: 'all 0.3s ease',
-    borderRadius: fieldRadius(theme),
-    ...variantStyles(theme, customVariant),
-  },
-}));
+import { asFieldSize } from '../../../tokens/field-height';
 
 /**
  * Build the placeholder item plus one MenuItem per option. Returns a flat ARRAY
@@ -191,19 +43,7 @@ function renderMenuItems(
   return items;
 }
 
-/**
- * The house scale as a FormControl size.
- *
- * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes
- * only two. This component's scale is already narrowed to `sm | md`, so the map
- * is exact rather than lossy.
- */
-const formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {
-  if (size === undefined) return undefined;
-  return selectInputSize(size) === 'sm' ? 'small' : 'medium';
-};
-
-export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
+const MenuSelect = React.forwardRef<HTMLDivElement, SelectProps>(
   (
     {
       // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined
@@ -231,7 +71,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
     const selectId = React.useId();
 
     return (
-      <StyledFormControl
+      <SelectFieldControl
         fullWidth={fullWidth}
         size={formControlSize(size)}
         error={error}
@@ -281,9 +121,23 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
             {helperText}
           </FormHelperText>
         )}
-      </StyledFormControl>
+      </SelectFieldControl>
     );
   },
 );
 
+MenuSelect.displayName = 'MenuSelect';
+
+/**
+ * The house select. Up to five options it opens a menu; from six on it is a
+ * search box over a list of bounded height (`Select.searchable.tsx`), with the
+ * same props, events and test ids either way. `searchable` overrides the count.
+ */
+export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
+  if (shouldSearch(props)) return <SearchableSelect {...props} ref={ref} />;
+  // The searchable path's own props: nothing for MUI's Select to receive.
+  const { searchable: _searchable, noOptionsText: _noOptionsText, ...menuProps } = props;
+  return <MenuSelect {...menuProps} ref={ref} />;
+});
+
 Select.displayName = 'Select';

package/dist/chunk-442FSG7G.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/feedback/StackedModal/StackedModal.tsx"],"sourcesContent":["import Dialog from '@mui/material/Dialog/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport type { TransitionProps } from '@mui/material/transitions/index.js';\nimport type { FC } from 'react';\nimport React, { forwardRef, useId } from 'react';\nimport { usePanelChrome } from './StackedModal.hooks';\nimport { modalAriaIds, ModalPanelContents, resolveModalContent } from './StackedModal.parts';\nimport type { PanelStyleProps } from './StackedModal.styles';\nimport { dialogRootStyles, STYLE_ONLY_PROPS } from './StackedModal.styles';\nimport type { StackedModalProps } from './StackedModal.types';\n\nconst StyledDialog = styled(Dialog, {\n  shouldForwardProp: (prop) => !STYLE_ONLY_PROPS.includes(prop as string),\n})<PanelStyleProps>(({ theme, ...props }) => dialogRootStyles(theme, props));\n\n/** Panels slide in from the right on every device. */\nconst SlideTransition = forwardRef<HTMLDivElement, TransitionProps>(\n  function SlideTransition(props, ref) {\n    return (\n      <Slide direction=\"left\" ref={ref} {...props}>\n        {props.children as React.ReactElement}\n      </Slide>\n    );\n  },\n);\n\nconst DEFAULTS: Partial<StackedModalProps> = {\n  open: false,\n  glass: false,\n  navigationTitle: '',\n  closeOnClickOutside: true,\n  closeOnEsc: true,\n  loading: false,\n  loadingText: 'Loading...',\n  maxWidth: false,\n  disableBackdrop: false,\n  disableFocusTrap: false,\n  keepMounted: false,\n  rtl: false,\n};\n\n/**\n * Fills in the defaults for props the caller left `undefined`. A table plus one\n * loop, rather than a default per destructured prop — each of those is a branch,\n * and fifteen of them put the component over the complexity bar on their own.\n */\nconst withDefaults = (props: StackedModalProps): StackedModalProps => {\n  const resolved = { ...props };\n  for (const [key, value] of Object.entries(DEFAULTS)) {\n    const prop = key as keyof StackedModalProps;\n    if (resolved[prop] === undefined) {\n      Object.assign(resolved, { [prop]: value });\n    }\n  }\n  return resolved;\n};\n\n/** The modal's props once defaults are applied and its stack identity is settled. */\ntype ResolvedProps = StackedModalProps & { modalId: string };\n\nconst StackedModalPanel: FC<ResolvedProps> = (props) => {\n  const {\n    open, onClose, glass, navigationTitle, backLabel, hideClose, children, actions, modalId,\n    closeOnClickOutside, closeOnEsc, loading, loadingText, fullScreen, maxWidth, disableBackdrop,\n    disableFocusTrap, keepMounted, rtl, dataTestId,\n    'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps\n  } = props;\n\n  const {\n    dialogRef, modalRole, isAnimating, showSkeleton, zIndex, isMobile, canGoBack,\n    handleBack, handleClose,\n  } = usePanelChrome({\n    open, modalId, loading, closeOnEsc, closeOnClickOutside, disableFocusTrap, onClose,\n  });\n\n  // Don't render if in background (performance optimization)\n  if (modalRole === 'background' && !keepMounted) return null;\n\n  const { content, modalActions, headerActions, hasMobileActions } = resolveModalContent(\n    children,\n    actions,\n    isMobile,\n  );\n  const { titleId, descId } = modalAriaIds(modalId, ariaLabelledBy, ariaDescribedBy);\n\n  return (\n    <StyledDialog\n      ref={dialogRef}\n      open={Boolean(open)}\n      onClose={handleClose}\n      fullScreen={fullScreen ?? isMobile}\n      modalRole={modalRole}\n      isAnimating={isAnimating}\n      glass={glass}\n      rtl={rtl}\n      customMaxWidth={maxWidth}\n      TransitionComponent={SlideTransition}\n      maxWidth={maxWidth}\n      disableEscapeKeyDown={!closeOnEsc}\n      hideBackdrop={disableBackdrop}\n      keepMounted={keepMounted}\n      aria-labelledby={titleId}\n      aria-describedby={descId}\n      data-testid={dataTestId}\n      sx={{ zIndex }}\n      {...otherProps}\n    >\n      <ModalPanelContents\n        backLabel={backLabel}\n        showSkeleton={showSkeleton}\n        loadingText={loadingText}\n        titleId={titleId}\n        descId={descId}\n        navigationTitle={navigationTitle}\n        hideClose={hideClose}\n        canGoBack={canGoBack}\n        onBack={handleBack}\n        onClose={onClose}\n        headerActions={headerActions}\n        content={content}\n        modalActions={modalActions}\n        hasMobileActions={hasMobileActions}\n        rtl={rtl}\n        dataTestId={dataTestId}\n      />\n    </StyledDialog>\n  );\n};\n\nexport const StackedModal: FC<StackedModalProps> = (props) => {\n  // A modal with no caller-supplied id still needs a STABLE one — it keys this\n  // panel's entry in the stack, so a value that changed per render (as a\n  // `Math.random()` default does) would re-register it on every pass.\n  const fallbackId = useId();\n  const resolved = withDefaults(props);\n  return <StackedModalPanel {...resolved} modalId={resolved.modalId ?? fallbackId} />;\n};\n\n// Re-exported so `./StackedModal` stays the single public entry point for the\n// component and its stack primitives, as the barrel and existing imports expect.\nexport {\n  ModalStackProvider,\n  ModalStackProvider as StackedModalProvider,\n  useModalStack,\n  useModalStack as useStackedModal,\n} from './modal-stack';\nexport { StackedModalActions, StackedModalContent } from './StackedModal.parts';\n"],"mappings":"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","names":["SlideTransition"]}