@vibe/core 3.58.2-alpha-faacc.0 → 3.58.3

package/dist/components/Combobox/components/ComboboxItems/ComboboxItems.d.ts

@@ -0,0 +1,65 @@
+import React from "react";
+import { type IComboboxCategoryMap, type IComboboxItem, type IComboboxOption, type IComboboxOptionEvents } from "../ComboboxConstants";
+export interface ComboboxItemsProps extends IComboboxOptionEvents {
+    /**
+     * Class name applied to the options container.
+     */
+    className?: string;
+    /**
+     * Class name applied to individual options.
+     */
+    optionClassName?: string;
+    /**
+     * The categories available in the combobox.
+     */
+    categories?: IComboboxCategoryMap;
+    /**
+     * The list of options displayed in the combobox.
+     */
+    options?: IComboboxItem[];
+    /**
+     * Custom renderer for an option.
+     */
+    optionRenderer?: (option: IComboboxOption) => JSX.Element;
+    /**
+     * The index of the currently active item.
+     */
+    activeItemIndex?: number;
+    /**
+     * The index of the item with visual focus.
+     */
+    visualFocusItemIndex?: number;
+    /**
+     * The height of each option item.
+     */
+    optionLineHeight?: number;
+    /**
+     * If true, the list scrolls to the selected item when opened.
+     */
+    shouldScrollToSelectedItem?: boolean;
+    /**
+     * If true, only renders visible options (optimization for large lists).
+     */
+    renderOnlyVisibleOptions?: boolean;
+    /**
+     * Callback fired when the active category changes.
+     */
+    onActiveCategoryChanged?: (category: IComboboxItem) => void;
+    /**
+     * The maximum number of options displayed without scrolling.
+     */
+    maxOptionsWithoutScroll?: number;
+    /**
+     * A map of item IDs to item data.
+     */
+    itemsMap?: Map<string, IComboboxItem>;
+    /**
+     * If true, categories remain visible when scrolling.
+     */
+    stickyCategories?: boolean;
+    /**
+     * The ID of the options container.
+     */
+    id?: string;
+}
+export declare const ComboboxItems: React.FC<ComboboxItemsProps>;

package/dist/components/Combobox/components/ComboboxOption/ComboboxOption.d.ts

@@ -0,0 +1,48 @@
+import React, { type RefObject } from "react";
+import { ComboboxOptionIconType as ComboboxOptionIconTypeEnum, type IComboboxOption, type IComboboxOptionEvents } from "../ComboboxConstants";
+export interface ComboboxOptionProps extends IComboboxOptionEvents {
+    /**
+     * The index of the option in the list.
+     */
+    index?: number;
+    /**
+     * The option data containing label, icons, and other properties.
+     */
+    option?: IComboboxOption;
+    /**
+     * Class name applied to the option element.
+     */
+    className?: string;
+    /**
+     * If true, the option is currently active.
+     */
+    isActive?: boolean;
+    /**
+     * If true, the option has visual focus.
+     */
+    visualFocus?: boolean;
+    /**
+     * A reference to the scroll container.
+     */
+    scrollRef?: RefObject<HTMLElement>;
+    /**
+     * The amount of offset when scrolling to the active item.
+     */
+    scrollOffset?: number;
+    /**
+     * The height of each option.
+     */
+    optionLineHeight?: number;
+    /**
+     * If true, scrolls to the active option when it is selected.
+     */
+    shouldScrollWhenActive?: boolean;
+    /**
+     * Custom renderer for the option content.
+     */
+    optionRenderer?: (option: IComboboxOption) => JSX.Element;
+}
+declare const _default: React.FC<ComboboxOptionProps> & {
+    iconTypes: typeof ComboboxOptionIconTypeEnum;
+};
+export default _default;

package/dist/components/Combobox/components/StickyCategoryHeader/StickyCategoryHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const StickyCategoryHeader: ({ label, color, className }: {
+    label: string;
+    color?: string;
+    className?: string;
+}) => React.JSX.Element;

package/dist/components/Combobox/helpers.d.ts

@@ -0,0 +1 @@
+export declare function getOptionId(id: string, index: number): string;

package/dist/components/Combobox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Combobox, type ComboboxProps } from "./Combobox";
+export * from "./Combobox.types";

