@lax-wp/design-system 0.13.45 → 0.13.47

package/dist/components/navigation/tabs/Tabs.es.js

@@ -1,5 +1,5 @@
 import { jsx as n, jsxs as ke } from "react/jsx-runtime";
-import { useSensors as zt, useSensor as Ze, MouseSensor as Rt, TouchSensor as Wt, DndContext as Pt, closestCenter as Ft } from "@dnd-kit/core";
+import { useSensors as Rt, useSensor as Ze, MouseSensor as zt, TouchSensor as Wt, DndContext as Pt, closestCenter as Ft } from "@dnd-kit/core";
 import { SortableContext as Bt, horizontalListSortingStrategy as jt, arrayMove as Ke } from "@dnd-kit/sortable";
 import { Dropdown as ye } from "antd";
 import l from "../../../_virtual/index.es.js";
@@ -17,13 +17,13 @@ import Ce from "../../tooltip/Tooltip.es.js";
 import { EditIcon as Xt } from "../../icons/EditIcon.es.js";
 import { toast as Zt } from "react-toastify";
 import { TabSwitch as Se } from "./TabSwitch.es.js";
-import { PinIcon as se, ArrowOutwardIcon as Kt, ArrowUpwardIcon as en, ArrowDownwardIcon as tn, ContentCopyIcon as nn, VisibilityOffIcon as sn, VisibilityIcon as an, UnpinFilledIcon as on, DeleteIcon as rn } from "../../icon/icons.generated.es.js";
+import { PinIcon as se, ArrowOutwardIcon as Kt, ArrowUpwardIcon as en, ArrowDownwardIcon as tn, ContentCopyIcon as nn, VisibilityOffIcon as sn, VisibilityIcon as on, UnpinFilledIcon as an, DeleteIcon as rn } from "../../icon/icons.generated.es.js";
 import { SortableTab as tt } from "./SortableTab.es.js";
 import { DropableWrapper as ln } from "./DropableWrapper.es.js";
 import { MoreButton as cn } from "./MoreButton.es.js";
 import { TabOptions as dn } from "./TabOptions.es.js";
 import { TabDragOverlay as un } from "./TabDragOverlay.es.js";
