@gitlab/ui 49.0.0 → 49.0.2

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -68,7 +68,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Right align dropdown menu with respect to the toggle button
      */
@@ -86,7 +85,6 @@ var script = {
         return ['menu', 'listbox', 'tree', 'grid', 'dialog', true, false].includes(value);
       }
     },
-
     /**
      * Id that will be referenced by `aria-labelledby` attribute of the dropdown content`
      */
@@ -94,7 +92,6 @@ var script = {
       type: String,
       required: true
     },
-
     /**
      * The `aria-labelledby` attribute value for the  toggle `button`
      */
@@ -104,26 +101,20 @@ var script = {
       default: null
     }
   },
-
   data() {
     return {
       visible: false
     };
   },
-
   computed: {
     isIconOnly() {
       var _this$toggleText;
-
       return Boolean(this.icon && (!((_this$toggleText = this.toggleText) !== null && _this$toggleText !== void 0 && _this$toggleText.length) || this.textSrOnly));
     },
-
     isIconWithText() {
       var _this$toggleText2;
-
       return Boolean(this.icon && ((_this$toggleText2 = this.toggleText) === null || _this$toggleText2 === void 0 ? void 0 : _this$toggleText2.length) && !this.textSrOnly);
     },
-
     toggleButtonClasses() {
       return [this.toggleClass, {
         'gl-dropdown-toggle': true,
@@ -133,79 +124,68 @@ var script = {
         'dropdown-toggle-no-caret': this.noCaret
       }];
     },
-
     toggleLabelledBy() {
       return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : this.toggleId;
     },
-
     popperConfig() {
       return {
         placement: this.right ? 'bottom-end' : 'bottom-start',
         ...POPPER_CONFIG
       };
     }
-
-  },
-
-  updated() {
-    if (this.visible) {
-      var _this$popper;
-
-      (_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.update();
-    }
   },
-
   mounted() {
     this.$nextTick(() => {
       this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
     });
   },
-
   beforeDestroy() {
     this.popper.destroy();
   },
-
   methods: {
-    toggle() {
+    async toggle() {
       this.visible = !this.visible;
-
       if (this.visible) {
-        this.popper.update();
+        var _this$popper;
+        /* Initially dropdown is hidden with `display="none"`.
+          When `visible` prop is toggled ON, with the `nextTick` we wait for the DOM update -
+          dropdown's `display="block"` is set (adding CSS class `show`).
+          After that we can recalculate its position (calling `popper.update()`).
+          https://github.com/floating-ui/floating-ui/issues/630:
+          "Unfortunately there's not any way to compute the position of an element not rendered in the document".
+          Then we `await` while the new dropdown position is calculated and DOM updated accordingly.
+          After we can  emit the `GL_DROPDOWN_SHOWN` event to the parent which might interact with updated  dropdown,
+          e.g. set focus..
+         */
+        await this.$nextTick();
+        await ((_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.update());
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.$emit(GL_DROPDOWN_HIDDEN);
       }
     },
-
     open() {
       if (this.visible) {
         return;
       }
-
       this.toggle();
     },
-
     close() {
       if (!this.visible) {
         return;
       }
-
       this.toggle();
     },
-
     closeAndFocus() {
       if (!this.visible) {
         return;
       }
-
       this.toggle();
       this.focusToggle();
     },
-
     focusToggle() {
       this.$refs.toggle.$el.focus();
     }
-
   }
 };
 

package/dist/components/base/new_dropdowns/constants.js

@@ -5,11 +5,13 @@ const POPPER_CONFIG = {
       offset: [0, 4]
     }
   }]
-}; // base dropdown events
+};
 
+// base dropdown events
 const GL_DROPDOWN_SHOWN = 'shown';
-const GL_DROPDOWN_HIDDEN = 'hidden'; // KEY Codes
+const GL_DROPDOWN_HIDDEN = 'hidden';
 
+// KEY Codes
 const HOME = 'Home';
 const END = 'End';
 const ARROW_UP = 'ArrowUp';

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -42,7 +42,6 @@ var script = {
       default: () => [],
       validator: itemsValidator
     },
-
     /**
      * array of selected items values for multi-select and selected item value for single-select
      */
@@ -51,7 +50,6 @@ var script = {
       required: false,
       default: () => []
     },
-
     /**
      * Allow multi-selection
      */
@@ -60,7 +58,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Toggle button text
      */
@@ -69,7 +66,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Toggle text to be read by screen readers only
      */
@@ -78,14 +74,12 @@ var script = {
       required: false,
       default: false
     },
-
     /** The header text */
     headerText: {
       type: String,
       required: false,
       default: ''
     },
-
     /**
      * Styling option - dropdown's toggle category
      */
@@ -95,7 +89,6 @@ var script = {
       default: buttonCategoryOptions.primary,
       validator: value => Object.keys(buttonCategoryOptions).includes(value)
     },
-
     /**
      * Styling option - dropdown's toggle variant
      */
