@adyen/bento-vue3 1.18.0-rc-2 → 1.18.0

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

@@ -45,7 +45,6 @@ import {
     BentoMenu,
     BentoModal,
     BentoModalFullscreen,
-    BentoModalPage,
     BentoPagination,
     BentoPaymentMethod,
     BentoPopover,
@@ -127,7 +126,6 @@ declare module 'vue' {
         BentoMenu: typeof BentoMenu;
         BentoModal: typeof BentoModal;
         BentoModalFullscreen: typeof BentoModalFullscreen;
-        BentoModalPage: typeof BentoModalPage;
         BentoPagination: typeof BentoPagination;
         BentoPaymentMethod: typeof BentoPaymentMethod;
         BentoPopover: typeof BentoPopover;

package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-cell/data-grid-cell.types.d.ts

@@ -0,0 +1,34 @@
+import type { BentoColumn } from '../../data-grid.types';
+export declare enum DataGridCellPropClass {
+    PADDING_LEFT_UNSET = "padding-left-unset",
+    PADDING_RIGHT_UNSET = "padding-right-unset",
+    NUMERIC = "numeric",
+    CONDENSED = "condensed",
+    FROZEN = "frozen",
+    OVERFLOW_ELLIPSIS = "ellipsis",
+    IS_COLUMN_REORDERING = "is-column-re-ordering",
+    IS_COLUMN_REORDERING_TARGET_LEFT = "is-column-re-order-target-left",
+    IS_COLUMN_REORDERING_TARGET_RIGHT = "is-column-re-order-target-right"
+}
+export interface DataGridCellDragEvents {
+    dragenter?: (e: DragEvent) => void;
+    drop?: () => void;
+    dragover?: (e: DragEvent) => void;
+}
+export type DataGridCellDragEventsForColumn = (column: BentoColumn) => {
+    dragenter?: (e: DragEvent) => void;
+    drop?: () => void;
+    dragover?: (e: DragEvent) => void;
+};
+export interface DataGridCellColumnSet {
+    columnSet: BentoColumn[];
+    id: string;
+    isFrozenColumns?: boolean;
+}
+export interface DataGridCellEvents extends DataGridCellDragEvents {
+    keyup?: (event: KeyboardEvent) => void;
+    keydown?: (event: KeyboardEvent) => void;
+    mouseenter?: () => void;
+    mouseleave?: () => void;
+}
+export type DataGridCellEventsForColumn = (column: BentoColumn) => DataGridCellEvents;

package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-cell/data-grid-cell.vue.d.ts

@@ -0,0 +1,137 @@
+import { PropType } from "../../../../../../vue3/node_modules/vue";
+import { BentoColumn, BentoDatagridDataItem, BentoDatagridDataItemId, BentoDatagridGetDataItemIdFn, BentoDatagridIsDataItemDisabledFn } from "../../data-grid.types";
+import { DataGridCellColumnSet, DataGridCellDragEventsForColumn } from './data-grid-cell.types';
+import type { BentoDatagridDraggingColumnState } from '../data-grid-columns/data-grid-columns.types';
+declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/node_modules/vue").DefineComponent<{
+    draggingEventsForRowCell: {
+        type: PropType<DataGridCellDragEventsForColumn>;
+        required: true;
+    };
+    columnSets: {
+        type: PropType<DataGridCellColumnSet[]>;
+        required: true;
+    };
+    column: {
+        type: PropType<BentoColumn>;
+        required: true;
+    };
+    colIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    columnSetIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    draggingColumns: {
+        type: PropType<BentoDatagridDraggingColumnState>;
+        default: any;
+    };
+    getDataItemId: {
+        type: PropType<BentoDatagridGetDataItemIdFn>;
+        default: (item: BentoDatagridDataItem) => BentoDatagridDataItemId;
+    };
+    isDataItemDisabled: {
+        type: PropType<BentoDatagridIsDataItemDisabledFn>;
+        default: () => boolean;
+    };
+    isMeasuringColumnWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowData: {
+        type: PropType<BentoDatagridDataItem>;
+        required: true;
+    };
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    selectedItems: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        required: true;
+    };
+}, {
+    gridcellRef: import("../../../../../../vue3/node_modules/vue").Ref<HTMLDivElement>;
+}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
+    "on-frozen-columns-key-press": (event: Event) => void;
+} & {
+    "select-row": (value: BentoDatagridDataItemId[]) => void;
+} & {
+    "register-row-cell-element": (el: Element, field: string, rowIndex: number) => void;
+}, string, import("../../../../../../vue3/node_modules/vue").VNodeProps & import("../../../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../../../vue3/node_modules/vue").ExtractPropTypes<{
+    draggingEventsForRowCell: {
+        type: PropType<DataGridCellDragEventsForColumn>;
+        required: true;
+    };
+    columnSets: {
+        type: PropType<DataGridCellColumnSet[]>;
+        required: true;
+    };
+    column: {
+        type: PropType<BentoColumn>;
+        required: true;
+    };
+    colIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    columnSetIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    draggingColumns: {
+        type: PropType<BentoDatagridDraggingColumnState>;
+        default: any;
+    };
+    getDataItemId: {
+        type: PropType<BentoDatagridGetDataItemIdFn>;
+        default: (item: BentoDatagridDataItem) => BentoDatagridDataItemId;
+    };
+    isDataItemDisabled: {
+        type: PropType<BentoDatagridIsDataItemDisabledFn>;
+        default: () => boolean;
+    };
+    isMeasuringColumnWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowData: {
+        type: PropType<BentoDatagridDataItem>;
+        required: true;
+    };
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    selectedItems: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        required: true;
+    };
+}>> & {
+    "onOn-frozen-columns-key-press"?: (event: Event) => any;
+    "onSelect-row"?: (value: BentoDatagridDataItemId[]) => any;
+    "onRegister-row-cell-element"?: (el: Element, field: string, rowIndex: number) => any;
+}, {
+    condensed: boolean;
+    draggingColumns: any;
+    getDataItemId: BentoDatagridGetDataItemIdFn;
+    isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
+    isMeasuringColumnWidths: boolean;
+}>, Record<string, (_: {
+    item: BentoDatagridDataItem;
+}) => any>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.vue.d.ts

