@rafal.lemieszewski/tide-ui 0.85.1 → 0.87.0

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

@@ -1,11 +1,12 @@
 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 { useState as I, useId as m, useCallback as u, useMemo as f } from "react";
+import { Button as U } 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 { Select as v, 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";
+import { ArrowDownNarrowWide as ie, ArrowDownWideNarrow as ae } from "lucide-react";
+import { Input as re } from "../fundamental/input.js";
 function j(a) {
   if (a?.directionOptions)
     return a.directionOptions;
@@ -22,7 +23,7 @@ function j(a) {
     }
   return { asc: "Ascending", desc: "Descending" };
 }
-function he({
+function ge({
   sortableColumns: a,
   selectedSortColumn: l,
   sortDirection: C = "asc",
@@ -32,18 +33,18 @@ function he({
   selectedGroupColumn: O,
   onGroupChange: S,
   columns: t,
-  visibleColumns: Z,
+  visibleColumns: W,
   onColumnVisibilityChange: D,
-  align: k = "end",
-  triggerClassName: B
+  align: Z = "end",
+  triggerClassName: k
 }) {
-  const [h, F] = I(""), [P, c] = I(""), L = m(), M = m(), T = m(), q = u((e) => {
+  const [h, B] = I(""), [F, c] = I(""), L = m(), M = m(), T = m(), P = 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;
+  }, [a, y]), q = u((e) => {
+    const r = a.find((Q) => Q.id === l), s = j(r), g = e === "asc" ? s.asc : s.desc;
     c(`Sort direction: ${g}`), N?.(e);
-  }, [a, l, N]), J = u((e) => {
+  }, [a, l, N]), E = u((e) => {
     if (e === "none")
       c("Grouping cleared");
     else {
@@ -51,55 +52,55 @@ function he({
       c(`Grouping by ${r}`);
     }
     S?.(e);
-  }, [d, S]), K = u((e, r) => {
+  }, [d, S]), J = 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(
+  }, [t, D]), z = a.length > 0, A = d.length > 0, $ = t.length > 0, V = z || A, G = f(
     () => a.find((e) => e.id === l),
     [a, l]
-  ), H = v(
+  ), H = f(
     () => j(G),
     [G]
-  ), p = v(() => {
+  ), p = f(() => {
     if (!h) return t;
     const e = h.toLowerCase();
     return t.filter(
       (r) => r.label.toLowerCase().includes(e)
     );
-  }, [t, h]), Q = t.length >= 20;
+  }, [t, h]), K = t.length >= 20;
   return /* @__PURE__ */ i(X, { children: [
     /* @__PURE__ */ n(Y, { asChild: !0, children: /* @__PURE__ */ n(
-      W,
+      U,
       {
         size: "m",
         icon: "settings",
         "aria-label": "Table settings",
-        className: B
+        className: k
       }
     ) }),
-    /* @__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: [
+    /* @__PURE__ */ i(_, { align: Z, className: "w-72 max-w-[90vw]", children: [
+      V && /* @__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__ */ i(v, { value: l, onValueChange: P, 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,
+              v,
               {
                 value: C,
-                onValueChange: (e) => E(e),
+                onValueChange: (e) => q(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(R, { name: ie, 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(R, { name: ae, size: "s" }),
                       /* @__PURE__ */ n("span", { children: H.desc })
                     ] }) })
                   ] })
@@ -108,9 +109,9 @@ function he({
             )
           ] })
         ] }),
-        $ && /* @__PURE__ */ i("div", { className: "space-y-2", role: "group", "aria-labelledby": M, children: [
+        A && /* @__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__ */ i(v, { value: O || "none", onValueChange: E, 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" }),
@@ -119,18 +120,18 @@ function he({
           ] })
         ] })
       ] }) }),
-      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: [
+      V && $ && /* @__PURE__ */ n(ee, {}),
+      $ && /* @__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,
+        K && /* @__PURE__ */ n(
+          re,
           {
             type: "search",
             size: "s",
             placeholder: "Search columns...",
             "aria-label": "Search columns",
             value: h,
-            onChange: (e) => F(e.target.value)
+            onChange: (e) => B(e.target.value)
           }
         ),
         /* @__PURE__ */ n(
@@ -141,7 +142,7 @@ function he({
             "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);
+              const r = W.includes(e.id);
               return /* @__PURE__ */ n(
                 ne,
                 {
@@ -150,7 +151,7 @@ function he({
                   pressed: r,
                   "aria-label": r ? `Hide ${e.label} column` : `Show ${e.label} column`,
                   onPressedChange: (s) => {
-                    K(e.id, s);
+                    J(e.id, s);
                   },
                   children: e.label
                 },
@@ -160,10 +161,10 @@ function he({
           }
         )
       ] }) }),
-      /* @__PURE__ */ n("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: P })
+      /* @__PURE__ */ n("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: F })
     ] })
   ] });
 }
 export {
-  he as DataTableSettingsMenu
+  ge as DataTableSettingsMenu
 };