@ssa-ui-kit/core 3.26.2 → 3.26.4

package/dist/ai/source-map.md

@@ -4,7 +4,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 **Everything below is imported from the package root:** `import { X } from '@ssa-ui-kit/core'`
 
-194 components · 20 contexts · 23 hooks · 21 functions · 16 constants · 346 exported types
+196 components · 20 contexts · 23 hooks · 21 functions · 16 constants · 348 exported types
 
 ## Reading this file
 
@@ -16,7 +16,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 ## Component roster
 
-**Action & Form Controls** — BreadcrumbMenu, Breadcrumbs, Button, ButtonGroup, ButtonGroupButton, Checkbox, ColorPicker, ContextMenu, DatePicker, DateRangePicker, DateRangePickerFormBridge, Dropdown, DropdownArrow, DropdownBase, DropdownOption, DropdownOptions, DropdownToggle, FileAttachment, FileUpload, FloatingActionButton, IconButton, Input, MultipleDropdown, MultipleDropdownNotification, MultipleDropdownOptions, NumberField, Radio, RadioGroup, SearchBox, SearchBoxCrossIcon, SearchBoxInput, SearchBoxWrapper, Slider, SliderInputsRow, SliderLabel, SliderMarkItem, SliderMarkLabel, SliderMarksRow, SliderMarkTick, SliderNumberInput, SliderRangeInput, SliderRoot, SliderTrackBg, SliderTrackFill, SliderTrackRow, SliderTrackWrapper, SliderValueLabel, SliderValueLabelsContainer, Switch, Textarea, TextField, Typeahead, TypeaheadItemIcon, TypeaheadItemImage, TypeaheadOption, TypeaheadOptions
+**Action & Form Controls** — BreadcrumbMenu, Breadcrumbs, Button, ButtonGroup, ButtonGroupButton, Checkbox, ColorPicker, ContextMenu, DatePicker, DateRangePicker, DateRangePickerFormBridge, Dropdown, DropdownArrow, DropdownBase, DropdownOption, DropdownOptionGroup, DropdownOptions, DropdownToggle, FileAttachment, FileUpload, FloatingActionButton, IconButton, Input, MultipleDropdown, MultipleDropdownNotification, MultipleDropdownOptions, NumberField, Radio, RadioGroup, SearchBox, SearchBoxCrossIcon, SearchBoxInput, SearchBoxWrapper, Slider, SliderInputsRow, SliderLabel, SliderMarkItem, SliderMarkLabel, SliderMarksRow, SliderMarkTick, SliderNumberInput, SliderRangeInput, SliderRoot, SliderTrackBg, SliderTrackFill, SliderTrackRow, SliderTrackWrapper, SliderValueLabel, SliderValueLabelsContainer, Switch, Textarea, TextField, Typeahead, TypeaheadItemIcon, TypeaheadItemImage, TypeaheadOption, TypeaheadOptionGroup, TypeaheadOptions
 
 **Form Structure** — Filters, FiltersMultiSelect, FiltersMultiSelectEmpty, FiltersMultiSelectOption, FiltersMultiSelectOptions, Form, FormAction, FormCheckbox, FormGroup, FormHelperText, FormRadioGroup
 
@@ -285,6 +285,13 @@ A single selectable row inside `Dropdown` or `MultipleDropdown`.
   - `avatar?: React.ReactNode` — Avatar or icon to display before the option content (e.g. <Avatar size={20} image={url} />)
   - _plus native element attributes_
 
+#### DropdownOptionGroup
+A titled section of options inside `Dropdown` or `MultipleDropdown`.
+
+  - `label: ReactNode` — Group title. Not selectable and skipped by keyboard navigation.
+  - `id?: string` — Unique per dropdown. Defaults to one derived from the element key (or position).
+  - `children?: ReactNode` — The group's `DropdownOption`s.
+
 #### DropdownOptions
 Options menu container for Dropdown component
 
