@gitlab/ui 128.2.1 → 128.2.2

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

@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import isFunction from 'lodash/isFunction';
-import isString from 'lodash/isString';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 const itemValidator = item => {
@@ -16,28 +15,58 @@ group.items.every(isItem);
 const itemsValidator = items => items.every(isItem) || items.every(isGroup);
 const isListItem = tag => ['gl-disclosure-dropdown-group', 'gl-disclosure-dropdown-item', 'li'].includes(tag);
 const isValidSlotTagVue2 = vNode => {
-  var _vNode$componentOptio;
-  return Boolean(vNode) && isListItem(((_vNode$componentOptio = vNode.componentOptions) === null || _vNode$componentOptio === void 0 ? void 0 : _vNode$componentOptio.tag) || vNode.tag);
+  var _vNode$componentOptio, _vNode$componentOptio2, _vNode$componentOptio3, _vNode$componentOptio4;
+  if (!vNode) return false;
+  const tag = ((_vNode$componentOptio = vNode.componentOptions) === null || _vNode$componentOptio === void 0 ? void 0 : _vNode$componentOptio.tag) || vNode.tag;
+  if (isListItem(tag)) return true;
+  const componentName = (_vNode$componentOptio2 = vNode.componentOptions) === null || _vNode$componentOptio2 === void 0 ? void 0 : (_vNode$componentOptio3 = _vNode$componentOptio2.Ctor) === null || _vNode$componentOptio3 === void 0 ? void 0 : (_vNode$componentOptio4 = _vNode$componentOptio3.options) === null || _vNode$componentOptio4 === void 0 ? void 0 : _vNode$componentOptio4.name;
+  return [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes(componentName);
 };
 const isValidSlotTagVue3 = vNode => {
   var _vNode$type;
+  if (!vNode) return false;
   return [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes((_vNode$type = vNode.type) === null || _vNode$type === void 0 ? void 0 : _vNode$type.name) || vNode.type === 'li';
 };
+const isSkippableVue2 = vNode => {
+  if (!vNode) return true;
+  if (vNode.isComment) return true;
+  if (!vNode.tag && typeof vNode.text === 'string' && !vNode.text.trim()) return true;
+  return false;
+};
 const hasOnlyListItemsVue2 = defaultSlot => {
   const nodes = defaultSlot();
   if (!Array.isArray(nodes)) {
     return false;
   }
-  const tags = nodes.filter(vNode => vNode.tag);
-  return tags.length && tags.every(tag => isValidSlotTagVue2(tag));
+  const candidateNodes = nodes.filter(vNode => !isSkippableVue2(vNode));
+  if (candidateNodes.length === 0) return true;
+  return candidateNodes.every(vNode => isValidSlotTagVue2(vNode));
+};
+const isSkippableVue3 = vNode => {
+  var _vNode$children;
+  if (!vNode) return true;
+  if (vNode.type === Vue.Comment) return true;
+  if (vNode.type === Vue.Text && !((_vNode$children = vNode.children) !== null && _vNode$children !== void 0 && _vNode$children.trim())) return true;
+  if (vNode.type === Vue.Fragment && (!vNode.children || vNode.children.length === 0)) return true;
+  return false;
+};
+const validateNodesRecursiveVue3 = nodes => {
+  if (!Array.isArray(nodes) || nodes.length === 0) return true;
+  const candidateNodes = nodes.filter(vNode => !isSkippableVue3(vNode));
+  if (candidateNodes.length === 0) return true;
+  return candidateNodes.every(vNode => {
+    if (isValidSlotTagVue3(vNode)) return true;
+    if (vNode.type === Vue.Fragment && Array.isArray(vNode.children)) {
+      return validateNodesRecursiveVue3(vNode.children);
+    }
+    return false;
+  });
 };
 const hasOnlyListItemsVue3 = defaultSlot => {
   const nodes = defaultSlot();
   const fragment = nodes.find(node => Array.isArray(node.children) && node.children.length);
   const targetNodes = fragment ? fragment.children : nodes;
-  return targetNodes
-  // Remove empty text vNodes
-  .filter(vNode => !isString(vNode.text) || vNode.text.trim().length > 0).every(vNode => isValidSlotTagVue3(vNode));
+  return validateNodesRecursiveVue3(targetNodes);
 };
 const hasOnlyListItems = defaultSlot => {
   if (!isFunction(defaultSlot)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.2.1",
+  "version": "128.2.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -165,7 +165,7 @@
     "start-server-and-test": "^2.1.3",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.1.3",
+    "style-dictionary": "^5.1.4",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/new_dropdowns/disclosure/utils.js

@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import isFunction from 'lodash/isFunction';
-import isString from 'lodash/isString';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 const itemValidator = (item) => item?.text?.length > 0 && !Array.isArray(item?.items);
@@ -20,16 +19,29 @@ const itemsValidator = (items) => items.every(isItem) || items.every(isGroup);
 const isListItem = (tag) =>
   ['gl-disclosure-dropdown-group', 'gl-disclosure-dropdown-item', 'li'].includes(tag);
 
-const isValidSlotTagVue2 = (vNode) =>
-  Boolean(vNode) && isListItem(vNode.componentOptions?.tag || vNode.tag);
+const isValidSlotTagVue2 = (vNode) => {
+  if (!vNode) return false;
+  const tag = vNode.componentOptions?.tag || vNode.tag;
+  if (isListItem(tag)) return true;
+  const componentName = vNode.componentOptions?.Ctor?.options?.name;
+  return [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes(componentName);
+};
 
 const isValidSlotTagVue3 = (vNode) => {
+  if (!vNode) return false;
   return (
     [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes(vNode.type?.name) ||
     vNode.type === 'li'
   );
 };
 
+const isSkippableVue2 = (vNode) => {
+  if (!vNode) return true;
+  if (vNode.isComment) return true;
+  if (!vNode.tag && typeof vNode.text === 'string' && !vNode.text.trim()) return true;
+  return false;
+};
+
 const hasOnlyListItemsVue2 = (defaultSlot) => {
   const nodes = defaultSlot();
 
@@ -37,9 +49,35 @@ const hasOnlyListItemsVue2 = (defaultSlot) => {
     return false;
   }
 
-  const tags = nodes.filter((vNode) => vNode.tag);
+  const candidateNodes = nodes.filter((vNode) => !isSkippableVue2(vNode));
+
+  if (candidateNodes.length === 0) return true;
+
+  return candidateNodes.every((vNode) => isValidSlotTagVue2(vNode));
+};
+
+const isSkippableVue3 = (vNode) => {
+  if (!vNode) return true;
+  if (vNode.type === Vue.Comment) return true;
+  if (vNode.type === Vue.Text && !vNode.children?.trim()) return true;
+  if (vNode.type === Vue.Fragment && (!vNode.children || vNode.children.length === 0)) return true;
+  return false;
+};
+
+const validateNodesRecursiveVue3 = (nodes) => {
+  if (!Array.isArray(nodes) || nodes.length === 0) return true;
+
+  const candidateNodes = nodes.filter((vNode) => !isSkippableVue3(vNode));
+
+  if (candidateNodes.length === 0) return true;
 
-  return tags.length && tags.every((tag) => isValidSlotTagVue2(tag));
+  return candidateNodes.every((vNode) => {
+    if (isValidSlotTagVue3(vNode)) return true;
+    if (vNode.type === Vue.Fragment && Array.isArray(vNode.children)) {
+      return validateNodesRecursiveVue3(vNode.children);
+    }
+    return false;
+  });
 };
 
 const hasOnlyListItemsVue3 = (defaultSlot) => {
@@ -47,12 +85,7 @@ const hasOnlyListItemsVue3 = (defaultSlot) => {
   const fragment = nodes.find((node) => Array.isArray(node.children) && node.children.length);
   const targetNodes = fragment ? fragment.children : nodes;
 
-  return (
-    targetNodes
-      // Remove empty text vNodes
-      .filter((vNode) => !isString(vNode.text) || vNode.text.trim().length > 0)
-      .every((vNode) => isValidSlotTagVue3(vNode))
-  );
+  return validateNodesRecursiveVue3(targetNodes);
 };
 
 const hasOnlyListItems = (defaultSlot) => {