@expcat/tigercat-react 2.0.4 → 2.1.0

package/dist/chunk-EW43YBPV.mjs

@@ -0,0 +1,457 @@
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
+
+// src/components/ContextMenu.tsx
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  useId
+} from "react";
+import {
+  classNames,
+  getContextMenuContainerClasses,
+  getContextMenuTriggerClasses,
+  getContextMenuMenuClasses,
+  getContextMenuItemClasses,
+  getContextMenuSubTriggerClasses,
+  getContextMenuSubChevronClasses,
+  getContextMenuPointStyle,
+  getContextMenuOpenPoint,
+  injectContextMenuStyles,
+  CONTEXT_MENU_ENTER_CLASS,
+  CONTEXT_MENU_SUB_CHEVRON_PATH,
+  isContextMenuKeyboardEvent,
+  handleMenuNavigation,
+  focusFirstMenuItem,
+  captureActiveElement,
+  restoreFocus
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ContextMenuContext = createContext(null);
+var ContextMenuMenu = ({
+  className,
+  style,
+  children,
+  role,
+  ...divProps
+}) => {
+  const menuClasses = classNames(getContextMenuMenuClasses(), className);
+  return /* @__PURE__ */ jsx("div", { className: menuClasses, style, role: role ?? "menu", ...divProps, children });
+};
+var ContextMenuItem = ({
+  disabled = false,
+  divided = false,
+  className,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const context = useContext(ContextMenuContext);
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    if (context?.closeOnClick) {
+      context.handleItemClick();
+    }
+  };
+  const itemClasses = classNames(getContextMenuItemClasses(disabled, divided), className);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      role: "menuitem",
+      tabIndex: -1,
+      "aria-disabled": disabled,
+      disabled,
+      onClick: handleClick,
+      ...buttonProps,
+      children
+    }
+  );
+};
+var ContextMenuSub = ({
+  title = "",
+  disabled = false,
+  className,
+  style,
+  children
+}) => {
+  const context = useContext(ContextMenuContext);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isOpenByKeyboard, setIsOpenByKeyboard] = useState(false);
+  const popupCloseTimerRef = useRef(null);
+  const titleRef = useRef(null);
+  const popupRef = useRef(null);
+  const isExpanded = isHovered || isOpenByKeyboard;
+  const portalEnabled = Boolean(context?.portal);
+  const overlay = useAnchoredOverlay({
+    referenceRef: titleRef,
+    floatingRef: popupRef,
+    enabled: Boolean(context) && isExpanded && !disabled,
+    placement: "right-start",
+    offset: 4,
+    portal: portalEnabled,
+    dismissOnEscape: true,
+    onDismiss: () => {
+      setIsOpenByKeyboard(false);
+      setIsHovered(false);
+    }
+  });
+  useEffect(() => {
+    if (!context?.open) {
+      setIsHovered(false);
+      setIsOpenByKeyboard(false);
+    }
+  }, [context?.open]);
+  useEffect(() => {
+    return () => {
+      if (popupCloseTimerRef.current) {
+        clearTimeout(popupCloseTimerRef.current);
+      }
+    };
+  }, []);
+  const clearCloseTimer = useCallback(() => {
+    if (popupCloseTimerRef.current) {
+      clearTimeout(popupCloseTimerRef.current);
+      popupCloseTimerRef.current = null;
+    }
+  }, []);
+  const handleMouseEnter = useCallback(() => {
+    if (disabled) return;
+    clearCloseTimer();
+    setIsHovered(true);
+  }, [clearCloseTimer, disabled]);
+  const handleMouseLeave = useCallback(() => {
+    const close = () => {
+      setIsHovered(false);
+      setIsOpenByKeyboard(false);
+    };
+    if (portalEnabled) {
+      popupCloseTimerRef.current = setTimeout(close, 120);
+      return;
+    }
+    close();
+  }, [portalEnabled]);
+  const focusPopupFirstItem = useCallback(() => {
+    requestAnimationFrame(() => {
+      if (popupRef.current) focusFirstMenuItem(popupRef.current);
+    });
+  }, []);
+  const handleTitleKeyDown = useCallback(
+    (event) => {
+      if (disabled) return;
+      if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsOpenByKeyboard(true);
+        setIsHovered(true);
+        focusPopupFirstItem();
+        return;
+      }
+      if (event.key === "ArrowLeft" || event.key === "Escape") {
+        if (isExpanded) {
+          event.preventDefault();
+          event.stopPropagation();
+          setIsOpenByKeyboard(false);
+          setIsHovered(false);
+          titleRef.current?.focus();
+        }
+      }
+    },
+    [disabled, focusPopupFirstItem, isExpanded]
+  );
+  const handlePopupKeyDown = useCallback((event) => {
+    if (popupRef.current) {
+      handleMenuNavigation(popupRef.current, event.nativeEvent);
+    }
+    if (event.key === "ArrowLeft" || event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsOpenByKeyboard(false);
+      setIsHovered(false);
+      titleRef.current?.focus();
+    }
+  }, []);
+  const handlePopupContextMenu = useCallback((event) => {
+    event.preventDefault();
+  }, []);
+  if (!context) return null;
+  const triggerClasses = classNames(getContextMenuSubTriggerClasses(disabled), className);
+  const popupClasses = classNames(overlay.floatingClasses, CONTEXT_MENU_ENTER_CLASS);
+  const popup = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: popupRef,
+      className: popupClasses,
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      "data-tiger-context-menu-sub": "",
+      hidden: !isExpanded,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: handlePopupKeyDown,
+      onContextMenu: handlePopupContextMenu,
+      children: /* @__PURE__ */ jsx("div", { className: getContextMenuMenuClasses(), role: "menu", children })
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: portalEnabled ? void 0 : "relative",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      role: "none",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: titleRef,
+            type: "button",
+            className: triggerClasses,
+            style,
+            role: "menuitem",
+            tabIndex: -1,
+            "aria-haspopup": "menu",
+            "aria-expanded": isExpanded,
+            "aria-disabled": disabled || void 0,
+            "data-state": isExpanded ? "open" : "closed",
+            "data-tiger-context-menu-sub-trigger": "",
+            disabled,
+            onClick: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            onKeyDown: handleTitleKeyDown,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: title }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: getContextMenuSubChevronClasses(),
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: CONTEXT_MENU_SUB_CHEVRON_PATH })
+                }
+              )
+            ]
+          }
+        ),
+        renderOverlayPortal(popup, overlay.target, !portalEnabled)
+      ]
+    }
+  );
+};
+var ContextMenu = ({
+  disabled = false,
+  open: controlledOpen,
+  defaultOpen = false,
+  closeOnClick = true,
+  portal = true,
+  offset = 0,
+  placement = "bottom-start",
+  className,
+  style,
+  onOpenChange,
+  children,
+  ...divProps
+}) => {
+  const [internalVisible, setInternalVisible] = useState(defaultOpen);
+  const visible = controlledOpen !== void 0 ? controlledOpen : internalVisible;
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const pointNodeRef = useRef(null);
+  const floatingRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const explicitPointRef = useRef(false);
+  const [point, setPoint] = useState({ x: 0, y: 0 });
+  const reactId = useId();
+  const menuId = useMemo(() => `tiger-context-menu-${reactId}`, [reactId]);
+  const pointReferenceRef = useMemo(
+    () => ({
+      get current() {
+        return pointNodeRef.current;
+      },
+      set current(node) {
+        pointNodeRef.current = node;
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- point is an invalidation key, not a value
+    [point.x, point.y]
+  );
+  useEffect(() => {
+    injectContextMenuStyles();
+  }, []);
+  const setVisible = useCallback(
+    (newVisible) => {
+      if (disabled && newVisible) return;
+      if (newVisible && !visible) {
+        previousActiveElementRef.current = captureActiveElement();
+      }
+      if (controlledOpen === void 0) {
+        setInternalVisible(newVisible);
+      }
+      onOpenChange?.(newVisible);
+      if (newVisible) {
+        requestAnimationFrame(() => {
+          if (floatingRef.current) {
+            focusFirstMenuItem(floatingRef.current);
+          }
+        });
+      } else {
+        restoreFocus(previousActiveElementRef.current);
+        previousActiveElementRef.current = null;
+      }
+    },
+    [disabled, visible, controlledOpen, onOpenChange]
+  );
+  useLayoutEffect(() => {
+    if (!visible || explicitPointRef.current) return;
+    if (!triggerRef.current) return;
+    setPoint(getContextMenuOpenPoint(null, triggerRef.current));
+  }, [visible]);
+  const handleItemClick = useCallback(() => {
+    if (closeOnClick) {
+      setVisible(false);
+    }
+  }, [closeOnClick, setVisible]);
+  const openAt = useCallback(
+    (next) => {
+      explicitPointRef.current = true;
+      setPoint(next);
+      setVisible(true);
+    },
+    [setVisible]
+  );
+  const handleContextMenu = useCallback(
+    (event) => {
+      if (disabled) return;
+      event.preventDefault();
+      event.stopPropagation();
+      openAt(getContextMenuOpenPoint(event.nativeEvent, triggerRef.current));
+    },
+    [disabled, openAt]
+  );
+  const handleTriggerKeyDown = useCallback(
+    (event) => {
+      if (disabled || !isContextMenuKeyboardEvent(event)) return;
+      event.preventDefault();
+      openAt(getContextMenuOpenPoint(null, triggerRef.current));
+    },
+    [disabled, openAt]
+  );
+  const handleMenuKeyDown = useCallback((event) => {
+    if (floatingRef.current) {
+      handleMenuNavigation(floatingRef.current, event.nativeEvent);
+    }
+  }, []);
+  const handleMenuContextMenu = useCallback((event) => {
+    event.preventDefault();
+  }, []);
+  const overlay = useAnchoredOverlay({
+    referenceRef: pointReferenceRef,
+    floatingRef,
+    enabled: visible,
+    placement,
+    offset,
+    portal,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    onDismiss: () => setVisible(false)
+  });
+  const containerClasses = useMemo(
+    () => classNames(getContextMenuContainerClasses(), className),
+    [className]
+  );
+  const triggerClasses = useMemo(() => getContextMenuTriggerClasses(disabled), [disabled]);
+  const menuWrapperClasses = classNames(overlay.floatingClasses, CONTEXT_MENU_ENTER_CLASS);
+  const pointStyle = useMemo(() => getContextMenuPointStyle(point), [point]);
+  const contextValue = useMemo(
+    () => ({ closeOnClick, handleItemClick, portal, open: visible }),
+    [closeOnClick, handleItemClick, portal, visible]
+  );
+  const childrenArray = React.Children.toArray(children);
+  const triggerChildren = [];
+  let menuElement = null;
+  childrenArray.forEach((child) => {
+    if (React.isValidElement(child) && child.type === ContextMenuMenu) {
+      menuElement = child;
+      return;
+    }
+    triggerChildren.push(child);
+  });
+  const menuWrapperNode = menuElement ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: floatingRef,
+      className: menuWrapperClasses,
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      hidden: !visible,
+      "data-tiger-context-menu": "",
+      onKeyDown: handleMenuKeyDown,
+      onContextMenu: handleMenuContextMenu,
+      children: React.isValidElement(menuElement) ? React.cloneElement(menuElement, {
+        id: menuId
+      }) : menuElement
+    },
+    `${point.x},${point.y}`
+  ) : null;
+  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: triggerClasses,
+        onContextMenu: handleContextMenu,
+        onKeyDown: handleTriggerKeyDown,
+        "aria-haspopup": "menu",
+        "aria-expanded": visible,
+        "aria-controls": visible ? menuId : void 0,
+        "data-state": visible ? "open" : "closed",
+        "data-tiger-context-menu-trigger": "",
+        children: triggerChildren
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: pointNodeRef,
+        style: pointStyle,
+        "aria-hidden": "true",
+        "data-tiger-context-menu-point": ""
+      }
+    ),
+    menuWrapperNode && renderOverlayPortal(menuWrapperNode, overlay.target, !portal)
+  ] }) });
+};
+ContextMenu.displayName = "ContextMenu";
+ContextMenuMenu.displayName = "ContextMenuMenu";
+ContextMenuItem.displayName = "ContextMenuItem";
+ContextMenuSub.displayName = "ContextMenuSub";
+var ContextMenu_default = ContextMenu;
+
+export {
+  ContextMenuContext,
+  ContextMenuMenu,
+  ContextMenuItem,
+  ContextMenuSub,
+  ContextMenu,
+  ContextMenu_default
+};

