@uniformdev/design-system 20.55.1-alpha.1 → 20.55.2-alpha.2

package/dist/esm/index.js

@@ -7951,6 +7951,10 @@ var datePart = css54`
   overflow: hidden;
   white-space: nowrap;
 `;
+var compactInput = css54`
+  /* matches the rendered height of ParameterInput (padding + line-height + border) */
+  min-height: calc(var(--spacing-sm) * 2 + var(--fs-sm) * 1.5 + 2px);
+`;
 var datePartButton = css54`
   // this allows the button to be as wide as the text
   min-width: 0;
@@ -8119,6 +8123,7 @@ var DateTimePicker = ({
   testId = "datetime-picker",
   placement = "bottom-start",
   portal = false,
+  compact = false,
   ...props
 }) => {
   const popover2 = usePopoverStore({ placement });
@@ -8190,7 +8195,12 @@ var DateTimePicker = ({
       /* @__PURE__ */ jsxs43(
         "div",
         {
-          css: [input("nowrap"), input2, errorMessage ? inputError : null],
+          css: [
+            input("nowrap"),
+            input2,
+            compact && compactInput,
+            errorMessage ? inputError : null
+          ],
           "data-disabled": disabled2,
           "data-focus": visible,
           children: [
@@ -8215,7 +8225,17 @@ var DateTimePicker = ({
                 children: "clear"
               }
             ),
-            /* @__PURE__ */ jsx66(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ jsx66(Icon, { icon: triggerIcon, iconColor: "gray" }) })
+            /* @__PURE__ */ jsx66(
+              Button,
+              {
+                css: trigger,
+                buttonType: "ghost",
+                size: compact ? "sm" : "md",
+                disabled: disabled2,
+                onClick: popover2.show,
+                children: /* @__PURE__ */ jsx66(Icon, { icon: triggerIcon, iconColor: "gray", size: "1rem" })
+              }
+            )
           ]
         }
       ),
@@ -11257,21 +11277,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)) {
@@ -13359,6 +13374,11 @@ var input3 = css97`
     cursor: not-allowed;
     color: var(--gray-400);
   }
+
+  &::-webkit-calendar-picker-indicator {
+    color: var(--gray-500);
+    opacity: var(--opacity-50);
+  }
 `;
 var selectInput = css97`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");

package/dist/index.d.mts

@@ -1803,6 +1803,8 @@ type DateTimePickerProps = {
     offset?: number;
     /** (optional) sets whether to render the popover in a portal */
     portal?: boolean;
+    /** (optional) reduces input height to match compact parameter inputs */
+    compact?: boolean;
 };
 /**
  * Use this context for slots within the date time picker
@@ -1822,7 +1824,7 @@ declare function useDateTimePickerContext(): {
  * Subcomponents can manipulate the value directly by using
  * the `useDateTimePickerContext()` hook.
  */
-declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, compact, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare function DateTimePickerSummary({ value, placeholder, }: {
     value: DateTimePickerValue | null | undefined;

package/dist/index.d.ts

@@ -1803,6 +1803,8 @@ type DateTimePickerProps = {
     offset?: number;
     /** (optional) sets whether to render the popover in a portal */
     portal?: boolean;
+    /** (optional) reduces input height to match compact parameter inputs */
+    compact?: boolean;
 };
 /**
  * Use this context for slots within the date time picker
@@ -1822,7 +1824,7 @@ declare function useDateTimePickerContext(): {
  * Subcomponents can manipulate the value directly by using
  * the `useDateTimePickerContext()` hook.
  */
-declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, compact, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare function DateTimePickerSummary({ value, placeholder, }: {
     value: DateTimePickerValue | null | undefined;

package/dist/index.js

@@ -9786,6 +9786,10 @@ var datePart = import_react81.css`
   overflow: hidden;
   white-space: nowrap;
 `;
+var compactInput = import_react81.css`
+  /* matches the rendered height of ParameterInput (padding + line-height + border) */
+  min-height: calc(var(--spacing-sm) * 2 + var(--fs-sm) * 1.5 + 2px);
+`;
 var datePartButton = import_react81.css`
   // this allows the button to be as wide as the text
   min-width: 0;
@@ -9949,6 +9953,7 @@ var DateTimePicker = ({
   testId = "datetime-picker",
   placement = "bottom-start",
   portal = false,
+  compact = false,
   ...props
 }) => {
   const popover2 = (0, import_react82.usePopoverStore)({ placement });
@@ -10020,7 +10025,12 @@ var DateTimePicker = ({
       /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
         "div",
         {
-          css: [input("nowrap"), input2, errorMessage ? inputError : null],
+          css: [
+            input("nowrap"),
+            input2,
+            compact && compactInput,
+            errorMessage ? inputError : null
+          ],
           "data-disabled": disabled2,
           "data-focus": visible,
           children: [
@@ -10045,7 +10055,17 @@ var DateTimePicker = ({
                 children: "clear"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon, { icon: triggerIcon, iconColor: "gray" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              Button,
+              {
+                css: trigger,
+                buttonType: "ghost",
+                size: compact ? "sm" : "md",
+                disabled: disabled2,
+                onClick: popover2.show,
+                children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon, { icon: triggerIcon, iconColor: "gray", size: "1rem" })
+              }
+            )
           ]
         }
       ),
@@ -13154,21 +13174,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)) {
@@ -15323,6 +15338,11 @@ var input3 = import_react151.css`
     cursor: not-allowed;
     color: var(--gray-400);
   }
+
+  &::-webkit-calendar-picker-indicator {
+    color: var(--gray-500);
+    opacity: var(--opacity-50);
+  }
 `;
 var selectInput = import_react151.css`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.55.1-alpha.1+1000cac1ff",
+  "version": "20.55.2-alpha.2+62d2ec9b3f",
   "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.55.1-alpha.1+1000cac1ff",
-    "@uniformdev/richtext": "^20.55.1-alpha.1+1000cac1ff",
+    "@uniformdev/canvas": "^20.55.2-alpha.2+62d2ec9b3f",
+    "@uniformdev/richtext": "^20.55.2-alpha.2+62d2ec9b3f",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
     "jsdom": "20.0.3",
@@ -88,5 +88,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1000cac1ff81da9389888840d3a3b2b1c3dcc10f"
+  "gitHead": "62d2ec9b3f273a02798cb93040a1edf4dee0c9c2"
 }