react-panel-layout 0.4.2 → 0.5.1

package/dist/usePivot-z9gumDf-.js

@@ -1,97 +0,0 @@
-import { jsx as a, Fragment as O } from "react/jsx-runtime";
-import * as e from "react";
-import { P as R, l as g } from "./styles-w0ZixggV.js";
-const x = typeof window < "u" && typeof window.document < "u", A = x ? e.useLayoutEffect : e.useEffect, N = {
-  position: "absolute",
-  inset: 0,
-  width: "100%",
-  height: "100%"
-}, S = e.memo(({ id: c, isActive: n, transitionMode: s, children: d }) => {
-  const i = e.useRef(null), o = e.useRef(n);
-  A(() => {
-    if (s !== "css" || !i.current)
-      return;
-    const u = i.current, r = o.current;
-    o.current = n, r !== n && (u.style.animation = "none", u.offsetHeight, u.style.animation = "");
-  }, [n, s]);
-  const l = e.useMemo(() => {
-    const u = {
-      ...N,
-      pointerEvents: n ? "auto" : "none",
-      opacity: n ? 1 : 0
-    };
-    return s === "css" && (u.animation = n ? R : g), u;
-  }, [n, s]), f = /* @__PURE__ */ a("div", { ref: i, "data-pivot-content": c, "data-active": n ? "true" : "false", style: l, children: d });
-  return s === "none" ? /* @__PURE__ */ a(e.Activity, { mode: n ? "visible" : "hidden", children: f }) : f;
-}), w = e.createContext(null), T = e.memo(() => {
-  const c = e.useContext(w);
-  if (!c)
-    throw new Error("PivotOutlet must be used within usePivot");
-  const [, n] = e.useReducer((o) => o + 1, 0);
-  e.useEffect(() => c.subscribe(n), [c]);
-  const { items: s, activeId: d, transitionMode: i } = c.getState();
-  return /* @__PURE__ */ a(O, { children: s.map((o) => /* @__PURE__ */ a(S, { id: o.id, isActive: o.id === d, transitionMode: i, children: o.content }, o.id)) });
-});
-function _(c) {
-  const { items: n, activeId: s, defaultActiveId: d, onActiveChange: i, transitionMode: o = "css" } = c, l = s !== void 0, [f, u] = e.useState(() => {
-    if (d !== void 0)
-      return d;
-    const t = n.find((v) => v.disabled !== !0);
-    if (!t)
-      throw new Error("usePivot: No enabled items provided");
-    return t.id;
-  }), r = l ? s : f, m = e.useCallback(
-    (t) => {
-      const v = n.find((C) => C.id === t);
-      v && (v.disabled || (l || u(t), i?.(t)));
-    },
-    [n, l, i]
-  ), E = e.useCallback((t) => t === r, [r]), y = e.useCallback(
-    (t) => ({
-      "data-pivot-item": t,
-      "data-active": t === r ? "true" : "false",
-      "aria-selected": t === r,
-      tabIndex: t === r ? 0 : -1,
-      onClick: () => {
-        m(t);
-      }
-    }),
-    [r, m]
-  ), h = e.useMemo(
-    () => ({
-      position: "relative",
-      width: "100%",
-      height: "100%"
-    }),
-    []
-  ), I = e.useRef({
-    items: n,
-    activeId: r,
-    transitionMode: o
-  });
-  I.current = {
-    items: n,
-    activeId: r,
-    transitionMode: o
-  };
-  const p = e.useRef(/* @__PURE__ */ new Set());
-  e.useEffect(() => {
-    p.current.forEach((t) => t());
-  }, [r, o]);
-  const b = e.useMemo(
-    () => ({
-      getState: () => I.current,
-      subscribe: (t) => (p.current.add(t), () => p.current.delete(t))
-    }),
-    []
-  ), P = e.useMemo(() => {
-    const t = () => /* @__PURE__ */ a(w.Provider, { value: b, children: /* @__PURE__ */ a("div", { style: h, "data-pivot-container": !0, children: /* @__PURE__ */ a(T, {}) }) });
-    return t.displayName = "PivotOutlet", t;
-  }, [b, h]);
-  return { activeId: r, setActiveId: m, isActive: E, getItemProps: y, Outlet: P };
-}
-export {
-  A as a,
-  _ as u
-};
-//# sourceMappingURL=usePivot-z9gumDf-.js.map

