@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-4BJCH6FI.mjs

@@ -0,0 +1,454 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Tabs.tsx
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  useCallback,
+  useId,
+  useRef,
+  useLayoutEffect
+} from "react";
+import {
+  classNames,
+  closeIconPathD,
+  closeIconViewBox,
+  getTabsContainerClasses,
+  getTabItemClasses,
+  getTabNavClasses,
+  getTabNavListClasses,
+  getTabPaneClasses,
+  getTabIndicatorClasses,
+  getTabIndicatorStyleFromBox,
+  getTabContentClasses,
+  getTabAddButtonClasses,
+  tabCloseButtonClasses,
+  getGestureTouchPoint,
+  resolveSwipeGesture,
+  isKeyActive,
+  getNextActiveKey,
+  getAdjacentEnabledKey,
+  getTabKeyboardDelta,
+  getTabSwipeDelta,
+  isSwipeBlockedByNestedScroll,
+  measureTabIndicatorBox,
+  formatTabKey,
+  parseTabKey,
+  resolveDisplayedActiveKey,
+  isTabPaneType,
+  isTabPaneChildProps,
+  readTabPaneKey,
+  mergeTigerLocale,
+  getTabsLabels,
+  getLocaleDirection
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TabsContext = createContext(null);
+function useTabsContext() {
+  return useContext(TabsContext);
+}
+function isTabPaneElement(child) {
+  if (!React.isValidElement(child)) return false;
+  return isTabPaneType(child.type, TabPane) || isTabPaneChildProps(child.props);
+}
+var TabPane = ({
+  tabKey,
+  label,
+  disabled = false,
+  closable,
+  icon,
+  className,
+  style,
+  children,
+  renderMode = "pane",
+  tabId,
+  panelId
+}) => {
+  const tabsContext = useTabsContext();
+  if (!tabsContext) {
+    throw new Error("TabPane must be used within a Tabs component");
+  }
+  const isActive = isKeyActive(tabKey, tabsContext.activeKey);
+  const hasBeenActivatedRef = useRef(isActive);
+  if (isActive) hasBeenActivatedRef.current = true;
+  const isClosable = closable !== void 0 ? closable : tabsContext.closable && tabsContext.type === "editable-card";
+  const tabItemClasses = getTabItemClasses(
+    isActive,
+    disabled,
+    tabsContext.type,
+    tabsContext.size,
+    tabsContext.tabPosition
+  );
+  const tabPaneClasses = classNames(getTabPaneClasses(isActive), className);
+  const handleClick = () => {
+    if (!disabled) tabsContext.handleTabClick(tabKey);
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    if (isClosable && (event.key === "Backspace" || event.key === "Delete")) {
+      event.preventDefault();
+      tabsContext.handleTabClose(tabKey, event);
+      return;
+    }
+    const tabList = event.currentTarget.closest('[role="tablist"]');
+    const dir = tabList instanceof HTMLElement && getComputedStyle(tabList).direction === "rtl" ? "rtl" : "ltr";
+    const delta = getTabKeyboardDelta(event.key, tabsContext.tabPosition, dir);
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      tabsContext.handleTabClick(tabKey);
+      return;
+    }
+    if (delta == null) return;
+    event.preventDefault();
+    const tabButtons = Array.from(tabList?.querySelectorAll('[role="tab"]') ?? []);
+    const records = tabButtons.map((button) => ({
+      key: parseTabKey(button.getAttribute("data-tiger-tab-key")) ?? button.id,
+      disabled: button.getAttribute("aria-disabled") === "true"
+    }));
+    const enabled = records.filter((tab) => !tab.disabled);
+    if (enabled.length === 0) return;
+    const nextKey = delta === "home" ? enabled[0].key : delta === "end" ? enabled[enabled.length - 1].key : getAdjacentEnabledKey(records, tabKey, delta);
+    if (nextKey === void 0) return;
+    const nextButton = tabButtons.find(
+      (button) => isKeyActive(parseTabKey(button.getAttribute("data-tiger-tab-key")) ?? button.id, nextKey)
+    );
+    nextButton?.focus();
+    tabsContext.handleTabClick(nextKey);
+  };
+  const handleClose = (event) => {
+    event.stopPropagation();
+    if (!disabled) tabsContext.handleTabClose(tabKey, event);
+  };
+  const panelMounted = tabsContext.lazy ? hasBeenActivatedRef.current && (isActive || !tabsContext.destroyInactiveTabPane) : isActive || !tabsContext.destroyInactiveTabPane;
+  if (renderMode === "tab") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: tabItemClasses,
+        role: "tab",
+        id: tabId,
+        "aria-controls": panelMounted ? panelId : void 0,
+        "aria-selected": isActive,
+        "aria-disabled": disabled || void 0,
+        "aria-label": label,
+        tabIndex: disabled ? -1 : isActive ? 0 : -1,
+        "data-tiger-tabs-id": tabsContext.idBase,
+        "data-tiger-tab-key": formatTabKey(tabKey),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "flex items-center", children: icon }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: label }),
+          isClosable && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: tabCloseButtonClasses,
+              "aria-hidden": "true",
+              onClick: handleClose,
+              onKeyDown: (event) => event.stopPropagation(),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "w-4 h-4",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: closeIconViewBox,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: "2",
+                      d: closeIconPathD
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (!panelMounted) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tabPaneClasses,
+      style,
+      role: "tabpanel",
+      id: panelId,
+      "aria-labelledby": tabId,
+      "aria-hidden": !isActive,
+      inert: !isActive ? true : void 0,
+      children
+    }
+  );
+};
+TabPane.displayName = "TabPane";
+var Tabs = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  type = "line",
+  tabPosition = "top",
+  size = "medium",
+  closable = false,
+  centered = false,
+  destroyInactiveTabPane = false,
+  lazy = false,
+  swipeable = false,
+  className,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  style,
+  locale,
+  labels: labelsOverride,
+  onActiveKeyChange,
+  onTabClick,
+  onEdit,
+  children
+}) => {
+  const config = useTigerConfig();
+  const reactId = useId();
+  const idBase = useMemo(() => `tiger-tabs-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getTabsLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const dir = getLocaleDirection(mergedLocale);
+  const [internalActiveKey, setInternalActiveKey] = useState(
+    defaultActiveKey
+  );
+  const swipeStartRef = useRef(null);
+  const tabListRef = useRef(null);
+  const [indicatorBox, setIndicatorBox] = useState({ opacity: "0" });
+  const containerClasses = classNames(getTabsContainerClasses(tabPosition), className);
+  const tabNavClasses = getTabNavClasses(tabPosition, type);
+  const tabNavListClasses = getTabNavListClasses(tabPosition, centered);
+  const { tabItems, tabPanes, tabRecords } = useMemo(() => {
+    const items = [];
+    const panes = [];
+    const records = [];
+    React.Children.forEach(children, (child) => {
+      if (!isTabPaneElement(child)) return;
+      const key = readTabPaneKey(child.props);
+      if (key === void 0) return;
+      records.push({
+        key,
+        disabled: Boolean(child.props.disabled),
+        closable: child.props.closable !== void 0 ? child.props.closable : closable && type === "editable-card",
+        label: child.props.label
+      });
+      const tabId = `${idBase}-tab-${String(key)}`;
+      const panelId = `${idBase}-panel-${String(key)}`;
+      items.push(
+        React.cloneElement(child, {
+          key: `tab-${String(key)}`,
+          renderMode: "tab",
+          tabId,
+          panelId
+        })
+      );
+      panes.push(
+        React.cloneElement(child, {
+          key: `pane-${String(key)}`,
+          renderMode: "pane",
+          tabId,
+          panelId
+        })
+      );
+    });
+    return { tabItems: items, tabPanes: panes, tabRecords: records };
+  }, [children, idBase, closable, type]);
+  const requestedKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey;
+  const activeKey = resolveDisplayedActiveKey(requestedKey, tabRecords);
+  useLayoutEffect(() => {
+    const list = tabListRef.current;
+    if (!list || type !== "line") {
+      setIndicatorBox({ opacity: "0" });
+      return;
+    }
+    const update = () => {
+      const tab = list.querySelector('[role="tab"][aria-selected="true"]');
+      const computedDir = getComputedStyle(list).direction === "rtl" ? "rtl" : dir;
+      const box = measureTabIndicatorBox(list, tab, tabPosition, computedDir);
+      setIndicatorBox(getTabIndicatorStyleFromBox(box, tabPosition));
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(list);
+    Array.from(list.querySelectorAll('[role="tab"]')).forEach((node) => observer.observe(node));
+    return () => observer.disconnect();
+  }, [activeKey, tabRecords, tabPosition, dir, type, tabItems]);
+  const handleTabClick = useCallback(
+    (key) => {
+      onTabClick?.(key);
+      if (isKeyActive(key, activeKey)) return;
+      if (controlledActiveKey === void 0) setInternalActiveKey(key);
+      onActiveKeyChange?.(key);
+    },
+    [activeKey, controlledActiveKey, onActiveKeyChange, onTabClick]
+  );
+  const handleTabClose = useCallback(
+    (key, event) => {
+      event.stopPropagation();
+      if (controlledActiveKey === void 0 && isKeyActive(key, activeKey)) {
+        setInternalActiveKey(getNextActiveKey(key, activeKey, tabRecords));
+      }
+      onEdit?.({ targetKey: key, action: "remove" });
+    },
+    [onEdit, controlledActiveKey, activeKey, tabRecords]
+  );
+  const handleTabAdd = useCallback(() => {
+    onEdit?.({ targetKey: void 0, action: "add" });
+  }, [onEdit]);
+  const handleContentTouchStart = useCallback(
+    (event) => {
+      if (!swipeable || event.touches.length !== 1) return;
+      if (tabPosition === "left" || tabPosition === "right") {
+        swipeStartRef.current = getGestureTouchPoint(event.touches, event.timeStamp);
+        return;
+      }
+      swipeStartRef.current = getGestureTouchPoint(event.touches, event.timeStamp);
+    },
+    [swipeable, tabPosition]
+  );
+  const handleContentTouchEnd = useCallback(
+    (event) => {
+      if (!swipeable || !swipeStartRef.current || event.changedTouches.length !== 1) return;
+      if (isSwipeBlockedByNestedScroll(event.target, event.currentTarget)) {
+        swipeStartRef.current = null;
+        return;
+      }
+      const endPoint = getGestureTouchPoint(event.changedTouches, event.timeStamp);
+      const swipe = resolveSwipeGesture(swipeStartRef.current, endPoint, {
+        minDistance: 48,
+        maxCrossAxisRatio: 0.75
+      });
+      swipeStartRef.current = null;
+      if (!swipe) return;
+      const computedDir = tabListRef.current && getComputedStyle(tabListRef.current).direction === "rtl" ? "rtl" : dir;
+      const delta = getTabSwipeDelta(swipe.direction, tabPosition, computedDir);
+      if (delta == null) return;
+      const nextKey = getAdjacentEnabledKey(tabRecords, activeKey, delta);
+      if (nextKey !== void 0) handleTabClick(nextKey);
+    },
+    [activeKey, dir, handleTabClick, swipeable, tabPosition, tabRecords]
+  );
+  const contextValue = useMemo(
+    () => ({
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      lazy,
+      swipeable,
+      idBase,
+      labels,
+      handleTabClick,
+      handleTabClose
+    }),
+    [
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      lazy,
+      swipeable,
+      idBase,
+      labels,
+      handleTabClick,
+      handleTabClose
+    ]
+  );
+  const tabNavContent = /* @__PURE__ */ jsxs("div", { className: tabNavClasses, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: tabListRef,
+        className: tabNavListClasses,
+        role: "tablist",
+        id,
+        dir,
+        "aria-label": ariaLabel ?? (ariaLabelledby ? void 0 : labels.tablistAriaLabel),
+        "aria-labelledby": ariaLabelledby,
+        "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
+        children: [
+          type === "line" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-tiger-tabs-indicator": "true",
+              "aria-hidden": "true",
+              className: getTabIndicatorClasses(type, tabPosition),
+              style: indicatorBox
+            }
+          ),
+          tabItems
+        ]
+      }
+    ),
+    tabRecords.map(
+      (tab) => tab.closable && !tab.disabled ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "sr-only",
+          "aria-label": labels.closeTabAriaLabel.replace("{label}", String(tab.label ?? tab.key)),
+          onClick: (event) => handleTabClose(tab.key, event),
+          children: labels.closeTabAriaLabel.replace("{label}", String(tab.label ?? tab.key))
+        },
+        `close-${String(tab.key)}`
+      ) : null
+    ),
+    type === "editable-card" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getTabAddButtonClasses(tabPosition),
+        onClick: handleTabAdd,
+        "aria-label": labels.addTabAriaLabel,
+        children: "+"
+      }
+    )
+  ] });
+  const tabContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: getTabContentClasses(tabPosition),
+      onTouchStart: handleContentTouchStart,
+      onTouchEnd: handleContentTouchEnd,
+      onTouchCancel: () => {
+        swipeStartRef.current = null;
+      },
+      children: tabPanes
+    }
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, style, children: tabPosition === "bottom" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    tabContent,
+    tabNavContent
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    tabNavContent,
+    tabContent
+  ] }) }) });
+};
+
+export {
+  useTabsContext,
+  TabPane,
+  Tabs
+};

package/dist/{chunk-QB5472NM.mjs → chunk-4DFN6RZ4.mjs}

@@ -1,27 +1,30 @@
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/Timeline.tsx
 import { useMemo } from "react";
 import {
+  EMPTY_TIMELINE_ITEMS,
   classNames,
-  mergeTigerLocale,
-  resolveLocaleText,
+  getPendingDotClasses,
   getTimelineContainerClasses,
+  getTimelineContentClasses,
+  getTimelineDotClasses,
+  getTimelineHeadClasses,
   getTimelineItemClasses,
+  getTimelineItemKey,
   getTimelineTailClasses,
-  getTimelineHeadClasses,
-  getTimelineDotClasses,
-  getTimelineContentClasses,
-  getPendingDotClasses,
-  timelineListClasses,
+  mergeTigerLocale,
+  processTimelineItems,
+  resolveLocaleText,
+  timelineDescriptionClasses,
   timelineLabelClasses,
-  timelineDescriptionClasses
+  timelineListClasses
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Timeline = ({
-  items = [],
+  items,
   mode = "left",
   pending = false,
   pendingDot,
@@ -38,29 +41,24 @@ var Timeline = ({
     () => mergeTigerLocale(config.locale, locale),
     [config.locale, locale]
   );
-  const processedItems = useMemo(() => {
-    let result = reverse ? [...items].reverse() : [...items];
-    if (mode === "alternate") {
-      result = result.map((item, index) => ({
-        ...item,
-        position: item.position || (index % 2 === 0 ? "left" : "right")
-      }));
-    }
-    return result;
-  }, [items, reverse, mode]);
+  const processedItems = useMemo(
+    () => processTimelineItems(items ?? EMPTY_TIMELINE_ITEMS, { reverse, mode }),
+    [items, reverse, mode]
+  );
   const containerClasses = useMemo(
     () => classNames(getTimelineContainerClasses(mode), timelineListClasses, className),
     [mode, className]
   );
-  const getItemKey = (item, index) => item.key || index;
   const wrapCustomDot = (node) => /* @__PURE__ */ jsx("div", { className: getTimelineDotClasses(void 0, true), children: node });
   const renderDotElement = (item, isPending = false) => {
-    if (customRenderDot) return wrapCustomDot(customRenderDot(item));
+    if (isPending && pendingDot) {
+      return wrapCustomDot(pendingDot);
+    }
+    if (customRenderDot) {
+      return wrapCustomDot(customRenderDot(item, { pending: isPending }));
+    }
     if (item.dot) return wrapCustomDot(item.dot);
     if (isPending) {
-      if (pendingDot) {
-        return wrapCustomDot(pendingDot);
-      }
       return /* @__PURE__ */ jsx("div", { className: getPendingDotClasses() });
     }
     const dotClasses = getTimelineDotClasses(item.color);
@@ -68,7 +66,7 @@ var Timeline = ({
     return /* @__PURE__ */ jsx("div", { className: dotClasses, style: dotStyle });
   };
   const renderTimelineItem = (item, index) => {
-    const key = getItemKey(item, index);
+    const key = getTimelineItemKey(item, index);
     const isLast = index === processedItems.length - 1 && !pending;
     const position = item.position;
     const itemClasses = getTimelineItemClasses(mode, position, isLast);
@@ -115,6 +113,7 @@ var Timeline = ({
     {
       ...ulProps,
       className: containerClasses,
+      role: "list",
       "aria-busy": ulProps["aria-busy"] ?? (pending ? true : void 0),
       children: [
         processedItems.map((item, index) => renderTimelineItem(item, index)),