@expcat/tigercat-react 0.0.1

package/dist/chunk-CTAMMQBC.mjs

@@ -0,0 +1,297 @@
+import { useState, useCallback } from 'react';
+import { getTotalPages, validateCurrentPage, getPageRange, getPaginationContainerClasses, defaultTotalText, getTotalTextClasses, getPaginationButtonBaseClasses, classNames, getPageNumbers, getPaginationEllipsisClasses, getPaginationButtonActiveClasses, getPageSizeSelectorClasses, getQuickJumperInputClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/Pagination.tsx
+var Pagination = ({
+  current: controlledCurrent,
+  defaultCurrent = 1,
+  total = 0,
+  pageSize: controlledPageSize,
+  defaultPageSize = 10,
+  pageSizeOptions = [10, 20, 50, 100],
+  showQuickJumper = false,
+  showSizeChanger = false,
+  showTotal = true,
+  totalText,
+  simple = false,
+  size = "medium",
+  align = "center",
+  disabled = false,
+  hideOnSinglePage = false,
+  showLessItems = false,
+  className,
+  style,
+  onChange,
+  onPageSizeChange,
+  ...props
+}) => {
+  const { "aria-label": ariaLabelProp, ...navProps } = props;
+  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const [quickJumperValue, setQuickJumperValue] = useState("");
+  const currentPage = controlledCurrent !== void 0 ? controlledCurrent : internalCurrent;
+  const currentPageSize = controlledPageSize !== void 0 ? controlledPageSize : internalPageSize;
+  const totalPages = getTotalPages(total, currentPageSize);
+  const validatedCurrentPage = validateCurrentPage(currentPage, totalPages);
+  const pageRange = getPageRange(validatedCurrentPage, currentPageSize, total);
+  if (hideOnSinglePage && totalPages <= 1) {
+    return null;
+  }
+  const handlePageChange = useCallback(
+    (page) => {
+      if (disabled) return;
+      if (page === validatedCurrentPage) return;
+      if (page < 1 || page > totalPages) return;
+      if (controlledCurrent === void 0) {
+        setInternalCurrent(page);
+      }
+      onChange?.(page, currentPageSize);
+    },
+    [disabled, validatedCurrentPage, totalPages, controlledCurrent, onChange, currentPageSize]
+  );
+  const handlePageSizeChange = useCallback(
+    (newPageSize) => {
+      if (disabled) return;
+      const newTotalPages = getTotalPages(total, newPageSize);
+      let newPage = validatedCurrentPage;
+      if (newPage > newTotalPages) {
+        newPage = Math.max(1, newTotalPages);
+      }
+      if (controlledPageSize === void 0) {
+        setInternalPageSize(newPageSize);
+      }
+      if (controlledCurrent === void 0 && newPage !== validatedCurrentPage) {
+        setInternalCurrent(newPage);
+      }
+      onPageSizeChange?.(newPage, newPageSize);
+      if (newPage !== validatedCurrentPage) {
+        onChange?.(newPage, newPageSize);
+      }
+    },
+    [
+      disabled,
+      total,
+      validatedCurrentPage,
+      controlledPageSize,
+      controlledCurrent,
+      onPageSizeChange,
+      onChange
+    ]
+  );
+  const handleQuickJumperSubmit = useCallback(() => {
+    const page = parseInt(quickJumperValue, 10);
+    if (!isNaN(page)) {
+      handlePageChange(page);
+    }
+    setQuickJumperValue("");
+  }, [quickJumperValue, handlePageChange]);
+  const handleQuickJumperKeyPress = useCallback(
+    (event) => {
+      if (event.key === "Enter") {
+        handleQuickJumperSubmit();
+      }
+    },
+    [handleQuickJumperSubmit]
+  );
+  const containerClasses = getPaginationContainerClasses(align, className);
+  const elements = [];
+  if (showTotal) {
+    const totalTextFn = totalText || defaultTotalText;
+    const totalTextContent = totalTextFn(total, pageRange);
+    elements.push(
+      /* @__PURE__ */ jsx("span", { className: getTotalTextClasses(size), children: totalTextContent }, "total")
+    );
+  }
+  if (simple) {
+    const prevDisabled = validatedCurrentPage <= 1 || disabled;
+    const nextDisabled = validatedCurrentPage >= totalPages || disabled;
+    elements.push(
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getPaginationButtonBaseClasses(size),
+          disabled: prevDisabled,
+          onClick: () => handlePageChange(validatedCurrentPage - 1),
+          "aria-label": "\u4E0A\u4E00\u9875",
+          children: "\u2039"
+        },
+        "prev"
+      )
+    );
+    elements.push(
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: classNames(
+            "mx-2",
+            size === "small" ? "text-sm" : size === "large" ? "text-lg" : "text-base"
+          ),
+          children: [
+            validatedCurrentPage,
+            " / ",
+            totalPages
+          ]
+        },
+        "current"
+      )
+    );
+    elements.push(
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getPaginationButtonBaseClasses(size),
+          disabled: nextDisabled,
+          onClick: () => handlePageChange(validatedCurrentPage + 1),
+          "aria-label": "\u4E0B\u4E00\u9875",
+          children: "\u203A"
+        },
+        "next"
+      )
+    );
+  } else {
+    const prevDisabled = validatedCurrentPage <= 1 || disabled;
+    const nextDisabled = validatedCurrentPage >= totalPages || disabled;
+    elements.push(
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getPaginationButtonBaseClasses(size),
+          disabled: prevDisabled,
+          onClick: () => handlePageChange(validatedCurrentPage - 1),
+          "aria-label": "\u4E0A\u4E00\u9875",
+          children: "\u2039"
+        },
+        "prev"
+      )
+    );
+    const pageNumbers = getPageNumbers(validatedCurrentPage, totalPages, showLessItems);
+    pageNumbers.forEach((pageNum, index) => {
+      if (pageNum === "...") {
+        elements.push(
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: getPaginationEllipsisClasses(size),
+              "aria-hidden": "true",
+              children: "..."
+            },
+            `ellipsis-${index}`
+          )
+        );
+      } else {
+        const isActive = pageNum === validatedCurrentPage;
+        elements.push(
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: classNames(
+                getPaginationButtonBaseClasses(size),
+                isActive && getPaginationButtonActiveClasses()
+              ),
+              disabled,
+              onClick: () => handlePageChange(pageNum),
+              "aria-label": `\u7B2C ${pageNum} \u9875`,
+              "aria-current": isActive ? "page" : void 0,
+              children: String(pageNum)
+            },
+            `page-${pageNum}`
+          )
+        );
+      }
+    });
+    elements.push(
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getPaginationButtonBaseClasses(size),
+          disabled: nextDisabled,
+          onClick: () => handlePageChange(validatedCurrentPage + 1),
+          "aria-label": "\u4E0B\u4E00\u9875",
+          children: "\u203A"
+        },
+        "next"
+      )
+    );
+  }
+  if (showSizeChanger) {
+    elements.push(
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: getPageSizeSelectorClasses(size),
+          disabled,
+          value: currentPageSize,
+          onChange: (e) => handlePageSizeChange(parseInt(e.target.value, 10)),
+          "aria-label": "\u6BCF\u9875\u6761\u6570",
+          children: pageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsxs("option", { value: sizeOption, children: [
+            sizeOption,
+            " \u6761/\u9875"
+          ] }, sizeOption))
+        },
+        "size-changer"
+      )
+    );
+  }
+  if (showQuickJumper) {
+    elements.push(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classNames(
+            "ml-2",
+            size === "small" ? "text-sm" : size === "large" ? "text-lg" : "text-base"
+          ),
+          children: "\u8DF3\u81F3"
+        },
+        "jumper-label-start"
+      )
+    );
+    elements.push(
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          className: classNames(getQuickJumperInputClasses(size), "mx-2"),
+          disabled,
+          value: quickJumperValue,
+          onChange: (e) => setQuickJumperValue(e.target.value),
+          onKeyDown: handleQuickJumperKeyPress,
+          min: 1,
+          max: totalPages,
+          "aria-label": "\u8DF3\u8F6C\u9875\u7801"
+        },
+        "jumper-input"
+      )
+    );
+    elements.push(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: size === "small" ? "text-sm" : size === "large" ? "text-lg" : "text-base",
+          children: "\u9875"
+        },
+        "jumper-label-end"
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: containerClasses,
+      ...navProps,
+      role: "navigation",
+      "aria-label": ariaLabelProp ?? "\u5206\u9875\u5BFC\u822A",
+      style,
+      children: elements
+    }
+  );
+};
+var Pagination_default = Pagination;
+
+export { Pagination, Pagination_default };

