@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/product/data-table-settings-menu.js

@@ -0,0 +1,169 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { useState as I, useId as m, useCallback as u, useMemo as v } from "react";
+import { Button as W } from "../fundamental/button.js";
+import { DropdownMenu as X, DropdownMenuTrigger as Y, DropdownMenuContent as _, DropdownMenuSeparator as ee } from "../fundamental/dropdown-menu.js";
+import { Select as f, SelectTrigger as b, SelectValue as w, SelectContent as x, SelectItem as o } from "../fundamental/select.js";
+import { Toggle as ne } from "../fundamental/toggle.js";
+import { Icon as R } from "../fundamental/icon.js";
+import { Input as ie } from "../fundamental/input.js";
+function j(a) {
+  if (a?.directionOptions)
+    return a.directionOptions;
+  if (a?.dataType)
+    switch (a.dataType) {
+      case "text":
+        return { asc: "A to Z", desc: "Z to A" };
+      case "number":
+        return { asc: "Ascending", desc: "Descending" };
+      case "date":
+        return { asc: "Oldest first", desc: "Newest first" };
+      case "boolean":
+        return { asc: "False first", desc: "True first" };
+    }
+  return { asc: "Ascending", desc: "Descending" };
+}
+function he({
+  sortableColumns: a,
+  selectedSortColumn: l,
+  sortDirection: C = "asc",
+  onSortChange: y,
+  onSortDirectionChange: N,
+  groupableColumns: d,
+  selectedGroupColumn: O,
+  onGroupChange: S,
+  columns: t,
+  visibleColumns: Z,
+  onColumnVisibilityChange: D,
+  align: k = "end",
+  triggerClassName: B
+}) {
+  const [h, F] = I(""), [P, c] = I(""), L = m(), M = m(), T = m(), q = u((e) => {
+    const r = a.find((s) => s.id === e)?.label;
+    c(`Sorting by ${r}`), y?.(e);
+  }, [a, y]), E = u((e) => {
+    const r = a.find((U) => U.id === l), s = j(r), g = e === "asc" ? s.asc : s.desc;
+    c(`Sort direction: ${g}`), N?.(e);
+  }, [a, l, N]), J = u((e) => {
+    if (e === "none")
+      c("Grouping cleared");
+    else {
+      const r = d.find((s) => s.id === e)?.label;
+      c(`Grouping by ${r}`);
+    }
+    S?.(e);
+  }, [d, S]), K = u((e, r) => {
+    const s = t.find((g) => g.id === e)?.label;
+    c(r ? `${s} column shown` : `${s} column hidden`), D?.(e, r);
+  }, [t, D]), z = a.length > 0, $ = d.length > 0, V = t.length > 0, A = z || $, G = v(
+    () => a.find((e) => e.id === l),
+    [a, l]
+  ), H = v(
+    () => j(G),
+    [G]
+  ), p = v(() => {
+    if (!h) return t;
+    const e = h.toLowerCase();
+    return t.filter(
+      (r) => r.label.toLowerCase().includes(e)
+    );
+  }, [t, h]), Q = t.length >= 20;
+  return /* @__PURE__ */ i(X, { children: [
+    /* @__PURE__ */ n(Y, { asChild: !0, children: /* @__PURE__ */ n(
+      W,
+      {
+        size: "m",
+        icon: "settings",
+        "aria-label": "Table settings",
+        className: B
+      }
+    ) }),
+    /* @__PURE__ */ i(_, { align: k, className: "w-72 max-w-[90vw]", children: [
+      A && /* @__PURE__ */ n("div", { className: "p-3", children: /* @__PURE__ */ i("div", { className: "space-y-4", children: [
+        z && /* @__PURE__ */ i("div", { className: "space-y-2", role: "group", "aria-labelledby": L, children: [
+          /* @__PURE__ */ n("h4", { id: L, className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
+          /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ i(f, { value: l, onValueChange: q, children: [
+              /* @__PURE__ */ n(b, { size: "s", children: /* @__PURE__ */ n(w, { placeholder: "Select column to sort" }) }),
+              /* @__PURE__ */ n(x, { children: a.map((e) => /* @__PURE__ */ n(o, { value: e.id, children: e.label }, e.id)) })
+            ] }),
+            l && /* @__PURE__ */ i(
+              f,
+              {
+                value: C,
+                onValueChange: (e) => E(e),
+                children: [
+                  /* @__PURE__ */ n(b, { size: "s", children: /* @__PURE__ */ n(w, {}) }),
+                  /* @__PURE__ */ i(x, { children: [
+                    /* @__PURE__ */ n(o, { value: "asc", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ n(R, { name: "arrow-down-narrow-wide", size: "s" }),
+                      /* @__PURE__ */ n("span", { children: H.asc })
+                    ] }) }),
+                    /* @__PURE__ */ n(o, { value: "desc", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ n(R, { name: "arrow-down-wide-narrow", size: "s" }),
+                      /* @__PURE__ */ n("span", { children: H.desc })
+                    ] }) })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        $ && /* @__PURE__ */ i("div", { className: "space-y-2", role: "group", "aria-labelledby": M, children: [
+          /* @__PURE__ */ n("h4", { id: M, className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Grouping" }),
+          /* @__PURE__ */ i(f, { value: O || "none", onValueChange: J, children: [
+            /* @__PURE__ */ n(b, { size: "s", children: /* @__PURE__ */ n(w, { placeholder: "Select column to group by" }) }),
+            /* @__PURE__ */ i(x, { children: [
+              /* @__PURE__ */ n(o, { value: "none", children: "None" }),
+              d.map((e) => /* @__PURE__ */ n(o, { value: e.id, children: e.label }, e.id))
+            ] })
+          ] })
+        ] })
+      ] }) }),
+      A && V && /* @__PURE__ */ n(ee, {}),
+      V && /* @__PURE__ */ n("div", { className: "p-3", children: /* @__PURE__ */ i("div", { className: "space-y-2", role: "group", "aria-labelledby": T, children: [
+        /* @__PURE__ */ n("h4", { id: T, className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Display columns" }),
+        Q && /* @__PURE__ */ n(
+          ie,
+          {
+            type: "search",
+            size: "s",
+            placeholder: "Search columns...",
+            "aria-label": "Search columns",
+            value: h,
+            onChange: (e) => F(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "flex flex-wrap items-start justify-start gap-1 max-h-[190px] overflow-y-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 rounded-s",
+            role: p.length > 15 ? "region" : void 0,
+            "aria-label": p.length > 15 ? "Column visibility toggles, scrollable" : void 0,
+            tabIndex: p.length > 15 ? 0 : void 0,
+            children: p.map((e) => {
+              const r = Z.includes(e.id);
+              return /* @__PURE__ */ n(
+                ne,
+                {
+                  variant: "outline",
+                  size: "s",
+                  pressed: r,
+                  "aria-label": r ? `Hide ${e.label} column` : `Show ${e.label} column`,
+                  onPressedChange: (s) => {
+                    K(e.id, s);
+                  },
+                  children: e.label
+                },
+                e.id
+              );
+            })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ n("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: P })
+    ] })
+  ] });
+}
+export {
+  he as DataTableSettingsMenu
+};