@vibe/core 3.36.0-alpha-94da6.0 → 3.37.0-alpha-6e9f2.0

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

@@ -3,22 +3,34 @@ import React, { UIEventHandler, WheelEventHandler } from "react";
 import { VibeComponentProps } from "../../types";
 export type DropdownOption = any;
 export interface CustomSingleValueProps extends SingleValueProps<DropdownOption> {
+    /**
+     * The component used to render the selected value.
+     */
     Renderer: React.ComponentType;
+    /**
+     * If true, the dropdown is read-only and cannot be edited.
+     */
     readOnly: boolean;
+    /**
+     * The currently selected option.
+     */
     selectedOption: DropdownOption;
 }
 export interface CustomMenuBaseProps {
+    /**
+     * Class name applied to the dropdown menu wrapper.
+     */
     dropdownMenuWrapperClassName?: string;
     /**
-     * ID for the menu container
+     * The ID of the menu container.
      */
     menuId?: string;
     /**
-     * aria-label attribute for the menu container
+     * The ARIA label for the menu container.
      */
     menuAriaLabel?: string;
     /**
-     * aria-label attribute for the dropdown input
+     * The ARIA label for the dropdown input.
      */
     inputAriaLabel?: string;
 }
@@ -34,245 +46,272 @@ export type DropdownState = {
     };
 };
 export interface DropdownComponentProps extends CustomMenuBaseProps, CustomOptionBaseProps, VibeComponentProps {
-    /** ClassName to be added to dropdown single value wrapper (dropdown-wrapper__single-value--reset) */
+    /**
+     * Class name applied to the dropdown's single value wrapper.
+     */
     singleValueWrapperClassName?: string;
     /**
-     * Placeholder to show when no value was selected
+     * Placeholder text displayed when no value is selected.
      */
     placeholder?: string;
     /**
-     * When set to true, the component's placeholder will be displayed as ellipsis when it's too long
+     * If true, the placeholder will be truncated with an ellipsis when too long.
      */
     allowPlaceholderEllipsis?: boolean;
     /**
-     * If set to true, dropdown will be disabled
+     * If true, the dropdown is disabled.
      */
     disabled?: boolean;
     /**
-     * If set to true, dropdown won't be editable
+     * If true, the dropdown is read-only and cannot be edited.
      */
     readOnly?: boolean;
     /**
-     * Called when menu is opened
+     * Callback fired when the dropdown menu opens.
      */
     onMenuOpen?: () => void;
     /**
-     * Called when menu is closed
+     * Callback fired when the dropdown menu closes.
      */
     onMenuClose?: () => void;
     /**
-     * Called when key is pressed in the dropdown
+     * Callback fired when a key is pressed inside the dropdown.
      */
     onKeyDown?: KeyboardEventHandler;
     /**
-     * Called when focused
+     * Callback fired when the dropdown gains focus.
      */
     onFocus?: FocusEventHandler;
     /**
-     * Called when blurred
+     * Callback fired when the dropdown loses focus.
      */
     onBlur?: FocusEventHandler;
     /**
-     * Called when scrolling
+     * Callback fired when scrolling inside the dropdown.
      */
     onScroll?: UIEventHandler<HTMLDivElement>;
     /**
-     * Fired when the user scrolls to the bottom of the menu
+     * Callback fired when the user scrolls to the bottom of the menu.
      */
     onMenuScrollToBottom?: WheelEventHandler<HTMLDivElement>;
     /**
-     * When the user reaches the top/bottom of the menu, prevent scroll on the scroll-parent
+     * If true, prevents scrolling beyond the menu's boundaries.
      */
     captureMenuScroll?: boolean;
     /**
-     * Called when selected value has changed
+     * Callback fired when the selected value changes.
      */
     onChange?: (option: DropdownOption | DropdownOption[], meta: ActionMeta<DropdownOption> | React.MouseEvent | React.KeyboardEvent) => void;
     /**
-     * Called when the dropdown's input changes.
+     * Callback fired when the dropdown input value changes.
      */
     onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
     /**
-     * If true, search in options will be enabled
+     * If true, enables search functionality within the dropdown.
      */
     searchable?: boolean;
     /**
-     * The dropdown options
+     * The list of options available in the dropdown.
      */
     options?: DropdownOption[];
     /**
-     * Text to display when there are no options
+     * Function to customize the "no options found" message.
      */
     noOptionsMessage?: (obj: {
         inputValue: string;
     }) => string | null;
     /**
-     * If set to true, the menu will open when focused
+     * If true, the menu opens when the dropdown gains focus.
      */
     openMenuOnFocus?: boolean;
     /**
-     * If set to true, the menu will open when clicked
+     * If true, the menu opens when the dropdown is clicked.
      */
     openMenuOnClick?: boolean;
     /**
-     * If set to true, clear button will be added
+     * If true, displays a clear button inside the dropdown's input.
      */
     clearable?: boolean;
     /**
-     * custom option render function
+     * Custom renderer for each option.
      */
     optionRenderer?: (option: DropdownOption) => JSX.Element;
     /**
-     * custom value render function
+     * Custom renderer for the selected value.
      */
     valueRenderer?: React.ReactNode | ((props: Omit<CustomSingleValueProps, "Renderer"> & DropdownOption) => React.ReactNode);
+    /**
+     *   Custom renderer for the selected value.
+     */
     ValueRenderer?: React.ReactNode;
     /**
-     * custom menu render function
+     * Custom renderer for the dropdown menu.
      */
     menuRenderer?: React.ReactElement | ((props: CustomMenuProps) => React.ReactElement);
     /**
-     * Default placement of the Dropdown menu in relation to its control. Use "auto" to flip the menu when there isn't enough space below the control.
+     * The placement of the dropdown menu relative to the input.
      */
     menuPlacement?: DropdownMenuPlacement;
     /**
-     * The CSS position value of the menu, when "fixed" extra layout management might be required
-     * Fixed position can be used to solve the issue of positioning Dropdown inside overflow container like Modal or Dialog
+     * The CSS position property of the dropdown menu.
      */
     menuPosition?: DropdownMenuPosition;
     /**
-     * If set to true, the dropdown will be in Right to Left mode
+     * If true, the dropdown is displayed in right-to-left mode.
      */
     rtl?: boolean;
     /**
-     * Set default selected value
+     * The default selected value.
      */
     defaultValue?: DropdownOption[];
     /**
-     * The component's value.
-     * When passed, makes this a [controlled](https://reactjs.org/docs/forms.html#controlled-components) component.
+     * The controlled value of the dropdown.
      */
     value?: DropdownOption | DropdownOption[];
     /**
-     * Select menu size from `Dropdown.sizes` - Dropdown.sizes.LARGE | Dropdown.sizes.MEDIUM | Dropdown.sizes.SMALL
+     * The size of the dropdown.
      */
     size?: DropdownSize;
     /**
-     * If provided Dropdown will work in async mode. Can be either promise or callback
+     * Enables async loading of options.
      */
     asyncOptions?: (inputValue: string) => Promise<DropdownOption[]>;
     /**
-     * If set to true, fetched async options will be cached
+     * If true, caches async-loaded options.
      */
     cacheOptions?: boolean;
     /**
-     * If set, `asyncOptions` will be invoked with its value on mount and the resolved results will be loaded
+     * If true, `asyncOptions` is invoked on mount.
      */
     defaultOptions?: boolean | DropdownOption[];
     /**
-     * If set to true, the menu will use virtualization. Virtualized async works only with
+     * If true, enables virtualization for improved performance.
      */
     isVirtualized?: boolean;
     /**
-     * Whether the menu should use a portal, and where it should attach
+     * The target element for the dropdown menu portal.
      */
     menuPortalTarget?: HTMLElement;
     /**
-     * Custom function to override existing styles (similar to `react-select`'s `style` prop), for example: `base => ({...base, color: 'red'})`, where `base` is the component's default styles
+     * Custom styles for the dropdown.
      */
     extraStyles?: (...args: unknown[]) => unknown;
     /**
-     * Maximum height of the menu before scrolling
+     * The maximum height of the menu before scrolling.
      */
     maxMenuHeight?: number;
     /**
-     * Tab index for keyboard navigation purposes
+     * The tab index of the dropdown for keyboard navigation.
      */
     tabIndex?: number | string;
     /**
-     * focusAuto when component mount
+     * If true, the dropdown input is automatically focused on mount.
      */
     autoFocus?: boolean;
     /**
-     * If set to true, the dropdown will be in multi-select mode.
+     * 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 set to true together with `multi`, it will make the dropdown expand to multiple lines when new values are selected.
+     * If true, expands the dropdown to multiple lines when multiple values are selected.
      */
     multiline?: boolean;
     /**
-     Pass closeMenuOnSelect to close the multi choose any time an options is chosen.
+     * If true, closes the menu when an option is selected.
      */
     closeMenuOnSelect?: boolean;
     /**
-     * If menu should be closed on scroll - helpful for some tricky use cases
-     * @default false, but true when insideOverflowContainer or insideOverflowWithTransformContainer are true
+     * If true, closes the menu when scrolling.
      */
     closeMenuOnScroll?: boolean;
     /**
-     * callback to be called when `multiline` is `true` and the option is removed
+     * Callback fired when an option is removed in multi-select mode.
      */
     onOptionRemove?: (option?: DropdownOption) => void;
     /**
-     The options set by default will be set as mandatory and the user will not be able to cancel their selection
+     * If true, prevents mandatory default options from being removed.
      */
     withMandatoryDefaultOptions?: boolean;
     /**
-     * Override the built-in logic to detect whether an option is selected.
+     * Custom function to determine if an option is selected.
      */
     isOptionSelected?: (option: DropdownOption, options: DropdownOption[]) => boolean;
     /**
-     * Allows the dropdown menu to overflow its container.
+     * If true, allows the dropdown menu to overflow its container.
      */
     insideOverflowContainer?: boolean;
     /**
-     * Allows the dropdown menu to overflow its container, including CSS transformations.
+     * If true, allows the dropdown menu to overflow its container even with CSS transforms.
      */
     insideOverflowWithTransformContainer?: boolean;
     /**
-     * When content is passed, the dropdown will include a tooltip on the dropdown's value.
+     * 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.
      */
     tooltipContent?: string;
     /**
-     * Display the drop down with loading state.
+     * If true, displays a loading state inside the dropdown.
      */
     isLoading?: boolean;
     /**
-     * Overrides the built-in logic of loading message design
+     * Function to override the default loading message.
      */
     loadingMessage?: (obj: {
         inputValue: string;
     }) => string | null;
     /**
-     * aria-label attribute for dropdown
+     * The ARIA label for the dropdown.
      */
     ariaLabel?: string;
     /**
-     * Overrides the built-in logic of tab selecting value (default: true)
+     * If true, enables selecting values with the Tab key.
      */
     tabSelectsValue?: boolean;
     /**
-     * Overrides the build-in search filter logic - https://react-select.com/advanced#custom-filter-logic
-     * createFilter function is available at Dropdown.createFilter
+     * Custom function to filter options based on input.
      */
     filterOption?: (option: DropdownOption, inputValue: string) => boolean;
     /**
-     * The current value of the input field, used to control the current value of the input field programmatically
+     * The current value of the input field.
      */
     inputValue?: string;
     /**
-     * If true, the input field will lose focus when an option is selected
+     * If true, the input field loses focus when an option is selected.
      */
     blurInputOnSelect?: boolean;
+    /**
+     * Custom renderer for dropdown options.
+     */
     OptionRenderer?: React.ReactNode;
+    /**
+     * If true, controls the menu open state.
+     */
     menuIsOpen?: boolean;
+    /**
+     * Callback fired when an option is selected.
+     */
     onOptionSelect?: (option: DropdownOption) => void;
+    /**
+     * Callback fired when the clear button is clicked.
+     */
     onClear?: () => void;
+    /**
+     * CSS selector for the container where popups are rendered.
+     */
     popupsContainerSelector?: string;
+    /**
+     * Additional properties passed to the `react-select` component.
+     */
     selectProps?: Record<string, string>;
+    /**
+     * If true, displays dividers between grouped options.
+     */
     withGroupDivider?: boolean;
 }
 export type DropdownProps = DropdownComponentProps;

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

