@gitlab/ui 115.0.1 → 115.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "115.0.1",
+  "version": "115.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -44,8 +44,7 @@
     "start": "yarn storybook",
     "storybook": "yarn storybook:prepare && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port ${STORYBOOK_PORT:-9001} -c .storybook",
     "storybook-vue3": "yarn storybook:prepare && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port ${STORYBOOK_PORT:-9001} -c .storybook",
-    "storybook:patch": "patch-package --error-on-fail --error-on-warn",
-    "storybook:prepare": "run-s storybook:patch copy-fonts build-tokens",
+    "storybook:prepare": "run-s copy-fonts build-tokens",
     "storybook:build:prod": "yarn storybook:prepare && storybook build -c .storybook -o storybook",
     "storybook:build:test": "yarn storybook:prepare && IS_VISUAL_TEST=true NODE_ENV=test storybook build --test -c .storybook -o storybook",
     "storybook:run": "npx http-server -bgs -p ${STORYBOOK_PORT:-9001} ./storybook",
@@ -64,23 +63,14 @@
     "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}'",
     "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}'",
     "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}/iframe.html",
-    "prettier": "prettier --check '**/*.{js,mjs,ts,vue}'",
-    "prettier:fix": "prettier --write '**/*.{js,mjs,ts,vue}'",
-    "eslint": "eslint --max-warnings 0 .",
-    "eslint:fix": "yarn eslint --fix",
-    "stylelint": "stylelint 'src/**/*.scss'",
-    "stylelint:fix": "yarn stylelint --fix",
-    "markdownlint": "markdownlint '**/*.md' --ignore node_modules --ignore CHANGELOG.md --ignore CHANGELOG-old.md --ignore src/vendor",
-    "markdownlint:fix": "yarn markdownlint --fix",
-    "lint": "run-p prettier eslint stylelint markdownlint",
-    "lint:fix": "run-s eslint:fix prettier:fix stylelint:fix markdownlint:fix",
     "translations:collect": "make translations.js",
     "tailwind-config-viewer:start": "tailwind-config-viewer -o",
     "tailwind-config-viewer:export": "tailwind-config-viewer export ./tailwind-config-viewer-static"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.7.1",
+    "@floating-ui/dom": "1.7.2",
     "echarts": "^5.6.0",
+    "gridstack": "^12.2.1",
     "iframe-resizer": "^4.4.5",
     "lodash": "^4.17.21",
     "popper.js": "^1.16.1",
@@ -102,25 +92,20 @@
     "jackspeak": "2.1.1",
     "postcss": "8.5.6",
     "json5": "2.2.3",
-    "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "1.4.2",
-    "eslint-plugin-import": "2.32.0"
+    "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "1.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.4",
+    "@babel/core": "^7.27.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@cypress/grep": "^4.0.1",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.29.0",
-    "@gitlab/eslint-plugin": "21.1.0",
+    "@cypress/grep": "^4.1.0",
     "@gitlab/fonts": "^1.3.0",
-    "@gitlab/stylelint-config": "6.2.2",
-    "@gitlab/svgs": "3.131.0",
-    "@jest/test-sequencer": "^30.0.2",
+    "@gitlab/svgs": "3.136.0",
+    "@jest/test-sequencer": "30.0.2",
     "@rollup/plugin-commonjs": "^21.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^3.1.0",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",
@@ -135,7 +120,6 @@
     "@storybook/vue-webpack5": "^7.6.17",
     "@storybook/vue3": "^7.6.20",
     "@storybook/vue3-webpack5": "^7.6.20",
-    "@studiometa/stylelint-formatter-gitlab": "^0.0.1",
     "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.5.17",
     "@vue/compiler-sfc": "^3.5.17",
@@ -149,43 +133,32 @@
     "acorn-walk": "^8.3.4",
     "autoprefixer": "10.4.21",
     "axe-playwright": "^2.1.0",
-    "babel-jest": "29.7.0",
-    "babel-loader": "^8.4.1",
+    "babel-loader": "^9.2.1",
     "cypress": "14.5.0",
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.4.0",
-    "entities": "^4.5.0",
+    "entities": "^5.0.0",
     "esbuild": "^0.18.0",
-    "eslint": "9.29.0",
-    "eslint-formatter-gitlab": "^6.0.1",
-    "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "5.1.0",
-    "eslint-plugin-storybook": "0.12.0",
     "fuse.js": "^7.1.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.4.5",
     "globby": "^11.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-circus": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "jest": "30.0.2",
