@vibe/core 3.87.0 → 4.0.0-alpha.1

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

@@ -1,323 +1,268 @@
-import { type ActionMeta, type FocusEventHandler, type InputActionMeta, type KeyboardEventHandler, type MenuProps, type OptionProps, type OptionTypeBase, type SingleValueProps } from "react-select";
-import { type UIEventHandler, type WheelEventHandler } from "react";
 import type React from "react";
+import { type DropdownListGroup } from "./components/DropdownBaseList/DropdownBaseList.types";
 import { type VibeComponentProps } from "../../types";
-export type DropdownOption = any;
-export interface CustomSingleValueProps extends SingleValueProps<DropdownOption> {
+import { type BaseItemData } from "../BaseItem";
+import { type TooltipProps } from "@vibe/tooltip";
+export type DropdownOption<Item = Record<string, unknown>> = BaseItemData<Item>;
+export type DropdownGroupOption<Item = Record<string, unknown>> = DropdownListGroup<Item>[] | BaseItemData<Item>[];
+interface MultiSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {
     /**
-     * The component used to render the selected value.
+     * If true, the dropdown allows multiple selections.
      */
-    Renderer: React.ComponentType;
+    multi: true;
+    multiline?: boolean;
     /**
-     * If true, the dropdown is read-only and cannot be edited.
+     * Callback fired when an option is removed in multi-select mode. Only available when multi is true.
      */
-    readOnly: boolean;
+    onOptionRemove?: (option: Item) => void;
     /**
-     * The currently selected option.
+     * The function to call to render the selected value on single select mode.
      */
-    selectedOption: DropdownOption;
-}
-export interface CustomMenuBaseProps {
+    valueRenderer?: never;
     /**
-     * Class name applied to the dropdown menu wrapper.
+     * The default selected values for multi-select.
      */
-    dropdownMenuWrapperClassName?: string;
+    defaultValue?: Item[];
     /**
-     * The ID of the menu container.
+     * The controlled selected values for multi-select.
      */
-    menuId?: string;
+    value?: Item[];
     /**
-     * The ARIA label for the menu container.
+     * Callback fired when the selected values change in multi-select mode.
      */
-    menuAriaLabel?: string;
+    onChange?: (options: Item[]) => void;
     /**
-     * The ARIA label for the dropdown input.
+     * Minimum number of selected chips to always show before overflowing to the counter.
      */
-    inputAriaLabel?: string;
+    minVisibleCount?: number;
 }
-export type CustomMenuProps = CustomMenuBaseProps & MenuProps<OptionTypeBase, boolean>;
-export interface CustomOptionBaseProps {
-    optionWrapperClassName?: string;
-}
-export type CustomOptionProps = CustomOptionBaseProps & OptionProps<OptionTypeBase, boolean>;
-export type DropdownState = {
-    isDisabled: boolean;
-    selectProps: {
-        readOnly: boolean;
-    };
-};
-export interface DropdownComponentProps extends CustomMenuBaseProps, CustomOptionBaseProps, VibeComponentProps {
-    /**
-     * Class name applied to the dropdown's single value wrapper.
-     */
-    singleValueWrapperClassName?: string;
-    /**
-     * Placeholder text displayed when no value is selected.
-     */
-    placeholder?: string;
+interface SingleSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {
     /**
-     * If true, the placeholder will be truncated with an ellipsis when too long.
+     * If true, the dropdown allows multiple selections. Defaults to false.
      */
-    allowPlaceholderEllipsis?: boolean;
+    multi?: false;
     /**
-     * If true, the dropdown is disabled.
+     * If true, the dropdown allows multiple lines of selected items. (Not available for single select)
      */
-    disabled?: boolean;
+    multiline?: never;
     /**
-     * If true, the dropdown is read-only and cannot be edited.
+     * Callback fired when an option is removed in multi-select mode. (Not available for single select)
      */
-    readOnly?: boolean;
+    onOptionRemove?: never;
     /**
-     * Callback fired when the dropdown menu opens.
+     * The function to call to render the selected value on single select mode.
      */
-    onMenuOpen?: () => void;
+    valueRenderer?: (option: Item) => React.ReactNode;
     /**
-     * Callback fired when the dropdown menu closes.
+     * The default selected value for single-select.
      */
-    onMenuClose?: () => void;
+    defaultValue?: Item;
     /**
-     * Callback fired when a key is pressed inside the dropdown.
+     * The controlled selected value for single-select.
      */
-    onKeyDown?: KeyboardEventHandler;
+    value?: Item;
     /**
-     * Callback fired when the dropdown gains focus.
+     * Callback fired when the selected value changes in single-select mode.
      */
-    onFocus?: FocusEventHandler;
+    onChange?: (option: Item) => void;
     /**
-     * Callback fired when the dropdown loses focus.
+     * Minimum number of selected chips to always show before overflowing to the counter. (Not available for single select)
      */
-    onBlur?: FocusEventHandler;
-    /**
-     * Callback fired when scrolling inside the dropdown.
-     */
-    onScroll?: UIEventHandler<HTMLDivElement>;
+    minVisibleCount?: never;
+}
+type BoxModeConstraint = {
     /**
-     * Callback fired when the user scrolls to the bottom of the menu.
+     * If true, the dropdown is searchable.
      */
-    onMenuScrollToBottom?: WheelEventHandler<HTMLDivElement>;
+    searchable?: false;
     /**
-     * If true, prevents scrolling beyond the menu's boundaries.
+     * If true, the dropdown menu is displayed inline without a popup/dialog.
      */
-    captureMenuScroll?: boolean;
+    boxMode?: false;
+} | {
     /**
-     * Callback fired when the selected value changes.
+     * If true, the dropdown is searchable.
      */
-    onChange?: (option: DropdownOption | DropdownOption[], meta: ActionMeta<DropdownOption> | React.MouseEvent | React.KeyboardEvent) => void;
+    searchable: true;
     /**
-     * Callback fired when the dropdown input value changes.
+     * If true, the dropdown menu is displayed inline without a popup/dialog.
      */
-    onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
+    boxMode?: boolean;
+};
+export type BaseDropdownProps<Item extends BaseItemData<Record<string, unknown>>> = VibeComponentProps & BoxModeConstraint & {
     /**
-     * If true, enables search functionality within the dropdown.
+     * The list of options available in the list.
      */
-    searchable?: boolean;
+    options: DropdownGroupOption<Item>;
     /**
-     * The list of options available in the dropdown.
+     * Props to be passed to the Tooltip component that wraps the dropdown.
      */
-    options?: DropdownOption[];
+    tooltipProps?: Partial<TooltipProps>;
     /**
-     * Function to customize the "no options found" message.
+     * If true, displays dividers between grouped options.
      */
-    noOptionsMessage?: (obj: {
-        inputValue: string;
-    }) => string | null;
+    withGroupDivider?: boolean;
     /**
-     * If true, the menu opens when the dropdown gains focus.
+     * If true, makes the group title sticky.
      */
-    openMenuOnFocus?: boolean;
+    stickyGroupTitle?: boolean;
     /**
-     * If true, the menu opens when the dropdown is clicked.
+     * The size of the dropdown.
      */
-    openMenuOnClick?: boolean;
+    size?: DropdownSizes;
     /**
-     * If true, displays a clear button inside the dropdown's input.
+     * The direction of the dropdown.
      */
-    clearable?: boolean;
+    dir?: DropdownDirection;
     /**
-     * Custom renderer for each option.
+     * If true, the dropdown has no visible border by default, but shows border on hover, focus, and active states.
      */
-    optionRenderer?: (option: DropdownOption) => JSX.Element;
+    borderless?: boolean;
     /**
-     * Custom renderer for the selected value.
+     * The function to call to render an option.
      */
-    valueRenderer?: React.ReactNode | ((props: Omit<CustomSingleValueProps, "Renderer"> & DropdownOption) => React.ReactNode);
+    optionRenderer?: (option: Item) => React.ReactNode;
     /**
-     *   Custom renderer for the selected value.
+     * The function to call to render the menu.
      */
-    ValueRenderer?: React.ReactNode;
+    menuRenderer?: (props: {
+        children: React.ReactNode;
+        filteredOptions: DropdownListGroup<Item>[];
+        selectedItems: Item[];
+        getItemProps: (options: any) => Record<string, unknown>;
+    }) => React.ReactNode;
     /**
-     * Custom renderer for the dropdown menu.
+     * The message to display when there are no options.
      */
-    menuRenderer?: React.ReactElement | ((props: CustomMenuProps) => React.ReactElement);
+    noOptionsMessage?: string | React.ReactNode;
     /**
-     * The placement of the dropdown menu relative to the input.
+     * The placeholder to display when the dropdown is empty.
      */
-    menuPlacement?: DropdownMenuPlacement;
+    placeholder?: string;
     /**
-     * The CSS position property of the dropdown menu.
+     * If true, the dropdown is disabled.
      */
-    menuPosition?: DropdownMenuPosition;
+    disabled?: boolean;
     /**
-     * If true, the dropdown is displayed in right-to-left mode.
+     * If true, the dropdown is read only.
      */
-    rtl?: boolean;
+    readOnly?: boolean;
     /**
-     * The default selected value.
+     * If true, the dropdown is in an error state.
      */
-    defaultValue?: DropdownOption[];
+    error?: boolean;
     /**
-     * The controlled value of the dropdown.
+     * The helper text to display below the dropdown.
      */
-    value?: DropdownOption | DropdownOption[];
+    helperText?: string;
     /**
-     * The size of the dropdown.
+     * If true, the dropdown is required.
      */
-    size?: DropdownSize;
+    required?: boolean;
     /**
-     * Enables async loading of options.
+     * The label to display above the dropdown.
      */
-    asyncOptions?: (inputValue: string) => Promise<DropdownOption[]>;
+    label?: string;
     /**
-     * If true, caches async-loaded options.
+     * The ARIA label for the dropdown.
      */
-    cacheOptions?: boolean;
+    "aria-label"?: string;
     /**
-     * If true, `asyncOptions` is invoked on mount.
+     * The ARIA label for the dropdown input.
      */
-    defaultOptions?: boolean | DropdownOption[];
+    inputAriaLabel?: string;
     /**
-     * If true, enables virtualization for improved performance.
+     * The ARIA label for the menu container.
      */
-    isVirtualized?: boolean;
+    menuAriaLabel?: string;
     /**
-     * The target element for the dropdown menu portal.
+     * The ARIA label for the clear button.
      */
-    menuPortalTarget?: HTMLElement;
+    clearAriaLabel?: string;
     /**
-     * Custom styles for the dropdown.
+     * The current value of the input field.
      */
-    extraStyles?: (...args: unknown[]) => unknown;
+    inputValue?: string;
     /**
-     * The maximum height of the menu before scrolling.
+     * The maximum height of the dropdown menu.
      */
     maxMenuHeight?: number;
     /**
-     * The tab index of the dropdown for keyboard navigation.
-     */
-    tabIndex?: number | string;
-    /**
-     * If true, the dropdown input is automatically focused on mount.
-     */
-    autoFocus?: boolean;
-    /**
-     * If true, enables multi-select mode.
-     * When in multi-select mode, the selected value will be an array,
-     * and it will be displayed as our [`<Chips>`](/?path=/docs/components-chips--sandbox) component.
-     */
-    multi?: boolean;
-    /**
-     * If true, expands the dropdown to multiple lines when multiple values are selected.
+     * If true, controls the menu open state.
      */
-    multiline?: boolean;
+    isMenuOpen?: boolean;
     /**
      * If true, closes the menu when an option is selected.
      */
     closeMenuOnSelect?: boolean;
     /**
-     * If true, closes the menu when scrolling.
-     */
-    closeMenuOnScroll?: boolean;
-    /**
-     * Callback fired when an option is removed in multi-select mode.
-     */
-    onOptionRemove?: (option?: DropdownOption) => void;
-    /**
-     * If true, prevents mandatory default options from being removed.
-     */
-    withMandatoryDefaultOptions?: boolean;
-    /**
-     * Custom function to determine if an option is selected.
-     */
-    isOptionSelected?: (option: DropdownOption, options: DropdownOption[]) => boolean;
-    /**
-     * If true, allows the dropdown menu to overflow its container.
-     */
-    insideOverflowContainer?: boolean;
-    /**
-     * If true, allows the dropdown menu to overflow its container even with CSS transforms.
-     */
-    insideOverflowWithTransformContainer?: boolean;
-    /**
-     * If true, renders the dropdown menu inside its parent container in case it's inside a layer provider.
-     * Use this prop when the dropdown menu is being cut off by its parent's (such as Modal, Dialog, Tooltip, etc.)overflow settings.
-     */
-    insideLayerContext?: boolean;
-    /**
-     * Tooltip content displayed when hovering over the selected value.
+     * If true, the dropdown menu will be auto focused.
      */
-    tooltipContent?: string;
+    autoFocus?: boolean;
     /**
-     * If true, displays a loading state inside the dropdown.
+     * If true, the dropdown will have a clear button.
      */
-    isLoading?: boolean;
+    clearable?: boolean;
     /**
-     * Function to override the default loading message.
+     * Callback fired when the dropdown loses focus.
      */
-    loadingMessage?: (obj: {
-        inputValue: string;
-    }) => string | null;
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
     /**
-     * The ARIA label for the dropdown.
+     * Callback fired when the clear button is clicked.
      */
-    ariaLabel?: string;
+    onClear?: () => void;
     /**
-     * If true, enables selecting values with the Tab key.
+     * Callback fired when the dropdown gains focus.
      */
-    tabSelectsValue?: boolean;
+    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
     /**
-     * Custom function to filter options based on input.
+     * Callback fired when the dropdown input value changes.
      */
-    filterOption?: (option: DropdownOption, inputValue: string) => boolean;
+    onInputChange?: (input: string | null) => void;
     /**
-     * The current value of the input field.
+     * Callback fired when a key is pressed inside the dropdown.
      */
-    inputValue?: string;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     /**
-     * If true, the input field loses focus when an option is selected.
+     * Callback fired when the dropdown menu opens.
      */
-    blurInputOnSelect?: boolean;
+    onMenuOpen?: () => void;
     /**
-     * Custom renderer for dropdown options.
+     * Callback fired when the dropdown menu closes.
      */
-    OptionRenderer?: React.ReactNode;
+    onMenuClose?: () => void;
     /**
-     * If true, controls the menu open state.
+     * Callback fired when an option is selected.
      */
-    menuIsOpen?: boolean;
+    onOptionSelect?: (option: Item) => void;
     /**
-     * Callback fired when an option is selected.
+     * Callback fired when scrolling inside the dropdown.
      */
-    onOptionSelect?: (option: DropdownOption) => void;
+    onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
     /**
-     * Callback fired when the clear button is clicked.
+     * A function to customize the filtering of options.
+     * It receives an option and the current input value, and should return true if the option should be included, false otherwise.
      */
-    onClear?: () => void;
+    filterOption?: (option: Item, inputValue: string) => boolean;
     /**
-     * CSS selector for the container where popups are rendered.
+     * If false, selected options will be hidden from the list. Defaults to true.
      */
-    popupsContainerSelector?: string;
+    showSelectedOptions?: boolean;
     /**
-     * Additional properties passed to the `react-select` component.
+     * The class name to be applied to the menu wrapper.
      */
-    selectProps?: Record<string, string>;
+    menuWrapperClassName?: string;
     /**
-     * If true, displays dividers between grouped options.
+     * If true, displays a loading indicator in the dropdown controls.
      */
-    withGroupDivider?: boolean;
-    multiValueDialogClassName?: string;
-}
-export type DropdownProps = DropdownComponentProps;
-export type DropdownChipColors = "primary" | "negative" | "positive";
-export type DropdownMenuPosition = "absolute" | "fixed";
-export type DropdownMenuPlacement = "top" | "bottom" | "auto";
-export type DropdownSize = "small" | "medium" | "large";
+    loading?: boolean;
+} & (MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);
+export type DropdownSizes = "small" | "medium" | "large";
+export type DropdownDirection = "ltr" | "rtl" | "auto";
+export type DropdownMultiControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<BaseDropdownProps<Item>, keyof MultiSelectSpecifics<Item> | keyof BoxModeConstraint> & BoxModeConstraint & MultiSelectSpecifics<Item> & {
+    dropdownRef: React.Ref<HTMLDivElement>;
+};
+export type DropdownSingleControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<BaseDropdownProps<Item>, keyof SingleSelectSpecifics<Item> | keyof BoxModeConstraint> & BoxModeConstraint & SingleSelectSpecifics<Item> & {
+    dropdownRef: React.Ref<HTMLDivElement>;
+};
+export {};

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

@@ -0,0 +1,86 @@
+import { type ReactNode } from "react";
+import type React from "react";
+import { type VibeComponentProps } from "../../../../types";
+import { type BaseItemData, type BaseItemSizes, type BaseItemDirection } from "../../../BaseItem";
+export interface DropdownBaseListProps<Item = Record<string, unknown>> extends React.HTMLAttributes<HTMLUListElement>, VibeComponentProps {
+    /**
+     * The list of options available in the list.
+     */
+    options: DropdownListGroup<Item>[];
+    /**
+     * The selected item in the list.
+     */
+    selectedItems?: BaseItemData<Item>[] | null;
+    /**
+     * The index of the highlighted item in the list.
+     */
+    highlightedIndex?: number;
+    /**
+     * The ARIA label for the menu.
+     */
+    menuAriaLabel?: string;
+    /**
+     * Function to get props for the menu container.
+     */
+    getMenuProps?: ((options?: any, otherOptions?: any) => Record<string, unknown>) | null;
+    /**
+     * Function to get props for each item in the list.
+     */
+    getItemProps?: ((options: any) => Record<string, unknown>) | null;
+    /**
+     * The size of the list item.
+     */
+    size?: BaseItemSizes;
+    /**
+     * If true, displays dividers between grouped options.
+     */
+    withGroupDivider?: boolean;
+    /**
+     * If true, makes the group title sticky.
+     */
+    stickyGroupTitle?: boolean;
+    /**
+     * The text direction of the list.
+     */
+    dir?: BaseItemDirection;
+    /**
+     * Custom renderer for options.
+     */
+    itemRenderer?: (item: BaseItemData<Item>) => React.ReactNode;
+    /**
+     * Custom renderer for the entire menu content inside the ul element.
+     */
+    menuRenderer?: (props: {
+        children: React.ReactNode;
+        filteredOptions: DropdownListGroup<Item>[];
+        selectedItem?: Item | null;
+        selectedItems?: Item[];
+    }) => React.ReactNode;
+    /**
+     * Text or function to customize the "No results" message.
+     */
+    noOptionsMessage?: string | ReactNode;
+    /**
+     * If true, the options are rendered.
+     */
+    renderOptions?: boolean;
+    /**
+     * Function to handle scroll events.
+     */
+    onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
+    /**
+     * The maximum height of the list.
+     */
+    maxMenuHeight?: number;
+}
+export interface DropdownListGroup<Item = Record<string, unknown>> {
+    /**
+     * The label for the group of options.
+     */
+    label?: string;
+    /**
+     * The list of options within this group.
+     */
+    options: BaseItemData<Item>[];
+}
+export type { BaseItemSizes, BaseItemDirection };

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { type DropdownContextProps } from "../context/DropdownContext.types";
+import { type BaseItemData } from "../../BaseItem";
+interface DropdownWrapperUIProps<Item extends BaseItemData<Record<string, unknown>>> {
+    contextValue: DropdownContextProps<Item>;
+    dropdownRef: React.Ref<HTMLDivElement>;
+}
+declare const DropdownWrapperUI: <Item extends BaseItemData<Record<string, unknown>>>(props: DropdownWrapperUIProps<Item>) => React.JSX.Element;
+export default DropdownWrapperUI;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { type BaseItemData } from "../../../BaseItem";
+declare const Menu: <Item extends BaseItemData<Record<string, unknown>>>() => React.JSX.Element;
+export default Menu;

package/dist/mocked_classnames/components/Dropdown/components/Menu/MenuList.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type BaseItemData } from "../../../BaseItem";
+declare const MenuList: <Item extends BaseItemData<Record<string, unknown>>>() => React.JSX.Element;
+export default MenuList;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { type BaseItemData } from "../../../BaseItem";
+type MultiSelectedValuesProps<Item> = {
+    selectedItems: Item[];
+    onRemove: (item: Item) => void;
+    renderInput?: () => React.ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+    minVisibleCount?: number;
+};
+declare function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({ selectedItems, onRemove, renderInput, disabled, readOnly, minVisibleCount }: MultiSelectedValuesProps<Item>): React.JSX.Element;
+export default MultiSelectedValues;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { type BaseItemData } from "../../../BaseItem";
+interface DropdownChipProps<Item extends BaseItemData<Record<string, unknown>>> {
+    item: Item;
+    onDelete: () => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+}
+declare const DropdownChip: <Item extends BaseItemData<Record<string, unknown>>>({ item, onDelete, disabled, readOnly, className }: DropdownChipProps<Item>) => React.JSX.Element;
+export default DropdownChip;