@@ -1,8 +1,7 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
-import { BentoColumn, BentoDatagridAllItemsSelectedState, BentoDatagridAriaSortValue, BentoDatagridSortByColumn, BentoDatagridSortDirection } from '../../data-grid.types';
-import { BentoDatagridDraggingColumnState, DatagridColumnsEvent } from './data-grid-columns-types';
-import type { BentoMenuItem } from "../../../menu/components";
-declare const _default: import("../../../../../../vue3/node_modules/vue").DefineComponent<{
+import { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridAllItemsSelectedState, BentoDatagridSortByColumn } from '../../data-grid.types';
+import { BentoDatagridDraggingColumnState } from './data-grid-columns.types';
+declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/node_modules/vue").DefineComponent<{
     columns: {
         type: PropType<BentoColumn[]>;
         required: true;
@@ -31,6 +30,10 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
         type: BooleanConstructor;
         default: boolean;
     };
+    isMeasuringColunWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isOnlyOneVisibleColumn: {
         type: BooleanConstructor;
         default: boolean;
@@ -59,72 +62,36 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
         type: BooleanConstructor;
         default: boolean;
     };
-}, {
-    DATAGRID_SELECT_FIELD_NAME: string;
-    conditionalColumnClasses: (column: BentoColumn) => {
-        'b-data-grid-columns__column--sortable': boolean;
-        'b-data-grid-columns__column--padding-left-unset': boolean;
-        'b-data-grid-columns__column--padding-right-unset': boolean;
-        'b-data-grid-columns__column--numeric': boolean;
-        'b-data-grid-columns__column--frozen': boolean;
-        'b-data-grid-columns__column--is-re-ordering': boolean;
-        'b-data-grid-columns__column--is-re-ordering-target-left': any;
-        'b-data-grid-columns__column--is-re-ordering-target-right': boolean;
-    };
-    conditionalColumnSeparatorClasses: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
-        'b-data-grid-columns__column-separator-container--is-resizeable': boolean;
-    }>;
-    conditionalColumnsClasses: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
-        'b-data-grid-columns--frozen': boolean;
-        'b-data-grid-columns--frozen-separator': boolean;
-        'b-data-grid-columns--overflow-shadow-left': boolean;
-        'b-data-grid-columns--unfrozen'?: undefined;
-        'b-data-grid-columns--config-settings-margin'?: undefined;
-    } | {
-        'b-data-grid-columns--unfrozen': boolean;
-        'b-data-grid-columns--config-settings-margin': boolean;
-        'b-data-grid-columns--frozen'?: undefined;
-        'b-data-grid-columns--frozen-separator'?: undefined;
-        'b-data-grid-columns--overflow-shadow-left'?: undefined;
-    }>;
-    conditionalColumnHeaderClasses: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
-        'b-data-grid-columns__column-header--truncated': boolean;
-    }>;
-    isSelectColumn: (column: BentoColumn) => boolean;
-    onAllRowSelect: (areAllItemsSelected: boolean) => void;
-    selectAllMenu: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
-        text: string;
-        handler: () => void;
-    }[]>;
-    conditionalSortDirectionClasses: (field: string, direction: BentoDatagridSortDirection) => {
-        'b-data-grid-columns__column-sort-icon--sorted': boolean;
-    };
-    sortByColumnField: (field: string) => void;
-    getSortingColumnDirection: (column: BentoColumn) => BentoDatagridAriaSortValue;
-    startResize: (hasResizableColumns: boolean, field: string, event: MouseEvent) => void;
-    isResizing: import("../../../../../../vue3/node_modules/vue").Ref<boolean>;
-    dataGridColumnEvents: (column: BentoColumn) => {
-        [eventName: string]: (e: Event) => void;
-    };
-    draggingEventsForColumn: import("../../../../../../vue3/node_modules/vue").ComputedRef<(column: BentoColumn) => {
-        dragstart?: undefined;
-        dragover?: undefined;
-        dragenter?: undefined;
-        drop?: undefined;
-        dragend?: undefined;
-    } | {
-        dragstart: (e: DragEvent & Event) => void;
-        dragover: (e: DragEvent) => void;
-        dragenter: (e: DragEvent) => void;
-        drop: () => void;
-        dragend: () => void;
-    }>;
-    contextualMenuData: import("../../../../../../vue3/node_modules/vue").ComputedRef<(col: BentoColumn) => BentoMenuItem[]>;
-    computeMenuPosition: (hasFirstColumnPanelRightAligned: any, index: any) => import("../../../popper-container").PopperContainerPositionExtended.BOTTOM_START | import("../../../popper-container").PopperContainerPositionExtended.BOTTOM_END;
-    BentoDatagridSortDirection: typeof BentoDatagridSortDirection;
-    DatagridColumnsEvent: typeof DatagridColumnsEvent;
-    t: (key: "selectAll" | "freezeColumn" | "hideColumn" | "moveColumnLeft" | "moveColumnRight" | "selectPage" | "selectionMenu" | "showColumn" | "unfreezeColumn", values?: import("vue-i18n").default.Values) => string;
-}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, DatagridColumnsEvent[], DatagridColumnsEvent, import("../../../../../../vue3/node_modules/vue").VNodeProps & import("../../../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../../../vue3/node_modules/vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
+    "column-resize": (column: {
+        field: string;
+        width: number;
+    }) => void;
+} & {
+    "column-resizing": (value: BentoColumnWidthOverridesLookup) => void;
+} & {
+    sort: (updatedSortBy: BentoDatagridSortByColumn[]) => void;
+} & {
+    "select-all-rows": (areAllItemsSelected: boolean) => void;
+} & {
+    "select-all-across-pages": () => void;
+} & {
+    "column-dragstart": (column: BentoColumn, event: DragEvent & Event) => void;
+} & {
+    "column-dragenter": (column: BentoColumn, event: DragEvent & Event) => void;
+} & {
+    "column-drop": (column: BentoColumn) => void;
+} & {
+    "column-dragend": () => void;
+} & {
+    "column-move": (movingColumn: BentoColumn, offset: number) => void;
+} & {
+    "column-update": (column: BentoColumn) => void;
+} & {
+    "column-menu-open": () => void;
+} & {
+    "column-menu-close": () => void;
+}, string, import("../../../../../../vue3/node_modules/vue").VNodeProps & import("../../../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../../../vue3/node_modules/vue").ExtractPropTypes<{
     columns: {
         type: PropType<BentoColumn[]>;
         required: true;
@@ -153,6 +120,10 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
         type: BooleanConstructor;
         default: boolean;
     };
+    isMeasuringColunWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isOnlyOneVisibleColumn: {
         type: BooleanConstructor;
         default: boolean;
@@ -182,19 +153,22 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
         default: boolean;
     };
 }>> & {
-    "onColumn-resize"?: (...args: any[]) => any;
-    "onColumn-resizing"?: (...args: any[]) => any;
-    onSort?: (...args: any[]) => any;
-    "onSelect-all-rows"?: (...args: any[]) => any;
-    "onSelect-all-across-pages"?: (...args: any[]) => any;
-    "onColumn-move"?: (...args: any[]) => any;
-    "onColumn-update"?: (...args: any[]) => any;
-    "onColumn-menu-open"?: (...args: any[]) => any;
-    "onColumn-menu-close"?: (...args: any[]) => any;
-    "onColumn-dragstart"?: (...args: any[]) => any;
-    "onColumn-dragenter"?: (...args: any[]) => any;
-    "onColumn-dragend"?: (...args: any[]) => any;
-    "onColumn-drop"?: (...args: any[]) => any;
+    "onColumn-resize"?: (column: {
+        field: string;
+        width: number;
+    }) => any;
+    "onColumn-resizing"?: (value: BentoColumnWidthOverridesLookup) => any;
+    onSort?: (updatedSortBy: BentoDatagridSortByColumn[]) => any;
+    "onSelect-all-rows"?: (areAllItemsSelected: boolean) => any;
+    "onSelect-all-across-pages"?: () => any;
+    "onColumn-move"?: (movingColumn: BentoColumn, offset: number) => any;
+    "onColumn-update"?: (column: BentoColumn) => any;
+    "onColumn-menu-open"?: () => any;
+    "onColumn-menu-close"?: () => any;
+    "onColumn-dragstart"?: (column: BentoColumn, event: DragEvent & Event) => any;
+    "onColumn-dragenter"?: (column: BentoColumn, event: DragEvent & Event) => any;
+    "onColumn-dragend"?: () => any;
+    "onColumn-drop"?: (column: BentoColumn) => any;
 }, {
     isFrozenColumns: boolean;
     draggingColumns: any;
@@ -203,11 +177,19 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
     hasColumnPanel: boolean;
     hasFirstColumnPanelRightAligned: boolean;
     hasLeftOverflow: boolean;
+    isMeasuringColunWidths: boolean;
     isOnlyOneVisibleColumn: boolean;
     showFrozenColumnsSeparator: boolean;
     allItemsSelectedState: BentoDatagridAllItemsSelectedState;
     selectableAcrossPages: boolean;
     sortBy: BentoDatagridSortByColumn[];
     truncateColumnHeaders: boolean;
-}>;
+}>, Record<string, (_: {
+    column: BentoColumn;
+}) => any>>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/components/data-grid/components/index.d.ts