@@ -747,6 +754,7 @@ Advanced autocomplete search component with dropdown functionality
   - `placeholder?: string | null` `= 'Select something'` — Placeholder text for the input
   - `filterOptions?: boolean` `= true` — Whether to filter options based on input When false, all options are always shown
   - `autoSelect?: boolean` `= true` — Whether to automatically select the first option on filter
+  - `searchByGroup?: boolean` `= false` — Also match the input against `TypeaheadOptionGroup` titles. A group whose title matches is shown with all of…
   - `allowCustomValues?: boolean` `= true` — Allow adding custom values not in the options list. When true, the current input is shown as the first…
   - `onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void` — Callback fired when an option is selected/deselected Receives the selected item value and whether it's…
   - `onClearAll?: () => void` — Callback fired when "Clear All" is clicked (multiple mode)
@@ -781,6 +789,14 @@ Props for TypeaheadOption component Record type that allows any string or number
   - `role?: string` — ARIA role for the option (e.g. 'option')
   - `aria-selected?: boolean` — ARIA selected state
 
+#### TypeaheadOptionGroup
+A titled section of options inside `Typeahead`.
+
+  - `label: ReactNode` — Group title. Not selectable and skipped by keyboard navigation.
+  - `textValue?: string` — Plain-text form of `label`, matched against the input when the Typeahead has `searchByGroup`. Defaults to…
+  - `id?: string` — Unique per Typeahead. Defaults to the group's position among the Typeahead's children.
+  - `children?: ReactNode` — The group's `TypeaheadOption`s.
+
 #### TypeaheadOptions
 The Typeahead's option list: a `ContextMenu` driven from the Typeahead's input. The options themselves come from the `TypeaheadOption` children of `Typeahead`, filtered…
 
@@ -2454,52 +2470,53 @@ _Names only — read the `.d.ts` for their shape._
 `DatePickerContextProps` · `DatePickerFormat` · `DatePickerProps` · `DateRangePickerContextProps`
 `DateRangePickerFormBridgeProps` · `DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates`
 `DateRangePickerProps` · `DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple`