@@ -105,7 +98,6 @@ var script = {
       default: dropdownVariantOptions.default,
       validator: value => Object.keys(dropdownVariantOptions).includes(value)
     },
-
     /**
      * The size of the dropdown toggle
      */
@@ -115,7 +107,6 @@ var script = {
       default: buttonSizeOptions.medium,
       validator: value => Object.keys(buttonSizeOptions).includes(value)
     },
-
     /**
      * Icon name that will be rendered in the toggle button
      */
@@ -124,7 +115,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Set to "true" to disable the dropdown
      */
@@ -133,7 +123,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Set to "true" when dropdown content (items) is loading
      * It will render a small loader in the dropdown toggle and make it disabled
@@ -143,7 +132,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Additional CSS classes to customize toggle appearance
      */
@@ -152,7 +140,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Set to "true" to hide the caret
      */
@@ -161,7 +148,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Right align listbox menu with respect to the toggle button
      */
@@ -170,7 +156,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Center selected item checkmark
      */
@@ -179,7 +164,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * The `aria-labelledby` attribute value for the toggle button
      * Provide the string of ids seperated by space
@@ -189,7 +173,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * The `aria-labelledby` attribute value for the list of options
      * Provide the string of ids seperated by space
@@ -199,7 +182,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Enable search
      */
@@ -208,7 +190,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Set to "true" when items search is in progress.
      * It will display loading icon below the search input
@@ -218,7 +199,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Message to be displayed when filtering produced no results
      */
@@ -228,7 +208,6 @@ var script = {
       default: 'No results found'
     }
   },