package/dist/{chunk-QJE3MZBO.mjs → chunk-FSMJLJFL.mjs}

@@ -1,6 +1,6 @@
 import {
   Pagination
-} from "./chunk-HHIW7V7B.mjs";
+} from "./chunk-PFL4HNWM.mjs";
 import {
   VirtualList
 } from "./chunk-Y5X3G2LD.mjs";

package/dist/{chunk-BOGOQ44C.mjs → chunk-GCY55TBC.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-IIWUQK2P.mjs";
 import {
   Pagination
-} from "./chunk-HHIW7V7B.mjs";
+} from "./chunk-PFL4HNWM.mjs";
 import {
   Empty
 } from "./chunk-W7BC4I2Y.mjs";

package/dist/chunk-GR3Y3XWP.mjs

@@ -0,0 +1,47 @@
+// src/components/Kbd.tsx
+import { forwardRef } from "react";
+import {
+  formatKbdSeparatorText,
+  getKbdParts,
+  getKbdRootClasses,
+  kbdKeyClasses,
+  kbdSeparatorClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function hasRenderableChildren(children) {
+  if (children == null || typeof children === "boolean") return false;
+  if (typeof children === "string" && children.length === 0) return false;
+  return true;
+}
+var Kbd = forwardRef(
+  ({ keys, separator, size = "md", variant = "default", className, style, children, ...rest }, ref) => {
+    const parts = getKbdParts(keys, separator);
+    const hasChildren = hasRenderableChildren(children);
+    return /* @__PURE__ */ jsxs(
+      "kbd",
+      {
+        ref,
+        "data-kbd": "",
+        "data-kbd-size": size,
+        "data-kbd-variant": variant,
+        className: getKbdRootClasses({ size, variant, className }),
+        style,
+        ...rest,
+        children: [
+          parts.map(
+            (part, index) => part.type === "separator" ? /* @__PURE__ */ jsx("span", { className: kbdSeparatorClasses, "data-kbd-separator": "", children: ` ${part.value} ` }, `sep-${index}`) : /* @__PURE__ */ jsx("kbd", { className: kbdKeyClasses, "data-kbd-key": "", children: part.value }, `key-${index}`)
+          ),
+          hasChildren && parts.length > 0 ? /* @__PURE__ */ jsx("span", { className: kbdSeparatorClasses, "data-kbd-separator": "", children: formatKbdSeparatorText(separator) }) : null,
+          hasChildren ? children : null
+        ]
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+var Kbd_default = Kbd;
+
+export {
+  Kbd,
+  Kbd_default
+};