@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/utils/useOnFirstRender.cjs

@@ -0,0 +1,35 @@
+"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 useOnFirstRender_exports = {};
+__export(useOnFirstRender_exports, {
+  useOnFirstRender: () => useOnFirstRender
+});
+module.exports = __toCommonJS(useOnFirstRender_exports);
+var import_octane = require("octane");
+function useOnFirstRender(fn, slot) {
+  const ref = (0, import_octane.useRef)(true, slot);
+  if (ref.current) {
+    ref.current = false;
+    fn();
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useOnFirstRender
+});

package/dist/cjs/utils/useOnMount.cjs

@@ -0,0 +1,36 @@
+"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 useOnMount_exports = {};
+__export(useOnMount_exports, {
+  useOnMount: () => useOnMount
+});
+module.exports = __toCommonJS(useOnMount_exports);
+var import_octane = require("octane");
+var import_internal = require("../internal.cjs");
+var import_empty = require("./empty.cjs");
+function useOnMount(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useOnMount");
+  const fn = user[0];
+  (0, import_octane.useEffect)(fn, import_empty.EMPTY_ARRAY, (0, import_internal.subSlot)(slot, "e"));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useOnMount
+});

package/dist/cjs/utils/useOpenChangeComplete.cjs

@@ -0,0 +1,57 @@
+"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 useOpenChangeComplete_exports = {};
+__export(useOpenChangeComplete_exports, {
+  useOpenChangeComplete: () => useOpenChangeComplete
+});
+module.exports = __toCommonJS(useOpenChangeComplete_exports);
+var import_octane = require("octane");
+var import_internal = require("../internal.cjs");
+var import_useStableCallback = require("./useStableCallback.cjs");
+var import_useAnimationsFinished = require("./useAnimationsFinished.cjs");
+function useOpenChangeComplete(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useOpenChangeComplete");
+  const {
+    enabled = true,
+    open,
+    ref,
+    onComplete: onCompleteParam
+  } = user[0];
+  const onComplete = (0, import_useStableCallback.useStableCallback)(onCompleteParam, (0, import_internal.subSlot)(slot, "oc"));
+  const runOnceAnimationsFinish = (0, import_useAnimationsFinished.useAnimationsFinished)(ref, open, false, (0, import_internal.subSlot)(slot, "raf"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (!enabled) {
+        return void 0;
+      }
+      const abortController = new AbortController();
+      runOnceAnimationsFinish(onComplete, abortController.signal);
+      return () => {
+        abortController.abort();
+      };
+    },
+    [enabled, open, onComplete, runOnceAnimationsFinish],
+    (0, import_internal.subSlot)(slot, "e:run")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useOpenChangeComplete
+});

package/dist/cjs/utils/useOpenInteractionType.cjs

@@ -0,0 +1,69 @@
+"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 useOpenInteractionType_exports = {};
+__export(useOpenInteractionType_exports, {
+  useOpenInteractionType: () => useOpenInteractionType,
+  useOpenMethodTriggerProps: () => useOpenMethodTriggerProps
+});
+module.exports = __toCommonJS(useOpenInteractionType_exports);
+var import_octane = require("octane");
+var import_internal = require("../internal.cjs");
+var import_useStableCallback = require("./useStableCallback.cjs");
+var import_useEnhancedClickHandler = require("./useEnhancedClickHandler.cjs");
+var import_useValueChanged = require("./useValueChanged.cjs");
+var import_platform = require("./platform.cjs");
+function useOpenMethodTriggerProps(open, setOpenMethod, slot) {
+  const handleTriggerClick = (0, import_useStableCallback.useStableCallback)(
+    (_, interactionType) => {
+      const isOpen = typeof open === "function" ? open() : open;
+      if (!isOpen) {
+        setOpenMethod(interactionType || (import_platform.platform.os.ios ? "touch" : ""));
+      }
+    },
+    (0, import_internal.subSlot)(slot, "h")
+  );
+  const { onClick, onPointerDown } = (0, import_useEnhancedClickHandler.useEnhancedClickHandler)(
+    handleTriggerClick,
+    (0, import_internal.subSlot)(slot, "ech")
+  );
+  return (0, import_octane.useMemo)(() => ({ onClick, onPointerDown }), [onClick, onPointerDown], (0, import_internal.subSlot)(slot, "m"));
+}
+function useOpenInteractionType(open, slot) {
+  const [openMethod, setOpenMethod] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "s"));
+  const triggerProps = useOpenMethodTriggerProps(open, setOpenMethod, (0, import_internal.subSlot)(slot, "tp"));
+  (0, import_useValueChanged.useValueChanged)(
+    open,
+    (previousOpen) => {
+      if (previousOpen && !open) {
+        setOpenMethod(null);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "vc")
+  );
+  return (0, import_octane.useMemo)(
+    () => ({ openMethod, triggerProps }),
+    [openMethod, triggerProps],
+    (0, import_internal.subSlot)(slot, "r")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useOpenInteractionType,
+  useOpenMethodTriggerProps
+});