package/dist/components/Counter/Counter.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+import { CounterColor as CounterColorEnum, CounterSize as CounterSizeEnum, CounterType as CounterTypeEnum } from "./CounterConstants";
+import { type CounterColor, type CounterSize, type CounterType } from "./Counter.types";
+import { type VibeComponentProps } from "../../types";
+export interface CounterProps extends VibeComponentProps {
+    /**
+     * The ID of the element describing the counter.
+     */
+    ariaLabeledBy?: string;
+    /**
+     * Class name applied to the counter element.
+     */
+    counterClassName?: string;
+    /**
+     * The numeric value displayed in the counter.
+     */
+    count?: number;
+    /**
+     * The label of the counter for accessibility.
+     */
+    ariaLabel?: string;
+    /**
+     * The size of the counter.
+     */
+    size?: CounterSize;
+    /**
+     * The visual style of the counter.
+     */
+    kind?: CounterType;
+    /**
+     * The color of the counter.
+     */
+    color?: CounterColor;
+    /**
+     * The maximum number of digits displayed before truncation.
+     */
+    maxDigits?: number;
+    /**
+     * Text prepended to the counter value.
+     */
+    prefix?: string;
+    /**
+     * Callback fired when the counter is clicked.
+     */
+    onMouseDown?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * If true, disables counter animations.
+     */
+    noAnimation?: boolean;
+}
+declare const _default: React.FC<CounterProps> & {
+    sizes: typeof CounterSizeEnum;
+    colors: typeof CounterColorEnum;
+    kinds: typeof CounterTypeEnum;
+};
+export default _default;

package/dist/components/Counter/Counter.types.d.ts

@@ -0,0 +1,3 @@
+export type CounterType = "fill" | "line";
+export type CounterColor = "primary" | "dark" | "negative" | "light";
+export type CounterSize = "xs" | "small" | "large";

package/dist/components/Counter/CounterConstants.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @deprecated
+ */
+export declare enum CounterType {
+    FILL = "fill",
+    LINE = "line"
+}
+/**
+ * @deprecated
+ */
+export declare enum CounterColor {
+    PRIMARY = "primary",
+    DARK = "dark",
+    NEGATIVE = "negative",
+    LIGHT = "light"
+}
+/**
+ * @deprecated
+ */
+export declare enum CounterSize {
+    XS = "xs",
+    SMALL = "small",
+    LARGE = "large"
+}

package/dist/components/Counter/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Counter, type CounterProps } from "./Counter";
+export * from "./Counter.types";

