@uniformdev/design-system 20.54.1-alpha.1 → 20.55.1

package/dist/esm/index.js

@@ -11257,21 +11257,16 @@ var LabelsQuickFilter = ({
   const filteredItems = useMemo6(() => {
     const searchLower = searchTerm.toLowerCase().trim();
     const matchesSearch = (item) => item.name.toLowerCase().includes(searchLower);
-    if (!searchTerm) {
-      return items;
-    }
-    const groupsWithMatchingChildren = new Set(
-      items.filter((item) => item.parent && matchesSearch(item)).map((item) => item.parent)
-    );
-    return items.filter((item) => {
+    const filtered = !searchTerm ? [...items] : items.filter((item) => {
       if (matchesSearch(item)) {
         return true;
       }
-      if (item.isGroup && groupsWithMatchingChildren.has(item.id)) {
+      if (item.isGroup && items.some((child) => child.parent === item.id && matchesSearch(child))) {
         return true;
       }
       return false;
     });
+    return filtered.sort((a, b) => a.name.localeCompare(b.name));
   }, [items, searchTerm]);
   const handleToggle = (item) => {
     if (selectedIdsSet.has(item.id)) {
@@ -11300,6 +11295,7 @@ var LabelsQuickFilter = ({
   };
   const renderGroupItem = (group) => {
     const childItems = filteredItems.filter((item) => item.parent === group.id);
+    const totalChildResults = childItems.length;
     if (childItems.length === 0) {
       return null;
     }
@@ -11349,24 +11345,42 @@ var LabelsQuickFilter = ({
           /* @__PURE__ */ jsx99(Icon, { icon: TbChevronRight2, iconColor: "currentColor", size: "1rem" })
         ] }),
         withoutPortal,
-        children: childItems.map((item) => {
-          var _a;
-          const isChildSelected = selectedIdsSet.has(item.id);
-          return /* @__PURE__ */ jsxs65(
-            SelectableMenuItem,
-            {
-              selectStyles: "checkbox-select",
-              hideOnClick: false,
-              onClick: () => handleToggle(item),
-              selected: isChildSelected,
-              children: [
-                /* @__PURE__ */ jsx99(Swatch, { variant: (_a = item.variant) != null ? _a : "swatch-default", size: "small" }),
-                /* @__PURE__ */ jsx99("span", { children: item.name })
-              ]
-            },
-            item.id
-          );
-        })
+        children: /* @__PURE__ */ jsx99(
+          VerticalRhythm,
+          {
+            gap: "0",
+            css: (
+              // if there are more than 5 child results, add a scrollbar
+              // we do this because the user could potentially have a lot of child results
+              // and this breaks the UI if the menu is too tall
+              totalChildResults > 5 ? [
+                scrollbarStyles,
+                {
+                  maxHeight: "320px",
+                  overflowY: "auto"
+                }
+              ] : void 0
+            ),
+            children: childItems.map((item) => {
+              var _a;
+              const isChildSelected = selectedIdsSet.has(item.id);
+              return /* @__PURE__ */ jsxs65(
+                SelectableMenuItem,
+                {
+                  selectStyles: "checkbox-select",
+                  hideOnClick: false,
+                  onClick: () => handleToggle(item),
+                  selected: isChildSelected,
+                  children: [
+                    /* @__PURE__ */ jsx99(Swatch, { variant: (_a = item.variant) != null ? _a : "swatch-default", size: "small" }),
+                    /* @__PURE__ */ jsx99("span", { children: item.name })
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        )
       },
       group.id
     );

package/dist/index.js

@@ -13154,21 +13154,16 @@ var LabelsQuickFilter = ({
   const filteredItems = (0, import_react120.useMemo)(() => {
     const searchLower = searchTerm.toLowerCase().trim();
     const matchesSearch = (item) => item.name.toLowerCase().includes(searchLower);
-    if (!searchTerm) {
-      return items;
-    }
-    const groupsWithMatchingChildren = new Set(
-      items.filter((item) => item.parent && matchesSearch(item)).map((item) => item.parent)
-    );
-    return items.filter((item) => {
+    const filtered = !searchTerm ? [...items] : items.filter((item) => {
       if (matchesSearch(item)) {
         return true;
       }
-      if (item.isGroup && groupsWithMatchingChildren.has(item.id)) {
+      if (item.isGroup && items.some((child) => child.parent === item.id && matchesSearch(child))) {
         return true;
       }
       return false;
     });
+    return filtered.sort((a, b) => a.name.localeCompare(b.name));
   }, [items, searchTerm]);
   const handleToggle = (item) => {
     if (selectedIdsSet.has(item.id)) {
@@ -13197,6 +13192,7 @@ var LabelsQuickFilter = ({
   };
   const renderGroupItem = (group) => {
     const childItems = filteredItems.filter((item) => item.parent === group.id);
+    const totalChildResults = childItems.length;
     if (childItems.length === 0) {
       return null;
     }
@@ -13246,24 +13242,42 @@ var LabelsQuickFilter = ({
           /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Icon, { icon: import_TbChevronRight2.TbChevronRight, iconColor: "currentColor", size: "1rem" })
         ] }),
         withoutPortal,
-        children: childItems.map((item) => {
-          var _a;
-          const isChildSelected = selectedIdsSet.has(item.id);
-          return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
-            SelectableMenuItem,
-            {
-              selectStyles: "checkbox-select",
-              hideOnClick: false,
-              onClick: () => handleToggle(item),
-              selected: isChildSelected,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Swatch, { variant: (_a = item.variant) != null ? _a : "swatch-default", size: "small" }),
-                /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: item.name })
-              ]
-            },
-            item.id
-          );
-        })
+        children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+          VerticalRhythm,
+          {
+            gap: "0",
+            css: (
+              // if there are more than 5 child results, add a scrollbar
+              // we do this because the user could potentially have a lot of child results
+              // and this breaks the UI if the menu is too tall
+              totalChildResults > 5 ? [
+                scrollbarStyles,
+                {
+                  maxHeight: "320px",
+                  overflowY: "auto"
+                }
+              ] : void 0
+            ),
+            children: childItems.map((item) => {
+              var _a;
+              const isChildSelected = selectedIdsSet.has(item.id);
+              return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+                SelectableMenuItem,
+                {
+                  selectStyles: "checkbox-select",
+                  hideOnClick: false,
+                  onClick: () => handleToggle(item),
+                  selected: isChildSelected,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Swatch, { variant: (_a = item.variant) != null ? _a : "swatch-default", size: "small" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { children: item.name })
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        )
       },
       group.id
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.54.1-alpha.1+028680cba4",
+  "version": "20.55.1",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -35,8 +35,8 @@
     "@storybook/react-vite": "10.1.0",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
-    "@uniformdev/canvas": "^20.54.1-alpha.1+028680cba4",
-    "@uniformdev/richtext": "^20.54.1-alpha.1+028680cba4",
+    "@uniformdev/canvas": "^20.55.1",
+    "@uniformdev/richtext": "^20.55.1",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
     "jsdom": "20.0.3",
@@ -88,5 +88,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "028680cba478a17da934cdb2ddebb777e2553455"
+  "gitHead": "44d778abd699dafbabda982cb3295be043ba3cb0"
 }