@pibit.ai/cure-design-system 0.6.55 → 0.6.56

package/dist/patterns/filters/status-filter-dropdown.d.ts

@@ -2,6 +2,11 @@ import { FC } from 'react';
 export interface StatusFilterOption {
     key: string;
     label: string;
+    /**
+     * Heading the option is listed under (multi-select). Consecutive options with the same group share one heading;
+     * when no option has a group the list is flat, as before.
+     */
+    group?: string;
 }
 export interface StatusFilters {
     all: boolean;

package/dist/patterns/filters/status-filter-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-filter-dropdown.d.ts","sourceRoot":"","sources":["../../../src/patterns/filters/status-filter-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAiBnE,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,OAAO,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,KAAK,uBAAuB,GAAG;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,KAAK,iCAAiC,GAAG,uBAAuB,GAAG;IACjE,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,oBAAoB,EAAE,aAAa,CAAC;IACpC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,kBAAkB,EAAE,CAAC;IACpC,2GAA2G;IAC3G,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,KAAK,+BAA+B,GAAG,uBAAuB,GAAG;IAC/D,aAAa,EAAE,QAAQ,CAAC;IACxB,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GACjC,iCAAiC,GACjC,+BAA+B,CAAC;AAqBpC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA0Q9D,CAAC"}
+{"version":3,"file":"status-filter-dropdown.d.ts","sourceRoot":"","sources":["../../../src/patterns/filters/status-filter-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAiBnE,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,OAAO,CAAC;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,KAAK,uBAAuB,GAAG;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,KAAK,iCAAiC,GAAG,uBAAuB,GAAG;IACjE,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;IAC7B,oBAAoB,EAAE,aAAa,CAAC;IACpC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,kBAAkB,EAAE,CAAC;IACpC,2GAA2G;IAC3G,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,KAAK,+BAA+B,GAAG,uBAAuB,GAAG;IAC/D,aAAa,EAAE,QAAQ,CAAC;IACxB,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,iGAAiG;IACjG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GACjC,iCAAiC,GACjC,+BAA+B,CAAC;AAgCpC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA2R9D,CAAC"}

package/dist/patterns/filters/status-filter-dropdown.js

@@ -1,140 +1,147 @@
-import { jsx as n, jsxs as s, Fragment as q } from "react/jsx-runtime";
-import { useRef as S, useState as I, useLayoutEffect as D } from "react";
-import { ChevronDown as P, MinusSquare as $ } from "@untitledui/icons";
-import { cx as U } from "../../utils/cn.js";
-import { Dropdown as p } from "../../primitives/dropdown/dropdown.js";
-import { Button as y } from "../../primitives/button/button.js";
-import { RadioButtonBase as W } from "../../primitives/radio/radio.js";
-import { EllipsisContentWithTooltip as G } from "../../primitives/tooltip/ellipsis-content.js";
-import { CheckboxBase as J } from "../../primitives/checkbox/checkbox.js";
-const N = ({ isSelected: t }) => /* @__PURE__ */ n("div", { className: "pointer-events-none", "aria-hidden": !0, children: /* @__PURE__ */ n(J, { isSelected: t }) }), A = ({ label: t }) => /* @__PURE__ */ n(
-  G,
+import { jsx as n, jsxs as c, Fragment as q } from "react/jsx-runtime";
+import { useRef as A, useState as I, useLayoutEffect as F } from "react";
+import { ChevronDown as P, MinusSquare as U } from "@untitledui/icons";
+import { cx as W } from "../../utils/cn.js";
+import { Dropdown as R } from "../../primitives/dropdown/dropdown.js";
+import { Button as v } from "../../primitives/button/button.js";
+import { RadioButtonBase as G } from "../../primitives/radio/radio.js";
+import { EllipsisContentWithTooltip as J } from "../../primitives/tooltip/ellipsis-content.js";
+import { CheckboxBase as Q } from "../../primitives/checkbox/checkbox.js";
+const V = ({ isSelected: t }) => /* @__PURE__ */ n("div", { className: "pointer-events-none", "aria-hidden": !0, children: /* @__PURE__ */ n(Q, { isSelected: t }) }), X = (t) => {
+  const i = [];
+  for (const f of t) {
+    const h = i[i.length - 1];
+    h && h.group === f.group ? h.options.push(f) : i.push({ group: f.group, options: [f] });
+  }
+  return i;
+}, z = ({ label: t }) => /* @__PURE__ */ n(
+  J,
   {
     content: t,
     className: "min-w-0 flex-1",
     tooltipClassName: "z-[100001]"
   }
-), oe = (t) => {
+), se = (t) => {
   const {
-    isOpen: u,
-    onOpenChange: F,
-    onApply: R,
-    onReset: V,
-    className: z,
-    buttonLabel: d = "Status",
-    isDisabled: M = !1,
-    isApplyDisabled: T,
-    isResetDisabled: E
-  } = t, i = t.selectionMode === "single", o = i ? t.options : t.statusOptions, a = (o == null ? void 0 : o.length) ?? 0, f = i ? 0 : Object.entries(t.appliedStatusFilters).filter(
-    ([e, l]) => e !== "all" && l
-  ).length, L = !i && t.defaultSelectAll === !0, H = (() => {
-    if (i) {
+    isOpen: i,
+    onOpenChange: f,
+    onApply: h,
+    onReset: M,
+    className: T,
+    buttonLabel: m = "Status",
+    isDisabled: E = !1,
+    isApplyDisabled: L,
+    isResetDisabled: O
+  } = t, o = t.selectionMode === "single", s = o ? t.options : t.statusOptions, u = (s == null ? void 0 : s.length) ?? 0, g = o ? 0 : Object.entries(t.appliedStatusFilters).filter(
+    ([e, r]) => e !== "all" && r
+  ).length, H = !o && t.defaultSelectAll === !0, j = (() => {
+    if (o) {
       const e = t.defaultValue ?? "all";
       return t.value !== e;
     }
-    return a === 0 ? !1 : L ? f < a : f > 0;
-  })(), m = i ? 0 : Object.entries(t.statusFilters).filter(
-    ([e, l]) => e !== "all" && l
-  ).length, b = m === a && a > 0, g = m > 0 && m < a, O = (() => {
-    var l;
-    if (!i)
-      return !(f === a && a > 0) && f > 0 ? `${d} ${f} selected` : d;
+    return u === 0 ? !1 : H ? g < u : g > 0;
+  })(), x = o ? 0 : Object.entries(t.statusFilters).filter(
+    ([e, r]) => e !== "all" && r
+  ).length, k = x === u && u > 0, p = x > 0 && x < u, B = (() => {
+    var r;
+    if (!o)
+      return !(g === u && u > 0) && g > 0 ? `${m} ${g} selected` : m;
     const e = t.defaultValue ?? "all";
-    return t.value === e ? d : ((l = o.find((c) => c.key === t.value)) == null ? void 0 : l.label) ?? d;
-  })(), h = S(null), v = S(0), [j, B] = I(
+    return t.value === e ? m : ((r = s.find((a) => a.key === t.value)) == null ? void 0 : r.label) ?? m;
+  })(), y = A(null), w = A(0), [K, _] = I(
     () => typeof window > "u" ? 400 : Math.round(window.innerHeight * 0.5)
-  ), K = i ? t.pendingValue : t.statusFilters;
-  return D(() => {
-    if (!u) return;
+  ), $ = o ? t.pendingValue : t.statusFilters;
+  return F(() => {
+    if (!i) return;
     const e = () => {
-      B(Math.round(window.innerHeight * 0.5));
+      _(Math.round(window.innerHeight * 0.5));
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-  }, [u]), D(() => {
+  }, [i]), F(() => {
     const e = () => {
-      h.current && (h.current.scrollTop = v.current);
+      y.current && (y.current.scrollTop = w.current);
     };
     e();
-    const l = requestAnimationFrame(e);
-    return () => cancelAnimationFrame(l);
-  }, [K]), /* @__PURE__ */ n("div", { className: "relative", children: /* @__PURE__ */ s(p.Root, { isOpen: u, onOpenChange: F, children: [
+    const r = requestAnimationFrame(e);
+    return () => cancelAnimationFrame(r);
+  }, [$]), /* @__PURE__ */ n("div", { className: "relative", children: /* @__PURE__ */ c(R.Root, { isOpen: i, onOpenChange: f, children: [
     /* @__PURE__ */ n(
-      y,
+      v,
       {
         size: "xs",
         color: "secondary",
         iconTrailing: /* @__PURE__ */ n(P, { size: 12 }),
-        className: U(
+        className: W(
           "relative",
-          H && !u && "ring-1 ring-brand-600 bg-brand-primary text-brand-600 hover:bg-brand-primary hover:text-brand-600",
-          z,
-          u && "shadow-[0_0_0_4px_rgba(102,112,133,0.14)]"
+          j && !i && "ring-1 ring-brand-600 bg-brand-primary text-brand-600 hover:bg-brand-primary hover:text-brand-600",
+          T,
+          i && "shadow-[0_0_0_4px_rgba(102,112,133,0.14)]"
         ),
-        isDisabled: M,
-        children: O
+        isDisabled: E,
+        children: B
       }
     ),
     /* @__PURE__ */ n(
-      p.Popover,
+      R.Popover,
       {
         className: "overflow-hidden",
         style: { overflow: "hidden" },
-        maxHeight: j,
-        scrollRef: h,
-        children: /* @__PURE__ */ s("div", { className: "flex max-h-[50vh] flex-col overflow-hidden text-secondary text-xs", children: [
+        maxHeight: K,
+        scrollRef: y,
+        children: /* @__PURE__ */ c("div", { className: "flex max-h-[50vh] flex-col overflow-hidden text-secondary text-xs", children: [
           /* @__PURE__ */ n(
             "div",
             {
-              ref: h,
+              ref: y,
               className: "min-h-0 flex-1 space-y-3 overflow-x-hidden overflow-y-auto p-3",
-              role: i ? "radiogroup" : void 0,
-              "aria-label": i ? d : void 0,
+              role: o ? "radiogroup" : void 0,
+              "aria-label": o ? m : void 0,
               onScroll: (e) => {
-                v.current = e.currentTarget.scrollTop;
+                w.current = e.currentTarget.scrollTop;
               },
-              children: i ? o.map((e, l) => {
-                const c = t.pendingValue === e.key, _ = o.some((r) => r.key === t.pendingValue);
-                return /* @__PURE__ */ s(
+              children: o ? s.map((e, r) => {
+                const a = t.pendingValue === e.key, b = s.some((l) => l.key === t.pendingValue);
+                return /* @__PURE__ */ c(
                   "div",
                   {
                     role: "radio",
-                    "aria-checked": c,
-                    tabIndex: c || !_ && l === 0 ? 0 : -1,
+                    "aria-checked": a,
+                    tabIndex: a || !b && r === 0 ? 0 : -1,
                     className: "flex cursor-pointer items-center gap-3 rounded-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
-                    onMouseDownCapture: (r) => r.preventDefault(),
+                    onMouseDownCapture: (l) => l.preventDefault(),
                     onClick: () => t.onValueChange(e.key),
-                    onKeyDown: (r) => {
-                      var w, C;
-                      if (r.key === "Enter" || r.key === " ") {
-                        r.preventDefault(), t.onValueChange(e.key);
+                    onKeyDown: (l) => {
+                      var D, N;
+                      if (l.key === "Enter" || l.key === " ") {
+                        l.preventDefault(), t.onValueChange(e.key);
                         return;
                       }
-                      const k = r.key === "ArrowDown" || r.key === "ArrowRight" ? 1 : r.key === "ArrowUp" || r.key === "ArrowLeft" ? -1 : 0;
-                      if (!k) return;
-                      r.preventDefault();
-                      const x = (l + k + o.length) % o.length;
-                      t.onValueChange(o[x].key), (C = (w = h.current) == null ? void 0 : w.querySelectorAll('[role="radio"]')[x]) == null || C.focus();
+                      const C = l.key === "ArrowDown" || l.key === "ArrowRight" ? 1 : l.key === "ArrowUp" || l.key === "ArrowLeft" ? -1 : 0;
+                      if (!C) return;
+                      l.preventDefault();
+                      const S = (r + C + s.length) % s.length;
+                      t.onValueChange(s[S].key), (N = (D = y.current) == null ? void 0 : D.querySelectorAll('[role="radio"]')[S]) == null || N.focus();
                     },
                     children: [
                       /* @__PURE__ */ n("div", { className: "pointer-events-none", children: /* @__PURE__ */ n(
-                        W,
+                        G,
                         {
                           size: "sm",
-                          isSelected: c,
+                          isSelected: a,
                           "aria-hidden": !0
                         }
                       ) }),
-                      /* @__PURE__ */ n(A, { label: e.label })
+                      /* @__PURE__ */ n(z, { label: e.label })
                     ]
                   },
                   e.key
                 );
-              }) : /* @__PURE__ */ s(q, { children: [
-                /* @__PURE__ */ s(
+              }) : /* @__PURE__ */ c(q, { children: [
+                /* @__PURE__ */ c(
                   "div",
                   {
                     role: "checkbox",
-                    "aria-checked": g ? "mixed" : b,
+                    "aria-checked": p ? "mixed" : k,
                     tabIndex: 0,
                     className: "flex cursor-pointer items-center gap-3 rounded-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
                     onMouseDownCapture: (e) => e.preventDefault(),
@@ -143,65 +150,80 @@ const N = ({ isSelected: t }) => /* @__PURE__ */ n("div", { className: "pointer-
                       (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.onStatusChange("all"));
                     },
                     children: [
-                      g ? /* @__PURE__ */ n(
-                        $,
+                      p ? /* @__PURE__ */ n(
+                        U,
                         {
                           size: 18,
                           className: "text-utility-brand-600",
                           "aria-hidden": !0
                         }
-                      ) : /* @__PURE__ */ n(N, { isSelected: b }),
+                      ) : /* @__PURE__ */ n(V, { isSelected: k }),
                       /* @__PURE__ */ n("span", { children: "All" })
                     ]
                   }
                 ),
-                o.map((e) => /* @__PURE__ */ s(
-                  "div",
-                  {
-                    role: "checkbox",
-                    "aria-checked": t.statusFilters[e.key],
-                    tabIndex: 0,
-                    className: "flex cursor-pointer items-center gap-3 rounded-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
-                    onMouseDownCapture: (l) => l.preventDefault(),
-                    onClick: () => t.onStatusChange(e.key),
-                    onKeyDown: (l) => {
-                      (l.key === "Enter" || l.key === " ") && (l.preventDefault(), t.onStatusChange(e.key));
+                X(s).map(({ group: e, options: r }, a) => {
+                  const b = r.map((d) => /* @__PURE__ */ c(
+                    "div",
+                    {
+                      role: "checkbox",
+                      "aria-checked": t.statusFilters[d.key],
+                      tabIndex: 0,
+                      className: "flex cursor-pointer items-center gap-3 rounded-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+                      onMouseDownCapture: (l) => l.preventDefault(),
+                      onClick: () => t.onStatusChange(d.key),
+                      onKeyDown: (l) => {
+                        (l.key === "Enter" || l.key === " ") && (l.preventDefault(), t.onStatusChange(d.key));
+                      },
+                      children: [
+                        /* @__PURE__ */ n(
+                          V,
+                          {
+                            isSelected: t.statusFilters[d.key]
+                          }
+                        ),
+                        /* @__PURE__ */ n(z, { label: d.label })
+                      ]
                     },
-                    children: [
-                      /* @__PURE__ */ n(
-                        N,
-                        {
-                          isSelected: t.statusFilters[e.key]
-                        }
-                      ),
-                      /* @__PURE__ */ n(A, { label: e.label })
-                    ]
-                  },
-                  e.key
-                ))
+                    d.key
+                  ));
+                  return e ? /* @__PURE__ */ c(
+                    "div",
+                    {
+                      role: "group",
+                      "aria-label": e,
+                      className: "space-y-3",
+                      children: [
+                        /* @__PURE__ */ n("p", { "aria-hidden": !0, className: "pt-1 text-xs font-semibold text-tertiary", children: e }),
+                        b
+                      ]
+                    },
+                    `${e}-${a}`
+                  ) : b;
+                })
               ] })
             }
           ),
-          /* @__PURE__ */ s("div", { className: "flex shrink-0 justify-end gap-2 bg-primary p-3", children: [
+          /* @__PURE__ */ c("div", { className: "flex shrink-0 justify-end gap-2 bg-primary p-3", children: [
             /* @__PURE__ */ n(
-              y,
+              v,
               {
                 size: "xs",
                 color: "secondary",
                 className: "flex-1 p-2",
-                onClick: V,
-                isDisabled: E,
+                onClick: M,
+                isDisabled: O,
                 children: "Reset"
               }
             ),
             /* @__PURE__ */ n(
-              y,
+              v,
               {
                 size: "xs",
                 color: "primary",
                 className: "flex-1 p-2",
-                onClick: R,
-                isDisabled: T,
+                onClick: h,
+                isDisabled: L,
                 children: "Apply"
               }
             )
@@ -212,5 +234,5 @@ const N = ({ isSelected: t }) => /* @__PURE__ */ n("div", { className: "pointer-
   ] }) });
 };
 export {
-  oe as StatusFilterDropdown
+  se as StatusFilterDropdown
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pibit.ai/cure-design-system",
-  "version": "0.6.55",
+  "version": "0.6.56",
   "description": "CURE Design System - React component library",
   "author": "Pibit",
   "license": "MIT",