@lumx/react 4.25.1-alpha.2 → 4.25.1-alpha.4

package/index.d.ts

@@ -1933,6 +1933,11 @@ interface ListboxListProps$1 extends HasClassName {
      * Omit (or set to `undefined`) when not loading — the attribute is not rendered as `"false"`.
      */
     'aria-busy'?: boolean;
+    /**
+     * Allow selecting several options (`aria-multiselectable`).
+     * Also read by `Combobox.SelectionIcon` to pick the checkbox icons.
+     */
+    'aria-multiselectable'?: boolean | 'true' | 'false';
     /** Content (should be ListboxOption elements). */
     children?: JSXElement;
     /** The ID of the listbox element. */
@@ -1979,7 +1984,7 @@ interface ListboxOptionProps$1 extends HasClassName {
      * When true, renders a bare `<li hidden>` with only the children text — no ARIA roles,
      * no classes, no visual structure. This keeps the element in the DOM so its textContent
      * can be read for future filter evaluations, while naturally excluding it from
-     * `[role="option"]` queries (focus navigation) and `.lumx-combobox-option` CSS rules
+     * `[role="option"]` queries (focus navigation) and `.lumx-listbox-option` CSS rules
      * (section/popover auto-hide).
      */
     hidden?: boolean;
@@ -2291,19 +2296,24 @@ declare const Combobox: {
         ref?: ComponentRef<E> | undefined;
     }) => React.JSX.Element) & {
         displayName: string;
-        className: "lumx-combobox-option-action";
+        className: "lumx-listbox-option-action";
     };
     /** Info button on an option that shows a popover on hover or keyboard highlight. */
     OptionMoreInfo: {
         (props: ListboxOptionMoreInfoProps): react_jsx_runtime.JSX.Element;
         displayName: string;
-        className: "lumx-combobox-option-more-info";
+        className: "lumx-listbox-option-more-info";
     };
     /** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
     OptionSkeleton: {
         (props: ListboxOptionSkeletonProps): react_jsx_runtime.JSX.Element;
         displayName: string;
-        className: "lumx-combobox-option-skeleton";
+        className: "lumx-listbox-option-skeleton";
+    };
+    /** Selection state icon (check circle / radio, or checkbox in multiple lists) for the `after` slot of an option. Reads the option `isSelected` and the list `aria-multiselectable`. */
+    SelectionIcon: {
+        (): react_jsx_runtime.JSX.Element;
+        displayName: string;
     };
     /** Floating popover container that auto-binds to the combobox anchor and open/close state. */
     Popover: {
@@ -2317,7 +2327,7 @@ declare const Combobox: {
     State: {
         (props: ListboxStateProps): react_jsx_runtime.JSX.Element;
         displayName: string;
-        className: "lumx-combobox-state";
+        className: "lumx-listbox-state";
     };
     /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
     Divider: Comp<ListDividerProps, HTMLLIElement>;
@@ -4486,6 +4496,8 @@ interface BaseSelectTextFieldWrapperProps<O> extends Pick<BaseSelectProps<O>, 'o
     maxLength?: number;
     /** Accessible label for the input element (overrides the visual label for screen readers). */
     ariaLabel?: string;
+    /** Additional props forwarded to the field label (e.g. `className: 'visually-hidden'`, `typography`). */
+    labelProps?: Partial<Omit<InputLabelProps$1, 'children' | 'htmlFor' | 'id'>>;
     /** Additional props forwarded to the Combobox.Input (and ultimately to TextField). */
     inputProps?: Record<string, any>;
     /** Props forwarded to the Combobox.Popover. */
@@ -4733,13 +4745,13 @@ declare const SelectTextField: {
     OptionMoreInfo: {
         (props: ListboxOptionMoreInfoProps): react_jsx_runtime.JSX.Element;
         displayName: string;
-        className: "lumx-combobox-option-more-info";
+        className: "lumx-listbox-option-more-info";
     };
     /** Skeleton loading placeholder for options being fetched. */
     OptionSkeleton: {
         (props: ListboxOptionSkeletonProps): react_jsx_runtime.JSX.Element;
         displayName: string;
-        className: "lumx-combobox-option-skeleton";
+        className: "lumx-listbox-option-skeleton";
     };
     /** Visual separator between option groups (alias for ListDivider). Purely decorative — invisible to screen readers. */
     Divider: Comp<ListDividerProps, HTMLLIElement>;

package/index.js

@@ -13,6 +13,10 @@ import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider, I as
 import { getDisabledState as getDisabledState$1 } from '@lumx/core/js/utils/disabledState';
 import { mdiInformationOutline } from '@lumx/icons/esm/information-outline.js';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
+import { mdiCheckboxBlankOutline } from '@lumx/icons/esm/checkbox-blank-outline.js';
+import { mdiCheckboxMarked } from '@lumx/icons/esm/checkbox-marked.js';
+import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
+import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank.js';
 import get from 'lodash/get.js';
 import isEmpty from 'lodash/isEmpty.js';
 import noop$1 from 'lodash/noop.js';
@@ -23,12 +27,8 @@ import reduce from 'lodash/reduce.js';
 import castArray from 'lodash/castArray.js';
 import { mdiChevronUp } from '@lumx/icons/esm/chevron-up.js';
 import { mdiChevronDown } from '@lumx/icons/esm/chevron-down.js';
-import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
 import { mdiMenuDown } from '@lumx/icons/esm/menu-down.js';
-import { mdiCheckboxBlankOutline } from '@lumx/icons/esm/checkbox-blank-outline.js';
-import { mdiCheckboxMarked } from '@lumx/icons/esm/checkbox-marked.js';
-import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank.js';
 import { mdiClose } from '@lumx/icons/esm/close.js';
 import isFunction from 'lodash/isFunction.js';
 import { mdiAlert } from '@lumx/icons/esm/alert.js';
@@ -6457,12 +6457,18 @@ List$1.defaultProps = DEFAULT_PROPS$13;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1m = 'ComboboxList';
+const COMPONENT_NAME$1m = 'ListboxList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-combobox-list';
+const CLASSNAME$1j = 'lumx-listbox-list';
+/**
+ * Legacy class name, emitted next to `CLASSNAME` for backward compatibility.
+ *
+ * @deprecated Use `CLASSNAME` (`lumx-listbox-*`). The legacy `lumx-combobox-*` class will be removed in the next major version.
+ */
+const LEGACY_CLASSNAME$6 = 'lumx-combobox-list';
 
 /**
  * ListboxList core template.
@@ -6484,7 +6490,7 @@ const ListboxList$1 = props => {
   } = props;
   return List$1({
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1j),
+    className: classnames(className, CLASSNAME$1j, LEGACY_CLASSNAME$6),
     ref,
     itemPadding: 'big',
     id,
@@ -6767,11 +6773,13 @@ const ListboxList = forwardRef((props, ref) => {
   } = useListboxContext();
   const internalRef = useRef(null);
   const mergedRef = useMergeRefs(ref, internalRef);
+  const selectionType = String(forwardedProps['aria-multiselectable']) === 'true' ? 'multiple' : 'single';
   const contextValue = useMemo(() => ({
     list,
     listboxId,
-    type
-  }), [list, listboxId, type]);
+    type,
+    selectionType
+  }), [list, listboxId, type, selectionType]);
 
   // Options are rendered only while visible (standalone: always; combobox: while open).
   const isOpen = useListboxEvent(list, 'open', false);
@@ -6940,16 +6948,23 @@ const ListItemAction$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'ComboboxOption';
+const COMPONENT_NAME$1j = 'ListboxOption';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-combobox-option';
+const CLASSNAME$1g = 'lumx-listbox-option';
+/**
+ * Legacy class name, emitted next to `CLASSNAME` for backward compatibility.
+ *
+ * @deprecated Use `CLASSNAME` (`lumx-listbox-*`). The legacy `lumx-combobox-*` class will be removed in the next major version.
+ */
+const LEGACY_CLASSNAME$5 = 'lumx-combobox-option';
 const {
   block: block$_,
   element: element$M
 } = bem(CLASSNAME$1g);
+const legacy$1 = bem(LEGACY_CLASSNAME$5);
 
 /**
  * ListboxOption core template.
@@ -6995,7 +7010,7 @@ const ListboxOption$1 = (props, {
     // Focus stays on the focus owner (combobox trigger or standalone listbox), never on the option.
     tabIndex: -1,
     id,
-    className: element$M('action'),
+    className: classnames(element$M('action'), legacy$1.element('action')),
     handleClick,
     'aria-selected': isSelected ? 'true' : 'false',
     'data-value': value,
@@ -7013,7 +7028,7 @@ const ListboxOption$1 = (props, {
     size: 'tiny',
     ...forwardedProps,
     hidden,
-    className: !hidden ? classnames(className, block$_()) : undefined,
+    className: !hidden ? classnames(className, block$_(), legacy$1.block()) : undefined,
     before,
     after,
     role: itemRole,
@@ -7021,7 +7036,7 @@ const ListboxOption$1 = (props, {
       children: [wrappedAction, description && /*#__PURE__*/jsx("p", {
         id: descriptionId,
         ...getTextProps({
-          className: element$M('description'),
+          className: classnames(element$M('description'), legacy$1.element('description')),
           typography: 'caption',
           color: 'dark-L2'
         }),
@@ -7048,7 +7063,7 @@ const ListboxOptionContext = /*#__PURE__*/createContext(undefined);
 function useListboxOptionContext() {
   const context = useContext(ListboxOptionContext);
   if (!context) {
-    throw new Error('Combobox.OptionMoreInfo must be used within a Combobox.Option `after` slot');
+    throw new Error('Combobox.Option sub-components must be used within a Combobox.Option `after` slot');
   }
   return context;
 }
@@ -7113,8 +7128,9 @@ const ListboxOption = forwardRef((props, ref) => {
   // Wrap `after` content in an option context so sub-components (e.g. OptionMoreInfo)
   // can access the parent option's ID for keyboard highlight detection.
   const optionContextValue = useMemo(() => ({
-    optionId
-  }), [optionId]);
+    optionId,
+    isSelected: Boolean(isSelected)
+  }), [optionId, isSelected]);
   const wrappedAfter = after ? /*#__PURE__*/jsx(ListboxOptionContext.Provider, {
     value: optionContextValue,
     children: after
@@ -7153,12 +7169,18 @@ ListboxOption.className = CLASSNAME$1g;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'ComboboxOptionAction';
+const COMPONENT_NAME$1i = 'ListboxOptionAction';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-combobox-option-action';
+const CLASSNAME$1f = 'lumx-listbox-option-action';
+/**
+ * Legacy class name, emitted next to `CLASSNAME` for backward compatibility.
+ *
+ * @deprecated Use `CLASSNAME` (`lumx-listbox-*`). The legacy `lumx-combobox-*` class will be removed in the next major version.
+ */
+const LEGACY_CLASSNAME$4 = 'lumx-combobox-option-action';
 
 /**
  * ListboxOptionAction core template.
@@ -7181,7 +7203,7 @@ const ListboxOptionAction$1 = props => {
     as: Element,
     ...forwardedProps,
     role: 'gridcell',
-    className: classnames(className, CLASSNAME$1f),
+    className: classnames(className, CLASSNAME$1f, LEGACY_CLASSNAME$4),
     handleClick,
     children
   });
@@ -7251,16 +7273,23 @@ const ListboxOptionAction = Object.assign(forwardRefPolymorphic((props, ref) =>
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'ComboboxOptionMoreInfo';
+const COMPONENT_NAME$1h = 'ListboxOptionMoreInfo';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-combobox-option-more-info';
+const CLASSNAME$1e = 'lumx-listbox-option-more-info';
+/**
+ * Legacy class name, emitted next to `CLASSNAME` for backward compatibility.
+ *
+ * @deprecated Use `CLASSNAME` (`lumx-listbox-*`). The legacy `lumx-combobox-*` class will be removed in the next major version.
+ */
+const LEGACY_CLASSNAME$3 = 'lumx-combobox-option-more-info';
 const {
   block: block$Z,
   element: element$L
 } = bem(CLASSNAME$1e);
+const legacy = bem(LEGACY_CLASSNAME$3);
 
 /**
  * ListboxOptionMoreInfo core template.
@@ -7294,7 +7323,7 @@ const ListboxOptionMoreInfo$1 = (props, {
       icon: mdiInformationOutline,
       size: "s",
       ...buttonProps,
-      className: block$Z([className, buttonProps?.className]),
+      className: block$Z([className, buttonProps?.className, LEGACY_CLASSNAME$3]),
       emphasis: "low",
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
@@ -7305,7 +7334,7 @@ const ListboxOptionMoreInfo$1 = (props, {
       label: ""
     }), /*#__PURE__*/jsx(Popover, {
       id: popoverId,
-      className: element$L('popover'),
+      className: classnames(element$L('popover'), legacy.element('popover')),
       anchorRef: ref,
       isOpen: isOpen,
       closeMode: "unmount",
@@ -8257,12 +8286,18 @@ const SkeletonTypography$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'ComboboxOptionSkeleton';
+const COMPONENT_NAME$1e = 'ListboxOptionSkeleton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-combobox-option-skeleton';
+const CLASSNAME$1b = 'lumx-listbox-option-skeleton';
+/**
+ * Legacy class name, emitted next to `CLASSNAME` for backward compatibility.
+ *
+ * @deprecated Use `CLASSNAME` (`lumx-listbox-*`). The legacy `lumx-combobox-*` class will be removed in the next major version.
+ */
+const LEGACY_CLASSNAME$2 = 'lumx-combobox-option-skeleton';
 
 /**
  * ListboxOptionSkeleton core template.
@@ -8289,7 +8324,7 @@ const ListboxOptionSkeleton$1 = props => {
     size: 'tiny',
     role: 'none',
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1b),
+    className: classnames(className, CLASSNAME$1b, LEGACY_CLASSNAME$2),
     children: children || /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(SkeletonTypography$1, {
         typography: "body1",
@@ -8345,15 +8380,60 @@ const ListboxOptionSkeleton = props => {
 ListboxOptionSkeleton.displayName = COMPONENT_NAME$1e;
 ListboxOptionSkeleton.className = CLASSNAME$1b;
 
+/**
+ * Selection state icon of an option. The icon is always rendered after the label.
+ *
+ * - `single`: a check circle icon when selected, a blank radio icon otherwise.
+ * - `multiple`: a checkbox icon, marked or blank.
+ */
+const ListboxOptionSelectionIcon$1 = ({
+  selectionType,
+  isSelected
+}) => {
+  let icon;
+  if (selectionType === 'multiple') {
+    icon = isSelected ? mdiCheckboxMarked : mdiCheckboxBlankOutline;
+  } else if (selectionType === 'single') {
+    icon = isSelected ? mdiCheckCircle : mdiRadioboxBlank;
+  } else {
+    return null;
+  }
+  return /*#__PURE__*/jsx(Icon$1, {
+    icon: icon,
+    color: isSelected ? 'primary' : undefined,
+    className: "lumx-listbox-option__selection-icon lumx-combobox-option__selection-icon"
+  });
+};
+
+const ListboxOptionSelectionIcon = () => {
+  const {
+    isSelected
+  } = useListboxOptionContext();
+  const {
+    selectionType
+  } = useListboxContext();
+  return /*#__PURE__*/jsx(ListboxOptionSelectionIcon$1, {
+    selectionType: selectionType,
+    isSelected: isSelected
+  });
+};
+ListboxOptionSelectionIcon.displayName = 'ComboboxSelectionIcon';
+
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'ComboboxSection';
+const COMPONENT_NAME$1d = 'ListboxSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-combobox-section';
+const CLASSNAME$1a = 'lumx-listbox-section';
+/**
+ * Legacy class name, emitted next to `CLASSNAME` for backward compatibility.
+ *
+ * @deprecated Use `CLASSNAME` (`lumx-listbox-*`). The legacy `lumx-combobox-*` class will be removed in the next major version.
+ */
+const LEGACY_CLASSNAME$1 = 'lumx-combobox-section';
 
 /**
  * ListboxSection core template.
@@ -8380,7 +8460,7 @@ const ListboxSection$1 = (props, {
     ...forwardedProps,
     hidden: hidden,
     "aria-hidden": ariaHidden || undefined,
-    className: !hidden ? classnames(className, CLASSNAME$1a) : undefined,
+    className: !hidden ? classnames(className, CLASSNAME$1a, LEGACY_CLASSNAME$1) : undefined,
     role: !ariaHidden ? 'none' : undefined,
     itemsWrapperProps: {
       role: 'group'
@@ -8528,12 +8608,18 @@ ListboxSection.className = CLASSNAME$1a;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'ComboboxState';
+const COMPONENT_NAME$1b = 'ListboxState';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-combobox-state';
+const CLASSNAME$18 = 'lumx-listbox-state';
+/**
+ * Legacy class name, emitted next to `CLASSNAME` for backward compatibility.
+ *
+ * @deprecated Use `CLASSNAME` (`lumx-listbox-*`). The legacy `lumx-combobox-*` class will be removed in the next major version.
+ */
+const LEGACY_CLASSNAME = 'lumx-combobox-state';
 const {
   block: block$V
 } = bem(CLASSNAME$18);
@@ -8597,7 +8683,7 @@ const ListboxState$1 = (props, {
   // the popover's closeMode="hide") and revealing it doesn't trigger announcements.
   const renderContent = isOpen;
   return /*#__PURE__*/jsxs(GenericBlock, {
-    className: classnames(!show && visuallyHidden(), block$V(), padding('regular')),
+    className: classnames(!show && visuallyHidden(), block$V(), LEGACY_CLASSNAME, padding('regular')),
     orientation: "vertical",
     ...alignProps,
     role: "status",
@@ -10579,7 +10665,7 @@ const TextField$1 = props => {
         ...labelProps,
         id: labelId,
         htmlFor: textFieldId,
-        className: element$G('label'),
+        className: classnames(labelProps?.className, element$G('label')),
         isRequired,
         theme,
         children: [label, charCounter]
@@ -11350,6 +11436,8 @@ const Combobox = {
   OptionMoreInfo: ListboxOptionMoreInfo,
   /** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
   OptionSkeleton: ListboxOptionSkeleton,
+  /** Selection state icon (check circle / radio, or checkbox in multiple lists) for the `after` slot of an option. Reads the option `isSelected` and the list `aria-multiselectable`. */
+  SelectionIcon: ListboxOptionSelectionIcon,
   /** Floating popover container that auto-binds to the combobox anchor and open/close state. */
   Popover: ComboboxPopover,
   /** Labelled group of options that auto-hides when all its child options are filtered out. */
@@ -18761,31 +18849,6 @@ function getOptionDisplayName(value, getOptionName, getOptionId) {
   return '';
 }
 
-/**
- * Selection state icon of an option. The icon is always rendered after the label.
- *
- * - `single`: a check circle icon when selected, a blank radio icon otherwise.
- * - `multiple`: a checkbox icon, marked or blank.
- */
-const SelectionIcon = ({
-  selectionType,
-  isSelected
-}) => {
-  let icon;
-  if (selectionType === 'multiple') {
-    icon = isSelected ? mdiCheckboxMarked : mdiCheckboxBlankOutline;
-  } else if (selectionType === 'single') {
-    icon = isSelected ? mdiCheckCircle : mdiRadioboxBlank;
-  } else {
-    return null;
-  }
-  return /*#__PURE__*/jsx(Icon$1, {
-    icon: icon,
-    color: isSelected ? 'primary' : undefined,
-    className: "lumx-combobox-option__selection-icon"
-  });
-};
-
 /**
  * Render options as ListboxOption elements.
  * Framework-specific components are passed as a second argument.
@@ -18798,7 +18861,6 @@ function renderSelectOptions(props, components) {
     getOptionDescription,
     renderOption,
     selected,
-    selectionType,
     getSectionId,
     renderSectionTitle
   } = props;
@@ -18820,8 +18882,7 @@ function renderSelectOptions(props, components) {
           getOptionName,
           getOptionDescription,
           renderOption,
-          selected,
-          selectionType
+          selected
           // getSectionId intentionally omitted to render flat options inside.
         }, components)
       }, sectionId);
@@ -18835,10 +18896,7 @@ function renderSelectOptions(props, components) {
     const name = getWithSelector(getOptionName || getOptionId, item) || id;
     const description = getOptionDescription && getWithSelector(getOptionDescription, item);
     const isSelected = selectedIds?.has(id) ?? false;
-    const after = /*#__PURE__*/jsx(SelectionIcon, {
-      selectionType: selectionType,
-      isSelected: isSelected
-    });
+    const after = /*#__PURE__*/jsx(Combobox.SelectionIcon, {});
 
     // Delegate to the consumer's render function when provided.
     // The consumer receives core-computed context and is responsible for rendering
@@ -18956,8 +19014,7 @@ const SelectButton$2 = (props, {
           renderOption,
           getSectionId,
           renderSectionTitle,
-          selected: value,
-          selectionType
+          selected: value
         }, {
           Combobox
         }), onLoadMore && InfiniteScroll && /*#__PURE__*/jsx(InfiniteScroll, {
@@ -19259,8 +19316,7 @@ const SelectTextField$2 = (props, {
           renderOption,
           getSectionId,
           renderSectionTitle,
-          selected,
-          selectionType: isMultiselectable ? 'multiple' : 'single'
+          selected
         }, {
           Combobox
         }), afterOptions, onLoadMore && InfiniteScroll && /*#__PURE__*/jsx(InfiniteScroll, {
@@ -19312,6 +19368,7 @@ const SelectTextField$1 = props => {
     // Text field
     className,
     label,
+    labelProps,
     placeholder,
     icon,
     isDisabled,
@@ -19469,6 +19526,7 @@ const SelectTextField$1 = props => {
     errorTryReloadMessage: translations.errorTryReloadMessage,
     inputProps: {
       ...consumerInputProps,
+      labelProps: labelProps ?? consumerInputProps?.labelProps,
       placeholder,
       icon,
       value: displayValue,