@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-XI6KQAHW.mjs

@@ -0,0 +1,256 @@
+import {
+  Affix
+} from "./chunk-5D6BOIZB.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Anchor.tsx
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  classNames,
+  anchorNestedListClasses,
+  createAnchorObserver,
+  createProgrammaticScrollLock,
+  findAnchorLinkElement,
+  getAnchorInkActiveClasses,
+  getAnchorInkContainerClasses,
+  getAnchorInkStyle,
+  getAnchorLabels,
+  getAnchorLinkClasses,
+  getAnchorLinkListClasses,
+  getAnchorTargetElement,
+  getAnchorWrapperClasses,
+  mergeTigerLocale,
+  replaceAnchorHash,
+  resolveActiveAnchorHref,
+  resolveAnchorScrollContainer,
+  resolveScrollRoot,
+  scrollToAnchor,
+  shouldHandleAnchorClick,
+  sortAnchorHrefsByDocumentOrder
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AnchorContext = createContext(null);
+function useAnchorContext() {
+  return useContext(AnchorContext);
+}
+var AnchorLink = ({
+  href,
+  title,
+  target,
+  className,
+  children,
+  onClick,
+  ...props
+}) => {
+  const anchorContext = useAnchorContext();
+  const nodeRef = useRef(null);
+  const register = anchorContext?.registerLink;
+  const unregister = anchorContext?.unregisterLink;
+  useLayoutEffect(() => {
+    const node = nodeRef.current;
+    if (!href || !node || !register) return void 0;
+    register(href, node);
+    return () => {
+      unregister?.(href, node);
+    };
+  }, [href, register, unregister]);
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (!anchorContext) return;
+    anchorContext.handleLinkClick(href, event, target);
+  };
+  const isActive = anchorContext?.activeLink === href;
+  const linkClasses = classNames(getAnchorLinkClasses(Boolean(isActive), className));
+  const nested = title != null && children != null;
+  const link = /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      ref: nodeRef,
+      href,
+      target,
+      className: linkClasses,
+      "data-anchor-href": href,
+      "aria-current": isActive ? "location" : void 0,
+      onClick: handleClick,
+      children: nested ? title : title ?? children
+    }
+  );
+  if (!anchorContext) return link;
+  return /* @__PURE__ */ jsxs("li", { children: [
+    link,
+    nested ? /* @__PURE__ */ jsx("ul", { className: anchorNestedListClasses, children }) : null
+  ] });
+};
+var Anchor = forwardRef(function Anchor2({
+  affix = true,
+  bounds = 5,
+  offsetTop = 0,
+  showInkInFixed = true,
+  targetOffset,
+  getCurrentAnchor,
+  getContainer,
+  direction = "vertical",
+  className,
+  style,
+  onClick,
+  onChange,
+  children,
+  locale,
+  labels,
+  "aria-label": ariaLabel
+}, ref) {
+  const [activeLink, setActiveLink] = useState("");
+  const [linkEntries, setLinkEntries] = useState([]);
+  const anchorRef = useRef(null);
+  const inkRef = useRef(null);
+  const getContainerRef = useRef(getContainer);
+  getContainerRef.current = getContainer;
+  const getCurrentAnchorRef = useRef(getCurrentAnchor);
+  getCurrentAnchorRef.current = getCurrentAnchor;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const scrollLockRef = useRef(
+    createProgrammaticScrollLock(() => resolveAnchorScrollContainer(getContainerRef.current))
+  );
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labelSet = getAnchorLabels(mergedLocale, labels);
+  const navLabel = ariaLabel ?? labelSet.ariaLabel;
+  const scrollOffset = targetOffset ?? offsetTop;
+  const links = useMemo(() => sortAnchorHrefsByDocumentOrder(linkEntries), [linkEntries]);
+  const registerLink = useCallback((href, node) => {
+    setLinkEntries((prev) => {
+      if (prev.some((entry) => entry.node === node)) {
+        return prev.map((entry) => entry.node === node ? { href, node } : entry);
+      }
+      return [...prev, { href, node }];
+    });
+  }, []);
+  const unregisterLink = useCallback((href, node) => {
+    setLinkEntries((prev) => prev.filter((entry) => entry.node !== node || entry.href !== href));
+  }, []);
+  const applyActive = useCallback((href) => {
+    const finalHref = resolveActiveAnchorHref(href, getCurrentAnchorRef.current);
+    setActiveLink((prev) => {
+      if (finalHref !== prev) {
+        onChangeRef.current?.(finalHref);
+        return finalHref;
+      }
+      return prev;
+    });
+    return finalHref;
+  }, []);
+  const scrollTo = useCallback(
+    (href) => {
+      const container = resolveAnchorScrollContainer(getContainerRef.current);
+      scrollToAnchor(href, container, scrollOffset);
+    },
+    [scrollOffset]
+  );
+  const handleLinkClick = useCallback(
+    (href, event, targetAttr) => {
+      const hasTargetElement = Boolean(getAnchorTargetElement(href));
+      if (!shouldHandleAnchorClick(event.nativeEvent, {
+        target: targetAttr,
+        hasTargetElement
+      })) {
+        onClick?.(event, href);
+        return;
+      }
+      event.preventDefault();
+      onClick?.(event, href);
+      const finalHref = applyActive(href);
+      scrollLockRef.current.lock();
+      scrollTo(finalHref);
+      replaceAnchorHash(finalHref);
+    },
+    [applyActive, onClick, scrollTo]
+  );
+  const resolved = resolveScrollRoot(getContainer);
+  const resolvedKey = resolved.isWindow ? "window" : resolved.target;
+  useEffect(() => {
+    const container = resolveAnchorScrollContainer(getContainerRef.current);
+    const root = container === window ? null : container;
+    const stop = createAnchorObserver(links, {
+      offsetTop: scrollOffset,
+      bounds,
+      root,
+      onChange: (newActiveLink) => {
+        if (scrollLockRef.current.isLocked()) return;
+        applyActive(newActiveLink);
+      }
+    });
+    return () => {
+      stop();
+    };
+  }, [bounds, links, scrollOffset, resolvedKey, applyActive]);
+  useEffect(() => {
+    const scrollLock = scrollLockRef.current;
+    return () => {
+      scrollLock.dispose();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const ink = inkRef.current;
+    const root = anchorRef.current;
+    if (!ink || !root || !activeLink) return;
+    const activeLinkElement = findAnchorLinkElement(root, activeLink);
+    if (!activeLinkElement) return;
+    const next = getAnchorInkStyle(
+      direction,
+      activeLinkElement.getBoundingClientRect(),
+      root.getBoundingClientRect()
+    );
+    ink.style.top = next.top;
+    ink.style.height = next.height;
+    ink.style.insetInlineStart = next.insetInlineStart;
+    ink.style.width = next.width;
+  }, [activeLink, direction, links]);
+  const wrapperClasses = classNames(getAnchorWrapperClasses(className));
+  const showInk = !affix || showInkInFixed;
+  const setNavRef = (node) => {
+    anchorRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const contextValue = useMemo(
+    () => ({
+      activeLink,
+      direction,
+      registerLink,
+      unregisterLink,
+      handleLinkClick
+    }),
+    [activeLink, direction, registerLink, unregisterLink, handleLinkClick]
+  );
+  const nav = /* @__PURE__ */ jsxs("nav", { ref: setNavRef, className: wrapperClasses, style, "aria-label": navLabel, children: [
+    showInk && /* @__PURE__ */ jsx("div", { className: getAnchorInkContainerClasses(direction), children: /* @__PURE__ */ jsx("div", { ref: inkRef, className: getAnchorInkActiveClasses(direction) }) }),
+    /* @__PURE__ */ jsx("ul", { className: getAnchorLinkListClasses(direction), children })
+  ] });
+  return /* @__PURE__ */ jsx(AnchorContext.Provider, { value: contextValue, children: affix ? /* @__PURE__ */ jsx(Affix, { offsetTop, children: nav }) : nav });
+});
+Anchor.displayName = "Anchor";
+var Anchor_default = Anchor;
+
+export {
+  useAnchorContext,
+  AnchorLink,
+  Anchor,
+  Anchor_default
+};

package/dist/{chunk-Y3SGFGN6.mjs → chunk-XJHC6JEC.mjs}

@@ -1,10 +1,19 @@
-// src/components/MessageRoot.ts
+// src/components/MessageRoot.tsx
+import { isBrowser } from "@expcat/tigercat-core";
 var messageModulePromise = null;
+var resolvedMessage = null;
 function loadMessageModule() {
-  messageModulePromise ??= import("./components/Message.mjs");
+  messageModulePromise ??= import("./components/Message.mjs").then((module) => {
+    resolvedMessage = module.Message;
+    return module;
+  });
   return messageModulePromise;
 }
 function forwardMessage(method, options) {
+  if (!isBrowser()) return () => void 0;
+  if (resolvedMessage) {
+    return resolvedMessage[method](options);
+  }
   let closeMessage = null;
   let requestedClose = false;
   void loadMessageModule().then(({ Message: Message2 }) => {
@@ -41,6 +50,11 @@ var Message = {
     return forwardMessage("loading", options);
   },
   clear() {
+    if (!isBrowser()) return;
+    if (resolvedMessage) {
+      resolvedMessage.clear();
+      return;
+    }
     void loadMessageModule().then(({ Message: Message2 }) => {
       Message2.clear();
     });

package/dist/{chunk-WTHWLCRL.mjs → chunk-XKB7ECPU.mjs}

@@ -1,11 +1,14 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
 import {
   useAnchoredOverlay
-} from "./chunk-HKAZXG74.mjs";
+} from "./chunk-NPGU6VYD.mjs";
 
 // src/utils/use-popup.ts
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import {
-  buildTriggerHandlerMap,
+  buildOverlayTriggerHandlerMap,
   createFloatingHoverDelayController,
   restoreFocus
 } from "@expcat/tigercat-core";
@@ -18,21 +21,23 @@ function usePopup(options) {
     placement = "top",
     offset = 8,
     multiTrigger = true,
+    arrowRef,
     onOpenChange
   } = options;
-  const isControlled = open !== void 0;
-  const [internalVisible, setInternalVisible] = useState(defaultOpen);
-  const currentVisible = isControlled ? open : internalVisible;
+  const [currentVisible, setVisibleState] = useControlledState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const floatingRef = useRef(null);
   const setVisible = useCallback(
     (next) => {
       if (disabled && next) return;
-      if (!isControlled) setInternalVisible(next);
-      onOpenChange?.(next);
+      setVisibleState(next);
     },
-    [disabled, isControlled, onOpenChange]
+    [disabled, setVisibleState]
   );
   const setVisibleRef = useRef(setVisible);
   setVisibleRef.current = setVisible;
@@ -47,19 +52,15 @@ function usePopup(options) {
   }
   const hoverController = hoverControllerRef.current;
   const restoreTriggerFocus = useCallback(() => {
-    const trigger2 = triggerRef.current;
-    const target = trigger2?.querySelector(
-      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
-    ) ?? trigger2;
     window.setTimeout(() => {
-      restoreFocus(target, { preventScroll: true });
+      restoreFocus(triggerRef.current, { preventScroll: true });
     }, 0);
   }, []);
+  const effectiveTrigger = multiTrigger ? trigger : "click";
   const closeAndRestoreFocus = useCallback(() => {
     hoverController.closeNow();
-    restoreTriggerFocus();
-  }, [hoverController, restoreTriggerFocus]);
-  const effectiveTrigger = multiTrigger ? trigger : "click";
+    if (effectiveTrigger !== "hover") restoreTriggerFocus();
+  }, [effectiveTrigger, hoverController, restoreTriggerFocus]);
   const handleToggle = useCallback(() => {
     if (disabled) return;
     hoverController.cancel();
@@ -74,14 +75,21 @@ function usePopup(options) {
     hoverController.cancel();
     setVisible(true);
   }, [disabled, effectiveTrigger, setVisible, hoverController]);
-  const handleHide = useCallback(() => {
-    if (disabled) return;
-    if (effectiveTrigger === "hover") {
-      hoverController.leave();
-      return;
-    }
-    hoverController.closeNow();
-  }, [disabled, effectiveTrigger, hoverController]);
+  const handleHide = useCallback(
+    (event) => {
+      if (disabled) return;
+      const related = event?.relatedTarget;
+      if (related instanceof Node && (floatingRef.current?.contains(related) || triggerRef.current?.contains(related))) {
+        return;
+      }
+      if (effectiveTrigger === "hover") {
+        hoverController.leave();
+        return;
+      }
+      hoverController.closeNow();
+    },
+    [disabled, effectiveTrigger, hoverController]
+  );
   const overlay = useAnchoredOverlay({
     enabled: currentVisible,
     referenceRef: triggerRef,
@@ -89,8 +97,9 @@ function usePopup(options) {
     containerRef,
     placement,
     offset,
-    dismissOnOutside: effectiveTrigger === "click",
+    dismissOnOutside: effectiveTrigger === "click" || effectiveTrigger === "hover",
     dismissOnEscape: effectiveTrigger !== "manual",
+    arrowRef,
     onDismiss: (reason) => {
       if (reason === "escape") {
         closeAndRestoreFocus();
@@ -117,7 +126,7 @@ function usePopup(options) {
     if (!multiTrigger) {
       return { onClick: handleToggle };
     }
-    return buildTriggerHandlerMap(
+    return buildOverlayTriggerHandlerMap(
       effectiveTrigger,
       { toggle: handleToggle, show: handleShow, hide: handleHide },
       "react"
@@ -137,7 +146,9 @@ function usePopup(options) {
     positioned: overlay.positioned,
     overlayTarget: overlay.target,
     triggerHandlers,
-    closeAndRestoreFocus
+    closeAndRestoreFocus,
+    arrowX: overlay.arrowX,
+    arrowY: overlay.arrowY
   };
 }