@expcat/tigercat-react 1.1.0 → 1.2.0

package/dist/chunk-RYIYE2PY.js

@@ -0,0 +1,139 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Affix.tsx
+var _react = require('react');
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Affix = ({
+  offsetTop = 0,
+  offsetBottom,
+  target,
+  zIndex = 10,
+  className,
+  style,
+  children,
+  onChange,
+  ...props
+}) => {
+  const wrapperRef = _react.useRef.call(void 0, null);
+  const sentinelRef = _react.useRef.call(void 0, null);
+  const originalRectRef = _react.useRef.call(void 0, null);
+  const [state, setState] = _react.useState.call(void 0, { affixed: false, style: {} });
+  const stateRef = _react.useRef.call(void 0, state);
+  stateRef.current = state;
+  const onChangeRef = _react.useRef.call(void 0, onChange);
+  onChangeRef.current = onChange;
+  const recalcStyle = _react.useCallback.call(void 0, 
+    (affixed) => {
+      const el = wrapperRef.current;
+      if (!el) return;
+      if (!stateRef.current.affixed) {
+        const rect = el.getBoundingClientRect();
+        originalRectRef.current = {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        };
+      }
+      if (!originalRectRef.current) return;
+      const resolved = _tigercatcore.resolveAffixTarget.call(void 0, target);
+      const containerRect = resolved.getRect();
+      if (!affixed) {
+        if (stateRef.current.affixed) {
+          setState({ affixed: false, style: {} });
+          _optionalChain([onChangeRef, 'access', _ => _.current, 'optionalCall', _2 => _2(false)]);
+        }
+        return;
+      }
+      const forcedTop = offsetBottom !== void 0 ? containerRect.bottom - originalRectRef.current.height + offsetBottom + 1 : -1;
+      const next = _tigercatcore.calculateAffixState.call(void 0, 
+        {
+          top: forcedTop,
+          left: originalRectRef.current.left,
+          width: originalRectRef.current.width,
+          height: originalRectRef.current.height
+        },
+        containerRect,
+        offsetBottom !== void 0 ? void 0 : offsetTop,
+        offsetBottom,
+        zIndex
+      );
+      if (!next.affixed) {
+        if (stateRef.current.affixed) {
+          setState({ affixed: false, style: {} });
+          _optionalChain([onChangeRef, 'access', _3 => _3.current, 'optionalCall', _4 => _4(false)]);
+        }
+        return;
+      }
+      const wasAffixed = stateRef.current.affixed;
+      setState(next);
+      if (!wasAffixed) _optionalChain([onChangeRef, 'access', _5 => _5.current, 'optionalCall', _6 => _6(true)]);
+    },
+    [offsetTop, offsetBottom, target, zIndex]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (!sentinelRef.current) return void 0;
+    const resolved = _tigercatcore.resolveAffixTarget.call(void 0, target);
+    const root = resolved.element === window ? null : resolved.element;
+    const stop = _tigercatcore.createAffixObserver.call(void 0, sentinelRef.current, {
+      offsetTop,
+      offsetBottom,
+      root,
+      onToggle: (affixed) => recalcStyle(affixed)
+    });
+    let resizeObs = null;
+    const onResize = () => {
+      if (stateRef.current.affixed) recalcStyle(true);
+    };
+    if (typeof ResizeObserver !== "undefined" && wrapperRef.current) {
+      resizeObs = new ResizeObserver(() => onResize());
+      resizeObs.observe(wrapperRef.current);
+    }
+    window.addEventListener("resize", onResize, { passive: true });
+    return () => {
+      stop();
+      _optionalChain([resizeObs, 'optionalAccess', _7 => _7.disconnect, 'call', _8 => _8()]);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [offsetTop, offsetBottom, target, recalcStyle]);
+  const wrapperClasses = _react.useMemo.call(void 0, () => _tigercatcore.classNames.call(void 0, className), [className]);
+  const wrapperStyle = _react.useMemo.call(void 0, 
+    () => state.affixed ? { ...state.style, ...style } : style,
+    [state.affixed, state.style, style]
+  );
+  const sentinel = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: sentinelRef,
+      "aria-hidden": "true",
+      style: { display: "block", width: 0, height: 0, pointerEvents: "none" }
+    }
+  );
+  if (state.affixed) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      sentinel,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          style: {
+            width: _nullishCoalesce(_optionalChain([originalRectRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.width]), () => ( 0)),
+            height: _nullishCoalesce(_optionalChain([originalRectRef, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.height]), () => ( 0))
+          }
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    sentinel,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: wrapperRef, className: wrapperClasses, style: wrapperStyle, ...props, children })
+  ] });
+};
+
+
+
+exports.Affix = Affix;

