@gitlab/ui 62.9.3 → 62.11.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [62.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v62.10.0...v62.11.0) (2023-05-12)
+
+
+### Features
+
+* **GlDisclosureDropdown:** Close the disclosure dropdown on item click ([f4c2208](https://gitlab.com/gitlab-org/gitlab-ui/commit/f4c2208af8f11b5aa96faa6bdb88898f67b4edcc))
+
+# [62.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v62.9.3...v62.10.0) (2023-05-11)
+
+
+### Features
+
+* **GlChartLegend:** Prevent toggling off all legends ([b036385](https://gitlab.com/gitlab-org/gitlab-ui/commit/b036385448b95003368a22e1533304d6b8097050))
+* add hover state to gl-cursor-notallowed mixin ([4a122c2](https://gitlab.com/gitlab-org/gitlab-ui/commit/4a122c2be93d4e5da505d3390ccea116353524f1))
+
 ## [62.9.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v62.9.2...v62.9.3) (2023-05-11)
 
 

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -1,7 +1,7 @@
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
-import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_FOCUS_CONTENT, HOME, END, ARROW_UP, ARROW_DOWN } from '../constants';
+import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_FOCUS_CONTENT, HOME, END, ARROW_UP, ARROW_DOWN, ENTER, SPACE } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import GlBaseDropdown from '../base_dropdown/base_dropdown';
 import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item';
@@ -10,6 +10,7 @@ import { itemsValidator, hasOnlyListItems, isItem } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+const ITEM_SELECTOR = `.${ITEM_CLASS}`;
 var script = {
   name: 'GlDisclosureDropdown',
   events: {
@@ -169,6 +170,14 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Close the dropdown on item click (action)
+     */
+    autoClose: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   data() {
@@ -228,6 +237,8 @@ var script = {
         this.focusNextItem(event, elements, -1);
       } else if (code === ARROW_DOWN) {
         this.focusNextItem(event, elements, 1);
+      } else if (code === ENTER || code === SPACE) {
+        this.handleAutoClose(event);
       } else {
         stop = false;
       }
@@ -237,7 +248,7 @@ var script = {
     },
     getFocusableListItemElements() {
       var _this$$refs$content;
-      const items = (_this$$refs$content = this.$refs.content) === null || _this$$refs$content === void 0 ? void 0 : _this$$refs$content.querySelectorAll(`.${ITEM_CLASS}`);
+      const items = (_this$$refs$content = this.$refs.content) === null || _this$$refs$content === void 0 ? void 0 : _this$$refs$content.querySelectorAll(ITEM_SELECTOR);
       return filterVisible(Array.from(items || []));
     },
     focusNextItem(event, elements, offset) {
@@ -264,6 +275,11 @@ var script = {
        */
       this.$emit('action', action);
     },
+    handleAutoClose(e) {
+      if (this.autoClose && e.target.closest(ITEM_SELECTOR)) {
+        this.closeAndFocus();
+      }
+    },
     uniqueItemId() {
       return uniqueId(`disclosure-item-`);
     },
@@ -275,7 +291,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",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"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,"placement":_vm.placement,"popper-options":_vm.popperOptions,"fluid-width":_vm.fluidWidth},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",staticClass:"gl-new-dropdown-contents",attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},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.$scopedSlots['list-item'])?_vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})}):_vm._e()],2)]]})]})],2),_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",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"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,"placement":_vm.placement,"popper-options":_vm.popperOptions,"fluid-width":_vm.fluidWidth},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",staticClass:"gl-new-dropdown-contents",attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},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.$scopedSlots['list-item'])?_vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})}):_vm._e()],2)]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -308,3 +324,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
+export { ITEM_SELECTOR };

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js

