@expcat/tigercat-react 1.1.0 → 1.2.0

package/dist/chunk-OFWK2B23.js

@@ -1,480 +0,0 @@
-'use strict';
-
-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);
-
-// src/components/Menu.tsx
-var MenuContext = React.createContext(null);
-function useMenuContext() {
-  return React.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 = React.useRef(null);
-  const [internalSelectedKeys, setInternalSelectedKeys] = React.useState(defaultSelectedKeys);
-  const [internalOpenKeys, setInternalOpenKeys] = React.useState(defaultOpenKeys);
-  const selectedKeys = controlledSelectedKeys !== void 0 ? controlledSelectedKeys : internalSelectedKeys;
-  const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
-  const handleSelect = React.useCallback(
-    (key) => {
-      const newSelectedKeys = tigercatCore.replaceKeys(key, selectedKeys);
-      if (controlledSelectedKeys === void 0) {
-        setInternalSelectedKeys(newSelectedKeys);
-      }
-      onSelect?.(key, { selectedKeys: newSelectedKeys });
-    },
-    [controlledSelectedKeys, selectedKeys, onSelect]
-  );
-  const handleOpenChange = React.useCallback(
-    (key) => {
-      const toggled = tigercatCore.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 = React.useMemo(() => {
-    return tigercatCore.classNames(tigercatCore.getMenuClasses(mode, theme, collapsed), className);
-  }, [mode, theme, collapsed, className]);
-  const contextValue = React.useMemo(
-    () => ({
-      mode,
-      theme,
-      collapsed,
-      inlineIndent,
-      selectedKeys,
-      openKeys,
-      handleSelect,
-      handleOpenChange
-    }),
-    [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
-  );
-  React.useEffect(() => {
-    if (menuRef.current) tigercatCore.initRovingTabIndex(menuRef.current);
-  }, [mode, collapsed, selectedKeys, openKeys]);
-  return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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 && tigercatCore.isKeySelected(itemKey, menuContext.selectedKeys);
-  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
-  const itemClasses = tigercatCore.classNames(
-    menuContext ? tigercatCore.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 ? tigercatCore.getMenuItemIndent(level, menuContext.inlineIndent) : {};
-  const handleClick = React.useCallback(() => {
-    if (!disabled && menuContext) {
-      menuContext.handleSelect(itemKey);
-    }
-  }, [disabled, menuContext, itemKey]);
-  const handleKeyDown = React.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();
-        tigercatCore.moveFocusInMenu(current, 1);
-        return;
-      }
-      if (event.key === prevKey) {
-        event.preventDefault();
-        tigercatCore.moveFocusInMenu(current, -1);
-        return;
-      }
-      if (event.key === "Home") {
-        event.preventDefault();
-        tigercatCore.focusMenuEdge(current, "start");
-        return;
-      }
-      if (event.key === "End") {
-        event.preventDefault();
-        tigercatCore.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__ */ jsxRuntime.jsx("span", { className: tigercatCore.menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.menuItemIconClasses, children: icon });
-  };
-  const renderLabel = () => {
-    if (!effectiveCollapsed) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children });
-    if (!icon) {
-      const text = String(children || "");
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-center", children: text.charAt(0).toUpperCase() });
-    }
-    return null;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", children: /* @__PURE__ */ jsxRuntime.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__default.default.Children.map(children, (child) => {
-    if (!React__default.default.isValidElement(child)) return child;
-    if (child.type === MenuItem || isComponentNamed(child.type, "SubMenu")) {
-      return React__default.default.cloneElement(child, {
-        level
-      });
-    }
-    return child;
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "list-none", children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.menuItemGroupTitleClasses, children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", className, children: enhancedChildren })
-  ] });
-};
-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" })
-  }
-);
-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] = React.useState(false);
-  const [isOpenByKeyboard, setIsOpenByKeyboard] = React.useState(false);
-  const submenuContentRef = React.useRef(null);
-  const heightTransitionRef = React.useRef(null);
-  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
-  const isPopup = !!menuContext && (menuContext.mode === "horizontal" || menuContext.mode === "vertical" && effectiveCollapsed);
-  const isOpen = !!menuContext && tigercatCore.isKeyOpen(itemKey, menuContext.openKeys);
-  const isExpanded = 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 disposeHeightTransition = React.useCallback(() => {
-    heightTransitionRef.current?.dispose();
-    heightTransitionRef.current = null;
-  }, []);
-  React.useEffect(() => disposeHeightTransition, [disposeHeightTransition]);
-  React.useLayoutEffect(() => {
-    if (!isInlineOrVertical || !hasRenderedInline || !submenuContentRef.current) {
-      disposeHeightTransition();
-      return;
-    }
-    if (!heightTransitionRef.current) {
-      heightTransitionRef.current = tigercatCore.createSubmenuHeightTransitionController(
-        submenuContentRef.current,
-        { expanded: isExpanded }
-      );
-      return;
-    }
-    heightTransitionRef.current.update(isExpanded);
-  }, [disposeHeightTransition, hasRenderedInline, isExpanded, isInlineOrVertical]);
-  const titleClasses = React.useMemo(() => {
-    if (!menuContext) return "";
-    return tigercatCore.classNames(tigercatCore.getSubMenuTitleClasses(menuContext.theme, disabled), className);
-  }, [menuContext, disabled, className]);
-  const contentClasses = React.useMemo(() => {
-    if (!menuContext) return "";
-    if (menuContext.mode === "horizontal") {
-      return level === 0 ? tigercatCore.submenuContentHorizontalClasses : tigercatCore.submenuContentHorizontalNestedClasses;
-    }
-    if (isPopup) return tigercatCore.submenuContentPopupClasses;
-    if (menuContext.mode === "inline") return tigercatCore.submenuContentInlineClasses;
-    return tigercatCore.submenuContentVerticalClasses;
-  }, [menuContext, isPopup, level]);
-  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(() => tigercatCore.focusFirstChildItem(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();
-        tigercatCore.moveFocusInMenu(current, 1);
-        return;
-      }
-      if (event.key === prevKey) {
-        event.preventDefault();
-        tigercatCore.moveFocusInMenu(current, -1);
-        return;
-      }
-      if (event.key === "Home") {
-        event.preventDefault();
-        tigercatCore.focusMenuEdge(current, "start");
-        return;
-      }
-      if (event.key === "End") {
-        event.preventDefault();
-        tigercatCore.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 ? {} : 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 === MenuItem || child.type === SubMenu || child.type === MenuItemGroup) {
-        return React__default.default.cloneElement(
-          child,
-          {
-            level: nextLevel
-          }
-        );
-      }
-      return child;
-    });
-    const popupZIndex = isPopup ? tigercatCore.getSubmenuPopupZIndex(level) : {};
-    if (isPopup) {
-      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: submenuContentRef,
-        className: tigercatCore.submenuHeightTransitionClasses,
-        style: heightTransitionRef.current ? void 0 : tigercatCore.getInitialSubmenuHeightTransitionStyle(isExpanded),
-        "aria-hidden": isHidden ? "true" : void 0,
-        "data-tiger-menu-hidden": isHidden ? "true" : void 0,
-        "data-tiger-submenu-motion": "height",
-        children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: contentClasses, role: "menu", children: enhancedChildren })
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "li",
-    {
-      className: isPopup ? "relative" : "",
-      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.Menu = Menu;
-exports.MenuItem = MenuItem;
-exports.MenuItemGroup = MenuItemGroup;
-exports.SubMenu = SubMenu;
-exports.useMenuContext = useMenuContext;

package/dist/chunk-PGBKMW4Q.js

@@ -1,145 +0,0 @@
-'use strict';
-
-var react = require('react');
-var reactDom = require('react-dom');
-var tigercatCore = require('@expcat/tigercat-core');
-
-// src/utils/overlay.ts
-function useClickOutside({
-  enabled,
-  refs,
-  onOutsideClick,
-  defer = false
-}) {
-  react.useEffect(() => {
-    if (!enabled) return;
-    const handler = (event) => {
-      const elements = refs.map((ref) => ref?.current);
-      if (tigercatCore.isEventOutside(event, elements)) {
-        onOutsideClick();
-      }
-    };
-    const attach = () => document.addEventListener("click", handler);
-    const detach = () => document.removeEventListener("click", handler);
-    if (!defer) {
-      attach();
-      return () => detach();
-    }
-    const timer = window.setTimeout(() => attach(), 0);
-    return () => {
-      window.clearTimeout(timer);
-      detach();
-    };
-  }, [enabled, refs, onOutsideClick, defer]);
-}
-function useEscapeKey({ enabled, onEscape }) {
-  react.useEffect(() => {
-    if (!enabled) return;
-    const handler = (event) => {
-      if (event.defaultPrevented) return;
-      if (!tigercatCore.isEscapeKey(event)) return;
-      onEscape();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [enabled, onEscape]);
-}
-function useBodyScrollLock({ enabled }) {
-  react.useEffect(() => {
-    if (!enabled) return;
-    return tigercatCore.lockBodyScroll();
-  }, [enabled]);
-}
-function renderBodyPortal(node) {
-  if (typeof document === "undefined") return null;
-  return reactDom.createPortal(node, document.body);
-}
-function useFocusTrap({ enabled, containerRef }) {
-  react.useEffect(() => {
-    const container = containerRef.current;
-    if (!enabled || !container) return;
-    const handler = (event) => {
-      const focusables = tigercatCore.getFocusableElements(container);
-      const activeElement = container.ownerDocument?.activeElement ?? document.activeElement;
-      const nav = tigercatCore.getFocusTrapNavigation(event, focusables, activeElement);
-      if (!nav.shouldHandle || !nav.next) return;
-      event.preventDefault();
-      nav.next.focus();
-    };
-    container.addEventListener("keydown", handler);
-    return () => container.removeEventListener("keydown", handler);
-  }, [enabled, containerRef]);
-}
-function useFloating(options) {
-  const {
-    referenceRef,
-    floatingRef,
-    enabled,
-    placement: initialPlacement = "bottom",
-    offset: offsetDistance = 8,
-    arrowRef,
-    onPlacementChange
-  } = options;
-  const [x, setX] = react.useState(0);
-  const [y, setY] = react.useState(0);
-  const [placement, setPlacement] = react.useState(initialPlacement);
-  const [arrowX, setArrowX] = react.useState(void 0);
-  const [arrowY, setArrowY] = react.useState(void 0);
-  const onPlacementChangeRef = react.useRef(onPlacementChange);
-  onPlacementChangeRef.current = onPlacementChange;
-  const update = react.useCallback(async () => {
-    const reference = referenceRef.current;
-    const floating = floatingRef.current;
-    if (!reference || !floating) return;
-    const floatingOptions = {
-      placement: initialPlacement,
-      offset: offsetDistance,
-      flip: true,
-      shift: true,
-      arrowElement: arrowRef?.current
-    };
-    const result = await tigercatCore.computeFloatingPosition(
-      reference,
-      floating,
-      floatingOptions
-    );
-    setX(result.x);
-    setY(result.y);
-    setPlacement((prev) => {
-      if (prev !== result.placement) {
-        onPlacementChangeRef.current?.(result.placement);
-        return result.placement;
-      }
-      return prev;
-    });
-    if (result.arrow) {
-      setArrowX(result.arrow.x);
-      setArrowY(result.arrow.y);
-    }
-  }, [referenceRef, floatingRef, initialPlacement, offsetDistance, arrowRef]);
-  react.useEffect(() => {
-    const reference = referenceRef.current;
-    const floating = floatingRef.current;
-    if (!enabled || !reference || !floating) return;
-    update();
-    const cleanup = tigercatCore.autoUpdateFloating(reference, floating, update);
-    return () => {
-      cleanup();
-    };
-  }, [enabled, referenceRef, floatingRef, update]);
-  return {
-    x,
-    y,
-    placement,
-    arrowX,
-    arrowY,
-    update
-  };
-}
-
-exports.renderBodyPortal = renderBodyPortal;
-exports.useBodyScrollLock = useBodyScrollLock;
-exports.useClickOutside = useClickOutside;
-exports.useEscapeKey = useEscapeKey;
-exports.useFloating = useFloating;
-exports.useFocusTrap = useFocusTrap;