@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/chunk-GDONQIOK.mjs

@@ -0,0 +1,470 @@
+import React, { createContext, useContext, useRef, useState, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
+import { replaceKeys, toggleKey, classNames, getMenuClasses, initRovingTabIndex, isKeySelected, getMenuItemClasses, getMenuItemIndent, moveFocusInMenu, focusMenuEdge, menuItemGroupTitleClasses, isKeyOpen, createSubmenuHeightTransitionController, getSubMenuTitleClasses, submenuContentHorizontalClasses, submenuContentHorizontalNestedClasses, submenuContentPopupClasses, submenuContentInlineClasses, submenuContentVerticalClasses, focusFirstChildItem, menuItemIconClasses, getSubmenuPopupZIndex, getInitialSubmenuHeightTransitionStyle, submenuHeightTransitionClasses, getSubMenuExpandIconClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/Menu.tsx
+var MenuContext = createContext(null);
+function useMenuContext() {
+  return useContext(MenuContext);
+}
+var Menu = ({
+  mode = "vertical",
+  theme = "light",
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys = [],
+  openKeys: controlledOpenKeys,
+  defaultOpenKeys = [],
+  collapsed = false,
+  multiple = true,
+  inlineIndent = 24,
+  className,
+  style,
+  onSelect,
+  onOpenChange,
+  children
+}) => {
+  const menuRef = useRef(null);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys);
+  const [internalOpenKeys, setInternalOpenKeys] = useState(defaultOpenKeys);
+  const selectedKeys = controlledSelectedKeys !== void 0 ? controlledSelectedKeys : internalSelectedKeys;
+  const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
+  const handleSelect = useCallback(
+    (key) => {
+      const newSelectedKeys = replaceKeys(key, selectedKeys);
+      if (controlledSelectedKeys === void 0) {
+        setInternalSelectedKeys(newSelectedKeys);
+      }
+      onSelect?.(key, { selectedKeys: newSelectedKeys });
+    },
+    [controlledSelectedKeys, selectedKeys, onSelect]
+  );
+  const handleOpenChange = useCallback(
+    (key) => {
+      const toggled = toggleKey(key, openKeys);
+      const newOpenKeys = multiple ? toggled : toggled.includes(key) ? [key] : [];
+      if (controlledOpenKeys === void 0) {
+        setInternalOpenKeys(newOpenKeys);
+      }
+      onOpenChange?.(key, { openKeys: newOpenKeys });
+    },
+    [openKeys, multiple, controlledOpenKeys, onOpenChange]
+  );
+  const menuClasses = useMemo(() => {
+    return classNames(getMenuClasses(mode, theme, collapsed), className);
+  }, [mode, theme, collapsed, className]);
+  const contextValue = useMemo(
+    () => ({
+      mode,
+      theme,
+      collapsed,
+      inlineIndent,
+      selectedKeys,
+      openKeys,
+      handleSelect,
+      handleOpenChange
+    }),
+    [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
+  );
+  useEffect(() => {
+    if (menuRef.current) initRovingTabIndex(menuRef.current);
+  }, [mode, collapsed, selectedKeys, openKeys]);
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: menuRef,
+      className: menuClasses,
+      style,
+      role: "menu",
+      "data-tiger-menu-root": "true",
+      "data-tiger-menu-mode": mode,
+      children
+    }
+  ) });
+};
+var MenuItem = ({
+  itemKey,
+  disabled = false,
+  icon,
+  className,
+  children,
+  level = 0,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = useMenuContext();
+  if (!menuContext) {
+    console.warn("MenuItem must be used within Menu component");
+  }
+  const isSelected = !!menuContext && isKeySelected(itemKey, menuContext.selectedKeys);
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const itemClasses = classNames(
+    menuContext ? getMenuItemClasses(isSelected, disabled, menuContext.theme, effectiveCollapsed) : "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200",
+    className
+  );
+  const indentStyle = menuContext && menuContext.mode === "inline" && level > 0 ? getMenuItemIndent(level, menuContext.inlineIndent) : {};
+  const handleClick = useCallback(() => {
+    if (!disabled && menuContext) {
+      menuContext.handleSelect(itemKey);
+    }
+  }, [disabled, menuContext, itemKey]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!menuContext) 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();
+        moveFocusInMenu(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusMenuEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusMenuEdge(current, "end");
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    },
+    [menuContext, handleClick]
+  );
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, children: icon });
+  };
+  const renderLabel = () => {
+    if (!effectiveCollapsed) return /* @__PURE__ */ jsx("span", { className: "flex-1", children });
+    if (!icon) {
+      const text = String(children || "");
+      return /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", children: text.charAt(0).toUpperCase() });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      style: indentStyle,
+      role: "menuitem",
+      "data-tiger-menuitem": "true",
+      "data-tiger-selected": isSelected ? "true" : "false",
+      "aria-current": isSelected ? "page" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      disabled,
+      tabIndex: -1,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        renderIcon(),
+        renderLabel()
+      ]
+    }
+  ) });
+};
+function isComponentNamed(elementType, name) {
+  if (typeof elementType !== "function" && typeof elementType !== "object") return false;
+  const maybeFn = elementType;
+  return maybeFn.displayName === name || maybeFn.name === name;
+}
+var MenuItemGroup = ({
+  title,
+  className,
+  children,
+  level = 0
+}) => {
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type === MenuItem || isComponentNamed(child.type, "SubMenu")) {
+      return React.cloneElement(child, {
+        level
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsxs("li", { className: "list-none", children: [
+    title && /* @__PURE__ */ jsx("div", { className: menuItemGroupTitleClasses, children: title }),
+    /* @__PURE__ */ jsx("ul", { role: "group", className, children: enhancedChildren })
+  ] });
+};
+var ExpandIcon = ({ expanded }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: getSubMenuExpandIconClasses(expanded),
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z" })
+  }
+);
+var SubMenu = ({
+  itemKey,
+  title = "",
+  icon,
+  disabled = false,
+  className,
+  level = 0,
+  children,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = useMenuContext();
+  if (!menuContext) {
+    console.warn("SubMenu must be used within Menu component");
+  }
+  const [isHovered, setIsHovered] = useState(false);
+  const [isOpenByKeyboard, setIsOpenByKeyboard] = useState(false);
+  const submenuContentRef = useRef(null);
+  const heightTransitionRef = useRef(null);
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const isPopup = !!menuContext && (menuContext.mode === "horizontal" || menuContext.mode === "vertical" && effectiveCollapsed);
+  const isOpen = !!menuContext && isKeyOpen(itemKey, menuContext.openKeys);
+  const isExpanded = isPopup ? isHovered || isOpenByKeyboard : isOpen;
+  const isInlineOrVertical = menuContext?.mode !== "horizontal" && !isPopup;
+  const [hasRenderedInline, setHasRenderedInline] = useState(
+    () => isInlineOrVertical ? isExpanded : false
+  );
+  useEffect(() => {
+    if (!isInlineOrVertical || !isExpanded || hasRenderedInline) return;
+    setHasRenderedInline(true);
+  }, [hasRenderedInline, isExpanded, isInlineOrVertical]);
+  const disposeHeightTransition = useCallback(() => {
+    heightTransitionRef.current?.dispose();
+    heightTransitionRef.current = null;
+  }, []);
+  useEffect(() => disposeHeightTransition, [disposeHeightTransition]);
+  useLayoutEffect(() => {
+    if (!isInlineOrVertical || !hasRenderedInline || !submenuContentRef.current) {
+      disposeHeightTransition();
+      return;
+    }
+    if (!heightTransitionRef.current) {
+      heightTransitionRef.current = createSubmenuHeightTransitionController(
+        submenuContentRef.current,
+        { expanded: isExpanded }
+      );
+      return;
+    }
+    heightTransitionRef.current.update(isExpanded);
+  }, [disposeHeightTransition, hasRenderedInline, isExpanded, isInlineOrVertical]);
+  const titleClasses = useMemo(() => {
+    if (!menuContext) return "";
+    return classNames(getSubMenuTitleClasses(menuContext.theme, disabled), className);
+  }, [menuContext, disabled, className]);
+  const contentClasses = useMemo(() => {
+    if (!menuContext) return "";
+    if (menuContext.mode === "horizontal") {
+      return level === 0 ? submenuContentHorizontalClasses : submenuContentHorizontalNestedClasses;
+    }
+    if (isPopup) return submenuContentPopupClasses;
+    if (menuContext.mode === "inline") return submenuContentInlineClasses;
+    return submenuContentVerticalClasses;
+  }, [menuContext, isPopup, level]);
+  const handleTitleClick = 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 = useCallback(() => {
+    if (menuContext?.mode === "horizontal" || isPopup) setIsHovered(true);
+  }, [menuContext, isPopup]);
+  const handleMouseLeave = useCallback(() => {
+    if (menuContext?.mode === "horizontal" || isPopup) {
+      setIsHovered(false);
+      setIsOpenByKeyboard(false);
+    }
+  }, [menuContext, isPopup]);
+  const openInline = useCallback(
+    (titleEl) => {
+      if (!menuContext) return;
+      setHasRenderedInline(true);
+      menuContext.handleOpenChange(itemKey);
+      setTimeout(() => focusFirstChildItem(titleEl), 0);
+    },
+    [menuContext, itemKey]
+  );
+  const handleTitleKeyDown = 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();
+        moveFocusInMenu(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusMenuEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusMenuEdge(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 ? {} : getMenuItemIndent(level, menuContext.inlineIndent);
+  if (!menuContext) return null;
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ jsx("span", { className: menuItemIconClasses, children: icon });
+  };
+  const renderTitle = () => {
+    if (!effectiveCollapsed) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderIcon(),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: title }),
+        menuContext.mode !== "horizontal" && !isPopup && /* @__PURE__ */ jsx(ExpandIcon, { expanded: isExpanded })
+      ] });
+    } else if (!icon) {
+      return /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", children: title.charAt(0).toUpperCase() });
+    } else {
+      return renderIcon();
+    }
+  };
+  const renderContent = () => {
+    const nextLevel = level + 1;
+    const enhancedChildren = React.Children.map(children, (child) => {
+      if (!React.isValidElement(child)) return child;
+      if (child.type === MenuItem || child.type === SubMenu || child.type === MenuItemGroup) {
+        return React.cloneElement(
+          child,
+          {
+            level: nextLevel
+          }
+        );
+      }
+      return child;
+    });
+    const popupZIndex = isPopup ? getSubmenuPopupZIndex(level) : {};
+    if (isPopup) {
+      return /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: contentClasses,
+          style: { display: isExpanded ? "block" : "none", ...popupZIndex },
+          role: "menu",
+          "aria-hidden": isExpanded ? void 0 : "true",
+          children: enhancedChildren
+        }
+      );
+    }
+    if (!hasRenderedInline) return null;
+    const isHidden = !isExpanded;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: submenuContentRef,
+        className: submenuHeightTransitionClasses,
+        style: heightTransitionRef.current ? void 0 : getInitialSubmenuHeightTransitionStyle(isExpanded),
+        "aria-hidden": isHidden ? "true" : void 0,
+        "data-tiger-menu-hidden": isHidden ? "true" : void 0,
+        "data-tiger-submenu-motion": "height",
+        children: /* @__PURE__ */ jsx("ul", { className: contentClasses, role: "menu", children: enhancedChildren })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: isPopup ? "relative" : "",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      role: "none",
+      children: [
+        /* @__PURE__ */ 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()
+      ]
+    }
+  );
+};
+
+export { Menu, MenuItem, MenuItemGroup, SubMenu, useMenuContext };

