@epam/ai-dial-ui-kit 0.16.0-dev.12 → 0.16.0-dev.13

package/dist/grid.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateCellRenderer-xHilQEYj.cjs");exports.DEFAULT_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_DATE_LOCALE=e.DEFAULT_LOCALE;exports.DEFAULT_GRID_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS$1;exports.DEFAULT_GRID_DATE_LOCALE=e.DEFAULT_LOCALE$1;exports.DateCellRenderer=e.DateCellRenderer;exports.DialDateCellRenderer=e.DialDateCellRenderer;exports.DialGrid=e.DialGrid;exports.GRID_ALIGN_RIGHT_CLASS=e.GRID_ALIGN_RIGHT_CLASS;exports.GRID_ROOT_CLASS=e.GRID_ROOT_CLASS;exports.GRID_ROW_HEIGHT=e.ROW_HEIGHT;exports.GRID_SELECTION_COLUMN_ID=e.GRID_SELECTION_COLUMN_ID;exports.GRID_THEME_PARAMS=e.GRID_THEME_PARAMS;exports.Grid=e.Grid;exports.GridColorScheme=e.GridColorScheme;exports.GridSelectionMode=e.GridSelectionMode;exports.baseColumnComparator=e.baseColumnComparator;exports.checkColDefsChanges=e.checkColDefsChanges;exports.convertGridDateToDate=e.convertToDate;exports.convertToDate=e.convertToDate;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DateCellRenderer-CkDF66wX.cjs");exports.DEFAULT_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_DATE_LOCALE=e.DEFAULT_LOCALE;exports.DEFAULT_GRID_DATE_FORMAT_OPTIONS=e.DEFAULT_DATE_FORMAT_OPTIONS$1;exports.DEFAULT_GRID_DATE_LOCALE=e.DEFAULT_LOCALE$1;exports.DateCellRenderer=e.DateCellRenderer;exports.DialDateCellRenderer=e.DialDateCellRenderer;exports.DialGrid=e.DialGrid;exports.GRID_ALIGN_RIGHT_CLASS=e.GRID_ALIGN_RIGHT_CLASS;exports.GRID_ROOT_CLASS=e.GRID_ROOT_CLASS;exports.GRID_ROW_HEIGHT=e.ROW_HEIGHT;exports.GRID_SELECTION_COLUMN_ID=e.GRID_SELECTION_COLUMN_ID;exports.GRID_THEME_PARAMS=e.GRID_THEME_PARAMS;exports.Grid=e.Grid;exports.GridColorScheme=e.GridColorScheme;exports.GridSelectionMode=e.GridSelectionMode;exports.baseColumnComparator=e.baseColumnComparator;exports.checkColDefsChanges=e.checkColDefsChanges;exports.convertGridDateToDate=e.convertToDate;exports.convertToDate=e.convertToDate;

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

@@ -2,6 +2,7 @@ import { Placement } from '@floating-ui/react';
 import { CSSProperties, FC, MouseEvent, ReactNode, RefObject } from 'react';
 import { DropdownTrigger } from '../../../types/dropdown';
 import { DropdownItem } from '../../../models/dropdown';
