@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/{chunk-6744DTEB.mjs → chunk-ELRZ2ZHM.mjs}

@@ -1,146 +1,37 @@
-import React, { createContext, useContext, useId, useMemo, useState, useCallback, useRef } from 'react';
-import { classNames, getTabsContainerClasses, getTabNavClasses, getTabNavListClasses, isKeyActive, getTabItemClasses, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD, tabAddButtonClasses, tabContentBaseClasses } from '@expcat/tigercat-core';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-// src/components/TabPane.tsx
+// src/components/Tabs.tsx
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  useCallback,
+  useId,
+  useRef
+} from "react";
+import {
+  classNames,
+  closeIconPathD,
+  closeIconViewBox,
+  getTabsContainerClasses,
+  getTabItemClasses,
+  getTabNavClasses,
+  getTabNavListClasses,
+  getTabNavListStyle,
+  getTabPaneClasses,
+  getTabIndicatorClasses,
+  getTabIndicatorStyle,
+  getGestureTouchPoint,
+  resolveSwipeGesture,
+  isKeyActive,
+  tabAddButtonClasses,
+  tabCloseButtonClasses,
+  tabContentBaseClasses
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var TabsContext = createContext(null);
 function useTabsContext() {
   return useContext(TabsContext);
 }
-var Tabs = ({
-  activeKey: controlledActiveKey,
-  defaultActiveKey,
-  type = "line",
-  tabPosition = "top",
-  size = "medium",
-  closable = false,
-  centered = false,
-  destroyInactiveTabPane = false,
-  lazy = false,
-  className,
-  style,
-  onChange,
-  onTabClick,
-  onEdit,
-  children
-}) => {
-  const reactId = useId();
-  const idBase = useMemo(() => `tiger-tabs-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
-  const [internalActiveKey, setInternalActiveKey] = useState(
-    defaultActiveKey
-  );
-  const containerClasses = useMemo(() => {
-    return classNames(getTabsContainerClasses(tabPosition), className);
-  }, [tabPosition, className]);
-  const tabNavClasses = useMemo(() => {
-    return getTabNavClasses(tabPosition, type);
-  }, [tabPosition, type]);
-  const tabNavListClasses = useMemo(() => {
-    return getTabNavListClasses(tabPosition, centered);
-  }, [tabPosition, centered]);
-  const { tabItems, tabPanes, firstTabKey } = useMemo(() => {
-    const items = [];
-    const panes = [];
-    let firstKey;
-    React.Children.forEach(children, (child) => {
-      if (!React.isValidElement(child) || child.type !== TabPane) return;
-      const key = child.props.tabKey;
-      if (firstKey === void 0) firstKey = key;
-      const resolvedActiveKey = controlledActiveKey ?? defaultActiveKey ?? firstKey;
-      const tabId = `${idBase}-tab-${String(key)}`;
-      const panelId = `${idBase}-panel-${String(key)}`;
-      items.push(
-        React.cloneElement(child, {
-          renderMode: "tab",
-          tabId,
-          panelId,
-          tabIndex: key === resolvedActiveKey ? 0 : -1
-        })
-      );
-      panes.push(React.cloneElement(child, { renderMode: "pane", tabId, panelId }));
-    });
-    return { tabItems: items, tabPanes: panes, firstTabKey: firstKey };
-  }, [children, controlledActiveKey, defaultActiveKey, idBase]);
-  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
-  const handleTabClick = useCallback(
-    (key) => {
-      onTabClick?.(key);
-      if (key === activeKey) {
-        return;
-      }
-      if (controlledActiveKey === void 0) {
-        setInternalActiveKey(key);
-      }
-      onChange?.(key);
-    },
-    [activeKey, controlledActiveKey, onChange, onTabClick]
-  );
-  const handleTabClose = useCallback(
-    (key, event) => {
-      event.stopPropagation();
-      onEdit?.({ targetKey: key, action: "remove" });
-    },
-    [onEdit]
-  );
-  const handleTabAdd = useCallback(() => {
-    onEdit?.({ targetKey: void 0, action: "add" });
-  }, [onEdit]);
-  const contextValue = useMemo(
-    () => ({
-      activeKey,
-      type,
-      size,
-      tabPosition,
-      closable,
-      destroyInactiveTabPane,
-      lazy,
-      idBase,
-      handleTabClick,
-      handleTabClose
-    }),
-    [
-      activeKey,
-      type,
-      size,
-      tabPosition,
-      closable,
-      destroyInactiveTabPane,
-      lazy,
-      idBase,
-      handleTabClick,
-      handleTabClose
-    ]
-  );
-  const tabNavContent = /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: tabNavClasses,
-      role: "tablist",
-      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
-      children: /* @__PURE__ */ jsxs("div", { className: tabNavListClasses, children: [
-        tabItems,
-        type === "editable-card" && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: tabAddButtonClasses,
-            onClick: handleTabAdd,
-            "aria-label": "Add tab",
-            children: "+"
-          }
-        )
-      ] })
-    }
-  );
-  const tabContent = /* @__PURE__ */ jsx("div", { className: tabContentBaseClasses, 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
-  ] }) }) });
-};
 var TabPane = ({
   tabKey,
   label,
@@ -202,8 +93,8 @@ var TabPane = ({
     const tabButtons = Array.from(
       tabList?.querySelectorAll('[role="tab"]') ?? []
     );
-    const enabled = tabButtons.filter((b) => !b.disabled);
-    const currentIndex = enabled.findIndex((b) => b.id === tabId);
+    const enabled = tabButtons.filter((button) => !button.disabled);
+    const currentIndex = enabled.findIndex((button) => button.id === tabId);
     if (currentIndex === -1) {
       return;
     }
@@ -298,5 +189,225 @@ var TabPane = ({
     }
   );
 };
+var Tabs = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  type = "line",
+  tabPosition = "top",
+  size = "medium",
+  closable = false,
+  centered = false,
+  destroyInactiveTabPane = false,
+  lazy = false,
+  swipeable = true,
+  className,
+  style,
+  onChange,
+  onTabClick,
+  onEdit,
+  children
+}) => {
+  const reactId = useId();
+  const idBase = useMemo(() => `tiger-tabs-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
+  const [internalActiveKey, setInternalActiveKey] = useState(
+    defaultActiveKey
+  );
+  const swipeStartRef = useRef(null);
+  const containerClasses = useMemo(() => {
+    return classNames(getTabsContainerClasses(tabPosition), className);
+  }, [tabPosition, className]);
+  const tabNavClasses = useMemo(() => {
+    return getTabNavClasses(tabPosition, type);
+  }, [tabPosition, type]);
+  const tabNavListClasses = useMemo(() => {
+    return getTabNavListClasses(tabPosition, centered);
+  }, [tabPosition, centered]);
+  const { tabItems, tabPanes, firstTabKey, tabKeys, enabledTabKeys } = useMemo(() => {
+    const items = [];
+    const panes = [];
+    const keys = [];
+    const enabledKeys = [];
+    let firstKey;
+    React.Children.forEach(children, (child) => {
+      if (!React.isValidElement(child) || child.type !== TabPane) return;
+      const key = child.props.tabKey;
+      if (firstKey === void 0) firstKey = key;
+      keys.push(key);
+      if (!child.props.disabled) enabledKeys.push(key);
+      const resolvedActiveKey = controlledActiveKey ?? defaultActiveKey ?? firstKey;
+      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,
+          tabIndex: key === resolvedActiveKey ? 0 : -1
+        })
+      );
+      panes.push(
+        React.cloneElement(child, {
+          key: `pane-${String(key)}`,
+          renderMode: "pane",
+          tabId,
+          panelId
+        })
+      );
+    });
+    return {
+      tabItems: items,
+      tabPanes: panes,
+      firstTabKey: firstKey,
+      tabKeys: keys,
+      enabledTabKeys: enabledKeys
+    };
+  }, [children, controlledActiveKey, defaultActiveKey, idBase]);
+  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
+  const activeTabIndex = useMemo(() => tabKeys.indexOf(activeKey ?? ""), [tabKeys, activeKey]);
+  const handleTabClick = useCallback(
+    (key) => {
+      onTabClick?.(key);
+      if (key === activeKey) {
+        return;
+      }
+      if (controlledActiveKey === void 0) {
+        setInternalActiveKey(key);
+      }
+      onChange?.(key);
+    },
+    [activeKey, controlledActiveKey, onChange, onTabClick]
+  );
+  const handleTabClose = useCallback(
+    (key, event) => {
+      event.stopPropagation();
+      onEdit?.({ targetKey: key, action: "remove" });
+    },
+    [onEdit]
+  );
+  const handleTabAdd = useCallback(() => {
+    onEdit?.({ targetKey: void 0, action: "add" });
+  }, [onEdit]);
+  const activateAdjacentTab = useCallback(
+    (direction) => {
+      if (enabledTabKeys.length <= 1) return;
+      const currentIndex = enabledTabKeys.indexOf(activeKey ?? enabledTabKeys[0]);
+      const baseIndex = currentIndex >= 0 ? currentIndex : 0;
+      const nextKey = enabledTabKeys[(baseIndex + direction + enabledTabKeys.length) % enabledTabKeys.length];
+      handleTabClick(nextKey);
+    },
+    [activeKey, enabledTabKeys, handleTabClick]
+  );
+  const handleContentTouchStart = useCallback(
+    (event) => {
+      if (!swipeable || event.touches.length !== 1) return;
+      swipeStartRef.current = getGestureTouchPoint(event.touches, event.timeStamp);
+    },
+    [swipeable]
+  );
+  const handleContentTouchEnd = useCallback(
+    (event) => {
+      if (!swipeable || !swipeStartRef.current || event.changedTouches.length !== 1) 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;
+      if (swipe.direction === "left") activateAdjacentTab(1);
+      if (swipe.direction === "right") activateAdjacentTab(-1);
+    },
+    [activateAdjacentTab, swipeable]
+  );
+  const contextValue = useMemo(
+    () => ({
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      lazy,
+      swipeable,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    }),
+    [
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      lazy,
+      swipeable,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    ]
+  );
+  const tabNavContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tabNavClasses,
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: tabNavListClasses,
+          style: getTabNavListStyle(type, tabPosition, tabKeys.length),
+          children: [
+            type === "line" && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-tiger-tabs-indicator": "true",
+                "aria-hidden": "true",
+                className: getTabIndicatorClasses(type, tabPosition),
+                style: getTabIndicatorStyle(activeTabIndex, tabKeys.length, tabPosition)
+              }
+            ),
+            tabItems,
+            type === "editable-card" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: tabAddButtonClasses,
+                onClick: handleTabAdd,
+                "aria-label": "Add tab",
+                children: "+"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  const tabContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tabContentBaseClasses,
+      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 { TabPane, Tabs, useTabsContext };
+export {
+  useTabsContext,
+  TabPane,
+  Tabs
+};