package/dist/usePivot-z9gumDf-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePivot-z9gumDf-.js","sources":["../src/hooks/useIsomorphicLayoutEffect.ts","../src/modules/pivot/PivotContent.tsx","../src/modules/pivot/usePivot.tsx"],"sourcesContent":["/**\n * @file useIsomorphicLayoutEffect - SSR-safe version of useLayoutEffect\n *\n * Uses useLayoutEffect on the client and useEffect on the server to avoid warnings\n * during server-side rendering (e.g., with Next.js)\n */\nimport * as React from \"react\";\n\n/**\n * Check if we're running in a browser environment\n */\nconst isBrowser = typeof window !== \"undefined\" && typeof window.document !== \"undefined\";\n\n/**\n * SSR-safe version of useLayoutEffect\n *\n * - Client: Uses useLayoutEffect for synchronous layout updates\n * - Server: Uses useEffect to avoid SSR warnings\n *\n * @example\n * ```tsx\n * useIsomorphicLayoutEffect(() => {\n *   // This runs synchronously after DOM mutations on the client\n *   // but safely falls back to useEffect on the server\n *   measureElement();\n * }, [deps]);\n * ```\n */\nexport const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;\n","/**\n * @file PivotContent component for rendering pivot items with CSS animations.\n *\n * Override via CSS custom properties:\n * - --rpl-pivot-animation-enter: Animation when becoming active\n * - --rpl-pivot-animation-leave: Animation when becoming inactive\n *\n * User defines @keyframes in their CSS and references via these tokens.\n * Example:\n *   @keyframes pivotEnter {\n *     from { opacity: 0; }\n *     to { opacity: 1; }\n *   }\n *   :root { --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards; }\n */\nimport * as React from \"react\";\nimport { PIVOT_ANIMATION_ENTER, PIVOT_ANIMATION_LEAVE } from \"../../constants/styles\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks/useIsomorphicLayoutEffect\";\n\nexport type PivotContentProps = {\n  id: string;\n  isActive: boolean;\n  transitionMode: \"css\" | \"none\";\n  children: React.ReactNode;\n};\n\nconst baseStyle: React.CSSProperties = {\n  position: \"absolute\",\n  inset: 0,\n  width: \"100%\",\n  height: \"100%\",\n};\n\n/**\n * Renders pivot content with CSS animation support.\n *\n * When transitionMode=\"css\": Applies enter/leave animations.\n * When transitionMode=\"none\": Uses React.Activity for memory optimization.\n */\nexport const PivotContent: React.FC<PivotContentProps> = React.memo(({ id, isActive, transitionMode, children }) => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const prevActiveRef = React.useRef(isActive);\n\n  // Restart animation on state change by removing and re-adding animation\n  useIsomorphicLayoutEffect(() => {\n    if (transitionMode !== \"css\" || !ref.current) {\n      return;\n    }\n\n    const el = ref.current;\n    const wasActive = prevActiveRef.current;\n    prevActiveRef.current = isActive;\n\n    // Only restart if state actually changed\n    if (wasActive === isActive) {\n      return;\n    }\n\n    // Force animation restart: remove animation, trigger reflow, re-add\n    el.style.animation = \"none\";\n    void el.offsetHeight; // Force reflow\n    el.style.animation = \"\";\n  }, [isActive, transitionMode]);\n\n  const style = React.useMemo<React.CSSProperties>(() => {\n    const s: React.CSSProperties = {\n      ...baseStyle,\n      pointerEvents: isActive ? \"auto\" : \"none\",\n      opacity: isActive ? 1 : 0,\n    };\n\n    if (transitionMode === \"css\") {\n      s.animation = isActive ? PIVOT_ANIMATION_ENTER : PIVOT_ANIMATION_LEAVE;\n    }\n\n    return s;\n  }, [isActive, transitionMode]);\n\n  const content = (\n    <div ref={ref} data-pivot-content={id} data-active={isActive ? \"true\" : \"false\"} style={style}>\n      {children}\n    </div>\n  );\n\n  if (transitionMode === \"none\") {\n    return <React.Activity mode={isActive ? \"visible\" : \"hidden\"}>{content}</React.Activity>;\n  }\n\n  return content;\n});\n","/**\n * @file Headless hook for managing Pivot (content switching) behavior.\n */\nimport * as React from \"react\";\nimport type { UsePivotOptions, UsePivotResult, PivotItemProps, PivotItem } from \"./types\";\nimport { PivotContent } from \"./PivotContent\";\n\n/**\n * Context for sharing pivot state with Outlet component.\n * Uses a ref-based approach to avoid re-creating the Outlet component.\n */\ntype PivotOutletContextValue = {\n  getState: () => {\n    items: ReadonlyArray<PivotItem>;\n    activeId: string;\n    transitionMode: \"css\" | \"none\";\n  };\n  subscribe: (callback: () => void) => () => void;\n};\n\nconst PivotOutletContext = React.createContext<PivotOutletContextValue | null>(null);\n\n/**\n * Stable Outlet component that subscribes to state changes.\n * This prevents remounting when activeId changes.\n */\nconst PivotOutletInner: React.FC = React.memo(() => {\n  const ctx = React.useContext(PivotOutletContext);\n  if (!ctx) {\n    throw new Error(\"PivotOutlet must be used within usePivot\");\n  }\n\n  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);\n\n  React.useEffect(() => {\n    return ctx.subscribe(forceUpdate);\n  }, [ctx]);\n\n  const { items, activeId, transitionMode } = ctx.getState();\n\n  return (\n    <>\n      {items.map((item) => (\n        <PivotContent key={item.id} id={item.id} isActive={item.id === activeId} transitionMode={transitionMode}>\n          {item.content}\n        </PivotContent>\n      ))}\n    </>\n  );\n});\n\n/**\n * Headless hook for managing content switching within a scope.\n * Provides behavior only - UI is fully customizable.\n *\n * @example\n * ```tsx\n * const { activeId, getItemProps, Outlet } = usePivot({\n *   items: [\n *     { id: 'home', label: 'Home', content: <HomePage /> },\n *     { id: 'settings', label: 'Settings', content: <SettingsPage /> }\n *   ],\n *   defaultActiveId: 'home'\n * });\n *\n * return (\n *   <div>\n *     <nav>\n *       {items.map((item) => (\n *         <button key={item.id} {...getItemProps(item.id)}>{item.label}</button>\n *       ))}\n *     </nav>\n *     <Outlet />\n *   </div>\n * );\n * ```\n */\nexport function usePivot<TId extends string = string>(options: UsePivotOptions<TId>): UsePivotResult<TId> {\n  const { items, activeId: controlledActiveId, defaultActiveId, onActiveChange, transitionMode = \"css\" } = options;\n\n  const isControlled = controlledActiveId !== undefined;\n\n  const [uncontrolledActiveId, setUncontrolledActiveId] = React.useState<TId>(() => {\n    if (defaultActiveId !== undefined) {\n      return defaultActiveId;\n    }\n    const firstEnabled = items.find((item) => item.disabled !== true);\n    if (!firstEnabled) {\n      throw new Error(\"usePivot: No enabled items provided\");\n    }\n    return firstEnabled.id;\n  });\n\n  const activeId = isControlled ? controlledActiveId : uncontrolledActiveId;\n\n  const setActiveId = React.useCallback(\n    (id: TId) => {\n      const target = items.find((item) => item.id === id);\n      if (!target) {\n        return;\n      }\n      if (target.disabled) {\n        return;\n      }\n      if (!isControlled) {\n        setUncontrolledActiveId(id);\n      }\n      onActiveChange?.(id);\n    },\n    [items, isControlled, onActiveChange],\n  );\n\n  const isActive = React.useCallback((id: TId): boolean => id === activeId, [activeId]);\n\n  const getItemProps = React.useCallback(\n    (id: TId): PivotItemProps => ({\n      \"data-pivot-item\": id,\n      \"data-active\": (id === activeId ? \"true\" : \"false\") as \"true\" | \"false\",\n      \"aria-selected\": id === activeId,\n      tabIndex: id === activeId ? 0 : -1,\n      onClick: () => {\n        setActiveId(id);\n      },\n    }),\n    [activeId, setActiveId],\n  );\n\n  const containerStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      position: \"relative\",\n      width: \"100%\",\n      height: \"100%\",\n    }),\n    [],\n  );\n\n  // Store state in a ref for stable getState function\n  const stateRef = React.useRef({\n    items,\n    activeId,\n    transitionMode,\n  });\n\n  // Update ref when state changes\n  stateRef.current = {\n    items,\n    activeId,\n    transitionMode,\n  };\n\n  // Subscribers for state changes\n  const subscribersRef = React.useRef(new Set<() => void>());\n\n  // Notify subscribers when activeId changes\n  React.useEffect(() => {\n    subscribersRef.current.forEach((callback) => callback());\n  }, [activeId, transitionMode]);\n\n  // Stable context value (never changes)\n  const contextValue = React.useMemo<PivotOutletContextValue>(\n    () => ({\n      getState: () => stateRef.current,\n      subscribe: (callback) => {\n        subscribersRef.current.add(callback);\n        return () => subscribersRef.current.delete(callback);\n      },\n    }),\n    [],\n  );\n\n  // Stable Outlet component (reference never changes)\n  const Outlet = React.useMemo(() => {\n    const OutletComponent: React.FC = () => (\n      <PivotOutletContext.Provider value={contextValue}>\n        <div style={containerStyle} data-pivot-container>\n          <PivotOutletInner />\n        </div>\n      </PivotOutletContext.Provider>\n    );\n    OutletComponent.displayName = \"PivotOutlet\";\n    return OutletComponent;\n  }, [contextValue, containerStyle]);\n\n  return { activeId, setActiveId, isActive, getItemProps, Outlet };\n}\n"],"names":["isBrowser","useIsomorphicLayoutEffect","React","baseStyle","PivotContent","id","isActive","transitionMode","children","ref","prevActiveRef","el","wasActive","style","s","PIVOT_ANIMATION_ENTER","PIVOT_ANIMATION_LEAVE","content","jsx","PivotOutletContext","PivotOutletInner","ctx","forceUpdate","x","items","activeId","Fragment","item","usePivot","options","controlledActiveId","defaultActiveId","onActiveChange","isControlled","uncontrolledActiveId","setUncontrolledActiveId","firstEnabled","setActiveId","target","getItemProps","containerStyle","stateRef","subscribersRef","callback","contextValue","Outlet","OutletComponent"],"mappings":";;;AAWA,MAAMA,IAAY,OAAO,SAAW,OAAe,OAAO,OAAO,WAAa,KAiBjEC,IAA4BD,IAAYE,EAAM,kBAAkBA,EAAM,WCF7EC,IAAiC;AAAA,EACrC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACV,GAQaC,IAA4CF,EAAM,KAAK,CAAC,EAAE,IAAAG,GAAI,UAAAC,GAAU,gBAAAC,GAAgB,UAAAC,QAAe;AAClH,QAAMC,IAAMP,EAAM,OAAuB,IAAI,GACvCQ,IAAgBR,EAAM,OAAOI,CAAQ;AAG3C,EAAAL,EAA0B,MAAM;AAC9B,QAAIM,MAAmB,SAAS,CAACE,EAAI;AACnC;AAGF,UAAME,IAAKF,EAAI,SACTG,IAAYF,EAAc;AAIhC,IAHAA,EAAc,UAAUJ,GAGpBM,MAAcN,MAKlBK,EAAG,MAAM,YAAY,QAChBA,EAAG,cACRA,EAAG,MAAM,YAAY;AAAA,EACvB,GAAG,CAACL,GAAUC,CAAc,CAAC;AAE7B,QAAMM,IAAQX,EAAM,QAA6B,MAAM;AACrD,UAAMY,IAAyB;AAAA,MAC7B,GAAGX;AAAA,MACH,eAAeG,IAAW,SAAS;AAAA,MACnC,SAASA,IAAW,IAAI;AAAA,IAAA;AAG1B,WAAIC,MAAmB,UACrBO,EAAE,YAAYR,IAAWS,IAAwBC,IAG5CF;AAAA,EACT,GAAG,CAACR,GAAUC,CAAc,CAAC,GAEvBU,IACJ,gBAAAC,EAAC,OAAA,EAAI,KAAAT,GAAU,sBAAoBJ,GAAI,eAAaC,IAAW,SAAS,SAAS,OAAAO,GAC9E,UAAAL,EAAA,CACH;AAGF,SAAID,MAAmB,SACd,gBAAAW,EAAChB,EAAM,UAAN,EAAe,MAAMI,IAAW,YAAY,UAAW,UAAAW,GAAQ,IAGlEA;AACT,CAAC,GCrEKE,IAAqBjB,EAAM,cAA8C,IAAI,GAM7EkB,IAA6BlB,EAAM,KAAK,MAAM;AAClD,QAAMmB,IAAMnB,EAAM,WAAWiB,CAAkB;AAC/C,MAAI,CAACE;AACH,UAAM,IAAI,MAAM,0CAA0C;AAG5D,QAAM,CAAA,EAAGC,CAAW,IAAIpB,EAAM,WAAW,CAACqB,MAAMA,IAAI,GAAG,CAAC;AAExD,EAAArB,EAAM,UAAU,MACPmB,EAAI,UAAUC,CAAW,GAC/B,CAACD,CAAG,CAAC;AAER,QAAM,EAAE,OAAAG,GAAO,UAAAC,GAAU,gBAAAlB,EAAA,IAAmBc,EAAI,SAAA;AAEhD,SACE,gBAAAH,EAAAQ,GAAA,EACG,YAAM,IAAI,CAACC,MACV,gBAAAT,EAACd,GAAA,EAA2B,IAAIuB,EAAK,IAAI,UAAUA,EAAK,OAAOF,GAAU,gBAAAlB,GACtE,UAAAoB,EAAK,WADWA,EAAK,EAExB,CACD,EAAA,CACH;AAEJ,CAAC;AA4BM,SAASC,EAAsCC,GAAoD;AACxG,QAAM,EAAE,OAAAL,GAAO,UAAUM,GAAoB,iBAAAC,GAAiB,gBAAAC,GAAgB,gBAAAzB,IAAiB,UAAUsB,GAEnGI,IAAeH,MAAuB,QAEtC,CAACI,GAAsBC,CAAuB,IAAIjC,EAAM,SAAc,MAAM;AAChF,QAAI6B,MAAoB;AACtB,aAAOA;AAET,UAAMK,IAAeZ,EAAM,KAAK,CAACG,MAASA,EAAK,aAAa,EAAI;AAChE,QAAI,CAACS;AACH,YAAM,IAAI,MAAM,qCAAqC;AAEvD,WAAOA,EAAa;AAAA,EACtB,CAAC,GAEKX,IAAWQ,IAAeH,IAAqBI,GAE/CG,IAAcnC,EAAM;AAAA,IACxB,CAACG,MAAY;AACX,YAAMiC,IAASd,EAAM,KAAK,CAACG,MAASA,EAAK,OAAOtB,CAAE;AAClD,MAAKiC,MAGDA,EAAO,aAGNL,KACHE,EAAwB9B,CAAE,GAE5B2B,IAAiB3B,CAAE;AAAA,IACrB;AAAA,IACA,CAACmB,GAAOS,GAAcD,CAAc;AAAA,EAAA,GAGhC1B,IAAWJ,EAAM,YAAY,CAACG,MAAqBA,MAAOoB,GAAU,CAACA,CAAQ,CAAC,GAE9Ec,IAAerC,EAAM;AAAA,IACzB,CAACG,OAA6B;AAAA,MAC5B,mBAAmBA;AAAA,MACnB,eAAgBA,MAAOoB,IAAW,SAAS;AAAA,MAC3C,iBAAiBpB,MAAOoB;AAAA,MACxB,UAAUpB,MAAOoB,IAAW,IAAI;AAAA,MAChC,SAAS,MAAM;AACb,QAAAY,EAAYhC,CAAE;AAAA,MAChB;AAAA,IAAA;AAAA,IAEF,CAACoB,GAAUY,CAAW;AAAA,EAAA,GAGlBG,IAAsCtC,EAAM;AAAA,IAChD,OAAO;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,IAEV,CAAA;AAAA,EAAC,GAIGuC,IAAWvC,EAAM,OAAO;AAAA,IAC5B,OAAAsB;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAlB;AAAA,EAAA,CACD;AAGD,EAAAkC,EAAS,UAAU;AAAA,IACjB,OAAAjB;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAlB;AAAA,EAAA;AAIF,QAAMmC,IAAiBxC,EAAM,OAAO,oBAAI,KAAiB;AAGzD,EAAAA,EAAM,UAAU,MAAM;AACpB,IAAAwC,EAAe,QAAQ,QAAQ,CAACC,MAAaA,GAAU;AAAA,EACzD,GAAG,CAAClB,GAAUlB,CAAc,CAAC;AAG7B,QAAMqC,IAAe1C,EAAM;AAAA,IACzB,OAAO;AAAA,MACL,UAAU,MAAMuC,EAAS;AAAA,MACzB,WAAW,CAACE,OACVD,EAAe,QAAQ,IAAIC,CAAQ,GAC5B,MAAMD,EAAe,QAAQ,OAAOC,CAAQ;AAAA,IACrD;AAAA,IAEF,CAAA;AAAA,EAAC,GAIGE,IAAS3C,EAAM,QAAQ,MAAM;AACjC,UAAM4C,IAA4B,MAChC,gBAAA5B,EAACC,EAAmB,UAAnB,EAA4B,OAAOyB,GAClC,UAAA,gBAAA1B,EAAC,OAAA,EAAI,OAAOsB,GAAgB,wBAAoB,IAC9C,UAAA,gBAAAtB,EAACE,GAAA,CAAA,CAAiB,GACpB,GACF;AAEF,WAAA0B,EAAgB,cAAc,eACvBA;AAAA,EACT,GAAG,CAACF,GAAcJ,CAAc,CAAC;AAEjC,SAAO,EAAE,UAAAf,GAAU,aAAAY,GAAa,UAAA/B,GAAU,cAAAiC,GAAc,QAAAM,EAAA;AAC1D;"}