+    "jest-circus": "30.0.2",
+    "jest-environment-jsdom": "30.0.2",
     "jest-image-snapshot": "^6.5.1",
-    "lefthook": "^1.11.14",
-    "markdownlint-cli": "^0.29.0",
     "merge-cobertura": "^1.0.4",
     "mockdate": "^2.0.5",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "patch-package": "^8.0.0",
     "pikaday": "^1.8.0",
     "playwright": "^1.53.1",
     "playwright-core": "^1.53.1",
     "postcss": "8.5.6",
     "postcss-loader": "8.1.1",
     "postcss-scss": "4.0.9",
-    "prettier": "3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^2.79.2",
@@ -194,24 +167,24 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.49.9",
+    "sass": "^1.89.2",
     "sass-loader": "^10.5.2",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.15.4",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
     "style-dictionary": "^5.0.0",
-    "stylelint": "16.21.0",
+    "style-loader": "3.3.2",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.17",
     "vue": "2.7.16",
+    "vue-docgen-loader": "1.5.1",
     "vue-loader": "^15.11.1",
     "vue-loader-vue3": "npm:vue-loader@17.4.2",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "2.7.16",
     "vue-test-utils-compat": "^0.0.15",
     "webpack": "^5.99.9",
-    "yargs": "^17.7.2",
-    "yarn-deduplicate": "^6.0.2"
+    "yargs": "^17.7.2"
   }
 }

package/src/components/base/accordion/accordion_item.vue

@@ -116,7 +116,7 @@ export default {
     checkAndCollapseSiblingAccordionItems(newVisible) {
       if (this.autoCollapse() && newVisible) {
         this.$parent.$el.dispatchEvent(
-          new CustomEvent(COLLAPSE_EVENT, { detail: this.accordionItemId })
+          new CustomEvent(COLLAPSE_EVENT, { detail: this.accordionItemId }),
         );
       }
     },

package/src/components/base/avatar/avatar.vue

@@ -83,7 +83,7 @@ export default {
         `gl-avatar-s${defaultSize || avatarSizeOptions[1]}`,
         ...Object.entries(nonDefaultSizes).map(
           // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
-          ([breakpoint, size]) => `gl-${breakpoint}-avatar-s${size}`
+          ([breakpoint, size]) => `gl-${breakpoint}-avatar-s${size}`,
         ),
       ];
     },

package/src/components/base/button/button.vue

@@ -335,7 +335,7 @@ export default {
     if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
       logWarning(
         '[gl-button]: Accessible name missing. Please add inner text or aria-label.',
-        this.$el
+        this.$el,
       );
     }
   },

package/src/components/base/dropdown/dropdown.vue