@@ -5,10 +5,11 @@ import { HeadingType, HeadingWeight } from "../Heading/Heading.types";
 import { EditableTypographyImplementationProps } from "../EditableTypography/EditableTypography";
 export interface EditableHeadingProps extends VibeComponentProps, EditableTypographyImplementationProps {
     /**
-     * Sets the Heading type
-     * */
+     * The type of the heading element.
+     */
     type?: HeadingType;
-    /** Sets the Heading weight
+    /**
+     * The font weight of the heading.
      */
     weight?: HeadingWeight;
 }

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

@@ -5,13 +5,15 @@ import { TextType as TextTypeEnum, TextWeight as TextWeightEnum } from "../Text/
 import { TextType, TextWeight } from "../Text/Text.types";
 export interface EditableTextProps extends VibeComponentProps, EditableTypographyImplementationProps {
     /**
-     * Sets the Text type
-     * */
+     * The text style variant.
+     */
     type?: TextType;
-    /** Sets the Text weight
+    /**
+     * The font weight of the text.
      */
     weight?: TextWeight;
-    /** Enables editing multiple lines of text
+    /**
+     * If true, enables editing multiple lines of text.
      */
     multiline?: boolean;
 }

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

@@ -5,39 +5,71 @@ import { TooltipProps } from "../Tooltip/Tooltip";
 import { TextType, TextWeight } from "../Text/Text.types";
 import { HeadingType, HeadingWeight } from "../Heading/Heading.types";
 export interface EditableTypographyImplementationProps {
-    /** Value of the text */
+    /**
+     * The current value of the text.
+     */
     value: string;
-    /** Will be called whenever the current value changes to a non-empty value */
+    /**
+     * Callback fired when the value changes.
+     */
     onChange?: (value: string) => void;
-    /** Will be called whenever the component gets clicked */
+    /**
+     * Callback fired when the component is clicked.
+     */
     onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
-    /** Disables editing mode - component will be just a typography element */
+    /**
+     * If true, the text is read-only and cannot be edited.
+     */
     readOnly?: boolean;
-    /** Shown in edit mode when the text value is empty */
+    /**
+     * Placeholder text displayed when the value is empty.
+     */
     placeholder?: string;
-    /** ARIA Label */
+    /**
+     * The label of the component for accessibility.
+     */
     ariaLabel?: string;
-    /** Controls the mode of the component (i.e. view/edit mode) */
+    /**
+     * Controls whether the component is in edit mode.
+     */
     isEditMode?: boolean;
-    /** If true, automatically select all text when entering edit mode */
+    /**
+     * If true, automatically selects all text when entering edit mode.
+     */
     autoSelectTextOnEditMode?: boolean;
-    /** Will be called when the mode of the component changes */
+    /**
+     * Callback fired when the edit mode changes.
+     */
     onEditModeChange?: (isEditMode: boolean) => void;
-    /** Override Tooltip props when needed */
+    /**
+     * Props to customize the tooltip.
+     */
     tooltipProps?: Partial<TooltipProps>;
 }
 export interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {
-    /** A typography component that is being rendered in view mode */
+    /**
+     * The typography component used in view mode.
+     */
     component: ElementType;
-    /** Controls the style of the typography component in view mode */
+    /**
+     * Class name applied to the typography component.
+     */
     typographyClassName: string;
-    /** Shows placeholder when empty, if provided */
+    /**
+     * If true, shows the placeholder when empty.
+     */
     clearable?: boolean;
-    /** Sets the Text/Heading type */
+    /**
+     * The text or heading type.
+     */
     type?: TextType | HeadingType;
-    /** Sets the Text/Heading weight */
+    /**
+     * The text or heading weight.
+     */
     weight?: TextWeight | HeadingWeight;
-    /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */
+    /**
+     * If true, enables multi-line editing.
+     */
     multiline?: boolean;
 }
 declare const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement>;

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

