@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-NNDEPQJG.mjs

@@ -0,0 +1,172 @@
+// src/components/Masonry.tsx
+import {
+  Children,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  classNames,
+  computeMasonryPositions,
+  getMasonryFlowRootStyle,
+  getMasonryItemClasses,
+  getMasonryItemPositionStyle,
+  getMasonryPackedRootStyle,
+  getMasonryRootClasses,
+  hasMeasuredMasonryHeights,
+  isResponsiveMap,
+  observeElementSize,
+  observeScrollAreaSize,
+  readMasonryItemHeight,
+  resolveMasonryColumnCount,
+  resolveMasonryGap,
+  MASONRY_DEFAULT_COLUMNS,
+  MASONRY_DEFAULT_GAP
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function childSignature(nodes) {
+  return nodes.map(
+    (node, index) => `${index}:${typeof node === "object" && node !== null && "key" in node ? String(node.key ?? "") : String(node)}`
+  ).join("\0");
+}
+function sameHeights(previous, next) {
+  return previous.length === next.length && previous.every((height, index) => height === next[index]);
+}
+var Masonry = forwardRef(function Masonry2({
+  columns = MASONRY_DEFAULT_COLUMNS,
+  gap = MASONRY_DEFAULT_GAP,
+  className,
+  columnClassName: _columnClassName,
+  itemClassName,
+  children,
+  onLayout,
+  style,
+  ...rest
+}, ref) {
+  const rootRef = useRef(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const heightsRef = useRef([]);
+  const lastSignatureRef = useRef("");
+  const onLayoutRef = useRef(onLayout);
+  onLayoutRef.current = onLayout;
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [heights, setHeights] = useState([]);
+  const childNodes = useMemo(() => Children.toArray(children), [children]);
+  const signature = childSignature(childNodes);
+  const isResponsive = isResponsiveMap(columns) || isResponsiveMap(gap);
+  const widthForResolve = isResponsive ? containerWidth : 1024;
+  const columnCount = resolveMasonryColumnCount(columns, widthForResolve);
+  const gapPx = resolveMasonryGap(gap, widthForResolve);
+  const packed = hasMeasuredMasonryHeights(heights) && containerWidth > 0 && heights.length === childNodes.length;
+  const positions = packed ? computeMasonryPositions(heights, columnCount, gapPx, containerWidth) : [];
+  const emitLayout = useCallback(
+    (nextHeights) => {
+      const packedPositions = hasMeasuredMasonryHeights(nextHeights) ? computeMasonryPositions(nextHeights, columnCount, gapPx, containerWidth) : [];
+      const columnHeights = Array.from({ length: columnCount }, () => 0);
+      packedPositions.forEach((position, index) => {
+        const bottom = position.top + (nextHeights[index] || 0);
+        if (bottom > columnHeights[position.column]) columnHeights[position.column] = bottom;
+      });
+      onLayoutRef.current?.({ columnCount, columnHeights });
+    },
+    [columnCount, containerWidth, gapPx]
+  );
+  const measure = useCallback(() => {
+    const nextHeights = childNodes.map((_, index) => {
+      const element = itemRefs.current.get(index);
+      return element ? readMasonryItemHeight(element) : 0;
+    });
+    if (!sameHeights(heightsRef.current, nextHeights)) {
+      heightsRef.current = nextHeights;
+      setHeights(nextHeights);
+    }
+    emitLayout(nextHeights);
+  }, [childNodes, emitLayout]);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return void 0;
+    setContainerWidth(root.getBoundingClientRect().width);
+    return observeElementSize(root, ({ width }) => setContainerWidth(width));
+  }, []);
+  useEffect(() => {
+    if (lastSignatureRef.current !== signature) {
+      lastSignatureRef.current = signature;
+      heightsRef.current = [];
+      setHeights([]);
+    }
+    measure();
+  }, [signature, columnCount, gapPx, containerWidth, measure]);
+  useEffect(() => {
+    if (childNodes.length === 0) return void 0;
+    const items = Array.from(itemRefs.current.values());
+    const stopRo = observeScrollAreaSize(items, measure);
+    const medias = items.flatMap((el) => Array.from(el.querySelectorAll("img, video")));
+    const onLoad = () => measure();
+    for (const media of medias) {
+      media.addEventListener("load", onLoad);
+      media.addEventListener("error", onLoad);
+    }
+    return () => {
+      stopRo();
+      for (const media of medias) {
+        media.removeEventListener("load", onLoad);
+        media.removeEventListener("error", onLoad);
+      }
+    };
+  }, [signature, measure, childNodes.length]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      relayout: measure,
+      getColumnCount: () => columnCount
+    }),
+    [measure, columnCount]
+  );
+  const packedHeight = packed ? Math.max(0, ...positions.map((position, index) => position.top + (heights[index] || 0))) : 0;
+  const rootStyle = packed ? { ...getMasonryPackedRootStyle(packedHeight), ...style } : { ...getMasonryFlowRootStyle(columnCount, gapPx), ...style };
+  const labelled = Boolean(rest["aria-label"] || rest["aria-labelledby"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: rootRef,
+      role: labelled ? "list" : rest.role,
+      className: classNames(getMasonryRootClasses(className)),
+      style: rootStyle,
+      "data-masonry": "",
+      children: childNodes.map((child, index) => {
+        const key = typeof child === "object" && child !== null && "key" in child && child.key != null ? child.key : `item-${index}`;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: labelled ? "listitem" : void 0,
+            className: getMasonryItemClasses(itemClassName),
+            style: packed && positions[index] ? getMasonryItemPositionStyle(positions[index]) : void 0,
+            "data-masonry-item": index,
+            ref: (el) => {
+              if (el) itemRefs.current.set(index, el);
+              else {
+                const existing = itemRefs.current.get(index);
+                if (!existing || !existing.isConnected) itemRefs.current.delete(index);
+              }
+            },
+            children: child
+          },
+          key
+        );
+      })
+    }
+  );
+});
+Masonry.displayName = "Masonry";
+var Masonry_default = Masonry;
+
+export {
+  Masonry,
+  Masonry_default
+};

