@gitlab/ui 32.67.0 → 33.1.0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+# [33.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.0.1...v33.1.0) (2022-01-26)
+
+
+### Features
+
+* **GlPopover:** add support for a close button ([583be0b](https://gitlab.com/gitlab-org/gitlab-ui/commit/583be0bd76f5c72384c19fe0eeeb4bc334eb58be))
+
+## [33.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v33.0.0...v33.0.1) (2022-01-26)
+
+
+### Bug Fixes
+
+* **GlSearchBox*:** Hide Chrome's cancel button ([387df0a](https://gitlab.com/gitlab-org/gitlab-ui/commit/387df0aecaa1e21efaacb25ed8e2ea5187e46fd2))
+
+# [33.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.68.0...v33.0.0) (2022-01-21)
+
+
+### Bug Fixes
+
+* **css:** rename and remove invalid CSS utils ([6cbde8b](https://gitlab.com/gitlab-org/gitlab-ui/commit/6cbde8bf451d64ce0e6d03bc47ce5cb46ed4f665))
+
+
+### BREAKING CHANGES
+
+* **css:** this removes a few CSS utils that were incorrectly
+named in favor of new ones that follow the naming conventions.
+If you were using any of the removed utils, please migrate to the new
+ones:
+
+* gl-flex-sm-wrap was replaced with gl-sm-flex-wrap.
+* gl-justify-content-md-start was replaced with
+  gl-md-justify-content-start.
+* gl-pt-md-2 was replaced with gl-md-pt-2.
+* gl-mt-md-n2 was replaced with gl-md-mt-n2.
+
+# [32.68.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.67.0...v32.68.0) (2022-01-19)
+
+
+### Features
+
+* **css:** Added gl-w-grid-size-28 utility class ([e7a29b4](https://gitlab.com/gitlab-org/gitlab-ui/commit/e7a29b49bd981eea65ea38550872a3258ba29e67))
+
 # [32.67.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.66.0...v32.67.0) (2022-01-19)
 
 

package/dist/components/base/datepicker/datepicker.js

@@ -7,7 +7,10 @@ import GlFormInput from '../form/form_input/form_input';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const pad = (val, len = 2) => `0${val}`.slice(-len);
+const pad = function (val) {
+  let len = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return `0${val}`.slice(-len);
+};
 /**
  * Used `onSelect` method in pickaday
  * @param {Date} date UTC format

package/dist/components/base/dropdown/dropdown.js

@@ -194,12 +194,12 @@ var script = {
       return Boolean(this.$slots[slotName]);
     },
 
-    show(...args) {
-      this.$refs.dropdown.show(...args);
+    show() {
+      this.$refs.dropdown.show(...arguments);
     },
 
-    hide(...args) {
-      this.$refs.dropdown.hide(...args);
+    hide() {
+      this.$refs.dropdown.hide(...arguments);
     }
 
   }

package/dist/components/base/filtered_search/filtered_search.js

@@ -11,7 +11,8 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 Vue.use(PortalVue);
 let portalUuid = 0;
 
-function createTerm(data = '') {
+function createTerm() {
+  let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return {
     type: TERM_TOKEN_TYPE,
     value: {
@@ -226,7 +227,9 @@ var script = {
       this.activeTokenIdx = idx;
     },
 
-    createTokens(idx, newStrings = ['']) {
+    createTokens(idx) {
+      let newStrings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [''];
+
       if (this.activeTokenIdx !== this.lastTokenIdx && newStrings.length === 1 && newStrings[0] === '') {
         this.activeTokenIdx = this.lastTokenIdx;
         return;

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -183,11 +183,12 @@ var script = {
       }
     },
 
-    handleOperatorKeydown(evt, {
-      inputValue,
-      suggestedValue,
-      applySuggestion
-    }) {
+    handleOperatorKeydown(evt, _ref) {
+      let {
+        inputValue,
+        suggestedValue,
+        applySuggestion
+      } = _ref;
       const {
         key
       } = evt;
@@ -199,9 +200,12 @@ var script = {
 
       const potentialValue = `${inputValue}${key}`;
 
-      if (key.length === 1 && !this.operators.find(({
-        value
-      }) => value.startsWith(potentialValue))) {
+      if (key.length === 1 && !this.operators.find(_ref2 => {
+        let {
+          value
+        } = _ref2;
+        return value.startsWith(potentialValue);
+      })) {
         if (this.value.data === '') {
           applySuggestion(suggestedValue);
         } else {

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -146,13 +146,14 @@ var script = {
       }
     },
 
-    getMatchingOptionForInputValue(v, {
-      loose
-    } = {
-      loose: false
-    }) {
+    getMatchingOptionForInputValue(v) {
       var _this$options3;
 
+      let {
+        loose
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+        loose: false
+      };
       return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(o => loose ? o[this.optionTextField].startsWith(v) : [this.optionTextField] === v);
     },
 

package/dist/components/base/form/form_checkbox_tree/models/node.js

@@ -1,14 +1,15 @@
 import { CHECKED_STATE } from './constants';
 
 class Node {
-  constructor({
-    value,
-    label,
-    parent = null,
-    children = [],
-    depth,
-    isChecked
-  }) {
+  constructor(_ref) {
+    let {
+      value,
+      label,
+      parent = null,
+      children = [],
+      depth,
+      isChecked
+    } = _ref;
     this.value = value;
     this.label = label;
     this.parent = parent;

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

@@ -50,7 +50,12 @@ class Tree {
    */
 
 
-  initNodes(options = [], selected = [], parent = null, depth = 0) {
+  initNodes() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    let parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    let depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+
     if (!options.length) {
       return;
     }
@@ -130,9 +135,12 @@ class Tree {
 
 
   getOptionChildren(option) {
-    return option.children.map(({
-      value
-    }) => this.getNode(value));
+    return option.children.map(_ref => {
+      let {
+        value
+      } = _ref;
+      return this.getNode(value);
+    });
   }
   /**
    * Sets a node's state based on whether it got checked or unchecked
@@ -164,9 +172,11 @@ class Tree {
    */
 
 
-  toggleOption({
-    value
-  }, checked, propagateToParent = true) {
+  toggleOption(_ref2, checked) {
+    let {
+      value
+    } = _ref2;
+    let propagateToParent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
     const node = this.getNode(value);
     Tree.toggleNodeState(node, checked);
 
@@ -187,9 +197,10 @@ class Tree {
    */
 
 
-  toggleParentOption({
-    value
-  }) {
+  toggleParentOption(_ref3) {
+    let {
+      value
+    } = _ref3;
     const node = this.getNode(value);
 
     if (this.optionHasAllChildrenChecked(node)) {

package/dist/components/base/form/form_input/form_input.js

@@ -32,19 +32,29 @@ var script = {
     },
 
     listeners() {
+      var _this = this;
+
       return { ...this.$listeners,
         // Swap purpose of input and update events from underlying BFormInput.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
-        input: (...args) => {
+        input: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
           /**
            * Emitted to update the v-model
            *
            * @event update
            * @property {string} value new value
            */
-          this.$emit('update', ...args);
+          _this.$emit('update', ...args);
         },
-        update: (...args) => {
+        update: function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+
           /**
            * Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props).
            * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
@@ -52,7 +62,7 @@ var script = {
            * @event input
            * @property {string} value new value
            */
-          this.$emit(MODEL_EVENT, ...args);
+          _this.$emit(MODEL_EVENT, ...args);
         }
       };
     }

package/dist/components/base/form/form_textarea/form_textarea.js

@@ -32,22 +32,32 @@ var script = {
   },
   computed: {
     listeners() {
+      var _this = this;
+
       return { ...this.$listeners,
         // Swap purpose of input and update events from underlying BFormTextarea.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
-        input: (...args) => {
+        input: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
           /**
            * Emitted to update the v-model
            */
-          this.$emit('update', ...args);
+          _this.$emit('update', ...args);
         },
-        update: (...args) => {
+        update: function () {
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+
           /**
            * Triggered by user interaction.
            * Emitted after any formatting (not including 'trim' or 'number' props).
            * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
            */
-          this.$emit(model.event, ...args);
+          _this.$emit(model.event, ...args);
         }
       };
     },

package/dist/components/base/infinite_scroll/infinite_scroll.documentation.js

@@ -1,39 +1,8 @@
-import examples from './examples';
-
-var description = "# Infinite Scroll\n\n<!-- STORY -->\n\n## Usage\n\nThe infinite scroll component wraps around a results list and emits a message\n(`bottomReached`) when the bottom of the viewport is reached, which should trigger\na re-fetching. The `gl-infinite-scroll` component expects its parent component to\nmanage the re-fetching.\n\nAdditionally it emits a `topReached` message when the top of the viewport is reached, which\ncan be useful to load items on top of the available data. If only `topReached` is present, the\nviewport will be scrolled to the bottom the first time this component is mounted.\n\n## Public methods\n\nUseful public methods you can call via `$refs`:\n\n- `.scrollUp()`: Scrolls to the top of the container.\n- `.scrollDown()`: Scrolls to the bottom of the container.\n- `.scrollTo({ top })`: Scrolls to a number of pixels along the Y axis of the container.\n\n## Implementation Example\n\nThis is how a full implementation would look like with paginated results from GitLab's\n`projects` API.\n\nIn the component's state, initialize a `pageInfo` object:\n\n```js\npageInfo: {\n  currentPage: 0,\n  nextPage: 0,\n  totalPages: 0,\n  totalResults: 0,\n}\n```\n\nWhen fetching for the first time, set the state with the header\ninformation in the mutations:\n\n```html\nVue.set(state.pageInfo, 'currentPage', parseInt(headers['X-Page'], 10));\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'], 10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'], 10));\nVue.set(state.pageInfo, 'totalResults', parseInt(headers['X-Total'], 10));\n```\n\n_Note: There is a function you can use for parsing integers in headers in\nGitLab called `parseIntPagination` in `common/utils.js`_\n\nEvery time `bottomReached` happens, update the state in your mutations:\n\n```js\nstate.searchResults = state.searchResults.concat(results.data);\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'],10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'],10));\n```\n\nUse the state to fetch the next page in the actions. In this case, the `Projects`\nAPI allows us to send in a `page` parameter to fetch a certain page from the\nlist of results.\n\n```js\nexport const fetchNextPage = ({ state, dispatch }) => {\n  if(state.pageInfo.currentPage < state.pageInfo.totalPages) {\n    Api.projects(searchQuery, { page: state.pageInfo.nextPage })\n      ...\n  }\n};\n```\n\n```html\n<script>\nexportDefault {\n  components: {\n    GlInfiniteScroll,\n  },\n  computed: {\n    ...mapState([\n      'pageInfo',\n      'searchResults',\n    ]),\n  },\n  methods: {\n    ...mapActions([\n      'fetchNextPage',\n    ]),\n    bottomReached() {\n      this.fetchNextPage();\n    },\n  },\n}\n</script>\n<template>\n  <gl-infinite-scroll\n    @bottomReached=\"bottomReached\"\n    :max-list-height=\"400\"\n    :fetched-items=\"searchResults.length\"\n    :total-items=\"totalResults\"\n  >\n    ...Results in a list, another component, etc ....\n  </gl-infinite-scroll>\n</template>\n```\n";
+var description = "## Usage\n\nThe infinite scroll component wraps around a results list and emits a message\n(`bottomReached`) when the bottom of the viewport is reached, which should trigger\na re-fetching. The `gl-infinite-scroll` component expects its parent component to\nmanage the re-fetching.\n\nAdditionally it emits a `topReached` message when the top of the viewport is reached, which\ncan be useful to load items on top of the available data. If only `topReached` is present, the\nviewport will be scrolled to the bottom the first time this component is mounted.\n\n## Public methods\n\nUseful public methods you can call via `$refs`:\n\n- `.scrollUp()`: Scrolls to the top of the container.\n- `.scrollDown()`: Scrolls to the bottom of the container.\n- `.scrollTo({ top })`: Scrolls to a number of pixels along the Y axis of the container.\n\n## Implementation Example\n\nThis is how a full implementation would look like with paginated results from GitLab's\n`projects` API.\n\nIn the component's state, initialize a `pageInfo` object:\n\n```js\npageInfo: {\n  currentPage: 0,\n  nextPage: 0,\n  totalPages: 0,\n  totalResults: 0,\n}\n```\n\nWhen fetching for the first time, set the state with the header\ninformation in the mutations:\n\n```html\nVue.set(state.pageInfo, 'currentPage', parseInt(headers['X-Page'], 10));\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'], 10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'], 10));\nVue.set(state.pageInfo, 'totalResults', parseInt(headers['X-Total'], 10));\n```\n\n_Note: There is a function you can use for parsing integers in headers in\nGitLab called `parseIntPagination` in `common/utils.js`_\n\nEvery time `bottomReached` happens, update the state in your mutations:\n\n```js\nstate.searchResults = state.searchResults.concat(results.data);\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'],10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'],10));\n```\n\nUse the state to fetch the next page in the actions. In this case, the `Projects`\nAPI allows us to send in a `page` parameter to fetch a certain page from the\nlist of results.\n\n```js\nexport const fetchNextPage = ({ state, dispatch }) => {\n  if(state.pageInfo.currentPage < state.pageInfo.totalPages) {\n    Api.projects(searchQuery, { page: state.pageInfo.nextPage })\n      ...\n  }\n};\n```\n\n```html\n<script>\nexportDefault {\n  components: {\n    GlInfiniteScroll,\n  },\n  computed: {\n    ...mapState([\n      'pageInfo',\n      'searchResults',\n    ]),\n  },\n  methods: {\n    ...mapActions([\n      'fetchNextPage',\n    ]),\n    bottomReached() {\n      this.fetchNextPage();\n    },\n  },\n}\n</script>\n<template>\n  <gl-infinite-scroll\n    @bottomReached=\"bottomReached\"\n    :max-list-height=\"400\"\n    :fetched-items=\"searchResults.length\"\n    :total-items=\"totalResults\"\n  >\n    ...Results in a list, another component, etc ....\n  </gl-infinite-scroll>\n</template>\n```\n";
 
 var infinite_scroll_documentation = {
   followsDesignSystem: true,
-  description,
-  examples,
-  propsInfo: {
-    totalItems: {
-      additionalInfo: 'Total number of items available'
-    },
-    fetchedItems: {
-      additionalInfo: 'Numbers of items fetched before scrolling'
-    },
-    maxListHeight: {
-      additionalInfo: 'Max height of the list before the scrollbar appears'
-    }
-  },
-  events: [{
-    event: '@topReached',
-    description: 'Emitted when item container is scrolled to the top'
-  }, {
-    event: '@bottomReached',
-    description: 'Emitted when item container is scrolled to the bottom'
-  }],
-  slots: [{
-    name: 'default',
-    description: 'Footer of the list, appears below the items'
-  }, {
-    name: 'header',
-    description: 'Header of the list, appears above the items'
-  }, {
-    name: 'items',
-    description: 'List of items'
-  }]
+  description
 };
 
 export default infinite_scroll_documentation;

package/dist/components/base/infinite_scroll/infinite_scroll.js

@@ -10,15 +10,26 @@ const throttleDuration = 1000;
 const adjustScrollGap = 5;
 var script = {
   props: {
+    /**
+     * Total number of items available
+     */
     totalItems: {
       type: Number,
       required: false,
       default: 0
     },
+
+    /**
+     * Numbers of items fetched before scrolling
+     */
     fetchedItems: {
       type: Number,
       required: true
     },
+
+    /**
+     * Max height of the list before the scrollbar appears
+     */
     maxListHeight: {
       type: Number,
       required: false,
@@ -122,18 +133,25 @@ var script = {
      * @param params.top - Number of pixels along Y axis to
      * scroll the list container.
      */
-    scrollTo({
-      top
-    }) {
+    scrollTo(_ref) {
+      let {
+        top
+      } = _ref;
       this.$refs.infiniteContainer.scrollTo({
         top
       });
     },
 
     topReached: throttle(function topReachedThrottled() {
+      /**
+       * Emitted when item container is scrolled to the top
+       */
       this.$emit('topReached');
     }, throttleDuration),
     bottomReached: throttle(function bottomReachedThrottled() {
+      /**
+       * Emitted when item container is scrolled to the bottom
+       */
       this.$emit('bottomReached');
     }, throttleDuration),
 

package/dist/components/base/pagination/pagination.js

@@ -298,7 +298,8 @@ var script = {
       return this.disabled || page < 1 || this.isCompactPagination && page > this.value && !this.nextPage || !this.isCompactPagination && page > this.totalPages;
     },
 
-    getPageItem(page, label = null) {
+    getPageItem(page) {
+      let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       const commonAttrs = {
         'aria-label': label || this.labelPage(page),
         href: '#',

package/dist/components/base/path/path.js

@@ -112,11 +112,12 @@ var script = {
       this.$emit('selected', this.items[this.selectedIndex]);
     },
 
-    handleResize({
-      contentRect: {
-        width
-      }
-    }) {
+    handleResize(_ref) {
+      let {
+        contentRect: {
+          width
+        }
+      } = _ref;
       this.width = width;
     },
 

package/dist/components/base/popover/popover.js

@@ -1,11 +1,13 @@
 import { BPopover } from 'bootstrap-vue/esm/index.js';
 import tooltipMixin from '../../mixins/tooltip_mixin';
+import CloseButton from '../../shared_components/close_button/close_button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const popoverRefName = 'bPopover';
 var script = {
   components: {
-    BPopover
+    BPopover,
+    CloseButton
   },
   mixins: [tooltipMixin(popoverRefName)],
   inheritAttrs: false,
@@ -19,11 +21,32 @@ var script = {
       type: String,
       required: false,
       default: 'hover focus'
+    },
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
     customClass() {
       return ['gl-popover', ...this.cssClasses].join(' ');
+    },
+
+    shouldShowTitle() {
+      return this.$scopedSlots.title || this.title || this.showCloseButton;
+    }
+
+  },
+  methods: {
+    close(e) {
+      this.$refs[popoverRefName].doClose();
+      this.$emit('close-button-clicked', e);
     }
 
   },
@@ -34,7 +57,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers},scopedSlots:_vm._u([(_vm.$scopedSlots.title)?{key:"title",fn:function(){return [_vm._t("title")]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",[_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-float-right gl-mt-n2 gl-mr-n3",attrs:{"data-testid":"close-button"},on:{"click":_vm.close}}):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/segmented_control/segmented_control.js

@@ -47,7 +47,9 @@ var script = {
   },
 
   methods: {
-    checkValue(newValue, oldValue = null) {
+    checkValue(newValue) {
+      let oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
       if (!this.isValidValue(newValue)) {
         // eslint-disable-next-line no-console
         console.warn(genericErrorMessage);
@@ -66,9 +68,12 @@ var script = {
     },
 
     isValidValue(val) {
-      return this.enabledOptions.some(({
-        value
-      }) => value === val);
+      return this.enabledOptions.some(_ref => {
+        let {
+          value
+        } = _ref;
+        return value === val;
+      });
     }
 
   }

package/dist/components/base/skeleton_loader/skeleton_loader.js

@@ -79,10 +79,12 @@ var script = {
     }
   },
 
-  render(createElement, {
-    props,
-    slots
-  }) {
+  render(createElement, _ref) {
+    let {
+      props,
+      slots
+    } = _ref;
+
     const slotIsSet = () => slots().default;
 
     const propValueOrDefault = (name, defaultValue) => props[name] !== null ? props[name] : defaultValue;

package/dist/components/base/sorting/sorting_item.js

@@ -41,11 +41,12 @@ var script = {
    * The content of the item.
    * @slot default
    */
-  render(createElement, {
-    children,
-    data,
-    props = {}
-  }) {
+  render(createElement, _ref) {
+    let {
+      children,
+      data,
+      props = {}
+    } = _ref;
     const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${props.active ? '' : 'inactive gl-visibility-hidden'}`;
     const icon = createElement(GlIcon, {
       class: classNames,

package/dist/components/base/table/table.js

@@ -3,10 +3,11 @@ import { isDev, logWarning } from '../../../utils/utils';
 import { tableFullProps, tableFullSlots, glTableLiteWarning } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const shouldUseFullTable = ({
-  $attrs,
-  $scopedSlots
-}) => {
+const shouldUseFullTable = _ref => {
+  let {
+    $attrs,
+    $scopedSlots
+  } = _ref;
   return tableFullProps.some(prop => $attrs[prop] !== undefined) || tableFullSlots.some(slot => $scopedSlots[slot] !== undefined);
 };
 

package/dist/components/base/tabs/tabs/scrollable_tabs.js

@@ -81,11 +81,12 @@ var script = {
   },
 
   methods: {
-    handleResize({
-      contentRect: {
-        width
-      }
-    }) {
+    handleResize(_ref) {
+      let {
+        contentRect: {
+          width
+        }
+      } = _ref;
       this.width = width;
       this.navScrollWidth = this.getScrollWidth();
     },

package/dist/components/base/toast/toast.js

@@ -31,7 +31,8 @@ function renderTitle(h, toast, options) {
   return nodes;
 }
 
-function showToast(message, options = {}) {
+function showToast(message) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const id = `gl-toast-${toastsCount}`;
   toastsCount += 1;
 

package/dist/components/base/token_selector/token_container.js

@@ -126,7 +126,8 @@ var script = {
       this.focusedTokenIndex -= 1;
     },
 
-    focusOnToken(tokenIndex = null) {
+    focusOnToken() {
+      let tokenIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       this.focusedTokenIndex = tokenIndex;
     }
 

package/dist/components/base/token_selector/token_selector.js

@@ -299,7 +299,8 @@ var script = {
       this.focusTextInput();
     },
 
-    addToken(dropdownItem = null) {
+    addToken() {
+      let dropdownItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       const token = dropdownItem !== null ? dropdownItem : {
         id: _uniqueId('user-defined-token'),
         name: this.inputText

package/dist/components/charts/bar/bar.js

@@ -200,7 +200,8 @@ var script = {
      * @param {String} xAxisTitle x-axis title
      * @returns {Object} tooltip title and content
      */
-    getDefaultTooltipContent(params, xAxisTitle = null) {
+    getDefaultTooltipContent(params) {
+      let xAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       const seriesDataLength = params.seriesData.length;
       const {
         yLabels,