package/dist/cjs/utils/usePopupAutoResize.cjs

@@ -0,0 +1,191 @@
+"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 usePopupAutoResize_exports = {};
+__export(usePopupAutoResize_exports, {
+  usePopupAutoResize: () => usePopupAutoResize
+});
+module.exports = __toCommonJS(usePopupAutoResize_exports);
+var import_octane = require("octane");
+var import_internal = require("../internal.cjs");
+var import_empty = require("./empty.cjs");
+var import_useAnimationFrame = require("./useAnimationFrame.cjs");
+var import_useAnimationsFinished = require("./useAnimationsFinished.cjs");
+var import_useStableCallback = require("./useStableCallback.cjs");
+var import_getCssDimensions = require("./getCssDimensions.cjs");
+function overrideElementStyle(element, property, value) {
+  const originalValue = element.style.getPropertyValue(property);
+  element.style.setProperty(property, value);
+  return () => {
+    element.style.setProperty(property, originalValue);
+  };
+}
+function applyElementStyles(element, styles) {
+  const restorers = [];
+  for (const [key, value] of Object.entries(styles)) {
+    restorers.push(overrideElementStyle(element, key, value));
+  }
+  return restorers.length ? () => {
+    restorers.forEach((restore) => restore());
+  } : import_empty.NOOP;
+}
+function setPopupCssSize(popupElement, size) {
+  const width = size === "auto" ? "auto" : `${size.width}px`;
+  const height = size === "auto" ? "auto" : `${size.height}px`;
+  popupElement.style.setProperty("--popup-width", width);
+  popupElement.style.setProperty("--popup-height", height);
+}
+function setPositionerCssSize(positionerElement, size) {
+  const width = size === "max-content" ? "max-content" : `${size.width}px`;
+  const height = size === "max-content" ? "max-content" : `${size.height}px`;
+  positionerElement.style.setProperty("--positioner-width", width);
+  positionerElement.style.setProperty("--positioner-height", height);
+}
+function usePopupAutoResize(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("usePopupAutoResize");
+  const parameters = user[0];
+  const {
+    popupElement,
+    positionerElement,
+    content,
+    mounted,
+    onMeasureLayout: onMeasureLayoutParam,
+    onMeasureLayoutComplete: onMeasureLayoutCompleteParam,
+    side,
+    direction
+  } = parameters;
+  const runOnceAnimationsFinish = (0, import_useAnimationsFinished.useAnimationsFinished)(
+    popupElement,
+    true,
+    false,
+    (0, import_internal.subSlot)(slot, "anim")
+  );
+  const animationFrame = (0, import_useAnimationFrame.useAnimationFrame)((0, import_internal.subSlot)(slot, "frame"));
+  const committedDimensionsRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "dims"));
+  const isInitialRenderRef = (0, import_octane.useRef)(true, (0, import_internal.subSlot)(slot, "init"));
+  const restoreAnchoringStylesRef = (0, import_octane.useRef)(import_empty.NOOP, (0, import_internal.subSlot)(slot, "restore"));
+  const onMeasureLayout = (0, import_useStableCallback.useStableCallback)(onMeasureLayoutParam, (0, import_internal.subSlot)(slot, "oml"));
+  const onMeasureLayoutComplete = (0, import_useStableCallback.useStableCallback)(
+    onMeasureLayoutCompleteParam,
+    (0, import_internal.subSlot)(slot, "omlc")
+  );
+  const anchoringStyles = (0, import_octane.useMemo)(
+    () => {
+      let isOriginSide = side === "top";
+      let isPhysicalLeft = side === "left";
+      if (direction === "rtl") {
+        isOriginSide = isOriginSide || side === "inline-end";
+        isPhysicalLeft = isPhysicalLeft || side === "inline-end";
+      } else {
+        isOriginSide = isOriginSide || side === "inline-start";
+        isPhysicalLeft = isPhysicalLeft || side === "inline-start";
+      }
+      return isOriginSide ? {
+        position: "absolute",
+        [side === "top" ? "bottom" : "top"]: "0",
+        [isPhysicalLeft ? "right" : "left"]: "0"
+      } : import_empty.EMPTY_OBJECT;
+    },
+    [side, direction],
+    (0, import_internal.subSlot)(slot, "anchoring")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!mounted) {
+        restoreAnchoringStylesRef.current = import_empty.NOOP;
+        isInitialRenderRef.current = true;
+        committedDimensionsRef.current = null;
+        return void 0;
+      }
+      if (!popupElement || !positionerElement) {
+        return void 0;
+      }
+      restoreAnchoringStylesRef.current = applyElementStyles(popupElement, anchoringStyles);
+      setPopupCssSize(popupElement, "auto");
+      const restorePopupPosition = overrideElementStyle(popupElement, "position", "static");
+      const restorePopupTransform = overrideElementStyle(popupElement, "transform", "none");
+      const restorePopupScale = overrideElementStyle(popupElement, "scale", "1");
+      const restorePositionerAvailableSize = applyElementStyles(positionerElement, {
+        "--available-width": "max-content",
+        "--available-height": "max-content"
+      });
+      function restoreMeasurementOverrides() {
+        restorePopupPosition();
+        restorePopupTransform();
+        restorePositionerAvailableSize();
+      }
+      function restoreMeasurementOverridesIncludingScale() {
+        restoreMeasurementOverrides();
+        restorePopupScale();
+      }
+      onMeasureLayout?.();
+      if (isInitialRenderRef.current || committedDimensionsRef.current === null) {
+        setPositionerCssSize(positionerElement, "max-content");
+        const dimensions = (0, import_getCssDimensions.getCssDimensions)(popupElement);
+        committedDimensionsRef.current = dimensions;
+        setPositionerCssSize(positionerElement, dimensions);
+        restoreMeasurementOverridesIncludingScale();
+        onMeasureLayoutComplete?.(null, dimensions);
+        isInitialRenderRef.current = false;
+        return () => {
+          restoreAnchoringStylesRef.current();
+          restoreAnchoringStylesRef.current = import_empty.NOOP;
+        };
+      }
+      setPositionerCssSize(positionerElement, "max-content");
+      const previousDimensions = committedDimensionsRef.current;
+      const newDimensions = (0, import_getCssDimensions.getCssDimensions)(popupElement);
+      committedDimensionsRef.current = newDimensions;
+      setPopupCssSize(popupElement, previousDimensions);
+      restoreMeasurementOverridesIncludingScale();
+      onMeasureLayoutComplete?.(previousDimensions, newDimensions);
+      setPositionerCssSize(positionerElement, newDimensions);
+      const abortController = new AbortController();
+      animationFrame.request(() => {
+        setPopupCssSize(popupElement, newDimensions);
+        runOnceAnimationsFinish(() => {
+          popupElement.style.setProperty("--popup-width", "auto");
+          popupElement.style.setProperty("--popup-height", "auto");
+        }, abortController.signal);
+      });
+      return () => {
+        abortController.abort();
+        animationFrame.cancel();
+        restoreAnchoringStylesRef.current();
+        restoreAnchoringStylesRef.current = import_empty.NOOP;
+      };
+    },
+    [
+      content,
+      popupElement,
+      positionerElement,
+      runOnceAnimationsFinish,
+      animationFrame,
+      mounted,
+      onMeasureLayout,
+      onMeasureLayoutComplete,
+      anchoringStyles
+    ],
+    (0, import_internal.subSlot)(slot, "l:resize")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePopupAutoResize
+});

