@lumx/react 4.25.1-next.1 → 4.26.0-next.0

package/index.d.ts

@@ -1857,6 +1857,11 @@ interface ComboboxListProps$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 ComboboxOption elements). */
     children?: JSXElement;
     /** The ID of the listbox element. */
@@ -2307,6 +2312,11 @@ declare const Combobox: {
         displayName: string;
         className: "lumx-combobox-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: {
         (props: ComboboxPopoverComponentProps): react_jsx_runtime.JSX.Element;
@@ -4482,6 +4492,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. */

package/index.js

@@ -20,6 +20,9 @@ import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
 import { mdiInformationOutline } from '@lumx/icons/esm/information-outline.js';
 import castArray from 'lodash/castArray.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 noop$1 from 'lodash/noop.js';
 import concat from 'lodash/concat.js';
 import dropRight from 'lodash/dropRight.js';
@@ -48,7 +51,6 @@ import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline.js';
 import chunk from 'lodash/chunk.js';
 import { mdiDotsVertical } from '@lumx/icons/esm/dots-vertical.js';
 import take from 'lodash/take.js';
-import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank.js';
 import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked.js';
 import { mdiArrowDown } from '@lumx/icons/esm/arrow-down.js';
 import { mdiArrowUp } from '@lumx/icons/esm/arrow-up.js';
@@ -8083,7 +8085,7 @@ const TextField$1 = props => {
         ...labelProps,
         id: labelId,
         htmlFor: textFieldId,
-        className: element$N('label'),
+        className: classnames(labelProps?.className, element$N('label')),
         isRequired,
         theme,
         children: [label, charCounter]
@@ -8732,9 +8734,11 @@ const ComboboxList = forwardRef((props, ref) => {
   } = props;
   const internalRef = useRef(null);
   const mergedRef = useMergeRefs(ref, internalRef);
+  const selectionType = String(forwardedProps['aria-multiselectable']) === 'true' ? 'multiple' : 'single';
   const listContextValue = useMemo(() => ({
-    type
-  }), [type]);
+    type,
+    selectionType
+  }), [type, selectionType]);
   const [isOpen] = useComboboxOpen();
   const options = useComboboxEvent('optionsChange', undefined);
   const visibleCount = options?.optionsLength ?? 0;
@@ -9007,7 +9011,7 @@ const ComboboxOptionContext = /*#__PURE__*/createContext(undefined);
 function useComboboxOptionContext() {
   const context = useContext(ComboboxOptionContext);
   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;
 }
@@ -9074,8 +9078,9 @@ const ComboboxOption = 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(ComboboxOptionContext.Provider, {
     value: optionContextValue,
     children: after
@@ -10690,6 +10695,45 @@ const ComboboxSection = forwardRef((props, ref) => {
 ComboboxSection.displayName = COMPONENT_NAME$19;
 ComboboxSection.className = CLASSNAME$16;
 
+/**
+ * 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 ComboboxSelectionIcon$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-combobox-option__selection-icon"
+  });
+};
+
+const ComboboxSelectionIcon = () => {
+  const {
+    isSelected
+  } = useComboboxOptionContext();
+  const {
+    selectionType
+  } = useComboboxListContext();
+  return /*#__PURE__*/jsx(ComboboxSelectionIcon$1, {
+    selectionType: selectionType,
+    isSelected: isSelected
+  });
+};
+ComboboxSelectionIcon.displayName = 'ComboboxSelectionIcon';
+
 /**
  * Component display name.
  */
@@ -11189,6 +11233,8 @@ const Combobox = {
   OptionMoreInfo: ComboboxOptionMoreInfo,
   /** Loading placeholder skeleton(s) that auto-register loading state with the combobox handle. */
   OptionSkeleton: ComboboxOptionSkeleton,
+  /** 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: ComboboxSelectionIcon,
   /** 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. */
@@ -19110,6 +19156,7 @@ const SelectTextField$1 = props => {
     // Text field
     className,
     label,
+    labelProps,
     placeholder,
     icon,
     isDisabled,
@@ -19267,6 +19314,7 @@ const SelectTextField$1 = props => {
     errorTryReloadMessage: translations.errorTryReloadMessage,
     inputProps: {
       ...consumerInputProps,
+      labelProps: labelProps ?? consumerInputProps?.labelProps,
       placeholder,
       icon,
       value: displayValue,