@12-apps/ui 6.49.1 → 6.49.3

package/src/components/form/Select/Select.md

@@ -81,6 +81,22 @@ the option's value in its own type. The test ids keep their spelling.
 - Pass `noOptionsText` — the library ships no copy, so unset means an empty list
   says nothing.
 
+## `MenuSelect`: the menu alone, for a screen that counts bytes
+
+`Select` decides at render time, so it imports the searchable engine (MUI
+`Autocomplete`, and the `Chip` it pulls in) wherever it is used, even for a
+two-option menu. `MenuSelect` has the same props, events and test ids and never
+searches, so a module importing only it lets the bundler drop that engine:
+
+```tsx
+import { MenuSelect } from '@12-apps/ui/form/Select';
+
+<MenuSelect label="Dia" options={days} value={day} onChange={onDay} />
+```
+
+Use it on a page with a load budget when the list is short or ordered (days,
+languages). Anywhere else, `Select` is the default.
+
 ## Visual Variants
 
 ### Default

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

@@ -0,0 +1,152 @@
+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 React from 'react';
+
+import { formControlSize, SelectFieldControl } from './Select.styles';
+import type { MenuSelectProps, SelectProps } from './Select.types';
+
+import { splitTestId } from '../../../platform/test-id';
+import { asFieldSize } from '../../../tokens/field-height';
+
+/**
+ * Build the placeholder item plus one MenuItem per option. Returns a flat ARRAY
+ * (not a Fragment): MUI `Select` enumerates its children with `React.Children`,
+ * which does not descend into Fragments — a Fragment would hide every option.
+ */
+function renderMenuItems(
+  options: SelectProps['options'],
+  placeholder: string | undefined,
+  dataTestId: string | undefined,
+): React.ReactNode[] {
+  const optionTestId = (value: string | number): string =>
+    dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;
+  const items = options.map((option) => (
+    <MenuItem
+      key={option.value}
+      value={option.value}
+      disabled={option.disabled}
+      data-testid={optionTestId(option.value)}
+    >
+      {option.label}
+    </MenuItem>
+  ));
+  if (placeholder) {
+    items.unshift(
+      <MenuItem key="__placeholder__" value="" disabled>
+        {placeholder}
+      </MenuItem>,
+    );
+  }
+  return items;
+}
+
+const MenuField = React.forwardRef<HTMLDivElement, SelectProps>(
+  (
+    {
+      // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined
+      // resolves to the default variant, MUI's medium size, and no glow/pulse —
+      // keeping this render function under the complexity budget.
+      variant,
+      options,
+      label,
+      helperText,
+      fullWidth = true,
+      size,
+      error,
+      placeholder,
+      glow,
+      pulse,
+      value,
+      'aria-label': ariaLabel,
+      ...rest
+    },
+    ref,
+  ) => {
+    const { testId: dataTestId, rest: props } = splitTestId(rest);
+    const labelId = React.useId();
+    const helperTextId = React.useId();
+    const selectId = React.useId();
+
+    return (
+      <SelectFieldControl
+        fullWidth={fullWidth}
+        size={formControlSize(size)}
+        error={error}
+        customVariant={variant}
+        fieldSize={asFieldSize(size)}
+        glow={glow} pulse={pulse}
+        ref={ref}
+        data-testid={dataTestId}
+      >
+        {label && (
+          <InputLabel id={labelId} htmlFor={selectId}>
+            {label}
+          </InputLabel>
+        )}
+        <MuiSelect
+          id={selectId}
+          labelId={label ? labelId : undefined}
+          label={label}
+          displayEmpty={Boolean(placeholder)}
+          aria-describedby={helperText ? helperTextId : undefined}
+          data-testid={dataTestId ? `${dataTestId}-select` : 'select'}
+          value={value ?? ''}
+          {...props}
+          /*
+           * `role="combobox"` sits on MUI's display DIV, not on the hidden
+           * native input that `{...props}` reaches — so an `aria-label` passed
+           * to this component never landed on the element carrying the role,
+           * and MUI's `aria-labelledby` then fell back to that div's OWN id.
+           * The control announced as its current value: a filter's field
+           * select read "Status" instead of "Filtro 1 — campo".
+           *
+           * Forwarding it here names the right element. The explicit
+           * `undefined` clears that self-referential `aria-labelledby`, which
+           * would otherwise win — a labelledby always beats a label in the
+           * accessible-name computation.
+           */
+          SelectDisplayProps={
+            ariaLabel === undefined
+              ? undefined
+              : { 'aria-label': ariaLabel, 'aria-labelledby': undefined }
+          }
+        >
+          {renderMenuItems(options, placeholder, dataTestId)}
+        </MuiSelect>
+        {helperText && (
+          <FormHelperText id={helperTextId} error={error}>
+            {helperText}
+          </FormHelperText>
+        )}
+      </SelectFieldControl>
+    );
+  },
+);
+
+MenuField.displayName = 'MenuField';
+
+/**
+ * The menu select alone: it never becomes a search box, whatever the count.
+ *
+ * For a screen that pays for every byte it ships. `Select` imports the
+ * searchable engine (MUI `Autocomplete`) to decide at render time, so every
+ * bundle that renders one carries it, a two-option menu included. This module
+ * imports no part of that engine, and `@12-apps/ui/form/MenuSelect` is an entry
+ * of its own, so importing it cannot pull `Autocomplete` (or the `Chip` it
+ * brings) into a bundle. Same props, events and test ids as `Select`, so a call site
+ * can switch between the two without touching anything else.
+ */
+export const MenuSelect = React.forwardRef<HTMLDivElement, MenuSelectProps>((props, ref) => {
+  // `Select` hands its whole props over, so the searchable path's own two can
+  // still arrive at runtime: nothing for MUI's Select to receive.
+  const {
+    searchable: _searchable,
+    noOptionsText: _noOptionsText,
+    ...menuProps
+  } = props as SelectProps;
+  return <MenuField {...menuProps} ref={ref} />;
+});
+
+MenuSelect.displayName = 'MenuSelect';

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