package/dist/{chunk-HKAZXG74.mjs → chunk-NPGU6VYD.mjs}

@@ -13,16 +13,21 @@ import {
   getFocusTrapNavigation,
   getFocusableElements,
   isEventOutside,
+  isFocusInForeignOverlay,
   lockBodyScroll,
+  setBackgroundInert,
   isBrowser,
   computeFloatingPosition,
   autoUpdateFloating,
   resolveAnchoredOverlayTarget,
   getAnchoredOverlayTabTarget,
   getAnchoredOverlayLayoutClasses,
-  FLOATING_OVERLAY_Z_INDEX,
+  getOverlayDirLang,
+  OVERLAY_Z_INDEX,
   getTransformOrigin,
   restoreFocus,
+  captureActiveElement,
+  focusFirst,
   registerEscapeDismiss
 } from "@expcat/tigercat-core";
 var OVERLAY_LAYER_SELECTOR = "[data-tiger-overlay-layer]";
@@ -68,15 +73,21 @@ function useBodyScrollLock({ enabled }) {
     return lockBodyScroll();
   }, [enabled]);
 }
-function renderBodyPortal(node) {
-  if (!isBrowser()) return null;
-  return createPortal(node, document.body);
+function useBackgroundInert({
+  enabled,
+  containerRef
+}) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!enabled || !container) return;
+    return setBackgroundInert(container);
+  }, [enabled, containerRef]);
 }