package/dist/cjs/utils/usePopupViewport.cjs

@@ -0,0 +1,283 @@
+"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 usePopupViewport_exports = {};
+__export(usePopupViewport_exports, {
+  usePopupViewport: () => usePopupViewport
+});
+module.exports = __toCommonJS(usePopupViewport_exports);
+var import_octane = require("octane");
+var import_internal = require("../internal.cjs");
+var import_inertValue = require("./inertValue.cjs");
+var import_owner = require("./owner.cjs");
+var import_useAnimationFrame = require("./useAnimationFrame.cjs");
+var import_useAnimationsFinished = require("./useAnimationsFinished.cjs");
+var import_usePreviousValue = require("./usePreviousValue.cjs");
+var import_useStableCallback = require("./useStableCallback.cjs");
+var import_usePopupAutoResize = require("./usePopupAutoResize.cjs");
+var import_DirectionContext = require("./DirectionContext.cjs");
+function getActivationDirection(offset) {
+  if (!offset) {
+    return void 0;
+  }
+  return `${getValueWithTolerance(offset.horizontal, 5, "right", "left")} ${getValueWithTolerance(
+    offset.vertical,
+    5,
+    "down",
+    "up"
+  )}`;
+}
+function getValueWithTolerance(value, tolerance, positiveLabel, negativeLabel) {
+  if (value > tolerance) {
+    return positiveLabel;
+  }
+  if (value < -tolerance) {
+    return negativeLabel;
+  }
+  return "";
+}
+function calculateRelativePosition(from, to) {
+  const fromRect = from.getBoundingClientRect();
+  const toRect = to.getBoundingClientRect();
+  const fromCenter = {
+    x: fromRect.left + fromRect.width / 2,
+    y: fromRect.top + fromRect.height / 2
+  };
+  const toCenter = { x: toRect.left + toRect.width / 2, y: toRect.top + toRect.height / 2 };
+  return { horizontal: toCenter.x - fromCenter.x, vertical: toCenter.y - fromCenter.y };
+}
+function usePopupContentKey(activeTriggerId, payload, slot) {
+  const [contentKey, setContentKey] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "ck"));
+  const previousActiveTriggerIdRef = (0, import_octane.useRef)(activeTriggerId, (0, import_internal.subSlot)(slot, "prevId"));
+  const previousPayloadRef = (0, import_octane.useRef)(payload, (0, import_internal.subSlot)(slot, "prevPayload"));
+  const pendingPayloadUpdateRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "pending"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const previousActiveTriggerId = previousActiveTriggerIdRef.current;
+      const previousPayload = previousPayloadRef.current;
+      const triggerIdChanged = activeTriggerId !== previousActiveTriggerId;
+      const payloadChanged = payload !== previousPayload;
+      if (triggerIdChanged) {
+        setContentKey((k) => k + 1);
+        pendingPayloadUpdateRef.current = !payloadChanged;
+      } else if (pendingPayloadUpdateRef.current && payloadChanged) {
+        setContentKey((k) => k + 1);
+        pendingPayloadUpdateRef.current = false;
+      }
+      previousActiveTriggerIdRef.current = activeTriggerId;
+      previousPayloadRef.current = payload;
+    },
+    [activeTriggerId, payload],
+    (0, import_internal.subSlot)(slot, "l:key")
+  );
+  return `${activeTriggerId ?? "current"}-${contentKey}`;
+}
+function usePopupViewport(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("usePopupViewport");
+  const parameters = user[0];
+  const { store, side, cssVars, children } = parameters;
+  const direction = (0, import_DirectionContext.useDirection)();
+  const activeTrigger = store.useState("activeTriggerElement", (0, import_internal.subSlot)(slot, "s:trigger"));
+  const activeTriggerId = store.useState("activeTriggerId", (0, import_internal.subSlot)(slot, "s:triggerId"));
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "s:open"));
+  const payload = store.useState("payload", (0, import_internal.subSlot)(slot, "s:payload"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "s:mounted"));
+  const popupElement = store.useState("popupElement", (0, import_internal.subSlot)(slot, "s:popup"));
+  const positionerElement = store.useState("positionerElement", (0, import_internal.subSlot)(slot, "s:positioner"));
+  const previousActiveTrigger = (0, import_usePreviousValue.usePreviousValue)(
+    open ? activeTrigger : null,
+    (0, import_internal.subSlot)(slot, "prevTrigger")
+  );
+  const currentContentKey = usePopupContentKey(
+    activeTriggerId,
+    payload,
+    (0, import_internal.subSlot)(slot, "contentKey")
+  );
+  const capturedNodeRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "captured"));
+  const [previousContentNode, setPreviousContentNode] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "prevNode")
+  );
+  const [newTriggerOffset, setNewTriggerOffset] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "offset")
+  );
+  const currentContainerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "curRef"));
+  const previousContainerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "prevRef"));
+  const onAnimationsFinished = (0, import_useAnimationsFinished.useAnimationsFinished)(
+    currentContainerRef,
+    true,
+    false,
+    (0, import_internal.subSlot)(slot, "anim")
+  );
+  const cleanupFrame = (0, import_useAnimationFrame.useAnimationFrame)((0, import_internal.subSlot)(slot, "frame"));
+  const [previousContentDimensions, setPreviousContentDimensions] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(slot, "prevDims")
+  );
+  const [showStartingStyleAttribute, setShowStartingStyleAttribute] = (0, import_octane.useState)(
+    false,
+    (0, import_internal.subSlot)(slot, "starting")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      store.set("hasViewport", true);
+      return () => {
+        store.set("hasViewport", false);
+      };
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "l:hasViewport")
+  );
+  const handleMeasureLayout = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      currentContainerRef.current?.style.setProperty("animation", "none");
+      currentContainerRef.current?.style.setProperty("transition", "none");
+      previousContainerRef.current?.style.setProperty("display", "none");
+    },
+    (0, import_internal.subSlot)(slot, "hml")
+  );
+  const handleMeasureLayoutComplete = (0, import_useStableCallback.useStableCallback)(
+    (previousDimensions) => {
+      currentContainerRef.current?.style.removeProperty("animation");
+      currentContainerRef.current?.style.removeProperty("transition");
+      previousContainerRef.current?.style.removeProperty("display");
+      if (previousDimensions) {
+        setPreviousContentDimensions(previousDimensions);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "hmlc")
+  );
+  const lastHandledTriggerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "lastTrigger"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!open || !mounted) {
+        lastHandledTriggerRef.current = null;
+      }
+    },
+    [open, mounted],
+    (0, import_internal.subSlot)(slot, "l:resetTrigger")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
+        setPreviousContentNode(capturedNodeRef.current);
+        setShowStartingStyleAttribute(true);
+        setNewTriggerOffset(calculateRelativePosition(previousActiveTrigger, activeTrigger));
+        cleanupFrame.request(() => {
+          (0, import_octane.flushSync)(() => {
+            setShowStartingStyleAttribute(false);
+          });
+          onAnimationsFinished(() => {
+            setPreviousContentNode(null);
+            setPreviousContentDimensions(null);
+            capturedNodeRef.current = null;
+          });
+        });
+        lastHandledTriggerRef.current = activeTrigger;
+      }
+    },
+    [activeTrigger, previousActiveTrigger, previousContentNode, onAnimationsFinished, cleanupFrame],
+    (0, import_internal.subSlot)(slot, "l:transition")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const source = currentContainerRef.current;
+      if (!source) {
+        return;
+      }
+      const wrapper = (0, import_owner.ownerDocument)(source).createElement("div");
+      for (const child of Array.from(source.childNodes)) {
+        wrapper.appendChild(child.cloneNode(true));
+      }
+      capturedNodeRef.current = wrapper;
+    },
+    void 0,
+    (0, import_internal.subSlot)(slot, "l:capture")
+  );
+  const isTransitioning = previousContentNode != null;
+  let childrenToRender;
+  if (!isTransitioning) {
+    childrenToRender = (0, import_octane.createElement)("div", {
+      "data-current": true,
+      ref: currentContainerRef,
+      key: currentContentKey,
+      children
+    });
+  } else {
+    childrenToRender = (0, import_octane.createElement)(import_octane.Fragment, {
+      children: [
+        (0, import_octane.createElement)("div", {
+          "data-previous": true,
+          inert: (0, import_inertValue.inertValue)(true),
+          ref: previousContainerRef,
+          style: {
+            ...previousContentDimensions ? {
+              [cssVars.popupWidth]: `${previousContentDimensions.width}px`,
+              [cssVars.popupHeight]: `${previousContentDimensions.height}px`
+            } : null,
+            position: "absolute"
+          },
+          key: "previous",
+          "data-ending-style": showStartingStyleAttribute ? void 0 : ""
+        }),
+        (0, import_octane.createElement)("div", {
+          "data-current": true,
+          ref: currentContainerRef,
+          key: currentContentKey,
+          "data-starting-style": showStartingStyleAttribute ? "" : void 0,
+          children
+        })
+      ]
+    });
+  }
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const container = previousContainerRef.current;
+      if (!container || !previousContentNode) {
+        return;
+      }
+      container.replaceChildren(...Array.from(previousContentNode.childNodes));
+    },
+    [previousContentNode],
+    (0, import_internal.subSlot)(slot, "l:populate")
+  );
+  (0, import_usePopupAutoResize.usePopupAutoResize)(
+    {
+      popupElement,
+      positionerElement,
+      mounted,
+      content: payload,
+      onMeasureLayout: handleMeasureLayout,
+      onMeasureLayoutComplete: handleMeasureLayoutComplete,
+      side,
+      direction
+    },
+    (0, import_internal.subSlot)(slot, "resize")
+  );
+  const state = {
+    activationDirection: getActivationDirection(newTriggerOffset),
+    transitioning: isTransitioning
+  };
+  return { children: childrenToRender, state };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePopupViewport
+});