@lax-wp/design-system 0.14.39 → 0.14.41

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

@@ -1,29 +1,29 @@
-import { jsx as n, jsxs as ke } from "react/jsx-runtime";
-import { useSensors as Rt, useSensor as Ze, MouseSensor as Wt, TouchSensor as Pt, DndContext as Ft, closestCenter as zt } 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 { jsx as n, jsxs as Ce } from "react/jsx-runtime";
+import { useSensors as Ft, useSensor as tt, MouseSensor as Bt, TouchSensor as zt, DndContext as jt, closestCenter as $t } from "@dnd-kit/core";
+import { SortableContext as At, horizontalListSortingStrategy as Gt, arrayMove as nt } from "@dnd-kit/sortable";
+import { Dropdown as Te } from "antd";
 import l from "../../../_virtual/index.es.js";
-import { useState as w, useRef as Te, useMemo as M, useCallback as v, useEffect as j } from "react";
-import { useTranslation as $t } from "react-i18next";
-import et from "@mui/icons-material/MoreHorizOutlined";
-import { INITIAL_TAB_OPTION_CONFIG as At } from "./types.es.js";
-import { formatCount as Gt } from "../../../utils/formatters.es.js";
-import { useTabConfig as Yt } from "../../../providers/design-system-provider/hooks.es.js";
-import { useTextWidth as Jt } from "../../../hooks/useTextWidth.es.js";
-import qt from "../../button/IconButton.es.js";
+import { useState as w, useRef as Se, useMemo as U, useCallback as I, useEffect as $ } from "react";
+import { useTranslation as Yt } from "react-i18next";
+import ot from "@mui/icons-material/MoreHorizOutlined";
+import { INITIAL_TAB_OPTION_CONFIG as Jt } from "./types.es.js";
+import { formatCount as qt } from "../../../utils/formatters.es.js";
+import { useTabConfig as Qt } from "../../../providers/design-system-provider/hooks.es.js";
+import { useTextWidth as Xt } from "../../../hooks/useTextWidth.es.js";
+import Zt from "../../button/IconButton.es.js";
 import { OptionButton as y } from "../../buttons/option-button/OptionButton.es.js";
