@vibe/core 4.5.0 → 4.5.2

package/dist/metadata/examples/DropdownBasicDropdown.md

@@ -109,7 +109,7 @@ return <Flex gap="large" align="start" justify="start">
       width: "350px",
       marginBottom: "50px"
     }}>
-            <Dropdown placeholder="Single line multi state" defaultValue={[options[0], options[1], options[2]]} options={options} multi clearAriaLabel="Clear" />
+            <Dropdown id="multi-select-single-line" aria-label="Multi select single line" placeholder="Single line multi state" defaultValue={[options[0], options[1], options[2]]} options={options} multi clearAriaLabel="Clear" />
           </div>
         </Flex>
         <Flex direction="column" gap="medium">
@@ -118,7 +118,7 @@ return <Flex gap="large" align="start" justify="start">
       width: "350px",
       marginBottom: "50px"
     }}>
-            <Dropdown placeholder="Multiple line multi state" defaultValue={[options[0], options[1], options[2]]} options={options} multi multiline clearAriaLabel="Clear" />
+            <Dropdown id="multi-select-multiline" aria-label="Multi select multiple lines" placeholder="Multiple line multi state" defaultValue={[options[0], options[1], options[2]]} options={options} multi multiline clearAriaLabel="Clear" />
           </div>
         </Flex>
       </Flex>;
@@ -171,13 +171,13 @@ return <Flex gap="large" align="start" justify="start">
       width: "350px",
       marginBottom: "10px"
     }}>
-            <Dropdown defaultValue={optionsIcons[0]} options={optionsIcons} clearAriaLabel="Clear" />
+            <Dropdown id="icon-single" aria-label="Icon options" defaultValue={optionsIcons[0]} options={optionsIcons} clearAriaLabel="Clear" />
           </div>
           <div style={{
       width: "350px",
       marginBottom: "10px"
     }}>
-            <Dropdown defaultValue={optionsAvatar[0]} options={optionsAvatar} clearAriaLabel="Clear" />
+            <Dropdown id="avatar-single" aria-label="Avatar options" defaultValue={optionsAvatar[0]} options={optionsAvatar} clearAriaLabel="Clear" />
           </div>
         </Flex>
         <Flex direction="column" gap="medium">
@@ -186,13 +186,13 @@ return <Flex gap="large" align="start" justify="start">
       width: "350px",
       marginBottom: "10px"
     }}>
-            <Dropdown defaultValue={[optionsIcons[0]]} options={optionsIcons} multi clearAriaLabel="Clear" />
+            <Dropdown id="icon-multi" aria-label="Icon options multi" defaultValue={[optionsIcons[0]]} options={optionsIcons} multi clearAriaLabel="Clear" />
           </div>
           <div style={{
       width: "350px",
       marginBottom: "10px"
     }}>
-            <Dropdown defaultValue={[optionsAvatar[0]]} options={optionsAvatar} multi clearAriaLabel="Clear" />
+            <Dropdown id="avatar-multi" aria-label="Avatar options multi" defaultValue={[optionsAvatar[0]]} options={optionsAvatar} multi clearAriaLabel="Clear" />
           </div>
         </Flex>
       </Flex>;