@@ -2,40 +2,52 @@ import React, { FC, ReactElement } from "react";
 import { VibeComponentProps, ElementContent } from "../../types";
 export interface ExpandCollapseProps extends VibeComponentProps {
     /**
-     * Component as parameter to be rendered as header
+     * Custom renderer for the header component.
      */
     headerComponentRenderer?: () => ReactElement;
     /**
-     * Class name to add to the header of the expandable
+     * Class name applied to the header.
      */
     headerClassName?: string;
     /**
-     * Class name to add to the content of the expandable
+     * Class name applied to the content.
      */
     contentClassName?: string;
     /**
-     * Class name to add to the component
+     * Class name applied to the root component.
      */
     componentClassName?: string;
     /**
-     * Header title
+     * The title displayed in the header.
      */
     title?: ElementContent;
     /**
-     * The value of the expandable section
+     * The content inside the expandable section.
      */
     children?: ElementContent;
     /**
-     * The expand icon font size
+     * The size of the expand/collapse icon.
      */
     iconSize?: number | string;
     /**
-     * Should be open or closed by default (when rendered)
+     * If true, the section is open by default when rendered.
      */
     defaultOpenState?: boolean;
+    /**
+     * Controls the open state of the section.
+     */
     open?: boolean;
+    /**
+     * Callback fired when the header is clicked.
+     */
     onClick?: (event: React.MouseEvent) => void;
+    /**
+     * If true, hides the border around the component.
+     */
     hideBorder?: boolean;
+    /**
+     * If true, captures the click event on the button.
+     */
     captureOnClick?: boolean;
 }
 declare const ExpandCollapse: FC<ExpandCollapseProps>;

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

