@ssa-ui-kit/core 3.27.0 → 3.27.1

package/dist/ai/source-map.md

@@ -259,6 +259,9 @@ Select-like dropdown component for single selection
   - `success?: boolean` `= false` — Whether to display success state styling When true, status is set to 'success'
   - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` — Leading icon shown in the toggle button when no selected item avatar is present. Ignored once an item with an…
   - `width?: string | number` — Width of the dropdown. Can be a number (pixels) or a string (any CSS value, e.g. `'100%'`).
+  - `searchable?: boolean` `= false` — Adds a search box above the open list. Typing filters the options by their text (case-insensitive, anywhere…
+  - `searchPlaceholder?: string` `= 'Search'` — Placeholder and accessible name of the search box.
+  - `searchEmptyState?: React.ReactNode` `= 'No results found'` — Shown in the list when nothing matches the search.
   - `dropdownProps?: { base, toggleButton, toggleButtonArrow, dropdownPosition }` — Props object for sub-components Allows fine-grained control over component parts
 
 #### DropdownArrow
@@ -283,6 +286,7 @@ A single selectable row inside `Dropdown` or `MultipleDropdown`.
   - `label?: string | number`
   - `children?: React.ReactNode`
   - `avatar?: React.ReactNode` — Avatar or icon to display before the option content (e.g. <Avatar size={20} image={url} />)
+  - `textValue?: string` — Plain text of the option, for search and type-to-find. Needed when `children` is markup rather than text;…
   - _plus native element attributes_
 
 #### DropdownOptionGroup
@@ -427,6 +431,9 @@ Dropdown component for multi-select and single-select
   - `onChange?: (selectedItem: string | number, isSelected: boolean) => void` — Callback fired when an option is toggled
   - `maxHeight?: number` `= 200` — Max height (px) of the options list; overflow scrolls.
   - `width?: string | number` — Width of the dropdown. Can be a number (pixels) or a string (any CSS value, e.g. `'100%'`).
+  - `searchable?: boolean` `= false` — Adds a search box above the open list. Typing filters the options by their text (case-insensitive, anywhere…
+  - `searchPlaceholder?: string` `= 'Search'` — Placeholder and accessible name of the search box.
+  - `searchEmptyState?: ReactNode` `= 'No results found'` — Shown in the list when nothing matches the search.
 
 #### MultipleDropdownNotification
 

package/dist/components/Dropdown/Dropdown.d.ts

@@ -94,5 +94,5 @@ import { DropdownProps } from './types';
  *
  * @see https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  */
-declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, disabled, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, avatarBorder, label, labelBadge, helperText, errors, success, icon, width, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Dropdown: <T extends DropdownOptionProps>({ selectedItem, disabled, isDisabled, isOpen: isInitOpen, children, onChange: handleChange, className, placeholder, maxHeight, avatarBorder, label, labelBadge, helperText, errors, success, icon, width, searchable, searchPlaceholder, searchEmptyState, dropdownProps: componentProps, }: DropdownProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Dropdown;

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

@@ -161,6 +161,36 @@ export interface DropdownProps<P extends DropdownOptionProps> extends CommonProp
      * ```
      */
     width?: string | number;
+    /**
+     * Adds a search box above the open list. Typing filters the options by
+     * their text (case-insensitive, anywhere in the text); a group stays while
+     * any of its options match. Options whose `children` is markup are matched
+     * by their `textValue`.
+     *
+     * Focus moves to the search box on open and keeps driving the list: arrows
+     * move the highlight, Enter picks, Escape clears the search, then closes.
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * <Dropdown searchable searchPlaceholder="Search country" onChange={setCountry}>
+     *   {countries.map((c) => (
+     *     <DropdownOption key={c.code} value={c.code} label={c.name} />
+     *   ))}
+     * </Dropdown>
+     * ```
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder and accessible name of the search box.
+     * @default 'Search'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Shown in the list when nothing matches the search.
+     * @default 'No results found'
+     */
+    searchEmptyState?: React.ReactNode;
     /**
      * Props object for sub-components
      * Allows fine-grained control over component parts
@@ -246,4 +276,8 @@ export interface DropdownContextType {
     activeValue?: string | number | null;
     /** Moves the highlight; called by the list on pointer moves. */
     setActiveValue?: (value: string | number | null) => void;
+    /** The list sits in the search card, which does the positioning. */
+    searchable?: boolean;
+    /** Shown when the list has no options. */
+    emptyState?: React.ReactNode;
 }

package/dist/components/DropdownOption/DropdownOption.d.ts

@@ -18,6 +18,11 @@ export interface DropdownItemProps extends CommonProps, Omit<React.LiHTMLAttribu
     children?: React.ReactNode;
     /** Avatar or icon to display before the option content (e.g. <Avatar size={20} image={url} />) */
     avatar?: React.ReactNode;