@@ -1,4 +1,5 @@
 export { default as DataGridColumns } from './data-grid-columns/data-grid-columns.vue';
 export { default as BentoDataGridConfigSettings } from './data-grid-config-settings/data-grid-config-settings.vue';
 export { default as DataGridLazyLoad } from './data-grid-lazy-load/data-grid-lazy-load.vue';
+export { default as DataGridCell } from './data-grid-cell/data-grid-cell.vue';
 export { default as DataGridCellActions } from './data-grid-cell-actions/data-grid-cell-actions.vue';

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-resizer.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from "../../../../../vue3/node_modules/vue";
 import { BentoColumn, BentoColumnWidthOverridesLookup } from '../data-grid.types';
-import { DatagridColumnsEvent } from '../components/data-grid-columns/data-grid-columns-types';
+import { DatagridColumnsEvent } from '../components/data-grid-columns/data-grid-columns.types';
 export declare const useResizer: (columns: Ref<BentoColumn[]>, emit: (event: DatagridColumnsEvent, ...args: unknown[]) => void) => {
     resizeData: Ref<BentoColumnWidthOverridesLookup>;
     allColumnRefs: import("../../../../../vue3/node_modules/vue").ToRefs<{}>;

package/dist/@types/packages/vue2/src/components/data-grid/composables/use-sorter.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from "../../../../../vue3/node_modules/vue";
 import { BentoColumn, BentoDatagridSortByColumn, BentoDatagridSortDirection } from '../data-grid.types';
-import { DatagridColumnsEvent } from '../components/data-grid-columns/data-grid-columns-types';
+import { DatagridColumnsEvent } from '../components/data-grid-columns/data-grid-columns.types';
 export declare const useSorter: (sortBy: Ref<BentoDatagridSortByColumn[]>, columns: Ref<BentoColumn[]>, emit: (event: DatagridColumnsEvent, updatedSortBy: BentoDatagridSortByColumn[]) => void) => {
     conditionalSortDirectionClasses: (field: string, direction: BentoDatagridSortDirection) => {
         'b-data-grid-columns__column-sort-icon--sorted': boolean;

package/dist/@types/packages/vue2/src/components/data-grid/data-grid.vue.d.ts

@@ -416,22 +416,22 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
     filters: any;
     condensed: boolean;
     outline: boolean;
-    lazyLoadType: BentoLazyLoadType;
     loading: boolean;
     emptyState: any;
+    lazyLoadType: BentoLazyLoadType;
     fitContent: boolean;
     hasResizableColumns: boolean;
     selectableAcrossPages: boolean;
     sortBy: BentoDatagridSortByColumn[];
     truncateColumnHeaders: boolean;
+    getDataItemId: BentoDatagridGetDataItemIdFn;
+    isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
     filterValues: any;
     allowRowClicks: boolean;
     allowColumnDragAndDrop: boolean;
     bulkActions: BentoButtonActionsList;
     columnPanel: boolean;
     filterSearchTerm: any;
-    getDataItemId: BentoDatagridGetDataItemIdFn;
-    isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
     pagination: any;
     stickyPagination: boolean;
     stickyFilters: boolean;
@@ -439,9 +439,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
     selection: BentoDatagridDataItemId[];
     highlightedRows: BentoDatagridDataItemId[];
     tabTitle: string;
-}>, Record<NonNullable<string | number>, (_: any) => any> & Record<string, (_: {
-    item: BentoDatagridDataItem;
-}) => any> & {
+}>, Record<NonNullable<string | number>, (_: any) => any> & Record<NonNullable<string | number>, (_: any) => any> & {
     header: (_: {}) => any;
     footer: (_: {}) => any;
 }>;

package/dist/@types/packages/vue2/src/components/date-range-picker/components/date-range-picker-calendar/date-range-picker-calendar.vue.d.ts

@@ -1,8 +1,7 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
-import { CalendarRangeDateValue } from "../../../internal";
 import { type BentoSegmentedControlItem } from "../../../segmented-control";
 import { DateRangePickerCalendarEvent, DateRangePickerCalendarFormData, DateRangePickerCalendarRangeSelectorItems } from './date-range-picker-calendar.types';
-import type { BentoDateRangePickerGranularityConfig } from '../../date-range-picker.types';
+import type { BentoDateRangePickerGranularityConfig, BentoDateRangePickerValue } from '../../date-range-picker.types';
 declare const _default: import("../../../../../../vue3/node_modules/vue").DefineComponent<{
     allowTimeInput: {
         type: BooleanConstructor;
@@ -32,7 +31,7 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
         default: any;
     };
     value: {
-        type: PropType<CalendarRangeDateValue>;
+        type: PropType<BentoDateRangePickerValue>;
         default: any;
     };
 }, {
@@ -193,7 +192,7 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
     }>;
     hasSlot: (name: string) => boolean;
     t: (key: "daily" | "weekly" | "monthly" | "customRange" | "dateFrom" | "dateTo" | "lastMonth" | "lastSevenDays" | "lastThreeMonths" | "timeFrom" | "timeTo", values?: import("vue-i18n").default.Values) => string;
-    onDateInput: (selectedRange: CalendarRangeDateValue) => void;
+    onDateInput: (selectedRange: BentoDateRangePickerValue) => void;
     onDateInputKeyDown: (event: KeyboardEvent) => void;
     onEndDateInput: (endDateText: string) => void;
     onEndDateSelected: (newEndDate: Date) => void;
@@ -232,7 +231,7 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
         default: any;
     };
     value: {
-        type: PropType<CalendarRangeDateValue>;
+        type: PropType<BentoDateRangePickerValue>;
         default: any;
     };
 }>> & {
@@ -241,7 +240,7 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
     "onCustom-range"?: (...args: any[]) => any;
     "onForm-date"?: (...args: any[]) => any;
 }, {
-    value: CalendarRangeDateValue;
+    value: BentoDateRangePickerValue;
     max: any;
     min: any;
     isDateDisabled: any;

package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-options-container/composables/use-dropdown-options-listbox.d.ts

@@ -1,7 +1,7 @@
 import { Ref } from "../../../../../../../vue3/node_modules/vue";
-import { BentoListboxEvent, BentoListboxOptions } from "../../../../../types";
+import { BentoListboxEvent, BentoListboxSelectedValue } from "../../../../../types";
 import { BentoDropdownEvent } from '../../../dropdown.types';
-export declare const useDropdownOptionsListbox: (selectedValue: Ref<BentoListboxOptions>, multiple: Ref<boolean>, isOpen: Ref<boolean>, emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxOptions) => void) => {
+export declare const useDropdownOptionsListbox: (selectedValue: Ref<BentoListboxSelectedValue>, multiple: Ref<boolean>, isOpen: Ref<boolean>, emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxSelectedValue) => void) => {
     actions: import("../../../../../../../vue3/node_modules/vue").ComputedRef<({
         title: string;
         event: () => void;
@@ -11,19 +11,13 @@ export declare const useDropdownOptionsListbox: (selectedValue: Ref<BentoListbox
         event: () => void;
         disabled?: undefined;
     })[]>;
-    internalSelectedValue: Ref<{
-        data?: unknown;
-        description?: string;
-        value: import("../../../../../types").BentoListboxValue;
-        items?: any[];
-        label: string;
-    }[]>;
+    internalSelectedValue: Ref<import("../../../../../types").BentoListboxValue | import("../../../../../types").BentoListboxValue[]>;
     listeners: {
-        select: (newSelectedValue: BentoListboxOptions) => void;
+        select: (newSelectedValue: BentoListboxSelectedValue) => void;
         "show-more": () => void;
-        "tab-pressed": (newSelectedValue: BentoListboxOptions) => void;
-        "space-pressed": (newSelectedValue: BentoListboxOptions) => void;
-        "enter-pressed": (newSelectedValue: BentoListboxOptions) => void;
+        "tab-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
+        "space-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
+        "enter-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
     };
     onEscapeKey: () => void;
     onOutsideDropdownClick: () => void;

package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
-import { BentoListboxOptions } from "../../../../types";
+import { BentoListboxOptions, BentoListboxSelectedValue } from "../../../../types";
 import { BentoDropdownEmptyStateProps, BentoDropdownLazyLoadType, BentoDropdownSize, BentoDropdownVirtulisationOptions } from '../../dropdown.types';
 declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/node_modules/vue").DefineComponent<{
     ariaLabel: {
@@ -53,7 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         required: true;
     };
     selectedValue: {
-        type: PropType<BentoListboxOptions>;
+        type: PropType<BentoListboxSelectedValue>;
         default: any;
     };
     searching: any;
@@ -74,17 +74,17 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
 }, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
     "close-dropdown": () => void;
 } & {
-    "enter-pressed": (newSelectedValue: BentoListboxOptions) => void;
+    "enter-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
 } & {
     "escape-pressed": () => void;
 } & {
-    select: (newSelectedValue: BentoListboxOptions) => void;
+    select: (newSelectedValue: BentoListboxSelectedValue) => void;
 } & {
     "show-more": () => void;
 } & {
-    "space-pressed": (newSelectedValue: BentoListboxOptions) => void;
+    "space-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
 } & {
-    "tab-pressed": (newSelectedValue: BentoListboxOptions) => void;
+    "tab-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
 }, string, import("../../../../../../vue3/node_modules/vue").VNodeProps & import("../../../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../../../vue3/node_modules/vue").ExtractPropTypes<{
     ariaLabel: {
         type: StringConstructor;
@@ -137,7 +137,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         required: true;
     };
     selectedValue: {
-        type: PropType<BentoListboxOptions>;
+        type: PropType<BentoListboxSelectedValue>;
         default: any;
     };
     searching: any;
@@ -154,10 +154,10 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         default: boolean;
     };
 }>> & {
-    onSelect?: (newSelectedValue: BentoListboxOptions) => any;
-    "onEnter-pressed"?: (newSelectedValue: BentoListboxOptions) => any;
-    "onSpace-pressed"?: (newSelectedValue: BentoListboxOptions) => any;
-    "onTab-pressed"?: (newSelectedValue: BentoListboxOptions) => any;
+    onSelect?: (newSelectedValue: BentoListboxSelectedValue) => any;
+    "onEnter-pressed"?: (newSelectedValue: BentoListboxSelectedValue) => any;
+    "onSpace-pressed"?: (newSelectedValue: BentoListboxSelectedValue) => any;
+    "onTab-pressed"?: (newSelectedValue: BentoListboxSelectedValue) => any;
     "onShow-more"?: () => any;
     "onEscape-pressed"?: () => any;
     "onClose-dropdown"?: () => any;
@@ -165,14 +165,14 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     disabled: boolean;
     multiple: boolean;
     isOptionDisabled: (optionValue: import("../../../../types").BentoListboxOptionItem) => boolean;
-    selectedValue: BentoListboxOptions;
+    selectedValue: BentoListboxSelectedValue;
     staticCategories: boolean;
     ariaLabel: string;
     searching: any;
-    hasMoreItems: boolean;
-    lazyLoadType: "button" | "none" | "automatic" | BentoDropdownLazyLoadType;
     loading: boolean;
     emptyState: BentoDropdownEmptyStateProps;
+    hasMoreItems: boolean;
+    lazyLoadType: "button" | "none" | "automatic" | BentoDropdownLazyLoadType;
     virtualScroll: BentoDropdownVirtulisationOptions;
     inputSize: "DropdownInputDefault" | "DropdownInputSmall" | BentoDropdownSize;
 }>, Record<NonNullable<string | number>, (_: any) => any>>;

