@adyen/bento-vue3 1.24.0 → 1.26.0

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

@@ -1,7 +1,7 @@
 import { PropType } from "../../../../../../vue3/node_modules/vue";
 import { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridAllItemsSelectedState, BentoDatagridSortByColumn } from '../../data-grid.types';
-import { BentoDatagridDraggingColumnState } from './data-grid-columns.types';
-import { DatagridColumnHoveringState } from "../../composables/use-column-hovering";
+import { BentoDatagridDraggingColumnState, DatagridColumnsHeaderReferences } from './data-grid-columns.types';
+import type { DatagridColumnHoveringState } from "../../composables/use-column-hovering";
 /**
  * A component to display the BentoDataGrid columns
  *
@@ -103,7 +103,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     /**
      * Toggled to true when the DataGrid has auto width columns and is measuring the
      */
-    isMeasuringColunWidths: {
+    isMeasuringColumnWidths: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -157,7 +157,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
+}, {
+    columnHeaderRefs: import("../../../../../../vue3/node_modules/vue").Ref<DatagridColumnsHeaderReferences>;
+}, unknown, {}, {}, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, {
     "column-resize": (column: {
         field: string;
         width: number;
@@ -248,7 +250,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     /**
      * Toggled to true when the DataGrid has auto width columns and is measuring the
      */
-    isMeasuringColunWidths: {
+    isMeasuringColumnWidths: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -328,7 +330,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     hasColumnPanel: boolean;
     hasFirstColumnPanelRightAligned: boolean;
     hasLeftOverflow: boolean;
-    isMeasuringColunWidths: boolean;
+    isMeasuringColumnWidths: boolean;
     isOnlyOneVisibleColumn: boolean;
     showFrozenColumnsSeparator: boolean;
     allItemsSelectedState: BentoDatagridAllItemsSelectedState;

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

@@ -1,12 +1,15 @@
-import { Ref } from "../../../../../../vue3/node_modules/vue";
-import { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridData } from '../../data-grid.types';
-import { CalculateColumnWidthOptions } from './use-calculate-column-width.types';
-import { MaybeRef } from "../../../../types";
+import { type Ref } from "../../../../../../vue3/node_modules/vue";
+import type { BentoColumn, BentoColumnWidthOverridesLookup, BentoDatagridData } from '../../data-grid.types';
+import type { CalculateColumnWidthOptions } from './use-calculate-column-width.types';
+import type { MaybeRef } from "../../../../types";
+import type { DatagridColumnsHeaderReferences } from '../../components/data-grid-columns/data-grid-columns.types';
 export declare const DEFAULT_COLUMN_WIDTH = 100;
 export declare const DEFAULT_COLUMN_MIN_WIDTH = 50;
 export declare const DATAGRID_SELECT_FIELD_NAME = "b-select";
 export declare const DATAGRID_SELECT_WIDTH = 32;
 export declare const DATAGRID_SELECT_WIDTH_WITH_SELECT_ALL_PAGES_ENABLED = 56;
+export declare const DATAGRID_CELL_OFFSET_INITIAL = 4;
+export declare const DATAGRID_CELL_OFFSET_PADDING = 16;
 /**
  * Calculates the width of the columns using width, minWidth and/or a fluid number.
  *
@@ -16,7 +19,7 @@ export declare const DATAGRID_SELECT_WIDTH_WITH_SELECT_ALL_PAGES_ENABLED = 56;
  * @param gridCellRefs An array of Ref for each one of the cells available by Column
  * @param options Optional options for the calculator to be aware of.
  */
-export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, newData: MaybeRef<BentoDatagridData>, bodyRef: MaybeRef<HTMLDivElement | undefined>, gridCellRefs: MaybeRef<{
+export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, newData: MaybeRef<BentoDatagridData>, bodyRef: MaybeRef<HTMLDivElement | undefined>, gridColumnsComponentRefs: MaybeRef<DatagridColumnsHeaderReferences>, gridCellRefs: MaybeRef<{
     [key: string]: HTMLDivElement[];
 }>, options?: CalculateColumnWidthOptions) => {
     columnDefs: import("../../../../../../vue3/node_modules/vue").ComputedRef<{
@@ -73,18 +76,30 @@ export declare const useCalculateColumnWidth: (newColumns: Ref<BentoColumn[]>, n
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
             title?: string;
-            event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

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

@@ -6,6 +6,7 @@ export type FlexColumnLookup = Record<BentoColumn['field'], {
     frozen: boolean;
 }>;
 export interface CalculateColumnWidthOptions {
+    hasColumnPanel?: Ref<boolean>;
     hasSelectableColumn?: Ref<boolean>;
     hasSelectableAcrossPages?: Ref<boolean>;
 }

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

@@ -30,18 +30,30 @@ export declare const useColumnHovering: (columnSets: Ref<DatagridConfigSettingsC
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
             title?: string;
-            event?: (rowDataItem: import("../..").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

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

@@ -38,18 +38,30 @@ export declare const useColumnReorderer: (columnsRef: MaybeRef<BentoColumn[]>, h
                 iconLeft?: object | Element | (object | Element)[];
                 iconRight?: object | Element | (object | Element)[];
                 title?: string;
-                event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 isShort?: true;
                 variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
                 menuData?: {
+                    handler?: () => void;
+                    event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                     text: string;
-                    handler: () => void;
-                    secondaryText?: string;
-                    items?: any[];
+                    critical?: boolean;
                     disabled?: boolean;
-                    chevron?: boolean;
                     icon?: object | Element | (object | Element)[];
-                    critical?: boolean;
+                    items?: {
+                        text: string;
+                        handler: () => void;
+                        secondaryText?: string;
+                        items?: any[];
+                        disabled?: boolean;
+                        chevron?: boolean;
+                        icon?: object | Element | (object | Element)[];
+                        critical?: boolean;
+                        indent?: boolean;
+                        addDivider?: boolean;
+                    }[];
+                    secondaryText?: string;
+                    chevron?: boolean;
                     indent?: boolean;
                     addDivider?: boolean;
                 }[];
@@ -85,18 +97,30 @@ export declare const useColumnReorderer: (columnsRef: MaybeRef<BentoColumn[]>, h
                 iconLeft?: object | Element | (object | Element)[];
                 iconRight?: object | Element | (object | Element)[];
                 title?: string;
-                event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 isShort?: true;
                 variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
                 menuData?: {
+                    handler?: () => void;
+                    event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                     text: string;
-                    handler: () => void;
-                    secondaryText?: string;
-                    items?: any[];
+                    critical?: boolean;
                     disabled?: boolean;
-                    chevron?: boolean;
                     icon?: object | Element | (object | Element)[];
-                    critical?: boolean;
+                    items?: {
+                        text: string;
+                        handler: () => void;
+                        secondaryText?: string;
+                        items?: any[];
+                        disabled?: boolean;
+                        chevron?: boolean;
+                        icon?: object | Element | (object | Element)[];
+                        critical?: boolean;
+                        indent?: boolean;
+                        addDivider?: boolean;
+                    }[];
+                    secondaryText?: string;
+                    chevron?: boolean;
                     indent?: boolean;
                     addDivider?: boolean;
                 }[];

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

@@ -44,18 +44,30 @@ export declare const useConfigSettings: (columnsRef: MaybeRef<BentoColumn[]>, em
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
             title?: string;
-            event?: (rowDataItem: import("../../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

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

@@ -47,18 +47,30 @@ export declare const useResizer: (columns: Ref<BentoColumn[]>, emit: (event: Dat
             iconLeft?: object | Element | (object | Element)[];
             iconRight?: object | Element | (object | Element)[];
             title?: string;
-            event?: (rowDataItem: import("../data-grid.types").BentoDatagridDataItem, columnKey: string) => void;
+            event?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
             isShort?: true;
             variant?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionVariant;
             menuData?: {
+                handler?: () => void;
+                event?: import("../components/data-grid-cell-actions/data-grid-cell-actions.types").BentoColumnCellActionEvent;
                 text: string;
-                handler: () => void;
-                secondaryText?: string;
-                items?: any[];
+                critical?: boolean;
                 disabled?: boolean;
-                chevron?: boolean;
                 icon?: object | Element | (object | Element)[];
-                critical?: boolean;
+                items?: {
+                    text: string;
+                    handler: () => void;
+                    secondaryText?: string;
+                    items?: any[];
+                    disabled?: boolean;
+                    chevron?: boolean;
+                    icon?: object | Element | (object | Element)[];
+                    critical?: boolean;
+                    indent?: boolean;
+                    addDivider?: boolean;
+                }[];
+                secondaryText?: string;
+                chevron?: boolean;
                 indent?: boolean;
                 addDivider?: boolean;
             }[];

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

@@ -90,8 +90,8 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             title: string;
             image: "1-generic-use" | "2-generic-use" | "3-generic-use" | "4-generic-use" | "adding-payment-methods" | "adyen-giving" | "internal-error" | "no-results-found" | "notifications-cleared" | "page-not-found" | "planned-maintenance" | "referrals" | "success" | "upload-files" | "wrong-environment";
             variant: "condensed" | "full-page" | "embedded" | "basic";
-            description: string;
             action: import("../button").BentoButtonActionObject;
+            description: string;
             headingEl: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
         }> & Omit<Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
             action: {
@@ -102,8 +102,14 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             description: {
                 type: StringConstructor;
                 default: any;
-            };
+            }; /**
+             * If resize is enabled
+             */
             headingEl: {
+                /**
+                 * A customisable method to determine if a row is not selectable.
+                 * The default is that every row is selectable.
+                 */
                 type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">;
                 default: any;
                 validator: (value: import("../typography").BentoTypographyElement) => boolean;
@@ -122,7 +128,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
                 default: string;
                 validator: (value: import("../empty-state").BentoEmptyStateVariant) => boolean;
             };
-        }>> & import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, "title" | "image" | "variant" | "description" | "action" | "headingEl">>;
+        }>> & import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, "title" | "image" | "variant" | "action" | "description" | "headingEl">>;
         default: any;
     };
     /**
@@ -222,29 +228,6 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             };
             hasNext: {
                 type: BooleanConstructor;
-                /**
-                 * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
-                 *
-                 * @example
-                 * import { BentoDataGrid } from '@adyen/bento-vue2';
-                 *
-                 * export default {
-                 *     components: { BentoDataGrid },
-                 *     template: `
-                 *          <bento-data-grid
-                 *               :data="[
-                 *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
-                 *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
-                 *               ]"
-                 *               :columns="[
-                 *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
-                 *                  { field: 'company', label: 'Reference' },
-                 *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
-                 *                ]"
-                 *          />
-                 *     `
-                 * }
-                 */
                 default: any;
             };
             hidePageSize: {
@@ -410,8 +393,8 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             title: string;
             image: "1-generic-use" | "2-generic-use" | "3-generic-use" | "4-generic-use" | "adding-payment-methods" | "adyen-giving" | "internal-error" | "no-results-found" | "notifications-cleared" | "page-not-found" | "planned-maintenance" | "referrals" | "success" | "upload-files" | "wrong-environment";
             variant: "condensed" | "full-page" | "embedded" | "basic";
-            description: string;
             action: import("../button").BentoButtonActionObject;
+            description: string;
             headingEl: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
         }> & Omit<Readonly<import("../../../../vue3/node_modules/vue").ExtractPropTypes<{
             action: {
@@ -422,8 +405,14 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             description: {
                 type: StringConstructor;
                 default: any;
-            };
+            }; /**
+             * If resize is enabled
+             */
             headingEl: {
+                /**
+                 * A customisable method to determine if a row is not selectable.
+                 * The default is that every row is selectable.
+                 */
                 type: PropType<"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span">;
                 default: any;
                 validator: (value: import("../typography").BentoTypographyElement) => boolean;
@@ -442,7 +431,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
                 default: string;
                 validator: (value: import("../empty-state").BentoEmptyStateVariant) => boolean;
             };
-        }>> & import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, "title" | "image" | "variant" | "description" | "action" | "headingEl">>;
+        }>> & import("../../../../vue3/node_modules/vue").VNodeProps & import("../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../vue3/node_modules/vue").ComponentCustomProps, "title" | "image" | "variant" | "action" | "description" | "headingEl">>;
         default: any;
     };
     /**
@@ -542,29 +531,6 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../vue3/node_mo
             };
             hasNext: {
                 type: BooleanConstructor;
-                /**
-                 * A component to display data in columns and row format with a whole array of configuration for visualization and interaction.
-                 *
-                 * @example
-                 * import { BentoDataGrid } from '@adyen/bento-vue2';
-                 *
-                 * export default {
-                 *     components: { BentoDataGrid },
-                 *     template: `
-                 *          <bento-data-grid
-                 *               :data="[
-                 *                  { id: '123', name: 'John', company: 'TestCompany', 'payment': 200 }
-                 *                  { id: '321', name: 'Jane', company: 'Adyen', 'payment': 300 }
-                 *               ]"
-                 *               :columns="[
-                 *                  { field: 'name', label: 'Name', minWidth: 300, mandatory: true },
-                 *                  { field: 'company', label: 'Reference' },
-                 *                  { field: 'payment', label: 'Payment', width: 200, minWidth: 150 },
-                 *                ]"
-                 *          />
-                 *     `
-                 * }
-                 */
                 default: any;
             };
             hidePageSize: {
@@ -687,9 +653,9 @@ 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;

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

@@ -223,11 +223,11 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     max: any;
     min: any;
     description: string;
-    optional: boolean;
-    readonly: boolean;
     isDateDisabled: any;
     firstDayOfWeek: any;
     tooltipText: string;
+    optional: boolean;
     errorMessage: string;
+    readonly: boolean;
 }>;
 export default _default;

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

@@ -282,14 +282,14 @@ declare const _default: import("../../../../vue3/node_modules/vue").DefineCompon
     max: any;
     min: any;
     description: string;
-    optional: boolean;
-    readonly: boolean;
     isDateDisabled: any;
     firstDayOfWeek: any;
     maxRange: any;
     numberOfMonths: any;
     tooltipText: string;
+    optional: boolean;
     errorMessage: string;
+    readonly: boolean;
     allowTimeInput: boolean;
     granularities: any;
     quickSelectRanges: DateRangePickerCalendarRangeSelectorItems;

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

@@ -259,9 +259,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     value: string;
     disabled: boolean;
     multiple: boolean;
-    readonly: boolean;
     open: boolean;
     ariaLabel: string;
+    readonly: boolean;
     additionalItemsSelected: string | number;
     alwaysComboboxIsInput: boolean;
     ariaLabelledby: string;

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

@@ -260,9 +260,9 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     condensed: boolean;
     disabled: boolean;
     multiple: boolean;
-    readonly: boolean;
     open: boolean;
     ariaLabel: string;
+    readonly: boolean;
     additionalItemsSelected: string | number;
     ariaLabelledby: string;
     debounceTime: number;

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

@@ -1,5 +1,5 @@
 import { Ref } from "../../../../../../../vue3/node_modules/vue";
-import { BentoListboxEvent, BentoListboxSelectedValue } from "../../../../../types";
+import { BentoListboxEvent, BentoListboxOptions } from "../../../../../types";
 import { BentoDropdownEvent } from '../../../dropdown.types';
 /**
  * A composable that handles all dropdown options option selecting logic & listeners.
@@ -11,7 +11,7 @@ import { BentoDropdownEvent } from '../../../dropdown.types';
  * @param isOpen The isOpen property passed into the dropdown options container component.
  * @param emit The emit function for the dropdown options container component.
  */
-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("../../../../../../../vue3/node_modules/vue").ComputedRef<({
         title: string;
         event: () => void;
@@ -21,13 +21,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 "../../../../../../vue3/node_modules/vue";
-import { BentoListboxOptions, BentoListboxSelectedValue } from "../../../../types";
+import { BentoListboxOptions } from "../../../../types";
 import { BentoDropdownEmptyStateProps, BentoDropdownLazyLoadType, BentoDropdownSize, BentoDropdownVirtulisationOptions } from '../../dropdown.types';
 /**
  * Dropdown options container.
@@ -128,7 +128,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
      * Set to an empty string `''` if you don't want any of the available options to be selected for single select
      */
     selectedValue: {
-        type: PropType<BentoListboxSelectedValue>;
+        type: PropType<BentoListboxOptions>;
         default: any;
     };
     /**
@@ -166,17 +166,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: 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, 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<{
     /**
      * Defines a string value that labels an interactive element.
@@ -282,7 +282,7 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
      * Set to an empty string `''` if you don't want any of the available options to be selected for single select
      */
     selectedValue: {
-        type: PropType<BentoListboxSelectedValue>;
+        type: PropType<BentoListboxOptions>;
         default: any;
     };
     /**
@@ -316,10 +316,10 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
         default: boolean;
     };
 }>> & {
-    onSelect?: (newSelectedValue: BentoListboxSelectedValue) => any;
-    "onEnter-pressed"?: (newSelectedValue: BentoListboxSelectedValue) => any;
-    "onSpace-pressed"?: (newSelectedValue: BentoListboxSelectedValue) => any;
-    "onTab-pressed"?: (newSelectedValue: BentoListboxSelectedValue) => any;
+    onSelect?: (newSelectedValue: BentoListboxOptions) => any;
+    "onEnter-pressed"?: (newSelectedValue: BentoListboxOptions) => any;
+    "onSpace-pressed"?: (newSelectedValue: BentoListboxOptions) => any;
+    "onTab-pressed"?: (newSelectedValue: BentoListboxOptions) => any;
     "onShow-more"?: () => any;
     "onEscape-pressed"?: () => any;
     "onClose-dropdown"?: () => any;
@@ -327,14 +327,14 @@ declare const _default: __VLS_WithTemplateSlots<import("../../../../../../vue3/n
     disabled: boolean;
     multiple: boolean;
     isOptionDisabled: (optionValue: import("../../../../types").BentoListboxOptionItem) => boolean;
-    selectedValue: BentoListboxSelectedValue;
+    selectedValue: BentoListboxOptions;
     staticCategories: boolean;
     ariaLabel: string;
     searching: any;
-    loading: boolean;
-    emptyState: BentoDropdownEmptyStateProps;
     hasMoreItems: boolean;
     lazyLoadType: "button" | "none" | "automatic" | BentoDropdownLazyLoadType;
+    loading: boolean;
+    emptyState: BentoDropdownEmptyStateProps;
     virtualScroll: BentoDropdownVirtulisationOptions;
     inputSize: "DropdownInputDefault" | "DropdownInputSmall" | BentoDropdownSize;
 }>, Record<NonNullable<string | number>, (_: any) => any>>;

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

@@ -199,9 +199,9 @@ declare const _default: import("../../../../../../vue3/node_modules/vue").Define
 }, {
     value: string;
     disabled: boolean;
-    readonly: boolean;
     open: boolean;
     ariaLabel: string;
+    readonly: boolean;
     additionalItemsSelected: string | number;
     ariaLabelledby: string;
     debounceTime: number;