@epam/ai-dial-ui-kit 0.4.0-rc.52 → 0.4.0-rc.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24,6 +24,7 @@ export interface DialSelectProps {
24
24
  footer?: ReactNode | (() => ReactNode);
25
25
  onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
26
26
  onChange?: (next: string | string[]) => void;
27
+ inlineSearch?: boolean;
27
28
  }
28
29
  /**
29
30
  * A versatile select supporting single and multiple selections.
@@ -33,36 +34,43 @@ export interface DialSelectProps {
33
34
  * - In the list, the selected option is indicated by a LEFT border and tinted background
34
35
  * (no check icon).
35
36
  *
37
+ * Multiple mode uses checkboxes (including Select All with indeterminate state).
38
+ *
39
+ * Search:
40
+ * - `searchable`: shows a plain input in the overlay header that filters options.
41
+ * - `inlineSearch` (single mode only): the trigger renders a plain input; typing filters options;
42
+ * when closed, the input shows the selected label.
43
+ *
36
44
  * @example
37
45
  * ```tsx
38
- * <DialSelect
39
- * options={[
40
- * { value: 'option-1', label: 'Option 1' },
41
- * { value: 'option-2', label: 'Option 2' },
42
- * ]}
43
- * multiple
44
- * />
46
+ * <DialSelect options={[{ value: 'option-1', label: 'Option 1' }]} />
47
+ * <DialSelect searchable options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} />
48
+ * <DialSelect multiple selectAll options={[{ value: '1', label: 'One' }, { value: '2', label: 'Two' }]} />
49
+ * <DialSelect inlineSearch options={[{ value: 'r', label: 'Relax-Name' }, { value: 'rep2', label: 'rep2' }]} />
45
50
  * ```
46
51
  *
47
- * Multiple mode uses checkboxes (including Select All with indeterminate state).
48
- *
49
52
  * @param options - Array of options to select from.
50
53
  * @param [multiple] - Whether multiple selections are allowed.
54
+ * @param [size=SelectSize.Md] - Size of the control.
55
+ * @param [variant=SelectVariant.Primary] - Visual variant.
51
56
  * @param [value] - Controlled selected value(s).
52
57
  * @param [prefix] - Prefix for selected value(s).
53
58
  * @param [defaultValue] - Uncontrolled initial selected value(s).
54
- * @param [placeholder] - Placeholder text when no selection is made.
55
- * @param [searchable] - Whether to show a search input to filter options.
56
- * @param [searchPlaceholder] - Search Placeholder text shown when search input is empty
57
- * @param [selectAll] - Whether to show a "Select All" checkbox in multiple mode.
58
- * @param [selectAllLabel] - Label for the "Select All" checkbox.
59
- * @param [emptyStateTitle] - Title text when there are no options to display.
60
- * @param [emptyStateDescription] - Optional description text when there are no options.
61
- * @param [emptyStateIcon] - Optional icon to display when there are no options.
62
- * @param [disabled] - Whether the select is disabled.
63
- * @param [cssClass] - Additional CSS classes to apply to the select trigger.
64
- * @param [closable] - Whether to show a close button in the dropdown header.
65
- * @param [onClose] - Callback when the dropdown is closed via the close button.
66
- * @param [onChange] - Callback when the selection changes.
59
+ * @param [placeholder="Select..."] - Placeholder text when no selection is made.
60
+ * @param [searchable=false] - Show a search field in the overlay header.
61
+ * @param [searchPlaceholder] - Placeholder for the search input (overlay/inline).
62
+ * @param [selectAll=false] - Show a "Select All" checkbox in multiple mode.
63
+ * @param [selectAllLabel="Select all"] - Label for the "Select All" checkbox.
64
+ * @param [emptyStateTitle="No options available"] - Title text when there are no options.
65
+ * @param [emptyStateDescription] - Description text when there are no options.
66
+ * @param [emptyStateIcon] - Icon to display when there are no options.
67
+ * @param [disabled=false] - Disable the control.
68
+ * @param [cssClass] - Additional CSS classes for the trigger.
69
+ * @param [closable=false] - Show a close button in the dropdown header.
70
+ * @param [header] - Custom node/function rendered above the options.
71
+ * @param [footer] - Custom node/function rendered below the options.
72
+ * @param [onClose] - Called when the dropdown close button is clicked.
73
+ * @param [onChange] - Called when the selection changes.
74
+ * @param [inlineSearch=false] - Render a plain input inside trigger (single mode only).
67
75
  */
68
76
  export declare const DialSelect: FC<DialSelectProps>;
@@ -5,4 +5,3 @@ export declare const selectOptionSelectedClasses = "bg-accent-primary-alpha";
5
5
  export declare const selectOptionSingleSelectedClasses = "bg-accent-primary-alpha border-l border-accent-primary border-1";
6
6
  export declare const selectOptionDisabledClasses = "opacity-75";
7
7
  export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;
8
- export declare const selectCheckIcon: import("react/jsx-runtime").JSX.Element;
@@ -9,6 +9,6 @@ export interface DropdownItem {
9
9
  type?: DropdownItemType;
10
10
  onClick?: (info: {
11
11
  key: string;
12
- domEvent: MouseEvent<Element, MouseEvent>;
12
+ domEvent: MouseEvent;
13
13
  }) => void;
14
14
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-ui-kit",
3
- "version": "0.4.0-rc.52",
3
+ "version": "0.4.0-rc.54",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "description": "A modern UI kit for building AI DIAL interfaces with React",