@gitlab/ui 68.0.0 → 68.1.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [68.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v68.0.0...v68.1.0) (2023-11-08)
+
+
+### Bug Fixes
+
+* **GlDisclosureDropdown:** nested dropdown click closes a parent one ([896ca20](https://gitlab.com/gitlab-org/gitlab-ui/commit/896ca202424d1f5adcca352101c8cd56d007a4df))
+
+
+### Features
+
+* **css:** Add gl-sm-pr-4 utility ([a763496](https://gitlab.com/gitlab-org/gitlab-ui/commit/a7634968fe7a2771796df73d74dd1a9f8ece0012))
+
 # [68.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.5.2...v68.0.0) (2023-11-07)
 
 

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

@@ -9,8 +9,10 @@ import { OutsideDirective } from '../../../../directives/outside/outside';
 import { DEFAULT_OFFSET, FIXED_WIDTH_CLASS } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
 var script = {
   name: 'BaseDropdown',
+  BASE_DROPDOWN_CLASS,
   components: {
     GlButton,
     GlIcon
@@ -406,7 +408,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('div',{directives:[{name:"outside",rawName:"v-outside",value:(_vm.close),expression:"close"}],staticClass:"gl-new-dropdown",class:{ 'gl-display-block!': _vm.block }},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"outside",rawName:"v-outside",value:(_vm.close),expression:"close"}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { 'gl-display-block!': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -439,3 +441,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
+export { BASE_DROPDOWN_CLASS };

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

@@ -3,13 +3,14 @@ import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, HOME, END, ARROW_UP, ARROW_DOWN, ENTER, SPACE, GL_DROPDOWN_CONTENTS_CLASS } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
-import GlBaseDropdown from '../base_dropdown/base_dropdown';
+import GlBaseDropdown, { BASE_DROPDOWN_CLASS } from '../base_dropdown/base_dropdown';
 import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group';
 import { itemsValidator, hasOnlyListItems, isItem } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+const DROPDOWN_SELECTOR = `.${BASE_DROPDOWN_CLASS}`;
 const ITEM_SELECTOR = `.${ITEM_CLASS}`;
 var script = {
   name: 'GlDisclosureDropdown',
@@ -317,7 +318,7 @@ var script = {
       this.$emit('action', action);
     },
     handleAutoClose(e) {
-      if (this.autoClose && e.target.closest(ITEM_SELECTOR)) {
+      if (this.autoClose && e.target.closest(ITEM_SELECTOR) && e.target.closest(DROPDOWN_SELECTOR) === this.$refs.baseDropdown.$el) {
         this.closeAndFocus();
       }
     },
@@ -366,4 +367,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
-export { ITEM_SELECTOR };
+export { DROPDOWN_SELECTOR, ITEM_SELECTOR };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 Nov 2023 12:38:00 GMT
+ * Generated on Wed, 08 Nov 2023 15:44:57 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 Nov 2023 12:38:00 GMT
+ * Generated on Wed, 08 Nov 2023 15:44:57 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 Nov 2023 12:38:00 GMT
+ * Generated on Wed, 08 Nov 2023 15:44:57 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 07 Nov 2023 12:38:00 GMT
+ * Generated on Wed, 08 Nov 2023 15:44:57 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 07 Nov 2023 12:38:00 GMT
+// Generated on Wed, 08 Nov 2023 15:44:57 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 07 Nov 2023 12:38:00 GMT
+// Generated on Wed, 08 Nov 2023 15:44:57 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;