+import { DropdownItemFilter } from './search';
 export interface DropdownProps {
     children: ReactNode;
     items?: DropdownItem[];
@@ -46,6 +47,34 @@ export interface DropdownProps {
      * opens, matching the pre-existing behavior.
      */
     initialFocus?: 0 | -1 | RefObject<HTMLElement | null>;
+    /**
+     * Puts a search field above `items` that narrows them as the user types and
+     * highlights the match in each remaining label. The query is cleared when
+     * the menu closes.
+     */
+    searchable?: boolean;
+    /** Controlled query of the search field; when omitted, the dropdown keeps its own. */
+    searchValue?: string;
+    /** Fired with every edit of the search field, and with `''` when the menu closes. */
+    onSearchChange?: (value: string) => void;
+    /** Placeholder and accessible name of the search field. */
+    searchPlaceholder?: string;
+    /** Accessible name of the search field's clear button. */
+    searchClearLabel?: string;
+    /** Text shown, and announced, when the query leaves no items. */
+    noResultsLabel?: string;
+    /**
+     * Decides whether an item matches the query, which arrives trimmed and
+     * lower-cased. Defaults to a substring match on a string `label`. A submenu
+     * whose own row matches keeps all its children; otherwise it keeps only the
+     * matching ones, and disappears when none do.
+     */
+    filterItem?: DropdownItemFilter;
+    /**
+     * Number of rows the item list shows before it scrolls. The cap applies to
+     * the list alone, so a search field or header stays in view above it.
+     */
+    maxVisibleItems?: number;
 }
 /**
  *
@@ -83,6 +112,11 @@ export interface DropdownProps {
  * <Dropdown closable renderOverlay={() => <div className="p-3">Custom content</div>}>
  *   <button type="button" className="px-3 py-2 rounded border">Custom</button>
  * </Dropdown>
+ *
+ * // Searchable menu, seven rows tall before it scrolls
+ * <Dropdown searchable maxVisibleItems={7} items={items}>
+ *   <button type="button" className="px-3 py-2 rounded border">Create</button>
+ * </Dropdown>
  * ```
  *
  * @param children - Trigger element(s) to anchor and open the menu
@@ -111,5 +145,13 @@ export interface DropdownProps {
  * @param [matchReferenceWidth=true] - Whether to match the reference element's width
  * @param [maxDropdownHeight] - Maximum height of the dropdown menu; when omitted, no limit is applied
  * @param [initialFocus] - Initial focus target inside the overlay on open, forwarded to `FloatingFocusManager`; when omitted, matches pre-existing behavior
+ * @param [searchable=false] - Show a search field above `items` that filters them and highlights the match
+ * @param [searchValue] - Controlled query of the search field
+ * @param [onSearchChange] - Fired with every edit of the search field, and with `''` when the menu closes
+ * @param [searchPlaceholder="Search"] - Placeholder and accessible name of the search field
+ * @param [searchClearLabel="Clear search"] - Accessible name of the search field's clear button
+ * @param [noResultsLabel="No results found"] - Text shown and announced when the query leaves no items
+ * @param [filterItem] - Item matcher; defaults to a case-insensitive substring match on a string `label`
+ * @param [maxVisibleItems] - Rows the item list shows before it scrolls
  */
 export declare const Dropdown: FC<DropdownProps>;

package/dist/src/components/New/Dropdown/constants.d.ts

@@ -11,5 +11,11 @@ export declare const dropdownItemListClassName: string;
  */
 export declare const dropdownItemBaseClassName: string;
 export declare const dropdownDividerClassName = "my-1 border-t border-tertiary";
+/** The search row of a `searchable` dropdown: pinned above the item list, which scrolls on its own. */
+export declare const dropdownSearchClassName = "shrink-0 px-1 pt-1";
+/** The no-results line of a `searchable` dropdown, styled as a `PlainText` row. */
+export declare const dropdownNoResultsClassName = "px-3 py-2 text-secondary dial-caption-text";
+/** Height of the item list that shows exactly `rows` rows before it scrolls. */
+export declare const getDropdownListHeight: (rows: number) => number;
 export declare const dropdownGap = 4;
 export declare const submenuCaretIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Dropdown/search.d.ts

@@ -0,0 +1,9 @@
+import { DropdownItem } from '../../../models/dropdown';
+/** Decides whether an item matches a non-empty, trimmed, lower-cased query. */
+export type DropdownItemFilter = (item: DropdownItem, query: string) => boolean;
+/** Case-insensitive substring match on a string `label`; an item with a non-string label never matches. */
+export declare const matchDropdownItemLabel: DropdownItemFilter;
+/** Returns `items` narrowed to the rows matching `query`; an empty query returns `items` unchanged. */
+export declare const filterDropdownItems: (items: DropdownItem[], query: string, isMatch?: DropdownItemFilter) => DropdownItem[];
+/** Returns `items` with every string row label, submenus included, rendered through a single-line `Highlight` of `query`. */
+export declare const highlightDropdownItems: (items: DropdownItem[], query: string) => DropdownItem[];

package/dist/src/constants/public-class-names.d.ts

@@ -74,6 +74,8 @@ export declare const DIAL_KIT_CLASS: {
      * on a submenu's own list. It is *not* the floating panel.
      */
     readonly dropdownList: "dial-kit-dropdown-list";
+    /** The search row above the item list of a `searchable` `Dropdown`. */
+    readonly dropdownSearch: "dial-kit-dropdown-search";
     /**
      * One row of a floating overlay: a dropdown item, a `Select` option, a
      * submenu trigger, or a submenu child. It sits on the element that draws the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.16.0-dev.12",
+  "version": "0.16.0-dev.13",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",