package/dist/chunk-S5Y6UHAK.mjs

@@ -1,8 +1,20 @@
-import { useState, useMemo, useCallback } from 'react';
-import { getMonthDays, classNames, getCalendarContainerClasses, calendarHeaderClasses, calendarNavButtonClasses, MONTHS, calendarTitleClasses, getCalendarMonthClasses, WEEKDAYS, calendarWeekdayClasses, isSameDay, getCalendarDayClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
 // src/components/Calendar.tsx
+import { useState, useMemo, useCallback } from "react";
+import { classNames } from "@expcat/tigercat-core";
+import {
+  getCalendarContainerClasses,
+  calendarHeaderClasses,
+  calendarNavButtonClasses,
+  calendarTitleClasses,
+  calendarWeekdayClasses,
+  getCalendarDayClasses,
+  getCalendarMonthClasses,
+  WEEKDAYS,
+  MONTHS,
+  isSameDay,
+  getMonthDays
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Calendar = ({
   value,
   mode = "month",
@@ -113,4 +125,7 @@ var Calendar = ({
 };
 var Calendar_default = Calendar;
 
-export { Calendar, Calendar_default };
+export {
+  Calendar,
+  Calendar_default
+};

package/dist/{chunk-W7UGU2O6.mjs → chunk-S7RUTD3X.mjs}

@@ -1,10 +1,26 @@
-import { StepsItem, Steps } from './chunk-36WZNVQ5.mjs';
-import { useTigerConfig } from './chunk-VBZE77VM.mjs';
-import { Button } from './chunk-GKJNQUTW.mjs';
-import { useMemo, useState, useEffect, useCallback } from 'react';
-import { mergeTigerLocale, getFormWizardLabels, classNames, clampStepIndex, runStepValidation, findNextUnskippedStep, resolveLocaleText } from '@expcat/tigercat-core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import {
+  Steps,
+  StepsItem
+} from "./chunk-36WZNVQ5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+import {
+  Button
+} from "./chunk-GKJNQUTW.mjs";
 
+// src/components/FormWizard.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  classNames,
+  getFormWizardLabels,
+  mergeTigerLocale,
+  resolveLocaleText,
+  clampStepIndex,
+  findNextUnskippedStep,
+  runStepValidation
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var FormWizard = ({
   steps = [],
   current,
@@ -147,4 +163,7 @@ var FormWizard = ({
 };
 var FormWizard_default = FormWizard;
 
-export { FormWizard, FormWizard_default };
+export {
+  FormWizard,
+  FormWizard_default
+};

package/dist/chunk-SDLMB34Y.mjs

@@ -1,7 +1,8 @@
-import { classNames } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
 // src/components/ChartSeries.tsx
+import {
+  classNames
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var ChartSeries = ({
   data,
   name,
@@ -29,4 +30,7 @@ var ChartSeries = ({
 };
 var ChartSeries_default = ChartSeries;
 
-export { ChartSeries, ChartSeries_default };
+export {
+  ChartSeries,
+  ChartSeries_default
+};

package/dist/{chunk-XTSG362L.mjs → chunk-SEWNVIHH.mjs}

@@ -1,8 +1,16 @@
-import { useEffect, useState, useRef, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import { lockBodyScroll, computeFloatingPosition, autoUpdateFloating, isEscapeKey, getFocusableElements, getFocusTrapNavigation, isEventOutside } from '@expcat/tigercat-core';
-
 // src/utils/overlay.ts
+import { useEffect, useRef, useState, useCallback } from "react";
+import { createPortal } from "react-dom";
+import {
+  getFocusTrapNavigation,
+  getFocusableElements,
+  isEscapeKey,
+  isEventOutside,
+  lockBodyScroll,
+  isBrowser,
+  computeFloatingPosition,
+  autoUpdateFloating
+} from "@expcat/tigercat-core";
 function useClickOutside({
   enabled,
   refs,
@@ -49,7 +57,7 @@ function useBodyScrollLock({ enabled }) {
   }, [enabled]);
 }
 function renderBodyPortal(node) {
-  if (typeof document === "undefined") return null;
+  if (!isBrowser()) return null;
   return createPortal(node, document.body);
 }
 function useFocusTrap({ enabled, containerRef }) {
@@ -135,4 +143,11 @@ function useFloating(options) {
   };
 }
 
-export { renderBodyPortal, useBodyScrollLock, useClickOutside, useEscapeKey, useFloating, useFocusTrap };
+export {
+  useClickOutside,
+  useEscapeKey,
+  useBodyScrollLock,
+  renderBodyPortal,
+  useFocusTrap,
+  useFloating
+};

package/dist/chunk-SHT4TU3T.mjs

@@ -1,7 +1,11 @@
-import { classNames, layoutSidebarClasses, layoutSidebarCollapsedClasses, getSidebarStyle } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
 // src/components/Sidebar.tsx
+import {
+  classNames,
+  layoutSidebarClasses,
+  layoutSidebarCollapsedClasses,
+  getSidebarStyle
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var Sidebar = ({
   className,
   width = "256px",
@@ -23,4 +27,6 @@ var Sidebar = ({
   return /* @__PURE__ */ jsx("aside", { className: sidebarClasses, style: sidebarStyle, ...props, children });
 };
 
-export { Sidebar };
+export {
+  Sidebar
+};

package/dist/chunk-SIDDYP3O.mjs

@@ -0,0 +1,167 @@
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
+
+// src/components/OrgChart.tsx
+import { useMemo, useState } from "react";
+import {
+  classNames,
+  computeOrgChartLayout,
+  getChartInnerRect,
+  getOrgChartNodeAriaLabel,
+  getOrgChartNodeClasses,
+  orgChartLinkClasses,
+  orgChartNodeLabelClasses,
+  orgChartNodeRectClasses,
+  orgChartNodeSubtitleClasses,
+  orgChartNodeTitleClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OrgChart({
+  data,
+  width = 720,
+  height = 420,
+  padding = 24,
+  nodeWidth = 160,
+  nodeHeight = 72,
+  levelGap = 80,
+  siblingGap = 32,
+  direction = "vertical",
+  showAvatars = true,
+  showSubtitles = true,
+  hoverable = false,
+  selectable = false,
+  selectedId,
+  activeOpacity = 1,
+  inactiveOpacity = 0.35,
+  colors,
+  title,
+  desc,
+  ariaLabel = "Organization chart",
+  className,
+  onNodeClick,
+  onNodeHover,
+  onSelectedIdChange
+}) {
+  const [innerSelectedId, setInnerSelectedId] = useState(null);
+  const [hoveredId, setHoveredId] = useState(null);
+  const resolvedSelectedId = selectedId === void 0 ? innerSelectedId : selectedId;
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [height, padding, width]
+  );
+  const layout = useMemo(
+    () => computeOrgChartLayout(data, {
+      nodeWidth,
+      nodeHeight,
+      levelGap,
+      siblingGap,
+      direction,
+      colors
+    }),
+    [colors, data, direction, levelGap, nodeHeight, nodeWidth, siblingGap]
+  );
+  const offsetX = Math.max(0, (innerRect.width - layout.width) / 2);
+  const offsetY = Math.max(0, (innerRect.height - layout.height) / 2);
+  const activeId = resolvedSelectedId ?? hoveredId;
+  const selectNode = (node) => {
+    if (selectable && !node.node.disabled) {
+      const nextId = resolvedSelectedId === node.id ? null : node.id;
+      if (selectedId === void 0) setInnerSelectedId(nextId);
+      onSelectedIdChange?.(nextId);
+    }
+    onNodeClick?.(node.node);
+  };
+  const setHoveredNode = (node) => {
+    if (!hoverable) return;
+    setHoveredId(node?.id ?? null);
+    onNodeHover?.(node?.node ?? null);
+  };
+  const getNodeOpacity = (node) => {
+    if (activeId === null) return activeOpacity;
+    return activeId === node.id ? activeOpacity : inactiveOpacity;
+  };
+  return /* @__PURE__ */ jsx(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      role: "img",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX}, ${offsetY})`, "data-series-type": "org-chart", children: [
+        /* @__PURE__ */ jsx("g", { "data-org-chart-links": "true", children: layout.links.map((link) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: link.path,
+            className: orgChartLinkClasses
+          },
+          `${link.sourceId}-${link.targetId}`
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-org-chart-nodes": "true", children: layout.nodes.map((node) => {
+          const selected = resolvedSelectedId === node.id;
+          const interactive = (hoverable || selectable) && !node.node.disabled;
+          const textStart = showAvatars && node.node.avatar ? 58 : 16;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              transform: `translate(${node.x}, ${node.y})`,
+              className: getOrgChartNodeClasses(interactive, selected),
+              opacity: getNodeOpacity(node),
+              role: interactive ? "button" : "group",
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": getOrgChartNodeAriaLabel(node.node),
+              onMouseEnter: () => setHoveredNode(node),
+              onMouseLeave: () => setHoveredNode(null),
+              onClick: () => selectNode(node),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  selectNode(node);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: node.width,
+                    height: node.height,
+                    rx: 8,
+                    className: orgChartNodeRectClasses,
+                    stroke: selected ? node.color : void 0,
+                    strokeWidth: selected ? 2 : 1
+                  }
+                ),
+                /* @__PURE__ */ jsx("rect", { width: 4, height: node.height, rx: 2, fill: node.color }),
+                showAvatars && node.node.avatar ? /* @__PURE__ */ jsx(
+                  "image",
+                  {
+                    href: node.node.avatar,
+                    x: 16,
+                    y: 16,
+                    width: 32,
+                    height: 32,
+                    preserveAspectRatio: "xMidYMid slice",
+                    "aria-hidden": "true"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("text", { x: textStart, y: 26, className: orgChartNodeLabelClasses, children: node.node.label }),
+                node.node.title ? /* @__PURE__ */ jsx("text", { x: textStart, y: 44, className: orgChartNodeTitleClasses, children: node.node.title }) : null,
+                showSubtitles && node.node.subtitle ? /* @__PURE__ */ jsx("text", { x: textStart, y: 60, className: orgChartNodeSubtitleClasses, children: node.node.subtitle }) : null
+              ]
+            },
+            node.id
+          );
+        }) })
+      ] })
+    }
+  );
+}
+OrgChart.displayName = "OrgChart";
+
+export {
+  OrgChart
+};

package/dist/chunk-SJ5RFU2O.mjs

@@ -1,7 +1,9 @@
-import { classNames, layoutFooterClasses } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
 // src/components/Footer.tsx
+import {
+  classNames,
+  layoutFooterClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var Footer = ({
   className,
   height = "auto",
@@ -14,4 +16,6 @@ var Footer = ({
   return /* @__PURE__ */ jsx("footer", { className: footerClasses, style: footerStyle, ...props, children });
 };
 
-export { Footer };
+export {
+  Footer
+};