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

package/README.md

@@ -131,7 +131,7 @@ const app = new Vue({
 
 ```typescript
 import BentoVue from '@adyen/bento-vue3';
-import VueI18n from 'vue-i18n';
+import { createI18n } from 'vue-i18n';
 
 const i18n = createI18n({
     locale: 'en-US',

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,133 @@
+import { PropType } from '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("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: () => false;
+    };
+    isMeasuringColumnWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowData: {
+        type: PropType<BentoDatagridDataItem>;
+        required: true;
+    };
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    selectedItems: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        required: true;
+    };
+}, {
+    gridcellRef: import("vue").Ref<HTMLDivElement>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").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, Readonly<import("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: () => false;
+    };
+    isMeasuringColumnWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rowData: {
+        type: PropType<BentoDatagridDataItem>;
+        required: true;
+    };
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    selectedItems: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        required: true;
+    };
+}>>, {
+    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 '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("vue").DefineComponent<{
+import { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridAllItemsSelectedState, BentoDatagridSortByColumn } from '../../data-grid.types';
+import { BentoDatagridDraggingColumnState } from './data-grid-columns.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     columns: {
         type: PropType<BentoColumn[]>;
         required: true;
@@ -31,6 +30,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    isMeasuringColunWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isOnlyOneVisibleColumn: {
         type: BooleanConstructor;
         default: boolean;
@@ -59,72 +62,36 @@ declare const _default: import("vue").DefineComponent<{
         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("vue").ComputedRef<{
-        'b-data-grid-columns__column-separator-container--is-resizeable': boolean;
-    }>;
-    conditionalColumnsClasses: import("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("vue").ComputedRef<{
-        'b-data-grid-columns__column-header--truncated': boolean;
-    }>;
-    isSelectColumn: (column: BentoColumn) => boolean;
-    onAllRowSelect: (areAllItemsSelected: boolean) => void;
-    selectAllMenu: import("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("vue").Ref<boolean>;
-    dataGridColumnEvents: (column: BentoColumn) => {
-        [eventName: string]: (e: Event) => void;
-    };
-    draggingEventsForColumn: import("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("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;
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, DatagridColumnsEvent[], string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").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, Readonly<import("vue").ExtractPropTypes<{
     columns: {
         type: PropType<BentoColumn[]>;
         required: true;
@@ -153,6 +120,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    isMeasuringColunWidths: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isOnlyOneVisibleColumn: {
         type: BooleanConstructor;
         default: boolean;
@@ -189,11 +160,19 @@ declare const _default: import("vue").DefineComponent<{
     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 '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("vue").ToRefs<{}>;

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

@@ -1,6 +1,6 @@
 import { Ref } from '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

@@ -507,21 +507,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     condensed: boolean;
     outline: boolean;
     loading: boolean;
-    lazyLoadType: BentoLazyLoadType;
     emptyState: any;
+    lazyLoadType: BentoLazyLoadType;
     fitContent: boolean;
     hasResizableColumns: boolean;
     selectableAcrossPages: boolean;
     sortBy: BentoDatagridSortByColumn[];
     truncateColumnHeaders: boolean;
+    getDataItemId: BentoDatagridGetDataItemIdFn;
+    isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
     filterValues: import("../filter-bar").BentoFilterValues;
     allowRowClicks: boolean;
     allowColumnDragAndDrop: boolean;
     bulkActions: BentoButtonActionsList;
     columnPanel: boolean;
     filterSearchTerm: string;
-    getDataItemId: BentoDatagridGetDataItemIdFn;
-    isDataItemDisabled: BentoDatagridIsDataItemDisabledFn;
     pagination: any;
     stickyPagination: boolean;
     stickyFilters: boolean;
@@ -529,9 +529,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     selection: BentoDatagridDataItemId[];
     highlightedRows: BentoDatagridDataItemId[];
     tabTitle: string;
-}>, Record<string, (_: any) => any> & Record<string, (_: {
-    item: BentoDatagridDataItem;
-}) => any> & {
+}>, Record<string, (_: any) => any> & Record<string, (_: 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 '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("vue").DefineComponent<{
     allowTimeInput: {
         type: BooleanConstructor;
@@ -53,7 +52,7 @@ declare const _default: import("vue").DefineComponent<{
         default: any;
     };
     value: {
-        type: PropType<CalendarRangeDateValue>;
+        type: PropType<BentoDateRangePickerValue>;
         default: any;
     };
 }, {
@@ -214,7 +213,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     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;
@@ -274,11 +273,11 @@ declare const _default: import("vue").DefineComponent<{
         default: any;
     };
     value: {
-        type: PropType<CalendarRangeDateValue>;
+        type: PropType<BentoDateRangePickerValue>;
         default: any;
     };
 }>>, {
-    value: CalendarRangeDateValue;
+    value: BentoDateRangePickerValue;
     isDateDisabled: import("../../../internal").CalendarIsDateDisabled;
     firstDayOfWeek: import("../../../internal").CalendarFirstDayOfWeek;
     min: Date;

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 '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("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 'vue';
-import { BentoListboxOptions } from "../../../../types";
+import { BentoListboxOptions, BentoListboxSelectedValue } from "../../../../types";
 import { BentoDropdownEmptyStateProps, BentoDropdownLazyLoadType, BentoDropdownSize, BentoDropdownVirtulisationOptions } from '../../dropdown.types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     ariaLabel: {
@@ -53,7 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         required: true;
     };
     selectedValue: {
-        type: PropType<BentoListboxOptions>;
+        type: PropType<BentoListboxSelectedValue>;
         default: any;
     };
     searching: {
@@ -77,17 +77,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").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, Readonly<import("vue").ExtractPropTypes<{
     ariaLabel: {
         type: StringConstructor;
@@ -140,7 +140,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         required: true;
     };
     selectedValue: {
-        type: PropType<BentoListboxOptions>;
+        type: PropType<BentoListboxSelectedValue>;
         default: any;
     };
     searching: {
@@ -164,13 +164,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     multiple: boolean;
     loading: boolean;
     isOptionDisabled: (optionValue: import("../../../../types").BentoListboxOptionItem) => boolean;
-    selectedValue: BentoListboxOptions;
+    selectedValue: BentoListboxSelectedValue;
     staticCategories: boolean;
     ariaLabel: string;
     searching: boolean;
+    emptyState: BentoDropdownEmptyStateProps;
     hasMoreItems: boolean;
     lazyLoadType: "button" | "none" | "automatic" | BentoDropdownLazyLoadType;
-    emptyState: BentoDropdownEmptyStateProps;
     virtualScroll: BentoDropdownVirtulisationOptions;
     inputSize: "DropdownInputDefault" | "DropdownInputSmall" | BentoDropdownSize;
 }>, Record<string, (_: any) => any>>;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue.d.ts

@@ -237,9 +237,9 @@ declare const _default: import("vue").DefineComponent<{
     isOptionDisabled: (optionValue: import("../../../../../types").BentoListboxOptionItem) => boolean;
     staticCategories: boolean;
     ariaLabel: string;
+    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     hasMoreItems: boolean;
     lazyLoadType: "button" | "none" | "automatic" | import("../../../../../types").BentoListboxLazyLoadType;
-    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     virtualScroll: import("../../../../../types").BentoListboxVirtulisationOptions;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue.d.ts

@@ -249,9 +249,9 @@ declare const _default: import("vue").DefineComponent<{
     isOptionDisabled: (optionValue: import("../../../../../types").BentoListboxOptionItem) => boolean;
     staticCategories: boolean;
     ariaLabel: string;
+    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     hasMoreItems: boolean;
     lazyLoadType: "button" | "none" | "automatic" | import("../../../../../types").BentoListboxLazyLoadType;
-    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     virtualScroll: import("../../../../../types").BentoListboxVirtulisationOptions;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue.d.ts

@@ -237,9 +237,9 @@ declare const _default: import("vue").DefineComponent<{
     isOptionDisabled: (optionValue: import("../../../../../types").BentoListboxOptionItem) => boolean;
     staticCategories: boolean;
     ariaLabel: string;
+    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     hasMoreItems: boolean;
     lazyLoadType: "button" | "none" | "automatic" | import("../../../../../types").BentoListboxLazyLoadType;
-    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     virtualScroll: import("../../../../../types").BentoListboxVirtulisationOptions;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue.d.ts

@@ -237,9 +237,9 @@ declare const _default: import("vue").DefineComponent<{
     isOptionDisabled: (optionValue: import("../../../../../types").BentoListboxOptionItem) => boolean;
     staticCategories: boolean;
     ariaLabel: string;
+    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     hasMoreItems: boolean;
     lazyLoadType: "button" | "none" | "automatic" | import("../../../../../types").BentoListboxLazyLoadType;
-    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     virtualScroll: import("../../../../../types").BentoListboxVirtulisationOptions;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue.d.ts

@@ -237,9 +237,9 @@ declare const _default: import("vue").DefineComponent<{
     isOptionDisabled: (optionValue: import("../../../../../types").BentoListboxOptionItem) => boolean;
     staticCategories: boolean;
     ariaLabel: string;
+    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     hasMoreItems: boolean;
     lazyLoadType: "button" | "none" | "automatic" | import("../../../../../types").BentoListboxLazyLoadType;
-    emptyState: import("../../../../../types").BentoListboxEmptyStateProps;
     virtualScroll: import("../../../../../types").BentoListboxVirtulisationOptions;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;

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("vue").ComputedRef<string>;
+import { UseDisplayValue } from './use-display-value.types';
+export declare const useDisplayValue: UseDisplayValue;