@@ -1,11 +1,29 @@
 import React, { FC } from "react";
 import VibeComponentProps from "../../types/VibeComponentProps";
 export interface FieldLabelProps extends VibeComponentProps {
+    /**
+     * The icon displayed next to the label.
+     */
     icon?: string | React.FunctionComponent | null;
+    /**
+     * The text content of the label.
+     */
     labelText?: string;
+    /**
+     * The ID of the associated input element.
+     */
     labelFor?: string;
+    /**
+     * Class name applied to the icon.
+     */
     iconClassName?: string;
+    /**
+     * Class name applied to the label text.
+     */
     labelClassName?: string;
+    /**
+     * If true, displays an asterisk to indicate a required field.
+     */
     required?: boolean;
 }
 declare const FieldLabel: FC<FieldLabelProps>;

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

@@ -3,19 +3,53 @@ import { FlexAlign as FlexAlignEnum, FlexDirection as FlexDirectionEnum, FlexGap
 import { FlexDirection, FlexJustify, FlexAlign, FlexGap } from "./Flex.types";
 import { ElementContent, VibeComponent, VibeComponentProps } from "../../types";
 export interface FlexProps extends VibeComponentProps {
+    /**
+     * Inline styles applied to the flex container.
+     */
     style?: object;
+    /**
+     * The direction of the flex container.
+     */
     direction?: FlexDirection;
+    /**
+     * The HTML element or component used as the root.
+     */
     elementType?: React.ElementType;
+    /**
+     * If true, allows wrapping of flex items.
+     */
     wrap?: boolean;
+    /**
+     * The content inside the flex container.
+     */
     children?: ElementContent | ElementContent[];
+    /**
+     * Defines how flex items are aligned along the main axis.
+     */
     justify?: FlexJustify;
+    /**
+     * Defines how flex items are aligned along the cross axis.
+     */
     align?: FlexAlign;
+    /**
+     * The gap between flex items.
+     */
     gap?: FlexGap | number;
+    /**
+     * The label of the flex container for accessibility.
+     */
     ariaLabel?: string;
+    /**
+     * The tab order of the element.
+     */
     tabIndex?: number;
-    /** onClick function - MouseEvent */
+    /**
+     * Callback fired when the flex container is clicked.
+     */
     onClick?: (event: React.MouseEvent) => void;
-    /** element id to describe the counter accordingly */
+    /**
+     * ID of the element describing the flex container.
+     */
     ariaLabelledby?: string;
 }
 declare const _default: ((VibeComponent<FlexProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{