@purpurds/tabs 5.14.0 → 5.15.1

package/dist/tabs.d.ts

@@ -1,6 +1,6 @@
-import { TabChangeDetail, TabsCmp, TabsVariant } from './tabs.utils';
-import { TabContent } from './tab-content';
 import { ReactElement } from 'react';
+import { TabContent } from './tab-content';
+import { TabChangeDetail, TabsCmp, TabsVariant } from './tabs.utils';
 
 type TabsProps = {
     children: Array<ReactElement<typeof TabContent>> | ReactElement<typeof TabContent>;

package/dist/tabs.es.js

@@ -1,6 +1,6 @@
 import { jsx as w, jsxs as ee } from "react/jsx-runtime";
 import * as ve from "react";
-import A, { createContext as ne, useMemo as W, createElement as x, useContext as me, useCallback as V, forwardRef as S, Children as E, isValidElement as k, cloneElement as se, Fragment as Fe, useLayoutEffect as De, useEffect as P, useRef as R, useState as D, useReducer as qe } from "react";
+import A, { createContext as ne, useMemo as W, createElement as x, useContext as me, useCallback as V, forwardRef as S, Children as E, isValidElement as k, cloneElement as se, Fragment as Oe, useLayoutEffect as De, useEffect as P, useRef as R, useState as D, useReducer as qe } from "react";
 import { flushSync as Le } from "react-dom";
 function Ue(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -42,7 +42,7 @@ var _e = { exports: {} };
   })();
 })(_e);
 var Ve = _e.exports;