@@ -214,7 +214,7 @@ const options = useMemo(() => [{
 return <div style={{
   width: "300px"
 }}>
-        <Dropdown placeholder={"Search an item"} options={options} searchable maxMenuHeight={170} clearAriaLabel="Clear" />
+        <Dropdown id="searchable-basic" aria-label="Searchable" placeholder={"Search an item"} options={options} searchable maxMenuHeight={170} clearAriaLabel="Clear" />
       </div>;
 ```
 
@@ -272,7 +272,7 @@ return <Flex gap="medium" align="start" justify="start">
           <div style={{
       width: "300px"
     }}>
-            <Dropdown placeholder="Group by divider" options={optionsWithoutGroupLabel} withGroupDivider maxMenuHeight={170} clearAriaLabel="Clear" />
+            <Dropdown id="groups-divider" aria-label="Group by divider" placeholder="Group by divider" options={optionsWithoutGroupLabel} withGroupDivider maxMenuHeight={170} clearAriaLabel="Clear" />
           </div>
         </Flex>
         <Flex direction="column" gap="medium">
@@ -280,7 +280,7 @@ return <Flex gap="medium" align="start" justify="start">
           <div style={{
       width: "300px"
     }}>
-            <Dropdown placeholder="Group by category" options={options} maxMenuHeight={170} clearAriaLabel="Clear" />
+            <Dropdown id="groups-category" aria-label="Group by category" placeholder="Group by category" options={options} maxMenuHeight={170} clearAriaLabel="Clear" />
           </div>
         </Flex>
         <Flex direction="column" gap="medium">
@@ -288,7 +288,7 @@ return <Flex gap="medium" align="start" justify="start">
           <div style={{
       width: "300px"
     }}>
-            <Dropdown placeholder="Group by category title sticky" options={options} stickyGroupTitle maxMenuHeight={170} clearAriaLabel="Clear" />
+            <Dropdown id="groups-sticky" aria-label="Group by category title sticky" placeholder="Group by category title sticky" options={options} stickyGroupTitle maxMenuHeight={170} clearAriaLabel="Clear" />
           </div>
         </Flex>
       </Flex>;
@@ -337,12 +337,12 @@ return <Flex gap="large">
         <div style={{
     width: "300px"
   }}>
-          <Dropdown placeholder={"Start element"} options={startOptions} label="Start element" required clearAriaLabel="Clear" />
+          <Dropdown id="item-start-element" placeholder={"Start element"} options={startOptions} label="Start element" required clearAriaLabel="Clear" />
         </div>
         <div style={{
     width: "300px"
   }}>
-          <Dropdown placeholder={"End element"} options={endOptions} label="End element" required clearAriaLabel="Clear" />
+          <Dropdown id="item-end-element" placeholder={"End element"} options={endOptions} label="End element" required clearAriaLabel="Clear" />
         </div>
       </Flex>;
 ```
@@ -372,7 +372,7 @@ const options = useMemo(() => [{
 return <div style={{
   width: "300px"
 }}>
-        <Dropdown placeholder={"Placeholder text here"} options={options} defaultValue={[options[0], options[2], options[3]]} label="Label" required multi showSelectedOptions={false} clearAriaLabel="Clear" />
+        <Dropdown id="hide-selected-items" placeholder={"Placeholder text here"} options={options} defaultValue={[options[0], options[2], options[3]]} label="Label" required multi showSelectedOptions={false} clearAriaLabel="Clear" />
       </div>;
 ```
 
@@ -398,7 +398,7 @@ const optionsWithTooltips = useMemo(() => [{
 return <div style={{
   width: "300px"
 }}>
-        <Dropdown placeholder={"Placeholder text here"} options={optionsWithTooltips} clearAriaLabel="Clear" />
+        <Dropdown id="with-tooltips" aria-label="With tooltips" placeholder={"Placeholder text here"} options={optionsWithTooltips} clearAriaLabel="Clear" />
       </div>;
 ```
 
@@ -467,12 +467,12 @@ return <Flex gap="large" align="start">
         <div style={{
     width: "350px"
   }}>
-          <Dropdown placeholder="Search" options={options} label="Virtualized" menuRenderer={virtualizedMenuRenderer} searchable maxMenuHeight={250} clearAriaLabel="Clear" />
+          <Dropdown id="virtualized" placeholder="Search" options={options} label="Virtualized" menuRenderer={virtualizedMenuRenderer} searchable maxMenuHeight={250} clearAriaLabel="Clear" />
         </div>
         <div style={{
     width: "350px"
   }}>
-          <Dropdown placeholder="Search" options={groupedOptions} label="Grouped Virtualized" menuRenderer={virtualizedMenuRenderer} searchable maxMenuHeight={250} clearAriaLabel="Clear" />
+          <Dropdown id="grouped-virtualized" placeholder="Search" options={groupedOptions} label="Grouped Virtualized" menuRenderer={virtualizedMenuRenderer} searchable maxMenuHeight={250} clearAriaLabel="Clear" />
         </div>
       </Flex>;
 ```

package/dist/metadata.json

@@ -6341,6 +6341,15 @@
           "name": "(option: Item) => void"
         }
       },
+      "interactiveChips": {
+        "defaultValue": null,
+        "description": "If true, chips are always visible and support keyboard navigation: pressing Backspace or Left arrow\nfrom the input moves focus to the last chip; Left/Right navigates between chips; Delete/Backspace\nremoves the focused chip. Only applies when searchable=true.",
+        "name": "interactiveChips",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "valueRenderer": {
         "defaultValue": null,
         "description": "The function to call to render the selected value on single select mode.",
@@ -6350,6 +6359,15 @@
           "name": "(option: Item) => React.ReactNode"
         }
       },
+      "inlineSelectedValue": {
+        "defaultValue": null,
+        "description": "Single-select only. (Not available for multi-select)\nSearchable single-select only. When true, the selected option's label is shown **inside the input**\n(and exposed to assistive tech as the input's value) instead of as a visual overlay over an empty\nfield. Opt-in because it changes how the collapsed selection looks (text-only, no icon/avatar/\n`valueRenderer`). Defaults to false (the overlay behavior).",
+        "name": "inlineSelectedValue",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "defaultValue": {
         "defaultValue": null,
         "description": "The default selected values for multi-select.\nThe default selected value for single-select.",
@@ -7253,6 +7271,15 @@
           "name": "string"
         }
       },
+      "role": {
+        "defaultValue": null,
+        "description": "The ARIA role of the flex container.",
+        "name": "role",
+        "required": false,
+        "type": {
+          "name": "React.AriaRole"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "A CSS class name to apply to the component.",

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

@@ -15,10 +15,20 @@ interface MultiSelectSpecifics<Item extends BaseItemData<Record<string, unknown>
      * Callback fired when an option is removed in multi-select mode. Only available when multi is true.
      */
     onOptionRemove?: (option: Item) => void;
+    /**
+     * If true, chips are always visible and support keyboard navigation: pressing Backspace or Left arrow
+     * from the input moves focus to the last chip; Left/Right navigates between chips; Delete/Backspace
+     * removes the focused chip. Only applies when searchable=true.
+     */
+    interactiveChips?: boolean;
     /**
      * The function to call to render the selected value on single select mode.
      */
     valueRenderer?: never;
+    /**
+     * Single-select only. (Not available for multi-select)
+     */
+    inlineSelectedValue?: never;
     /**
      * The default selected values for multi-select.
      */
@@ -53,6 +63,13 @@ interface SingleSelectSpecifics<Item extends BaseItemData<Record<string, unknown
      * The function to call to render the selected value on single select mode.
      */
     valueRenderer?: (option: Item) => React.ReactNode;
+    /**
+     * Searchable single-select only. When true, the selected option's label is shown **inside the input**
+     * (and exposed to assistive tech as the input's value) instead of as a visual overlay over an empty
+     * field. Opt-in because it changes how the collapsed selection looks (text-only, no icon/avatar/
+     * `valueRenderer`). Defaults to false (the overlay behavior).
+     */
+    inlineSelectedValue?: boolean;
     /**
      * The default selected value for single-select.
      */

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

@@ -7,6 +7,10 @@ type MultiSelectedValuesProps<Item> = {
     disabled?: boolean;
     readOnly?: boolean;
     minVisibleCount?: number;
+    /** Extra props (tabIndex, onKeyDown, etc.) to spread on each visible chip container. */
+    getChipContainerProps?: (item: Item, index: number) => Record<string, any>;
+    /** Ref forwarded to the +N overflow Chips element, for external keyboard focus management. */
+    badgeRef?: React.Ref<HTMLDivElement>;
 };
-declare function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({ selectedItems, onRemove, renderInput, disabled, readOnly, minVisibleCount }: MultiSelectedValuesProps<Item>): React.JSX.Element;
+declare function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({ selectedItems, onRemove, renderInput, disabled, readOnly, minVisibleCount, getChipContainerProps, badgeRef }: MultiSelectedValuesProps<Item>): React.JSX.Element;
 export default MultiSelectedValues;

package/dist/mocked_classnames/components/Dropdown/components/Trigger/DropdownInput.d.ts

@@ -1,6 +1,8 @@
-import React from "react";
-declare const DropdownInput: ({ inputSize, fullWidth }: {
+import React, { type RefObject } from "react";
+declare const DropdownInput: ({ inputSize, fullWidth, onKeyDown: externalKeyDown, inputRef: externalInputRef }: {
     inputSize?: "small" | "medium" | "large";
     fullWidth?: boolean;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    inputRef?: RefObject<HTMLInputElement>;
 }) => React.JSX.Element;
 export default DropdownInput;

package/dist/mocked_classnames/components/Dropdown/context/DropdownContext.types.d.ts

@@ -7,7 +7,7 @@ type ItemPropGetter<Item> = (options: {
     item: Item;
     index: number;
 }) => Record<string, any>;
-type InheritedDropdownProps<Item extends BaseItemData<Record<string, unknown>>> = Partial<Pick<BaseDropdownProps<Item>, "label" | "required" | "className" | "id" | "aria-label" | "data-testid" | "error" | "helperText" | "dir" | "searchable" | "multi" | "multiline" | "disabled" | "readOnly" | "size" | "optionRenderer" | "valueRenderer" | "menuRenderer" | "noOptionsMessage" | "placeholder" | "withGroupDivider" | "stickyGroupTitle" | "maxMenuHeight" | "clearable" | "autoFocus" | "inputAriaLabel" | "menuAriaLabel" | "clearAriaLabel" | "closeMenuOnSelect" | "menuWrapperClassName" | "loading" | "minVisibleCount" | "boxMode" | "borderless" | "onFocus" | "onBlur" | "onKeyDown" | "onScroll" | "onClear">>;
+type InheritedDropdownProps<Item extends BaseItemData<Record<string, unknown>>> = Partial<Pick<BaseDropdownProps<Item>, "label" | "required" | "className" | "id" | "aria-label" | "data-testid" | "error" | "helperText" | "dir" | "searchable" | "multi" | "multiline" | "disabled" | "readOnly" | "size" | "optionRenderer" | "valueRenderer" | "inlineSelectedValue" | "menuRenderer" | "noOptionsMessage" | "placeholder" | "withGroupDivider" | "stickyGroupTitle" | "maxMenuHeight" | "clearable" | "autoFocus" | "inputAriaLabel" | "menuAriaLabel" | "clearAriaLabel" | "closeMenuOnSelect" | "menuWrapperClassName" | "loading" | "minVisibleCount" | "boxMode" | "borderless" | "onFocus" | "onBlur" | "onKeyDown" | "onScroll" | "onClear">>;
 export interface DropdownContextProps<Item extends BaseItemData<Record<string, unknown>> = any> extends InheritedDropdownProps<Item> {
     label?: string;
     isOpen: boolean;
@@ -29,6 +29,13 @@ export interface DropdownContextProps<Item extends BaseItemData<Record<string, u
     contextOnOptionRemove?: (option: Item) => void;
     addSelectedItem?: (item: Item) => void;
     removeSelectedItem?: (item: Item) => void;
+    getSelectedItemProps?: (options: {
+        selectedItem: any;
+        index: number;
+    }) => Record<string, any>;
     isFocused?: boolean;
+    interactiveChips?: boolean;
+    /** Id of the helper text element, linked to the combobox/trigger via aria-describedby. */
+    helperTextId?: string;
 }
 export {};

package/dist/mocked_classnames/components/Dropdown/hooks/useDropdownCombobox.d.ts

@@ -1,6 +1,6 @@
 import { type BaseItemData } from "../../BaseItem";
 import { type DropdownGroupOption } from "../Dropdown.types";
-declare function useDropdownCombobox<T extends BaseItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, isMenuOpen?: boolean, autoFocus?: boolean, closeMenuOnSelect?: boolean, defaultValue?: T, value?: T, inputValueProp?: string, onChange?: (option: T | T[] | null) => void, onInputChange?: (value: string | null) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean, showSelectedOptions?: boolean, id?: string): {
+declare function useDropdownCombobox<T extends BaseItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, isMenuOpen?: boolean, autoFocus?: boolean, closeMenuOnSelect?: boolean, defaultValue?: T, value?: T, inputValueProp?: string, onChange?: (option: T | T[] | null) => void, onInputChange?: (value: string | null) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean, showSelectedOptions?: boolean, id?: string, inlineSelectedValue?: boolean): {
     isOpen: boolean;
     inputValue: string;
     highlightedIndex: number;
@@ -10,6 +10,7 @@ declare function useDropdownCombobox<T extends BaseItemData<Record<string, unkno
     getMenuProps: <Options>(options?: import("downshift").UseComboboxGetMenuPropsOptions & Options, otherOptions?: import("downshift").GetPropsCommonOptions) => import("downshift").Overwrite<import("downshift").UseComboboxGetMenuPropsReturnValue, Options>;
     getInputProps: (options?: Parameters<(<Options>(options?: import("downshift").UseComboboxGetInputPropsOptions & Options, otherOptions?: import("downshift").GetPropsCommonOptions) => import("downshift").Overwrite<import("downshift").UseComboboxGetInputPropsReturnValue, Options>)>[0]) => import("downshift").Overwrite<import("downshift").UseComboboxGetInputPropsReturnValue, {
         ref: import("react").MutableRefObject<HTMLInputElement>;
+        onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
         disabled?: boolean;
         accept?: string | undefined;
         acceptCharset?: string | undefined;
@@ -249,7 +250,6 @@ declare function useDropdownCombobox<T extends BaseItemData<Record<string, unkno
         onLoadCapture?: import("react").ReactEventHandler<HTMLInputElement>;
         onError?: import("react").ReactEventHandler<HTMLInputElement>;
         onErrorCapture?: import("react").ReactEventHandler<HTMLInputElement>;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLInputElement>;
         onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLInputElement>;
         onKeyPress?: import("react").KeyboardEventHandler<HTMLInputElement>;
         onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLInputElement>;