-`DeprecatedOpenStateProps` · `DropdownContextType` · `DropdownOptionProps` · `DropdownPositions`
-`DropdownProps` · `DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams`
-`DynamicToastParams` · `FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps`
-`FieldErrorProps` · `FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
-`FileAttachmentProps` · `FileRejectionReason` · `FileUploadProgressEntry` · `FileUploadProgress`
-`FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
-`FiltersMultiSelectProps` · `FloatingActionButtonAction` · `FloatingActionButtonColor`
-`FloatingActionButtonIcon` · `FloatingActionButtonPosition` · `FloatingActionButtonProps`
-`FloatingActionButtonSize` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `FooterColumn`
-`FooterLink` · `FooterProps` · `FooterSize` · `FooterTheme` · `Format` · `FrozenColumns`
-`FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps` · `FunnelChartRender`
-`FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold` · `GaugeBarValueFormatter`
-`GaugeChartFeature` · `GaugeChartProps` · `HeaderNavItem` · `HeaderProps` · `HeaderSize`
-`HeaderTheme` · `HistoryItemType` · `HistoryProps` · `IFormCheckboxProps` · `IconButtonProps`
-`IconProps` · `ImageItemProps` · `IndicatorProps` · `InputColors` · `InputProps`
-`InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelBadge` · `LabelProps` · `LargeTabProps`
-`LastFocusedElement` · `LinkProps` · `LinksTabBarProps` · `MainColors` · `MainSizes`
-`MapIconsType` · `ModalContextProps` · `ModalDialogProps` · `ModalProps` · `ModalRootProps`
-`MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup` · `NavBarExtendedItem`
-`NavBarExtendedProps` · `NavBarExtendedSubItem` · `NavBarProps` · `NestedTableCellHeaderProps`
-`NestedTableContextType` · `NestedTableContextValue` · `NestedTableProps`
-`NestedTableRowContextType` · `NotificationCardProps` · `NotificationDynamicProps`
-`NotificationGlobalSharedProps` · `NotificationMenuProps` · `NotificationPositions`
-`NotificationProps` · `NotificationSharedProps` · `NotificationSizes` · `NotificationStyleOverrides`
-`NotificationType` · `NotificationVariants` · `NumberFieldProps` · `OpenStateProps`
-`OpenedAccordion` · `PageButtonProps` · `PaginationButtonsProps` · `PaginationContextProps`
-`PaginationContextProviderProps` · `PaginationProps` · `PaletteColor` · `Palette` · `PeriodOption`
-`Period` · `PersonInfoAvatarProps` · `PersonInfoCounterProps` · `PersonInfoCounterTooltipUser`
-`PersonInfoCounterTooltip` · `PersonInfoLinkAttributes` · `PersonInfoProps` · `PersonInfoStyles`
-`PersonInfoValueProps` · `PickerType` · `PieChartFeatures` · `PieChartLegendItem`
-`PieChartLegendProps` · `PieChartProps` · `PieChartTooltipProps` · `PieChartTooltipViewProps`
-`PopoverArrowProps` · `PopoverContentProps` · `PopoverOptions` · `PopoverTriggerProps`
-`ProgressBarProps` · `ProgressChartTooltipProps` · `ProgressCircleProps` · `ProgressInfoItemProps`
-`ProgressInfoProps` · `ProgressInfoResp` · `ProgressInfoTotalsProps` · `ProgressProps` · `RGBString`
-`RadioGroupProps` · `RadioProps` · `RangePickerType` · `RenderContentProps` · `ResizeHandleProps`
-`ResolveDeprecatedPropOptions` · `ResolvedOpenState` · `ResponsiveImageProps` · `SVGProps`
-`SearchBoxProps` · `SelectedFilter` · `SetIDs` · `SimpleChartTooltipProps` · `SizeStyles`
-`SliderMark` · `SliderProps` · `SliderSize` · `SmallTabProps` · `StepperContextType`
-`StepperProps` · `SwitchContext` · `SwitchProps` · `TabBarContextProps` · `TabBarLink`
-`TabBarProps` · `TabBaseProps` · `TabProps` · `TableContainerProps` · `TableProps` · `TagsProps`
-`TextFieldProps` · `TextareaProps` · `Theme` · `ToastProps` · `ToastVariants` · `TooltipArrowProps`
-`TooltipColor` · `TooltipContentProps` · `TooltipContentSizes` · `TooltipContextType`
-`TooltipProps` · `TooltipSize` · `TooltipTriggerProps` · `TranslationContextContent`
-`TreeItemBase` · `TreeItemLevel2` · `TreeItemLevel3` · `TreeItemRenderProps` · `TreeItem`
-`TreeLevel` · `TreeMapChartFeature` · `TreeMapChartProps` · `TreeNode` · `TreeViewProps`
-`TypeaheadItemProps` · `TypeaheadItemsListProps` · `TypeaheadOptionProps` · `TypeaheadProps`
+`DeprecatedOpenStateProps` · `DropdownContextType` · `DropdownOptionGroupProps`
+`DropdownOptionProps` · `DropdownPositions` · `DropdownProps` · `DropdownToggleProps`
+`DynamicAlertParams` · `DynamicNotificationParams` · `DynamicToastParams` · `FieldContextValue`
+`FieldControlProps` · `FieldDescriptionProps` · `FieldErrorProps` · `FieldLabelProps` · `FieldProps`
+`FieldSuccessProps` · `FileAttachmentFile` · `FileAttachmentProps` · `FileRejectionReason`
+`FileUploadProgressEntry` · `FileUploadProgress` · `FileUploadProps` · `Filter`
+`FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps` · `FiltersMultiSelectProps`
+`FloatingActionButtonAction` · `FloatingActionButtonColor` · `FloatingActionButtonIcon`
+`FloatingActionButtonPosition` · `FloatingActionButtonProps` · `FloatingActionButtonSize`
+`FloatingSurfaceColor` · `FloatingSurfaceSize` · `FooterColumn` · `FooterLink` · `FooterProps`
+`FooterSize` · `FooterTheme` · `Format` · `FrozenColumns` · `FullscreenModeContextType`
+`FunnelChartItem` · `FunnelChartProps` · `FunnelChartRender` · `FunnelChartType` · `GaugeBarProps`
+`GaugeBarThreshold` · `GaugeBarValueFormatter` · `GaugeChartFeature` · `GaugeChartProps`
+`HeaderNavItem` · `HeaderProps` · `HeaderSize` · `HeaderTheme` · `HistoryItemType` · `HistoryProps`
+`IFormCheckboxProps` · `IconButtonProps` · `IconProps` · `ImageItemProps` · `IndicatorProps`
+`InputColors` · `InputProps` · `InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelBadge`
+`LabelProps` · `LargeTabProps` · `LastFocusedElement` · `LinkProps` · `LinksTabBarProps`
+`MainColors` · `MainSizes` · `MapIconsType` · `ModalContextProps` · `ModalDialogProps`
+`ModalProps` · `ModalRootProps` · `MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup`
+`NavBarExtendedItem` · `NavBarExtendedProps` · `NavBarExtendedSubItem` · `NavBarProps`
+`NestedTableCellHeaderProps` · `NestedTableContextType` · `NestedTableContextValue`
+`NestedTableProps` · `NestedTableRowContextType` · `NotificationCardProps`
+`NotificationDynamicProps` · `NotificationGlobalSharedProps` · `NotificationMenuProps`
+`NotificationPositions` · `NotificationProps` · `NotificationSharedProps` · `NotificationSizes`
+`NotificationStyleOverrides` · `NotificationType` · `NotificationVariants` · `NumberFieldProps`
+`OpenStateProps` · `OpenedAccordion` · `PageButtonProps` · `PaginationButtonsProps`
+`PaginationContextProps` · `PaginationContextProviderProps` · `PaginationProps` · `PaletteColor`
+`Palette` · `PeriodOption` · `Period` · `PersonInfoAvatarProps` · `PersonInfoCounterProps`
+`PersonInfoCounterTooltipUser` · `PersonInfoCounterTooltip` · `PersonInfoLinkAttributes`
+`PersonInfoProps` · `PersonInfoStyles` · `PersonInfoValueProps` · `PickerType` · `PieChartFeatures`
+`PieChartLegendItem` · `PieChartLegendProps` · `PieChartProps` · `PieChartTooltipProps`
+`PieChartTooltipViewProps` · `PopoverArrowProps` · `PopoverContentProps` · `PopoverOptions`
+`PopoverTriggerProps` · `ProgressBarProps` · `ProgressChartTooltipProps` · `ProgressCircleProps`
+`ProgressInfoItemProps` · `ProgressInfoProps` · `ProgressInfoResp` · `ProgressInfoTotalsProps`
+`ProgressProps` · `RGBString` · `RadioGroupProps` · `RadioProps` · `RangePickerType`
+`RenderContentProps` · `ResizeHandleProps` · `ResolveDeprecatedPropOptions` · `ResolvedOpenState`
+`ResponsiveImageProps` · `SVGProps` · `SearchBoxProps` · `SelectedFilter` · `SetIDs`
+`SimpleChartTooltipProps` · `SizeStyles` · `SliderMark` · `SliderProps` · `SliderSize`
+`SmallTabProps` · `StepperContextType` · `StepperProps` · `SwitchContext` · `SwitchProps`
+`TabBarContextProps` · `TabBarLink` · `TabBarProps` · `TabBaseProps` · `TabProps`
+`TableContainerProps` · `TableProps` · `TagsProps` · `TextFieldProps` · `TextareaProps` · `Theme`
+`ToastProps` · `ToastVariants` · `TooltipArrowProps` · `TooltipColor` · `TooltipContentProps`
+`TooltipContentSizes` · `TooltipContextType` · `TooltipProps` · `TooltipSize`
+`TooltipTriggerProps` · `TranslationContextContent` · `TreeItemBase` · `TreeItemLevel2`
+`TreeItemLevel3` · `TreeItemRenderProps` · `TreeItem` · `TreeLevel` · `TreeMapChartFeature`
+`TreeMapChartProps` · `TreeNode` · `TreeViewProps` · `TypeaheadItemProps`
+`TypeaheadItemsListProps` · `TypeaheadOptionGroupProps` · `TypeaheadOptionProps` · `TypeaheadProps`
 `TypeaheadValue` · `TypographyProps` · `UseBreadcrumbsOptions` · `UseChartInfo`
 `UseColumnResizeOptions` · `UseDrawerOptions` · `UseFiltersMultiSelectOptions`
 `UseFiltersMultiSelectStore` · `UsePopover` · `UseTooltipArgs` · `UseTooltipContext` · `UseTooltip`