@@ -1,133 +1,9 @@
-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 React from 'react';
 
+import { MenuSelect } from './Select.menu';
 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 { asFieldSize } from '../../../tokens/field-height';
-
-/**
- * Build the placeholder item plus one MenuItem per option. Returns a flat ARRAY
- * (not a Fragment): MUI `Select` enumerates its children with `React.Children`,
- * which does not descend into Fragments — a Fragment would hide every option.
- */
-function renderMenuItems(
-  options: SelectProps['options'],
-  placeholder: string | undefined,
-  dataTestId: string | undefined,
-): React.ReactNode[] {
-  const optionTestId = (value: string | number): string =>
-    dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;
-  const items = options.map((option) => (
-    <MenuItem
-      key={option.value}
-      value={option.value}
-      disabled={option.disabled}
-      data-testid={optionTestId(option.value)}
-    >
-      {option.label}
-    </MenuItem>
-  ));
-  if (placeholder) {
-    items.unshift(
-      <MenuItem key="__placeholder__" value="" disabled>
-        {placeholder}
-      </MenuItem>,
-    );
-  }
-  return items;
-}
-
-const MenuSelect = React.forwardRef<HTMLDivElement, SelectProps>(
-  (
-    {
-      // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined
-      // resolves to the default variant, MUI's medium size, and no glow/pulse —
-      // keeping this render function under the complexity budget.
-      variant,
-      options,
-      label,
-      helperText,
-      fullWidth = true,
-      size,
-      error,
-      placeholder,
-      glow,
-      pulse,
-      value,
-      'aria-label': ariaLabel,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { testId: dataTestId, rest: props } = splitTestId(rest);
-    const labelId = React.useId();
-    const helperTextId = React.useId();
-    const selectId = React.useId();
-
-    return (
-      <SelectFieldControl
-        fullWidth={fullWidth}
-        size={formControlSize(size)}
-        error={error}
-        customVariant={variant}
-        fieldSize={asFieldSize(size)}
-        glow={glow} pulse={pulse}
-        ref={ref}
-        data-testid={dataTestId}
-      >
-        {label && (
-          <InputLabel id={labelId} htmlFor={selectId}>
-            {label}
-          </InputLabel>
-        )}
-        <MuiSelect
-          id={selectId}
-          labelId={label ? labelId : undefined}
-          label={label}
-          displayEmpty={Boolean(placeholder)}
-          aria-describedby={helperText ? helperTextId : undefined}
-          data-testid={dataTestId ? `${dataTestId}-select` : 'select'}
-          value={value ?? ''}
-          {...props}
-          /*
-           * `role="combobox"` sits on MUI's display DIV, not on the hidden
-           * native input that `{...props}` reaches — so an `aria-label` passed
-           * to this component never landed on the element carrying the role,
-           * and MUI's `aria-labelledby` then fell back to that div's OWN id.
-           * The control announced as its current value: a filter's field
-           * select read "Status" instead of "Filtro 1 — campo".
-           *
-           * Forwarding it here names the right element. The explicit
-           * `undefined` clears that self-referential `aria-labelledby`, which
-           * would otherwise win — a labelledby always beats a label in the
-           * accessible-name computation.
-           */
-          SelectDisplayProps={
-            ariaLabel === undefined
-              ? undefined
-              : { 'aria-label': ariaLabel, 'aria-labelledby': undefined }
-          }
-        >
-          {renderMenuItems(options, placeholder, dataTestId)}
-        </MuiSelect>
-        {helperText && (
-          <FormHelperText id={helperTextId} error={error}>
-            {helperText}
-          </FormHelperText>
-        )}
-      </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
@@ -135,9 +11,9 @@ MenuSelect.displayName = 'MenuSelect';
  */
 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} />;
+  return <MenuSelect {...props} ref={ref} />;
 });
 
 Select.displayName = 'Select';
+
+export { MenuSelect };

package/src/components/form/Select/Select.types.ts

@@ -21,3 +21,9 @@ export interface SelectProps
    */
   'data-testid'?: string;
 }
