@lumx/react 4.16.0-alpha.3 → 4.16.0-next.0

package/index.d.ts

@@ -4009,14 +4009,14 @@ declare const SelectMultipleField: React.FC<SelectMultipleProps>;
 declare const SelectMultiple: Comp<SelectMultipleProps, HTMLDivElement>;
 
 /**
- * Status of the SelectTextField dropdown list.
+ * Status of the select dropdown list.
  *
  * - `'idle'` — Default state, no loading indicators.
  * - `'loading'` — Full loading: shows skeleton placeholders, hides real options.
  * - `'loadingMore'` — Paginated loading: appends a skeleton after existing options.
  * - `'error'` — Error state: shows an error message in the dropdown.
  */
-type SelectTextFieldStatus = 'idle' | 'loading' | 'loadingMore' | 'error';
+type SelectListStatus = 'idle' | 'loading' | 'loadingMore' | 'error';
 /**
  * Context passed to the `renderOption` callback alongside the option object.
  * Contains core-computed values that the consumer should forward to `<Combobox.Option>`.
@@ -4061,13 +4061,13 @@ interface BaseSelectProps<O> {
      * section id are grouped together. The id is also used as the default displayed
      * label unless `renderSectionTitle` is provided.
      */
-    getSectionId?: Selector<O, string>;
+    getSectionId?: Selector<O, string | undefined>;
     /**
      * Custom section title render function. Receives the section id and the options
      * in that section. Returns custom JSX to display as the section header.
      * When not provided, the section id is used as a plain text label.
      */
-    renderSectionTitle?: (sectionId: string, options: O[]) => JSXElement;
+    renderSectionTitle?: (sectionId: string | undefined, options: O[]) => JSXElement;
 }
 /**
  * Shared translation labels for SelectTextField wrappers (React and Vue).
@@ -4138,7 +4138,7 @@ interface BaseSelectTextFieldWrapperProps<O> extends Pick<BaseSelectProps<O>, 'o
      * Status of the dropdown list.
      * @default 'idle'
      */
-    listStatus?: SelectTextFieldStatus;
+    listStatus?: SelectListStatus;
     /**
      * Controls how the combobox filters options as the user types.
      *
@@ -4246,7 +4246,7 @@ interface SelectButtonProps$1<O> extends BaseSelectProps<O> {
      * - `'error'` — Error state: shows an error message in the dropdown.
      * @default 'idle'
      */
-    listStatus?: SelectTextFieldStatus;
+    listStatus?: SelectListStatus;
     /** Optional translations for screen-reader announcements (loading/empty/error/option count). */
     translations?: SelectButtonTranslations;
     /** Callback fired when the dropdown open state changes. */
@@ -4281,7 +4281,7 @@ type SelectButtonSelectProps<O> = Omit<ReactToJSX<SelectButtonProps$1<O>>, 'rend
  * Forwarded trigger props for a given element `E`, minus the keys that the
  * component manages internally.
  */
-type TriggerProps<E extends ElementType$1> = Omit<NamedProps<React__default.ComponentPropsWithoutRef<E>>, OmittedKeys>;
+type TriggerProps<E extends ElementType$1> = Omit<NamedProps<React__default.ComponentProps<E>>, OmittedKeys>;
 /**
  * Common base — Select-specific props plus the ARIA / label / popover layer.
  * `as`, `ref`, `selectionType`, `value`, `onChange` are intentionally hoisted
@@ -4299,7 +4299,7 @@ type CommonSelectButtonProps<O> = SelectButtonSelectProps<O> & GenericProps$1 &
      * Status of the dropdown list (loading, error, etc.).
      * @default 'idle'
      */
-    listStatus?: SelectTextFieldStatus;
+    listStatus?: SelectListStatus;
     /** Screen-reader translations (loading/empty/error/option count). */
     translations?: SelectButtonTranslations;
 };
@@ -4313,8 +4313,8 @@ type CommonSelectButtonProps<O> = SelectButtonSelectProps<O> & GenericProps$1 &
  * fully replaced and only props valid for that component apply.
  *
  * Discriminated on `selectionType`:
