@expcat/tigercat-react 2.0.19 → 2.1.1

package/dist/chunk-2YOP55OF.mjs

@@ -0,0 +1,639 @@
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
+
+// src/components/NavigationMenu.tsx
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  useId
+} from "react";
+import {
+  classNames,
+  getNavigationMenuClasses,
+  getNavigationMenuListClasses,
+  getNavigationMenuItemClasses,
+  getNavigationMenuTriggerClasses,
+  getNavigationMenuChevronClasses,
+  getNavigationMenuContentClasses,
+  getNavigationMenuLinkClasses,
+  injectNavigationMenuStyles,
+  NAVIGATION_MENU_ENTER_CLASS,
+  NAVIGATION_MENU_CHEVRON_PATH,
+  NAVIGATION_MENU_BAR_ITEM_ATTR,
+  NAVIGATION_MENU_DEFAULT_DELAY_DURATION,
+  NAVIGATION_MENU_DEFAULT_SKIP_DELAY_DURATION,
+  NAVIGATION_MENU_DEFAULT_OFFSET,
+  isNavigationMenuValueOpen,
+  isNavigationMenuOpen,
+  resolveNavigationMenuOpenValue,
+  shouldSkipNavigationMenuOpenDelay,
+  isNavigationMenuTriggerOpenKey,
+  handleMenubarNavigation,
+  handleMenuNavigation,
+  initNavigationMenuRovingTabIndex,
+  focusFirstMenuItem,
+  captureActiveElement,
+  restoreFocus,
+  getSecureRel
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function containsFocusTarget(container, target) {
+  return Boolean(container && target instanceof Node && container.contains(target));
+}
+function getOpenPanelFromMenubar(menubar) {
+  if (!menubar) return null;
+  const trigger = menubar.querySelector('[aria-expanded="true"][aria-controls]');
+  const contentId = trigger?.getAttribute("aria-controls");
+  if (!contentId) return null;
+  return menubar.ownerDocument.getElementById(contentId);
+}
+var NavigationMenuContext = createContext(null);
+var NavigationMenuItemContext = createContext(null);
+var NavigationMenuContentContext = createContext(
+  null
+);
+var NavigationMenuLink = ({
+  href,
+  target,
+  rel,
+  disabled = false,
+  active = false,
+  className,
+  style,
+  onClick,
+  children
+}) => {
+  const root = useContext(NavigationMenuContext);
+  const item = useContext(NavigationMenuItemContext);
+  const content = useContext(NavigationMenuContentContext);
+  const inPanel = Boolean(content);
+  const isDisabled = disabled || Boolean(item?.disabled);
+  const handleClick = (event) => {
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    onClick?.(event);
+    root?.handleItemClick();
+  };
+  const handleFocus = () => {
+    if (inPanel) return;
+    if (!item?.hasPanel) {
+      root?.setValue(null, { restoreFocus: false });
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (inPanel) return;
+    if (root?.menubarRef.current) {
+      handleMenubarNavigation(root.menubarRef.current, event.nativeEvent);
+    }
+  };
+  const linkClasses = classNames(
+    getNavigationMenuLinkClasses(isDisabled, inPanel, active),
+    className
+  );
+  const computedRel = href ? getSecureRel(target, rel) : void 0;
+  const shared = {
+    className: linkClasses,
+    style,
+    role: "menuitem",
+    tabIndex: -1,
+    [NAVIGATION_MENU_BAR_ITEM_ATTR]: inPanel ? void 0 : "",
+    "aria-disabled": isDisabled || void 0,
+    "aria-current": active ? "page" : void 0,
+    "data-tiger-navigation-menu-link": "",
+    "data-active": active ? "true" : void 0,
+    onClick: handleClick,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown
+  };
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { href, target, rel: computedRel, ...shared, children });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", disabled: isDisabled, ...shared, children });
+};
+var NavigationMenuTrigger = ({
+  disabled = false,
+  showArrow,
+  className,
+  style,
+  children
+}) => {
+  const root = useContext(NavigationMenuContext);
+  const item = useContext(NavigationMenuItemContext);
+  const isDisabled = disabled || Boolean(item?.disabled) || Boolean(root?.disabled);
+  const arrow = showArrow !== void 0 ? showArrow : item?.showArrow ?? true;
+  const handleMouseEnter = () => {
+    if (isDisabled) return;
+    item?.scheduleOpen();
+  };
+  const handleMouseLeave = () => {
+    item?.scheduleClose();
+  };
+  const handleFocus = () => {
+    if (isDisabled || root?.isFocusOpenSuppressed()) return;
+    item?.open();
+  };
+  const handleClick = (event) => {
+    if (isDisabled) {
+      event.preventDefault();
+      return;
+    }
+    item?.open();
+  };
+  const handleKeyDown = (event) => {
+    if (isDisabled || !item) return;
+    if (root?.menubarRef.current && handleMenubarNavigation(root.menubarRef.current, event.nativeEvent)) {
+      return;
+    }
+    if (isNavigationMenuTriggerOpenKey(event.key) && item.hasPanel) {
+      event.preventDefault();
+      item.open(true);
+      return;
+    }
+    if (event.key === "Escape" && item.isOpen) {
+      event.preventDefault();
+      item.close();
+      item.triggerRef.current?.focus();
+    }
+  };
+  if (!item) return null;
+  const triggerClasses = classNames(
+    getNavigationMenuTriggerClasses(isDisabled, item.isOpen),
+    className
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: item.triggerRef,
+      type: "button",
+      className: triggerClasses,
+      style,
+      role: "menuitem",
+      tabIndex: -1,
+      ...{ [NAVIGATION_MENU_BAR_ITEM_ATTR]: "" },
+      "aria-haspopup": "menu",
+      "aria-expanded": item.isOpen,
+      "aria-controls": item.isOpen ? item.contentId : void 0,
+      "aria-disabled": isDisabled || void 0,
+      disabled: isDisabled,
+      "data-state": item.isOpen ? "open" : "closed",
+      "data-tiger-navigation-menu-trigger": "",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        children,
+        arrow ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: getNavigationMenuChevronClasses(item.isOpen),
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: NAVIGATION_MENU_CHEVRON_PATH })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var NavigationMenuContent = ({
+  mega = false,
+  className,
+  style,
+  children,
+  ...divProps
+}) => {
+  const root = useContext(NavigationMenuContext);
+  const item = useContext(NavigationMenuItemContext);
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const referenceRef = item?.triggerRef ?? triggerRef;
+  const contentRef = item?.contentRef ?? floatingRef;
+  const isOpen = Boolean(item?.isOpen);
+  const portalEnabled = Boolean(root?.portal);
+  useEffect(() => {
+    if (!item) return;
+    item.setHasPanel(true);
+    return () => item.setHasPanel(false);
+  }, [item]);
+  const overlay = useAnchoredOverlay({
+    referenceRef,
+    floatingRef: contentRef,
+    enabled: Boolean(item) && isOpen && !item?.disabled,
+    placement: root?.placement ?? "bottom-start",
+    offset: root?.offset ?? NAVIGATION_MENU_DEFAULT_OFFSET,
+    portal: portalEnabled,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    onDismiss: () => item?.close()
+  });
+  const handleMouseEnter = () => {
+    item?.cancelClose();
+  };
+  const handleMouseLeave = () => {
+    item?.scheduleClose();
+  };
+  const handleFocusOut = (event) => {
+    root?.handleFocusLeave(event);
+  };
+  const handleKeyDown = (event) => {
+    if (contentRef.current) {
+      handleMenuNavigation(contentRef.current, event.nativeEvent);
+    }
+    if (event.key === "Escape" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      event.stopPropagation();
+      item?.close();
+      item?.triggerRef.current?.focus();
+      return;
+    }
+    if (event.key === "ArrowRight" && root?.menubarRef.current && item?.triggerRef.current) {
+      item.triggerRef.current.focus();
+      handleMenubarNavigation(root.menubarRef.current, event.nativeEvent);
+    }
+  };
+  if (!item || !root) return null;
+  const popup = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: classNames(overlay.floatingClasses, NAVIGATION_MENU_ENTER_CLASS),
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      "data-tiger-navigation-menu-content": "",
+      hidden: !isOpen,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onBlur: handleFocusOut,
+      onKeyDown: handleKeyDown,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...divProps,
+          id: item.contentId,
+          className: classNames(getNavigationMenuContentClasses(mega), className),
+          style,
+          role: mega ? "group" : "menu",
+          children
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(NavigationMenuContentContext.Provider, { value: { inPanel: true }, children: renderOverlayPortal(popup, overlay.target, !portalEnabled) });
+};
+var NavigationMenuItem = ({
+  value: valueProp,
+  disabled = false,
+  className,
+  style,
+  children
+}) => {
+  const root = useContext(NavigationMenuContext);
+  const reactId = useId();
+  const autoValue = useMemo(() => `tiger-navigation-menu-item-${reactId}`, [reactId]);
+  const itemValue = valueProp ?? autoValue;
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  const [hasPanel, setHasPanel] = useState(false);
+  const isOpen = Boolean(root && !disabled && isNavigationMenuValueOpen(itemValue, root.value));
+  const contentId = `${autoValue}-content`;
+  const open = useCallback(
+    (focusPanel = false) => {
+      if (disabled || !root) return;
+      root.cancelClose();
+      root.setValue(itemValue);
+      if (!focusPanel) return;
+      requestAnimationFrame(() => {
+        const panel = contentRef.current ?? document.getElementById(contentId);
+        if (panel) focusFirstMenuItem(panel);
+      });
+    },
+    [contentId, disabled, itemValue, root]
+  );
+  const close = useCallback(() => {
+    if (!root) return;
+    if (isOpen) root.setValue(null);
+  }, [isOpen, root]);
+  const scheduleOpen = useCallback(() => {
+    if (disabled || !root) return;
+    root.scheduleOpen(itemValue);
+  }, [disabled, itemValue, root]);
+  const scheduleClose = useCallback(() => {
+    root?.scheduleClose(itemValue);
+  }, [itemValue, root]);
+  const cancelClose = useCallback(() => {
+    root?.cancelClose();
+  }, [root]);
+  const itemContext = useMemo(
+    () => ({
+      value: itemValue,
+      isOpen,
+      disabled,
+      hasPanel,
+      setHasPanel,
+      triggerRef,
+      contentRef,
+      contentId,
+      open,
+      close,
+      scheduleOpen,
+      scheduleClose,
+      cancelClose,
+      showArrow: root?.showArrow ?? true
+    }),
+    [
+      autoValue,
+      cancelClose,
+      close,
+      disabled,
+      hasPanel,
+      isOpen,
+      itemValue,
+      open,
+      root?.showArrow,
+      scheduleClose,
+      scheduleOpen
+    ]
+  );
+  return /* @__PURE__ */ jsx(NavigationMenuItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: classNames(getNavigationMenuItemClasses(), className),
+      style,
+      role: "none",
+      "data-tiger-navigation-menu-item": "",
+      "data-state": isOpen ? "open" : "closed",
+      children
+    }
+  ) });
+};
+var NavigationMenuList = ({
+  className,
+  style,
+  children,
+  ...ulProps
+}) => {
+  const root = useContext(NavigationMenuContext);
+  const listRef = useRef(null);
+  const setListRef = useCallback(
+    (node) => {
+      listRef.current = node;
+      if (root) {
+        ;
+        root.menubarRef.current = node;
+      }
+    },
+    [root]
+  );
+  useEffect(() => {
+    if (listRef.current) initNavigationMenuRovingTabIndex(listRef.current);
+  });
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ...ulProps,
+      ref: setListRef,
+      className: classNames(getNavigationMenuListClasses(), className),
+      style,
+      role: "menubar",
+      "data-tiger-navigation-menu-list": "",
+      children
+    }
+  );
+};
+var NavigationMenu = ({
+  value: controlledValue,
+  defaultValue,
+  open: controlledOpen,
+  defaultOpen = false,
+  disabled = false,
+  closeOnClick = true,
+  delayDuration = NAVIGATION_MENU_DEFAULT_DELAY_DURATION,
+  skipDelayDuration = NAVIGATION_MENU_DEFAULT_SKIP_DELAY_DURATION,
+  showArrow = true,
+  portal = true,
+  offset = NAVIGATION_MENU_DEFAULT_OFFSET,
+  placement = "bottom-start",
+  className,
+  style,
+  onValueChange,
+  onOpenChange,
+  children,
+  ...navProps
+}) => {
+  const initialValue = defaultValue ?? (defaultOpen ? controlledValue ?? null : null);
+  const [internalValue, setInternalValue] = useState(
+    isNavigationMenuOpen(initialValue) ? initialValue : null
+  );
+  const rootRef = useRef(null);
+  const menubarRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const openTimerRef = useRef(null);
+  const closeTimerRef = useRef(null);
+  const lastOpenAtRef = useRef(0);
+  const suppressFocusOpenRef = useRef(false);
+  const currentValue = resolveNavigationMenuOpenValue({
+    value: controlledValue,
+    internalValue,
+    open: controlledOpen
+  });
+  const currentValueRef = useRef(currentValue);
+  currentValueRef.current = currentValue;
+  const currentOpen = isNavigationMenuOpen(currentValue);
+  useEffect(() => {
+    injectNavigationMenuStyles();
+  }, []);
+  const clearTimers = useCallback(() => {
+    if (openTimerRef.current) {
+      clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  useEffect(() => () => clearTimers(), [clearTimers]);
+  const setValue = useCallback(
+    (next, options) => {
+      if (disabled && next != null) return;
+      clearTimers();
+      const resolvedNext = isNavigationMenuOpen(next) ? next : null;
+      const wasOpen = isNavigationMenuOpen(currentValueRef.current);
+      const willOpen = resolvedNext != null;
+      if (willOpen && !wasOpen) {
+        const active = captureActiveElement();
+        if (active && menubarRef.current?.contains(active)) {
+          previousActiveElementRef.current = active;
+        }
+      }
+      currentValueRef.current = resolvedNext;
+      if (controlledValue === void 0) {
+        setInternalValue(resolvedNext);
+      }
+      onValueChange?.(resolvedNext);
+      onOpenChange?.(willOpen);
+      if (!willOpen) {
+        suppressFocusOpenRef.current = true;
+        if (options?.restoreFocus !== false) {
+          restoreFocus(previousActiveElementRef.current);
+        }
+        previousActiveElementRef.current = null;
+        queueMicrotask(() => {
+          suppressFocusOpenRef.current = false;
+        });
+      }
+    },
+    [clearTimers, controlledValue, disabled, onOpenChange, onValueChange]
+  );
+  const scheduleOpen = useCallback(
+    (itemValue) => {
+      if (disabled) return;
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      const skip = shouldSkipNavigationMenuOpenDelay(
+        lastOpenAtRef.current,
+        Date.now(),
+        skipDelayDuration
+      );
+      const delay = skip ? 0 : delayDuration;
+      const apply = () => {
+        lastOpenAtRef.current = Date.now();
+        setValue(itemValue);
+        openTimerRef.current = null;
+      };
+      if (delay <= 0) {
+        apply();
+        return;
+      }
+      if (openTimerRef.current) clearTimeout(openTimerRef.current);
+      openTimerRef.current = setTimeout(apply, delay);
+    },
+    [delayDuration, disabled, setValue, skipDelayDuration]
+  );
+  const scheduleClose = useCallback(
+    (itemValue) => {
+      if (openTimerRef.current) {
+        clearTimeout(openTimerRef.current);
+        openTimerRef.current = null;
+      }
+      const close = () => {
+        if (currentValueRef.current === itemValue) setValue(null);
+        closeTimerRef.current = null;
+      };
+      if (skipDelayDuration <= 0) {
+        close();
+        return;
+      }
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = setTimeout(close, skipDelayDuration);
+    },
+    [setValue, skipDelayDuration]
+  );
+  const cancelClose = useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  const handleItemClick = useCallback(() => {
+    if (closeOnClick) setValue(null);
+  }, [closeOnClick, setValue]);
+  const handleFocusLeave = useCallback(
+    (event) => {
+      const next = event.relatedTarget;
+      if (containsFocusTarget(rootRef.current, next)) return;
+      if (containsFocusTarget(getOpenPanelFromMenubar(menubarRef.current), next)) return;
+      if (!isNavigationMenuOpen(currentValueRef.current)) return;
+      setValue(null, { restoreFocus: false });
+    },
+    [setValue]
+  );
+  const isFocusOpenSuppressed = useCallback(() => suppressFocusOpenRef.current, []);
+  const contextValue = useMemo(
+    () => ({
+      value: currentValue,
+      setValue,
+      scheduleOpen,
+      scheduleClose,
+      cancelClose,
+      closeOnClick,
+      handleItemClick,
+      handleFocusLeave,
+      portal,
+      disabled,
+      offset,
+      placement,
+      showArrow,
+      menubarRef,
+      isFocusOpenSuppressed
+    }),
+    [
+      cancelClose,
+      closeOnClick,
+      currentValue,
+      disabled,
+      handleFocusLeave,
+      handleItemClick,
+      isFocusOpenSuppressed,
+      offset,
+      placement,
+      portal,
+      scheduleClose,
+      scheduleOpen,
+      setValue,
+      showArrow
+    ]
+  );
+  const childrenArray = React.Children.toArray(children);
+  const hasList = childrenArray.some(
+    (child) => React.isValidElement(child) && child.type === NavigationMenuList
+  );
+  return /* @__PURE__ */ jsx(NavigationMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ...navProps,
+      ref: rootRef,
+      className: classNames(getNavigationMenuClasses(), className),
+      style,
+      "aria-label": navProps["aria-label"] ?? "Main",
+      "data-tiger-navigation-menu": "",
+      "data-state": currentOpen ? "open" : "closed",
+      onBlur: (event) => {
+        navProps.onBlur?.(event);
+        handleFocusLeave(event);
+      },
+      children: hasList ? children : /* @__PURE__ */ jsx(NavigationMenuList, { children })
+    }
+  ) });
+};
+
+export {
+  NavigationMenuContext,
+  NavigationMenuItemContext,
+  NavigationMenuContentContext,
+  NavigationMenuLink,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuList,
+  NavigationMenu
+};