-function renderOverlayPortal(node, target, disabled = false) {
-  if (node == null || typeof node === "boolean") return node;
-  const layeredNode = createElement(
+function wrapOverlayLayer(node, target) {
+  const dirLang = getOverlayDirLang(target);
+  return createElement(
     "div",
-    { className: "contents", "data-tiger-overlay-layer": "" },
+    { className: "contents", "data-tiger-overlay-layer": "", ...dirLang },
     node,
     createElement("div", {
       key: "overlay-host",
@@ -84,26 +95,89 @@ function renderOverlayPortal(node, target, disabled = false) {
       "data-tiger-overlay-host": ""
     })
   );
+}
+function renderBodyPortal(node, disabled = false) {
+  if (node == null || typeof node === "boolean") return node;
+  const target = isBrowser() ? resolveAnchoredOverlayTarget(null) : null;
+  const layeredNode = wrapOverlayLayer(node, target);
   if (disabled || !target) return layeredNode;
   return createPortal(layeredNode, target);
 }
-function useFocusTrap({ enabled, containerRef }) {
-  useEffect(() => {
+function useOverlayPortalTarget() {
+  const anchorRef = useRef(null);
+  const [target, setTarget] = useState(null);
+  useLayoutEffect(() => {
+    setTarget(resolveAnchoredOverlayTarget(anchorRef.current));
+  }, []);
+  return {
+    anchorRef,
+    target: target ?? (isBrowser() ? resolveAnchoredOverlayTarget(anchorRef.current) : null)
+  };
+}
+function renderOverlayPortal(node, target, disabled = false) {
+  if (node == null || typeof node === "boolean") return node;
+  const layeredNode = wrapOverlayLayer(node, target);
+  if (disabled || !target) return layeredNode;
+  return createPortal(layeredNode, target);
+}
+function useFocusTrap({
+  enabled,
+  containerRef,
+  inert = false,
+  autoFocus = false
+}) {
+  const restoreTargetRef = useRef(null);
+  const wasEnabledRef = useRef(false);
+  if (autoFocus && enabled && !wasEnabledRef.current) {
+    restoreTargetRef.current = captureActiveElement();
+  }
+  wasEnabledRef.current = enabled;
+  useLayoutEffect(() => {
+    if (!enabled) {
+      if (autoFocus) {
+        restoreFocus(restoreTargetRef.current);
+        restoreTargetRef.current = null;
+      }
+      return;
+    }
     const container = containerRef.current;
-    if (!enabled || !container) return;
+    if (!container) return;
     const ownerDocument = container.ownerDocument;
+    const releaseInert = inert ? setBackgroundInert(container) : void 0;
+    if (autoFocus) {
+      const focusables = getFocusableElements(container);
+      focusFirst([...focusables, container]);
+    }
     const handler = (event) => {
-      if (!(event.target instanceof Node) || !container.contains(event.target)) return;
       const focusables = getFocusableElements(container);
       const activeElement = ownerDocument.activeElement;
+      const inside = activeElement instanceof Node && container.contains(activeElement);
+      if (!inside) {
+        if (event.key !== "Tab") return;
+        if (isFocusInForeignOverlay(container, activeElement)) return;
+        event.preventDefault();
+        const next = event.shiftKey ? focusables[focusables.length - 1] : focusables[0];
+        next?.focus();
+        return;
+      }
       const nav = getFocusTrapNavigation(event, focusables, activeElement);
-      if (!nav.shouldHandle || !nav.next) return;
+      if (!nav.shouldHandle) return;
       event.preventDefault();
-      nav.next.focus();
+      nav.next?.focus();
     };
     ownerDocument.addEventListener("keydown", handler, true);
-    return () => ownerDocument.removeEventListener("keydown", handler, true);
-  }, [enabled, containerRef]);
+    return () => {
+      ownerDocument.removeEventListener("keydown", handler, true);
+      releaseInert?.();
+    };
+  }, [enabled, containerRef, inert, autoFocus]);
+  useLayoutEffect(() => {
+    return () => {
+      if (!autoFocus) return;
+      restoreFocus(restoreTargetRef.current);
+      restoreTargetRef.current = null;
+    };
+  }, [autoFocus]);
 }
 function useFloating(options) {
   const {
@@ -190,6 +264,9 @@ function useFloating(options) {
     referenceWidth
   };
 }
+function resolveOverlayPortalTarget(reference, getContainer) {
+  return getContainer?.() ?? resolveAnchoredOverlayTarget(reference);
+}
 function useAnchoredOverlay({
   enabled,
   referenceRef,
@@ -201,9 +278,11 @@ function useAnchoredOverlay({
   layout = "anchored",
   matchReferenceWidth = false,
   portal = true,
+  getContainer,
   dismissOnOutside = false,
   dismissOnEscape = false,
   restoreFocusOnDismiss = false,
+  arrowRef,
   onDismiss
 }) {
   const [target, setTarget] = useState(null);
@@ -220,22 +299,25 @@ function useAnchoredOverlay({
       setTarget(null);
       return;
     }
-    setTarget(resolveAnchoredOverlayTarget(referenceRef.current));
-  }, [portal, referenceRef]);
-  const resolvedTarget = portal && referenceRef.current ? resolveAnchoredOverlayTarget(referenceRef.current) : null;
+    setTarget(resolveOverlayPortalTarget(referenceRef.current, getContainer));
+  }, [portal, referenceRef, getContainer]);
+  const resolvedTarget = portal && referenceRef.current ? resolveOverlayPortalTarget(referenceRef.current, getContainer) : null;
   const effectiveTarget = resolvedTarget ?? target;
   const {
     x,
     y,
     placement: actualPlacement,
     isPositioned,
-    referenceWidth
+    referenceWidth,
+    arrowX,
+    arrowY
   } = useFloating({
     referenceRef,
     floatingRef,
     enabled,
     placement,
     offset,
+    arrowRef,
     context: effectiveTarget
   });
   const dismiss = useCallback(
@@ -282,7 +364,7 @@ function useAnchoredOverlay({
       "--tiger-overlay-x": `${x}px`,
       "--tiger-overlay-y": `${y}px`,
       "--tiger-overlay-reference-width": `${referenceWidth}px`,
-      zIndex: FLOATING_OVERLAY_Z_INDEX,
+      zIndex: OVERLAY_Z_INDEX.overlay,
       transformOrigin: getTransformOrigin(actualPlacement)
     }),
     [actualPlacement, referenceWidth, x, y]
@@ -294,14 +376,19 @@ function useAnchoredOverlay({
     positioned: isPositioned,
     placement: actualPlacement,
     x,
-    y
+    y,
+    arrowX,
+    arrowY
   };
 }
 
 export {
+  useClickOutside,
   useEscapeKey,
   useBodyScrollLock,
+  useBackgroundInert,
   renderBodyPortal,
+  useOverlayPortalTarget,
   renderOverlayPortal,
   useFocusTrap,
   useAnchoredOverlay

package/dist/chunk-NRLES2YZ.mjs

@@ -0,0 +1,174 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/InfiniteScroll.tsx
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import {
+  classNames,
+  shouldLoadMore,
+  createInfiniteScrollObserver,
+  resolveLocaleText,
+  mergeTigerLocale,
+  getInfiniteScrollContainerClasses,
+  getInfiniteScrollSentinelStyle,
+  getInfiniteScrollChromeClasses,
+  infiniteScrollLoaderClasses,
+  infiniteScrollEndClasses,
+  infiniteScrollSentinelClasses
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var InfiniteScroll = ({
+  hasMore = true,
+  loading = false,
+  threshold = 100,
+  loadingText,
+  endText,
+  direction = "vertical",
+  inverse = false,
+  disabled = false,
+  height,
+  root = "container",
+  className,
+  locale,
+  children,
+  loader,
+  end,
+  onLoadMore,
+  style,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const dir = config.direction === "rtl" ? "rtl" : "ltr";
+  const containerRef = useRef(null);
+  const sentinelRef = useRef(null);
+  const onLoadMoreRef = useRef(onLoadMore);
+  onLoadMoreRef.current = onLoadMore;
+  const pendingRef = useRef(false);
+  const wasLoadingRef = useRef(loading);
+  const prevScrollHeightRef = useRef(null);
+  const containerClasses = useMemo(
+    () => getInfiniteScrollContainerClasses(direction, className),
+    [direction, className]
+  );
+  const requestLoad = useCallback(() => {
+    if (disabled || loading || !hasMore || pendingRef.current) return;
+    pendingRef.current = true;
+    onLoadMoreRef.current?.();
+  }, [disabled, loading, hasMore]);
+  useEffect(() => {
+    if (wasLoadingRef.current && !loading) pendingRef.current = false;
+    if (loading) pendingRef.current = true;
+    wasLoadingRef.current = loading;
+  }, [loading]);
+  const resolveObserverRoot = useCallback(() => {
+    if (root === "container" || root === void 0) return containerRef.current;
+    return root;
+  }, [root]);
+  const checkScroll = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (shouldLoadMore(el, threshold, direction, inverse, dir)) requestLoad();
+  }, [threshold, direction, inverse, dir, requestLoad]);
+  useEffect(() => {
+    if (disabled || !hasMore) return;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+    const observerRoot = resolveObserverRoot();
+    const teardown = createInfiniteScrollObserver(sentinel, {
+      threshold,
+      direction,
+      root: observerRoot,
+      inverse,
+      onLoadMore: requestLoad
+    });
+    if (teardown) {
+      const el2 = containerRef.current;
+      if (observerRoot && observerRoot === el2) checkScroll();
+      return teardown;
+    }
+    const el = containerRef.current;
+    if (el) {
+      el.addEventListener("scroll", checkScroll, { passive: true });
+      checkScroll();
+      return () => el.removeEventListener("scroll", checkScroll);
+    }
+  }, [
+    disabled,
+    loading,
+    hasMore,
+    threshold,
+    direction,
+    inverse,
+    requestLoad,
+    resolveObserverRoot,
+    checkScroll
+  ]);
+  useLayoutEffect(() => {
+    if (!inverse) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const next = el.scrollHeight;
+    const prev = prevScrollHeightRef.current;
+    if (prev != null && next !== prev) el.scrollTop += next - prev;
+    prevScrollHeightRef.current = next;
+  });
+  const sentinelEl = hasMore ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: sentinelRef,
+      className: infiniteScrollSentinelClasses,
+      "aria-hidden": "true",
+      style: getInfiniteScrollSentinelStyle(direction)
+    }
+  ) : null;
+  const loaderEl = loading ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: getInfiniteScrollChromeClasses(direction, infiniteScrollLoaderClasses),
+      role: "status",
+      "aria-live": "polite",
+      children: loader ?? resolveLocaleText("Loading...", loadingText, mergedLocale?.common?.loadingText)
+    }
+  ) : null;
+  const endEl = !hasMore && !loading ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: getInfiniteScrollChromeClasses(direction, infiniteScrollEndClasses),
+      "aria-live": "polite",
+      children: end ?? resolveLocaleText("No more data", endText, mergedLocale?.common?.noMoreText)
+    }
+  ) : null;
+  const chrome = /* @__PURE__ */ jsxs(Fragment, { children: [
+    sentinelEl,
+    loaderEl,
+    endEl
+  ] });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      className: classNames(containerClasses),
+      style: { ...style, ...height !== void 0 ? { height: `${height}px` } : {} },
+      "aria-busy": loading || void 0,
+      children: inverse ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        chrome,
+        children
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        chrome
+      ] })
+    }
+  );
+};
+var InfiniteScroll_default = InfiniteScroll;
+
+export {
+  InfiniteScroll,
+  InfiniteScroll_default
+};