- * - default / `'single'` → `value?: O`, `onChange?: (newValue?: O) => void`.
- * - `'multiple'`         → `value?: O[]`, `onChange?: (newValue?: O[]) => void`.
+ * - default / `'single'` → `value?: O`, `onChange?: (newValue: O) => void`.
+ * - `'multiple'`         → `value?: O[]`, `onChange?: (newValue: O[]) => void`.
  *
  * `as` and `selectionType` are top-level on this type (rather than buried in
  * an intersection or union member) so that TS can infer `E` from `as` and
@@ -4338,15 +4338,16 @@ type SelectButtonProps<O, E extends ElementType$1 = typeof DefaultButton, S exte
     /** Selected option(s). Shape depends on `selectionType`. */
     value?: S extends 'multiple' ? O[] : O;
     /** Called when the selection changes. Shape depends on `selectionType`. */
-    onChange?: S extends 'multiple' ? (newValue?: O[]) => void : (newValue?: O) => void;
+    onChange?: S extends 'multiple' ? (newValue: O[]) => void : (newValue: O) => void;
 };
 /**
  * Single-selection props (`selectionType` defaults to `'single'`).
- * Backwards-compatible alias — existing consumers do not need to set `selectionType`.
  */
-type SingleSelectButtonProps<O, E extends ElementType$1 = typeof DefaultButton> = SelectButtonProps<O, E, 'single'>;
-/** Multi-selection props (`selectionType: 'multiple'` is required to opt in). */
-type MultipleSelectButtonProps<O, E extends ElementType$1 = typeof DefaultButton> = SelectButtonProps<O, E, 'multiple'>;
+type SingleSelectButtonProps<O, E extends ElementType$1 = typeof DefaultButton> = NamedProps<SelectButtonProps<O, E, 'single'>>;
+/**
+ * Multi-selection props (`selectionType: 'multiple'` is required to opt in).
+ */
+type MultipleSelectButtonProps<O, E extends ElementType$1 = typeof DefaultButton> = NamedProps<SelectButtonProps<O, E, 'multiple'>>;
 
 /**
  * SelectButton compound component.
@@ -4371,7 +4372,7 @@ interface BaseSelectTextFieldProps<O = any> extends BaseSelectTextFieldWrapperPr
      * in that section. Returns custom JSX to display as the section header.
      * When not provided, the section id is used as a plain text label.
      */
