@adyen/bento-vue2 1.8.0 → 1.9.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -364,6 +364,15 @@
               },
               "default": "null"
             },
+            {
+              "name": "condensed",
+              "description": "Renders the dropdown with a condensed style.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "emptyState",
               "description": "Empty state props used with the inner empty state component which is displayed when no search results are found.",
@@ -1798,179 +1807,249 @@
           "description": "",
           "attributes": [
             {
-              "name": "bulkActions",
-              "description": "List of actions that will be rendered in the action bar when user selects items.\n\nEach object in the list should have a `title`, an `event` and,\noptionally, an `icon`.\n\nThe component will display 4 actions and the hide the rest inside a menu.",
+              "name": "columns",
+              "required": true,
+              "description": "Column definitions",
               "value": {
                 "kind": "expression",
-                "type": "BentoButtonActionsList"
-              },
-              "default": "null"
+                "type": "BentoColumn[]"
+              }
             },
             {
-              "name": "allowRowClicks",
-              "description": "When true, will emit a 'rowClick' event when a row is clicked. Will add cursor: pointer to rows.",
+              "name": "condensed",
+              "description": "Sets the row cells to the condensed padding state.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
-            },
+            }
+          ],
+          "source": {
+            "module": "./src/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-data-grid",
+          "description": "",
+          "attributes": [
             {
-              "name": "allowColumnDragAndDrop",
-              "description": "When true, column headers will become draggable, allowing users to rearrange columns.",
+              "name": "isColumnVisibilityToggleDisabled",
+              "required": true,
+              "description": "Is column visibitlity toggle disabled",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
-              },
-              "default": "true"
+              }
             },
             {
-              "name": "condensed",
-              "description": "Sets the row cells to the condensed padding state.",
+              "name": "column",
+              "required": true,
+              "description": "Column definition",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoColumn"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "visible-column"
+            },
+            {
+              "name": "updated-column"
+            }
+          ],
+          "source": {
+            "module": "./src/components/data-grid/components/data-grid-config-settings/components/data-grid-config-settings-column-row/data-grid-config-settings-column-row.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-date",
+          "description": "A Date component is used to display a formatted date value.",
+          "attributes": [
+            {
+              "name": "date",
+              "description": "The date to format. The data can be supplied as:\n- a Date object.\n- a number of milliseconds elapsed since the epoch.\n- a date string e.g. '2023-07-31T10:55:22+02:00'.",
+              "value": {
+                "kind": "expression",
+                "type": "date|number|string"
               },
-              "default": "false"
+              "default": "null"
             },
             {
-              "name": "columns",
-              "required": true,
-              "description": "Column definitions using 'key' to relate to data object.",
+              "name": "format",
+              "description": "The string format of the date to be displayed",
               "value": {
                 "kind": "expression",
-                "type": "BentoColumn[]"
-              }
+                "type": "BentoDateFormat | `${BentoDateFormat}`"
+              },
+              "default": "BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD"
             },
             {
-              "name": "columnPanel",
-              "description": "Enables / hides the display options panel and the column contextual menu functionality.",
+              "name": "disableTypography",
+              "description": "Disable the default typography for the component. Only use this when the component is inside another typography",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date/date.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-date-filter",
+          "description": "The Date filter displays a calendar that allows\nto select a single date.",
+          "attributes": [
+            {
+              "name": "isDateInput",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
             },
             {
-              "name": "data",
+              "name": "defaultValue",
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDateFilterValue"
+              },
+              "default": "null"
+            },
+            {
+              "name": "field",
               "required": true,
-              "description": "An array of data objects to display.",
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridData"
+                "type": "string"
               }
             },
             {
-              "name": "emptyState",
-              "description": "Empty state props that will be passed down to inner empty-state component",
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridEmptyStateProps"
-              },
-              "default": "undefined"
+                "type": "string"
+              }
             },
             {
-              "name": "filters",
-              "description": "filter-bar value (i.e. filters) that will be passed down to inner filter-bar component\n{@see BentoFilterBarModel}",
+              "name": "onlySlot",
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
               "value": {
                 "kind": "expression",
-                "type": "BentoFilterBar.props.value.type"
+                "type": "boolean"
               },
-              "default": "undefined"
+              "default": "false"
             },
             {
-              "name": "filterValues",
-              "description": "An array of the values for each filter set in `value`.\n{@see BentoFilterValues}",
+              "name": "options",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "BentoFilterBar.props.filterValues.type"
+                "type": "BentoDateFilterOptions"
               },
