@lumx/react 4.15.0 → 4.15.1-alpha.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. */
@@ -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,7 +4338,7 @@ 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'`).
@@ -4371,7 +4371,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 +5607,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

@@ -7111,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)) {
@@ -16820,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.
@@ -16944,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, {
@@ -17073,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
@@ -17134,6 +17158,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,
@@ -17146,10 +17173,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,
@@ -17180,24 +17206,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.
  */