@adyen/bento-vue2 1.17.1 → 1.18.0-rc-1

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

@@ -507,8 +507,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     condensed: boolean;
     outline: boolean;
     loading: boolean;
-    emptyState: any;
     lazyLoadType: BentoLazyLoadType;
+    emptyState: any;
     fitContent: boolean;
     hasResizableColumns: boolean;
     selectableAcrossPages: boolean;

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, BentoListboxSelectedValue } from "../../../../../types";
+import { BentoListboxEvent, BentoListboxOptions } from "../../../../../types";
 import { BentoDropdownEvent } from '../../../dropdown.types';
-export declare const useDropdownOptionsListbox: (selectedValue: Ref<BentoListboxSelectedValue>, multiple: Ref<boolean>, isOpen: Ref<boolean>, emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxSelectedValue) => void) => {
+export declare const useDropdownOptionsListbox: (selectedValue: Ref<BentoListboxOptions>, multiple: Ref<boolean>, isOpen: Ref<boolean>, emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxOptions) => void) => {
     actions: import("vue").ComputedRef<({
         title: string;
         event: () => void;
@@ -11,13 +11,19 @@ export declare const useDropdownOptionsListbox: (selectedValue: Ref<BentoListbox
         event: () => void;
         disabled?: undefined;
     })[]>;
-    internalSelectedValue: Ref<import("../../../../../types").BentoListboxValue | import("../../../../../types").BentoListboxValue[]>;
+    internalSelectedValue: Ref<{
+        data?: unknown;
+        description?: string;
+        value: import("../../../../../types").BentoListboxValue;
+        items?: any[];
+        label: string;
+    }[]>;
     listeners: {
-        select: (newSelectedValue: BentoListboxSelectedValue) => void;
+        select: (newSelectedValue: BentoListboxOptions) => void;
         "show-more": () => void;
-        "tab-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
-        "space-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
-        "enter-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
+        "tab-pressed": (newSelectedValue: BentoListboxOptions) => void;
+        "space-pressed": (newSelectedValue: BentoListboxOptions) => void;
+        "enter-pressed": (newSelectedValue: BentoListboxOptions) => 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, BentoListboxSelectedValue } from "../../../../types";
+import { BentoListboxOptions } 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<BentoListboxSelectedValue>;
+        type: PropType<BentoListboxOptions>;
         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: BentoListboxSelectedValue) => void;
+    "enter-pressed": (newSelectedValue: BentoListboxOptions) => void;
 } & {
     "escape-pressed": () => void;
 } & {
-    select: (newSelectedValue: BentoListboxSelectedValue) => void;
+    select: (newSelectedValue: BentoListboxOptions) => void;
 } & {
     "show-more": () => void;
 } & {
-    "space-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
+    "space-pressed": (newSelectedValue: BentoListboxOptions) => void;
 } & {
-    "tab-pressed": (newSelectedValue: BentoListboxSelectedValue) => void;
+    "tab-pressed": (newSelectedValue: BentoListboxOptions) => 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<BentoListboxSelectedValue>;
+        type: PropType<BentoListboxOptions>;
         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: BentoListboxSelectedValue;
+    selectedValue: BentoListboxOptions;
     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 { UseDisplayValue } from './use-display-value.types';
-export declare const useDisplayValue: UseDisplayValue;
+import { UseDisplayValueOptions } from './use-display-value.types';
+export declare const useDisplayValue: ({ items, placeholder, selectedValues }: UseDisplayValueOptions) => import("vue").ComputedRef<string>;

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

@@ -1,28 +1,7 @@
-import { BentoListboxOptions, BentoListboxSelectedValue } from "../../../types";
+import { BentoListboxOptions } from "../../../types";
 import { Ref } from 'vue';
-import type { ComputedRef } from 'vue';
-export interface SingleSelectOptions {
+export interface UseDisplayValueOptions {
     items: Ref<BentoListboxOptions>;
     placeholder: Ref<string>;
-    selectedValue: Ref<BentoListboxSelectedValue>;
-    staticCategories: boolean;
+    selectedValues: Ref<BentoListboxOptions>;
 }
-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 {};

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

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

package/dist/@types/packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { BentoModalEvent } from "../../../modal";
-import { BentoFilterBarModel, BentoFilterItemType, BentoFilterModel } from "../..";
+import { BentoFilterBarModel, BentoFilterItemType, BentoFilterModel } from "../../filter-bar.types";
 import { AllFiltersModalEvent } from './all-filters-modal.types';
 declare const _default: import("vue").DefineComponent<{
     value: {

package/dist/@types/packages/vue2/src/components/filter-bar/components/range-filter/index.d.ts

@@ -0,0 +1 @@
+export { default as BentoRangeFilter } from './range-filter.vue';

package/dist/@types/packages/vue2/src/components/filter-bar/components/select-filter/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectFilterButton } from './select-filter-button/select-filter-button.vue';
+export { default as SelectFilterDropdown } from './select-filter-dropdown/select-filter-dropdown.vue';

package/dist/@types/packages/vue2/src/components/filter-bar/components/select-filter/components/select-filter-button/select-filter-button.vue.d.ts

@@ -0,0 +1,69 @@
+import { PropType } from 'vue';
+import { BentoListboxSelectedValue } from "../../../../../../types";
+import { BentoSelectFilterOptions } from '../../../../filter-bar.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    defaultValue: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    onlySlot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: PropType<BentoSelectFilterOptions>;
+        default: any;
+    };
+    value: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
+    input: (value: any) => void;
+} & {
+    update: (value: any) => void;
+}, string, Readonly<import("vue").ExtractPropTypes<{
+    defaultValue: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    onlySlot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: PropType<BentoSelectFilterOptions>;
+        default: any;
+    };
+    value: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+}>>, {
+    value: BentoListboxSelectedValue;
+    options: BentoSelectFilterOptions;
+    defaultValue: BentoListboxSelectedValue;
+    onlySlot: boolean;
+}>, Record<string, (_: any) => any>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/components/filter-bar/components/select-filter/components/select-filter-dropdown/select-filter-dropdown.vue.d.ts