-              "default": "() => []"
+              "default": "undefined"
             },
             {
-              "name": "filterSearchTerm",
-              "description": "Filter bar search term useful to filter all the data by text",
+              "name": "value",
+              "description": "Current value of the filter",
               "value": {
                 "kind": "expression",
-                "type": "BentoFilterBar.props.searchTerm.type"
+                "type": "BentoDateFilterValue"
               },
               "default": "undefined"
-            },
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/date-filter/date-filter.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "bento-date-picker",
+          "description": "Date picker selector.",
+          "attributes": [
             {
-              "name": "fitContent",
-              "description": "Allows the grid to be rendered inside a confined space.",
+              "name": "description",
+              "description": "Descriptive supporting text visbile underneath the dropdown.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
+              "default": "undefined"
             },
             {
-              "name": "getDataItemId",
-              "description": "A customisable method to retrieve a unique identifier for a data item in the array of data supplied.\nThis is used selecting and performance reasons and must exist in each data item.",
+              "name": "disabled",
+              "description": "Disables dropdown functionality.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridGetDataItemIdFn"
+                "type": "boolean"
               },
-              "default": "(item: BentoDatagridDataItem) => item.id"
+              "default": "false"
             },
             {
-              "name": "hasResizableColumns",
-              "description": "If resize is enabled",
+              "name": "errorMessage",
+              "description": "Displays component in an error state with an error message",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "true"
+              "default": "null"
             },
             {
-              "name": "isDataItemDisabled",
-              "description": "A customisable method to determine if a row is not selectable.\nThe default is that every row is selectable.",
+              "name": "firstDayOfWeek",
+              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridIsDataItemDisabledFn"
-              },
-              "default": "() => false"
+                "type": "Calendar.props.firstDayOfWeek"
+              }
             },
             {
-              "name": "lazyLoadType",
-              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "BentoLazyLoadType"
-              },
-              "default": "'none'"
+                "type": "Calendar.props.isDateDisabled"
+              }
             },
             {
-              "name": "loading",
-              "description": "If the loading indicator should be shown.",
+              "name": "min",
+              "description": "Sets a minimum limit for selectable dates - dates before `min` will not be selectable",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "Calendar.props.min"
+              }
             },
             {
-              "name": "outline",
-              "description": "Enables / Disables the table's surrounding border.",
+              "name": "max",
+              "description": "Sets a maximum limit for selectable dates - dates after `max` will not be selectable",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "Calendar.props.max"
+              }
             },
             {
-              "name": "pagination",
-              "description": "Pagination props that will be passed down to inner pagination component",
+              "name": "label",
+              "description": "Text that is displayed as a label above the element.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridPaginationProps"
+                "type": "string"
               },
               "default": "undefined"
             },
             {
-              "name": "stickyPagination",
-              "description": "Make pagination stick to the bottom of the page when the data-grid is bigger than the screen.\nBecause styles have to be applied to pagination container element, this has to be a data-grid prop (rather than a pagination prop).",
+              "name": "optional",
+              "description": "Highlights the dropdown is optional.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1978,17 +2057,17 @@
               "default": "false"
             },
             {
-              "name": "stickyFilters",
-              "description": "Make data-grid filters stick to the top of the page along with the data-grid headers.\nDefaults to true.",
+              "name": "readonly",
+              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date picker.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "true"
+              "default": "false"
             },
             {
-              "name": "selectable",
-              "description": "Enables / Disables rows to be selected via a checkbox. On select the \"select\" event will be emitted.",
+              "name": "required",
+              "description": "Highlights the dropdown is required.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -1996,185 +2075,39 @@
               "default": "false"
             },
             {
-              "name": "selection",
-              "description": "Selected items",
+              "name": "tooltipText",
+              "description": "Adds a info icon next to the label to display the passed tooltip message.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatagridDataItemId[]"
+                "type": "string"
               },
