@adyen/bento-vue2 1.4.1 → 1.5.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -185,7 +185,7 @@
               "description": "Total count of applied filters",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "number|string"
               },
               "default": "null"
             },
@@ -594,7 +594,7 @@
               "description": "The number of applies values within the filter.\ne.g. if 2 items in a dropdown filter have been applied, the number 2 will be shown here.",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "number|string"
               },
               "default": "null"
             },
@@ -973,7 +973,7 @@
               "description": "Total count of applied filters",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "string|number"
               },
               "default": "null"
             },
@@ -986,6 +986,15 @@
               },
               "default": "undefined"
             },
+            {
+              "name": "buttonSecondaryLabel",
+              "description": "Sets the secondary label text of the popover vsibility toggle button text.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
             {
               "name": "defaultValue",
               "description": "Default value of the filter to reset to.",
@@ -1854,6 +1863,15 @@
               },
               "default": "() => false"
             },
+            {
+              "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": "BentoLazyLoadType"
+              },
+              "default": "'none'"
+            },
             {
               "name": "loading",
               "description": "If the loading indicator should be shown.",
@@ -1890,6 +1908,15 @@
               },
               "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.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
             {
               "name": "selectable",
               "description": "Enables / Disables rows to be selected via a checkbox. On select the \"select\" event will be emitted.",
@@ -2273,7 +2300,7 @@
             },
             {
               "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",
+              "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"
@@ -3326,7 +3353,7 @@
             },
             {
               "name": "menuFixedPositioning",
-              "description": "Instructs the menu popover to be visible outside of the containing container.\nhttps://popper.js.org/docs/v2/constructors/#strategy",
+              "description": "Instructs the menu popover to be visible outside of the containing container.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -3977,6 +4004,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "fallbackPosition",
+              "description": "Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].\nUseful when not using auto as starting placement.\nhttps://floating-ui.com/docs/flip#fallbackplacements",
+              "value": {
+                "kind": "expression",
+                "type": "Placement[]"
+              },
+              "default": "() => ['bottom-start', 'right-start', 'top-start', 'left-start']"
+            },
             {
               "name": "fitContent",
               "description": "Sets the size of the container to fit its content",
@@ -3988,7 +4024,7 @@
             },
             {
               "name": "fixedPositioning",
-              "description": "Instructs popover to be visible outside of the containing container.\nUseful when component would be used in limited containers like Modal, Side panel, etc.\nhttps://popper.js.org/docs/v2/constructors/#strategy",
+              "description": "Instructs popover to be visible outside of the containing container.\nUseful when component would be used in limited containers like Modal, Side panel, etc.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -4015,7 +4051,6 @@
             },
             {
               "name": "modifiers",
-              "description": "Custom set of modifiers. Useful for low-level control over Popper behavior in some really complex use cases.",
               "value": {
                 "kind": "expression",
                 "type": "array"
@@ -4029,7 +4064,7 @@
                 "kind": "expression",
                 "type": "BentoPopoverPositions | `${BentoPopoverPositions}`"
               },
-              "default": "BentoPopoverPositions.TOP"
+              "default": "BentoPopoverPositions.BOTTOM_START"
             },
             {
               "name": "small",
@@ -4069,6 +4104,9 @@
             }
           ],
           "events": [
+            {
+              "name": "placement"
+            },
             {
               "name": "dismiss"
             }
@@ -4355,12 +4393,12 @@
             },
             {
               "name": "ariaLabel",
-              "required": true,
               "description": "Accessible name describing the segmented control.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "null"
             },
             {
               "name": "fullWidth",
@@ -4467,10 +4505,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item.",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCountryFilterOptions"
+                "type": "BentoSelectCurrencyFilterOptions"
               },
               "default": "undefined"
             }
@@ -4481,7 +4519,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
             "symbol": "default"
           }
         },
@@ -4491,10 +4529,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCurrencyFilterOptions"
+                "type": "BentoSelectCountryFilterOptions"
               },
               "default": "undefined"
             }
@@ -4505,7 +4543,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
             "symbol": "default"
           }
         },
