jcicl 1.2.3 → 1.2.5

package/Tabs/Tabs.js

@@ -1,121 +1,135 @@
-import { jsxs as h, jsx as v } from "react/jsx-runtime";
-import { useId as E, useState as S, useRef as T, useEffect as k } from "react";
+import { jsxs as v, jsx as b } from "react/jsx-runtime";
+import { useId as P, useState as R, useRef as T, useEffect as D } from "react";
+import A from "../ScrollContainer/ScrollContainer.js";
 import { cn as y } from "../cn.js";
-const A = {
+const N = {
   left: "justify-start",
   center: "justify-between",
   // spread headers across the full width
   right: "justify-end"
-}, x = (e, i) => {
+}, x = (e, c) => {
   if (typeof window > "u") return null;
-  const r = new URLSearchParams(window.location.search).get(e);
-  if (r == null) return null;
-  const l = i.findIndex((d) => d.label === r);
+  const n = new URLSearchParams(window.location.search).get(e);
+  if (n == null) return null;
+  const l = c.findIndex((u) => u.label === n);
   return l >= 0 ? l : null;
-}, N = (e, i) => {
+}, E = (e, c) => {
   if (typeof window > "u") return;
-  const r = new URLSearchParams(window.location.search);
-  r.set(e, i), window.history.replaceState(
+  const n = new URLSearchParams(window.location.search);
+  n.set(e, c), window.history.replaceState(
     window.history.state,
     "",
-    `${window.location.pathname}?${r}${window.location.hash}`
+    `${window.location.pathname}?${n}${window.location.hash}`
   );
-}, M = ({
+}, z = ({
   tabs: e,
-  defaultIndex: i = 0,
-  activeIndex: r,
+  defaultIndex: c = 0,
+  activeIndex: n,
   onChange: l,
-  persistKey: d,
+  persistKey: u,
   tabHeaderAlignment: j = "left",
-  headerFontSize: f,
+  headerFontSize: p,
   headerClassName: $,
   headerStyle: I
 }) => {
-  const s = E(), u = r !== void 0, o = !u && d, [g, b] = S(
-    () => (o ? x(o, e) : null) ?? i
-  ), L = u ? r : g, p = T(e);
-  if (p.current = e, k(() => {
+  const s = P(), f = n !== void 0, o = !f && u, [g, w] = R(
+    () => (o ? x(o, e) : null) ?? c
+  ), S = f ? n : g, m = T(e);
+  if (m.current = e, D(() => {
     if (!o) return;
     const t = () => {
-      const n = x(o, p.current);
-      n != null && b(n);
+      const r = x(o, m.current);
+      r != null && w(r);
     };
     return window.addEventListener("popstate", t), () => window.removeEventListener("popstate", t);
   }, [o]), e.length === 0) return null;
-  const c = Math.min(Math.max(L, 0), e.length - 1), w = (t) => {
-    u || b(t), o && N(o, e[t].label), l == null || l(t);
-  }, P = {
-    ...f != null ? { fontSize: f } : {},
+  const d = Math.min(Math.max(S, 0), e.length - 1), h = (t) => {
+    f || w(t), o && E(o, e[t].label), l == null || l(t);
+  }, k = {
+    ...p != null ? { fontSize: p } : {},
     ...I
-  }, R = (t) => {
-    var m;
+  }, L = (t) => {
     if (t.key !== "ArrowRight" && t.key !== "ArrowLeft") return;
     t.preventDefault();
-    const n = t.key === "ArrowRight" ? 1 : -1, a = (c + n + e.length) % e.length;
-    w(a), (m = document.getElementById(`${s}-tab-${a}`)) == null || m.focus();
+    const r = t.key === "ArrowRight" ? 1 : -1, a = (d + r + e.length) % e.length;
+    h(a);
+    const i = document.getElementById(`${s}-tab-${a}`);
+    i == null || i.focus({ preventScroll: !0 }), i == null || i.scrollIntoView({ block: "nearest", inline: "nearest" });
   };
-  return /* @__PURE__ */ h("div", { className: "jcTabs flex w-full flex-col", children: [
-    /* @__PURE__ */ v(
-      "div",
+  return /* @__PURE__ */ v("div", { className: "jcTabs flex w-full flex-col", children: [
+    /* @__PURE__ */ b(
+      A,
       {
-        role: "tablist",
-        className: y(
-          "jcTabList flex flex-wrap gap-1 border-b-2 border-jc-gray-2",
-          A[j]
-        ),
-        children: e.map((t, n) => {
-          const a = n === c;
-          return /* @__PURE__ */ h(
-            "button",
-            {
-              id: `${s}-tab-${n}`,
-              type: "button",
-              role: "tab",
-              "aria-selected": a,
-              "aria-controls": `${s}-panel-${n}`,
-              tabIndex: a ? 0 : -1,
-              "data-active": a,
-              onClick: () => w(n),
-              onKeyDown: R,
-              style: P,
-              className: y(
-                // The lib's CSS omits Tailwind preflight, so reset the native button
-                // border explicitly (none on top/sides) and keep only the bottom indicator.
-                "jcTab -mb-0.5 inline-flex cursor-pointer appearance-none items-center gap-2 bg-transparent px-5 py-3",
-                "border-solid border-t-0 border-x-0 border-b-[3px] border-b-[color:transparent]",
-                "text-[27px] font-normal text-jc-black transition-[color,border-color] duration-200",
-                // Active indicator + focus ring track the app's selected theme color
-                // (--jc-theme-color, injected by DefaultTemplate); jc-gold (#fab62d) is the
-                // fallback outside a themed app. Keep these strings literal — Tailwind only
-                // scans complete class strings, so the color can't be interpolated.
-                "data-[active=true]:font-semibold data-[active=true]:border-b-[color:var(--jc-theme-color,#fab62d)]",
-                "focus-visible:rounded-[4px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--jc-theme-color,#fab62d)]",
-                $
-              ),
-              children: [
-                t.icon,
-                t.label
-              ]
-            },
-            n
-          );
-        })
+        direction: "horizontal",
+        height: "auto",
+        autoHide: "leave",
+        autoHideDelay: 0,
+        fadeDurationMs: 270,
+        children: /* @__PURE__ */ b(
+          "div",
+          {
+            role: "tablist",
+            className: y(
+              "jcTabList flex w-max min-w-full gap-1 border-b-2 border-jc-gray-2",
+              N[j]
+            ),
+            children: e.map((t, r) => {
+              const a = r === d;
+              return /* @__PURE__ */ v(
+                "button",
+                {
+                  id: `${s}-tab-${r}`,
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": a,
+                  "aria-controls": `${s}-panel-${r}`,
+                  tabIndex: a ? 0 : -1,
+                  "data-active": a,
+                  onClick: () => h(r),
+                  onKeyDown: L,
+                  style: k,
+                  className: y(
+                    // The lib's CSS omits Tailwind preflight, so reset the native button
+                    // border explicitly (none on top/sides) and keep only the bottom indicator.
+                    "jcTab -mb-0.5 inline-flex shrink-0 cursor-pointer appearance-none items-center gap-2 whitespace-nowrap bg-transparent px-5 py-3",
+                    "border-solid border-t-0 border-x-0 border-b-[3px] border-b-[color:transparent]",
+                    "text-[27px] font-normal text-jc-black transition-[color,border-color] duration-200",
+                    // Active indicator + focus ring track the app's selected theme color
+                    // (--jc-theme-color, injected by DefaultTemplate); jc-gold (#fab62d) is the
+                    // fallback outside a themed app. Keep these strings literal — Tailwind only
+                    // scans complete class strings, so the color can't be interpolated.
+                    "data-[active=true]:font-semibold data-[active=true]:border-b-[color:var(--jc-theme-color,#fab62d)]",
+                    // Inset the focus ring (negative offset) so the horizontal ScrollContainer
+                    // (which clips overflow-y) can't cut it off at the top/bottom or scroll edges.
+                    "focus-visible:rounded-[4px] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[color:var(--jc-theme-color,#fab62d)]",
+                    $
+                  ),
+                  children: [
+                    t.icon,
+                    t.label
+                  ]
+                },
+                r
+              );
+            })
+          }
+        )
       }
     ),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ b(
       "div",
       {
         role: "tabpanel",
-        id: `${s}-panel-${c}`,
-        "aria-labelledby": `${s}-tab-${c}`,
+        id: `${s}-panel-${d}`,
+        "aria-labelledby": `${s}-tab-${d}`,
         tabIndex: 0,
         className: "jcTabPanel pt-6",
-        children: e[c].content
+        children: e[d].content
       }
     )
   ] });
 };
 export {
-  M as Tabs,
-  M as default
+  z as Tabs,
+  z as default
 };