package/dist/{chunk-3KMKMAE3.mjs → chunk-GKJNQUTW.mjs}

@@ -1,23 +1,25 @@
 import React, { useMemo } from 'react';
-import { getSpinnerSVG, buttonDangerClasses, getButtonVariantClasses, classNames, buttonBaseClasses, buttonSizeClasses, buttonDisabledClasses } from '@expcat/tigercat-core';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { buttonDangerClasses, getButtonVariantClasses, classNames, buttonBaseClasses, buttonSizeClasses, buttonDisabledClasses, getSpinnerSVG } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Button.tsx
-var spinnerSvg = getSpinnerSVG("spinner");
-var DefaultSpinner = /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: "animate-spin h-4 w-4",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: spinnerSvg.viewBox,
-    "aria-hidden": "true",
-    focusable: "false",
-    children: spinnerSvg.elements.map(
-      (el, index) => React.createElement(el.type, { key: index, ...el.attrs })
-    )
-  }
-);
+var createDefaultSpinner = () => {
+  const spinnerSvg = getSpinnerSVG("spinner");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "animate-spin h-4 w-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: spinnerSvg.elements.map(
+        (el, index) => React.createElement(el.type, { key: index, ...el.attrs })
+      )
+    }
+  );
+};
 var Button = ({
   variant = "primary",
   size = "md",
@@ -62,7 +64,7 @@ var Button = ({
       onClick: isDisabled ? void 0 : onClick,
       type: htmlType,
       children: [
-        loading && /* @__PURE__ */ jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        loading && /* @__PURE__ */ jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: loadingIcon ?? createDefaultSpinner() }),
         !loading && icon && /* @__PURE__ */ jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: icon }),
         children
       ]