package/dist/{chunk-25D5TXZH.mjs → chunk-32MCQMBJ.mjs}

@@ -1,12 +1,12 @@
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 
 // src/components/HeatmapChart.tsx
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
@@ -63,6 +63,7 @@ var HeatmapChart = ({
     handleClick
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -111,6 +112,7 @@ var HeatmapChart = ({
     [resolvedHoveredIndex, cells, valueFormatter]
   );
   const interactive = hoverable || selectable;
+  const pointerInteractive = interactive || showTooltip;
   const rect = innerRect;
   const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
   const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
@@ -288,7 +290,7 @@ var HeatmapChart = ({
       ]
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,
@@ -314,10 +316,10 @@ var HeatmapChart = ({
           top: `${rect.y}px`,
           width: `${rect.width}px`,
           height: `${rect.height}px`,
-          pointerEvents: interactive ? "auto" : "none"
+          pointerEvents: pointerInteractive ? "auto" : "none"
         },
-        onMouseMove: interactive ? handleCanvasMouseMove : void 0,
-        onMouseLeave: interactive ? handleMouseLeave : void 0,
+        onMouseMove: pointerInteractive ? handleCanvasMouseMove : void 0,
+        onMouseLeave: pointerInteractive ? handleMouseLeave : void 0,
         onClick: interactive ? handleCanvasClick : void 0
       }
     ),