-
   data() {
     return {
       selectedValues: [],
@@ -238,22 +217,18 @@ var script = {
       searchStr: ''
     };
   },
-
   computed: {
     listboxTag() {
       if (this.items.length === 0 || isOption(this.items[0])) return 'ul';
       return 'div';
     },
-
     flattenedOptions() {
       return flattenedOptions(this.items);
     },
-
     listboxToggleText() {
       if (!this.toggleText) {
         if (!this.multiple && this.selectedValues.length) {
           var _this$flattenedOption;
-
           return (_this$flattenedOption = this.flattenedOptions.find(_ref => {
             let {
               value
@@ -261,13 +236,10 @@ var script = {
             return value === this.selectedValues[0];
           })) === null || _this$flattenedOption === void 0 ? void 0 : _this$flattenedOption.text;
         }
-
         return '';
       }
-
       return this.toggleText;
     },
-
     selectedIndices() {
       return this.selectedValues.map(selected => this.flattenedOptions.findIndex(_ref2 => {
         let {
@@ -276,75 +248,58 @@ var script = {
         return value === selected;
       })).sort();
     },
-
     showList() {
       return this.flattenedOptions.length && !this.searching;
     },
-
     showNoResultsText() {
       return !this.flattenedOptions.length && !this.searching;
     },
-
     announceSRSearchResults() {
       return this.searchable && !this.showNoResultsText && this.$scopedSlots['search-summary-sr-only'];
     },
-
     headerId() {
       return this.headerText && _uniqueId('listbox-header-');
     }
-
   },
   watch: {
     selected: {
       immediate: true,
-
       handler(newSelected) {
         if (Array.isArray(newSelected)) {
           if (!this.multiple && newSelected.length) {
             throw new Error('To allow multi-selection, please, set "multiple" property to "true"');
           }
-
           this.selectedValues = [...newSelected];
         } else {
           this.selectedValues = [newSelected];
         }
       }
-
     }
   },
   methods: {
     open() {
       this.$refs.baseDropdown.open();
     },
-
     close() {
       this.$refs.baseDropdown.close();
     },
-
     groupClasses(index) {
       return index === 0 ? null : GROUP_TOP_BORDER_CLASSES;
     },
-
     onShow() {
-      this.$nextTick(() => {
-        if (this.searchable) {
-          this.focusSearchInput();
-        } else {
-          var _this$selectedIndices;
-
-          this.focusItem((_this$selectedIndices = this.selectedIndices[0]) !== null && _this$selectedIndices !== void 0 ? _this$selectedIndices : 0, this.getFocusableListItemElements());
-        }
-        /**
-         * Emitted when dropdown is shown
-         *
-         * @event shown
-         */
-
-
-        this.$emit(GL_DROPDOWN_SHOWN);
-      });
+      if (this.searchable) {
+        this.focusSearchInput();
+      } else {
+        var _this$selectedIndices;
+        this.focusItem((_this$selectedIndices = this.selectedIndices[0]) !== null && _this$selectedIndices !== void 0 ? _this$selectedIndices : 0, this.getFocusableListItemElements());
+      }
+      /**
+       * Emitted when dropdown is shown
+       *
+       * @event shown
+       */
+      this.$emit(GL_DROPDOWN_SHOWN);
     },
-
     onHide() {
       /**
        * Emitted when dropdown is hidden
@@ -354,7 +309,6 @@ var script = {
       this.$emit(GL_DROPDOWN_HIDDEN);
       this.nextFocusedItemIndex = null;
     },
-
     onKeydown(event) {
       const {
         code,
@@ -364,7 +318,6 @@ var script = {
       if (elements.length < 1) return;
       let stop = true;
       const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
-
       if (code === HOME) {
         this.focusItem(0, elements);
       } else if (code === END) {
@@ -373,7 +326,6 @@ var script = {
         if (isSearchInput) {
           return;
         }
-
         if (this.searchable && elements.indexOf(target) === 0) {
           this.focusSearchInput();
         } else {
@@ -388,43 +340,31 @@ var script = {
       } else {
         stop = false;
       }
-
       if (stop) {
         stopEvent(event);
       }
     },
-
     getFocusableListItemElements() {
       var _this$$refs$list;
-
       const items = (_this$$refs$list = this.$refs.list) === null || _this$$refs$list === void 0 ? void 0 : _this$$refs$list.querySelectorAll(ITEM_SELECTOR);
       return Array.from(items || []);
     },
-
     focusNextItem(event, elements, offset) {
       const {
         target
       } = event;
       const currentIndex = elements.indexOf(target);
-
       const nextIndex = _clamp(currentIndex + offset, 0, elements.length - 1);
-
       this.focusItem(nextIndex, elements);
     },
-
     focusItem(index, elements) {
+      var _elements$index;
       this.nextFocusedItemIndex = index;
-      this.$nextTick(() => {
-        var _elements$index;
-
-        (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
-      });
+      (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
     },
-
     focusSearchInput() {
       this.$refs.searchBox.focusInput();
     },
-
     onSelect(item, isSelected) {
       if (this.multiple) {
         this.onMultiSelect(item.value, isSelected);
@@ -432,15 +372,12 @@ var script = {
         this.onSingleSelect(item.value, isSelected);
       }
     },
-
     isSelected(item) {
       return this.selectedValues.some(value => value === item.value);
     },
-
     isFocused(item) {
       return this.nextFocusedItemIndex === this.flattenedOptions.indexOf(item);
     },
-
     onSingleSelect(value, isSelected) {
       if (isSelected) {
         /**
@@ -450,10 +387,8 @@ var script = {
          */
         this.$emit('select', value);
       }
-
       this.$refs.baseDropdown.closeAndFocus();
     },
-
     onMultiSelect(value, isSelected) {
       if (isSelected) {
         this.$emit('select', [...this.selectedValues, value]);
@@ -461,7 +396,6 @@ var script = {
         this.$emit('select', this.selectedValues.filter(selectedValue => selectedValue !== value));
       }
     },
-
     search(searchTerm) {
       /**
        * Emitted when the search query string is changed
@@ -471,7 +405,6 @@ var script = {
        */
       this.$emit('search', searchTerm);
     },
-
     isOption
   }
 };

package/dist/components/base/new_dropdowns/listbox/listbox_group.js

@@ -8,11 +8,9 @@ var script = {
       required: true
     }
   },
-
   created() {
     this.nameId = _uniqueId('gl-listbox-group-');
   }
-
 };
 
 /* script */

package/dist/components/base/new_dropdowns/listbox/listbox_item.js

@@ -29,27 +29,22 @@ var script = {
       if (this.isCheckCentered) {
         return '';
       }
-
       return 'gl-mt-3 gl-align-self-start';
     }
-
   },
   methods: {
     toggleSelection() {
       this.$emit('select', !this.isSelected);
     },
-
     onKeydown(event) {
       const {
         code
       } = event;
-
       if (code === ENTER || code === SPACE) {
         stopEvent(event);
         this.toggleSelection();
       }
     }
-
   }
 };
 

package/dist/components/base/new_dropdowns/listbox/utils.js

@@ -1,34 +1,27 @@
 import _isString from 'lodash/isString';
 
 const isOption = item => Boolean(item) && _isString(item.value);
-
 const isGroup = function () {
   let {
     options
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return Array.isArray(options) && options.every(isOption);
 };
-
 const hasNoDuplicates = array => array.length === new Set(array).size;
-
 const flattenedOptions = items => items.flatMap(item => isOption(item) ? item : item.options);
-
 const isAllOptionsOrAllGroups = items => items.every(isOption) || items.every(isGroup);
-
 const hasUniqueValues = items => hasNoDuplicates(flattenedOptions(items).map(_ref => {
   let {
     value
   } = _ref;
   return value;
 }));
-
 const hasUniqueGroups = items => hasNoDuplicates(items.filter(isGroup).map(_ref2 => {
   let {
     text
   } = _ref2;
   return text;
 }));
-
 const itemsValidator = items => isAllOptionsOrAllGroups(items) && hasUniqueValues(items) && hasUniqueGroups(items);
 
 export { flattenedOptions, isOption, itemsValidator };