-import { SearchBar as Qt } from "../../forms/search-bar/SearchBar.es.js";
-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 oe, ArrowOutwardIcon as Kt, ArrowUpwardIcon as en, ArrowDownwardIcon as tn, ContentCopyIcon as nn, VisibilityOffIcon as on, VisibilityIcon as sn, 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), se = [
+import { SearchBar as Kt } from "../../forms/search-bar/SearchBar.es.js";
+import Ne from "../../tooltip/Tooltip.es.js";
+import { EditIcon as en } from "../../icons/EditIcon.es.js";
+import { toast as tn } from "react-toastify";
+import { TabSwitch as ve } from "./TabSwitch.es.js";
+import { PinIcon as se, ArrowOutwardIcon as nn, ArrowUpwardIcon as on, ArrowDownwardIcon as sn, ContentCopyIcon as rn, VisibilityOffIcon as an, VisibilityIcon as ln, UnpinFilledIcon as cn, DeleteIcon as dn } from "../../icon/icons.generated.es.js";
+import { SortableTab as st } from "./SortableTab.es.js";
+import { DropableWrapper as un } from "./DropableWrapper.es.js";
+import { MoreButton as mn } from "./MoreButton.es.js";
+import { TabOptions as pn } from "./TabOptions.es.js";
+import { TabDragOverlay as fn } from "./TabDragOverlay.es.js";
+const hn = () => Math.random().toString(16).slice(2, 13), ie = [
   "[&_.ant-dropdown-menu-item]:!outline-none",
   "[&_.ant-dropdown-menu-submenu-title]:!outline-none",
   "[&_.ant-dropdown-menu-item:focus-visible_.option-button-inner]:ring-2",
@@ -35,14 +35,14 @@ const mn = () => Math.random().toString(16).slice(2, 13), se = [
   "[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:bg-gray-50",
   "[&_.ant-dropdown-menu-submenu-title:focus-visible_.option-button-inner]:dark:bg-black-600"
 ].join(" ");
-let Ne = null;
-const Ie = (T) => {
-  T ? (Ne = document.activeElement, setTimeout(() => {
+let Ie = null;
+const _e = (T) => {
+  T ? (Ie = document.activeElement, setTimeout(() => {
     document.querySelector(
       ".row-option-cell .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled), .row-option-cell .ant-dropdown-menu-submenu-title"
     )?.focus();
   }, 50)) : setTimeout(() => {
-    Ne?.focus(), Ne = null;
+    Ie?.focus(), Ie = null;
   }, 0);
 }, c = {
   SELECT: "Select",
@@ -55,127 +55,129 @@ const Ie = (T) => {
   PIN: "Pin",
   UNPIN: "Unpin",
   EDIT: "Edit"
-}, Fn = ({
+}, jn = ({
   variant: T = "default",
-  tabs: _ = [],
-  activeTab: i,
-  onTabClick: nt,
-  suffixRecord: $,
-  isLoading: ot,
-  size: O = "md",
-  className: ve,
-  draggable: E = !1,
-  showAllItems: A = !1,
-  copyLink: st = !1,
-  isDisabled: at = !1,
-  color: ae = "light",
-  iconsOnly: it = !1,
-  tabIcons: ie = {},
-  height: rt = "h-6",
-  fullWidth: re = !1,
-  fitContentWidth: lt = !1,
-  disableAnimation: ct = !1,
-  onEdit: _e,
-  onDelete: Oe,
-  onCopyLink: Ee,
-  allowPin: C = !1,
-  isFullWidth: G = !1,
+  tabs: O = [],
+  activeTab: r,
+  onTabClick: it,
+  suffixRecord: A,
+  isLoading: rt,
+  size: E = "md",
+  className: Oe,
+  draggable: D = !1,
+  showAllItems: G = !1,
+  copyLink: at = !1,
+  isDisabled: lt = !1,
+  color: re = "light",
+  iconsOnly: ct = !1,
+  tabIcons: ae = {},
+  height: dt = "h-6",
+  fullWidth: le = !1,
+  fitContentWidth: ut = !1,
+  disableAnimation: mt = !1,
+  onEdit: Ee,
+  onDelete: De,
+  onCopyLink: Ve,
+  allowPin: S = !1,
+  isFullWidth: Y = !1,
   rightSection: H,
-  initialTabs: dt,
-  tabConfig: ut,
-  onTabConfigChange: De,
-  onTabsChange: Ve,
-  parentContainer: mt = document.body,
-  tabKey: S,
+  initialTabs: pt,
+  tabConfig: ft,
+  onTabConfigChange: Le,
+  onTabsChange: Me,
+  parentContainer: ht = document.body,
+  tabKey: N,
   linkConfig: m,
-  showTabOptions: pt = !0
+  showTabOptions: bt = !0,
+  lockedTabs: Ue,
+  lockedTabTooltip: ce
 }) => {
-  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, ht] = w(0), [d, de] = w([]), [q, bt] = w([]), [xt, Q] = w(null), [D, X] = w(null), [gt, Me] = w(!1), [He, Ue] = w(
-    Y ?? At
-  ), [ue, wt] = w(""), [Re, kt] = w("contains"), { showCounts: k, lockOrder: R, sortOrder: me } = He, { t: u } = $t(), Z = Te(null), yt = Te(null), We = Te(U), { measureText: W } = Jt(), P = M(() => mn(), []), Tt = Rt(
-    Ze(Wt, { activationConstraint: { distance: 5 } }),
-    Ze(Pt, { activationConstraint: { delay: 300, tolerance: 5 } })
-  ), p = M(() => $ && Object.fromEntries(
-    Object.entries($).map(([e, t]) => [
+  const x = Qt(), He = N ? x?.getTabSettings(N) : void 0, de = pt ?? He?.tab_items, J = ft ?? He?.tab_options, [ue, xt] = w(""), [_, q] = w(!1), [R, gt] = w(0), [d, me] = w([]), [Q, wt] = w([]), [kt, X] = w(null), [V, Z] = w(null), [yt, Re] = w(!1), [We, Pe] = w(
+    J ?? Jt
+  ), [pe, Ct] = w(""), [Fe, Tt] = w("contains"), { showCounts: k, lockOrder: W, sortOrder: fe } = We, { t: u } = Yt(), K = Se(null), St = Se(null), Be = Se(R), { measureText: P } = Xt(), F = U(() => hn(), []), Nt = Ft(
+    tt(Bt, { activationConstraint: { distance: 5 } }),
+    tt(zt, { activationConstraint: { delay: 300, tolerance: 5 } })
+  ), p = U(() => A && Object.fromEntries(
+    Object.entries(A).map(([e, t]) => [
       e,
-      Gt(t)
+      qt(t)
     ])
-  ), [$]), Pe = M(() => q.filter(({ is_hidden: e }) => !e), [q]), V = M(() => q.filter(({ is_hidden: e }) => e), [q]), Fe = M(
-    () => Pe.filter(({ name: e }) => {
-      if (!ue) return !0;
-      const t = (e ?? "").toLowerCase(), o = ue.toLowerCase();
-      return Re === "contains" ? t.includes(o) : !t.includes(o);
+  ), [A]), ze = U(() => Q.filter(({ is_hidden: e }) => !e), [Q]), L = U(() => Q.filter(({ is_hidden: e }) => e), [Q]), je = U(
+    () => ze.filter(({ name: e }) => {
+      if (!pe) return !0;
+      const t = (e ?? "").toLowerCase(), o = pe.toLowerCase();
+      return Fe === "contains" ? t.includes(o) : !t.includes(o);
     }),
-    [Pe, ue, Re]
-  ), a = M(
-    () => [...Fe].sort((e, t) => e.is_pinned && !t.is_pinned ? -1 : !e.is_pinned && t.is_pinned ? 1 : 0),
-    [Fe]
-  ), Ct = U < a.length, K = A ? a.length : Ct ? U : a.length, ze = a.findIndex((e) => e.name === i) >= K, Be = d.length - K - (ze ? 1 : 0);
-  We.current = U;
-  const F = v(
+    [ze, pe, Fe]
+  ), a = U(
+    () => [...je].sort((e, t) => e.is_pinned && !t.is_pinned ? -1 : !e.is_pinned && t.is_pinned ? 1 : 0),
+    [je]
+  ), vt = R < a.length, ee = G ? a.length : vt ? R : a.length, $e = a.findIndex((e) => e.name === r) >= ee, Ae = d.length - ee - ($e ? 1 : 0);
+  Be.current = R;
+  const B = I(
     (e) => {
-      de(e), Ve?.(e), S && x?.persistTabSettings && x.persistTabSettings({ tab_type: S, tab_items: e });
+      me(e), Me?.(e), N && x?.persistTabSettings && x.persistTabSettings({ tab_type: N, tab_items: e });
     },
-    [Ve, S, x]
-  ), St = v(
+    [Me, N, x]
+  ), It = I(
     (e) => {
-      Ue(e), De?.(e), S && x?.persistTabSettings && x.persistTabSettings({ tab_type: S, tab_options: e });
+      Pe(e), Le?.(e), N && x?.persistTabSettings && x.persistTabSettings({ tab_type: N, tab_options: e });
     },
-    [De, S, x]
-  ), je = (e) => e.is_pinned ? 32 : 0, pe = v(
+    [Le, N, x]
+  ), Ge = (e) => e.is_pinned ? 32 : 0, he = I(
     (e) => {
       if (!e) return;
-      const t = E ? 30 : 0, o = k ? 190 : 84, r = O === "sm" ? 4 : 8, s = 32;
-      let f = 0, te = 0, g = 0;
-      const h = e - (H?.width || 0) - t, Ye = We.current, Je = Ye < a.length, qe = V.length > 0;
+      const t = D ? 30 : 0, o = k ? 190 : 84, s = E === "sm" ? 4 : 8, i = 32;
+      let f = 0, ne = 0, g = 0;
+      const h = e - (H?.width || 0) - t, Qe = Be.current, Xe = Qe < a.length, Ze = L.length > 0;
       for (let b = 0; b < a.length; b++) {
-        const N = a[b], ne = p?.[N.name] ? String(p?.[N.name]) : "", xe = k && ne ? W(ne, {
+        const v = a[b], oe = p?.[v.name] ? String(p?.[v.name]) : "", we = k && oe ? P(oe, {
           fontSize: "16px",
           fontWeight: "500",
           fontFamily: "Inter, system-ui, -apple-system, sans-serif"
-        }) + 18 + 2 : 0, ge = W(N?.name || "", {
+        }) + 18 + 2 : 0, ke = P(v?.name || "", {
           fontSize: "16px",
           fontWeight: "600",
           fontFamily: "Inter, system-ui, -apple-system, sans-serif"
-        }), we = C ? je(N) : 0, Xe = ge + xe + s + r + we;
-        if (N.name === i && (te = Xe), f += Xe, h > f + (Je || qe ? o : 0) + b * 25)
+        }), ye = S ? Ge(v) : 0, et = ke + we + i + s + ye;
+        if (v.name === r && (ne = et), f += et, h > f + (Xe || Ze ? o : 0) + b * 25)
           g = b + 1;
         else
           break;
       }
-      const Qe = a.length - g;
-      if (Qe + V.length === 1 && V.length === 0 && Qe === 1 && g < a.length) {
+      const Ke = a.length - g;
+      if (Ke + L.length === 1 && L.length === 0 && Ke === 1 && g < a.length) {
         const b = a[g];
         if (b) {
-          const N = p?.[b.name] ? String(p?.[b.name]) : "", ne = k && N ? W(N, {
+          const v = p?.[b.name] ? String(p?.[b.name]) : "", oe = k && v ? P(v, {
             fontSize: "16px",
             fontWeight: "500",
             fontFamily: "Inter, system-ui, -apple-system, sans-serif"
-          }) + 18 + 2 : 0, xe = W(b?.name || "", {
+          }) + 18 + 2 : 0, we = P(b?.name || "", {
             fontSize: "16px",
             fontWeight: "600",
             fontFamily: "Inter, system-ui, -apple-system, sans-serif"
-          }), ge = C ? je(b) : 0, we = xe + ne + s + r + ge;
-          h >= f + we && (g += 1);
+          }), ke = S ? Ge(b) : 0, ye = we + oe + i + s + ke;
+          h >= f + ye && (g += 1);
         }
       }
-      const Ut = A ? a.length : g;
-      a.findIndex((b) => b.name === i) >= Ut && (f += te, h < f + (Je || qe ? o : 0) && (g = Math.max(g - 1, 0))), g !== Ye && ht(g);
+      const Pt = G ? a.length : g;
+      a.findIndex((b) => b.name === r) >= Pt && (f += ne, h < f + (Xe || Ze ? o : 0) && (g = Math.max(g - 1, 0))), g !== Qe && gt(g);
     },
     [
       a,
       k,
-      A,
-      C,
+      G,
+      S,
       p,
       H?.width,
-      i,
-      O,
+      r,
       E,
-      V.length,
-      W
+      D,
+      L.length,
+      P
     ]
-  ), fe = v(
+  ), be = I(
     () => {
       if (typeof window < "u")
         return new URLSearchParams(window.location.search);
@@ -186,187 +188,190 @@ const Ie = (T) => {
       return new URLSearchParams();
     },
     [m, x]
-  ), he = v(
+  ), xe = I(
     (e, t) => (m && (t === m.defaultLink ? e.delete(m.key) : e.set(m.key, t), m.onResolve?.(e)), e),
     [m]
-  ), z = v(
-    (e) => m ? `?${he(fe(), e).toString()}` : void 0,
-    [he, fe, m]
-  ), Nt = st || !!m, It = v(
+  ), z = I(
+    (e) => m ? `?${xe(be(), e).toString()}` : void 0,
+    [xe, be, m]
+  ), _t = at || !!m, Ot = I(
     async (e) => {
-      const t = z(e), o = typeof window < "u" ? window.location.origin : "", r = typeof window < "u" ? window.location.pathname : "", s = t ? `${o}${r}${t}` : `${o}${r}`;
-      await navigator.clipboard.writeText(s), Zt.success(u("Link copied to clipboard"), {
+      const t = z(e), o = typeof window < "u" ? window.location.origin : "", s = typeof window < "u" ? window.location.pathname : "", i = t ? `${o}${s}${t}` : `${o}${s}`;
+      await navigator.clipboard.writeText(i), tn.success(u("Link copied to clipboard"), {
         toastId: "Link copied to clipboard"
-      }), Ee?.(e, s);
+      }), Ve?.(e, i);
     },
-    [z, u, Ee]
-  ), B = (e) => {
-    if (J(!1), nt?.(e), m && x?.navigate) {
-      const t = he(fe(), e);
+    [z, u, Ve]
+  ), C = I(
+    (e) => !!Ue?.includes(e),
+    [Ue]
+  ), j = (e) => {
+    if (!C(e) && (q(!1), it?.(e), m && x?.navigate)) {
+      const t = xe(be(), e);
       x.navigate(`?${t.toString()}`);
     }
-  }, $e = (e) => {
+  }, Ye = (e) => {
     if (a.length <= 1) return;
     const t = d.map(
-      (s) => s.name === e ? { ...s, is_hidden: !0 } : s
-    ), o = a.findIndex((s) => s.name === e), r = o === 0 ? 1 : o - 1;
-    B(a[r].name), F(t);
-  }, vt = (e) => {
+      (i) => i.name === e ? { ...i, is_hidden: !0 } : i
+    ), o = a.findIndex((i) => i.name === e), s = o === 0 ? 1 : o - 1;
+    j(a[s].name), B(t);
+  }, Et = (e) => {
     const t = d.map(
       (o) => o.name === e ? { ...o, is_hidden: !1 } : o
     );
-    J(!1), F(t);
-  }, ee = (e) => {
-    if (!C) return;
+    q(!1), B(t);
+  }, te = (e) => {
+    if (!S) return;
     const t = d.map(
       (o) => o.name === e ? { ...o, is_pinned: !o.is_pinned } : o
     );
-    F(t);
-  }, Ae = (e, t) => {
-    const o = d.findIndex(({ name: s }) => s === e), r = t === "left" ? o - (d[o - 1]?.name === i ? 2 : 1) : o + 1;
-    F(Ke(d, o, r));
-  }, Ge = () => J(!I), _t = (e) => X(e.active.id), Ot = (e) => {
+    B(t);
+  }, Je = (e, t) => {
+    const o = d.findIndex(({ name: i }) => i === e), s = t === "left" ? o - (d[o - 1]?.name === r ? 2 : 1) : o + 1;
+    B(nt(d, o, s));
+  }, qe = () => q(!_), Dt = (e) => Z(e.active.id), Vt = (e) => {
     const { active: t, over: o } = e;
     if (o?.id === "more-tabs") {
-      $e(t.id), X(null), Q(null);
+      Ye(t.id), Z(null), X(null);
       return;
     }
-    const r = d.findIndex(({ name: f }) => f === t.id), s = d.findIndex(({ name: f }) => f === o?.id);
-    F(Ke(d, r, s)), X(null), Q(null);
-  }, Et = () => {
-    X(null), Q(null);
-  }, Dt = (e) => {
-    Q(e.over?.id === "more-tabs" ? "more-tabs" : null);
-  }, Vt = () => {
-  }, Lt = (e, t) => {
-    wt(e), kt(t);
-  }, be = (e, t = !1, o = !1) => {
-    const s = d.find((h) => h.name === e)?.is_pinned, f = [
+    const s = d.findIndex(({ name: f }) => f === t.id), i = d.findIndex(({ name: f }) => f === o?.id);
+    B(nt(d, s, i)), Z(null), X(null);
+  }, Lt = () => {
+    Z(null), X(null);
+  }, Mt = (e) => {
+    X(e.over?.id === "more-tabs" ? "more-tabs" : null);
+  }, Ut = () => {
+  }, Ht = (e, t) => {
+    Ct(e), Tt(t);
+  }, ge = (e, t = !1, o = !1) => {
+    const i = d.find((h) => h.name === e)?.is_pinned, f = [
       {
         label: /* @__PURE__ */ n(
           y,
           {
-            icon: /* @__PURE__ */ n(Kt, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
+            icon: /* @__PURE__ */ n(nn, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
             text: u("Select Tab"),
             className: "text-black-900 dark:text-white"
           }
         ),
         key: c.SELECT,
-        onClick: () => B(e)
+        onClick: () => j(e)
       },
       {
         label: /* @__PURE__ */ n(
           y,
           {
-            icon: /* @__PURE__ */ n(en, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
+            icon: /* @__PURE__ */ n(on, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
             text: u("Move Up"),
-            isDisabled: R,
+            isDisabled: W,
             className: "text-black-900 dark:text-white"
           }
         ),
         key: c.MOVE_LEFT,
-        disabled: R,
-        onClick: () => Ae(e, "left")
+        disabled: W,
+        onClick: () => Je(e, "left")
       },
       {
         label: /* @__PURE__ */ n(
           y,
           {
-            icon: /* @__PURE__ */ n(tn, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
+            icon: /* @__PURE__ */ n(sn, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
             text: u("Move Down"),
-            isDisabled: R,
+            isDisabled: W,
             className: "text-black-900 dark:text-white"
           }
         ),
         key: c.MOVE_RIGHT,
-        disabled: R,
-        onClick: () => Ae(e, "right")
+        disabled: W,
+        onClick: () => Je(e, "right")
       },
       {
         label: /* @__PURE__ */ n(
           y,
           {
-            icon: /* @__PURE__ */ n(nn, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
+            icon: /* @__PURE__ */ n(rn, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
             text: u("Copy Link"),
             className: "text-black-900 dark:text-white"
           }
         ),
         key: c.COPY_LINK,
-        onClick: () => It(e)
+        onClick: () => Ot(e)
       },
       {
         label: /* @__PURE__ */ n(
           y,
           {
-            icon: /* @__PURE__ */ n(on, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
+            icon: /* @__PURE__ */ n(an, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
             text: u("Hide"),
             className: "text-black-900 dark:text-white"
           }
         ),
         key: c.HIDE,
-        onClick: () => $e(e)
+        onClick: () => Ye(e)
       },
       {
         label: /* @__PURE__ */ n(
           y,
           {
-            icon: /* @__PURE__ */ n(sn, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
+            icon: /* @__PURE__ */ n(ln, { className: "w-icon h-icon text-inherit dark:text-inherit" }),
             text: u("Unhide"),
             className: "text-black-900 dark:text-white"
           }
         ),
         key: c.UNHIDE,
-        onClick: () => vt(e)
+        onClick: () => Et(e)
       },
       {
         label: /* @__PURE__ */ n(
           y,
           {
-            icon: s ? /* @__PURE__ */ n(an, { className: "w-icon h-icon rotate-12 text-inherit dark:text-inherit" }) : /* @__PURE__ */ n(oe, { className: "w-icon h-icon rotate-45 text-inherit dark:text-inherit" }),
-            text: u(s ? "Unpin" : "Pin"),
+            icon: i ? /* @__PURE__ */ n(cn, { className: "w-icon h-icon rotate-12 text-inherit dark:text-inherit" }) : /* @__PURE__ */ n(se, { className: "w-icon h-icon rotate-45 text-inherit dark:text-inherit" }),
+            text: u(i ? "Unpin" : "Pin"),
             className: "text-black-900 dark:text-white",
-            notVisible: !C
+            notVisible: !S
           }
         ),
-        key: s ? c.UNPIN : c.PIN,
-        onClick: () => ee(e)
+        key: i ? c.UNPIN : c.PIN,
+        onClick: () => te(e)
       },
       {
         label: /* @__PURE__ */ n(
           y,
           {
             className: "text-black-900 dark:text-white",
-            icon: /* @__PURE__ */ n(Xt, { className: "w-icon h-icon" }),
+            icon: /* @__PURE__ */ n(en, { className: "w-icon h-icon" }),
             text: u("Edit"),
-            notVisible: !_e
+            notVisible: !Ee
           }
         ),
         key: c.EDIT,
-        onClick: () => _e?.(e)
+        onClick: () => Ee?.(e)
       },
       {
         label: /* @__PURE__ */ n(
           y,
           {
             className: "text-error-600 dark:text-error-600",
-            icon: /* @__PURE__ */ n(rn, { className: "w-icon h-icon text-error-600 dark:text-error-600" }),
+            icon: /* @__PURE__ */ n(dn, { className: "w-icon h-icon text-error-600 dark:text-error-600" }),
             text: u("Delete"),
-            notVisible: !Oe
+            notVisible: !De
           }
         ),
         key: c.DELETE,
-        onClick: () => Oe?.(e)
+        onClick: () => De?.(e)
       }
-    ], te = [c.HIDE, c.UNHIDE], g = [c.SELECT, c.MOVE_LEFT, c.MOVE_RIGHT, c.UNHIDE];
+    ], ne = [c.HIDE, c.UNHIDE], g = [c.SELECT, c.MOVE_LEFT, c.MOVE_RIGHT, c.UNHIDE];
     return f.filter(
-      (h) => t ? h.key === c.UNHIDE : o ? !te.includes(h.key) : !g.includes(h.key)
-    ).filter((h) => Nt ? !0 : h.key !== c.COPY_LINK).filter((h) => a.length === 1 ? h.key !== c.HIDE : !0);
-  }, L = (e, t) => ({
+      (h) => t ? h.key === c.UNHIDE : o ? !ne.includes(h.key) : !g.includes(h.key)
+    ).filter((h) => _t ? !0 : h.key !== c.COPY_LINK).filter((h) => a.length === 1 ? h.key !== c.HIDE : !0);
+  }, M = (e, t) => ({
     classValue: {
       default: l("relative inline-flex pt-2 pb-3 px-2 pl-3 sm:px-2 rounded-t-sm group"),
       secondary: l(
         "flex w-full sm:w-auto relative rounded-lg font-sans font-semibold text-center cursor-pointer uppercase",
-        O === "sm" ? "py-1 px-3 text-sm" : "py-2 px-4 text-base"
+        E === "sm" ? "py-1 px-3 text-sm" : "py-2 px-4 text-base"
       )
     },
     selectedClassValue: {
@@ -384,77 +389,79 @@ const Ie = (T) => {
       )
     }
   })[e][T];
-  j(() => {
-    if (!Z.current || T === "switch") return;
+  $(() => {
+    if (!K.current || T === "switch") return;
     const e = new ResizeObserver((t) => {
       const o = t[0].contentRect.width;
-      pe(o);
+      he(o);
     });
-    return e.observe(Z.current), pe(Z.current.clientWidth), () => e.disconnect();
-  }, [pe, T]);
-  const Mt = JSON.stringify(_), Ht = JSON.stringify(le?.map(({ name: e }) => e));
-  return j(() => {
-    if (le?.length) {
-      let e = [...le];
-      _.forEach((t) => {
+    return e.observe(K.current), he(K.current.clientWidth), () => e.disconnect();
+  }, [he, T]);
+  const Rt = JSON.stringify(O), Wt = JSON.stringify(de?.map(({ name: e }) => e));
+  return $(() => {
+    if (de?.length) {
+      let e = [...de];
+      O.forEach((t) => {
         e.find((o) => o.name === t) || e.push({ name: t, is_default: !1, is_hidden: !1, is_pinned: !1 });
       }), e = e.filter(
-        (t, o, r) => _.includes(t.name) && o === r.findIndex((s) => s.name === t.name)
-      ), de(e);
+        (t, o, s) => O.includes(t.name) && o === s.findIndex((i) => i.name === t.name)
+      ), me(e);
     } else
-      de(
-        _.map((e) => ({ name: e, is_default: !1, is_hidden: !1, is_pinned: !1 })).filter((e, t, o) => t === o.findIndex((r) => r.name === e.name))
+      me(
+        O.map((e) => ({ name: e, is_default: !1, is_hidden: !1, is_pinned: !1 })).filter((e, t, o) => t === o.findIndex((s) => s.name === e.name))
       );
-  }, [Mt, Ht]), j(() => {
-    Y && Ue(Y);
-  }, [Y]), j(() => {
+  }, [Rt, Wt]), $(() => {
+    J && Pe(J);
+  }, [J]), $(() => {
     if (!d.length) return;
     const e = [...d];
-    me === "asc" ? e.sort((t, o) => t.name.localeCompare(o.name)) : me === "desc" && e.sort((t, o) => o.name.localeCompare(t.name)), bt(e);
-  }, [d, me]), j(() => {
-    Ie(I);
-  }, [I]), T === "switch" ? /* @__PURE__ */ n("div", { className: l("inline", ve), children: /* @__PURE__ */ n(
+    fe === "asc" ? e.sort((t, o) => t.name.localeCompare(o.name)) : fe === "desc" && e.sort((t, o) => o.name.localeCompare(t.name)), wt(e);
+  }, [d, fe]), $(() => {
+    _e(_);
+  }, [_]), T === "switch" ? /* @__PURE__ */ n("div", { className: l("inline", Oe), children: /* @__PURE__ */ n(
     "ul",
     {
       role: "tablist",
       "aria-orientation": "horizontal",
       className: l(
         "inline-flex grow-0 p-1 rounded-lg",
-        ae === "dark" ? "border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800" : "bg-neutral-100 dark:bg-black-700",
-        re ? "w-full" : "w-auto"
+        re === "dark" ? "border-[1.5px] border-neutral-800 bg-neutral-800 dark:border-black-800" : "bg-neutral-100 dark:bg-black-700",
+        le ? "w-full" : "w-auto"
       ),
-      children: _.map((e) => {
-        const t = i === e, o = ie?.[e], r = d.find((f) => f.name === e), s = C && r?.is_pinned;
-        return /* @__PURE__ */ n("li", { role: "presentation", className: l("inline-flex", re ? "w-full" : "w-auto"), children: /* @__PURE__ */ n(
-          Se,
+      children: O.map((e) => {
+        const t = r === e, o = ae?.[e], s = d.find((f) => f.name === e), i = S && s?.is_pinned;
+        return /* @__PURE__ */ n("li", { role: "presentation", className: l("inline-flex", le ? "w-full" : "w-auto"), children: /* @__PURE__ */ n(
+          ve,
           {
             title: e,
             showCounts: k,
             role: "tab",
             ariaSelected: t,
             tabIndex: 0,
-            icon: s ? /* @__PURE__ */ n(Ce, { title: "Unpin", children: /* @__PURE__ */ n("span", { onClick: () => ee(e), children: /* @__PURE__ */ n(oe, { className: "rotate-45 w-icon h-icon text-inherit dark:text-inherit" }) }) }) : o,
-            iconsOnly: it,
+            icon: i ? /* @__PURE__ */ n(Ne, { title: "Unpin", children: /* @__PURE__ */ n("span", { onClick: () => te(e), children: /* @__PURE__ */ n(se, { className: "rotate-45 w-icon h-icon text-inherit dark:text-inherit" }) }) }) : o,
+            iconsOnly: ct,
             classValue: l(
               "relative py-0.5 border-gray-200",
-              rt,
-              re ? "w-full flex items-center justify-center" : "px-2"
+              dt,
+              le ? "w-full flex items-center justify-center" : "px-2"
             ),
             selectedClassValue: l(
               "absolute inset-0 rounded-md z-0",
-              ae === "dark" ? "bg-neutral-900" : "bg-white dark:bg-black-800"
+              re === "dark" ? "bg-neutral-900" : "bg-white dark:bg-black-800"
             ),
             textClassValue: l(
               "relative text-xs font-semibold font-sans whitespace-nowrap",
               t ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-700 dark:text-neutral-100"
             ),
             isSelected: t,
-            href: z(e),
-            onClick: at ? void 0 : () => B(e),
+            isLocked: C(e),
+            lockedTooltip: ce,
+            href: C(e) ? void 0 : z(e),
+            onClick: !lt && !C(e) ? () => j(e) : void 0,
             suffixRecord: p,
-            selectedId: P,
-            color: ae,
-            disableAnimation: ct
+            selectedId: F,
+            color: re,
+            disableAnimation: mt
           }
         ) }, e);
       })
@@ -462,50 +469,50 @@ const Ie = (T) => {
   ) }) : /* @__PURE__ */ n(
     "div",
     {
-      ref: Z,
-      className: l(lt ? "w-fit" : "w-full"),
-      onMouseEnter: () => Me(!0),
-      onMouseLeave: () => Me(!1),
-      children: /* @__PURE__ */ ke(
-        Ft,
+      ref: K,
+      className: l(ut ? "w-fit" : "w-full"),
+      onMouseEnter: () => Re(!0),
+      onMouseLeave: () => Re(!1),
+      children: /* @__PURE__ */ Ce(
+        jt,
         {
-          sensors: Tt,
-          onDragEnd: Ot,
-          onDragStart: _t,
-          onDragCancel: Et,
-          collisionDetection: zt,
-          onDragOver: Dt,
+          sensors: Nt,
+          onDragEnd: Vt,
+          onDragStart: Dt,
+          onDragCancel: Lt,
+          collisionDetection: $t,
+          onDragOver: Mt,
           children: [
-            /* @__PURE__ */ ke(
+            /* @__PURE__ */ Ce(
               "ul",
               {
                 role: "tablist",
                 "aria-orientation": "horizontal",
                 className: l(
                   "flex items-center w-full",
-                  ve,
-                  G ? "gap-0" : O === "sm" ? "gap-1" : "gap-2"
+                  Oe,
+                  Y ? "gap-0" : E === "sm" ? "gap-1" : "gap-2"
                 ),
-                ref: yt,
+                ref: St,
                 children: [
-                  ot ? /* @__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,
+                  rt ? /* @__PURE__ */ n("div", { className: "skeleton bg-neutral-300 dark:bg-black-700 animate-pulse h-10 min-w-[100px] w-full rounded" }) : /* @__PURE__ */ Ce(
+                    At,
                     {
                       items: a.map(({ name: e }) => e),
-                      strategy: jt,
+                      strategy: Gt,
                       id: "sortable",
-                      disabled: !E || R,
+                      disabled: !D || W,
                       children: [
-                        a.slice(0, K).map(({ name: e, is_pinned: t }) => {
-                          const o = i === e && !I, r = C && t;
+                        a.slice(0, ee).map(({ name: e, is_pinned: t }) => {
+                          const o = r === e && !_, s = S && t;
                           return /* @__PURE__ */ n(
-                            tt,
+                            st,
                             {
                               title: e,
-                              isDragging: D === e,
-                              className: G ? "flex-1 flex justify-center" : "",
-                              children: /* @__PURE__ */ n("li", { role: "presentation", className: l(G ? "w-full flex" : "sm:mr-2"), children: /* @__PURE__ */ n(
-                                Se,
+                              isDragging: V === e,
+                              className: Y ? "flex-1 flex justify-center" : "",
+                              children: /* @__PURE__ */ n("li", { role: "presentation", className: l(Y ? "w-full flex" : "sm:mr-2"), children: /* @__PURE__ */ n(
+                                ve,
                                 {
                                   showCounts: k,
                                   title: e,
@@ -513,85 +520,89 @@ const Ie = (T) => {
                                   ariaSelected: o,
                                   tabIndex: 0,
                                   classValue: l(
-                                    L("classValue", o),
-                                    G ? "w-full justify-center" : ""
+                                    M("classValue", o),
+                                    Y ? "w-full justify-center" : ""
                                   ),
-                                  selectedClassValue: L("selectedClassValue", o),
-                                  textClassValue: L("textClassValue", o),
+                                  selectedClassValue: M("selectedClassValue", o),
+                                  textClassValue: M("textClassValue", o),
                                   isSelected: o,
-                                  tabOptions: o && E ? /* @__PURE__ */ n(
-                                    ye,
+                                  tabOptions: o && D ? /* @__PURE__ */ n(
+                                    Te,
                                     {
                                       menu: {
-                                        items: be(e),
-                                        className: se
+                                        items: ge(e),
+                                        className: ie
                                       },
                                       trigger: ["click"],
-                                      onOpenChange: Ie,
+                                      onOpenChange: _e,
                                       overlayClassName: "row-option-cell",
                                       rootClassName: "",
                                       openClassName: "max-h-[350px] overflow-y-auto",
                                       placement: "bottom",
                                       children: /* @__PURE__ */ n(
-                                        qt,
+                                        Zt,
                                         {
                                           tooltip: u("More"),
                                           variant: "ghost",
                                           className: "!text-primary-500 hover:!bg-primary-100 dark:hover:!bg-primary-900",
-                                          children: /* @__PURE__ */ n(et, { sx: { fontSize: 20 } })
+                                          children: /* @__PURE__ */ n(ot, { sx: { fontSize: 20 } })
                                         }
                                       )
                                     }
                                   ) : null,
-                                  draggingTab: D === e,
-                                  href: z(e),
-                                  onClick: () => B(e),
+                                  draggingTab: V === e,
+                                  isLocked: C(e),
+                                  lockedTooltip: ce,
+                                  href: C(e) ? void 0 : z(e),
+                                  onClick: () => j(e),
                                   suffixRecord: p,
-                                  selectedId: P,
-                                  icon: r ? /* @__PURE__ */ n(Ce, { title: u("Unpin"), children: /* @__PURE__ */ n("span", { onClick: () => ee(e), children: /* @__PURE__ */ n(oe, { size: 20, className: "rotate-45 text-inherit dark:text-inherit" }) }) }) : ie?.[e] ?? null
+                                  selectedId: F,
+                                  icon: s ? /* @__PURE__ */ n(Ne, { title: u("Unpin"), children: /* @__PURE__ */ n("span", { onClick: () => te(e), children: /* @__PURE__ */ n(se, { size: 20, className: "rotate-45 text-inherit dark:text-inherit" }) }) }) : ae?.[e] ?? null
                                 }
                               ) }, e)
                             },
                             e
                           );
                         }),
-                        i && ze ? /* @__PURE__ */ n(tt, { title: i, isDragging: D === i, children: /* @__PURE__ */ n("li", { role: "presentation", className: l("sm:mr-2"), children: /* @__PURE__ */ n(
-                          Se,
+                        r && $e ? /* @__PURE__ */ n(st, { title: r, isDragging: V === r, children: /* @__PURE__ */ n("li", { role: "presentation", className: l("sm:mr-2"), children: /* @__PURE__ */ n(
+                          ve,
                           {
                             showCounts: k,
-                            title: i,
+                            title: r,
                             role: "tab",
                             ariaSelected: !0,
                             tabIndex: 0,
-                            classValue: L("classValue", !0),
-                            selectedClassValue: L("selectedClassValue", !0),
-                            textClassValue: L("textClassValue", !0),
+                            classValue: M("classValue", !0),
+                            selectedClassValue: M("selectedClassValue", !0),
+                            textClassValue: M("textClassValue", !0),
                             isSelected: !0,
-                            tabOptions: E ? /* @__PURE__ */ n(
-                              ye,
+                            tabOptions: D ? /* @__PURE__ */ n(
+                              Te,
                               {
                                 menu: {
-                                  items: be(i),
-                                  className: se
+                                  items: ge(r),
+                                  className: ie
                                 },
                                 trigger: ["click"],
-                                onOpenChange: Ie,
+                                onOpenChange: _e,
                                 overlayClassName: "row-option-cell",
                                 rootClassName: "",
                                 openClassName: "max-h-[350px] overflow-y-auto",
                                 placement: "bottom",
-                                children: /* @__PURE__ */ n(et, { sx: { fontSize: 20 }, className: "text-primary-600" })
+                                children: /* @__PURE__ */ n(ot, { sx: { fontSize: 20 }, className: "text-primary-600" })
                               }
                             ) : null,
-                            draggingTab: D === i,
-                            href: z(i),
+                            draggingTab: V === r,
+                            isLocked: C(r),
+                            lockedTooltip: ce,
+                            href: C(r) ? void 0 : z(r),
                             suffixRecord: p,
-                            selectedId: P,
-                            icon: C && d.find((e) => e.name === i)?.is_pinned ? /* @__PURE__ */ n(Ce, { title: u("Pinned"), children: /* @__PURE__ */ n("span", { onClick: () => ee(i), children: /* @__PURE__ */ n(oe, { size: 20, className: "rotate-45 text-inherit dark:text-inherit" }) }) }) : ie?.[i] ?? null
+                            selectedId: F,
+                            icon: S && d.find((e) => e.name === r)?.is_pinned ? /* @__PURE__ */ n(Ne, { title: u("Pinned"), children: /* @__PURE__ */ n("span", { onClick: () => te(r), children: /* @__PURE__ */ n(se, { size: 20, className: "rotate-45 text-inherit dark:text-inherit" }) }) }) : ae?.[r] ?? null
                           }
-                        ) }, i) }, i) : null,
-                        (U < a.length && !A || V.length > 0) && Be > 0 ? /* @__PURE__ */ n(ln, { id: "more-tabs", children: /* @__PURE__ */ n(
-                          ye,
+                        ) }, r) }, r) : null,
+                        (R < a.length && !G || L.length > 0) && Ae > 0 ? /* @__PURE__ */ n(un, { id: "more-tabs", children: /* @__PURE__ */ n(
+                          Te,
                           {
                             overlayStyle: {
                               maxHeight: "calc(100vh - 350px)",
@@ -601,8 +612,8 @@ const Ie = (T) => {
                               borderRadius: 8,
                               boxShadow: "0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)"
                             },
-                            onOpenChange: () => Ge(),
-                            open: I,
+                            onOpenChange: () => qe(),
+                            open: _,
                             menu: {
                               items: [
                                 {
@@ -610,41 +621,44 @@ const Ie = (T) => {
                                   disabled: !0,
                                   style: { minWidth: "190px", marginBottom: "8px" },
                                   label: /* @__PURE__ */ n("div", { className: "px-2 bg-white dark:bg-black-800", children: /* @__PURE__ */ n(
-                                    Qt,
+                                    Kt,
                                     {
                                       id: "search-bar-more-tabs",
-                                      value: ce,
+                                      value: ue,
                                       classValues: "!rounded-lg",
-                                      onChange: (e) => ft(e)
+                                      onChange: (e) => xt(e)
                                     }
                                   ) })
                                 },
-                                ...a.slice(K).filter((e) => e.name !== i).concat(V).filter(
-                                  ({ name: e }) => typeof e == "string" && (e ?? "").toLowerCase().includes(ce.toLowerCase())
-                                ).map(({ name: e, is_hidden: t }) => ({
-                                  key: e,
-                                  label: /* @__PURE__ */ n(
-                                    y,
-                                    {
-                                      className: l(
-                                        "uppercase",
-                                        t ? "text-neutral-400 dark:text-neutral-500" : "text-black-900 dark:text-black-200"
-                                      ),
-                                      text: e,
-                                      suffixRecord: k ? p : {},
-                                      highlight: ce,
-                                      truncateText: !0,
-                                      isDisabled: t,
-                                      onClick: t ? void 0 : () => {
-                                        B(e), J(!1);
+                                ...a.slice(ee).filter((e) => e.name !== r).concat(L).filter(
+                                  ({ name: e }) => typeof e == "string" && (e ?? "").toLowerCase().includes(ue.toLowerCase())
+                                ).map(({ name: e, is_hidden: t }) => {
+                                  const o = C(e), s = t || o;
+                                  return {
+                                    key: e,
+                                    label: /* @__PURE__ */ n(
+                                      y,
+                                      {
+                                        className: l(
+                                          "uppercase",
+                                          s ? "text-neutral-400 dark:text-neutral-500" : "text-black-900 dark:text-black-200"
+                                        ),
+                                        text: e,
+                                        suffixRecord: k ? p : {},
+                                        highlight: ue,
+                                        truncateText: !0,
+                                        isDisabled: s,
+                                        onClick: s ? void 0 : () => {
+                                          j(e), q(!1);
+                                        }
                                       }
-                                    }
-                                  ),
-                                  popupClassName: se,
-                                  children: I ? be(e, t, !0) : null
-                                }))
+                                    ),
+                                    popupClassName: ie,
+                                    children: _ ? ge(e, t, !0) : null
+                                  };
+                                })
                               ],
-                              className: se
+                              className: ie
                             },
                             openClassName: "max-h-[350px] overflow-y-auto",
                             trigger: ["click"],
@@ -652,16 +666,16 @@ const Ie = (T) => {
                             placement: "bottomRight",
                             getPopupContainer: (e) => e.parentElement,
                             children: /* @__PURE__ */ n(
-                              cn,
+                              mn,
                               {
-                                title: `${k ? Be : ""} MORE...`,
+                                title: `${k ? Ae : ""} MORE...`,
                                 variant: T,
-                                size: O,
-                                draggingOver: xt,
+                                size: E,
+                                draggingOver: kt,
                                 suffixRecord: p,
-                                handleShowMoreDropdown: Ge,
-                                selectedId: P,
-                                showMoreDropdown: I
+                                handleShowMoreDropdown: qe,
+                                selectedId: F,
+                                showMoreDropdown: _
                               }
                             )
                           }
@@ -670,23 +684,23 @@ const Ie = (T) => {
                     }
                   ),
                   H ? /* @__PURE__ */ n("div", { className: l(H?.className), children: /* @__PURE__ */ n("li", { children: H.component }) }) : null,
-                  E && pt && /* @__PURE__ */ n(
+                  D && bt && /* @__PURE__ */ n(
                     "li",
                     {
                       className: l(
-                        gt ? "opacity-100" : "opacity-0",
+                        yt ? "opacity-100" : "opacity-0",
                         "transition-opacity duration-300"
                       ),
                       children: /* @__PURE__ */ n(
-                        dn,
+                        pn,
                         {
                           hasSuffixRecord: !!(p && Object.keys(p).length > 0),
-                          savedConfig: He,
-                          onApplyFilter: (e) => St(e),
+                          savedConfig: We,
+                          onApplyFilter: (e) => It(e),
                           setUnsavedChanges: () => {
                           },
-                          handleTabSort: Vt,
-                          onSearchChange: Lt
+                          handleTabSort: Ut,
+                          onSearchChange: Ht
                         }
                       )
                     }
@@ -694,15 +708,15 @@ const Ie = (T) => {
                 ]
               }
             ),
-            D ? /* @__PURE__ */ n(
-              un,
+            V ? /* @__PURE__ */ n(
+              fn,
               {
-                draggingTab: D,
+                draggingTab: V,
                 suffixRecord: p,
-                size: O,
+                size: E,
                 variant: T,
-                selectedId: P,
-                parentContainer: mt
+                selectedId: F,
+                parentContainer: ht
               }
             ) : null
           ]
@@ -712,6 +726,6 @@ const Ie = (T) => {
   );
 };
 export {
-  Fn as Tabs
+  jn as Tabs
 };
 //# sourceMappingURL=Tabs.es.js.map