@gitlab/ui 43.11.0 → 43.14.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [43.14.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.13.0...v43.14.0) (2022-09-08)
+
+
+### Features
+
+* **GlListbox:** Add support for grouping ([c6ec8f1](https://gitlab.com/gitlab-org/gitlab-ui/commit/c6ec8f1a53eb4fad9a3ec077a762b23e67ef0245))
+
+# [43.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.12.0...v43.13.0) (2022-09-06)
+
+
+### Features
+
+* **css:** Adds align items center from sm up ([2f59188](https://gitlab.com/gitlab-org/gitlab-ui/commit/2f5918849f390ad4ee8a6a0a1040923fe4a82e00))
+
+# [43.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.11.0...v43.12.0) (2022-09-02)
+
+
+### Features
+
+* **css:** Add xl container util ([95755b9](https://gitlab.com/gitlab-org/gitlab-ui/commit/95755b9f3ff23dfd184a6c2c74ab23ea7d9865f6))
+
 # [43.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.10.0...v43.11.0) (2022-09-01)
 
 

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

@@ -5,9 +5,12 @@ import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, HOME, END, ARROW_UP, ARROW_DOWN
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions } from '../../../../utils/constants';
 import GlBaseDropdown from '../base_dropdown/base_dropdown';
 import GlListboxItem from './listbox_item';
+import GlListboxGroup from './listbox_group';
+import { itemsValidator, isOption, flattenedOptions } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const ITEM_SELECTOR = '[role="option"]';
+const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-3', 'gl-mt-3'];
 var script = {
   events: {
     GL_DROPDOWN_SHOWN,
@@ -15,7 +18,8 @@ var script = {
   },
   components: {
     GlBaseDropdown,
-    GlListboxItem
+    GlListboxItem,
+    GlListboxGroup
   },
   model: {
     prop: 'selected',
@@ -29,14 +33,7 @@ var script = {
       type: Array,
       required: false,
       default: () => [],
-      validator: items => {
-        return items.every(_ref => {
-          let {
-            value
-          } = _ref;
-          return typeof value === 'string';
-        });
-      }
+      validator: itemsValidator
     },
 
     /**
@@ -159,6 +156,15 @@ var script = {
       default: false
     },
 
+    /**
+     * Center selected item checkmark
+     */
+    isCheckCentered: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
     /**
      * The `aria-labelledby` attribute value for the toggle button
      */
@@ -178,17 +184,26 @@ var script = {
   },
 
   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$items$find;
+          var _this$flattenedOption;
 
-          return (_this$items$find = this.items.find(_ref2 => {
+          return (_this$flattenedOption = this.flattenedOptions.find(_ref => {
             let {
               value
-            } = _ref2;
+            } = _ref;
             return value === this.selectedValues[0];
-          })) === null || _this$items$find === void 0 ? void 0 : _this$items$find.text;
+          })) === null || _this$flattenedOption === void 0 ? void 0 : _this$flattenedOption.text;
         }
 
         return '';
@@ -198,10 +213,10 @@ var script = {
     },
 
     selectedIndices() {
-      return this.selectedValues.map(selected => this.items.findIndex(_ref3 => {
+      return this.selectedValues.map(selected => this.flattenedOptions.findIndex(_ref2 => {
         let {
           value
-        } = _ref3;
+        } = _ref2;
         return value === selected;
       })).sort();
     }
@@ -226,6 +241,10 @@ var script = {
     }
   },
   methods: {
+    groupClasses(index) {
+      return index === 0 ? null : GROUP_TOP_BORDER_CLASSES;
+    },
+
     onShow() {
       this.$nextTick(() => {
         var _this$selectedIndices;
@@ -301,10 +320,10 @@ var script = {
       });
     },
 
-    onSelect(_ref4, isSelected) {
+    onSelect(_ref3, isSelected) {
       let {
         value
-      } = _ref4;
+      } = _ref3;
 
       if (this.multiple) {
         this.onMultiSelect(value, isSelected);
@@ -317,6 +336,10 @@ var script = {
       return this.selectedValues.some(value => value === item.value);
     },
 
+    isFocused(item) {
+      return this.nextFocusedItemIndex === this.flattenedOptions.indexOf(item);
+    },
+
     onSingleSelect(value, isSelected) {
       if (isSelected) {
         /**
@@ -336,8 +359,9 @@ var script = {
       } else {
         this.$emit('select', this.selectedValues.filter(selectedValue => selectedValue !== value));
       }
-    }
+    },
 
+    isOption
   }
 };
 
@@ -345,7 +369,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('gl-base-dropdown',{ref:"baseDropdown",attrs:{"aria-haspopup":"listbox","aria-labelledby":_vm.ariaLabelledby,"toggle-id":_vm.toggleId,"toggle-text":_vm.listboxToggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"right":_vm.right},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide])},[_vm._t("header"),_vm._v(" "),_c('ul',{ref:"list",staticClass:"gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"aria-labelledby":_vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},_vm._l((_vm.items),function(item,index){return _c('gl-listbox-item',{key:item.value,attrs:{"is-selected":_vm.isSelected(item),"is-focused":_vm.nextFocusedItemIndex === index},on:{"select":function($event){return _vm.onSelect(item, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n        "+_vm._s(item.text)+"\n      ")]},{"item":item})],2)}),1),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",attrs:{"aria-haspopup":"listbox","aria-labelledby":_vm.ariaLabelledby,"toggle-id":_vm.toggleId,"toggle-text":_vm.listboxToggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"right":_vm.right},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide])},[_vm._t("header"),_vm._v(" "),_c(_vm.listboxTag,{ref:"list",tag:"component",staticClass:"gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",attrs:{"aria-labelledby":_vm.toggleId,"role":"listbox","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._l((_vm.items),function(item,index){return [(_vm.isOption(item))?[_c('gl-listbox-item',{key:item.value,attrs:{"is-selected":_vm.isSelected(item),"is-focused":_vm.isFocused(item),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(item, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n            "+_vm._s(item.text)+"\n          ")]},{"item":item})],2)]:[_c('gl-listbox-group',{key:item.text,class:_vm.groupClasses(index),attrs:{"name":item.text},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._l((item.options),function(option){return _c('gl-listbox-item',{key:option.value,attrs:{"is-selected":_vm.isSelected(option),"is-focused":_vm.isFocused(option),"is-check-centered":_vm.isCheckCentered},on:{"select":function($event){return _vm.onSelect(option, $event)}}},[_vm._t("list-item",function(){return [_vm._v("\n              "+_vm._s(option.text)+"\n            ")]},{"item":option})],2)})],2)]]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -0,0 +1,54 @@
+import _uniqueId from 'lodash/uniqueId';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+
+  created() {
+    this.nameId = _uniqueId('gl-listbox-group-');
+  }
+
+};
+
+/* 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('ul',{staticClass:"gl-mb-0 gl-pl-0 gl-list-style-none",attrs:{"role":"group","aria-labelledby":_vm.nameId}},[_c('li',{staticClass:"gl-pl-5! gl-py-2! gl-font-base gl-font-weight-bold",attrs:{"id":_vm.nameId,"role":"presentation"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.name))]})],2),_vm._v(" "),_vm._t("default")],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -17,8 +17,23 @@ var script = {
       type: Boolean,
       default: false,
       required: false
+    },
+    isCheckCentered: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
+  computed: {
+    checkedClasses() {
+      if (this.isCheckCentered) {
+        return '';
+      }
+
+      return 'gl-mt-3 gl-align-self-start';
+    }
+
+  },
   methods: {
     toggleSelection() {
       this.$emit('select', !this.isSelected);
@@ -42,7 +57,10 @@ 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('li',{staticClass:"gl-new-dropdown-item",attrs:{"role":"option","tabindex":_vm.isFocused ? 0 : -1,"aria-selected":_vm.isSelected},on:{"click":_vm.toggleSelection,"keydown":_vm.onKeydown}},[_c('span',{staticClass:"dropdown-item"},[_c('gl-icon',{staticClass:"gl-mt-3 gl-align-self-start",class:['gl-new-dropdown-item-check-icon', { 'gl-visibility-hidden': !_vm.isSelected }],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("default")],2)],1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{staticClass:"gl-new-dropdown-item",attrs:{"role":"option","tabindex":_vm.isFocused ? 0 : -1,"aria-selected":_vm.isSelected},on:{"click":_vm.toggleSelection,"keydown":_vm.onKeydown}},[_c('span',{staticClass:"dropdown-item"},[_c('gl-icon',{class:[
+        'gl-new-dropdown-item-check-icon',
+        { 'gl-visibility-hidden': !_vm.isSelected },
+        _vm.checkedClasses ],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("default")],2)],1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -0,0 +1,61 @@
+const mockOptions = [{
+  value: 'prod',
+  text: 'Product'
+}, {
+  value: 'ppl',
+  text: 'People'
+}, {
+  value: 'fin',
+  text: 'Finance'
+}, {
+  value: 'leg',
+  text: 'Legal'
+}, {
+  value: 'eng',
+  text: 'Engineering'
+}, {
+  value: 'sales',
+  text: 'Sales'
+}, {
+  value: 'marketing',
+  text: 'Marketing'
+}, {
+  value: 'acc',
+  text: 'Accounting'
+}, {
+  value: 'hr',
+  text: 'Human Resource Management'
+}, {
+  value: 'rnd',
+  text: 'Research and Development'
+}, {
+  value: 'cust',
+  text: 'Customer Service'
+}, {
+  value: 'sup',
+  text: 'Support'
+}];
+const mockGroups = [{
+  text: 'Branches',
+  options: [{
+    text: 'main',
+    value: 'main'
+  }, {
+    text: 'feature-123',
+    value: 'feature-123'
+  }]
+}, {
+  text: 'Tags',
+  options: [{
+    text: 'v1.0',
+    value: 'v1.0'
+  }, {
+    text: 'v2.0',
+    value: 'v2.0'
+  }, {
+    text: 'v2.1',
+    value: 'v2.1'
+  }]
+}];
+
+export { mockGroups, mockOptions };

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

@@ -0,0 +1,34 @@
+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 };