quirk-ui 0.0.119 → 0.0.121

package/dist/components/Tabs/Tabs.test.js

@@ -2,8 +2,16 @@ import { jsxs as l, jsx as a } from "react/jsx-runtime";
 import { d as c, i as o, g as t, s as e, f as r, r as b } from "../../vi.ClIskdbk-CZ8iFAMK.js";
 import { Tabs as n } from "./index.js";
 import "../../index-BBIdMcpm.js";
+beforeAll(() => {
+  global.ResizeObserver = class {
+    observe() {
+    }
+    disconnect() {
+    }
+  };
+});
 c("Tabs", () => {
-  const i = () => {
+  const s = () => {
     b(
       /* @__PURE__ */ l(n, { defaultIndex: 0, align: "center", children: [
         /* @__PURE__ */ l(n.List, { children: [
@@ -16,30 +24,30 @@ c("Tabs", () => {
     );
   };
   o("renders tab triggers and default panel", () => {
-    i(), t(e.getByRole("tab", { name: /tab 1/i })).toBeInTheDocument(), t(e.getByRole("tab", { name: /tab 2/i })).toBeInTheDocument(), t(e.getByRole("tabpanel")).toHaveTextContent(
+    s(), t(e.getByRole("tab", { name: /tab 1/i })).toBeInTheDocument(), t(e.getByRole("tab", { name: /tab 2/i })).toBeInTheDocument(), t(e.getByRole("tabpanel")).toHaveTextContent(
       "This is the first panel"
     );
   }), o("changes panel when tab is clicked", () => {
-    i(), r.click(e.getByRole("tab", { name: /tab 2/i })), t(e.getByRole("tabpanel")).toHaveTextContent(
+    s(), r.click(e.getByRole("tab", { name: /tab 2/i })), t(e.getByRole("tabpanel")).toHaveTextContent(
       "This is the second panel"
     );
   }), o("responds to ArrowRight key to switch tabs", () => {
-    i();
-    const s = e.getByRole("tab", { name: /tab 1/i });
-    r.keyDown(s, { key: "ArrowRight" }), t(e.getByRole("tabpanel")).toHaveTextContent(
+    s();
+    const i = e.getByRole("tab", { name: /tab 1/i });
+    r.keyDown(i, { key: "ArrowRight" }), t(e.getByRole("tabpanel")).toHaveTextContent(
       "This is the second panel"
     );
   }), o("responds to ArrowLeft key to switch tabs", () => {
-    i();
-    const s = e.getByRole("tab", { name: /tab 1/i });
-    r.keyDown(s, { key: "ArrowRight" }), r.keyDown(e.getByRole("tab", { name: /tab 2/i }), {
+    s();
+    const i = e.getByRole("tab", { name: /tab 1/i });
+    r.keyDown(i, { key: "ArrowRight" }), r.keyDown(e.getByRole("tab", { name: /tab 2/i }), {
       key: "ArrowLeft"
     }), t(e.getByRole("tabpanel")).toHaveTextContent(
       "This is the first panel"
     );
   }), o("applies alignment class to list", () => {
-    i();
-    const s = e.getByRole("tablist");
-    t(s.className).toMatch(/center/i);
+    s();
+    const i = e.getByRole("tablist");
+    t(i.className).toMatch(/center/i);
   });
 });

package/dist/components/Tabs/index.js

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

package/package.json

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