+    /**
+     * Plain text of the option, for search and type-to-find. Needed when
+     * `children` is markup rather than text; defaults to the text label.
+     */
+    textValue?: string;
 }
 /**
  * DropdownOption - A single selectable row inside `Dropdown` or

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

@@ -0,0 +1,25 @@
+import { KeyboardEvent, ReactNode } from 'react';
+/** Props of {@link DropdownSearch}. */
+export interface DropdownSearchProps {
+    /** Typed text. */
+    query: string;
+    onQueryChange: (query: string) => void;
+    placeholder: string;
+    /** Id of the list the input drives. */
+    listId: string;
+    /** Opens upward or downward from the toggle. */
+    placement?: 'top' | 'bottom';
+    zIndex?: number;
+    /** The highlighted option's id. */
+    'aria-activedescendant'?: string;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /** The options list. */
+    children: ReactNode;
+}
+/**
+ * The open list of a searchable `Dropdown` / `MultipleDropdown`: a search box,
+ * focused on open, above the options. The box is the combobox while the list
+ * is open — it keeps focus and points at the highlighted option.
+ */
+export declare const DropdownSearch: ({ query, onQueryChange, placeholder, listId, placement, zIndex, children, ...inputProps }: DropdownSearchProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { KeyboardEvent } from 'react';
 import { ContextMenuEntry } from '../ContextMenu';
 import { OptionValue } from './utils';
 /** Options of {@link useToggleListKeys}. */
-export interface UseToggleListKeysOptions {
+export interface UseToggleListKeysOptions<E extends HTMLElement = HTMLButtonElement> {
     /** Id of the ContextMenu the toggle controls. */
     listId: string;
     isOpen: boolean;
@@ -16,18 +16,24 @@ export interface UseToggleListKeysOptions {
     close: () => void;
     /** Enter or Space on the highlighted option. */
     onPick: (value: OptionValue) => void;
+    /**
+     * Keys go to a text input (the search box): Space types a space and
+     * Home / End move the caret instead of the highlight.
+     */
+    typing?: boolean;
     /** Consumer handlers, run first; `preventDefault()` skips the built-in keys. */
-    onKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
-    onKeyUp?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<E>) => void;
+    onKeyUp?: (event: KeyboardEvent<E>) => void;
 }
 /**
  * Keyboard for a dropdown toggle that keeps focus while it drives its list:
  * arrows open it, then Arrow/Home/End move the highlight, Enter/Space pick,
  * Escape/Tab close. Returns the toggle's handlers and its
- * `aria-activedescendant`.
+ * `aria-activedescendant`. With `typing`, drives the list from a search input
+ * instead.
  */
-export declare const useToggleListKeys: ({ listId, isOpen, disabled, menuItems, activeValue, setActiveValue, open, close, onPick, onKeyDown, onKeyUp, }: UseToggleListKeysOptions) => {
-    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
-    onKeyUp: (event: KeyboardEvent<HTMLButtonElement>) => void;
+export declare const useToggleListKeys: <E extends HTMLElement = HTMLButtonElement>({ listId, isOpen, disabled, menuItems, activeValue, setActiveValue, open, close, onPick, typing, onKeyDown, onKeyUp, }: UseToggleListKeysOptions<E>) => {
+    onKeyDown: (event: KeyboardEvent<E>) => void;
+    onKeyUp: (event: KeyboardEvent<E>) => void;
     'aria-activedescendant': string | undefined;
 };

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

@@ -14,3 +14,10 @@ export declare const flattenDropdownOptions: (children: React.ReactNode) => Reac
  * `children` → `label` → `value`, as it always has.
  */
 export declare const toDropdownMenuItems: (children: React.ReactNode) => ContextMenuEntry<OptionValue>[];
+/**
+ * The `DropdownOption` children whose text contains `query` (case-insensitive),
+ * in display order. A `DropdownOptionGroup` is kept, holding only its matching
+ * options, while any of them match. An empty query returns the children as is.
+ * Options with no text (custom markup and no `textValue`) never match.
+ */
+export declare const filterDropdownOptions: (children: React.ReactNode, query: string) => React.ReactElement[];

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

@@ -5,6 +5,8 @@ import { ControlledButtonProps } from '../Dropdown/types';
 export interface DropdownToggleProps extends CommonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ControlledButtonProps> {
     /** Emotion css prop forwarded to the underlying styled button */
     css?: Interpolation<Theme>;
+    /** Ref to the button, e.g. to return focus to it. */
+    ref?: React.Ref<HTMLButtonElement>;
     onClick: (e: React.MouseEvent<HTMLElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLButtonElement, Element>) => void;
     isOpen: boolean;

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

@@ -98,6 +98,27 @@ export type DropdownProps<P extends DropdownOptionProps> = {
      * matching the behaviour of previous versions.
      */
     width?: string | number;
+    /**
+     * Adds a search box above the open list. Typing filters the options by
+     * their text (case-insensitive, anywhere in the text); a group stays while
+     * any of its options match. Options whose `children` is markup are matched
+     * by their `textValue`. Selections outside the current search are kept.
+     *
+     * Focus moves to the search box on open and keeps driving the list: arrows
+     * move the highlight, Enter toggles, Escape clears the search, then closes.
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder and accessible name of the search box.
+     * @default 'Search'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Shown in the list when nothing matches the search.
+     * @default 'No results found'
+     */
+    searchEmptyState?: React.ReactNode;
 };
 /**
  * Context value shared with child DropdownOption components via MultipleDropdownContext
@@ -127,4 +148,8 @@ export interface DropdownContextType<T extends DropdownOptionProps> {
      * Updates the highlighted option
      */
     setActiveValue?: (value: string | number | null) => void;
+    /** The list sits in the search card, which does the positioning. */
+    searchable?: boolean;
+    /** Shown when the list has no options. */
+    emptyState?: React.ReactNode;
 }