@@ -5641,6 +5679,34 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "button-actions-with-menu",
+          "description": "",
+          "attributes": [
+            {
+              "name": "actions",
+              "required": true,
+              "description": "List of actions that will be used to render the buttons.\nFirst element in the list will be rendered as \"primary\".\nAll elements after the first will be rendered as \"secondary\".\n\nEach object in the list should have a `title`, an `event` and\n(optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n\n`title`: Button's text.\n\n`event`: Event triggered when clicking the Button.\n\n`icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoButtonActionsList"
+              }
+            },
+            {
+              "name": "displayedActions",
+              "description": "The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/internal/button-actions-with-menu/button-actions-with-menu.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "calendar",
           "description": "Handles the calendar logic to change visible months for Single calendar\nand Range calendar, as well as the selection logic for range.\nAll the processing necessary for the calendar to select dates",
@@ -6105,6 +6171,39 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "data-grid-lazy-load",
+          "description": "",
+          "attributes": [
+            {
+              "name": "loading",
+              "required": true,
+              "description": "Indicates whether the component is in a loading state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "isInfiniteScroll",
+              "required": true,
+              "description": "If set to true, displays a loading indicator. Otherwise displays a loading button.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "<undefined>"
+            }
+          ],
+          "source": {
+            "module": "./src/components/data-grid/components/data-grid-lazy-load/data-grid-lazy-load.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid.test",
           "description": "",
@@ -6835,10 +6934,10 @@
           "attributes": [
             {
               "name": "appliedFiltersCount",
-              "description": "The number of applies values within the filter.\ne.g. if 2 items in a dropdown filter have been applied, the number 2 will be shown here.",
+              "description": "The number of applied values within the filter.\nText can also be applied here such as 'All'.\ne.g. if 2 items in a dropdown filter have been applied, the number 2 will be shown here.",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "string|number"
               },
               "default": "null"
             },
@@ -6868,6 +6967,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "secondaryLabel",
+              "description": "A secondary label to be added next to the primary for additional filtering information.\ni.e. Can be used to show the set value for said filter.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
             }
           ],
           "events": [
@@ -7622,6 +7730,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "modal-with-data-grid-stub",
+          "description": "",
+          "source": {
+            "module": "./src/components/modal/__tests__/modal-with-data-grid-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "pagination.test",
           "description": "",
@@ -7736,6 +7852,9 @@
           "events": [
             {
               "name": "dismiss"
+            },
+            {
+              "name": "placement"
             }
           ],
           "slots": [
@@ -7784,38 +7903,47 @@
         },
         {
           "name": "popper-container",
-          "description": "A wrapper for the 'popper/core' package that overlays a small piece of content near a target element.\n\nNOTE: This component should not be used by itself but more implemented by other exported components\ne.g. Tooltip\nMore info here on the package: https://popper.js.org/docs/v2/\n\n* @usage\nimport { PopperContainer } from '@adyen/bento-vue2';\n\nexport default {\n    components: { PopperContainer },\n    computed: {\n        targetElement() {\n            return this.$refs.tooltipTarget;\n        },\n    },\n    template: `\n         <popper-container\n              :target-element=\"targetElement\"\n              :position=\"position\"\n          >\n              {{ content }}\n         </popper-container>`,\n}",
+          "description": "",
           "attributes": [
             {
-              "name": "id",
-              "description": "The id to be set on the component. Use it for accessibility purposes.",
+              "name": "ariaRole",
+              "description": "The aria role assigned to the container. Defaults to null, which means it's not set if nothing is passed.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "PopperContainerAriaRole"
               },
               "default": "null"
             },
             {
-              "name": "targetElement",
-              "required": true,
-              "description": "Reference to the DOM element or Vue component for positioning",
+              "name": "arrow",
+              "description": "Indicates if container should have additional arrow, pointing at target element\nCan be just a boolean flag, or an object with additional configuration:",
               "value": {
                 "kind": "expression",
-                "type": "VueNodeElement"
-              }
+                "type": "PopperContainerArrowProp | boolean"
+              },
+              "default": "undefined"
             },
             {
-              "name": "position",
-              "description": "Position relative to the target element",
+              "name": "disabledFocusTrap",
+              "description": "Disables wrapping focus-trap component.\nMostly useful for the storybook demo.",
               "value": {
                 "kind": "expression",
-                "type": "PopperContainerPosition | `${PopperContainerPosition}`"
+                "type": "boolean"
               },
-              "default": "PopperContainerPosition.AUTO"
+              "default": "false"
+            },
+            {
+              "name": "fallbackPosition",
+              "description": "Allows to configure to fallback position to the one specified, it could be 'auto' or ['right', 'top', ...].\nUseful when not using auto as starting placement.",
+              "value": {
+                "kind": "expression",
+                "type": "FallbackPositionProp"
+              },
+              "default": "null"
             },
             {
               "name": "fixedPositioning",
-              "description": "Instructs popover to be visible outside of the containing container.\nUseful when component would be used in limited containers like Modal, Side panel, etc.\nhttps://popper.js.org/docs/v2/constructors/#strategy",
+              "description": "Instructs popover to be visible outside of the containing container.\nUseful when component would be used in limited containers like Modal, Side panel, etc.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -7823,22 +7951,22 @@
               "default": "false"
             },
             {
-              "name": "arrow",
-              "description": "Indicates if container should have additional arrow, pointing at target element\nCan be just a boolean flag, or an object with additional configuration:",
+              "name": "id",
+              "description": "The id to be set on the component. Use it for accessibility purposes.",
               "value": {
                 "kind": "expression",
-                "type": "PopperContainerArrowProp | boolean"
+                "type": "string"
               },
-              "default": "undefined"
+              "default": "null"
             },
             {
-              "name": "offset",
-              "description": "Allows to displace a popper container from its target element.",
+              "name": "isHidden",
+              "description": "If hiding / showing popper element then use this property to tell the popper when to update it's position.\nThis will drastically help improve performance, as we will not need to track hidden elements.",
               "value": {
                 "kind": "expression",
-                "type": "number[]"
+                "type": "boolean"
               },
-              "default": "() => [0, 0]"
+              "default": "null"
             },
             {
               "name": "matchWidth",
@@ -7850,45 +7978,46 @@
               "default": "false"
             },
             {
-              "name": "disabledFocusTrap",
-              "description": "Disables wrapping focus-trap component.\nMostly useful for the storybook demo.",
+              "name": "middleware",
+              "description": "Custom set of middleware. Useful for low-level control over Popper behavior in some really complex use cases.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "Middleware[]"
               },
-              "default": "false"
+              "default": "null"
             },
             {
-              "name": "modifiers",
-              "description": "Custom set of modifiers. Useful for low-level control over Popper behavior in some really complex use cases.",
+              "name": "offset",
+              "description": "Allows to displace a popper container from its target element.",
               "value": {
                 "kind": "expression",
-                "type": "array"
+                "type": "number[]"
               },
-              "default": "null"
+              "default": "() => [0, 0]"
             },
             {
-              "name": "fallbackPosition",
-              "description": "Allows to configure to fallback position to the one specified, it could be 'auto' or ['right', 'top', ...].\nUseful when not using auto as starting placement.\nhttps://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements",
+              "name": "position",
+              "description": "Position relative to the target element",
               "value": {
                 "kind": "expression",
-                "type": "FallbackPositionProp"
+                "type": "PopperContainerPosition | `${PopperContainerPosition}`"
               },
-              "default": "null"
+              "default": "PopperContainerPosition.AUTO"
             },
             {
-              "name": "ariaRole",
-              "description": "The aria role assigned to the container. Defaults to null, which means it's not set if nothing is passed.",
+              "name": "targetElement",
+              "required": true,
+              "description": "Reference to the DOM element or Vue component for positioning",
               "value": {
                 "kind": "expression",
-                "type": "PopperContainerAriaRole"
-              },
-              "default": "null"
+                "type": "VueNodeElement"
+              }
             }
           ],
           "events": [
             {
-              "name": "position"
+              "name": "placement",
+              "description": "Emits new placement of popper container when it's placement is updated."
             }
           ],
           "slots": [
@@ -7930,7 +8059,7 @@
           ],
           "events": [
             {
-              "name": "position"
+              "name": "placement"
             }
           ],
           "source": {
@@ -8189,6 +8318,96 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "step",
+          "description": "",
+          "attributes": [
+            {
+              "name": "completed",
+              "description": "Completed status. Used on non-linear steppers to indicate if the step is completed.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "substepIndex",
+              "description": "Active substep index",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:substep-index",
+              "description": "Event triggered when substep is updated by the parent step"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "substeps"
+            }
+          ],
+          "source": {
+            "module": "./src/components/stepper/components/step/step.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "stepper",
+          "description": "",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "Type of stepper; defines how the stepper should behave. Default: linear",
+              "value": {
+                "kind": "expression",
+                "type": "`${BentoStepperTypeOption}`"
+              },
+              "default": "'linear'"
+            },
+            {
+              "name": "variant",
+              "description": "Stepper variant; defines how the stepper should be displayed. Default: vertical",
+              "value": {
+                "kind": "expression",
+                "type": "`${BentoStepperVariantOption}`"
+              },
+              "default": "'vertical'"
+            },
+            {
+              "name": "index",
+              "description": "Active step index",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
+            }
+          ],
+          "events": [
+            {
+              "name": "update:index",
+              "description": "Event triggered when step is updated by the stepper"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/stepper/stepper.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "structured-list-mock",
           "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "1.4.1",
+    "version": "1.5.0",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -57,14 +57,14 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.4.1",
+        "@adyen/bento-design-tokens": "1.5.0",
         "@adyen/ui-assets-icons-16": "3.1.0",
         "@adyen/ui-assets-payment-method-icons": "5.2.0",
         "@codemirror/commands": "6.3.3",
         "@codemirror/language-data": "6.4.0",
         "@codemirror/state": "6.4.0",
         "@codemirror/view": "6.23.0",
-        "@popperjs/core": "2.11.8",
+        "@floating-ui/vue": "1.0.6",
         "date-fns": "2.28.0",
         "focus-lock": "0.11.0",
         "uuid": "9.0.0"