-const Be = /* @__PURE__ */ Ue(Ve), je = {
+const Be = /* @__PURE__ */ Ue(Ve), Ge = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -50,7 +50,7 @@ const Be = /* @__PURE__ */ Ue(Ve), je = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, Ge = {
+}, je = {
   name: "chevron-left",
   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.175 3.905a.9.9 0 0 1-.08 1.27L8.36 12l7.736 6.825a.9.9 0 0 1-1.191 1.35l-8.5-7.5a.9.9 0 0 1 0-1.35l8.5-7.5a.9.9 0 0 1 1.27.08Z" clip-rule="evenodd"/></svg>',
   keywords: ["chevron-left"],
@@ -60,7 +60,7 @@ const Be = /* @__PURE__ */ Ue(Ve), je = {
   svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M7.809 3.924a.9.9 0 0 0 .115 1.267L16.094 12l-8.17 6.809a.9.9 0 0 0 1.152 1.382l9-7.5a.9.9 0 0 0 0-1.382l-9-7.5a.9.9 0 0 0-1.267.115Z" clip-rule="evenodd"/></svg>',
   keywords: ["chevron-right"],
   category: "utility"
-}, ze = Be.bind(je), be = "purpur-icon", Ke = "md", We = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ye = ({ content: e = "", title: t } = {}) => {
+}, ze = Be.bind(Ge), be = "purpur-icon", Ke = "md", We = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ye = ({ content: e = "", title: t } = {}) => {
   const n = [
     { name: "xmlns", value: "http://www.w3.org/2000/svg" },
     { name: "fill", value: "currentColor" },
@@ -95,13 +95,12 @@ function I() {
   return I = Object.assign ? Object.assign.bind() : function(e) {
     for (var t = 1; t < arguments.length; t++) {
       var n = arguments[t];
-      for (var o in n)
-        Object.prototype.hasOwnProperty.call(n, o) && (e[o] = n[o]);
+      for (var o in n) ({}).hasOwnProperty.call(n, o) && (e[o] = n[o]);
     }
     return e;
-  }, I.apply(this, arguments);
+  }, I.apply(null, arguments);
 }
-function O(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
+function F(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
   return function(s) {
     if (e == null || e(s), n === !1 || !s.defaultPrevented) return t == null ? void 0 : t(s);
   };
@@ -219,7 +218,7 @@ const re = /* @__PURE__ */ S((e, t) => {
   }) : E.count(n) > 1 ? E.only(null) : null;
 });
 re.displayName = "SlotClone";
-const Qe = ({ children: e }) => /* @__PURE__ */ x(Fe, null, e);
+const Qe = ({ children: e }) => /* @__PURE__ */ x(Oe, null, e);
 function et(e) {
   return /* @__PURE__ */ k(e) && e.type === Qe;
 }
@@ -263,13 +262,13 @@ function nt(e) {
       ref: h
     }, m);
   }), i = e + "CollectionItemSlot", p = "data-radix-collection-item", l = /* @__PURE__ */ A.forwardRef((v, d) => {
-    const { scope: b, children: m, ..._ } = v, h = A.useRef(null), F = Y(d, h), T = r(i, b);
+    const { scope: b, children: m, ..._ } = v, h = A.useRef(null), O = Y(d, h), T = r(i, b);
     return A.useEffect(() => (T.itemMap.set(h, {
       ref: h,
       ..._
     }), () => void T.itemMap.delete(h))), /* @__PURE__ */ A.createElement(Z, {
       [p]: "",
-      ref: F
+      ref: O
     }, m);
   });
   function $(v) {
@@ -327,7 +326,7 @@ const ct = [
   "span",
   "svg",
   "ul"
-], G = ct.reduce((e, t) => {
+], j = ct.reduce((e, t) => {
   const n = /* @__PURE__ */ S((o, s) => {
     const { asChild: r, ...c } = o, a = r ? Z : t;
     return P(() => {
@@ -405,7 +404,7 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
     prop: c,
     defaultProp: a,
     onChange: u
-  }), [m, _] = D(!1), h = ie(i), F = Ie(n), T = R(!1), [q, z] = D(0);
+  }), [m, _] = D(!1), h = ie(i), O = Ie(n), T = R(!1), [q, z] = D(0);
   return P(() => {
     const C = l.current;
     if (C)
@@ -440,7 +439,7 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
       ),
       []
     )
-  }, /* @__PURE__ */ x(G.div, I({
+  }, /* @__PURE__ */ x(j.div, I({
     tabIndex: m || q === 0 ? -1 : 0,
     "data-orientation": o
   }, p, {
@@ -449,15 +448,15 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
       outline: "none",
       ...e.style
     },
-    onMouseDown: O(e.onMouseDown, () => {
+    onMouseDown: F(e.onMouseDown, () => {
       T.current = !0;
     }),
-    onFocus: O(e.onFocus, (C) => {
+    onFocus: F(e.onFocus, (C) => {
       const H = !T.current;
       if (C.target === C.currentTarget && H && !m) {
         const B = new CustomEvent(te, it);
         if (C.currentTarget.dispatchEvent(B), !B.defaultPrevented) {
-          const L = F().filter(
+          const L = O().filter(
             (g) => g.focusable
           ), X = L.find(
             (g) => g.active
@@ -475,7 +474,7 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
       }
       T.current = !1;
     }),
-    onBlur: O(
+    onBlur: F(
       e.onBlur,
       () => _(!1)
     )
@@ -494,19 +493,19 @@ const te = "rovingFocusGroup.onEntryFocus", it = {
     id: u,
     focusable: o,
     active: s
-  }, /* @__PURE__ */ x(G.span, I({
+  }, /* @__PURE__ */ x(j.span, I({
     tabIndex: p ? 0 : -1,
     "data-orientation": i.orientation
   }, c, {
     ref: t,
-    onMouseDown: O(e.onMouseDown, (d) => {
+    onMouseDown: F(e.onMouseDown, (d) => {
       o ? i.onItemFocus(u) : d.preventDefault();
     }),
-    onFocus: O(
+    onFocus: F(
       e.onFocus,
       () => i.onItemFocus(u)
     ),
-    onKeyDown: O(e.onKeyDown, (d) => {
+    onKeyDown: F(e.onKeyDown, (d) => {
       if (d.key === "Tab" && d.shiftKey) {
         i.onItemShiftTab();
         return;
@@ -657,7 +656,7 @@ const Te = "Tabs", [St, tn] = ae(Te, [
     orientation: c,
     dir: p,
     activationMode: u
-  }, /* @__PURE__ */ x(G.div, I({
+  }, /* @__PURE__ */ x(j.div, I({
     dir: p,
     "data-orientation": c
   }, i, {
@@ -671,7 +670,7 @@ const Te = "Tabs", [St, tn] = ae(Te, [
     orientation: r.orientation,
     dir: r.dir,
     loop: o
-  }), /* @__PURE__ */ x(G.div, I({
+  }), /* @__PURE__ */ x(j.div, I({
     role: "tablist",
     "aria-orientation": r.orientation
   }, s, {
@@ -684,7 +683,7 @@ const Te = "Tabs", [St, tn] = ae(Te, [
   }, a, {
     focusable: !s,
     active: p
-  }), /* @__PURE__ */ x(G.button, I({
+  }), /* @__PURE__ */ x(j.button, I({
     type: "button",
     role: "tab",
     "aria-selected": p,
@@ -695,16 +694,16 @@ const Te = "Tabs", [St, tn] = ae(Te, [
     id: u
   }, r, {
     ref: t,
-    onMouseDown: O(e.onMouseDown, (l) => {
+    onMouseDown: F(e.onMouseDown, (l) => {
       !s && l.button === 0 && l.ctrlKey === !1 ? c.onValueChange(o) : l.preventDefault();
     }),
-    onKeyDown: O(e.onKeyDown, (l) => {
+    onKeyDown: F(e.onKeyDown, (l) => {
       [
         " ",
         "Enter"
       ].includes(l.key) && c.onValueChange(o);
     }),
-    onFocus: O(e.onFocus, () => {
+    onFocus: F(e.onFocus, () => {
       const l = c.activationMode !== "manual";
       !p && !s && l && c.onValueChange(o);
     })
@@ -721,7 +720,7 @@ const Te = "Tabs", [St, tn] = ae(Te, [
     {
       present: s || p
     },
-    ({ present: $ }) => /* @__PURE__ */ x(G.div, I({
+    ({ present: $ }) => /* @__PURE__ */ x(j.div, I({
       "data-state": p ? "active" : "inactive",
       "data-orientation": a.orientation,
       role: "tabpanel",
@@ -744,7 +743,7 @@ function Ae(e, t) {
 function Ee(e, t) {
   return `${e}-content-${t}`;
 }
-const Ot = Tt, Ft = At, Dt = Pt, qt = Mt;
+const Ft = Tt, Ot = At, Dt = Pt, qt = Mt;
 function Lt(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
@@ -787,12 +786,12 @@ var Pe = { exports: {} };
 var Ut = Pe.exports;
 const de = /* @__PURE__ */ Lt(Ut), Vt = {
   "purpur-tab-content": "_purpur-tab-content_1x2zs_1"
-}, Bt = de.bind(Vt), jt = "purpur-tab-content", Gt = S(
+}, Bt = de.bind(Vt), Gt = "purpur-tab-content", jt = S(
   ({ children: e, tabId: t, "data-testid": n, className: o, ...s }, r) => /* @__PURE__ */ w(
     qt,
     {
       ref: r,
-      className: Bt([jt, o]),
+      className: Bt([Gt, o]),
       "data-testid": n,
       value: t,
       ...s,
@@ -860,7 +859,7 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
   "data-testid": a,
   ...u
 }) => {
-  const [i, p] = D({}), [l, $] = D(0), [v, d] = D(0), b = E.toArray(e).filter(kt), m = R(), _ = R(new Array(b.length)), h = 200, F = t === "line", T = U([
+  const [i, p] = D({}), [l, $] = D(0), [v, d] = D(0), b = E.toArray(e).filter(kt), m = R(), _ = R(new Array(b.length)), h = 200, O = t === "line", T = U([
     y,
     `${y}--${t}${n ? "-negative" : ""}`,
     { [`${y}--fullWidth`]: o },
@@ -872,16 +871,16 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
   if (new Set(q).size !== q.length)
     throw new Error("tabId must be unique");
   const B = (f, g) => g || a ? `${g || a}-${f}` : void 0, L = () => {
-    if (!F)
+    if (!O)
       return;
     const f = _.current[C];
     $((f == null ? void 0 : f.offsetLeft) || 0), d((f == null ? void 0 : f.getBoundingClientRect().width) || 0);
   }, X = (f) => {
-    F && H(b.findIndex((g) => g.props.tabId === f)), s == null || s(Zt(f));
+    O && H(b.findIndex((g) => g.props.tabId === f)), s == null || s(Zt(f));
   }, J = (f) => {
     if (m != null && m.current) {
-      const { scrollLeft: g } = m.current, j = f === "left" ? -h : h;
-      m.current.scroll({ left: g + j, behavior: "smooth" });
+      const { scrollLeft: g } = m.current, G = f === "left" ? -h : h;
+      m.current.scroll({ left: g + G, behavior: "smooth" });
     }
   }, Q = ({ side: f }) => /* @__PURE__ */ w(
     "button",
@@ -892,7 +891,7 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
       "aria-hidden": "true",
       tabIndex: -1,
       "data-testid": B("scroll-button"),
-      children: /* @__PURE__ */ w(He, { svg: f === "left" ? Ge : ke, size: "md" })
+      children: /* @__PURE__ */ w(He, { svg: f === "left" ? je : ke, size: "md" })
     }
   );
   return P(() => (window.addEventListener("resize", L), () => {
@@ -907,8 +906,8 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
       }
       M.forEach((N) => {
         const pe = Number(N.target.getAttribute("data-index")), Re = pe === 0, Me = pe === b.length - 1;
-        p((Oe) => ({
-          ...Oe,
+        p((Fe) => ({
+          ...Fe,
           ...Re && {
             [`${y}__wrapper--scroll-end`]: !N.isIntersecting
           },
@@ -920,12 +919,12 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
     }, g = new IntersectionObserver(f, {
       threshold: [0.99],
       root: m.current
-    }), j = _.current;
-    return j.forEach((M) => g.observe(M)), () => {
-      j.forEach((M) => g.unobserve(M));
+    }), G = _.current;
+    return G.forEach((M) => g.observe(M)), () => {
+      G.forEach((M) => g.unobserve(M));
     };
   }, [b.length]), /* @__PURE__ */ w(
-    Ot,
+    Ft,
     {
       defaultValue: c ?? b[0].props.tabId,
       onValueChange: X,
@@ -935,7 +934,7 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
       children: /* @__PURE__ */ ee("div", { className: U(`${y}__container`), children: [
         /* @__PURE__ */ ee("div", { className: U([`${y}__wrapper`, i]), children: [
           /* @__PURE__ */ ee(
-            Ft,
+            Ot,
             {
               ref: (f) => {
                 m.current = f;
@@ -943,7 +942,7 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
               className: U(`${y}__list`),
               children: [
                 E.map(b, (f, g) => {
-                  const { name: j, tabId: M, "data-testid": fe } = f.props;
+                  const { name: G, tabId: M, "data-testid": fe } = f.props;
                   return /* @__PURE__ */ w(
                     Wt,
                     {
@@ -958,11 +957,11 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
                       },
                       variant: t,
                       negative: n,
-                      children: j
+                      children: G
                     }
                   );
                 }),
-                F && /* @__PURE__ */ w(
+                O && /* @__PURE__ */ w(
                   "div",
                   {
                     className: U(`${y}__selected-border`),
@@ -984,7 +983,7 @@ const de = /* @__PURE__ */ Lt(Ut), Vt = {
     }
   );
 };
-Xt.Content = Gt;
+Xt.Content = jt;
 export {
   Xt as Tabs,
   Zt as createTabChangeDetailEvent,