@rafal.lemieszewski/tide-ui 0.87.7 → 0.87.8

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

@@ -1,11 +1,11 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import { useState as I, useId as m, useCallback as u, useMemo as f } from "react";
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { useState as I, useId as m, useCallback as u, useMemo as v } 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 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 { Select as f, SelectTrigger as b, SelectValue as w, SelectContent as x, SelectItem as o } from "../fundamental/select.js";
+import { Toggle as ie } from "../fundamental/toggle.js";
 import { Icon as R } from "../fundamental/icon.js";
-import { Settings as ie, ArrowDownNarrowWide as ae, ArrowDownWideNarrow as re } from "lucide-react";
+import { Settings as ne, ArrowDownNarrowWide as ae, ArrowDownWideNarrow as re } from "lucide-react";
 import { Input as se } from "../fundamental/input.js";
 function j(a) {
   if (a?.directionOptions)
@@ -55,53 +55,53 @@ function me({
   }, [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, A = d.length > 0, $ = t.length > 0, V = z || A, G = f(
+  }, [t, D]), z = a.length > 0, A = d.length > 0, $ = t.length > 0, V = z || A, G = v(
     () => a.find((e) => e.id === l),
     [a, l]
-  ), H = f(
+  ), H = v(
     () => j(G),
     [G]
-  ), p = f(() => {
+  ), p = v(() => {
     if (!h) return t;
     const e = h.toLowerCase();
     return t.filter(
       (r) => r.label.toLowerCase().includes(e)
     );
   }, [t, h]), K = t.length >= 20;
-  return /* @__PURE__ */ i(X, { children: [
-    /* @__PURE__ */ n(Y, { asChild: !0, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(X, { children: [
+    /* @__PURE__ */ i(Y, { asChild: !0, children: /* @__PURE__ */ i(
       U,
       {
         size: "m",
-        icon: ie,
+        icon: ne,
         "aria-label": "Table settings",
         className: k
       }
     ) }),
-    /* @__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(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)) })
+    /* @__PURE__ */ n(_, { align: Z, className: "w-72 max-w-[90vw]", children: [
+      V && /* @__PURE__ */ i("div", { className: "p-3", children: /* @__PURE__ */ n("div", { className: "space-y-4", children: [
+        z && /* @__PURE__ */ n("div", { className: "space-y-2", role: "group", "aria-labelledby": L, children: [
+          /* @__PURE__ */ i("h4", { id: L, className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Sorting" }),
+          /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ n(f, { value: l, onValueChange: P, children: [
+              /* @__PURE__ */ i(b, { size: "s", children: /* @__PURE__ */ i(w, { placeholder: "Select column to sort" }) }),
+              /* @__PURE__ */ i(x, { children: a.map((e) => /* @__PURE__ */ i(o, { value: e.id, children: e.label }, e.id)) })
             ] }),
-            l && /* @__PURE__ */ i(
-              v,
+            l && /* @__PURE__ */ n(
+              f,
               {
                 value: C,
                 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: ae, size: "s" }),
-                      /* @__PURE__ */ n("span", { children: H.asc })
+                  /* @__PURE__ */ i(b, { size: "s", children: /* @__PURE__ */ i(w, {}) }),
+                  /* @__PURE__ */ n(x, { children: [
+                    /* @__PURE__ */ i(o, { value: "asc", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ i(R, { name: ae, size: "s" }),
+                      /* @__PURE__ */ i("span", { children: H.asc })
                     ] }) }),
-                    /* @__PURE__ */ n(o, { value: "desc", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ n(R, { name: re, size: "s" }),
-                      /* @__PURE__ */ n("span", { children: H.desc })
+                    /* @__PURE__ */ i(o, { value: "desc", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ i(R, { name: re, size: "s" }),
+                      /* @__PURE__ */ i("span", { children: H.desc })
                     ] }) })
                   ] })
                 ]
@@ -109,21 +109,21 @@ function me({
             )
           ] })
         ] }),
-        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(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" }),
-              d.map((e) => /* @__PURE__ */ n(o, { value: e.id, children: e.label }, e.id))
+        A && /* @__PURE__ */ n("div", { className: "space-y-2", role: "group", "aria-labelledby": M, children: [
+          /* @__PURE__ */ i("h4", { id: M, className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Grouping" }),
+          /* @__PURE__ */ n(f, { value: O || "none", onValueChange: E, children: [
+            /* @__PURE__ */ i(b, { size: "s", children: /* @__PURE__ */ i(w, { placeholder: "Select column to group by" }) }),
+            /* @__PURE__ */ n(x, { children: [
+              /* @__PURE__ */ i(o, { value: "none", children: "None" }),
+              d.map((e) => /* @__PURE__ */ i(o, { value: e.id, children: e.label }, e.id))
             ] })
           ] })
         ] })
       ] }) }),
-      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" }),
-        K && /* @__PURE__ */ n(
+      V && $ && /* @__PURE__ */ i(ee, {}),
+      $ && /* @__PURE__ */ i("div", { className: "p-3", children: /* @__PURE__ */ n("div", { className: "space-y-2", role: "group", "aria-labelledby": T, children: [
+        /* @__PURE__ */ i("h4", { id: T, className: "text-label-sm text-[var(--color-text-tertiary)]", children: "Display columns" }),
+        K && /* @__PURE__ */ i(
           se,
           {
             type: "search",
@@ -134,17 +134,17 @@ function me({
             onChange: (e) => B(e.target.value)
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ i(
           "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",
+            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-[var(--border-radius-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 = W.includes(e.id);
-              return /* @__PURE__ */ n(
-                ne,
+              return /* @__PURE__ */ i(
+                ie,
                 {
                   variant: "outline",
                   size: "s",
@@ -161,7 +161,7 @@ function me({
           }
         )
       ] }) }),
-      /* @__PURE__ */ n("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: F })
+      /* @__PURE__ */ i("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: F })
     ] })
   ] });
 }