@gitlab/ui 137.2.6 → 137.3.0

package/dist/components/base/alert/alert.js

@@ -12,7 +12,6 @@ var script = {
     CloseButton,
     GlButton
   },
-  expose: ['focus'],
   props: {
     /**
      * The title text to display in the alert header.
@@ -117,6 +116,7 @@ var script = {
       }
     }
   },
+  expose: ['focus'],
   data() {
     return {
       hasProgrammaticFocus: false

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

@@ -428,10 +428,10 @@ var script = {
       });
     },
     handleBlur(e) {
-      var _e$relatedTarget;
+      var _e$relatedTarget, _e$relatedTarget$clas;
       // Keep focus on input when blur event is on same element
       // (e.g. scrollbar in filtered search suggestions list)
-      if ((_e$relatedTarget = e.relatedTarget) !== null && _e$relatedTarget !== void 0 && _e$relatedTarget.classList.contains(FILTERED_SEARCH_SUGGESTIONS_CLASS)) {
+      if ((_e$relatedTarget = e.relatedTarget) !== null && _e$relatedTarget !== void 0 && (_e$relatedTarget$clas = _e$relatedTarget.classList) !== null && _e$relatedTarget$clas !== void 0 && _e$relatedTarget$clas.contains(FILTERED_SEARCH_SUGGESTIONS_CLASS)) {
         var _this$$refs$input;
         (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.focus();
         return;

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

@@ -84,9 +84,6 @@ const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
 const DROPDOWN_CONTAINER_CLASS = 'gl-new-dropdown-container';
 var script = {
   name: 'BaseDropdown',
-  expose: ['open', 'close', 'closeAndFocus', 'containsElement'],
-  BASE_DROPDOWN_CLASS,
-  DROPDOWN_CONTAINER_CLASS,
   components: {
     DropdownContainer,
     GlButton,
@@ -331,6 +328,9 @@ var script = {
       validator: strategy => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy)
     }
   },
+  expose: ['open', 'close', 'closeAndFocus', 'containsElement'],
+  BASE_DROPDOWN_CLASS,
+  DROPDOWN_CONTAINER_CLASS,
   data() {
     return {
       openedYet: false,

package/dist/components/dashboards/dashboard_layout/dashboard_layout.js

@@ -60,6 +60,14 @@ var script = {
       required: false,
       default: 1,
       validator: value => value > 0
+    },
+    /**
+     * Additional CSS classes to apply to the `#filters` slot container.
+     */
+    filtersClass: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -88,7 +96,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',[(_vm.dashboardHasHeader)?_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center",attrs:{"data-testid":"header-container"}},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[(_vm.dashboardHasTitle)?_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n              "+_vm._s(_vm.config.description)+"\n            ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid,"cell-height":_vm.cellHeight,"min-cell-height":_vm.minCellHeight},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.dashboardHasHeader)?_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center",attrs:{"data-testid":"header-container"}},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[(_vm.dashboardHasTitle)?_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n              "+_vm._s(_vm.config.description)+"\n            ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",class:_vm.filtersClass,attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid,"cell-height":_vm.cellHeight,"min-cell-height":_vm.minCellHeight},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
 var panel = ref.panel;
 return [_vm._t("panel",null,null,{ panel: panel })]}}],null,true)}):_vm._t("empty-state")],2)]),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "137.2.6",
+  "version": "137.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -175,7 +175,7 @@
     "start-server-and-test": "^2.1.5",
     "storybook": "^7.6.24",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.5.4",
+    "style-dictionary": "^5.5.5",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/alert/alert.vue

@@ -16,7 +16,6 @@ export default {
     CloseButton,
     GlButton,
   },
-  expose: ['focus'],
   props: {
     /**
      * The title text to display in the alert header.
@@ -121,6 +120,7 @@ export default {
       },
     },
   },
+  expose: ['focus'],
   data() {
     return {
       hasProgrammaticFocus: false,

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -445,7 +445,7 @@ export default {
     handleBlur(e) {
       // Keep focus on input when blur event is on same element
       // (e.g. scrollbar in filtered search suggestions list)
-      if (e.relatedTarget?.classList.contains(FILTERED_SEARCH_SUGGESTIONS_CLASS)) {
+      if (e.relatedTarget?.classList?.contains(FILTERED_SEARCH_SUGGESTIONS_CLASS)) {
         this.$refs.input?.focus();
         return;
       }

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -46,9 +46,6 @@ const DROPDOWN_CONTAINER_CLASS = 'gl-new-dropdown-container';
 
 export default {
   name: 'BaseDropdown',
-  expose: ['open', 'close', 'closeAndFocus', 'containsElement'],
-  BASE_DROPDOWN_CLASS,
-  DROPDOWN_CONTAINER_CLASS,
   components: {
     DropdownContainer,
     GlButton,
@@ -291,6 +288,9 @@ export default {
       validator: (strategy) => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy),
     },
   },
+  expose: ['open', 'close', 'closeAndFocus', 'containsElement'],
+  BASE_DROPDOWN_CLASS,
+  DROPDOWN_CONTAINER_CLASS,
   data() {
     return {
       openedYet: false,

package/src/components/dashboards/dashboard_layout/dashboard_layout.vue

@@ -62,6 +62,14 @@ export default {
       default: 1,
       validator: (value) => value > 0,
     },
+    /**
+     * Additional CSS classes to apply to the `#filters` slot container.
+     */
+    filtersClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     dashboardHasPanels() {
@@ -131,6 +139,7 @@ export default {
         <section
           v-if="$scopedSlots.filters"
           class="gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4"
+          :class="filtersClass"
           data-testid="filters-container"
         >
           <!-- @slot Place dashboard filters inside this slot. -->