@@ -177,7 +177,9 @@ export default {
     },
     isIconOnly() {
       return Boolean(
-        this.icon && (!this.text?.length || this.textSrOnly) && !this.hasSlotContents('button-text')
+        this.icon &&
+          (!this.text?.length || this.textSrOnly) &&
+          !this.hasSlotContents('button-text'),
       );
     },
     isIconWithText() {

package/src/components/base/filtered_search/filtered_search.vue

@@ -74,7 +74,7 @@ export default {
         if (!isOk) {
           // eslint-disable-next-line no-console
           console.warn(
-            'You are using Vue3. In Vue3 each token component passed to filtered search must be wrapped into markRaw'
+            'You are using Vue3. In Vue3 each token component passed to filtered search must be wrapped into markRaw',
           );
         }
 

package/src/components/base/filtered_search/filtered_search_suggestion_list.vue

@@ -33,7 +33,7 @@ export default {
   computed: {
     initialActiveIdx() {
       return this.registeredItems.findIndex((item) =>
-        this.valuesMatch(item.value, this.initialValue)
+        this.valuesMatch(item.value, this.initialValue),
       );
     },
     initialActiveItem() {

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -110,7 +110,7 @@ export default {
     availableTokensWithSelf() {
       return [this.config, ...this.availableTokens.filter((token) => token !== this.config)].map(
         // eslint-disable-next-line unicorn/no-array-callback-reference
-        tokenToOption
+        tokenToOption,
       );
     },
 

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -250,7 +250,7 @@ export default {
       }
 
       const [firstWord, ...otherWords] = splitOnQuotes(newValue).filter(
-        (w, idx, arr) => Boolean(w) || idx === arr.length - 1
+        (w, idx, arr) => Boolean(w) || idx === arr.length - 1,
       );
       this.$emit('input', firstWord);
 
@@ -279,7 +279,7 @@ export default {
       return this.options?.find((option) =>
         loose
           ? match(option[this.optionTextField], inputValue)
-          : option[this.optionTextField] === inputValue
+          : option[this.optionTextField] === inputValue,
       );
     },
 
@@ -324,7 +324,7 @@ export default {
       if (!this.multiSelect) {
         this.$emit(
           'input',
-          formattedSuggestedValue === TERM_TOKEN_TYPE ? this.inputValue : formattedSuggestedValue
+          formattedSuggestedValue === TERM_TOKEN_TYPE ? this.inputValue : formattedSuggestedValue,
         );
         this.$emit('complete', formattedSuggestedValue);
       }

package/src/components/base/form/form_checkbox_tree/models/tree.js

@@ -73,7 +73,7 @@ export class Tree {
           node.setCheckedState(
             this.optionHasSomeChildrenChecked(node)
               ? CHECKED_STATE.INDETERMINATE
-              : node.checkedState
+              : node.checkedState,
           );
           removeIndices.push(nodeIndex);
         }

package/src/components/base/form/form_date/form_date.vue

@@ -56,7 +56,7 @@ export default {
   computed: {
     ariaDescribedBy() {
       return [this.valueAsDate && this.outputId, this.isInvalid && this.invalidFeedbackId].join(
-        ' '
+        ' ',
       );
     },
     isLessThanMin() {

package/src/components/base/form/form_input/form_input.vue

@@ -311,7 +311,7 @@ export default {
           ...(defaultWidth ? [`gl-form-input-${defaultWidth}`] : []),
           ...Object.entries(nonDefaultWidths).map(
             // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
-            ([breakpoint, width]) => `gl-${breakpoint}-form-input-${width}`
+            ([breakpoint, width]) => `gl-${breakpoint}-form-input-${width}`,
           ),
         ];
       }

package/src/components/base/form/form_select/form_select.vue

@@ -43,7 +43,7 @@ export default {
           ...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []),
           ...Object.entries(nonDefaultWidths).map(
             // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
-            ([breakpoint, width]) => `gl-${breakpoint}-form-select-${width}`
+            ([breakpoint, width]) => `gl-${breakpoint}-form-select-${width}`,
           ),
         ];
       }

package/src/components/base/modal/modal.vue

@@ -111,7 +111,7 @@ export default {
           this.actionSecondary ||
           this.actionPrimary ||
           // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-          this.$slots['modal-footer']
+          this.$slots['modal-footer'],
       );
     },
   },
@@ -119,7 +119,7 @@ export default {
     if (!this.ariaLabel && !this.title) {
       logWarning(
         '[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.',
-        this.$el
+        this.$el,
       );
     }
   },

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -117,7 +117,7 @@ export default {
         if (['left', 'center', 'right'].includes(value)) {
           logWarning(
             `GlDisclosureDropdown/GlCollapsibleListbox: "${value}" placement is deprecated.
-            Use ${dropdownPlacements[value]} instead.`
+            Use ${dropdownPlacements[value]} instead.`,
           );
         }
 
@@ -312,7 +312,7 @@ export default {
                 {
                   maxHeight: `${Math.max(contentsAvailableHeight, 0)}px`,
                 },
-                maxWidth
+                maxWidth,
               );
             },
           }),
@@ -344,7 +344,7 @@ export default {
         logWarning(
           `GlDisclosureDropdown/GlCollapsibleListbox: Toggle is missing a 'tabindex' and cannot be focused.
           Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`,
-          this.$el
+          this.$el,
         );
       }
     },
@@ -383,7 +383,7 @@ export default {
         const result = await computePosition(
           this.toggleElement,
           this.$refs.content,
-          this.floatingUIConfig
+          this.floatingUIConfig,
         );
 
         /**

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -84,8 +84,7 @@ make them render as links. Otherwise, they will be buttons. Provide an `action`
 function to items to be called when they are pressed, or, listen for the
 `action` event on the top-level component. Both will receive the given item as
 an argument.
-A <!-- markdownlint-disable-next-line line-length -->
-[validation error](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/6cbff4f908b429cc01f17a4cc2868e881db1aa31/src/components/base/new_dropdowns/disclosure/utils.js#L1)
+A [validation error](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/6cbff4f908b429cc01f17a4cc2868e881db1aa31/src/components/base/new_dropdowns/disclosure/utils.js#L1)
 will be triggered if neither field is set.
 
 Below are the expected shapes of these objects:

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -365,7 +365,7 @@ export default {
       default: translatePlural(
         'GlCollapsibleListbox.srOnlyResultsLabel',
         '%d result',
-        '%d results'
+        '%d results',
       ),
     },
   },
@@ -513,7 +513,7 @@ export default {
       if (this.infiniteScrollLoading) {
         return translate(
           'GlCollapsibleListbox.loadingAnnouncementText.loadingMoreItems',
-          'Loading more items'
+          'Loading more items',
         );
       }
       if (this.searching) {
@@ -522,7 +522,7 @@ export default {
       if (this.loading) {
         return translate(
           'GlCollapsibleListbox.loadingAnnouncementText.loadingItems',
-          'Loading items'
+          'Loading items',
         );
       }
       return '';
@@ -568,7 +568,7 @@ export default {
             handler(newResetButtonLabel) {
               if (newResetButtonLabel && !this.headerText) {
                 throw new Error(
-                  'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
+                  'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.',
                 );
               }
             },
@@ -578,7 +578,7 @@ export default {
             handler(showSelectAllButtonLabel) {
               if (showSelectAllButtonLabel && !this.headerText) {
                 throw new Error(
-                  'The select all button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the showSelectAllButtonLabel prop.'
+                  'The select all button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the showSelectAllButtonLabel prop.',
                 );
               }
             },
@@ -589,7 +589,7 @@ export default {
               if (newValue && this.items.some((item) => !isOption(item))) {
                 // eslint-disable-next-line no-console
                 console.warn(
-                  'When using grouped options infinite scroll can only be used on the last group.'
+                  'When using grouped options infinite scroll can only be used on the last group.',
                 );
               }
             },
@@ -793,7 +793,7 @@ export default {
       } else {
         this.$emit(
           'select',
-          this.selectedValues.filter((selectedValue) => selectedValue !== value)
+          this.selectedValues.filter((selectedValue) => selectedValue !== value),
         );
       }
     },

package/src/components/base/pagination/pagination.vue

@@ -249,14 +249,14 @@ export default {
             0,
             0,
             this.getPageItem(1, this.labelFirstPage),
-            this.getEllipsisItem('left')
+            this.getEllipsisItem('left'),
           );
         }
 
         if (this.shouldCollapseRightSide) {
           items.push(
             this.getEllipsisItem('right'),
-            this.getPageItem(this.totalPages, this.labelLastPage)
+            this.getPageItem(this.totalPages, this.labelLastPage),
           );
         }
       }

package/src/components/base/path/path.vue

@@ -114,7 +114,7 @@ export default {
     },
     scrollPathRight() {
       const nextItemToScollTo = this.$refs.pathListItems.find(
-        (listItem) => listItem.offsetLeft + listItem.offsetWidth > this.rightHandBoundary
+        (listItem) => listItem.offsetLeft + listItem.offsetWidth > this.rightHandBoundary,
       );
       let scrollTo = nextItemToScollTo.offsetLeft - BOUNDARY_WIDTH;
 

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -94,7 +94,7 @@ export default {
 
       return propValueOrDefault(
         'height',
-        props.lines * DEFAULT_LINE_HEIGHT + (props.lines - 1) * DEFAULT_LINE_SPACING
+        props.lines * DEFAULT_LINE_HEIGHT + (props.lines - 1) * DEFAULT_LINE_SPACING,
       );
     };
 
@@ -154,8 +154,8 @@ export default {
                       height: DEFAULT_LINE_HEIGHT,
                       rx: 4,
                     },
-                  })
-                )
+                  }),
+                ),
           ),
           !reducedMotion &&
             createElement(
@@ -183,7 +183,7 @@ export default {
                         repeatCount: 'indefinite',
                       },
                     }),
-                  ]
+                  ],
                 ),
                 createElement(
                   'stop',
@@ -202,7 +202,7 @@ export default {
                         repeatCount: 'indefinite',
                       },
                     }),
-                  ]
+                  ],
                 ),
                 createElement(
                   'stop',
@@ -221,12 +221,12 @@ export default {
                         repeatCount: 'indefinite',
                       },
                     }),
-                  ]
+                  ],
                 ),
-              ]
+              ],
             ),
         ]),
-      ]
+      ],
     );
 
     if (slotIsSet()) {
@@ -242,7 +242,7 @@ export default {
           height: props.height !== null ? `${props.height}px` : null,
         },
       },
-      [svg]
+      [svg],
     );
   },
 };

package/src/components/base/table/table.md

@@ -11,8 +11,7 @@ data and table head its own styles if necessary.
 To ensure we internationalize field labels, always pass an array of objects for the `fields` prop,
 like mentioned in the implementation example.
 
-_Full documentation for the
-`field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_
+[Learn more about the `field` prop](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/2e88af62966265cb725ca3f65f4b175e2494734b/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/table/README.md#L137).
 
 ## Header text alignment
 

package/src/components/base/table_lite/table_lite.md

@@ -27,7 +27,7 @@ The `GlTableLite` component provides all of the styling and formatting features
 To ensure we internationalize field labels, always pass an array of objects for the `fields` prop,
 like mentioned in the implementation example.
 
-_Full documentation for the `field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_
+[Learn more about the `field` prop](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/2e88af62966265cb725ca3f65f4b175e2494734b/packages/gitlab-ui/src/vendor/bootstrap-vue/src/components/table/README.md#L137).
 
 ## Implementation example
 

package/src/components/base/tabs/tabs/tabs.vue

@@ -134,7 +134,7 @@ export default {
       await this.$nextTick();
       const queryParamValue = this.getQueryParamValue();
       const tabIndexToActivate = this.getTabs().findIndex(
-        (tab, tabIndex) => this.getTabQueryParamValue(tabIndex) === queryParamValue
+        (tab, tabIndex) => this.getTabQueryParamValue(tabIndex) === queryParamValue,
       );
       this.activeTabIndex = tabIndexToActivate !== -1 ? tabIndexToActivate : 0;
     },

package/src/components/base/toast/toast.js

@@ -35,8 +35,8 @@ function renderTitle(h, toast, options) {
             click: (e) => options.action.onClick(e, toast),
           },
         },
-        options.action.text
-      )
+        options.action.text,
+      ),
     );
   }
   return nodes;

package/src/components/base/token_selector/token_container.vue

@@ -51,7 +51,7 @@ export default {
       }
 
       const tokenRef = this.$refs.tokens?.find(
-        (ref) => ref.dataset.tokenId === newValue.id.toString()
+        (ref) => ref.dataset.tokenId === newValue.id.toString(),
       );
 
       if (tokenRef) {

package/src/components/base/token_selector/token_selector.vue

@@ -162,7 +162,7 @@ export default {
     filteredDropdownItems() {
       return this.dropdownItems.filter(
         (dropdownItem) =>
-          this.selectedTokens.findIndex((token) => token.id === dropdownItem.id) === -1
+          this.selectedTokens.findIndex((token) => token.id === dropdownItem.id) === -1,
       );
     },
     dropdownHasNoItems() {
@@ -341,7 +341,7 @@ export default {
        */
       this.$emit(
         'input',
-        this.selectedTokens.filter((selectedToken) => selectedToken.id !== token.id)
+        this.selectedTokens.filter((selectedToken) => selectedToken.id !== token.id),
       );
       /**
        * Fired when a token is removed

package/src/components/base/token_selector/token_selector_dropdown.vue

@@ -186,7 +186,7 @@ export default {
       }
 
       return this.$refs.dropdownItems?.find(
-        (ref) => ref.$attrs['data-dropdown-item-id'] === dropdownItem.id
+        (ref) => ref.$attrs['data-dropdown-item-id'] === dropdownItem.id,
       );
     },
     dropdownItemIdAttribute(dropdownItem) {

package/src/components/charts/area/area.vue

@@ -173,7 +173,7 @@ export default {
           },
           lineStyle,
           series,
-          getThresholdConfig(this.thresholds)
+          getThresholdConfig(this.thresholds),
         );
       });
       // if annotation series exists, append it
@@ -214,13 +214,13 @@ export default {
         areaChartOptions,
         this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
-        dataZoomAdjustments(this.option.dataZoom)
+        dataZoomAdjustments(this.option.dataZoom),
       );
       // All chart options can be merged but series
       // needs to be handled specially.
       return mergeSeriesToOptions(
         mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations),
-        this.series
+        this.series,
       );
     },
     /**

package/src/components/charts/bar/bar.vue

@@ -157,7 +157,7 @@ export default {
           },
         },
         this.option,
-        dataZoomAdjustments(this.option.dataZoom)
+        dataZoomAdjustments(this.option.dataZoom),
       );
       // All chart options can be merged but series
       // needs to be handled specially
@@ -207,7 +207,7 @@ export default {
         {
           yLabels: [],
           tooltipContent: {},
-        }
+        },
       );
 
       return { yLabels, tooltipContent };