-    renderSectionTitle?: (sectionId: string, options: O[]) => React__default.ReactNode;
+    renderSectionTitle?: (sectionId: string | undefined, options: O[]) => React__default.ReactNode;
     /**
      * Callback fired when the search input text changes.
      * Independent of `filter`: both can be used together (e.g. client-side
@@ -5607,4 +5608,4 @@ declare const ThemeProvider: React__default.FC<{
 declare function useTheme(): ThemeContextValue;
 
 export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME$1 as CLASSNAME, COMPONENT_NAME$1 as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableCellVariant as TableCellVariantType, TableHeader, TableRow, Text, TextField, ThOrder, ThOrder as ThOrderType, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
-export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, ComboboxButtonProps, ComboboxInputProps, ComboboxListProps, ComboboxOptionActionProps, ComboboxOptionMoreInfoProps, ComboboxOptionProps, ComboboxOptionSkeletonProps, ComboboxPopoverComponentProps, ComboboxPopoverProps, ComboboxProviderProps, ComboboxSectionProps, ComboboxStateProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GenericBlockSectionProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSectionProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, MultipleSelectButtonProps, MultipleSelectTextFieldProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectButtonProps, SelectButtonTranslations, SelectMultipleProps, SelectProps, SelectTextFieldProps, SelectTextFieldStatus, SelectTextFieldTranslations, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SingleSelectButtonProps, SingleSelectTextFieldProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, TimePickerFieldProps, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };
+export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, ComboboxButtonProps, ComboboxInputProps, ComboboxListProps, ComboboxOptionActionProps, ComboboxOptionMoreInfoProps, ComboboxOptionProps, ComboboxOptionSkeletonProps, ComboboxPopoverComponentProps, ComboboxPopoverProps, ComboboxProviderProps, ComboboxSectionProps, ComboboxStateProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GenericBlockSectionProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSectionProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, MultipleSelectButtonProps, MultipleSelectTextFieldProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectButtonProps, SelectListStatus as SelectButtonStatus, SelectButtonTranslations, SelectListStatus, SelectMultipleProps, SelectProps, SelectTextFieldProps, SelectListStatus as SelectTextFieldStatus, SelectTextFieldTranslations, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SingleSelectButtonProps, SingleSelectTextFieldProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, TimePickerFieldProps, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };

package/index.js

@@ -1687,7 +1687,7 @@ const IconButton$1 = props => {
     size = DEFAULT_PROPS$1a.size,
     ...forwardedProps
   } = props;
-  const iconNode = image ? /*#__PURE__*/jsx("img", {
+  const defaultChildren = image ? /*#__PURE__*/jsx("img", {
     // no need to set alt as an aria-label is already set on the button
     alt: "",
     src: image
@@ -1700,12 +1700,7 @@ const IconButton$1 = props => {
     ...forwardedProps,
     'aria-label': label,
     variant: 'icon',
-    children: /*#__PURE__*/jsxs(Fragment, {
-      children: [iconNode, /*#__PURE__*/jsx("span", {
-        className: visuallyHidden(),
-        children: label
-      })]
-    })
+    children: defaultChildren
   });
 };
 IconButton$1.displayName = COMPONENT_NAME$1r;
@@ -7116,6 +7111,12 @@ function setupComboboxButton(button, callbacks) {
             return true;
           }
           return false;
+        case 'Escape':
+          // Close if open; never clear selection (button-mode has no text input).
+          if (combobox.isOpen) {
+            combobox.setIsOpen(false);
+          }
+          return true;
         default:
           // Printable characters → typeahead.
           if (isPrintableKey(event)) {
@@ -7286,9 +7287,10 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
 
   // If `as` is provided, use it directly; otherwise use the LumX Button (full theme/disabled behavior).
   const ButtonComp = as ?? Button;
-  const internalRef = useRef(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const mergedRef = useMergeRefs(ref, internalRef, anchorRef);
+
+  // Track the button DOM element via state (instead of useRef) so it re-triggers the useEffect
+  const [buttonElement, setButtonElement] = useState(null);
+  const mergedRef = useMergeRefs(ref, setButtonElement, anchorRef);
 
   // Keep onSelect in a ref to avoid re-creating the handle on every render
   const onSelectRef = useRef(onSelect);
@@ -7296,9 +7298,8 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
 
   // Create the combobox handle with button-mode controller on mount
   useEffect(() => {
-    const button = internalRef.current;
-    if (!button) return undefined;
-    const handle = setupComboboxButton(button, {
+    if (!buttonElement) return undefined;
+    const handle = setupComboboxButton(buttonElement, {
       onSelect(option) {
         onSelectRef.current?.(option);
       }
@@ -7308,7 +7309,7 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
       handle.destroy();
       setHandle(null);
     };
-  }, [setHandle]);
+  }, [buttonElement, setHandle]);
   return ComboboxButton$1({
     ...buttonProps,
     label,
@@ -16825,6 +16826,24 @@ function toggleSelection(options, getOptionId, currentValue, selectedOptionId, i
   return updated;
 }
 
+/**
+ * Get the display name for a single option value.
+ *
+ * Resolves the option's display name by trying `getOptionName` first,
+ * then falling back to `getOptionId`, returning `''` for nullish values.
+ */
+function getOptionDisplayName(value, getOptionName, getOptionId) {
+  if (value === undefined || value === null) return '';
+  if (getOptionName) {
+    const name = getWithSelector(getOptionName, value);
+    if (name != null) return String(name);
+  }
+  if (getOptionId) {
+    return String(getWithSelector(getOptionId, value));
+  }
+  return '';
+}
+
 /**
  * Render options as ComboboxOption elements.
  * Framework-specific components are passed as a second argument.
@@ -16949,7 +16968,7 @@ const SelectButton$2 = (props, {
    * each option to its name and join with `, `. Falsy entries (undefined, empty names)
    * are filtered out so partial state still renders cleanly.
    */
-  const displayValue = value != null ? castArray(value).map(v => v != null && getWithSelector(getOptionName, v)).filter(Boolean).join(', ') : '';
+  const displayValue = value != null ? castArray(value).map(v => getOptionDisplayName(v, getOptionName, getOptionId)).filter(Boolean).join(', ') : '';
   return /*#__PURE__*/jsxs(Combobox.Provider, {
     onOpen: onOpen,
     children: [/*#__PURE__*/jsx(Combobox.Button, {
@@ -17078,8 +17097,8 @@ const DefaultButton = forwardRef((props, ref) => /*#__PURE__*/jsx(Button, {
  * fully replaced and only props valid for that component apply.
  *
  * Discriminated on `selectionType`:
- * - default / `'single'` → `value?: O`, `onChange?: (newValue?: O) => void`.
- * - `'multiple'`         → `value?: O[]`, `onChange?: (newValue?: O[]) => void`.
+ * - default / `'single'` → `value?: O`, `onChange?: (newValue: O) => void`.
+ * - `'multiple'`         → `value?: O[]`, `onChange?: (newValue: O[]) => void`.
  *
  * `as` and `selectionType` are top-level on this type (rather than buried in
  * an intersection or union member) so that TS can infer `E` from `as` and
@@ -17092,10 +17111,11 @@ const DefaultButton = forwardRef((props, ref) => /*#__PURE__*/jsx(Button, {
 
 /**
  * Single-selection props (`selectionType` defaults to `'single'`).
- * Backwards-compatible alias — existing consumers do not need to set `selectionType`.
  */
 
-/** Multi-selection props (`selectionType: 'multiple'` is required to opt in). */
+/**
+ * Multi-selection props (`selectionType: 'multiple'` is required to opt in).
+ */
 
 /**
  * `React.forwardRef` re-typed to preserve our polymorphic generics
@@ -17139,6 +17159,9 @@ const SelectButton$1 = React__default.forwardRef((props, ref) => {
     const next = toggleSelection(options, getOptionId, value, selectedOption?.value, isMultiple);
     onChange?.(next);
   }, [getOptionId, isMultiple, onChange, options, value]);
+
+  // If as is defined and not the Button, render as, else render DefaultButton (with mdiMenuDown right icon)
+  const buttonAs = as && as !== Button ? as : DefaultButton;
   return SelectButton$2({
     options,
     getOptionId,
@@ -17151,10 +17174,9 @@ const SelectButton$1 = React__default.forwardRef((props, ref) => {
     isMultiselectable: isMultiple,
     label,
     labelDisplayMode,
-    // With no `as`, the default trigger adds the chevron.
     buttonProps: {
       ...buttonProps,
-      as: as ?? DefaultButton,
+      as: buttonAs,
       ref
     },
     popoverProps,
@@ -17185,24 +17207,6 @@ const SelectButton = Object.assign(SelectButton$1, {
   Option: ComboboxOption
 });
 
-/**
- * Get the display name for a single option value.
- *
- * Resolves the option's display name by trying `getOptionName` first,
- * then falling back to `getOptionId`, returning `''` for nullish values.
- */
-function getOptionDisplayName(value, getOptionName, getOptionId) {
-  if (value === undefined || value === null) return '';
-  if (getOptionName) {
-    const name = getWithSelector(getOptionName, value);
-    if (name != null) return String(name);
-  }
-  if (getOptionId) {
-    return String(getWithSelector(getOptionId, value));
-  }
-  return '';
-}
-
 /**
  * Component display name.
  */