package/dist/chunk-D3I2SY7X.js

@@ -0,0 +1,301 @@
+'use strict';
+
+var chunkLXA2YBAO_js = require('./chunk-LXA2YBAO.js');
+var chunk3WPKVV4N_js = require('./chunk-3WPKVV4N.js');
+var chunkQFVE7GKD_js = require('./chunk-QFVE7GKD.js');
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var ExpandIcon = ({ expanded }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: tigercatCore.getSubMenuExpandIconClasses(expanded),
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z" })
+  }
+);
+function getMenuButtonsWithin(menuEl) {
+  return Array.from(
+    menuEl.querySelectorAll('button[data-tiger-menuitem="true"]')
+  ).filter((el) => !el.disabled && !el.closest('[data-tiger-menu-hidden="true"]'));
+}
+function roveFocus(current, next) {
+  const menuEl = current.closest('ul[role="menu"]');
+  if (!menuEl) {
+    next.focus();
+    return;
+  }
+  const items = getMenuButtonsWithin(menuEl);
+  items.forEach((el) => {
+    el.tabIndex = el === next ? 0 : -1;
+  });
+  next.focus();
+}
+function moveFocus(current, delta) {
+  const menuEl = current.closest('ul[role="menu"]');
+  if (!menuEl) return;
+  const items = getMenuButtonsWithin(menuEl);
+  const currentIndex = items.indexOf(current);
+  if (currentIndex < 0) return;
+  const nextIndex = (currentIndex + delta + items.length) % items.length;
+  roveFocus(current, items[nextIndex]);
+}
+function focusEdge(current, edge) {
+  const menuEl = current.closest('ul[role="menu"]');
+  if (!menuEl) return;
+  const items = getMenuButtonsWithin(menuEl);
+  if (items.length === 0) return;
+  roveFocus(current, edge === "start" ? items[0] : items[items.length - 1]);
+}
+function focusFirstChildItemFromTitle(titleEl) {
+  const li = titleEl.closest("li");
+  const submenu = li?.querySelector('ul[role="menu"]');
+  if (!submenu) return;
+  const items = getMenuButtonsWithin(submenu);
+  if (items.length === 0) return;
+  items.forEach((el, idx) => {
+    el.tabIndex = idx === 0 ? 0 : -1;
+  });
+  items[0].focus();
+}
+var SubMenu = ({
+  itemKey,
+  title = "",
+  icon,
+  disabled = false,
+  className,
+  level = 0,
+  children,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = chunkQFVE7GKD_js.useMenuContext();
+  if (!menuContext) {
+    console.warn("SubMenu must be used within Menu component");
+  }
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isOpenByKeyboard, setIsOpenByKeyboard] = React.useState(false);
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const isPopup = !!menuContext && menuContext.mode === "vertical" && effectiveCollapsed;
+  const isOpen = !!menuContext && tigercatCore.isKeyOpen(itemKey, menuContext.openKeys);
+  const isExpanded = menuContext?.mode === "horizontal" || isPopup ? isHovered || isOpenByKeyboard : isOpen;
+  const isInlineOrVertical = menuContext?.mode !== "horizontal" && !isPopup;
+  const [hasRenderedInline, setHasRenderedInline] = React.useState(
+    () => isInlineOrVertical ? isExpanded : false
+  );
+  React.useEffect(() => {
+    if (!isInlineOrVertical || !isExpanded || hasRenderedInline) return;
+    setHasRenderedInline(true);
+  }, [hasRenderedInline, isExpanded, isInlineOrVertical]);
+  const titleClasses = React.useMemo(() => {
+    if (!menuContext) return "";
+    return tigercatCore.getSubMenuTitleClasses(menuContext.theme, disabled);
+  }, [menuContext, disabled]);
+  const contentClasses = React.useMemo(() => {
+    if (!menuContext) return "";
+    if (menuContext.mode === "horizontal") return tigercatCore.submenuContentHorizontalClasses;
+    if (isPopup) return tigercatCore.submenuContentPopupClasses;
+    if (menuContext.mode === "inline") return tigercatCore.submenuContentInlineClasses;
+    return tigercatCore.submenuContentVerticalClasses;
+  }, [menuContext, isPopup]);
+  const handleTitleClick = React.useCallback(() => {
+    if (!menuContext || disabled) return;
+    if (menuContext.mode === "horizontal") return;
+    if (isPopup) {
+      setIsOpenByKeyboard((prev) => !prev);
+      setIsHovered(true);
+      return;
+    }
+    setHasRenderedInline(true);
+    menuContext.handleOpenChange(itemKey);
+  }, [disabled, menuContext, itemKey, isPopup]);
+  const handleMouseEnter = React.useCallback(() => {
+    if (menuContext?.mode === "horizontal" || isPopup) setIsHovered(true);
+  }, [menuContext, isPopup]);
+  const handleMouseLeave = React.useCallback(() => {
+    if (menuContext?.mode === "horizontal" || isPopup) {
+      setIsHovered(false);
+      setIsOpenByKeyboard(false);
+    }
+  }, [menuContext, isPopup]);
+  const openInline = React.useCallback(
+    (titleEl) => {
+      if (!menuContext) return;
+      setHasRenderedInline(true);
+      menuContext.handleOpenChange(itemKey);
+      setTimeout(() => focusFirstChildItemFromTitle(titleEl), 0);
+    },
+    [menuContext, itemKey]
+  );
+  const handleTitleKeyDown = React.useCallback(
+    (event) => {
+      if (!menuContext || disabled) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        moveFocus(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocus(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusEdge(current, "end");
+        return;
+      }
+      if (event.key === "Escape" || event.key === "ArrowLeft") {
+        if (menuContext.mode === "horizontal" || isPopup) {
+          event.preventDefault();
+          setIsOpenByKeyboard(false);
+          setIsHovered(false);
+          return;
+        }
+        if (isOpen) {
+          event.preventDefault();
+          menuContext.handleOpenChange(itemKey);
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (menuContext.mode === "horizontal" || isPopup) {
+          setIsOpenByKeyboard(true);
+          return;
+        }
+        openInline(current);
+        return;
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        if (menuContext.mode === "horizontal" || isPopup) {
+          event.preventDefault();
+          setIsOpenByKeyboard(true);
+          return;
+        }
+        if (!isOpen) {
+          event.preventDefault();
+          openInline(current);
+        }
+      }
+    },
+    [menuContext, disabled, isOpen, isPopup, openInline]
+  );
+  const indentStyle = !menuContext || menuContext.mode === "horizontal" || level === 0 ? {} : tigercatCore.getMenuItemIndent(level, menuContext.inlineIndent);
+  if (!menuContext) return null;
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.menuItemIconClasses, children: icon });
+  };
+  const renderTitle = () => {
+    if (!effectiveCollapsed) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        renderIcon(),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: title }),
+        menuContext.mode !== "horizontal" && !isPopup && /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { expanded: isExpanded })
+      ] });
+    } else if (!icon) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-center", children: title.charAt(0).toUpperCase() });
+    } else {
+      return renderIcon();
+    }
+  };
+  const renderContent = () => {
+    const nextLevel = level + 1;
+    const enhancedChildren = React__default.default.Children.map(children, (child) => {
+      if (!React__default.default.isValidElement(child)) return child;
+      if (child.type === chunk3WPKVV4N_js.MenuItem || child.type === SubMenu || child.type === chunkLXA2YBAO_js.MenuItemGroup) {
+        return React__default.default.cloneElement(
+          child,
+          {
+            level: nextLevel,
+            collapsed: isPopup ? false : void 0
+          }
+        );
+      }
+      return child;
+    });
+    if (menuContext.mode === "horizontal" || isPopup) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "ul",
+        {
+          className: contentClasses,
+          style: { display: isExpanded ? "block" : "none" },
+          role: "menu",
+          "aria-hidden": isExpanded ? void 0 : "true",
+          children: enhancedChildren
+        }
+      );
+    }
+    if (!hasRenderedInline) return null;
+    const isHidden = !isExpanded;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: tigercatCore.classNames(
+          "grid overflow-hidden transition-[grid-template-rows,opacity] duration-200 ease-in-out",
+          isHidden ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100"
+        ),
+        "aria-hidden": isHidden ? "true" : void 0,
+        "data-tiger-menu-hidden": isHidden ? "true" : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: tigercatCore.classNames(contentClasses, "min-h-0"), role: "menu", children: enhancedChildren })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      className: tigercatCore.classNames(
+        menuContext.mode === "horizontal" || isPopup ? "relative" : "",
+        className
+      ),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      role: "none",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: titleClasses,
+            style: indentStyle,
+            onClick: handleTitleClick,
+            onKeyDown: handleTitleKeyDown,
+            role: "menuitem",
+            "data-tiger-menuitem": "true",
+            "aria-expanded": isExpanded ? "true" : "false",
+            "aria-haspopup": "true",
+            "aria-disabled": disabled ? "true" : void 0,
+            disabled,
+            tabIndex: -1,
+            children: renderTitle()
+          }
+        ),
+        renderContent()
+      ]
+    }
+  );
+};
+
+exports.SubMenu = SubMenu;

package/dist/chunk-DCRVIDMY.mjs

@@ -0,0 +1,41 @@
+import { DropdownContext } from './chunk-WSCSDSV7.mjs';
+import { useContext } from 'react';
+import { classNames, getDropdownItemClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+var DropdownItem = ({
+  disabled = false,
+  divided = false,
+  className,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const context = useContext(DropdownContext);
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    if (context?.closeOnClick) {
+      context.handleItemClick();
+    }
+  };
+  const itemClasses = classNames(getDropdownItemClasses(disabled, divided), className);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      role: "menuitem",
+      "aria-disabled": disabled,
+      disabled,
+      onClick: handleClick,
+      ...buttonProps,
+      children
+    }
+  );
+};
+
+export { DropdownItem };