@actioneer/ads 1.0.8 → 1.0.10

package/components/filters.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as u } from "../lib/cn.js";
+import { Filter as T } from "../lib/icons.js";
+import { Button as F } from "./button.js";
+import { Popover as z, PopoverTrigger as D, PopoverContent as K } from "./popover.js";
+import { Field as P } from "./field.js";
+import { Select as U } from "./select.js";
+const N = (i) => i.options.length > 0 && i.value !== i.options[0].value, C = o.forwardRef(
+  ({
+    groups: i,
+    onChange: p,
+    onClearAll: v,
+    title: d = "Filters",
+    triggerLabel: w,
+    align: $ = "end",
+    open: f,
+    defaultOpen: R = !1,
+    onOpenChange: s,
+    className: j,
+    ...k
+  }, c) => {
+    const [E, S] = o.useState(R), a = f ?? E, q = o.useCallback(
+      (e) => {
+        f === void 0 && S(e), s == null || s(e);
+      },
+      [f, s]
+    ), b = o.useRef(null), A = (e) => {
+      b.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+    }, n = o.useId(), r = i.filter(N).length, h = a || r > 0, x = w ?? d;
+    o.useEffect(() => {
+      if (!a) return;
+      const e = requestAnimationFrame(() => {
+        var l, y;
+        (y = (l = document.getElementById(n)) == null ? void 0 : l.querySelector("[role=combobox]")) == null || y.focus();
+      });
+      return () => cancelAnimationFrame(e);
+    }, [a, n]);
+    const I = () => {
+      var e, l;
+      return (l = (e = b.current) == null ? void 0 : e.querySelector("button")) == null ? void 0 : l.focus();
+    }, B = () => {
+      v ? v() : i.forEach((e) => {
+        N(e) && p(e.id, e.options[0].value);
+      });
+    };
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: A,
+        "data-slot": "filters",
+        "data-state": a ? "open" : "closed",
+        className: u("relative inline-flex", j),
+        ...k,
+        children: /* @__PURE__ */ m(z, { open: a, onOpenChange: q, children: [
+          /* @__PURE__ */ t(D, { children: /* @__PURE__ */ m(
+            F,
+            {
+              type: "button",
+              variant: "outline",
+              size: "icon-sm",
+              "aria-label": r > 0 ? `${x}, ${r} applied` : x,
+              "aria-controls": a ? n : void 0,
+              "data-active": h || void 0,
+              className: u(h && "border-action-primary text-action-primary"),
+              children: [
+                /* @__PURE__ */ t(T, { "aria-hidden": !0 }),
+                r > 0 && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    "data-slot": "filters-count",
+                    className: u(
+                      "pointer-events-none absolute -top-1.5 -right-1.5 inline-flex h-4 min-w-4 items-center justify-center",
+                      "rounded-full bg-action-primary px-1 text-xs leading-none font-medium tabular-nums text-action-primary-foreground"
+                    ),
+                    children: r
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ m(
+            K,
+            {
+              id: n,
+              align: $,
+              "aria-label": d,
+              onKeyDown: (e) => {
+                e.key === "Escape" && I();
+              },
+              className: "flex w-76 min-w-0 flex-col gap-4 p-4 text-m",
+              children: [
+                /* @__PURE__ */ m("div", { className: "flex min-h-5 items-center justify-between gap-4", children: [
+                  /* @__PURE__ */ t("div", { className: "text-l font-medium text-on-white-primary", children: d }),
+                  r > 0 && /* @__PURE__ */ t(
+                    F,
+                    {
+                      type: "button",
+                      variant: "link",
+                      className: "h-auto px-0",
+                      onClick: B,
+                      children: "Clear all"
+                    }
+                  )
+                ] }),
+                i.map((e) => /* @__PURE__ */ t(P, { label: e.label, htmlFor: `${n}-${e.id}`, children: /* @__PURE__ */ t(
+                  U,
+                  {
+                    id: `${n}-${e.id}`,
+                    "aria-label": e.label,
+                    items: e.options,
+                    value: e.value,
+                    onChange: (l) => p(e.id, l)
+                  }
+                ) }, e.id))
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+C.displayName = "Filters";
+export {
+  C as Filters
+};

package/components/index.d.ts

@@ -32,6 +32,8 @@ export * from './date-range-picker';
 export * from './autocomplete';
 export * from './slider';
 export * from './segmented';
+export * from './filters';
+export * from './filter-bar';
 export * from './modal';
 export * from './command-palette';
 export * from './drawer';
@@ -55,6 +57,8 @@ export * from './avatar';
 export * from './badge';
 export * from './chip';
 export * from './timeline';
+export * from './detail-list';
+export * from './sparkline';
 export * from './alert';
 export * from './surface-loader';
 export * from './brand-loader';