quirk-ui 0.0.108 → 0.0.109

package/dist/components/Tabs/index.js

@@ -1,101 +1,112 @@
-import { jsx as f, jsxs as T } from "react/jsx-runtime";
-import L, { useState as x, useId as A, useRef as m, useMemo as I, useLayoutEffect as d } from "react";
-import { TabsContext as h, useTabsContext as p } from "./Context.js";
-import '../../assets/index33.css';const R = "_tabs_1wmov_1", C = "_tabsList_1wmov_7", N = "_left_1wmov_13", W = "_center_1wmov_17", k = "_right_1wmov_21", H = "_tabsTrigger_1wmov_25", M = "_active_1wmov_40", j = "_tabsPanelWrapper_1wmov_45", D = "_tabsPanel_1wmov_45", n = {
-  tabs: R,
+import { jsx as _, jsxs as T } from "react/jsx-runtime";
+import x, { useState as L, useId as A, useRef as m, useMemo as d, useLayoutEffect as I } from "react";
+import { TabsContext as R, useTabsContext as p } from "./Context.js";
+import '../../assets/index33.css';const h = "_tabs_1wmov_1", C = "_tabsList_1wmov_7", N = "_left_1wmov_13", W = "_center_1wmov_17", k = "_right_1wmov_21", M = "_tabsTrigger_1wmov_25", j = "_active_1wmov_40", D = "_tabsPanelWrapper_1wmov_45", E = "_tabsPanel_1wmov_45", o = {
+  tabs: h,
   tabsList: C,
   left: N,
   center: W,
   right: k,
-  tabsTrigger: H,
-  active: M,
-  tabsPanelWrapper: j,
-  tabsPanel: D
-}, E = {
-  left: n.left,
-  center: n.center,
-  right: n.right
+  tabsTrigger: M,
+  active: j,
+  tabsPanelWrapper: D,
+  tabsPanel: E
+}, F = {
+  left: o.left,
+  center: o.center,
+  right: o.right
 };
 function v({
-  children: r,
+  children: c,
   defaultIndex: t = 0,
   align: s = "left"
 }) {
-  const [a, c] = x(t), o = A(), b = [], u = [], l = m(null), i = m([]), y = I(
-    () => ({ activeIndex: a, setActiveIndex: c, idPrefix: o, align: s, panelRefs: i }),
-    [a, o, s]
+  const [a, f] = L(t), n = A(), r = [], i = [], b = m(null), l = m([]), w = () => {
+    const e = b.current, u = l.current[a];
+    if (e && u) {
+      const $ = u.offsetHeight;
+      e.style.height = `${$}px`;
+    }
+  }, y = d(
+    () => ({
+      activeIndex: a,
+      setActiveIndex: f,
+      idPrefix: n,
+      align: s,
+      panelRefs: l,
+      setWrapperHeight: w
+    }),
+    [a, n, s]
   );
-  return L.Children.forEach(r, (e) => {
-    var _;
-    (e == null ? void 0 : e.type) === P ? b.push(e) : ((e == null ? void 0 : e.type) === w || ((_ = e == null ? void 0 : e.type) == null ? void 0 : _.name) === "Panel") && u.push(e);
-  }), d(() => {
-    const e = l.current, _ = requestAnimationFrame(() => {
-      const g = i.current[a];
-      if (e && g) {
-        const $ = g.offsetHeight;
-        e.offsetHeight, e.style.height = `${$}px`;
-      }
-    });
-    return () => cancelAnimationFrame(_);
-  }, [a]), /* @__PURE__ */ f(h.Provider, { value: y, children: /* @__PURE__ */ T("div", { className: n.tabs, children: [
-    b,
-    /* @__PURE__ */ f("div", { ref: l, className: n.tabsPanelWrapper, children: u })
+  return x.Children.forEach(c, (e) => {
+    var u;
+    (e == null ? void 0 : e.type) === g ? r.push(e) : ((e == null ? void 0 : e.type) === P || ((u = e == null ? void 0 : e.type) == null ? void 0 : u.name) === "Panel") && i.push(e);
+  }), /* @__PURE__ */ _(R.Provider, { value: y, children: /* @__PURE__ */ T("div", { className: o.tabs, children: [
+    r,
+    /* @__PURE__ */ _("div", { ref: b, className: o.tabsPanelWrapper, children: i })
   ] }) });
 }
-function P({ children: r }) {
+function g({ children: c }) {
   const { align: t } = p();
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ _(
     "div",
     {
-      className: `${n.tabsList} ${E[t]}`,
+      className: `${o.tabsList} ${F[t]}`,
       role: "tablist",
       "aria-label": "Tabs",
-      children: r
+      children: c
     }
   );
 }
-function F({ children: r, index: t }) {
-  const { activeIndex: s, setActiveIndex: a, idPrefix: c } = p(), o = m(null), b = (l) => {
-    l.key === "ArrowRight" ? a((i) => i + 1) : l.key === "ArrowLeft" && a((i) => Math.max(0, i - 1));
-  }, u = s === t;
-  return /* @__PURE__ */ f(
+function H({ children: c, index: t }) {
+  const { activeIndex: s, setActiveIndex: a, idPrefix: f } = p(), n = m(null), r = (b) => {
+    b.key === "ArrowRight" ? a((l) => l + 1) : b.key === "ArrowLeft" && a((l) => Math.max(0, l - 1));
+  }, i = s === t;
+  return /* @__PURE__ */ _(
     "button",
     {
-      className: `${n.tabsTrigger} ${u ? n.active : ""}`,
+      className: `${o.tabsTrigger} ${i ? o.active : ""}`,
       role: "tab",
-      ref: o,
-      id: `${c}-tab-${t}`,
+      ref: n,
+      id: `${f}-tab-${t}`,
       "aria-selected": s === t,
       tabIndex: s === t ? 0 : -1,
       onClick: () => a(t),
-      onKeyDown: b,
-      children: r
+      onKeyDown: r,
+      children: c
     }
   );
 }
-function w({ children: r, index: t }) {
-  const { activeIndex: s, idPrefix: a, panelRefs: c } = p();
-  return t !== s ? null : /* @__PURE__ */ f(
+function P({ children: c, index: t }) {
+  const { activeIndex: s, idPrefix: a, panelRefs: f, setWrapperHeight: n } = p(), r = t === s;
+  return I(() => {
+    if (r) {
+      const i = requestAnimationFrame(() => {
+        n == null || n();
+      });
+      return () => cancelAnimationFrame(i);
+    }
+  }, [s, n]), r ? /* @__PURE__ */ _(
     "div",
     {
-      ref: (o) => {
-        c.current[t] = o;
+      ref: (i) => {
+        f.current[t] = i;
       },
-      className: n.tabsPanel,
+      className: o.tabsPanel,
       role: "tabpanel",
       id: `${a}-panel-${t}`,
       "aria-labelledby": `${a}-tab-${t}`,
-      "aria-hidden": s !== t,
-      hidden: s !== t,
-      children: r
+      "aria-hidden": !r,
+      hidden: !r,
+      children: c
     }
-  );
+  ) : null;
 }
-v.List = P;
-v.Trigger = F;
-v.Panel = w;
+v.List = g;
+v.Trigger = H;
+v.Panel = P;
 export {
   v as Tabs,
-  E as alignClassMap,
+  F as alignClassMap,
   v as default
 };

package/dist/lib/components/Tabs/Context.d.ts

@@ -6,6 +6,7 @@ export type TabsContextType = {
     idPrefix: string;
     align: Align;
     panelRefs: React.RefObject<(HTMLDivElement | null)[]>;
+    setWrapperHeight?: () => void;
 };
 export declare const TabsContext: React.Context<TabsContextType | null>;
 export declare function useTabsContext(): TabsContextType;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.0.108",
+  "version": "0.0.109",
   "type": "module",
   "exports": {
     ".": {