@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-JQK354YN.js

@@ -1,256 +0,0 @@
-'use strict';
-
-var chunkGJEWBALW_js = require('./chunk-GJEWBALW.js');
-var chunkA3PYG3D6_js = require('./chunk-A3PYG3D6.js');
-var chunkIBYIPXIO_js = require('./chunk-IBYIPXIO.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" })
-  }
-);
-var SubMenu = ({
-  itemKey,
-  title = "",
-  icon,
-  disabled = false,
-  className,
-  level = 0,
-  children,
-  collapsed: collapsedOverride
-}) => {
-  const menuContext = chunkIBYIPXIO_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 === "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 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 === chunkA3PYG3D6_js.MenuItem || child.type === SubMenu || child.type === chunkGJEWBALW_js.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",
-      {
-        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: 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.SubMenu = SubMenu;

package/dist/chunk-KNBNE74O.js

@@ -1,251 +0,0 @@
-'use strict';
-
-var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
-var react = require('react');
-var reactDom = require('react-dom');
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
-
-var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    className: cls,
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d })
-  }
-);
-var ImagePreview = ({
-  open,
-  images,
-  currentIndex = 0,
-  zIndex = 1050,
-  maskClosable = true,
-  scaleStep = 0.5,
-  minScale = 0.25,
-  maxScale = 5,
-  onOpenChange,
-  onCurrentIndexChange,
-  onScaleChange
-}) => {
-  const isOpen = open;
-  const [scale, setScale] = react.useState(1);
-  const [offsetX, setOffsetX] = react.useState(0);
-  const [offsetY, setOffsetY] = react.useState(0);
-  const [index, setIndex] = react.useState(currentIndex);
-  const draggingRef = react.useRef(false);
-  const dragStartRef = react.useRef({ x: 0, y: 0, ox: 0, oy: 0 });
-  const resetTransform = react.useCallback(() => {
-    setScale(1);
-    setOffsetX(0);
-    setOffsetY(0);
-  }, []);
-  react.useEffect(() => {
-    setIndex(currentIndex);
-    resetTransform();
-  }, [currentIndex, resetTransform]);
-  react.useEffect(() => {
-    if (isOpen) {
-      resetTransform();
-      setIndex(currentIndex);
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isOpen, currentIndex, resetTransform]);
-  const handleClose = react.useCallback(() => {
-    onOpenChange?.(false);
-  }, [onOpenChange]);
-  chunkZYPEO2KY_js.useEscapeKey({ enabled: !!isOpen, onEscape: handleClose });
-  const navState = react.useMemo(() => tigercatCore.getPreviewNavState(index, images.length), [index, images.length]);
-  const handleZoomIn = react.useCallback(() => {
-    setScale((s) => {
-      const next = tigercatCore.clampScale(s + scaleStep, minScale, maxScale);
-      onScaleChange?.(next);
-      return next;
-    });
-  }, [scaleStep, minScale, maxScale, onScaleChange]);
-  const handleZoomOut = react.useCallback(() => {
-    setScale((s) => {
-      const next = tigercatCore.clampScale(s - scaleStep, minScale, maxScale);
-      onScaleChange?.(next);
-      return next;
-    });
-  }, [scaleStep, minScale, maxScale, onScaleChange]);
-  const handleReset = react.useCallback(() => {
-    resetTransform();
-    onScaleChange?.(1);
-  }, [resetTransform, onScaleChange]);
-  const handlePrev = react.useCallback(() => {
-    if (index > 0) {
-      const next = index - 1;
-      setIndex(next);
-      resetTransform();
-      onCurrentIndexChange?.(next);
-    }
-  }, [index, resetTransform, onCurrentIndexChange]);
-  const handleNext = react.useCallback(() => {
-    if (index < images.length - 1) {
-      const next = index + 1;
-      setIndex(next);
-      resetTransform();
-      onCurrentIndexChange?.(next);
-    }
-  }, [index, images.length, resetTransform, onCurrentIndexChange]);
-  react.useEffect(() => {
-    if (!isOpen) return;
-    const handler = (e) => {
-      if (e.key === "ArrowLeft") handlePrev();
-      if (e.key === "ArrowRight") handleNext();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [isOpen, handlePrev, handleNext]);
-  const handleWheel = react.useCallback(
-    (e) => {
-      e.preventDefault();
-      const delta = e.deltaY > 0 ? -scaleStep : scaleStep;
-      setScale((s) => {
-        const next = tigercatCore.clampScale(s + delta, minScale, maxScale);
-        onScaleChange?.(next);
-        return next;
-      });
-    },
-    [scaleStep, minScale, maxScale, onScaleChange]
-  );
-  const handleMouseDown = react.useCallback(
-    (e) => {
-      if (e.button !== 0) return;
-      e.preventDefault();
-      draggingRef.current = true;
-      dragStartRef.current = { x: e.clientX, y: e.clientY, ox: offsetX, oy: offsetY };
-    },
-    [offsetX, offsetY]
-  );
-  const handleMouseMove = react.useCallback((e) => {
-    if (!draggingRef.current) return;
-    setOffsetX(dragStartRef.current.ox + (e.clientX - dragStartRef.current.x));
-    setOffsetY(dragStartRef.current.oy + (e.clientY - dragStartRef.current.y));
-  }, []);
-  const handleMouseUp = react.useCallback(() => {
-    draggingRef.current = false;
-  }, []);
-  const handleMaskClick = react.useCallback(
-    (e) => {
-      if (maskClosable && e.target === e.currentTarget) {
-        handleClose();
-      }
-    },
-    [maskClosable, handleClose]
-  );
-  const transform = react.useMemo(
-    () => tigercatCore.calculateTransform(scale, offsetX, offsetY),
-    [scale, offsetX, offsetY]
-  );
-  if (!isOpen || !images.length) return null;
-  const currentSrc = images[index] || images[0];
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: tigercatCore.imagePreviewWrapperClasses,
-        style: { zIndex },
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": "Image preview",
-        onClick: handleMaskClick,
-        onWheel: handleWheel,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.imagePreviewMaskClasses, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: currentSrc,
-              className: tigercatCore.imagePreviewImgClasses,
-              style: { transform },
-              alt: `Preview image ${index + 1}`,
-              draggable: false,
-              onMouseDown: handleMouseDown,
-              onMouseMove: handleMouseMove,
-              onMouseUp: handleMouseUp,
-              onMouseLeave: handleMouseUp
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: tigercatCore.imagePreviewCloseBtnClasses,
-              onClick: handleClose,
-              "aria-label": "Close preview",
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.previewCloseIconPath })
-            }
-          ),
-          images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "left-4"),
-              onClick: handlePrev,
-              disabled: !navState.hasPrev,
-              "aria-label": "Previous image",
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.prevIconPath })
-            }
-          ),
-          images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "right-4"),
-              onClick: handleNext,
-              disabled: !navState.hasNext,
-              "aria-label": "Next image",
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.nextIconPath })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.imagePreviewToolbarClasses, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: tigercatCore.imagePreviewToolbarBtnClasses,
-                onClick: handleZoomOut,
-                "aria-label": "Zoom out",
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.zoomOutIconPath })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: tigercatCore.imagePreviewToolbarBtnClasses,
-                onClick: handleReset,
-                "aria-label": "Reset",
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.resetIconPath })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: tigercatCore.imagePreviewToolbarBtnClasses,
-                onClick: handleZoomIn,
-                "aria-label": "Zoom in",
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.zoomInIconPath })
-              }
-            ),
-            navState.counter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.imagePreviewCounterClasses, children: navState.counter })
-          ] })
-        ]
-      }
-    ),
-    document.body
-  );
-};
-
-exports.ImagePreview = ImagePreview;