-              "default": "() => []"
+              "default": "null"
             },
             {
-              "name": "highlightedRows",
-              "description": "Highlighted items",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDatagridDataItemId[]"
-              },
-              "default": "() => []"
-            },
-            {
-              "name": "sortBy",
-              "description": "Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.\nIt does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDatagridSortByColumn[]"
-              },
-              "default": "() => []"
-            },
-            {
-              "name": "tabTitle",
-              "description": "Title of the data grid to be rendered as tab title when a data grid is passed in a tab layout.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            }
-          ],
-          "events": [
-            {
-              "name": "<undefined>"
-            }
-          ],
-          "slots": [
-            {
-              "name": "header"
-            },
-            {
-              "name": "innerSlot"
-            },
-            {
-              "name": "`item-${column.field}`"
-            },
-            {
-              "name": "footer"
-            }
-          ],
-          "source": {
-            "module": "./src/components/data-grid/data-grid.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-data-grid",
-          "description": "",
-          "attributes": [
-            {
-              "name": "columns",
-              "required": true,
-              "description": "Column definitions",
-              "value": {
-                "kind": "expression",
-                "type": "BentoColumn[]"
-              }
-            },
-            {
-              "name": "condensed",
-              "description": "Sets the row cells to the condensed padding state.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/data-grid/components/data-grid-config-settings/data-grid-config-settings.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-data-grid",
-          "description": "",
-          "attributes": [
-            {
-              "name": "isColumnVisibilityToggleDisabled",
-              "required": true,
-              "description": "Is column visibitlity toggle disabled",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              }
-            },
-            {
-              "name": "column",
-              "required": true,
-              "description": "Column definition",
-              "value": {
-                "kind": "expression",
-                "type": "BentoColumn"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "visible-column"
-            },
-            {
-              "name": "updated-column"
-            }
-          ],
-          "source": {
-            "module": "./src/components/data-grid/components/data-grid-config-settings/components/data-grid-config-settings-column-row/data-grid-config-settings-column-row.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-date",
-          "description": "A Date component is used to display a formatted date value.",
-          "attributes": [
-            {
-              "name": "date",
-              "description": "The date to format. The data can be supplied as:\n- a Date object.\n- a number of milliseconds elapsed since the epoch.\n- a date string e.g. '2023-07-31T10:55:22+02:00'.",
+              "name": "value",
+              "description": "Selected date",
               "value": {
                 "kind": "expression",
-                "type": "date|number|string"
+                "type": "BentoDatePickerValue"
               },
               "default": "null"
-            },
-            {
-              "name": "format",
-              "description": "The string format of the date to be displayed",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDateFormat | `${BentoDateFormat}`"
-              },
-              "default": "BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD"
-            },
-            {
-              "name": "disableTypography",
-              "description": "Disable the default typography for the component. Only use this when the component is inside another typography",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
             }
           ],
           "source": {
-            "module": "./src/components/date/date.vue",
+            "module": "./src/components/date-picker/date-picker.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "bento-date-filter",
+          "name": "bento-date-range-filter",
           "description": "The Date filter displays a calendar that allows\nto select a single date.",
           "attributes": [
-            {
-              "name": "isDateInput",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "true"
-            },
             {
               "name": "defaultValue",
               "description": "Default value of the filter to reset to.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDateFilterValue"
+                "type": "BentoDateRangeFilterValue"
               },
               "default": "null"
             },
@@ -2207,10 +2140,10 @@
             },
             {
               "name": "options",
-              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not",
+              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - allowTimeInput: Allows user to enter time values in the form\n  - firstDayOfWeek: Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not\n  - maxRange: Set a maximum number of dates to be selectable by the range\n  - numberOfMonths: Number of months rendered on pane\n  - quickSelectRanges: An array that sets the custom range dropdown items. @see BentoDateRangePicker",
               "value": {
                 "kind": "expression",
-                "type": "BentoDateFilterOptions"
+                "type": "BentoDateRangeFilterOptions"
               },
               "default": "undefined"
             },
@@ -2219,20 +2152,29 @@
               "description": "Current value of the filter",
               "value": {
                 "kind": "expression",
-                "type": "BentoDateFilterValue"
+                "type": "BentoDateRangeFilterValue"
               },
-              "default": "undefined"
+              "default": "() => ({ startDate: undefined, endDate: undefined })"
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/date-filter/date-filter.vue",
+            "module": "./src/components/filter-bar/components/date-range-filter/date-range-filter.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "bento-date-picker",
-          "description": "Date picker selector.",
+          "name": "bento-date-range-picker",
+          "description": "Date range picker selector.",
           "attributes": [
+            {
+              "name": "allowTimeInput",
+              "description": "Allows user to enter time values in the form",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "description",
               "description": "Descriptive supporting text visbile underneath the dropdown.",
@@ -2262,34 +2204,26 @@
             },
             {
               "name": "firstDayOfWeek",
-              "description": "Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
-              "value": {
-                "kind": "expression",
-                "type": "Calendar.props.firstDayOfWeek"
-              }
-            },
-            {
-              "name": "isDateDisabled",
-              "description": "Indicate if a date should be disabled or not",
+              "description": "Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
               "value": {
                 "kind": "expression",
-                "type": "Calendar.props.isDateDisabled"
+                "type": "DateRangePickerCalendar.props.firstDayOfWeek"
               }
             },
             {
-              "name": "min",
-              "description": "Sets a minimum limit for selectable dates - dates before `min` will not be selectable",
+              "name": "granularities",
+              "description": "A list of available granularities.\nIf present, the date picker will display a segmented control to change granularity.",
               "value": {
                 "kind": "expression",
-                "type": "Calendar.props.min"
+                "type": "DateRangePickerCalendar.props.granularities"
               }
             },
             {
-              "name": "max",
-              "description": "Sets a maximum limit for selectable dates - dates after `max` will not be selectable",
+              "name": "isDateDisabled",
+              "description": "Indicate if a date should be disabled or not",
               "value": {
                 "kind": "expression",
-                "type": "Calendar.props.max"
+                "type": "DateRangePickerCalendar.props.isDateDisabled"
               }
             },
             {
@@ -2312,7 +2246,7 @@
             },
             {
               "name": "readonly",
-              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date picker.",
+              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -2338,229 +2272,41 @@
               "default": "null"
             },
             {
-              "name": "value",
-              "description": "Selected date",
+              "name": "quickSelectRanges",
+              "description": "Enables the range selector.\nIf provided, must be an array that sets the custom range dropdown items. Items are of the structure:\n`label` - label of custom range item.\n`value` - a unique key of the custom range item.\n`data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDatePickerValue"
+                "type": "DateRangePickerCalendarRangeSelectorItems"
               },
-              "default": "null"
-            }
-          ],
-          "source": {
-            "module": "./src/components/date-picker/date-picker.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-date-range-filter",
-          "description": "The Date filter displays a calendar that allows\nto select a single date.",
-          "attributes": [
+              "default": "undefined"
+            },
             {
-              "name": "defaultValue",
-              "description": "Default value of the filter to reset to.",
+              "name": "maxRange",
+              "description": "Set a maximum number of dates to be selectable by the range.",
               "value": {
                 "kind": "expression",
-                "type": "BentoDateRangeFilterValue"
-              },
-              "default": "null"
+                "type": "DateRangePickerCalendar.props.maxRange"
+              }
             },
             {
-              "name": "field",
-              "required": true,
-              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "name": "min",
+              "description": "Sets a minimum limit for selectable dates - dates before `min` will not be selectable",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "DateRangePickerCalendar.props.min"
               }
             },
             {
-              "name": "label",
-              "required": true,
-              "description": "Label text to be displayed",
+              "name": "max",
+              "description": "Sets a maximum limit for selectable dates - dates after `max` will not be selectable",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "DateRangePickerCalendar.props.max"
               }
             },
             {
-              "name": "onlySlot",
-              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "options",
-              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - allowTimeInput: Allows user to enter time values in the form\n  - firstDayOfWeek: Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n  - isDateDisabled: Indicate if a date should be disabled or not\n  - maxRange: Set a maximum number of dates to be selectable by the range\n  - numberOfMonths: Number of months rendered on pane\n  - quickSelectRanges: An array that sets the custom range dropdown items. @see BentoDateRangePicker",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDateRangeFilterOptions"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "value",
-              "description": "Current value of the filter",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDateRangeFilterValue"
-              },
-              "default": "() => ({ startDate: undefined, endDate: undefined })"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/date-range-filter/date-range-filter.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-date-range-picker",
-          "description": "Date range picker selector.",
-          "attributes": [
-            {
-              "name": "allowTimeInput",
-              "description": "Allows user to enter time values in the form",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "description",
-              "description": "Descriptive supporting text visbile underneath the dropdown.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "disabled",
-              "description": "Disables dropdown functionality.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "errorMessage",
-              "description": "Displays component in an error state with an error message",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "firstDayOfWeek",
-              "description": "Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.firstDayOfWeek"
-              }
-            },
-            {
-              "name": "granularities",
-              "description": "A list of available granularities.\nIf present, the date picker will display a segmented control to change granularity.",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.granularities"
-              }
-            },
-            {
-              "name": "isDateDisabled",
-              "description": "Indicate if a date should be disabled or not",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.isDateDisabled"
-              }
-            },
-            {
-              "name": "label",
-              "description": "Text that is displayed as a label above the element.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "optional",
-              "description": "Highlights the dropdown is optional.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "readonly",
-              "description": "The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "required",
-              "description": "Highlights the dropdown is required.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "tooltipText",
-              "description": "Adds a info icon next to the label to display the passed tooltip message.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "quickSelectRanges",
-              "description": "Enables the range selector.\nIf provided, must be an array that sets the custom range dropdown items. Items are of the structure:\n`label` - label of custom range item.\n`value` - a unique key of the custom range item.\n`data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendarRangeSelectorItems"
-              },
-              "default": "undefined"
-            },
-            {
-              "name": "maxRange",
-              "description": "Set a maximum number of dates to be selectable by the range.",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.maxRange"
-              }
-            },
-            {
-              "name": "min",
-              "description": "Sets a minimum limit for selectable dates - dates before `min` will not be selectable",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.min"
-              }
-            },
-            {
-              "name": "max",
-              "description": "Sets a maximum limit for selectable dates - dates after `max` will not be selectable",
-              "value": {
-                "kind": "expression",
-                "type": "DateRangePickerCalendar.props.max"
-              }
-            },
-            {
-              "name": "numberOfMonths",
-              "description": "Number of months rendered on pane",
+              "name": "numberOfMonths",
+              "description": "Number of months rendered on pane",
               "value": {
                 "kind": "expression",
                 "type": "DateRangePickerCalendar.props.numberOfMonths"
@@ -2580,14 +2326,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-divider",
-          "description": "",
-          "source": {
-            "module": "./src/components/divider/divider.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-dropdown-avatar",
           "description": "A Avatar Dropdown showing a selectable list of countries.",
@@ -5799,26 +5537,340 @@
           "description": "Handles the styles and states of the individual dates of the calendar.",
           "attributes": [
             {
-              "name": "day",
-              "required": true,
-              "description": "Date to be displayed as the calendar day. From 1st to 31st (or end of the month defined in the date)",
+              "name": "day",
+              "required": true,
+              "description": "Date to be displayed as the calendar day. From 1st to 31st (or end of the month defined in the date)",
+              "value": {
+                "kind": "expression",
+                "type": "date"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Indicate if a date should be disabled or not",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "selected",
+              "description": "Changes the state of the calendar day to selected.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "variant",
+              "description": "When the day is selected, this indicates if the selection is a single date or part of a range.\nIf it's a range it can be at the beginning, middle or end of the selection.",
+              "value": {
+                "kind": "expression",
+                "type": "CalendarMonthDayVariant"
+              },
+              "default": "CalendarMonthDayVariant.SINGLE"
+            }
+          ],
+          "events": [
+            {
+              "name": "<undefined>"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/calendar/components/calendar-month/components/calendar-month-day/calendar-month-day.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "calendar-month-day-stub",
+          "description": "",
+          "events": [
+            {
+              "name": "<undefined>"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/calendar/components/calendar-month/components/calendar-month-day/__test__/calendar-month-day-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "card-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "title",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/card/__tests__/card-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "click-outside-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "insideContainerText",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "outsideContainerText",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "click"
+            }
+          ],
+          "source": {
+            "module": "./src/components/click-outside/__tests__/click-outside-stub.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "controls-group",
+          "description": "",
+          "attributes": [
+            {
+              "name": "description",
+              "description": "Descriptive supporting text visbile underneath the label.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "disabled",
+              "description": "Sets all child controls of the <fieldset> as disabled.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "form",
+              "description": "The value of the id attribute of a <form> element the <fieldset> is to part of, even if it is not inside the form itself.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "hideLabel",
+              "description": "Shows/hides the group label.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "null"
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "The name associated with the group. Required for accessibility purposes.\nThe label is shown when `hideLabel` is set to `true` or if `description` is passed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "optional",
+              "description": "Indicates the field is optional.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "required",
+              "description": "Indicates the field is required.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "tooltipText",
+              "description": "Tooltip message.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/controls-group/controls-group.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "copy",
+          "description": "An internal button component that copies text to the user's clipboard.",
+          "attributes": [
+            {
+              "name": "text",
+              "required": true,
+              "description": "Defines the string that will get copied to the clipboard",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "tooltipPosition",
+              "description": "Position the tooltip should take if space is available. Defaults to 'top'",
+              "value": {
+                "kind": "expression",
+                "type": "PopperContainerPosition"
+              },
+              "default": "PopperContainerPosition.TOP"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/copy/copy.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "data-grid",
+          "description": "",
+          "attributes": [
+            {
+              "name": "allowRowClicks",
+              "description": "When true, will emit a 'rowClick' event when a row is clicked. Will add cursor: pointer to rows.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "allowColumnDragAndDrop",
+              "description": "When true, column headers will become draggable, allowing users to rearrange columns.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "bulkActions",
+              "description": "List of actions that will be rendered in the action bar when user selects items.\n\nEach object in the list should have a `title`, an `event` and,\noptionally, an `icon`.\n\nThe component will display 4 actions and the hide the rest inside a menu.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              },
+              "default": "null"
+            },
+            {
+              "name": "condensed",
+              "description": "Sets the row cells to the condensed padding state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "columns",
+              "required": true,
+              "description": "Column definitions using 'key' to relate to data object.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoColumn[]"
+              }
+            },
+            {
+              "name": "columnPanel",
+              "description": "Enables / hides the display options panel and the column contextual menu functionality.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "data",
+              "required": true,
+              "description": "An array of data objects to display.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridData"
+              }
+            },
+            {
+              "name": "emptyState",
+              "description": "Empty state props that will be passed down to inner empty-state component",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridEmptyStateProps"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "filters",
+              "description": "filter-bar value (i.e. filters) that will be passed down to inner filter-bar component\n{@see BentoFilterBarModel}",
+              "value": {
+                "kind": "expression",
+                "type": "BentoFilterBar.props.value.type"
+              },
+              "default": "undefined"
+            },
+            {
+              "name": "filterValues",
+              "description": "An array of the values for each filter set in `value`.\n{@see BentoFilterValues}",
               "value": {
                 "kind": "expression",
-                "type": "date"
-              }
+                "type": "BentoFilterBar.props.filterValues.type"
+              },
+              "default": "() => []"
             },
             {
-              "name": "disabled",
-              "description": "Indicate if a date should be disabled or not",
+              "name": "filterSearchTerm",
+              "description": "Filter bar search term useful to filter all the data by text",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoFilterBar.props.searchTerm.type"
               },
-              "default": "false"
+              "default": "undefined"
             },
             {
-              "name": "selected",
-              "description": "Changes the state of the calendar day to selected.",
+              "name": "fitContent",
+              "description": "Allows the grid to be rendered inside a confined space.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5826,103 +5878,53 @@
               "default": "false"
             },
             {
-              "name": "variant",
-              "description": "When the day is selected, this indicates if the selection is a single date or part of a range.\nIf it's a range it can be at the beginning, middle or end of the selection.",
+              "name": "getDataItemId",
+              "description": "A customisable method to retrieve a unique identifier for a data item in the array of data supplied.\nThis is used selecting and performance reasons and must exist in each data item.",
               "value": {
                 "kind": "expression",
-                "type": "CalendarMonthDayVariant"
+                "type": "BentoDatagridGetDataItemIdFn"
               },
-              "default": "CalendarMonthDayVariant.SINGLE"
-            }
-          ],
-          "events": [
-            {
-              "name": "<undefined>"
-            }
-          ],
-          "source": {
-            "module": "./src/components/internal/calendar/components/calendar-month/components/calendar-month-day/calendar-month-day.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "calendar-month-day-stub",
-          "description": "",
-          "events": [
-            {
-              "name": "<undefined>"
-            }
-          ],
-          "source": {
-            "module": "./src/components/internal/calendar/components/calendar-month/components/calendar-month-day/__test__/calendar-month-day-stub.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "card-stub",
-          "description": "",
-          "attributes": [
+              "default": "(item: BentoDatagridDataItem) => item.id"
+            },
             {
-              "name": "title",
-              "required": true,
+              "name": "hasResizableColumns",
+              "description": "If resize is enabled",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
-            }
-          ],
-          "source": {
-            "module": "./src/components/card/__tests__/card-stub.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "click-outside-stub",
-          "description": "",
-          "attributes": [
+                "type": "boolean"
+              },
+              "default": "true"
+            },
             {
-              "name": "insideContainerText",
+              "name": "isDataItemDisabled",
+              "description": "A customisable method to determine if a row is not selectable.\nThe default is that every row is selectable.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoDatagridIsDataItemDisabledFn"
               },
-              "default": "null"
+              "default": "() => false"
             },
             {
-              "name": "outsideContainerText",
+              "name": "lazyLoadType",
+              "description": "The type of `Lazy Load`.\nType \"automatic\" will enable infinite scrolling\nType \"button\" will enable lazy loading with \"Show more\" button",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoLazyLoadType"
               },
-              "default": "null"
-            }
-          ],
-          "events": [
-            {
-              "name": "click"
-            }
-          ],
-          "source": {
-            "module": "./src/components/click-outside/__tests__/click-outside-stub.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "controls-group",
-          "description": "",
-          "attributes": [
+              "default": "'none'"
+            },
             {
-              "name": "description",
-              "description": "Descriptive supporting text visbile underneath the label.",
+              "name": "loading",
+              "description": "If the loading indicator should be shown.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "null"
+              "default": "false"
             },
             {
-              "name": "disabled",
-              "description": "Sets all child controls of the <fieldset> as disabled.",
+              "name": "outline",
+              "description": "Enables / Disables the table's surrounding border.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5930,35 +5932,35 @@
               "default": "false"
             },
             {
-              "name": "form",
-              "description": "The value of the id attribute of a <form> element the <fieldset> is to part of, even if it is not inside the form itself.",
+              "name": "pagination",
+              "description": "Pagination props that will be passed down to inner pagination component",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoDatagridPaginationProps"
               },
-              "default": "null"
+              "default": "undefined"
             },
             {
-              "name": "hideLabel",
-              "description": "Shows/hides the group label.",
+              "name": "stickyPagination",
+              "description": "Make pagination stick to the bottom of the page when the data-grid is bigger than the screen.\nBecause styles have to be applied to pagination container element, this has to be a data-grid prop (rather than a pagination prop).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "null"
+              "default": "false"
             },
             {
-              "name": "label",
-              "required": true,
-              "description": "The name associated with the group. Required for accessibility purposes.\nThe label is shown when `hideLabel` is set to `true` or if `description` is passed",
+              "name": "stickyFilters",
+              "description": "Make data-grid filters stick to the top of the page along with the data-grid headers.\nDefaults to true.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "boolean"
+              },
+              "default": "true"
             },
             {
-              "name": "optional",
-              "description": "Indicates the field is optional.",
+              "name": "selectable",
+              "description": "Enables / Disables rows to be selected via a checkbox. On select the \"select\" event will be emitted.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5966,64 +5968,63 @@
               "default": "false"
             },
             {
-              "name": "required",
-              "description": "Indicates the field is required.",
+              "name": "selection",
+              "description": "Selected items",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "BentoDatagridDataItemId[]"
               },
-              "default": "false"
+              "default": "() => []"
             },
             {
-              "name": "tooltipText",
-              "description": "Tooltip message.",
+              "name": "highlightedRows",
+              "description": "Highlighted items",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoDatagridDataItemId[]"
               },
-              "default": "null"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/internal/controls-group/controls-group.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "copy",
-          "description": "An internal button component that copies text to the user's clipboard.",
-          "attributes": [
+              "default": "() => []"
+            },
             {
-              "name": "text",
-              "required": true,
-              "description": "Defines the string that will get copied to the clipboard",
+              "name": "sortBy",
+              "description": "Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.\nIt does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "BentoDatagridSortByColumn[]"
+              },
+              "default": "() => []"
             },
             {
-              "name": "tooltipPosition",
-              "description": "Position the tooltip should take if space is available. Defaults to 'top'",
+              "name": "tabTitle",
+              "description": "Title of the data grid to be rendered as tab title when a data grid is passed in a tab layout.",
               "value": {
                 "kind": "expression",
-                "type": "PopperContainerPosition"
+                "type": "string"
               },
-              "default": "PopperContainerPosition.TOP"
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "name": "<undefined>"
             }
           ],
           "slots": [
             {
-              "name": "default"
+              "name": "header"
+            },
+            {
+              "name": "innerSlot"
+            },
+            {
+              "name": "`item-${column.field}`"
+            },
+            {
+              "name": "footer"
             }
           ],
           "source": {
-            "module": "./src/components/internal/copy/copy.vue",
+            "module": "./src/components/data-grid/data-grid.vue",
             "symbol": "default"
           }
         },
@@ -6289,6 +6290,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "divider",
+          "description": "Divider component is a thin line that helps separate content and group them visually into sections.",
+          "source": {
+            "module": "./src/components/divider/divider.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "dropdown-base-textbox",
           "description": "Only for internal use, implements the logic of the textbox element to be implemented in the combobox.",
@@ -6504,6 +6513,15 @@
               },
               "default": "null"
             },
+            {
+              "name": "condensed",
+              "description": "Renders the dropdown with a condensed style.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "debounceTime",
               "description": "Custom debounce time. Default: 300",
@@ -6613,6 +6631,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "dropdown-lazy-load-stub",
+          "description": "",
+          "source": {
+            "module": "./src/components/dropdown/__tests__/dropdown-lazy-load-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "dropdown-options-container-stub",
           "description": "",
@@ -6923,6 +6949,15 @@
           "name": "field-label",
           "description": "",
           "attributes": [
+            {
+              "name": "condensed",
+              "description": "Renders the dropdown with a condensed style.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "label",
               "description": "Field label",