package/dist/components/DatePicker/DateNavigationItem/DateNavigationItem.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+declare const ICONS: {
+    prev: React.FC<import("@vibe/icons/dist/react/MoveArrowLeft").MoveArrowLeftProps>;
+    next: React.FC<import("@vibe/icons/dist/react/MoveArrowRight").MoveArrowRightProps>;
+};
+export interface DateNavigationItemProps {
+    /**
+     * The type of navigation button.
+     */
+    kind: keyof typeof ICONS;
+    /**
+     * Callback fired when the button is clicked.
+     */
+    onClick?: () => void;
+}
+declare const DateNavigationItem: ({ kind, onClick }: DateNavigationItemProps) => React.JSX.Element;
+export default DateNavigationItem;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import "react-dates/initialize.js";
+import { type DayOfWeekShape, type DayPickerPhrases } from "react-dates";
+import { type Moment, type RangeDate } from "./types";
+import { type VibeComponentProps } from "../../types";
+import "./external_datepicker.scss";
+export interface DatePickerProps extends VibeComponentProps {
+    /**
+     * The first day of the week to display.
+     */
+    firstDayOfWeek?: DayOfWeekShape;
+    /**
+     * The currently selected date.
+     */
+    date?: Moment;
+    /**
+     * The end date for range selection mode.
+     */
+    endDate?: Moment;
+    /**
+     * Callback fired when a date is selected.
+     */
+    onPickDate?: (date: Moment | RangeDate) => void;
+    /**
+     * If true, hides the navigation buttons.
+     */
+    hideNavigationKeys?: boolean;
+    /**
+     * If true, allows selecting days outside the current month.
+     */
+    enableOutsideDays?: boolean;
+    /**
+     * If true, displays a column with week numbers.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * The size of a single day cell.
+     */
+    daySize?: number;
+    /**
+     * Function to determine if a specific day should be disabled.
+     */
+    shouldBlockDay?: (date: Moment) => boolean;
+    /**
+     * If true, enables date range selection mode.
+     */
+    range?: boolean;
+    /**
+     * Custom phrases for accessibility and aria-labels.
+     */
+    phrases?: DayPickerPhrases;
+    /**
+     * The number of months displayed in the calendar.
+     */
+    numberOfMonths?: number;
+    /**
+     * Function to determine if a specific year should be disabled.
+     */
+    shouldBlockYear?: (year: number) => boolean;
+    /**
+     * Function to determine if a specific date range should be disabled.
+     */
+    shouldBlockRange?: (date: Moment) => boolean;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePicker;

package/dist/components/DatePicker/DatePickerHeader/DatePickerHeader.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { type Moment } from "../types";
+export interface DatePickerHeaderProps {
+    /**
+     * The currently shown date.
+     */
+    currentDate: Moment;
+    /**
+     * If true, the month and year selection view is active.
+     */
+    isMonthYearSelection: boolean;
+    /**
+     * Callback fired when toggling the month and year picker.
+     */
+    onToggleMonthYearPicker: () => void;
+    /**
+     * If true, hides the navigation buttons.
+     */
+    hideNavigationKeys: boolean;
+    /**
+     * Test ID for testing purposes.
+     */
+    "data-testid"?: string;
+    /**
+     * The ARIA label for the toggle button.
+     */
+    ariaLabel?: string;
+}
+declare const DatePickerHeader: (props: DatePickerHeaderProps) => React.JSX.Element;
+export default DatePickerHeader;

package/dist/components/DatePicker/YearPicker/YearPicker.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { type Moment } from "../types";
+export interface YearPickerProps {
+    /**
+     * The currently selected date.
+     */
+    selectedDate?: Moment;
+    /**
+     * Function to determine if a year should be blocked.
+     */
+    isYearBlocked?: (year: number) => boolean;
+    /**
+     * Callback fired when changing the selected year.
+     */
+    changeCurrentDate: (date: Moment) => void;
+    /**
+     * Test ID for testing purposes.
+     */
+    "data-testid"?: string;
+}
+declare const YearPicker: ({ selectedDate, isYearBlocked, changeCurrentDate, "data-testid": dateTestId }: YearPickerProps) => React.JSX.Element;
+export default YearPicker;

package/dist/components/DatePicker/YearPicker/YearsList.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface YearsListProps {
+    /**
+     * The list of years to display.
+     */
+    yearsItems: number[];
+    /**
+     * Function to determine if a year should be blocked.
+     */
+    isYearBlocked?: (year: number) => boolean;
+    /**
+     * Callback fired when a year is selected.
+     */
+    onSelect: (year: number) => void;
+    /**
+     * The currently selected year.
+     */
+    selectedYear: string;
+}
+declare const YearsList: ({ yearsItems, isYearBlocked, onSelect, selectedYear }: YearsListProps) => React.JSX.Element;
+export default YearsList;

package/dist/components/DatePicker/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const YEAR_FORMAT = "YYYY";
+export declare const MONTH_FORMAT = "MMMM";
+export declare const DAY_SIZE = 40;
+export declare const WEEK_FIRST_DAY = 1;

package/dist/components/DatePicker/date-picker-utils.d.ts

@@ -0,0 +1 @@
+export declare const calcNewYearsPage: (firstYearInPage: number, pageSize: number) => number[];

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export { default as DatePicker, type DatePickerProps } from "./DatePicker";

package/dist/components/DatePicker/types.d.ts

@@ -0,0 +1,20 @@
+import type moment from "moment";
+export type Moment = moment.Moment;
+export declare enum FocusInput {
+    startDate = "startDate",
+    endDate = "endDate"
+}
+export declare enum Direction {
+    next = "next",
+    prev = "prev"
+}
+export interface RangeDate {
+    /**
+     * The start date of the range.
+     */
+    startDate: Moment | null;
+    /**
+     * The end date of the range.
+     */
+    endDate: Moment | null;
+}

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,260 @@
+import React, { PureComponent, type ReactElement } from "react";
+import { type Modifier } from "react-popper";
+import { NOOP } from "../../utils/function-utils";
+import { AnimationType as AnimationTypeEnum, HideShowEvent as DialogTriggerEventEnum, DialogPosition as DialogPositionEnum } from "./DialogConstants";
+import { type VibeComponentProps } from "../../types";
+import type * as PopperJS from "@popperjs/core";
+import { type DialogAnimationType, type DialogPosition, type DialogTriggerEvent } from "./Dialog.types";
+import LayerContext from "../LayerProvider/LayerContext";
+export interface DialogProps extends VibeComponentProps {
+    /**
+     * Class name applied to the reference wrapper element.
+     */
+    referenceWrapperClassName?: string;
+    /**
+     * The wrapper element type to use for React components. Defaults to "span".
+     */
+    referenceWrapperElement?: "span" | "div";
+    /**
+     * The placement of the dialog relative to the reference element.
+     */
+    position?: DialogPosition;
+    /**
+     * Custom Popper.js modifiers.
+     * https://popper.js.org/docs/v2/modifiers/
+     */
+    modifiers?: Modifier<any>[];
+    /**
+     * The starting edge of the dialog.
+     */
+    startingEdge?: string;
+    /**
+     * Offset values for positioning adjustments.
+     * `main` - horizontal offset
+     * `secondary` - vertical offset
+     */
+    moveBy?: {
+        main?: number;
+        secondary?: number;
+    };
+    /**
+     * Delay in milliseconds before showing the dialog.
+     */
+    showDelay?: number;
+    /**
+     * Delay in milliseconds before hiding the dialog.
+     */
+    hideDelay?: number;
+    /**
+     * Events that trigger showing the dialog.
+     */
+    showTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
+    /**
+     * Events that trigger hiding the dialog.
+     */
+    hideTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
+    /**
+     * If true, prevents closing the dialog when the mouse enters it.
+     */
+    showOnDialogEnter?: boolean;
+    /**
+     * If true, shows the dialog when the component mounts.
+     */
+    shouldShowOnMount?: boolean;
+    /**
+     * If true, disables opening the dialog.
+     */
+    disable?: boolean;
+    /**
+     * Controls the open state of the dialog.
+     */
+    open?: boolean;
+    /**
+     * Derived state control for managing dialog visibility.
+     */
+    isOpen?: boolean;
+    /**
+     * Classes that prevent showing the dialog when present.
+     */
+    showTriggerIgnoreClass?: string | Array<string>;
+    /**
+     * Classes that prevent hiding the dialog when present.
+     */
+    hideTriggerIgnoreClass?: string | Array<string>;
+    /**
+     * The animation type used for the dialog.
+     */
+    animationType?: DialogAnimationType;
+    /**
+     * Class name applied to the dialog content container.
+     */
+    wrapperClassName?: string;
+    /**
+     * If true, prevents animation when mounting.
+     */
+    preventAnimationOnMount?: boolean;
+    /**
+     * The CSS selector of the container where the dialog is rendered.
+     */
+    containerSelector?: string;
+    /**
+     * If true, positions the tooltip element.
+     */
+    tooltip?: boolean;
+    /**
+     * Class name applied to the tooltip element.
+     */
+    tooltipClassName?: string;
+    /**
+     * Callback fired when the dialog is shown.
+     */
+    onDialogDidShow?: (event?: DialogEvent, eventName?: DialogTriggerEvent | string) => void;
+    /**
+     * Callback fired when the dialog is hidden.
+     */
+    onDialogDidHide?: (event: DialogEvent, eventName: DialogTriggerEvent | string) => void;
+    /**
+     * Callback fired when clicking outside the dialog.
+     */
+    onClickOutside?: (event: React.MouseEvent) => void;
+    /**
+     * Callback fired when clicking inside the dialog content.
+     */
+    onContentClick?: (event: React.MouseEvent) => void;
+    /**
+     * The z-index applied to the dialog.
+     */
+    zIndex?: number;
+    /**
+     * If true, uses derived state from props.
+     */
+    useDerivedStateFromProps?: boolean;
+    /**
+     * If true, makes the dialog disappear when the reference element is hidden.
+     */
+    hideWhenReferenceHidden?: boolean;
+    /**
+     * If true, triggers the callback when the dialog mounts.
+     */
+    shouldCallbackOnMount?: boolean;
+    /**
+     * If true, instantly shows and hides the dialog without delay.
+     */
+    instantShowAndHide?: boolean;
+    /**
+     * Callback to dynamically adjust show delay and animation behavior.
+     */
+    getDynamicShowDelay?: () => {
+        showDelay: number;
+        preventAnimation: boolean;
+    };
+    /**
+     * The content displayed inside the dialog.
+     */
+    content?: (() => JSX.Element) | JSX.Element;
+    /**
+     * The element to position the dialog beside.
+     */
+    children?: ReactElement | ReactElement[] | string;
+    /**
+     * If true, keyboard focus/blur events behave like mouse enter/leave.
+     */
+    addKeyboardHideShowTriggersByDefault?: boolean;
+    /**
+     * If true, disables scrolling for the container element.
+     */
+    disableContainerScroll?: boolean | string;
+    /**
+     * Enables the observation of content resize for the popper element.
+     * When set to `true`, a ResizeObserver is attached to the popper content,
+     * automatically triggering repositioning when the size of the content changes.
+     *
+     * This is useful for dialogs, tooltips, or popovers with dynamic content
+     * that may grow or shrink without a re-render being triggered.
+     */
+    observeContentResize?: boolean;
+}
+export interface DialogState {
+    /**
+     * If true, the dialog is open.
+     */
+    isOpen?: boolean;
+    /**
+     * If true, the dialog state is derived from props.
+     */
+    shouldUseDerivedStateFromProps?: boolean;
+    /**
+     * If true, prevents animation when opening or closing the dialog.
+     */
+    preventAnimation?: boolean;
+}
+export type DialogEvent = React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent;
+export default class Dialog extends PureComponent<DialogProps, DialogState> {
+    static hideShowTriggers: typeof DialogTriggerEventEnum;
+    static positions: typeof DialogPositionEnum;
+    static animationTypes: typeof AnimationTypeEnum;
+    static defaultProps: {
+        position: string;
+        modifiers: (import("react-popper").StrictModifier<any> | Partial<PopperJS.Modifier<any, object>>)[];
+        moveBy: {
+            main: number;
+            secondary: number;
+        };
+        showDelay: number;
+        hideDelay: number;
+        showTrigger: DialogTriggerEventEnum;
+        hideTrigger: DialogTriggerEventEnum;
+        showOnDialogEnter: boolean;
+        shouldShowOnMount: boolean;
+        disable: boolean;
+        open: boolean;
+        animationType: AnimationTypeEnum;
+        preventAnimationOnMount: boolean;
+        tooltip: boolean;
+        onDialogDidShow: typeof NOOP;
+        onDialogDidHide: typeof NOOP;
+        onClickOutside: typeof NOOP;
+        onContentClick: typeof NOOP;
+        useDerivedStateFromProps: boolean;
+        hideWhenReferenceHidden: boolean;
+        shouldCallbackOnMount: boolean;
+        instantShowAndHide: boolean;
+        addKeyboardHideShowTriggersByDefault: boolean;
+        observeContentResize: boolean;
+    };
+    private showTimeout;
+    private hideTimeout;
+    context: React.ContextType<typeof LayerContext>;
+    constructor(props: DialogProps);
+    closeDialogOnEscape(event: KeyboardEvent): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    static getDerivedStateFromProps(nextProps: DialogProps, state: DialogState): DialogState;
+    getContainer(): Element;
+    showDialog(event: DialogEvent, eventName: DialogTriggerEvent | string, options?: {
+        preventAnimation?: boolean;
+    }): void;
+    onShowDialog(event: DialogEvent, eventName: DialogTriggerEvent | string): void;
+    showDialogIfNeeded(event: DialogEvent, eventName: DialogTriggerEvent | string, options?: {}): void;
+    hideDialog(event: DialogEvent, eventName: DialogTriggerEvent | string): void;
+    onHideDialog(event: DialogEvent, eventName: DialogTriggerEvent | string): void;
+    hideDialogIfNeeded(event: DialogEvent, eventName: DialogTriggerEvent | string): void;
+    handleEvent(eventName: DialogTriggerEvent, target: EventTarget, event: DialogEvent): void;
+    isShown(): boolean;
+    isShowTrigger(eventName: DialogTriggerEvent): boolean;
+    isHideTrigger(eventName: DialogTriggerEvent): boolean;
+    onMouseEnter(e: React.MouseEvent): void;
+    onMouseLeave(e: React.MouseEvent): void;
+    onClick(e: React.MouseEvent): void;
+    onKeyDown(event: React.KeyboardEvent): void;
+    onMouseDown(e: React.MouseEvent): void;
+    onFocus(e: React.FocusEvent): void;
+    onBlur(e: React.FocusEvent): void;
+    onEsc(e: React.KeyboardEvent): void;
+    onContextMenu(e: React.MouseEvent): void;
+    onClickOutside(event: React.MouseEvent): void;
+    onDialogEnter(event: React.MouseEvent): void;
+    onDialogLeave(event: React.MouseEvent): void;
+    onContentClick(e: React.MouseEvent): void;
+    render(): string | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | React.JSX.Element;
+}

package/dist/components/Dialog/Dialog.types.d.ts

@@ -0,0 +1,9 @@
+export type DialogType = "modal" | "popover";
+export type DialogSize = "none" | "small" | "medium" | "large";
+export type DialogPosition = "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
+export type DialogTriggerEvent = "click" | "clickoutside" | "esckey" | "tab" | "mouseenter" | "mouseleave" | "enter" | "mousedown" | "focus" | "blur" | "onContentClick" | "contextmenu";
+export type DialogAnimationType = "opacity-and-slide" | "expand";
+export type DialogOffset = {
+    main?: number;
+    secondary?: number;
+};