package/dist/@types/packages/vue2/src/components/dropdown/composables/use-display-value.d.ts

@@ -1,2 +1,2 @@
-import { UseDisplayValueOptions } from './use-display-value.types';
-export declare const useDisplayValue: ({ items, placeholder, selectedValues }: UseDisplayValueOptions) => import("../../../../../vue3/node_modules/vue").ComputedRef<string>;
+import { UseDisplayValue } from './use-display-value.types';
+export declare const useDisplayValue: UseDisplayValue;

package/dist/@types/packages/vue2/src/components/dropdown/composables/use-display-value.types.d.ts

@@ -1,7 +1,28 @@
-import { BentoListboxOptions } from "../../../types";
+import { BentoListboxOptions, BentoListboxSelectedValue } from "../../../types";
 import { Ref } from "../../../../../vue3/node_modules/vue";
-export interface UseDisplayValueOptions {
+import type { ComputedRef } from "../../../../../vue3/node_modules/vue";
+export interface SingleSelectOptions {
     items: Ref<BentoListboxOptions>;
     placeholder: Ref<string>;
-    selectedValues: Ref<BentoListboxOptions>;
+    selectedValue: Ref<BentoListboxSelectedValue>;
+    staticCategories: boolean;
 }
+export interface MultiSelectOptions {
+    items: Ref<BentoListboxOptions>;
+    placeholder: Ref<string>;
+    selectedValues: Ref<BentoListboxSelectedValue>;
+}
+export interface CategoryMultiSelectOptions {
+    items: Ref<BentoListboxOptions>;
+    placeholder: Ref<string>;
+    selectedValues: Ref<BentoListboxSelectedValue>;
+}
+interface UseDisplayValueOptions {
+    items: Ref<BentoListboxOptions>;
+    placeholder: Ref<string>;
+    value: Ref<BentoListboxSelectedValue>;
+    multiple: Ref<boolean>;
+    staticCategories: Ref<boolean>;
+}
+export type UseDisplayValue = (options: UseDisplayValueOptions) => ComputedRef<string>;
+export {};