-const mn = () => Math.random().toString(16).slice(2, 13), ae = [
+const mn = () => Math.random().toString(16).slice(2, 13), oe = [
   "[&_.ant-dropdown-menu-item]:!outline-none",
   "[&_.ant-dropdown-menu-submenu-title]:!outline-none",
   "[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-2",
@@ -66,9 +66,9 @@ const Ie = (T) => {
   className: ve,
   draggable: E = !1,
   showAllItems: A = !1,
-  copyLink: at = !1,
-  isDisabled: ot = !1,
-  color: oe = "light",
+  copyLink: ot = !1,
+  isDisabled: at = !1,
+  color: ae = "light",
   iconsOnly: rt = !1,
   tabIcons: re = {},
   height: it = "h-6",
@@ -92,8 +92,8 @@ const Ie = (T) => {
 }) => {
   const x = Yt(), Le = S ? x?.getTabSettings(S) : void 0, le = dt ?? Le?.tab_items, Y = ut ?? Le?.tab_options, [ce, ft] = w(""), [I, J] = w(!1), [U, bt] = w(0), [d, de] = w([]), [q, ht] = w([]), [xt, Q] = w(null), [D, X] = w(null), [gt, Me] = w(!1), [He, Ue] = w(
     Y ?? At
-  ), [ue, wt] = w(""), [ze, kt] = w("contains"), { showCounts: k, lockOrder: z, sortOrder: me } = He, { t: u } = $t(), Z = Te(null), yt = Te(null), Re = Te(U), { measureText: R } = Jt(), W = M(() => mn(), []), Tt = zt(
-    Ze(Rt, { activationConstraint: { distance: 5 } }),
+  ), [ue, wt] = w(""), [Re, kt] = w("contains"), { showCounts: k, lockOrder: R, sortOrder: me } = He, { t: u } = $t(), Z = Te(null), yt = Te(null), ze = Te(U), { measureText: z } = Jt(), W = M(() => mn(), []), Tt = Rt(
+    Ze(zt, { activationConstraint: { distance: 5 } }),
     Ze(Wt, { activationConstraint: { delay: 300, tolerance: 5 } })
   ), p = M(() => $ && Object.fromEntries(
     Object.entries($).map(([e, t]) => [
@@ -104,14 +104,14 @@ const Ie = (T) => {
     () => We.filter(({ name: e }) => {
       if (!ue) return !0;
       const t = (e ?? "").toLowerCase(), s = ue.toLowerCase();
-      return ze === "contains" ? t.includes(s) : !t.includes(s);
+      return Re === "contains" ? t.includes(s) : !t.includes(s);
     }),
-    [We, ue, ze]
-  ), o = M(
+    [We, ue, Re]
+  ), a = M(
     () => [...Pe].sort((e, t) => e.is_pinned && !t.is_pinned ? -1 : !e.is_pinned && t.is_pinned ? 1 : 0),
     [Pe]
-  ), Ct = U < o.length, K = A ? o.length : Ct ? U : o.length, Fe = o.findIndex((e) => e.name === r) >= K, Be = d.length - K - (Fe ? 1 : 0);
-  Re.current = U;
+  ), Ct = U < a.length, K = A ? a.length : Ct ? U : a.length, Fe = a.findIndex((e) => e.name === r) >= K, Be = d.length - K - (Fe ? 1 : 0);
+  ze.current = U;
   const P = v(
     (e) => {
       de(e), Ve?.(e), S && x?.persistTabSettings && x.persistTabSettings({ tab_type: S, tab_items: e });
@@ -125,45 +125,45 @@ const Ie = (T) => {
   ), je = (e) => e.is_pinned ? 32 : 0, pe = v(
     (e) => {
       if (!e) return;
-      const t = E ? 30 : 0, s = k ? 190 : 84, i = O === "sm" ? 4 : 8, a = 32;
+      const t = E ? 30 : 0, s = k ? 190 : 84, i = O === "sm" ? 4 : 8, o = 32;
       let f = 0, te = 0, g = 0;
-      const b = e - (H?.width || 0) - t, Ye = Re.current, Je = Ye < o.length, qe = V.length > 0;
-      for (let h = 0; h < o.length; h++) {
-        const N = o[h], ne = p?.[N.name] ? String(p?.[N.name]) : "", xe = k && ne ? R(ne, {
+      const b = e - (H?.width || 0) - t, Ye = ze.current, Je = Ye < a.length, qe = V.length > 0;
+      for (let h = 0; h < a.length; h++) {
+        const N = a[h], ne = p?.[N.name] ? String(p?.[N.name]) : "", xe = k && ne ? z(ne, {
           fontSize: "16px",
           fontWeight: "500",
           fontFamily: "Inter, system-ui, -apple-system, sans-serif"
-        }) + 18 + 2 : 0, ge = R(N?.name || "", {
+        }) + 18 + 2 : 0, ge = z(N?.name || "", {
           fontSize: "16px",
           fontWeight: "600",
           fontFamily: "Inter, system-ui, -apple-system, sans-serif"
-        }), we = C ? je(N) : 0, Xe = ge + xe + a + i + we;
+        }), we = C ? je(N) : 0, Xe = ge + xe + o + i + we;
         if (N.name === r && (te = Xe), f += Xe, b > f + (Je || qe ? s : 0) + h * 25)
           g = h + 1;
         else
           break;
       }
-      const Qe = o.length - g;
-      if (Qe + V.length === 1 && V.length === 0 && Qe === 1 && g < o.length) {
-        const h = o[g];
+      const Qe = a.length - g;
+      if (Qe + V.length === 1 && V.length === 0 && Qe === 1 && g < a.length) {
+        const h = a[g];
         if (h) {
-          const N = p?.[h.name] ? String(p?.[h.name]) : "", ne = k && N ? R(N, {
+          const N = p?.[h.name] ? String(p?.[h.name]) : "", ne = k && N ? z(N, {
             fontSize: "16px",
             fontWeight: "500",
             fontFamily: "Inter, system-ui, -apple-system, sans-serif"
-          }) + 18 + 2 : 0, xe = R(h?.name || "", {
+          }) + 18 + 2 : 0, xe = z(h?.name || "", {
             fontSize: "16px",
             fontWeight: "600",
             fontFamily: "Inter, system-ui, -apple-system, sans-serif"
-          }), ge = C ? je(h) : 0, we = xe + ne + a + i + ge;
+          }), ge = C ? je(h) : 0, we = xe + ne + o + i + ge;
           b >= f + we && (g += 1);
         }
       }
-      const Ut = A ? o.length : g;
-      o.findIndex((h) => h.name === r) >= Ut && (f += te, b < f + (Je || qe ? s : 0) && (g = Math.max(g - 1, 0))), g !== Ye && bt(g);
+      const Ut = A ? a.length : g;
+      a.findIndex((h) => h.name === r) >= Ut && (f += te, b < f + (Je || qe ? s : 0) && (g = Math.max(g - 1, 0))), g !== Ye && bt(g);
     },
     [
-      o,
+      a,
       k,
       A,
       C,
@@ -173,7 +173,7 @@ const Ie = (T) => {
       O,
       E,
       V.length,
-      R
+      z
     ]
   ), fe = v(
     () => {
@@ -192,12 +192,12 @@ const Ie = (T) => {
   ), F = v(
     (e) => m ? `?${be(fe(), e).toString()}` : void 0,
     [be, fe, m]
-  ), Nt = at || !!m, It = v(
+  ), Nt = ot || !!m, It = v(
     async (e) => {
-      const t = F(e), s = typeof window < "u" ? window.location.origin : "", i = typeof window < "u" ? window.location.pathname : "", a = t ? `${s}${i}${t}` : `${s}${i}`;
-      await navigator.clipboard.writeText(a), Zt.success(u("Link copied to clipboard"), {
+      const t = F(e), s = typeof window < "u" ? window.location.origin : "", i = typeof window < "u" ? window.location.pathname : "", o = t ? `${s}${i}${t}` : `${s}${i}`;
+      await navigator.clipboard.writeText(o), Zt.success(u("Link copied to clipboard"), {
         toastId: "Link copied to clipboard"
-      }), Ee?.(e, a);
+      }), Ee?.(e, o);
     },
     [F, u, Ee]
   ), B = (e) => {
@@ -206,11 +206,11 @@ const Ie = (T) => {
       x.navigate(`?${t.toString()}`);
     }
   }, $e = (e) => {
-    if (o.length <= 1) return;
+    if (a.length <= 1) return;
     const t = d.map(
-      (a) => a.name === e ? { ...a, is_hidden: !0 } : a
-    ), s = o.findIndex((a) => a.name === e), i = s === 0 ? 1 : s - 1;
-    B(o[i].name), P(t);
+      (o) => o.name === e ? { ...o, is_hidden: !0 } : o
+    ), s = a.findIndex((o) => o.name === e), i = s === 0 ? 1 : s - 1;
+    B(a[i].name), P(t);
   }, vt = (e) => {
     const t = d.map(
       (s) => s.name === e ? { ...s, is_hidden: !1 } : s
@@ -223,7 +223,7 @@ const Ie = (T) => {
     );
     P(t);
   }, Ae = (e, t) => {
-    const s = d.findIndex(({ name: a }) => a === e), i = t === "left" ? s - (d[s - 1]?.name === r ? 2 : 1) : s + 1;
+    const s = d.findIndex(({ name: o }) => o === e), i = t === "left" ? s - (d[s - 1]?.name === r ? 2 : 1) : s + 1;
     P(Ke(d, s, i));
   }, Ge = () => J(!I), _t = (e) => X(e.active.id), Ot = (e) => {
     const { active: t, over: s } = e;
@@ -231,8 +231,8 @@ const Ie = (T) => {
       $e(t.id), X(null), Q(null);
       return;
     }
-    const i = d.findIndex(({ name: f }) => f === t.id), a = d.findIndex(({ name: f }) => f === s?.id);
-    P(Ke(d, i, a)), X(null), Q(null);
+    const i = d.findIndex(({ name: f }) => f === t.id), o = d.findIndex(({ name: f }) => f === s?.id);
+    P(Ke(d, i, o)), X(null), Q(null);
   }, Et = () => {
     X(null), Q(null);
   }, Dt = (e) => {
@@ -241,7 +241,7 @@ const Ie = (T) => {
   }, Lt = (e, t) => {
     wt(e), kt(t);
   }, he = (e, t = !1, s = !1) => {
-    const a = d.find((b) => b.name === e)?.is_pinned, f = [
+    const o = d.find((b) => b.name === e)?.is_pinned, f = [
       {
         label: /* @__PURE__ */ n(
           y,
@@ -260,12 +260,12 @@ const Ie = (T) => {
           {
             icon: /* @__PURE__ */ n(en, { size: 18, className: "text-inherit dark:text-inherit" }),
             text: u("Move Up"),
-            isDisabled: z,
+            isDisabled: R,
             className: "text-black-900 dark:text-white"
           }
         ),
         key: c.MOVE_LEFT,
-        disabled: z,
+        disabled: R,
         onClick: () => Ae(e, "left")
       },
       {
@@ -274,12 +274,12 @@ const Ie = (T) => {
           {
             icon: /* @__PURE__ */ n(tn, { size: 18, className: "text-inherit dark:text-inherit" }),
             text: u("Move Down"),
-            isDisabled: z,
+            isDisabled: R,
             className: "text-black-900 dark:text-white"
           }
         ),
         key: c.MOVE_RIGHT,
-        disabled: z,
+        disabled: R,
         onClick: () => Ae(e, "right")
       },
       {
@@ -310,7 +310,7 @@ const Ie = (T) => {
         label: /* @__PURE__ */ n(
           y,
           {
-            icon: /* @__PURE__ */ n(an, { size: 18, className: "text-inherit dark:text-inherit" }),
+            icon: /* @__PURE__ */ n(on, { size: 18, className: "text-inherit dark:text-inherit" }),
             text: u("Unhide"),
             className: "text-black-900 dark:text-white"
           }
@@ -322,13 +322,13 @@ const Ie = (T) => {
         label: /* @__PURE__ */ n(
           y,
           {
-            icon: a ? /* @__PURE__ */ n(on, { size: 20, className: "rotate-12 text-inherit dark:text-inherit" }) : /* @__PURE__ */ n(se, { size: 20, className: "rotate-45 text-inherit dark:text-inherit" }),
-            text: u(a ? "Unpin" : "Pin"),
+            icon: o ? /* @__PURE__ */ n(an, { size: 20, className: "rotate-12 text-inherit dark:text-inherit" }) : /* @__PURE__ */ n(se, { size: 20, className: "rotate-45 text-inherit dark:text-inherit" }),
+            text: u(o ? "Unpin" : "Pin"),
             className: "text-black-900 dark:text-white",
             notVisible: !C
           }
         ),
-        key: a ? c.UNPIN : c.PIN,
+        key: o ? c.UNPIN : c.PIN,
         onClick: () => ee(e)
       },
       {
@@ -360,7 +360,7 @@ const Ie = (T) => {
     ], te = [c.HIDE, c.UNHIDE], g = [c.SELECT, c.MOVE_LEFT, c.MOVE_RIGHT, c.UNHIDE];
     return f.filter(
       (b) => t ? b.key === c.UNHIDE : s ? !te.includes(b.key) : !g.includes(b.key)
-    ).filter((b) => Nt ? !0 : b.key !== c.COPY_LINK).filter((b) => o.length === 1 ? b.key !== c.HIDE : !0);
+    ).filter((b) => Nt ? !0 : b.key !== c.COPY_LINK).filter((b) => a.length === 1 ? b.key !== c.HIDE : !0);
   }, L = (e, t) => ({
     classValue: {
       default: l("relative inline-flex pt-2 pb-3 px-2 pl-3 sm:px-2 rounded-t-sm group"),
@@ -399,7 +399,7 @@ const Ie = (T) => {
       _.forEach((t) => {
         e.find((s) => s.name === t) || e.push({ name: t, is_default: !1, is_hidden: !1, is_pinned: !1 });
       }), e = e.filter(
-        (t, s, i) => _.includes(t.name) && s === i.findIndex((a) => a.name === t.name)
+        (t, s, i) => _.includes(t.name) && s === i.findIndex((o) => o.name === t.name)
       ), de(e);
     } else
       de(
@@ -420,11 +420,11 @@ const Ie = (T) => {
       "aria-orientation": "horizontal",
       className: l(
         "inline-flex grow-0 p-1 rounded-lg",
-        oe === "dark" ? "border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800" : "bg-neutral-100 dark:bg-black-700",
+        ae === "dark" ? "border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800" : "bg-neutral-100 dark:bg-black-700",
         ie ? "w-full" : "w-auto"
       ),
       children: _.map((e) => {
-        const t = r === e, s = re?.[e], i = d.find((f) => f.name === e), a = C && i?.is_pinned;
+        const t = r === e, s = re?.[e], i = d.find((f) => f.name === e), o = C && i?.is_pinned;
         return /* @__PURE__ */ n("li", { role: "presentation", className: l("inline-flex", ie ? "w-full" : "w-auto"), children: /* @__PURE__ */ n(
           Se,
           {
@@ -433,7 +433,7 @@ const Ie = (T) => {
             role: "tab",
             ariaSelected: t,
             tabIndex: 0,
-            icon: a ? /* @__PURE__ */ n(Ce, { title: "Unpin", children: /* @__PURE__ */ n("span", { onClick: () => ee(e), children: /* @__PURE__ */ n(se, { size: 20, className: "rotate-45 text-inherit dark:text-inherit" }) }) }) : s,
+            icon: o ? /* @__PURE__ */ n(Ce, { title: "Unpin", children: /* @__PURE__ */ n("span", { onClick: () => ee(e), children: /* @__PURE__ */ n(se, { className: "rotate-45 w-icon h-icon text-inherit dark:text-inherit" }) }) }) : s,
             iconsOnly: rt,
             classValue: l(
               "relative py-0.5 border-gray-200",
@@ -442,7 +442,7 @@ const Ie = (T) => {
             ),
             selectedClassValue: l(
               "absolute inset-0 rounded-md z-0",
-              oe === "dark" ? "bg-neutral-900" : "bg-white dark:bg-black-800"
+              ae === "dark" ? "bg-neutral-900" : "bg-white dark:bg-black-800"
             ),
             textClassValue: l(
               "relative text-xs font-semibold font-sans whitespace-nowrap",
@@ -450,10 +450,10 @@ const Ie = (T) => {
             ),
             isSelected: t,
             href: F(e),
-            onClick: ot ? void 0 : () => B(e),
+            onClick: at ? void 0 : () => B(e),
             suffixRecord: p,
             selectedId: W,
-            color: oe,
+            color: ae,
             disableAnimation: ct
           }
         ) }, e);
@@ -491,12 +491,12 @@ const Ie = (T) => {
                   st ? /* @__PURE__ */ n("div", { className: "skeleton bg-neutral-300 dark:bg-black-700 animate-pulse h-10 min-w-[100px] w-full rounded" }) : /* @__PURE__ */ ke(
                     Bt,
                     {
-                      items: o.map(({ name: e }) => e),
+                      items: a.map(({ name: e }) => e),
                       strategy: jt,
                       id: "sortable",
-                      disabled: !E || z,
+                      disabled: !E || R,
                       children: [
-                        o.slice(0, K).map(({ name: e, is_pinned: t }) => {
+                        a.slice(0, K).map(({ name: e, is_pinned: t }) => {
                           const s = r === e && !I, i = C && t;
                           return /* @__PURE__ */ n(
                             tt,
@@ -524,7 +524,7 @@ const Ie = (T) => {
                                     {
                                       menu: {
                                         items: he(e),
-                                        className: ae
+                                        className: oe
                                       },
                                       trigger: ["click"],
                                       onOpenChange: Ie,
@@ -572,7 +572,7 @@ const Ie = (T) => {
                               {
                                 menu: {
                                   items: he(r),
-                                  className: ae
+                                  className: oe
                                 },
                                 trigger: ["click"],
                                 onOpenChange: Ie,
@@ -590,7 +590,7 @@ const Ie = (T) => {
                             icon: C && d.find((e) => e.name === r)?.is_pinned ? /* @__PURE__ */ n(Ce, { title: u("Pinned"), children: /* @__PURE__ */ n("span", { onClick: () => ee(r), children: /* @__PURE__ */ n(se, { size: 20, className: "rotate-45 text-inherit dark:text-inherit" }) }) }) : re?.[r] ?? null
                           }
                         ) }, r) }, r) : null,
-                        (U < o.length && !A || V.length > 0) && Be > 0 ? /* @__PURE__ */ n(ln, { id: "more-tabs", children: /* @__PURE__ */ n(
+                        (U < a.length && !A || V.length > 0) && Be > 0 ? /* @__PURE__ */ n(ln, { id: "more-tabs", children: /* @__PURE__ */ n(
                           ye,
                           {
                             overlayStyle: {
@@ -619,7 +619,7 @@ const Ie = (T) => {
                                     }
                                   ) })
                                 },
-                                ...o.slice(K).filter((e) => e.name !== r).concat(V).filter(
+                                ...a.slice(K).filter((e) => e.name !== r).concat(V).filter(
                                   ({ name: e }) => typeof e == "string" && (e ?? "").toLowerCase().includes(ce.toLowerCase())
                                 ).map(({ name: e, is_hidden: t }) => ({
                                   key: e,
@@ -640,11 +640,11 @@ const Ie = (T) => {
                                       }
                                     }
                                   ),
-                                  popupClassName: ae,
+                                  popupClassName: oe,
                                   children: I ? he(e, t, !0) : null
                                 }))
                               ],
-                              className: ae
+                              className: oe
                             },
                             openClassName: "max-h-[350px] overflow-y-auto",
                             trigger: ["click"],