+
+/**
+ * `MenuSelect`'s props: `Select`'s, less the two that only the searchable path
+ * reads. A menu that never searches should not accept `searchable` and ignore it.
+ */
+export type MenuSelectProps = Omit<SelectProps, 'searchable' | 'noOptionsText'>;

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

@@ -1,5 +1,6 @@
-export { Select } from './Select';
+export { MenuSelect, Select } from './Select';
 export type {
+  MenuSelectProps,
   SelectBaseProps,
   SelectOption,
   SelectProps,

package/src/components/form/Select/menu.ts

@@ -0,0 +1,13 @@
+/**
+ * `@12-apps/ui/form/MenuSelect`: the menu select, and nothing that searches.
+ * Its own entry so a bundle can take it without `Select`'s searchable engine.
+ */
+export { MenuSelect } from './Select.menu';
+export type {
+  MenuSelectProps,
+  SelectBaseProps,
+  SelectOption,
+  SelectProps,
+  SelectValue,
+  SelectVariant,
+} from './Select.types';

package/dist/chunk-AV6NNCRO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Select/Select.tsx"],"sourcesContent":["import FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport MuiSelect from '@mui/material/Select/index.js';\nimport React from 'react';\n\nimport { SearchableSelect, shouldSearch } from './Select.searchable';\nimport { formControlSize, SelectFieldControl } from './Select.styles';\nimport type { SelectProps } from './Select.types';\n\nimport { splitTestId } from '../../../platform/test-id';\nimport { asFieldSize } from '../../../tokens/field-height';\n\n/**\n * Build the placeholder item plus one MenuItem per option. Returns a flat ARRAY\n * (not a Fragment): MUI `Select` enumerates its children with `React.Children`,\n * which does not descend into Fragments — a Fragment would hide every option.\n */\nfunction renderMenuItems(\n  options: SelectProps['options'],\n  placeholder: string | undefined,\n  dataTestId: string | undefined,\n): React.ReactNode[] {\n  const optionTestId = (value: string | number): string =>\n    dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;\n  const items = options.map((option) => (\n    <MenuItem\n      key={option.value}\n      value={option.value}\n      disabled={option.disabled}\n      data-testid={optionTestId(option.value)}\n    >\n      {option.label}\n    </MenuItem>\n  ));\n  if (placeholder) {\n    items.unshift(\n      <MenuItem key=\"__placeholder__\" value=\"\" disabled>\n        {placeholder}\n      </MenuItem>,\n    );\n  }\n  return items;\n}\n\nconst MenuSelect = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined\n      // resolves to the default variant, MUI's medium size, and no glow/pulse —\n      // keeping this render function under the complexity budget.\n      variant,\n      options,\n      label,\n      helperText,\n      fullWidth = true,\n      size,\n      error,\n      placeholder,\n      glow,\n      pulse,\n      value,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { testId: dataTestId, rest: props } = splitTestId(rest);\n    const labelId = React.useId();\n    const helperTextId = React.useId();\n    const selectId = React.useId();\n\n    return (\n      <SelectFieldControl\n        fullWidth={fullWidth}\n        size={formControlSize(size)}\n        error={error}\n        customVariant={variant}\n        fieldSize={asFieldSize(size)}\n        glow={glow} pulse={pulse}\n        ref={ref}\n        data-testid={dataTestId}\n      >\n        {label && (\n          <InputLabel id={labelId} htmlFor={selectId}>\n            {label}\n          </InputLabel>\n        )}\n        <MuiSelect\n          id={selectId}\n          labelId={label ? labelId : undefined}\n          label={label}\n          displayEmpty={Boolean(placeholder)}\n          aria-describedby={helperText ? helperTextId : undefined}\n          data-testid={dataTestId ? `${dataTestId}-select` : 'select'}\n          value={value ?? ''}\n          {...props}\n          /*\n           * `role=\"combobox\"` sits on MUI's display DIV, not on the hidden\n           * native input that `{...props}` reaches — so an `aria-label` passed\n           * to this component never landed on the element carrying the role,\n           * and MUI's `aria-labelledby` then fell back to that div's OWN id.\n           * The control announced as its current value: a filter's field\n           * select read \"Status\" instead of \"Filtro 1 — campo\".\n           *\n           * Forwarding it here names the right element. The explicit\n           * `undefined` clears that self-referential `aria-labelledby`, which\n           * would otherwise win — a labelledby always beats a label in the\n           * accessible-name computation.\n           */\n          SelectDisplayProps={\n            ariaLabel === undefined\n              ? undefined\n              : { 'aria-label': ariaLabel, 'aria-labelledby': undefined }\n          }\n        >\n          {renderMenuItems(options, placeholder, dataTestId)}\n        </MuiSelect>\n        {helperText && (\n          <FormHelperText id={helperTextId} error={error}>\n            {helperText}\n          </FormHelperText>\n        )}\n      </SelectFieldControl>\n    );\n  },\n);\n\nMenuSelect.displayName = 'MenuSelect';\n\n/**\n * The house select. Up to five options it opens a menu; from six on it is a\n * search box over a list of bounded height (`Select.searchable.tsx`), with the\n * same props, events and test ids either way. `searchable` overrides the count.\n */\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  if (shouldSearch(props)) return <SearchableSelect {...props} ref={ref} />;\n  // The searchable path's own props: nothing for MUI's Select to receive.\n  const { searchable: _searchable, noOptionsText: _noOptionsText, ...menuProps } = props;\n  return <MenuSelect {...menuProps} ref={ref} />;\n});\n\nSelect.displayName = 'Select';\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,oBAAoB;AAC3B,OAAO,gBAAgB;AACvB,OAAO,cAAc;AACrB,OAAO,eAAe;AACtB,OAAO,WAAW;AAsBd,cA+CE,YA/CF;AARJ,SAAS,gBACP,SACA,aACA,YACmB;AACnB,QAAM,eAAe,CAAC,UACpB,aAAa,GAAG,UAAU,WAAW,KAAK,KAAK,UAAU,KAAK;AAChE,QAAM,QAAQ,QAAQ,IAAI,CAAC,WACzB;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,OAAO;AAAA,MACd,UAAU,OAAO;AAAA,MACjB,eAAa,aAAa,OAAO,KAAK;AAAA,MAErC,iBAAO;AAAA;AAAA,IALH,OAAO;AAAA,EAMd,CACD;AACD,MAAI,aAAa;AACf,UAAM;AAAA,MACJ,oBAAC,YAA+B,OAAM,IAAG,UAAQ,MAC9C,yBADW,iBAEd;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEA,IAAM,aAAa,MAAM;AAAA,EACvB,CACE;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,QAAQ,YAAY,MAAM,MAAM,IAAI,YAAY,IAAI;AAC5D,UAAM,UAAU,MAAM,MAAM;AAC5B,UAAM,eAAe,MAAM,MAAM;AACjC,UAAM,WAAW,MAAM,MAAM;AAE7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,gBAAgB,IAAI;AAAA,QAC1B;AAAA,QACA,eAAe;AAAA,QACf,WAAW,YAAY,IAAI;AAAA,QAC3B;AAAA,QAAY;AAAA,QACZ;AAAA,QACA,eAAa;AAAA,QAEZ;AAAA,mBACC,oBAAC,cAAW,IAAI,SAAS,SAAS,UAC/B,iBACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,SAAS,QAAQ,UAAU;AAAA,cAC3B;AAAA,cACA,cAAc,QAAQ,WAAW;AAAA,cACjC,oBAAkB,aAAa,eAAe;AAAA,cAC9C,eAAa,aAAa,GAAG,UAAU,YAAY;AAAA,cACnD,OAAO,SAAS;AAAA,cACf,GAAG;AAAA,cAcJ,oBACE,cAAc,SACV,SACA,EAAE,cAAc,WAAW,mBAAmB,OAAU;AAAA,cAG7D,0BAAgB,SAAS,aAAa,UAAU;AAAA;AAAA,UACnD;AAAA,UACC,cACC,oBAAC,kBAAe,IAAI,cAAc,OAC/B,sBACH;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAOlB,IAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,QAAQ;AAClF,MAAI,aAAa,KAAK,EAAG,QAAO,oBAAC,oBAAkB,GAAG,OAAO,KAAU;AAEvE,QAAM,EAAE,YAAY,aAAa,eAAe,gBAAgB,GAAG,UAAU,IAAI;AACjF,SAAO,oBAAC,cAAY,GAAG,WAAW,KAAU;AAC9C,CAAC;AAED,OAAO,cAAc;","names":[]}