@@ -0,0 +1,69 @@
+import { PropType } from 'vue';
+import { BentoListboxSelectedValue } from "../../../../../../types";
+import { BentoSelectFilterOptions } from '../../../../filter-bar.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    defaultValue: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    onlySlot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: PropType<BentoSelectFilterOptions>;
+        default: any;
+    };
+    value: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
+    input: (updatedProps: any) => void;
+} & {
+    update: (updatedProps: any) => void;
+}, string, Readonly<import("vue").ExtractPropTypes<{
+    defaultValue: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+    field: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    onlySlot: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: PropType<BentoSelectFilterOptions>;
+        default: any;
+    };
+    value: {
+        type: PropType<BentoListboxSelectedValue>;
+        default: any;
+    };
+}>>, {
+    value: BentoListboxSelectedValue;
+    options: BentoSelectFilterOptions;
+    defaultValue: BentoListboxSelectedValue;
+    onlySlot: boolean;
+}>, Record<string, (_: any) => any>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/components/filter-bar/components/select-filter/select-filter.vue.d.ts

@@ -1,7 +1,7 @@
-import { PropType } from 'vue';
 import { BentoListboxSelectedValue } from "../../../../types";
-import { BentoFilterEvent, BentoSelectFilterOptions } from '../../filter-bar.types';
-declare const _default: import("vue").DefineComponent<{
+import { BentoSelectFilterOptions } from '../../filter-bar.types';
+import { PropType } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     defaultValue: {
         type: PropType<BentoListboxSelectedValue>;
         default: any;
@@ -26,25 +26,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoListboxSelectedValue>;
         default: any;
     };
-}, {
-    appliedFiltersCount: import("vue").ComputedRef<string | number>;
-    filteredItems: import("vue").ComputedRef<any>;
-    internalFilterValue: import("vue").Ref<import("../../../../types").BentoListboxValue | import("../../../../types").BentoListboxValue[]>;
-    isApplyButtonDisabled: import("vue").ComputedRef<boolean>;
-    isSecondaryButtonDisabled: import("vue").ComputedRef<boolean>;
-    listboxFilterId: import("vue").ComputedRef<string>;
-    noResultsMessage: import("vue").ComputedRef<string>;
-    slots: import("vue/types/v3-setup-context").Slots;
-    buttonLabel: import("vue").ComputedRef<string>;
-    buttonSecondaryLabel: import("vue").ComputedRef<string>;
-    searchTerm: import("vue").Ref<string>;
-    clearFilter: () => void;
-    closeFilter: () => void;
-    onOptionSelected: (selectedValue: BentoListboxSelectedValue) => void;
-    openFilter: () => void;
-    updateFilter: () => void;
-    resetFilter: () => void;
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoFilterEvent[], string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
+    input: (updatedProps: any) => void;
+} & {
+    update: (updatedProps: any) => void;
+}, string, Readonly<import("vue").ExtractPropTypes<{
     defaultValue: {
         type: PropType<BentoListboxSelectedValue>;
         default: any;
@@ -74,5 +60,10 @@ declare const _default: import("vue").DefineComponent<{
     options: BentoSelectFilterOptions;
     defaultValue: BentoListboxSelectedValue;
     onlySlot: boolean;
-}>;
+}>, Record<string, (_: any) => any> & Record<string, (_: any) => any>>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-chips/listbox-multi-select-chips.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { BentoListboxOptionItem, BentoListboxOptions, BentoListboxValue } from "../../../../../../../types";
+import { BentoListboxOptionItem, BentoListboxOptions } from "../../../../../../../types";
 declare const _default: import("vue").DefineComponent<{
     isOptionDisabled: {
         type: PropType<(optionValue: BentoListboxOptionItem) => boolean>;
@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
 }, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
-    "unselect-item": (value: BentoListboxValue) => void;
+    "unselect-item": (value: BentoListboxOptionItem) => void;
 } & {
     "unselect-category": (item: BentoListboxOptionItem) => void;
 }, string, Readonly<import("vue").ExtractPropTypes<{

package/dist/@types/packages/vue2/src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/listbox-multi-select-options.vue.d.ts

@@ -35,10 +35,9 @@ declare const _default: import("vue").DefineComponent<{
         'b-listbox-multi-select-options__static-category-option': boolean;
         'b-listbox-multi-select-options__category-option': boolean;
     }>;
-    isCategory: (option: BentoListboxOptionItem) => boolean;
     isOptionSelected: (option: any) => boolean;
     shouldShowDescription: (option: BentoListboxOptionItem) => boolean;
-    toggleCheckboxSelection: (value: BentoListboxValue) => void;
+    toggleCheckboxSelection: (option: BentoListboxOptionItem) => void;
     selectSearch: (selectedValue: any, option: any) => void;
     BentoListboxEvent: typeof BentoListboxEvent;
     ListboxMultiSelectOptionsEvent: typeof ListboxMultiSelectOptionsEvent;

package/dist/@types/packages/vue2/src/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.vue.d.ts

@@ -1,6 +1,10 @@
 import { PropType } from 'vue';
-import { BentoListboxEvent, BentoListboxOptionItem, BentoListboxOptions, BentoListboxSelectedValue, BentoListboxValue } from "../../../../../types";
+import { BentoListboxEvent, BentoListboxLazyLoadType, BentoListboxOptionItem, BentoListboxOptions, BentoListboxValue } from "../../../../../types";
 declare const _default: import("vue").DefineComponent<{
+    hasMoreItems: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isOptionDisabled: {
         type: PropType<(optionValue: BentoListboxOptionItem) => boolean>;
         default: () => false;
@@ -9,13 +13,18 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoListboxOptions>;
         required: true;
     };
+    lazyLoadType: {
+        type: PropType<"button" | "none" | "automatic" | BentoListboxLazyLoadType>;
+        default: BentoListboxLazyLoadType;
+        validator: (value: BentoListboxLazyLoadType) => boolean;
+    };
     searching: {
         type: BooleanConstructor;
         default: boolean;
     };
     selectedValues: {
-        type: PropType<BentoListboxSelectedValue>;
-        default: () => BentoListboxSelectedValue;
+        type: PropType<BentoListboxOptions>;
+        required: true;
     };
     staticCategories: {
         type: BooleanConstructor;
@@ -30,13 +39,14 @@ declare const _default: import("vue").DefineComponent<{
     isIndeterminate: import("vue").ComputedRef<boolean>;
     isMultiLevelSelect: import("vue").ComputedRef<boolean>;
     flattenedItemsList: import("vue").ComputedRef<any[]>;
-    selectedItemsList: import("vue").Ref<any>;
+    selectedItemsList: import("vue").ComputedRef<BentoListboxValue[]>;
     selectAllCheckboxText: import("vue").ComputedRef<string>;
-    selectedOptions: import("vue").ComputedRef<BentoListboxOptionItem[]>;
+    selectedOptions: import("vue").ComputedRef<BentoListboxOptions>;
+    showSelectAllCheckbox: import("vue").ComputedRef<boolean>;
     slots: import("vue/types/v3-setup-context").Slots;
     BentoListboxEvent: typeof BentoListboxEvent;
     selectAllCategory: (category: BentoListboxOptionItem) => void;
-    toggleCheckboxSelection: (eventName: any, value: BentoListboxValue) => void;
+    toggleCheckboxSelection: (eventName: any, selectedOption: BentoListboxOptionItem) => void;
     toggleSelectAll: (selectedValue: boolean) => void;
     unselectAllCategory: (category: BentoListboxOptionItem) => void;
     listboxListeners: {
@@ -46,6 +56,10 @@ declare const _default: import("vue").DefineComponent<{
         "keydown:end": () => void;
     };
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoListboxEvent.SELECT[], string, Readonly<import("vue").ExtractPropTypes<{
+    hasMoreItems: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     isOptionDisabled: {
         type: PropType<(optionValue: BentoListboxOptionItem) => boolean>;
         default: () => false;
@@ -54,13 +68,18 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoListboxOptions>;
         required: true;
     };
+    lazyLoadType: {
+        type: PropType<"button" | "none" | "automatic" | BentoListboxLazyLoadType>;
+        default: BentoListboxLazyLoadType;
+        validator: (value: BentoListboxLazyLoadType) => boolean;
+    };
     searching: {
         type: BooleanConstructor;
         default: boolean;
     };
     selectedValues: {
-        type: PropType<BentoListboxSelectedValue>;
-        default: () => BentoListboxSelectedValue;
+        type: PropType<BentoListboxOptions>;
+        required: true;
     };
     staticCategories: {
         type: BooleanConstructor;
@@ -70,6 +89,7 @@ declare const _default: import("vue").DefineComponent<{
     isOptionDisabled: (optionValue: BentoListboxOptionItem) => boolean;
     staticCategories: boolean;
     searching: boolean;
-    selectedValues: BentoListboxSelectedValue;
+    hasMoreItems: boolean;
+    lazyLoadType: "button" | "none" | "automatic" | BentoListboxLazyLoadType;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/components/internal/listbox/components/listbox-single-select/listbox-single-select.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { BentoListboxEvent, BentoListboxOptions, BentoListboxSelectedValue } from "../../../../../types";
+import { BentoListboxEvent, BentoListboxOptions } from "../../../../../types";
 declare const _default: import("vue").DefineComponent<{
     isOptionDisabled: {
         type: PropType<(optionValue: import("../../../../../types").BentoListboxOptionItem) => boolean>;
@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     selectedValue: {
-        type: PropType<BentoListboxSelectedValue>;
+        type: PropType<BentoListboxOptions>;
         default: any;
     };
     staticCategories: {
@@ -20,9 +20,10 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     BentoListboxEvent: typeof BentoListboxEvent;
     listboxItemRef: import("vue").Ref<any[]>;
+    selectedItem: import("vue").ComputedRef<import("../../../../../types").BentoListboxOptionItem>;
     slots: import("vue/types/v3-setup-context").Slots;
     hasCategories: import("vue").ComputedRef<boolean>;
-    onOptionSelected: (eventName: any) => (selectedValue: BentoListboxSelectedValue) => void;
+    onOptionSelected: (eventName: any) => (selectedOption: BentoListboxOptions) => void;
     listboxListeners: {
         "keydown:arrow-up": (event?: CustomEvent<KeyboardEvent>) => void;
         "keydown:arrow-down": (event?: CustomEvent<KeyboardEvent>) => void;
@@ -30,10 +31,10 @@ declare const _default: import("vue").DefineComponent<{
         "keydown:end": () => void;
     };
     listboxOptionListeners: {
-        select: (selectedValue: BentoListboxSelectedValue) => void;
-        "space-pressed": (selectedValue: BentoListboxSelectedValue) => void;
-        "tab-pressed": (selectedValue: BentoListboxSelectedValue) => void;
-        "enter-pressed": (selectedValue: BentoListboxSelectedValue) => void;
+        select: (selectedOption: BentoListboxOptions) => void;
+        "space-pressed": (selectedOption: BentoListboxOptions) => void;
+        "tab-pressed": (selectedOption: BentoListboxOptions) => void;
+        "enter-pressed": (selectedOption: BentoListboxOptions) => void;
     };
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, (BentoListboxEvent.SELECT | BentoListboxEvent.ENTER | BentoListboxEvent.SPACE | BentoListboxEvent.TAB)[], string, Readonly<import("vue").ExtractPropTypes<{
     isOptionDisabled: {
@@ -45,7 +46,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     selectedValue: {
-        type: PropType<BentoListboxSelectedValue>;
+        type: PropType<BentoListboxOptions>;
         default: any;
     };
     staticCategories: {
@@ -54,7 +55,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     isOptionDisabled: (optionValue: import("../../../../../types").BentoListboxOptionItem) => boolean;
-    selectedValue: BentoListboxSelectedValue;
+    selectedValue: BentoListboxOptions;
     staticCategories: boolean;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/components/internal/listbox/composables/use-cached-selected-values/use-cached-selected-values.d.ts

@@ -0,0 +1,14 @@
+import { BentoListboxOptions, BentoListboxSelectedValue, BentoListboxValue } from "../../../../../types";
+import { Ref } from 'vue';
+export declare const useCachedSelectedValues: (items: Ref<BentoListboxOptions>, selectedValues: Ref<BentoListboxSelectedValue>, multiple: Ref<boolean>) => {
+    cachedSelectedValues: Ref<{
+        data?: unknown;
+        description?: string;
+        value: BentoListboxValue;
+        items?: any[];
+        label: string;
+    }[]>;
+    simpleSelectedValuesCache: Ref<BentoListboxSelectedValue>;
+    resetCache: () => void;
+    setCachedValues: (newSelectedValues: BentoListboxOptions) => void;
+};

package/dist/@types/packages/vue2/src/components/internal/listbox/index.d.ts

@@ -1,3 +1,4 @@
 export { default as BentoListbox } from './listbox.vue';
 export { ListboxOptionTag } from './components/listbox-option-tag';
 export { useMultiLevelItems } from './composables/use-multi-level-items/use-multi-level-items';
+export { useCachedSelectedValues } from './composables/use-cached-selected-values/use-cached-selected-values';