@adyen/bento-vue2 0.10.1 → 1.0.0-rc-2

package/README.md

@@ -31,19 +31,32 @@ In order to use the compoent via the `BentoVue` plugin, the following steps must
 1. Load the plugin globally in **Vue**
 2. Import the `font.css` file.
 3. Initialize `vue-i18n`.
-4. Use the library defined components in your application
+4. Add changes to your [bundler](#Bundlers) configuration e.g. [webpack](#webpack) or [vite](#vite).
+5. Use the library defined components in your application
 
 #### Load plugin and register components
 
 Import the Bento Vue plugin to inject the theme by default to Vue in order to allow the components to use the Design
 Token CSS variables:
 
+##### Vue 2
+
 ```javascript
 import BentoVue from '@adyen/bento-vue2';
 
 Vue.use(BentoVue);
 ```
 
+##### Vue 3
+
+```javascript
+import BentoVue from '@adyen/bento-vue3';
+
+const app = createApp()
+    .use(BentoVue, { withToast: true }) // this line installs Bento and includes the toast component
+    .mount('#app');
+```
+
 #### Import the fonts
 
 When using the default theme, you will need to include the required `Inter` font in your project application. This can
@@ -51,15 +64,25 @@ easily be done by simply importing the `font.css` file.
 
 NOTE: make sure the builder your are using (e.g. `webpack` , `vite`, etc...) is able to process font files.
 
+##### Vue 2
+
 ```javascript
 import '@adyen/bento-vue2/fonts.css';
 ```
 
+##### Vue 3
+
+```javascript
+import '@adyen/bento-vue3/fonts.css';
+```
+
 #### Initialize `vue-i18n`
 
 Some Bento components require translations for which the `vue-i18n` package was used so it has to be initialized like
 this:
 
+##### Vue 2
+
 ```diff
 import Vue from 'vue';
 + import VueI18n from 'vue-i18n';
@@ -80,34 +103,183 @@ const app = new Vue({
 });
 ```
 
+##### Vue 3
+
+```diff
+import BentoVue from '@adyen/bento-vue3';
++ import VueI18n from 'vue-i18n';
+
++ const i18n = createI18n({
++    locale: 'en-US',
++    fallbackLocale: 'en-US',
++    fallbackRoot: false,
++    allowComposition: true,
++ });
+
+const app = createApp()
+    .use(BentoVue, { withToast: true }) // this line installs Bento
++   .use(i18n) // this line vue-i18n
+    .mount('#app');
+```
+
 #### Use the components
 
 Inside the `.vue` components of your application, you can simply use the available components:
 
-```javascript
+##### Vue 2
+
+```html
+<template>
+    <bento-button @click="onClickHandler"> {{ buttonLabel }} </bento-button>
+</template>
+
+<script lang="ts">
+    import { BentoButton } from '@adyen/bento-vue2';
+
+    export default {
+        components: { BentoButton },
+        setup() {
+            const buttonLabel = ref('Button text');
+
+            const onClickHandler = () => {
+                // click event handler logic
+            };
+
+            return { buttonLabel, onClickHandler };
+        },
+    };
+</script>
+```
+
+##### Vue 3
+
+```html
 <template>
-    <bento-button @click="onClickHandler">
-        {{ buttonLabel }}
-    </bento-button>
+    <bento-button @click="onClickHandler"> {{ buttonLabel }} </bento-button>
 </template>
 
-<script>
-    import { BentoButton } from '@adyen/bento-vue2'
+<script lang="ts">
+    import { BentoButton } from '@adyen/bento-vue3';
 
     export default {
         components: { BentoButton },
-        data: () => ({
-            buttonLabel: 'Button text'
-        }),
-        methods: {
-            onClickHandler() {
+        setup() {
+            const buttonLabel = ref('Button text');
+
+            const onClickHandler = () => {
                 // click event handler logic
-            }
-        }
-    }
+            };
+
+            return { buttonLabel, onClickHandler };
+        },
+    };
 </script>
 ```
 
+### Bundlers
+
+#### Webpack
+
+To set things up you will need to make sure you have the following things in your webpack configuration.
+[Full example of a webpack configuration file](https://github.com/Adyen/bento/blob/main/packages/vue2-e2e/webpack.config.ts))
+
+NOTE: replace all occurrence of of `bento-vue2` with `bento-vue3` if using the Vue 3 package.
+
+1. Alias redirects for the SVG libraries (this is temporary and will be resolved in a future update)
+
+```typescript
+resolve: {
+        alias: {
+            // Other aliases
+            // Flag icons alias
+            '@adyen/ui-assets-flag-icons/svg': path.resolve(
+                __dirname,
+                '../../node_modules/@adyen/ui-assets-flag-icons/dist/svg'
+            ),
+            // Payment method icon alias
+            '@adyen/ui-assets-payment-method-icons/svg': path.resolve(
+                __dirname,
+                '../../node_modules/@adyen/ui-assets-payment-method-icons/dist/svg'
+            ),
+        },
+    },
+```
+
+2. Make sure to allow CSS to be loaded from the bento packages
+
+e.g.
+
+```typescript
+{
+    test: /\.css$/,
+    include: [
+        // Include the vue2 and design tokens package
+        utils.resolve('node_modules/@adyen/bento-vue2'),
+        utils.resolve('node_modules/@adyen/bento-design-tokens'),
+    ],
+    use: ['vue-style-loader', 'css-loader'],
+},
+```
+
+3. Make sure to allow SVGs to be loaded from the bento packages
+
+e.g.
+
+```typescript
+{
+    test: /\.svg$/,
+    include: [
+        // Include the vue2, flag and payment icons pacakges
+        utils.resolve('node_modules/@adyen/bento-vue2'),
+        utils.resolve('node_modules/@adyen/ui-assets-flag-icons'),
+        utils.resolve('node_modules/@adyen/ui-assets-payment-method-icons'),
+    ],
+},
+```
+
+4. Make sure to allow SCSS to be loaded from the bento packages e.g.
+
+```typescript
+{
+    test: /\.scss$/,
+    include: [
+        // Include all icon packages
+        utils.resolve('node_modules/@adyen/ui-assets-icons-16'),
+        utils.resolve('node_modules/@adyen/ui-assets-flag-icons'),
+        utils.resolve('node_modules/@adyen/ui-assets-payment-method-icons'),
+    ],
+    use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+};
+```
+
+#### Vite
+
+For vite the only thing required is to add the icon packages to the `optimizeDeps.exclude` vite configuration property.
+
+e.g.
+
+```typescript
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue2';
+import { resolve } from 'path';
+
+export default defineConfig({
+    root: resolve(__dirname, '../src'),
+    plugins: [vue()],
+    envDir: resolve(__dirname),
+    // Add the flag and payment icon packages here
+    optimizeDeps: {
+        optimizeDeps: {
+            exclude: [
+                '@adyen/ui-assets-icons-16',
+                '@adyen/ui-assets-flag-icons',
+                '@adyen/ui-assets-payment-method-icons',
+            ],
+        },
+    },
+});
+```
+
 ### Alternate Theme (ADL 1.0)
 
 #### Set **legacy ADL** theme as default
@@ -116,7 +288,7 @@ The Design System requires the Design token CSS variables to be set in order to
 only alternative style provided for now is the Legacy ADL theme (a.k.a. ADL 1.0). The **legacy ADL** theme variables
 must be present for the whole app.
 
-```javascript
+```typescript
 import BentoVue, { BentoTheme } from '@adyen/bento-vue2';
 
 Vue.use(BentoVue. { theme: BentoTheme.LEGACY });
@@ -133,7 +305,7 @@ The theme class overrides the default Design Token CSS variables.
 
 To use an alternative theme, set the respective theme class in the main container inside the `App.vue` component.
 
-```javascript
+```html
 <template>
     <transition name="navigation-fading" mode="out-in" appear>
         <navigation-loading-indicator v-if="initialNavigation" />

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

@@ -22,6 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     computedRole: import("vue").ComputedRef<"alert" | "status">;
     onCloseButtonClick: () => void;
+    hasSlot: (name: string) => boolean;
     BentoButtonVariant: typeof BentoButtonVariant;
     BentoAlertSeverityOption: typeof BentoAlertSeverityOption;
     BentoTypographyVariant: typeof BentoTypographyVariant;

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

@@ -5,7 +5,6 @@ export declare enum BentoButtonVariant {
 }
 export declare enum BentoButtonPropClass {
     CONDENSED = "condensed",
-    GROUPED = "grouped",
     DESTRUCTIVE = "critical",
     ICON_ONLY = "icon-only"
 }

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

@@ -1,5 +1,4 @@
 export { default as BentoButton } from './button.vue';
 export * from './button.types';
-export { default as BentoButtonGroup } from './components/button-group.vue';
 export * from './components/button-actions';
 export * from './components/loading-button';

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

@@ -55,10 +55,14 @@ declare const _default: import("vue").DefineComponent<{
         'b-card__actions--without-content': boolean;
         'b-card__actions--without-content-and-with-header': boolean;
     }>;
+    cardHeaderTitleConditionalClasses: import("vue").ComputedRef<{
+        'b-card__title--truncated': boolean;
+    }>;
     showCardBody: import("vue").ComputedRef<boolean>;
     showContent: import("vue").Ref<boolean>;
     tabIndex: import("vue").ComputedRef<-1 | 0>;
     showHeader: import("vue").ComputedRef<boolean>;
+    showTitleWrapper: import("vue").ComputedRef<boolean>;
     typography: import("vue").ComputedRef<{
         el: BentoTypographyElement;
         variant: BentoTypographyVariant;
@@ -66,12 +70,13 @@ declare const _default: import("vue").DefineComponent<{
         strongest: boolean;
         wide: boolean;
     }>;
+    hasSlot: (name: string) => boolean;
     onClick: () => void;
+    t: any;
     toggleExpansion: () => void;
-    hasSlot: (name: string) => boolean;
     BentoTypographyVariant: typeof BentoTypographyVariant;
     BentoTypographyElement: typeof BentoTypographyElement;
-}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, ("click" | "expanded")[], string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, ("click" | "expanded")[], string, Readonly<import("vue").ExtractPropTypes<{
     background: {
         type: PropType<BentoCardBackground>;
         default: BentoCardBackground;

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

@@ -5,3 +5,6 @@ export declare enum BentoCheckboxState {
     DISABLED = "disabled",
     ERROR = "error"
 }
+export declare enum BentoCheckboxEvent {
+    UPDATE = "update:modelValue"
+}

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

@@ -1,13 +1,14 @@
 import { PropType } from 'vue';
-import { BentoCheckboxType } from './checkbox.types';
+import { BentoCheckboxEvent, BentoCheckboxType } from './checkbox.types';
 import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
+import { BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types';
 declare const _default: import("vue").DefineComponent<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
     modelValue: {
-        type: PropType<BentoCheckboxType>;
+        type: PropType<BentoCheckboxType | BentoCheckboxGroupItems>;
         default: boolean;
     };
     disabled: {
@@ -44,13 +45,13 @@ declare const _default: import("vue").DefineComponent<{
     BentoTypographyElement: typeof BentoTypographyElement;
     BentoTypographyVariant: typeof BentoTypographyVariant;
     onChange: (event: Event) => void;
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoCheckboxEvent[], string, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
     modelValue: {
-        type: PropType<BentoCheckboxType>;
+        type: PropType<BentoCheckboxType | BentoCheckboxGroupItems>;
         default: boolean;
     };
     disabled: {
@@ -73,7 +74,7 @@ declare const _default: import("vue").DefineComponent<{
     value: string | number;
     disabled: boolean;
     ariaLabel: string;
-    modelValue: BentoCheckboxType;
+    modelValue: BentoCheckboxType | BentoCheckboxGroupItems;
     hasError: boolean;
     indeterminate: boolean;
 }>;

package/dist/@types/components/checkbox/components/checkbox-group/checkbox-group.vue.d.ts

@@ -1,10 +1,28 @@
 import { PropType } from 'vue';
 import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';
+import { BentoCheckboxEvent } from '../../checkbox.types';
 declare const _default: import("vue").DefineComponent<{
     items: {
         type: PropType<BentoCheckboxGroupItems>;
         required: true;
     };
+    modelValue: {
+        type: {
+            (arrayLength: number): (string | number)[];
+            (...items: (string | number)[]): (string | number)[];
+            new (arrayLength: number): (string | number)[];
+            new (...items: (string | number)[]): (string | number)[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => any[];
+    };
     variant: {
         type: PropType<BentoCheckboxGroupVariant>;
         default: BentoCheckboxGroupVariant;
@@ -30,13 +48,30 @@ declare const _default: import("vue").DefineComponent<{
     conditionalClasses: import("vue").ComputedRef<{
         'b-checkbox-group--horizontal': boolean;
     }>;
-    modelValue: import("vue").Ref<any[]>;
+    inputValue: import("vue").Ref<(string | number)[]>;
     onInput: (value: any) => void;
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoCheckboxEvent[], string, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<BentoCheckboxGroupItems>;
         required: true;
     };
+    modelValue: {
+        type: {
+            (arrayLength: number): (string | number)[];
+            (...items: (string | number)[]): (string | number)[];
+            new (arrayLength: number): (string | number)[];
+            new (...items: (string | number)[]): (string | number)[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => any[];
+    };
     variant: {
         type: PropType<BentoCheckboxGroupVariant>;
         default: BentoCheckboxGroupVariant;
@@ -61,6 +96,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     variant: BentoCheckboxGroupVariant;
     disabled: boolean;
+    modelValue: (string | number)[];
     hasError: boolean;
     formId: string;
 }>;

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

@@ -34,8 +34,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
+    disableTypography: boolean;
     currency: BentoCurrencyISOCode;
     majorUnits: boolean;
-    disableTypography: boolean;
 }>;
 export default _default;

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { BentoColumn, BentoDatagridAllItemsSelectedState, BentoDatagridSortByColumn, BentoDatagridSortDirection } from '../../data-grid.types';
+import { BentoColumn, BentoDatagridAllItemsSelectedState, BentoDatagridAriaSortValue, BentoDatagridSortByColumn, BentoDatagridSortDirection } from '../../data-grid.types';
 import { BentoTypographyElement } from '@/components/typography';
 import { BentoDatagridDraggingColumnState, DatagridColumnsEvent } from './data-grid-columns-types';
 import type { BentoMenuItem } from '@/components/menu/components';
@@ -73,8 +73,12 @@ declare const _default: import("vue").DefineComponent<{
         '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;

package/dist/@types/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     configSettingsButtonRef: any;
+    popoverId: string;
     isConfigSettingsPanelOpen: import("vue").Ref<boolean>;
     allColumnsVisbilityToggleState: import("vue").Ref<boolean>;
     filteredColumnVisibilityColumns: import("vue").ComputedRef<BentoColumn[]>;

package/dist/@types/components/data-grid/composables/index.d.ts

@@ -2,5 +2,6 @@ export { default as useResizer } from './useResizer';
 export { default as useCalculateColumnWidth, DATAGRID_SELECT_FIELD_NAME, } from './useCalculateColumnWidth/useCalculateColumnWidth';
 export { useSorter } from './useSorter';
 export { useSelector } from './useSelector';
+export { useKeyboardNavigator } from './useKeyboardNavigator/useKeyboardNavigator';
 export { useColumnReorderer } from './useColumnReorderer/useColumnReorderer';
 export { useConfigSettings } from './useConfigSettings/useConfigSettings';

package/dist/@types/components/data-grid/composables/useKeyboardNavigator/useKeyboardNavigator.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'vue';
+import { BentoDatagridNavigationKeyCode } from './useKeyboardNavigator.types';
+export declare const useKeyboardNavigator: (gridcellRefs: Ref<HTMLDivElement[]>, columnsCount: Ref<number>) => {
+    focusOnNextGridcell: (target: EventTarget, keyCode: BentoDatagridNavigationKeyCode, ctrlKey: boolean) => void;
+    isNavigationKeyCode: (keyCode: number) => boolean;
+};

package/dist/@types/components/data-grid/composables/useKeyboardNavigator/useKeyboardNavigator.types.d.ts

@@ -0,0 +1,10 @@
+export declare enum BentoDatagridNavigationKeyCode {
+    ARROW_DOWN = 40,
+    ARROW_UP = 38,
+    ARROW_LEFT = 37,
+    ARROW_RIGHT = 39,
+    PAGE_UP = 33,
+    PAGE_DOWN = 34,
+    END = 35,
+    HOME = 36
+}

package/dist/@types/components/data-grid/composables/useSelector.d.ts

@@ -2,7 +2,7 @@ import { Ref } from 'vue';
 import { BentoDatagridData, BentoDatagridDataItemId, BentoDatagridGetDataItemIdFn, BentoDatagridIsDataItemDisabledFn } from '../data-grid.types';
 export declare const useSelector: (selection: Ref<BentoDatagridDataItemId[]>, emit: (event: string, emitedSelectedItems: BentoDatagridDataItemId[]) => void, data: Ref<BentoDatagridData>, getDataItemId: BentoDatagridGetDataItemIdFn, isDataItemDisabled: BentoDatagridIsDataItemDisabledFn) => {
     onAllRowSelect: (allItemsSelected: boolean) => void;
-    onRowSelect: () => void;
+    onRowSelect: (value: BentoDatagridDataItemId[]) => void;
     allItemsSelectedState: {
         allItemsSelected: boolean;
         isIndeterminate: boolean;

package/dist/@types/components/data-grid/data-grid.types.d.ts

@@ -67,3 +67,8 @@ export declare enum BentoDatagridEvent {
     SELECT = "select",
     SORT = "sort"
 }
+export declare enum BentoDatagridAriaSortValue {
+    ASCENDING = "ascending",
+    DESCENDING = "descending",
+    NONE = "none"
+}

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

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { Booleanish } from '@/types';
 import { BentoColumn, BentoColumnOverflow, BentoDatagridData, BentoDatagridDataItem, BentoDatagridDataItemId, BentoDatagridEvent, BentoDatagridGetDataItemIdFn, BentoDatagridIsDataItemDisabledFn, BentoDatagridSortByColumn, BentoDatagridSortDirection } from './data-grid.types';
 import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
 declare const _default: import("vue").DefineComponent<{
@@ -131,6 +132,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDatagridDataItemId[]>;
         default: () => any[];
     };
+    highlightedRows: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        default: () => any[];
+    };
     sortBy: {
         type: PropType<BentoDatagridSortByColumn[]>;
         default: () => any[];
@@ -198,6 +203,8 @@ declare const _default: import("vue").DefineComponent<{
         id: string;
         isFrozenColumns?: undefined;
     })[]>;
+    gridcellRefs: import("vue").Ref<HTMLDivElement[]>;
+    slots: import("vue/types/v3-setup-context").Slots;
     ariaGridHeaderText: import("vue").ComputedRef<string>;
     conditionalTitleAttribute: (column: BentoColumn, content: unknown) => string;
     getRowData: (rowData: unknown) => unknown;
@@ -211,6 +218,7 @@ declare const _default: import("vue").DefineComponent<{
         'b-data-grid__row--disabled': boolean;
         'b-data-grid__row--row-clicks-enabled': boolean;
         'b-data-grid__cell--is-re-ordering': boolean;
+        'b-data-grid__row--highlighted': boolean;
     };
     conditionalRowSetClasses: (isFrozenRowSet: boolean) => {
         'b-data-grid__row-cell-set--frozen': boolean;
@@ -244,9 +252,10 @@ declare const _default: import("vue").DefineComponent<{
     };
     selectedItems: import("vue").Ref<BentoDatagridDataItemId[]>;
     onAllRowSelect: (allItemsSelected: boolean) => void;
-    onRowSelect: () => void;
+    onRowSelect: (value: BentoDatagridDataItemId[]) => void;
     DATAGRID_SELECT_FIELD_NAME: string;
     onRowClick: (row: BentoDatagridDataItem, event: MouseEvent) => void;
+    getRowAriaSelectedValue: (row: BentoDatagridDataItem) => Booleanish;
     onConfigSettingsUpdate: (isCompactView: boolean) => void;
     onConfigSettingsColumnsUpdate: (newColumns: BentoColumn[]) => void;
     onConfigSettingsColumnUpdate: (updatedColumn: BentoColumn) => void;
@@ -322,6 +331,12 @@ declare const _default: import("vue").DefineComponent<{
         dragover: (e: DragEvent) => void;
     }>;
     computedColumnPanelAlignment: import("vue").ComputedRef<number>;
+    gridcellEvents: (column: any) => {
+        [eventName: string]: (e: Event) => void;
+    };
+    getCellindex: (rowIndex: number, colIndex: number, colSetIndex: number) => number;
+    getColIndex: (colIndex: number, colSetIndex: number) => number;
+    navigationInput: (event: KeyboardEvent) => void;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, (BentoDatagridEvent.COLUMNS | BentoDatagridEvent.COLUMN_RESIZE | BentoDatagridEvent.ITEMS_PAGE | BentoDatagridEvent.NAVIGATE | BentoDatagridEvent.FILTER_SEARCH_INPUT | BentoDatagridEvent.FILTER_SEARCH_CLEAR | BentoDatagridEvent.UPDATE_COLUMNS | BentoDatagridEvent.UPDATE_FILTERS | BentoDatagridEvent.UPDATE_FILTER_SEARCH_TERM | BentoDatagridEvent.UPDATE_SORT_BY | BentoDatagridEvent.ROW_CLICK | BentoDatagridEvent.SELECT | BentoDatagridEvent.SORT)[], string, Readonly<import("vue").ExtractPropTypes<{
     allowRowClicks: {
         type: BooleanConstructor;
@@ -452,6 +467,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDatagridDataItemId[]>;
         default: () => any[];
     };
+    highlightedRows: {
+        type: PropType<BentoDatagridDataItemId[]>;
+        default: () => any[];
+    };
     sortBy: {
         type: PropType<BentoDatagridSortByColumn[]>;
         default: () => any[];
@@ -473,5 +492,6 @@ declare const _default: import("vue").DefineComponent<{
     stickyPagination: boolean;
     selectable: boolean;
     selection: BentoDatagridDataItemId[];
+    highlightedRows: BentoDatagridDataItemId[];
 }>;
 export default _default;

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

@@ -32,8 +32,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    disableTypography: boolean;
     date: string | number | Date;
     format: BentoDateFormat;
+    disableTypography: boolean;
 }>;
 export default _default;

package/dist/@types/components/date-picker/composables/use-date-picker-single-calendar-text.d.ts

@@ -1,2 +1,2 @@
-import { UseDateDisplayText } from '../date-picker.types';
+import { UseDateDisplayText } from './use-date-picker-single-calendar-text.types';
 export declare const useDatePickerSingleCalendarText: UseDateDisplayText<Date>;

package/dist/@types/components/date-picker/composables/use-date-picker-single-calendar-text.types.d.ts

@@ -0,0 +1,10 @@
+import { ComputedRef, Ref } from 'vue';
+export interface UseDateDisplayTextProps<T> {
+    datePickerValue: Ref<T>;
+    isDateIncorrect: Ref<boolean>;
+}
+export type UseDateDisplayText<T> = (props: UseDateDisplayTextProps<T>) => {
+    dateDisplayValue: ComputedRef<string>;
+    textInputDisplayValue: Ref<string>;
+    formatTextInputDisplayValue: (dateToFormat?: Date) => void;
+};