package/dist/components/DropdownOptionGroup/DropdownOptionGroup.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+/** Props of {@link DropdownOptionGroup}. */
+export interface DropdownOptionGroupProps {
+    /** Group title. Not selectable and skipped by keyboard navigation. */
+    label: ReactNode;
+    /**
+     * Unique per dropdown. Defaults to one derived from the element key
+     * (or position).
+     */
+    id?: string;
+    /** The group's `DropdownOption`s. */
+    children?: ReactNode;
+}
+/**
+ * DropdownOptionGroup - A titled section of options inside `Dropdown` or
+ * `MultipleDropdown`.
+ *
+ * Wrap `DropdownOption` children in it to show them under a title; groups are
+ * separated by a divider. Options outside any group can sit next to groups.
+ * Like `DropdownOption`, it is read by the parent dropdown rather than rendered
+ * as written, so it only works as a direct child of the dropdown.
+ *
+ * @category Form Controls
+ * @subcategory Selection
+ *
+ * @example
+ * ```tsx
+ * <Dropdown selectedItem={selected} onChange={setSelected}>
+ *   <DropdownOptionGroup label="Fruits">
+ *     <DropdownOption value="apple">Apple</DropdownOption>
+ *     <DropdownOption value="banana">Banana</DropdownOption>
+ *   </DropdownOptionGroup>
+ *   <DropdownOptionGroup label="Vegetables">
+ *     <DropdownOption value="carrot">Carrot</DropdownOption>
+ *   </DropdownOptionGroup>
+ * </Dropdown>
+ * ```
+ */
+declare const DropdownOptionGroup: ({ children }: DropdownOptionGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default DropdownOptionGroup;

package/dist/components/DropdownOptionGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DropdownOptionGroup';
+export type { DropdownOptionGroupProps } from './DropdownOptionGroup';

package/dist/components/DropdownOptions/useToggleListKeys.d.ts

@@ -1,5 +1,5 @@
 import { KeyboardEvent } from 'react';
-import { ContextMenuItem } from '../ContextMenu';
+import { ContextMenuEntry } from '../ContextMenu';
 import { OptionValue } from './utils';
 /** Options of {@link useToggleListKeys}. */
 export interface UseToggleListKeysOptions {
@@ -7,7 +7,7 @@ export interface UseToggleListKeysOptions {
     listId: string;
     isOpen: boolean;
     disabled?: boolean;
-    menuItems: ContextMenuItem<OptionValue>[];
+    menuItems: ContextMenuEntry<OptionValue>[];
     /** Highlighted option. */
     activeValue: OptionValue | null;
     setActiveValue: (value: OptionValue | null) => void;

package/dist/components/DropdownOptions/utils.d.ts

@@ -1,9 +1,16 @@
 import React from 'react';
-import { ContextMenuItem } from '../ContextMenu';
+import { ContextMenuEntry } from '../ContextMenu';
+import { DropdownItemProps } from '../DropdownOption/DropdownOption';
 /** Value of a Dropdown option as the list sees it. */
 export type OptionValue = string | number;
 /**
- * Reads `DropdownOption` children into ContextMenu items. The label resolves
- * as `children` → `label` → `value`, as it always has.
+ * The `DropdownOption` children in display order, with any
+ * `DropdownOptionGroup` unwrapped.
  */
-export declare const toDropdownMenuItems: (children: React.ReactNode) => ContextMenuItem<OptionValue>[];
+export declare const flattenDropdownOptions: (children: React.ReactNode) => React.ReactElement<DropdownItemProps>[];
+/**
+ * Reads `DropdownOption` children into ContextMenu items, and each
+ * `DropdownOptionGroup` into a ContextMenu group. The label resolves as
+ * `children` → `label` → `value`, as it always has.
+ */
+export declare const toDropdownMenuItems: (children: React.ReactNode) => ContextMenuEntry<OptionValue>[];

package/dist/components/Typeahead/Typeahead.context.d.ts

@@ -26,7 +26,7 @@ export declare const TypeaheadContext: React.Context<{
     error: import("react-hook-form").FieldError | import("react-hook-form").Merge<import("react-hook-form").FieldError, import("react-hook-form").FieldErrorsImpl<any>> | undefined;
     placeholder: string | null | undefined;
     listId: string;
-    menuItems: import("..").ContextMenuItem<import("./types").TypeaheadValue>[];
+    menuItems: import("..").ContextMenuEntry<import("./types").TypeaheadValue>[];
     activeValue: import("./types").TypeaheadValue | null;
     setActiveValue: React.Dispatch<React.SetStateAction<import("./types").TypeaheadValue | null>>;
     inputAriaProps: {

package/dist/components/Typeahead/Typeahead.d.ts

@@ -172,4 +172,4 @@ import { TypeaheadProps } from './types';
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  */
-export declare const Typeahead: ({ name, label, labelBadge, value, defaultValue, selectedItems, defaultSelectedItems, isOpen, disabled, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, autoSelect, allowCustomValues, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Typeahead: ({ name, label, labelBadge, value, defaultValue, selectedItems, defaultSelectedItems, isOpen, disabled, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, autoSelect, searchByGroup, allowCustomValues, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Typeahead/components/TypeaheadOptionGroup.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+/** Props of {@link TypeaheadOptionGroup}. */
+export interface TypeaheadOptionGroupProps {
+    /** Group title. Not selectable and skipped by keyboard navigation. */
+    label: ReactNode;
+    /**
+     * Plain-text form of `label`, matched against the input when the Typeahead
+     * has `searchByGroup`. Defaults to `label` when that is a string or number.
+     */
+    textValue?: string;
+    /**
+     * Unique per Typeahead. Defaults to the group's position among the
+     * Typeahead's children.
+     */
+    id?: string;
+    /** The group's `TypeaheadOption`s. */
+    children?: ReactNode;
+}
+/**
+ * TypeaheadOptionGroup - A titled section of options inside `Typeahead`.
+ *
+ * Wrap `TypeaheadOption` children in it to show them under a title; groups are
+ * separated by a divider. Filtering applies to the options inside, and a group
+ * with no matching options is hidden along with its title. With the
+ * Typeahead's `searchByGroup`, a group whose title matches is shown whole.
+ * Read by the
+ * Typeahead rather than rendered as written, so it only works as a direct
+ * child of the Typeahead (or of a fragment there).
+ *
+ * @example
+ * ```tsx
+ * <Typeahead name="city" label="City">
+ *   <TypeaheadOptionGroup label="Europe">
+ *     <TypeaheadOption value="kyiv" label="Kyiv" />
+ *     <TypeaheadOption value="paris" label="Paris" />
+ *   </TypeaheadOptionGroup>
+ *   <TypeaheadOptionGroup label="Asia">
+ *     <TypeaheadOption value="tokyo" label="Tokyo" />
+ *   </TypeaheadOptionGroup>
+ * </Typeahead>
+ * ```
+ */
+export declare const TypeaheadOptionGroup: ({ children, }: TypeaheadOptionGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Typeahead/components/index.d.ts

@@ -4,5 +4,6 @@ export * from './TypeaheadTrigger';
 export * from './TypeaheadItem';
 export * from './TypeaheadOptions';
 export * from './TypeaheadOption';
+export * from './TypeaheadOptionGroup';
 export * from './TypeaheadFocusTrap';
 export * from './NoOptions';

package/dist/components/Typeahead/index.d.ts

@@ -3,5 +3,6 @@ export * from './types';
 export { useTypeaheadContext } from './Typeahead.context';
 export * from './components/TypeaheadOptions';
 export * from './components/TypeaheadOption';
+export * from './components/TypeaheadOptionGroup';
 export * from './components/TypeaheadItem';
 export * from './utils';

package/dist/components/Typeahead/types.d.ts

@@ -180,6 +180,14 @@ export interface TypeaheadProps {
      * @default true
      */
     autoSelect?: boolean;
+    /**
+     * Also match the input against `TypeaheadOptionGroup` titles. A group whose
+     * title matches is shown with all of its options; otherwise only its
+     * matching options are shown, as usual. A title that is not a string or
+     * number is matched through the group's `textValue`.
+     * @default false
+     */
+    searchByGroup?: boolean;
     /**
      * Allow adding custom values not in the options list.
      * When true, the current input is shown as the first dropdown option (highlighted)
@@ -221,7 +229,7 @@ export interface TypeaheadProps {
  * Props used by the useTypeahead hook
  * Internal type that picks specific props from TypeaheadProps
  */
-export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'singleLine' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect' | 'allowCustomValues' | 'label'>;
+export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'singleLine' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect' | 'searchByGroup' | 'allowCustomValues' | 'label'>;
 /**
  * Props for TypeaheadOptions container component
  */

package/dist/components/Typeahead/useTypeahead.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { OpenChangeReason } from '@floating-ui/react';
-import { ContextMenuItem } from '../ContextMenu';
+import { ContextMenuEntry } from '../ContextMenu';
 import { TypeaheadOptionProps, TypeaheadValue, UseTypeaheadProps } from './types';
 type HandleChangeParams = {
     value?: string | number;
     shouldClose?: boolean;
     resetInput?: boolean;
 };
-export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, allowCustomValues, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, label, }: UseTypeaheadProps) => {
+export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, searchByGroup, allowCustomValues, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, label, }: UseTypeaheadProps) => {
     isOpen: boolean;
     isDisabled: boolean | undefined;
     optionsWithKey: Record<string | number, TypeaheadOptionProps>;
@@ -32,7 +32,7 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: p
     error: import("react-hook-form").FieldError | import("react-hook-form").Merge<import("react-hook-form").FieldError, import("react-hook-form").FieldErrorsImpl<any>> | undefined;
     placeholder: string | null | undefined;
     listId: string;
-    menuItems: ContextMenuItem<TypeaheadValue>[];
+    menuItems: ContextMenuEntry<TypeaheadValue>[];
     activeValue: TypeaheadValue | null;
     setActiveValue: React.Dispatch<React.SetStateAction<TypeaheadValue | null>>;
     inputAriaProps: {

package/dist/components/index.d.ts

@@ -32,6 +32,8 @@ export type * from './Dropdown/types';
 export { default as DropdownArrow } from './DropdownArrow';
 export { default as DropdownBase } from './DropdownBase';
 export { default as DropdownOption } from './DropdownOption';
+export { default as DropdownOptionGroup } from './DropdownOptionGroup';
+export type { DropdownOptionGroupProps } from './DropdownOptionGroup';
 export { default as DropdownOptions } from './DropdownOptions';
 export type { DropdownOptionProps } from './DropdownOptions';
 export { default as DropdownToggle } from './DropdownToggle';