@@ -79,11 +79,11 @@ var script = {
         code
       } = event;
       if (code === ENTER || code === SPACE) {
-        stopEvent(event);
         if (this.isCustomContent) {
           this.action();
         } else {
           var _this$$refs$item;
+          stopEvent(event);
           /** Instead of simply navigating or calling the action, we want
            * the `a/button` to be the target of the event as it might have additional attributes.
            * E.g. `a` might have `target` attribute.

package/dist/components/charts/legend/legend.js

@@ -75,7 +75,8 @@ var script = {
   },
   data() {
     return {
-      disabledSeries: {}
+      disabledSeries: {},
+      lastActiveSeriesLabel: null
     };
   },
   computed: {
@@ -84,8 +85,17 @@ var script = {
         fontFamily: this.textStyle.fontFamily || 'sans-serif',
         fontSize: `${this.textStyle.fontSize || defaultFontSize}px`
       };
+    },
+    hasOneSeriesElement() {
+      return this.seriesInfo.length === 1;
     }
   },
+  created() {
+    this.chart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
+  },
+  beforeDestroy() {
+    this.chart.off('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
+  },
   methods: {
     sanitizeSeriesData(seriesData) {
       var _seriesData$filter;
@@ -110,7 +120,12 @@ var script = {
     seriesNameIsLong(seriesName) {
       return seriesName.length > 120;
     },
-    handleClick(name, key) {
+    handleClick(_ref, key) {
+      let {
+        name,
+        disabled
+      } = _ref;
+      if (this.hasOneSeriesElement || this.isToggleDisabled(name, disabled)) return;
       this.chart.dispatchAction({
         type: 'legendToggleSelect',
         name
@@ -134,6 +149,30 @@ var script = {
     },
     getColor(color, key) {
       return this.disabledSeries[key] ? gray200 : color;
+    },
+    suppressLastActiveSeriesLabelToggle(_ref2) {
+      let {
+        selected
+      } = _ref2;
+      const selectedSeriesLabels = Object.entries(selected).filter(_ref3 => {
+        let [, isSelected] = _ref3;
+        return Boolean(isSelected);
+      });
+      this.lastActiveSeriesLabel = null;
+      if (selectedSeriesLabels.length === 1) {
+        const [lastActiveSeriesLabelName] = selectedSeriesLabels[0];
+        this.lastActiveSeriesLabel = lastActiveSeriesLabelName;
+      }
+    },
+    /**
+     * Disables toggling legend if it is the last active one or if its data series
+     * has a disabled property set to true
+     * @param {String} name Series name
+     * @param {Boolean} isDisabled Value of the series element's disabled property
+     * @returns {boolean}
+     */
+    isToggleDisabled(name, isDisabled) {
+      return name === this.lastActiveSeriesLabel || isDisabled;
     }
   },
   legendLayoutTypes: {
@@ -146,7 +185,16 @@ 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('div',[(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_INLINE)?[_c('div',{staticClass:"gl-legend-inline"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-inline-series",class:{ 'text-muted': _vm.disabledSeries[key], 'w-100': _vm.seriesNameIsLong(series.name) },style:(_vm.fontStyle),attrs:{"role":"button"},on:{"click":function($event){return _vm.handleClick(series.name, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('gl-chart-series-label',{staticClass:"gl-legend-inline-series-label",class:{ 'w-75': _vm.seriesNameIsLong(series.name) },attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1),_vm._v(" "),(series.data && series.data.length)?_c('span',{class:{ 'gl-white-space-nowrap': _vm.seriesNameIsLong(series.name) }},[_vm._v("\n          "+_vm._s(_vm.averageText)+": "+_vm._s(_vm.seriesAverage(series.data))+" · "+_vm._s(_vm.maxText)+":\n          "+_vm._s(_vm.seriesMax(series.data))+"\n        ")]):_vm._e()],1)}),0)]:_vm._e(),_vm._v(" "),(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_TABLE)?[_c('div',{staticClass:"gl-legend-tabular",style:(_vm.fontStyle)},[_c('header',{staticClass:"gl-legend-tabular-header"},[_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.minText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.maxText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.averageText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.currentText))])]),_vm._v(" "),_c('section',{staticClass:"gl-legend-tabular-body"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-tabular-row",class:{ 'text-muted': _vm.disabledSeries[key] },style:(_vm.fontStyle),attrs:{"role":"button"},on:{"click":function($event){return _vm.handleClick(series.name, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('div',{staticClass:"gl-legend-tabular-title-cell"},[_c('gl-chart-series-label',{style:(_vm.fontStyle),attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1)],1),_vm._v(" "),(_vm.sanitizeSeriesData(series.data).length)?[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMin(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMax(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesAverage(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesLast(series.data)))])]:[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")])]],2)}),0)])]:_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-testid":"gl-chart-legend"}},[(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_INLINE)?[_c('div',{staticClass:"gl-legend-inline"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-inline-series",class:{
+          'text-muted': _vm.disabledSeries[key],
+          'w-100': _vm.seriesNameIsLong(series.name),
+          'gl-hover-cursor-not-allowed!':
+            _vm.hasOneSeriesElement || _vm.isToggleDisabled(series.name, series.disabled),
+        },style:(_vm.fontStyle),attrs:{"aria-disabled":_vm.hasOneSeriesElement || _vm.isToggleDisabled(series.name, series.disabled),"role":"button"},on:{"click":function($event){return _vm.handleClick(series, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('gl-chart-series-label',{staticClass:"gl-legend-inline-series-label",class:{ 'w-75': _vm.seriesNameIsLong(series.name) },attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1),_vm._v(" "),(series.data && series.data.length)?_c('span',{class:{ 'gl-white-space-nowrap': _vm.seriesNameIsLong(series.name) }},[_vm._v("\n          "+_vm._s(_vm.averageText)+": "+_vm._s(_vm.seriesAverage(series.data))+" · "+_vm._s(_vm.maxText)+":\n          "+_vm._s(_vm.seriesMax(series.data))+"\n        ")]):_vm._e()],1)}),0)]:_vm._e(),_vm._v(" "),(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_TABLE)?[_c('div',{staticClass:"gl-legend-tabular",style:(_vm.fontStyle)},[_c('header',{staticClass:"gl-legend-tabular-header"},[_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.minText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.maxText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.averageText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.currentText))])]),_vm._v(" "),_c('section',{staticClass:"gl-legend-tabular-body"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-tabular-row",class:{
+            'text-muted': _vm.disabledSeries[key],
+            'gl-hover-cursor-not-allowed!':
+              _vm.hasOneSeriesElement || _vm.isToggleDisabled(series.name, series.disabled),
+          },style:(_vm.fontStyle),attrs:{"aria-disabled":_vm.isToggleDisabled(series.name, series.disabled),"role":"button"},on:{"click":function($event){return _vm.handleClick(series, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('div',{staticClass:"gl-legend-tabular-title-cell"},[_c('gl-chart-series-label',{style:(_vm.fontStyle),attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1)],1),_vm._v(" "),(_vm.sanitizeSeriesData(series.data).length)?[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMin(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMax(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesAverage(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesLast(series.data)))])]:[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")])]],2)}),0)])]:_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */