@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/utils/useAnchorPositioning.cjs

@@ -0,0 +1,421 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useAnchorPositioning_exports = {};
+__export(useAnchorPositioning_exports, {
+  useAnchorPositioning: () => useAnchorPositioning
+});
+module.exports = __toCommonJS(useAnchorPositioning_exports);
+var import_octane = require("octane");
+var import_utils = require("@floating-ui/utils");
+var import_floating_ui = require("@octanejs/floating-ui");
+var import_internal = require("../internal.cjs");
+var import_owner = require("./owner.cjs");
+var import_useValueAsRef = require("./useValueAsRef.cjs");
+var import_useStableCallback = require("./useStableCallback.cjs");
+var import_DirectionContext = require("./DirectionContext.cjs");
+var import_useFloating = require("./floating/useFloating.cjs");
+var import_hideMiddleware = require("./hideMiddleware.cjs");
+var import_adaptiveOriginMiddleware = require("./adaptiveOriginMiddleware.cjs");
+function getLogicalSide(sideParam, renderedSide, isRtl) {
+  const isLogicalSideParam = sideParam === "inline-start" || sideParam === "inline-end";
+  const logicalRight = isRtl ? "inline-start" : "inline-end";
+  const logicalLeft = isRtl ? "inline-end" : "inline-start";
+  return {
+    top: "top",
+    right: isLogicalSideParam ? logicalRight : "right",
+    bottom: "bottom",
+    left: isLogicalSideParam ? logicalLeft : "left"
+  }[renderedSide];
+}
+function getOffsetData(state, sideParam, isRtl) {
+  const { rects, placement } = state;
+  const data = {
+    side: getLogicalSide(sideParam, (0, import_utils.getSide)(placement), isRtl),
+    align: (0, import_utils.getAlignment)(placement) || "center",
+    anchor: { width: rects.reference.width, height: rects.reference.height },
+    positioner: { width: rects.floating.width, height: rects.floating.height }
+  };
+  return data;
+}
+function useAnchorPositioning(params, slotArg) {
+  const slot = slotArg ?? (0, import_internal.S)("useAnchorPositioning");
+  const {
+    // Public parameters
+    anchor,
+    positionMethod = "absolute",
+    side: sideParam = "bottom",
+    sideOffset = 0,
+    align = "center",
+    alignOffset = 0,
+    collisionBoundary,
+    collisionPadding: collisionPaddingParam = 5,
+    sticky = false,
+    arrowPadding = 5,
+    disableAnchorTracking = false,
+    inline: inlineMiddleware,
+    // Private parameters
+    keepMounted = false,
+    floatingRootContext,
+    mounted,
+    collisionAvoidance,
+    shiftCrossAxis = false,
+    nodeId,
+    adaptiveOrigin,
+    lazyFlip = false,
+    externalTree
+  } = params;
+  const [mountSide, setMountSide] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "mountSide"));
+  if (!mounted && mountSide !== null) {
+    setMountSide(null);
+  }
+  const collisionAvoidanceSide = collisionAvoidance.side || "flip";
+  const collisionAvoidanceAlign = collisionAvoidance.align || "flip";
+  const collisionAvoidanceFallbackAxisSide = collisionAvoidance.fallbackAxisSide || "end";
+  const anchorFn = typeof anchor === "function" ? anchor : void 0;
+  const anchorFnCallback = (0, import_useStableCallback.useStableCallback)(anchorFn, (0, import_internal.subSlot)(slot, "anchorFn"));
+  const anchorDep = anchorFn ? anchorFnCallback : anchor;
+  const anchorValueRef = (0, import_useValueAsRef.useValueAsRef)(anchor, (0, import_internal.subSlot)(slot, "anchorRef"));
+  const mountedRef = (0, import_useValueAsRef.useValueAsRef)(mounted, (0, import_internal.subSlot)(slot, "mountedRef"));
+  const direction = (0, import_DirectionContext.useDirection)();
+  const isRtl = direction === "rtl";
+  const side = mountSide || {
+    top: "top",
+    right: "right",
+    bottom: "bottom",
+    left: "left",
+    "inline-end": isRtl ? "left" : "right",
+    "inline-start": isRtl ? "right" : "left"
+  }[sideParam];
+  const placement = align === "center" ? side : `${side}-${align}`;
+  let collisionPadding = collisionPaddingParam;
+  const bias = 1;
+  const biasTop = sideParam === "bottom" ? bias : 0;
+  const biasBottom = sideParam === "top" ? bias : 0;
+  const biasLeft = sideParam === "right" ? bias : 0;
+  const biasRight = sideParam === "left" ? bias : 0;
+  if (typeof collisionPadding === "number") {
+    collisionPadding = {
+      top: collisionPadding + biasTop,
+      right: collisionPadding + biasRight,
+      bottom: collisionPadding + biasBottom,
+      left: collisionPadding + biasLeft
+    };
+  } else if (collisionPadding) {
+    collisionPadding = {
+      top: (collisionPadding.top || 0) + biasTop,
+      right: (collisionPadding.right || 0) + biasRight,
+      bottom: (collisionPadding.bottom || 0) + biasBottom,
+      left: (collisionPadding.left || 0) + biasLeft
+    };
+  }
+  const commonCollisionProps = {
+    boundary: collisionBoundary === "clipping-ancestors" ? "clippingAncestors" : collisionBoundary,
+    padding: collisionPadding
+  };
+  const arrowRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "arrowRef"));
+  const sideOffsetRef = (0, import_useValueAsRef.useValueAsRef)(sideOffset, (0, import_internal.subSlot)(slot, "sideOffsetRef"));
+  const alignOffsetRef = (0, import_useValueAsRef.useValueAsRef)(alignOffset, (0, import_internal.subSlot)(slot, "alignOffsetRef"));
+  const sideOffsetDep = typeof sideOffset !== "function" ? sideOffset : 0;
+  const alignOffsetDep = typeof alignOffset !== "function" ? alignOffset : 0;
+  const middleware = [];
+  if (inlineMiddleware) {
+    middleware.push(inlineMiddleware);
+  }
+  void sideOffsetDep;
+  void alignOffsetDep;
+  middleware.push(
+    (0, import_floating_ui.offset)((state) => {
+      const data = getOffsetData(state, sideParam, isRtl);
+      const sideAxis = typeof sideOffsetRef.current === "function" ? sideOffsetRef.current(data) : sideOffsetRef.current;
+      const alignAxis = typeof alignOffsetRef.current === "function" ? alignOffsetRef.current(data) : alignOffsetRef.current;
+      return {
+        mainAxis: sideAxis,
+        crossAxis: alignAxis,
+        alignmentAxis: alignAxis
+      };
+    })
+  );
+  const shiftDisabled = collisionAvoidanceAlign === "none" && collisionAvoidanceSide !== "shift";
+  const crossAxisShiftEnabled = !shiftDisabled && (sticky || shiftCrossAxis || collisionAvoidanceSide === "shift");
+  const flipMiddleware = collisionAvoidanceSide === "none" ? null : (0, import_floating_ui.flip)({
+    ...commonCollisionProps,
+    padding: {
+      top: collisionPadding.top + bias,
+      right: collisionPadding.right + bias,
+      bottom: collisionPadding.bottom + bias,
+      left: collisionPadding.left + bias
+    },
+    mainAxis: !shiftCrossAxis && collisionAvoidanceSide === "flip",
+    crossAxis: collisionAvoidanceAlign === "flip" ? "alignment" : false,
+    fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
+  });
+  const shiftMiddleware = shiftDisabled ? null : (0, import_floating_ui.shift)((data) => {
+    const html = (0, import_owner.ownerDocument)(data.elements.floating).documentElement;
+    return {
+      ...commonCollisionProps,
+      rootBoundary: shiftCrossAxis ? { x: 0, y: 0, width: html.clientWidth, height: html.clientHeight } : void 0,
+      mainAxis: collisionAvoidanceAlign !== "none",
+      crossAxis: crossAxisShiftEnabled,
+      limiter: sticky || shiftCrossAxis ? void 0 : (0, import_floating_ui.limitShift)((limitData) => {
+        if (!arrowRef.current) {
+          return {};
+        }
+        const { width, height } = arrowRef.current.getBoundingClientRect();
+        const sideAxis = (0, import_utils.getSideAxis)((0, import_utils.getSide)(limitData.placement));
+        const arrowSize = sideAxis === "y" ? width : height;
+        const offsetAmount = sideAxis === "y" ? collisionPadding.left + collisionPadding.right : collisionPadding.top + collisionPadding.bottom;
+        return {
+          offset: arrowSize / 2 + offsetAmount / 2
+        };
+      })
+    };
+  });
+  if (collisionAvoidanceSide === "shift" || collisionAvoidanceAlign === "shift" || align === "center") {
+    middleware.push(shiftMiddleware, flipMiddleware);
+  } else {
+    middleware.push(flipMiddleware, shiftMiddleware);
+  }
+  middleware.push(
+    (0, import_floating_ui.size)({
+      ...commonCollisionProps,
+      apply({ elements: { floating }, availableWidth, availableHeight, rects }) {
+        if (!mountedRef.current) {
+          return;
+        }
+        const floatingStyle = floating.style;
+        floatingStyle.setProperty("--available-width", `${availableWidth}px`);
+        floatingStyle.setProperty("--available-height", `${availableHeight}px`);
+        const dpr = (0, import_owner.ownerWindow)(floating).devicePixelRatio || 1;
+        const { x: x2, y: y2, width, height } = rects.reference;
+        const anchorWidth = (Math.round((x2 + width) * dpr) - Math.round(x2 * dpr)) / dpr;
+        const anchorHeight = (Math.round((y2 + height) * dpr) - Math.round(y2 * dpr)) / dpr;
+        floatingStyle.setProperty("--anchor-width", `${anchorWidth}px`);
+        floatingStyle.setProperty("--anchor-height", `${anchorHeight}px`);
+      }
+    }),
+    (0, import_floating_ui.arrow)((state) => ({
+      element: arrowRef.current || (0, import_owner.ownerDocument)(state.elements.floating).createElement("div"),
+      padding: arrowPadding,
+      offsetParent: "floating"
+    })),
+    {
+      name: "transformOrigin",
+      fn(state) {
+        const { elements: elements2, middlewareData: middlewareData2, placement: renderedPlacement2, rects, y: y2 } = state;
+        const currentRenderedSide = (0, import_utils.getSide)(renderedPlacement2);
+        const currentRenderedAxis = (0, import_utils.getSideAxis)(currentRenderedSide);
+        const arrowEl = arrowRef.current;
+        const arrowX = middlewareData2.arrow?.x || 0;
+        const arrowY = middlewareData2.arrow?.y || 0;
+        const arrowWidth = arrowEl?.clientWidth || 0;
+        const arrowHeight = arrowEl?.clientHeight || 0;
+        const transformX = arrowX + arrowWidth / 2;
+        const transformY = arrowY + arrowHeight / 2;
+        const shiftY = Math.abs(middlewareData2.shift?.y || 0);
+        const halfAnchorHeight = rects.reference.height / 2;
+        const sideOffsetValue = typeof sideOffset === "function" ? sideOffset(getOffsetData(state, sideParam, isRtl)) : sideOffset;
+        const isOverlappingAnchor = shiftY > sideOffsetValue;
+        const adjacentTransformOrigin = {
+          top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
+          bottom: `${transformX}px ${-sideOffsetValue}px`,
+          left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
+          right: `${-sideOffsetValue}px ${transformY}px`
+        }[currentRenderedSide];
+        const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y2}px`;
+        elements2.floating.style.setProperty(
+          "--transform-origin",
+          crossAxisShiftEnabled && currentRenderedAxis === "y" && isOverlappingAnchor ? overlapTransformOrigin : adjacentTransformOrigin
+        );
+        return {};
+      }
+    },
+    import_hideMiddleware.hide,
+    adaptiveOrigin
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!mounted && floatingRootContext) {
+        floatingRootContext.update({
+          referenceElement: null,
+          floatingElement: null,
+          domReferenceElement: null,
+          positionReference: null
+        });
+      }
+    },
+    [mounted, floatingRootContext],
+    (0, import_internal.subSlot)(slot, "e:reset")
+  );
+  const autoUpdateOptions = (0, import_octane.useMemo)(
+    () => ({
+      elementResize: !disableAnchorTracking && typeof ResizeObserver !== "undefined",
+      layoutShift: !disableAnchorTracking && typeof IntersectionObserver !== "undefined"
+    }),
+    [disableAnchorTracking],
+    (0, import_internal.subSlot)(slot, "m:auto")
+  );
+  const {
+    refs,
+    elements,
+    x,
+    y,
+    middlewareData,
+    update,
+    placement: renderedPlacement,
+    context,
+    isPositioned,
+    floatingStyles: originalFloatingStyles
+  } = (0, import_useFloating.useFloating)(
+    {
+      rootContext: floatingRootContext,
+      open: keepMounted ? mounted : void 0,
+      placement,
+      middleware,
+      strategy: positionMethod,
+      whileElementsMounted: keepMounted ? void 0 : (...args) => (0, import_floating_ui.autoUpdate)(...args, autoUpdateOptions),
+      nodeId,
+      externalTree
+    },
+    (0, import_internal.subSlot)(slot, "floating")
+  );
+  const { sideX, sideY } = middlewareData.adaptiveOrigin || import_adaptiveOriginMiddleware.DEFAULT_SIDES;
+  const resolvedPosition = isPositioned ? positionMethod : "fixed";
+  const floatingStyles = (0, import_octane.useMemo)(
+    () => {
+      const base = adaptiveOrigin ? { position: resolvedPosition, [sideX]: x, [sideY]: y } : { position: resolvedPosition, ...originalFloatingStyles };
+      if (!isPositioned) {
+        base.opacity = 0;
+      }
+      return base;
+    },
+    [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned],
+    (0, import_internal.subSlot)(slot, "m:fs")
+  );
+  const registeredPositionReferenceRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "regPosRef"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!mounted) {
+        return;
+      }
+      const anchorValue = anchorValueRef.current;
+      const resolvedAnchor = typeof anchorValue === "function" ? anchorValue() : anchorValue;
+      const unwrappedElement = (isRef(resolvedAnchor) ? resolvedAnchor.current : resolvedAnchor) || null;
+      const finalAnchor = unwrappedElement || null;
+      if (finalAnchor !== registeredPositionReferenceRef.current) {
+        refs.setPositionReference(finalAnchor);
+        registeredPositionReferenceRef.current = finalAnchor;
+      }
+    },
+    [mounted, refs, anchorDep, anchorValueRef],
+    (0, import_internal.subSlot)(slot, "e:posref1")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!mounted) {
+        return;
+      }
+      const anchorValue = anchorValueRef.current;
+      if (typeof anchorValue === "function") {
+        return;
+      }
+      if (isRef(anchorValue) && anchorValue.current !== registeredPositionReferenceRef.current) {
+        refs.setPositionReference(anchorValue.current);
+        registeredPositionReferenceRef.current = anchorValue.current;
+      }
+    },
+    [mounted, refs, anchorDep, anchorValueRef],
+    (0, import_internal.subSlot)(slot, "e:posref2")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (keepMounted && mounted && elements.reference && elements.floating) {
+        return (0, import_floating_ui.autoUpdate)(
+          elements.reference,
+          elements.floating,
+          update,
+          autoUpdateOptions
+        );
+      }
+      return void 0;
+    },
+    [keepMounted, mounted, elements, update, autoUpdateOptions],
+    (0, import_internal.subSlot)(slot, "e:auto")
+  );
+  const renderedSide = (0, import_utils.getSide)(renderedPlacement);
+  const logicalRenderedSide = getLogicalSide(sideParam, renderedSide, isRtl);
+  const renderedAlign = (0, import_utils.getAlignment)(renderedPlacement) || "center";
+  const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (lazyFlip && mounted && isPositioned) {
+        setMountSide(renderedSide);
+      }
+    },
+    [lazyFlip, mounted, isPositioned, renderedSide],
+    (0, import_internal.subSlot)(slot, "e:lazyflip")
+  );
+  const arrowStyles = (0, import_octane.useMemo)(
+    () => ({
+      position: "absolute",
+      top: middlewareData.arrow?.y,
+      left: middlewareData.arrow?.x
+    }),
+    [middlewareData.arrow],
+    (0, import_internal.subSlot)(slot, "m:arrow")
+  );
+  const arrowUncentered = middlewareData.arrow?.centerOffset !== 0;
+  return (0, import_octane.useMemo)(
+    () => ({
+      positionerStyles: floatingStyles,
+      arrowStyles,
+      arrowRef,
+      arrowUncentered,
+      side: logicalRenderedSide,
+      align: renderedAlign,
+      physicalSide: renderedSide,
+      anchorHidden,
+      refs,
+      context,
+      isPositioned,
+      update
+    }),
+    [
+      floatingStyles,
+      arrowStyles,
+      arrowRef,
+      arrowUncentered,
+      logicalRenderedSide,
+      renderedAlign,
+      renderedSide,
+      anchorHidden,
+      refs,
+      context,
+      isPositioned,
+      update
+    ],
+    (0, import_internal.subSlot)(slot, "m:ret")
+  );
+}
+function isRef(param) {
+  return param != null && "current" in param;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAnchorPositioning
+});

package/dist/cjs/utils/useAnchoredPopupScrollLock.cjs

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useAnchoredPopupScrollLock_exports = {};
+__export(useAnchoredPopupScrollLock_exports, {
+  useAnchoredPopupScrollLock: () => useAnchoredPopupScrollLock
+});
+module.exports = __toCommonJS(useAnchoredPopupScrollLock_exports);
+var import_octane = require("octane");
+var import_internal = require("../internal.cjs");
+var import_owner = require("./owner.cjs");
+var import_useScrollLock = require("./useScrollLock.cjs");
+const VIEWPORT_WIDTH_TOLERANCE_PX = 20;
+function useAnchoredPopupScrollLock(enabled, touchOpen, positionerElement, referenceElement) {
+  const slot = (0, import_internal.S)("useAnchoredPopupScrollLock");
+  const [touchOpenShouldLockScroll, setTouchOpenShouldLockScroll] = (0, import_octane.useState)(
+    false,
+    (0, import_internal.subSlot)(slot, "lock")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!enabled || !touchOpen || positionerElement == null) {
+        setTouchOpenShouldLockScroll(false);
+        return;
+      }
+      const viewportWidth = (0, import_owner.ownerDocument)(positionerElement).documentElement.clientWidth;
+      const popupWidth = positionerElement.offsetWidth;
+      setTouchOpenShouldLockScroll(
+        viewportWidth > 0 && popupWidth > 0 && popupWidth >= viewportWidth - VIEWPORT_WIDTH_TOLERANCE_PX
+      );
+    },
+    [enabled, touchOpen, positionerElement],
+    (0, import_internal.subSlot)(slot, "eff")
+  );
+  (0, import_useScrollLock.useScrollLock)(
+    enabled && (!touchOpen || touchOpenShouldLockScroll),
+    referenceElement,
+    (0, import_internal.subSlot)(slot, "scroll")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAnchoredPopupScrollLock
+});

package/dist/cjs/utils/useAnimationFrame.cjs

@@ -0,0 +1,93 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useAnimationFrame_exports = {};
+__export(useAnimationFrame_exports, {
+  AnimationFrame: () => AnimationFrame,
+  useAnimationFrame: () => useAnimationFrame
+});
+module.exports = __toCommonJS(useAnimationFrame_exports);
+var import_octane = require("octane");
+var import_internal = require("../internal.cjs");
+const AnimationFrame = {
+  request(fn) {
+    return requestAnimationFrame(fn);
+  },
+  cancel(id) {
+    if (id != null) {
+      cancelAnimationFrame(id);
+    }
+  },
+  // A per-instance frame that supersedes its own pending callback (like `useAnimationFrame`'s
+  // return, but usable outside a component — e.g. useScrollLock's resize handler).
+  create() {
+    let id = null;
+    return {
+      request(fn) {
+        if (id != null) {
+          cancelAnimationFrame(id);
+        }
+        id = requestAnimationFrame((ts) => {
+          id = null;
+          fn(ts);
+        });
+        return id;
+      },
+      cancel() {
+        if (id != null) {
+          cancelAnimationFrame(id);
+          id = null;
+        }
+      }
+    };
+  }
+};
+function useAnimationFrame(...args) {
+  const [, slotArg] = (0, import_internal.splitSlot)(["_", ...args]);
+  const slot = slotArg ?? (0, import_internal.S)("useAnimationFrame");
+  const idRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "id"));
+  const frame = (0, import_octane.useMemo)(
+    () => ({
+      request(fn) {
+        if (idRef.current != null) {
+          cancelAnimationFrame(idRef.current);
+        }
+        idRef.current = requestAnimationFrame((ts) => {
+          idRef.current = null;
+          fn(ts);
+        });
+        return idRef.current;
+      },
+      cancel() {
+        if (idRef.current != null) {
+          cancelAnimationFrame(idRef.current);
+          idRef.current = null;
+        }
+      }
+    }),
+    [],
+    (0, import_internal.subSlot)(slot, "frame")
+  );
+  (0, import_octane.useLayoutEffect)(() => () => frame.cancel(), [], (0, import_internal.subSlot)(slot, "e:clean"));
+  return frame;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimationFrame,
+  useAnimationFrame
+});

package/dist/cjs/utils/useAnimationsFinished.cjs

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useAnimationsFinished_exports = {};
+__export(useAnimationsFinished_exports, {
+  useAnimationsFinished: () => useAnimationsFinished
+});
+module.exports = __toCommonJS(useAnimationsFinished_exports);
+var import_octane = require("octane");
+var import_internal = require("../internal.cjs");
+var import_useAnimationFrame = require("./useAnimationFrame.cjs");
+var import_useStableCallback = require("./useStableCallback.cjs");
+var import_resolveRef = require("./resolveRef.cjs");
+const STARTING_STYLE_ATTRIBUTE = "data-starting-style";
+function useAnimationsFinished(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useAnimationsFinished");
+  const elementOrRef = user[0];
+  const waitForStartingStyleRemoved = user[1] ?? false;
+  const treatAbortedAsFinished = user[2] ?? true;
+  const frame = (0, import_useAnimationFrame.useAnimationFrame)((0, import_internal.subSlot)(slot, "frame"));
+  return (0, import_useStableCallback.useStableCallback)(
+    (fnToExecute, signal = null) => {
+      frame.cancel();
+      const element = (0, import_resolveRef.resolveRef)(elementOrRef);
+      if (element == null) {
+        return;
+      }
+      const resolvedElement = element;
+      const done = () => {
+        (0, import_octane.flushSync)(fnToExecute);
+      };
+      if (typeof resolvedElement.getAnimations !== "function" || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
+        fnToExecute();
+        return;
+      }
+      function exec() {
+        Promise.all(resolvedElement.getAnimations().map((animation) => animation.finished)).then(() => {
+          if (!signal?.aborted) {
+            done();
+          }
+        }).catch(() => {
+          if (treatAbortedAsFinished) {
+            if (!signal?.aborted) {
+              done();
+            }
+            return;
+          }
+          const currentAnimations = resolvedElement.getAnimations();
+          if (!signal?.aborted && currentAnimations.length > 0 && currentAnimations.some(
+            (animation) => animation.pending || animation.playState !== "finished"
+          )) {
+            exec();
+          }
+        });
+      }
+      if (waitForStartingStyleRemoved) {
+        if (!resolvedElement.hasAttribute(STARTING_STYLE_ATTRIBUTE)) {
+          frame.request(exec);
+          return;
+        }
+        const attributeObserver = new MutationObserver(() => {
+          if (!resolvedElement.hasAttribute(STARTING_STYLE_ATTRIBUTE)) {
+            attributeObserver.disconnect();
+            exec();
+          }
+        });
+        attributeObserver.observe(resolvedElement, {
+          attributes: true,
+          attributeFilter: [STARTING_STYLE_ATTRIBUTE]
+        });
+        signal?.addEventListener("abort", () => attributeObserver.disconnect(), { once: true });
+        return;
+      }
+      frame.request(exec);
+    },
+    (0, import_internal.subSlot)(slot, "cb")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAnimationsFinished
+});