@vibe/core 3.54.2 → 3.55.0

package/dist/metadata.json

@@ -2944,9 +2944,7 @@
         }
       },
       "name": {
-        "defaultValue": {
-          "value": "undefined"
-        },
+        "defaultValue": null,
         "description": "Name of the button - for form submit usages",
         "name": "name",
         "required": false,
@@ -3114,9 +3112,7 @@
         }
       },
       "loading": {
-        "defaultValue": {
-          "value": "false"
-        },
+        "defaultValue": null,
         "description": "loading boolean which switches the text to a loader",
         "name": "loading",
         "required": false,
@@ -3125,9 +3121,7 @@
         }
       },
       "loaderClassName": {
-        "defaultValue": {
-          "value": "undefined"
-        },
+        "defaultValue": null,
         "description": "className which is applied to loader container *",
         "name": "loaderClassName",
         "required": false,
@@ -3136,9 +3130,7 @@
         }
       },
       "style": {
-        "defaultValue": {
-          "value": "undefined"
-        },
+        "defaultValue": null,
         "description": "",
         "name": "style",
         "required": false,
@@ -3189,9 +3181,7 @@
         }
       },
       "ariaLabeledBy": {
-        "defaultValue": {
-          "value": "undefined"
-        },
+        "defaultValue": null,
         "description": "element id to describe the button accordingly",
         "name": "ariaLabeledBy",
         "required": false,
@@ -3200,9 +3190,7 @@
         }
       },
       "ariaLabel": {
-        "defaultValue": {
-          "value": "undefined"
-        },
+        "defaultValue": null,
         "description": "aria label to provide important when providing only Icon",
         "name": "ariaLabel",
         "required": false,
@@ -3211,9 +3199,7 @@
         }
       },
       "ariaHasPopup": {
-        "defaultValue": {
-          "value": "undefined"
-        },
+        "defaultValue": null,
         "description": "aria for a button popup",
         "name": "ariaHasPopup",
         "required": false,
@@ -3222,9 +3208,7 @@
         }
       },
       "ariaExpanded": {
-        "defaultValue": {
-          "value": "undefined"
-        },
+        "defaultValue": null,
         "description": "aria to be set if the popup is open",
         "name": "ariaExpanded",
         "required": false,
@@ -3233,9 +3217,7 @@
         }
       },
       "ariaControls": {
-        "defaultValue": {
-          "value": "undefined"
-        },
+        "defaultValue": null,
         "description": "aria controls - receives id for the controlled region",
         "name": "ariaControls",
         "required": false,
@@ -13882,7 +13864,7 @@
       },
       "dialogPaddingSize": {
         "defaultValue": {
-          "value": "DialogContentContainer.sizes.MEDIUM"
+          "value": "medium"
         },
         "description": "The padding size inside the secondary dialog.",
         "name": "dialogPaddingSize",
@@ -13943,7 +13925,9 @@
         }
       },
       "kind": {
-        "defaultValue": null,
+        "defaultValue": {
+          "value": "primary"
+        },
         "description": "The button's kind",
         "name": "kind",
         "required": false,
@@ -14027,7 +14011,9 @@
         }
       },
       "color": {
-        "defaultValue": null,
+        "defaultValue": {
+          "value": "primary"
+        },
         "description": "The button's color",
         "name": "color",
         "required": false,
@@ -20462,5 +20448,489 @@
     "import": "import { ModalMedia } from \"@vibe/core/next\"",
     "parentComponent": "Modal",
     "subComponents": []
+  },
+  {
+    "filePath": "src/components/DropdownNew/Dropdown.tsx",
+    "aggregator": "next",
+    "symbols": [
+      "default as Dropdown",
+      "DropdownGroupOption",
+      "BaseDropdownProps",
+      "DropdownSizes",
+      "DropdownDirection",
+      "DropdownMultiControllerProps",
+      "DropdownSingleControllerProps"
+    ],
+    "displayName": "Dropdown",
+    "description": "",
+    "props": {
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "options": {
+        "defaultValue": null,
+        "description": "The list of options available in the list.",
+        "name": "options",
+        "required": true,
+        "type": {
+          "name": "DropdownGroupOption<Item>"
+        }
+      },
+      "tooltipProps": {
+        "defaultValue": null,
+        "description": "Props to be passed to the Tooltip component that wraps the dropdown.",
+        "name": "tooltipProps",
+        "required": false,
+        "type": {
+          "name": "Partial<TooltipProps>"
+        }
+      },
+      "withGroupDivider": {
+        "defaultValue": null,
+        "description": "If true, displays dividers between grouped options.",
+        "name": "withGroupDivider",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "stickyGroupTitle": {
+        "defaultValue": null,
+        "description": "If true, makes the group title sticky.",
+        "name": "stickyGroupTitle",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "size": {
+        "defaultValue": null,
+        "description": "The size of the dropdown.",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "DropdownSizes",
+          "value": [
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            }
+          ]
+        }
+      },
+      "dir": {
+        "defaultValue": null,
+        "description": "The direction of the dropdown.",
+        "name": "dir",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "DropdownDirection",
+          "value": [
+            {
+              "value": "\"ltr\""
+            },
+            {
+              "value": "\"rtl\""
+            },
+            {
+              "value": "\"auto\""
+            }
+          ]
+        }
+      },
+      "searchable": {
+        "defaultValue": null,
+        "description": "If true, the dropdown is searchable.",
+        "name": "searchable",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "optionRenderer": {
+        "defaultValue": null,
+        "description": "The function to call to render an option.",
+        "name": "optionRenderer",
+        "required": false,
+        "type": {
+          "name": "(option: BaseListItemData<Item>) => React.ReactNode"
+        }
+      },
+      "menuRenderer": {
+        "defaultValue": null,
+        "description": "The function to call to render the menu.",
+        "name": "menuRenderer",
+        "required": false,
+        "type": {
+          "name": "(props: { children: React.ReactNode; filteredOptions: ListGroup<Item>[]; selectedItems: Item[]; getItemProps: (options: any) => Record<string, unknown>; }) => React.ReactNode"
+        }
+      },
+      "noOptionsMessage": {
+        "defaultValue": null,
+        "description": "The message to display when there are no options.",
+        "name": "noOptionsMessage",
+        "required": false,
+        "type": {
+          "name": "any"
+        }
+      },
+      "placeholder": {
+        "defaultValue": null,
+        "description": "The placeholder to display when the dropdown is empty.",
+        "name": "placeholder",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "disabled": {
+        "defaultValue": null,
+        "description": "If true, the dropdown is disabled.",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "readOnly": {
+        "defaultValue": null,
+        "description": "If true, the dropdown is read only.",
+        "name": "readOnly",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "error": {
+        "defaultValue": null,
+        "description": "If true, the dropdown is in an error state.",
+        "name": "error",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "helperText": {
+        "defaultValue": null,
+        "description": "The helper text to display below the dropdown.",
+        "name": "helperText",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "required": {
+        "defaultValue": null,
+        "description": "If true, the dropdown is required.",
+        "name": "required",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "label": {
+        "defaultValue": null,
+        "description": "The label to display above the dropdown.",
+        "name": "label",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ariaLabel": {
+        "defaultValue": null,
+        "description": "The ARIA label for the dropdown.",
+        "name": "ariaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "inputAriaLabel": {
+        "defaultValue": null,
+        "description": "The ARIA label for the dropdown input.",
+        "name": "inputAriaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "menuAriaLabel": {
+        "defaultValue": null,
+        "description": "The ARIA label for the menu container.",
+        "name": "menuAriaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "inputValue": {
+        "defaultValue": null,
+        "description": "The current value of the input field.",
+        "name": "inputValue",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "maxMenuHeight": {
+        "defaultValue": null,
+        "description": "The maximum height of the dropdown menu.",
+        "name": "maxMenuHeight",
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "isMenuOpen": {
+        "defaultValue": null,
+        "description": "If true, controls the menu open state.",
+        "name": "isMenuOpen",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "closeMenuOnSelect": {
+        "defaultValue": null,
+        "description": "If true, closes the menu when an option is selected.",
+        "name": "closeMenuOnSelect",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "autoFocus": {
+        "defaultValue": null,
+        "description": "If true, the dropdown menu will be auto focused.",
+        "name": "autoFocus",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "clearable": {
+        "defaultValue": null,
+        "description": "If true, the dropdown will have a clear button.",
+        "name": "clearable",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "onBlur": {
+        "defaultValue": null,
+        "description": "Callback fired when the dropdown loses focus.",
+        "name": "onBlur",
+        "required": false,
+        "type": {
+          "name": "() => void"
+        }
+      },
+      "onClear": {
+        "defaultValue": null,
+        "description": "Callback fired when the clear button is clicked.",
+        "name": "onClear",
+        "required": false,
+        "type": {
+          "name": "() => void"
+        }
+      },
+      "onFocus": {
+        "defaultValue": null,
+        "description": "Callback fired when the dropdown gains focus.",
+        "name": "onFocus",
+        "required": false,
+        "type": {
+          "name": "(event: React.FocusEvent<HTMLDivElement>) => void"
+        }
+      },
+      "onInputChange": {
+        "defaultValue": null,
+        "description": "Callback fired when the dropdown input value changes.",
+        "name": "onInputChange",
+        "required": false,
+        "type": {
+          "name": "(input: string) => void"
+        }
+      },
+      "onKeyDown": {
+        "defaultValue": null,
+        "description": "Callback fired when a key is pressed inside the dropdown.",
+        "name": "onKeyDown",
+        "required": false,
+        "type": {
+          "name": "(event: React.KeyboardEvent<HTMLDivElement>) => void"
+        }
+      },
+      "onMenuOpen": {
+        "defaultValue": null,
+        "description": "Callback fired when the dropdown menu opens.",
+        "name": "onMenuOpen",
+        "required": false,
+        "type": {
+          "name": "() => void"
+        }
+      },
+      "onMenuClose": {
+        "defaultValue": null,
+        "description": "Callback fired when the dropdown menu closes.",
+        "name": "onMenuClose",
+        "required": false,
+        "type": {
+          "name": "() => void"
+        }
+      },
+      "onOptionSelect": {
+        "defaultValue": null,
+        "description": "Callback fired when an option is selected.",
+        "name": "onOptionSelect",
+        "required": false,
+        "type": {
+          "name": "(option: BaseListItemData<Item>) => void"
+        }
+      },
+      "onScroll": {
+        "defaultValue": null,
+        "description": "Callback fired when scrolling inside the dropdown.",
+        "name": "onScroll",
+        "required": false,
+        "type": {
+          "name": "(event: React.UIEvent<HTMLUListElement>) => void"
+        }
+      },
+      "filterOption": {
+        "defaultValue": null,
+        "description": "A function to customize the filtering of options.\nIt receives an option and the current input value, and should return true if the option should be included, false otherwise.",
+        "name": "filterOption",
+        "required": false,
+        "type": {
+          "name": "(option: Item, inputValue: string) => boolean"
+        }
+      },
+      "showSelectedOptions": {
+        "defaultValue": null,
+        "description": "If false, selected options will be hidden from the list. Defaults to true.",
+        "name": "showSelectedOptions",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "menuWrapperClassName": {
+        "defaultValue": null,
+        "description": "The class name to be applied to the menu wrapper.",
+        "name": "menuWrapperClassName",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "multi": {
+        "defaultValue": null,
+        "description": "If true, the dropdown allows multiple selections.\nIf true, the dropdown allows multiple selections. Defaults to false.",
+        "name": "multi",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "multiline": {
+        "defaultValue": null,
+        "description": "If true, the dropdown allows multiple lines of selected items. (Not available for single select)",
+        "name": "multiline",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "onOptionRemove": {
+        "defaultValue": null,
+        "description": "Callback fired when an option is removed in multi-select mode. Only available when multi is true.\nCallback fired when an option is removed in multi-select mode. (Not available for single select)",
+        "name": "onOptionRemove",
+        "required": false,
+        "type": {
+          "name": "(option: BaseListItemData<Item>) => void"
+        }
+      },
+      "valueRenderer": {
+        "defaultValue": null,
+        "description": "The function to call to render the selected value on single select mode.",
+        "name": "valueRenderer",
+        "required": false,
+        "type": {
+          "name": "(option: BaseListItemData<Item>) => React.ReactNode"
+        }
+      },
+      "defaultValue": {
+        "defaultValue": null,
+        "description": "The default selected values for multi-select.\nThe default selected value for single-select.",
+        "name": "defaultValue",
+        "required": false,
+        "type": {
+          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
+        }
+      },
+      "value": {
+        "defaultValue": null,
+        "description": "The controlled selected values for multi-select.\nThe controlled selected value for single-select.",
+        "name": "value",
+        "required": false,
+        "type": {
+          "name": "BaseListItemData<Record<string, unknown>> | Item[]"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "Callback fired when the selected values change in multi-select mode.\nCallback fired when the selected value changes in single-select mode.",
+        "name": "onChange",
+        "required": false,
+        "type": {
+          "name": "((options: BaseListItemData<Item>[]) => void) | ((option: BaseListItemData<Item>) => void)"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "required": false,
+        "type": {
+          "name": "React.ForwardedRef<HTMLDivElement>"
+        }
+      }
+    },
+    "import": "import { Dropdown } from \"@vibe/core/next\"",
+    "subComponents": []
   }
 ]

package/dist/mocked_classnames/components/BaseListItem/BaseListItem.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { BaseListItemProps } from "./BaseListItem.types";
 declare const _default: <Item extends Record<string, unknown>>(props: BaseListItemProps<Item> & {
-    ref?: React.Ref<HTMLLIElement>;
+    ref?: React.Ref<HTMLElement>;
 }) => React.ReactElement;
 export default _default;

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

@@ -3,7 +3,11 @@ import { SubIcon, VibeComponentProps } from "../../types";
 import { TooltipProps } from "../Tooltip";
 import { BaseListDirection, BaseListSizes } from "../BaseList/BaseList.types";
 import { ChipsProps } from "../Chips";
-export interface BaseListItemProps<Item extends Record<string, unknown>> extends React.LiHTMLAttributes<HTMLLIElement>, VibeComponentProps {
+export interface BaseListItemProps<Item extends Record<string, unknown>> extends Omit<React.HTMLAttributes<HTMLElement>, "role">, VibeComponentProps {
+    /**
+     * The HTML element to render. Defaults to "li".
+     */
+    component?: keyof JSX.IntrinsicElements;
     /**
      * The Size of the list item.
      */

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

@@ -26,6 +26,10 @@ interface MultiSelectSpecifics<Item extends BaseListItemData<Record<string, unkn
      * The controlled selected values for multi-select.
      */
     value?: Item[];
+    /**
+     * Callback fired when the selected values change in multi-select mode.
+     */
+    onChange?: (options: BaseListItemData<Item>[]) => void;
 }
 interface SingleSelectSpecifics<Item extends BaseListItemData<Record<string, unknown>>> {
     /**
@@ -52,6 +56,10 @@ interface SingleSelectSpecifics<Item extends BaseListItemData<Record<string, unk
      * The controlled selected value for single-select.
      */
     value?: Item;
+    /**
+     * Callback fired when the selected value changes in single-select mode.
+     */
+    onChange?: (option: BaseListItemData<Item>) => void;
 }
 export type BaseDropdownProps<Item extends BaseListItemData<Record<string, unknown>>> = VibeComponentProps & {
     /**
@@ -167,10 +175,6 @@ export type BaseDropdownProps<Item extends BaseListItemData<Record<string, unkno
      * Callback fired when the dropdown loses focus.
      */
     onBlur?: () => void;
-    /**
-     * Callback fired when the selected value changes.
-     */
-    onChange?: (option: BaseListItemData<Item> | BaseListItemData<Item>[]) => void;
     /**
      * Callback fired when the clear button is clicked.
      */
@@ -212,10 +216,17 @@ export type BaseDropdownProps<Item extends BaseListItemData<Record<string, unkno
      * If false, selected options will be hidden from the list. Defaults to true.
      */
     showSelectedOptions?: boolean;
+    /**
+     * The class name to be applied to the menu wrapper.
+     */
+    menuWrapperClassName?: string;
 } & (MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);
 export type DropdownSizes = "small" | "medium" | "large";
 export type DropdownDirection = "ltr" | "rtl" | "auto";
-export type DropdownControllerProps<Item extends BaseListItemData<Record<string, unknown>>> = BaseDropdownProps<Item> & {
+export type DropdownMultiControllerProps<Item extends BaseListItemData<Record<string, unknown>>> = Omit<BaseDropdownProps<Item>, keyof MultiSelectSpecifics<Item>> & MultiSelectSpecifics<Item> & {
+    dropdownRef: React.Ref<HTMLDivElement>;
+};
+export type DropdownSingleControllerProps<Item extends BaseListItemData<Record<string, unknown>>> = Omit<BaseDropdownProps<Item>, keyof SingleSelectSpecifics<Item>> & SingleSelectSpecifics<Item> & {
     dropdownRef: React.Ref<HTMLDivElement>;
 };
 export {};