@plexui/ui 0.2.0

package/dist/es/components/Transition/Animate.module.css

@@ -0,0 +1,54 @@
+@layer components {.TransitionItem {
+  will-change: var(--tg-will-change);
+
+  /* Removing natural DOM position allows multiple layers to occupy the same space without stacking */
+
+  /* Interruptions should not experience delay */
+}
+  [data-transition-position="absolute"] .TransitionItem[data-exiting],
+  
+  [data-transition-position="absolute"] .TransitionItem:not([data-exiting]) + .TransitionItem[data-entering] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .TransitionItem[data-entering] {
+    filter: var(--tg-initial-filter);
+    opacity: var(--tg-initial-opacity);
+    transform: var(--tg-initial-transform);
+  }
+
+  .TransitionItem[data-exiting] {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+  }
+
+  .TransitionItem[data-entering-active],
+  .TransitionItem[data-entering][data-interrupted] {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+    transition:
+      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
+  }
+
+  .TransitionItem[data-exiting-active],
+  .TransitionItem[data-exiting][data-interrupted] {
+    filter: var(--tg-exit-filter, none);
+    opacity: var(--tg-exit-opacity, 0);
+    transform: var(--tg-exit-transform, none);
+    transition:
+      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
+  }
+  .TransitionItem[data-entering][data-interrupted],
+  .TransitionItem[data-exiting][data-interrupted] {
+    transition-delay: 0ms;
+  }
+}

package/dist/es/components/Transition/AnimateLayout.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useRef } from "react";
+import { toCssVariables, toFilterProperty, toMsDurationProperty, toOpacityProperty, toTransformProperty, waitForAnimationFrame, } from "../../lib/helpers";
+import s from "./AnimateLayout.module.css";
+import { TransitionGroup } from "./TransitionGroup";
+import {} from "./shared";
+export const AnimateLayout = (props) => {
+    const { as: TagName = "span", children, transitionClassName, insertMethod, className, hideOverflow = false, 
+    // An initial height animation will almost never be correct. Consider carefully when overriding.
+    preventInitialTransition = true, itemAnchor = "start", dimension = "height", } = props;
+    const containerRef = useRef(null);
+    const captainRef = useRef(null);
+    const exitTimestampRef = useRef(null);
+    const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props);
+    const handleEnter = (element) => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        // If handleExit() was called >50ms ago, consider this a "move" and don't touch "interrupted" state
+        const justExited = exitTimestampRef.current && Date.now() - exitTimestampRef.current < 50;
+        const anotherCaptain = !!captainRef.current;
+        // Look at me, I'm the captain now
+        captainRef.current = element;
+        // Recent exits are a near guarantee we are "moving" states
+        container.dataset.direction = justExited || anotherCaptain ? "move" : "in";
+        // If we just exited, don't touch the interrupted state. Exit just set it with the correct state of things
+        if (!justExited) {
+            container.dataset.interrupted = String(!!container.style[dimension]);
+        }
+        const clientRect = container.getBoundingClientRect();
+        container.style[dimension] = `${clientRect[dimension]}px`;
+    };
+    const handleEnterActive = (element) => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        // ~Impossible to not be the captain at this point, but check anyway.
+        const amICaptain = captainRef.current === element;
+        if (!amICaptain) {
+            return;
+        }
+        // IMPORTANT: Use clientHeight/clientWidth to measure children, in case they have scale() applied
+        const value = dimension === "width" ? element.clientWidth : element.clientHeight;
+        container.style[dimension] = `${value}px`;
+    };
+    const handleEnterComplete = (element) => {
+        const container = containerRef.current;
+        // Wait for the next tick, to ensure React has cleared `[data-entering*]` state from the DOM
+        // Without this, it's possible that we release the height from the container
+        // before the children in the DOM are naturally positioned (non-absolute).
+        waitForAnimationFrame(() => {
+            const amICaptain = captainRef.current === element;
+            if (!container || !amICaptain) {
+                return;
+            }
+            // Restore natural height to the DOM node
+            container.style[dimension] = "";
+        });
+    };
+    const handleExit = (element) => {
+        const container = containerRef.current;
+        const amICaptain = !captainRef.current || captainRef.current === element;
+        if (!container || !amICaptain) {
+            return;
+        }
+        // o7
+        captainRef.current = null;
+        exitTimestampRef.current = Date.now();
+        container.dataset.direction = "out";
+        container.dataset.interrupted = String(!!container.style[dimension]);
+        const clientRect = container.getBoundingClientRect();
+        container.style[dimension] = `${clientRect[dimension]}px`;
+    };
+    const handleExitActive = (_element) => {
+        const container = containerRef.current;
+        const newCaptainExists = !!captainRef.current;
+        // If another component has become the captain, exit early
+        if (!container || newCaptainExists) {
+            return;
+        }
+        // Animate to zero layout
+        container.style[dimension] = "0";
+    };
+    const handleExitComplete = (_element) => {
+        // Wait for the next tick, to ensure React has cleared `[data-exiting*]` state from the DOM
+        waitForAnimationFrame(() => {
+            const container = containerRef.current;
+            const newCaptainExists = !!captainRef.current;
+            // If another component has become the captain, exit early
+            if (!container || newCaptainExists) {
+                return;
+            }
+            // Restore natural height to the DOM node
+            container.style[dimension] = "";
+        });
+    };
+    return (_jsx(TagName, { ref: containerRef, className: clsx(s.Layout, className), style: variables, "data-item-anchor": itemAnchor, "data-clip": hideOverflow, "data-dimension": dimension, children: _jsx(TransitionGroup, { as: TagName, className: clsx(s.TransitionItem, transitionClassName), insertMethod: insertMethod, enterDuration: enterTotalDuration, exitDuration: exitTotalDuration, preventInitialTransition: preventInitialTransition, onEnter: handleEnter, onEnterActive: handleEnterActive, onEnterComplete: handleEnterComplete, onExit: handleExit, onExitActive: handleExitActive, onExitComplete: handleExitComplete, children: children }) }));
+};
+// Keep in sync with default values in AnimateLayout.module.css
+const DEFAULT_LAYOUT_ENTER_DURATION_MS = 300;
+const DEFAULT_LAYOUT_ENTER_DELAY_MS = 0;
+const DEFAULT_LAYOUT_EXIT_DURATION_MS = 300;
+const DEFAULT_LAYOUT_EXIT_DELAY_MS = 0;
+const DEFAULT_LAYOUT_MOVE_DURATION_MS = 300;
+const DEFAULT_LAYOUT_MOVE_DELAY_MS = 0;
+const DEFAULT_ENTER_DURATION_MS_EASE = 300;
+const DEFAULT_ENTER_DURATION_MS_CUBIC = 300;
+const DEFAULT_ENTER_DELAY_MS = 100;
+const DEFAULT_EXIT_DURATION_MS_EASE = 200;
+const DEFAULT_EXIT_DURATION_MS_CUBIC = 200;
+const DEFAULT_EXIT_DELAY_MS = 0;
+function getAnimationProperties({ initial, enter, exit, forceCompositeLayer, layoutEnter, layoutExit, layoutMove, }) {
+    // Dynamically inspect if we're transitioning transform properties, and apply cubic curves and timings as defaults
+    const initialTransform = toTransformProperty(initial);
+    const enterTransform = toTransformProperty(enter);
+    const exitTransform = toTransformProperty(exit);
+    const isCubicTransition = [initialTransform, exitTransform, enterTransform].some((t) => t !== "none");
+    const enterDuration = enter?.duration ??
+        (isCubicTransition ? DEFAULT_ENTER_DURATION_MS_CUBIC : DEFAULT_ENTER_DURATION_MS_EASE);
+    const enterTimingFunction = enter?.timingFunction ?? (isCubicTransition ? "var(--cubic-enter)" : "ease");
+    const exitDuration = exit?.duration ??
+        (isCubicTransition ? DEFAULT_EXIT_DURATION_MS_CUBIC : DEFAULT_EXIT_DURATION_MS_EASE);
+    const exitTimingFunction = exit?.timingFunction ?? (isCubicTransition ? "var(--cubic-exit)" : "ease");
+    // Generate variable overrides from props
+    const variables = toCssVariables({
+        "tg-will-change": forceCompositeLayer ? "transform, opacity" : "auto",
+        "tg-enter-opacity": toOpacityProperty(enter?.opacity ?? 1),
+        "tg-enter-transform": enterTransform,
+        "tg-enter-filter": toFilterProperty(enter),
+        "tg-enter-duration": toMsDurationProperty(enterDuration),
+        "tg-enter-delay": toMsDurationProperty(enter?.delay ?? DEFAULT_ENTER_DELAY_MS),
+        "tg-enter-timing-function": enterTimingFunction,
+        "tg-exit-opacity": toOpacityProperty(exit?.opacity ?? 0),
+        "tg-exit-transform": exitTransform,
+        "tg-exit-filter": toFilterProperty(exit ?? {}),
+        "tg-exit-duration": toMsDurationProperty(exitDuration),
+        "tg-exit-delay": toMsDurationProperty(exit?.delay ?? DEFAULT_EXIT_DELAY_MS),
+        "tg-exit-timing-function": exitTimingFunction,
+        "tg-initial-opacity": toOpacityProperty(initial?.opacity ?? exit?.opacity ?? 0),
+        "tg-initial-transform": initialTransform === "none" ? exitTransform : initialTransform,
+        "tg-initial-filter": toFilterProperty(initial ?? exit ?? {}),
+        "tg-layout-enter-duration": toMsDurationProperty(layoutEnter?.duration ?? DEFAULT_LAYOUT_ENTER_DURATION_MS),
+        "tg-layout-enter-delay": toMsDurationProperty(layoutEnter?.delay ?? DEFAULT_LAYOUT_ENTER_DELAY_MS),
+        "tg-layout-enter-timing-function": layoutEnter?.timingFunction ?? "var(--cubic-move)",
+        "tg-layout-exit-duration": toMsDurationProperty(layoutExit?.duration ?? DEFAULT_LAYOUT_EXIT_DURATION_MS),
+        "tg-layout-exit-delay": toMsDurationProperty(layoutExit?.delay ?? DEFAULT_LAYOUT_EXIT_DELAY_MS),
+        "tg-layout-exit-timing-function": layoutExit?.timingFunction ?? "var(--cubic-move)",
+        "tg-layout-move-duration": toMsDurationProperty(layoutMove?.duration ?? DEFAULT_LAYOUT_MOVE_DURATION_MS),
+        "tg-layout-move-delay": toMsDurationProperty(layoutMove?.delay ?? DEFAULT_LAYOUT_MOVE_DELAY_MS),
+        "tg-layout-move-timing-function": layoutMove?.timingFunction ?? "var(--cubic-move)",
+    });
+    const enterTotalDuration = (enter?.delay ?? DEFAULT_ENTER_DELAY_MS) + (enterDuration ?? DEFAULT_ENTER_DURATION_MS_EASE);
+    const exitTotalDuration = (exit?.delay ?? DEFAULT_EXIT_DELAY_MS) + (exitDuration ?? DEFAULT_EXIT_DURATION_MS_EASE);
+    const layoutEnterTotalDuration = (layoutEnter?.delay ?? DEFAULT_LAYOUT_ENTER_DELAY_MS) +
+        (layoutEnter?.duration ?? DEFAULT_LAYOUT_ENTER_DURATION_MS);
+    const layoutExitTotalDuration = (layoutExit?.delay ?? DEFAULT_LAYOUT_EXIT_DELAY_MS) +
+        (layoutExit?.duration ?? DEFAULT_LAYOUT_EXIT_DURATION_MS);
+    const layoutMoveTotalDuration = (layoutMove?.delay ?? DEFAULT_LAYOUT_MOVE_DELAY_MS) +
+        (layoutMove?.duration ?? DEFAULT_LAYOUT_MOVE_DURATION_MS);
+    return {
+        // In order for us to release layout dimensions (e.g., height) to the natural DOM state,
+        // we must ensure the behaviors from the TransitionGroup callbacks are synced with the outer layout `transitions`.
+        // Setting TransitionGroup timing to the max of these durations is the simplest approach.
+        // In practice, these should only vary by about 50-200ms at most; imperceivable to end-users.
+        enterTotalDuration: Math.max(enterTotalDuration, layoutEnterTotalDuration, layoutMoveTotalDuration),
+        exitTotalDuration: Math.max(exitTotalDuration, layoutExitTotalDuration, layoutMoveTotalDuration),
+        variables,
+    };
+}
+//# sourceMappingURL=AnimateLayout.js.map

package/dist/es/components/Transition/AnimateLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateLayout.js","sourceRoot":"","sources":["../../../../src/components/Transition/AnimateLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { useRef, type CSSProperties } from \"react\"\nimport {\n  toCssVariables,\n  toFilterProperty,\n  toMsDurationProperty,\n  toOpacityProperty,\n  toTransformProperty,\n  waitForAnimationFrame,\n} from \"../../lib/helpers\"\nimport s from \"./AnimateLayout.module.css\"\nimport { TransitionGroup, type TransitionGroupProps } from \"./TransitionGroup\"\nimport {\n  type InitialTransitionDefinition,\n  type LayoutTransitionDefinition,\n  type TransitionDefinition,\n} from \"./shared\"\n\nexport type AnimateLayoutProps = Pick<\n  TransitionGroupProps,\n  \"as\" | \"children\" | \"className\" | \"insertMethod\" | \"preventInitialTransition\"\n> & {\n  /**\n   * Determines if `overflow: hidden` is applied to the wrapper element\n   * @default false\n   */\n  hideOverflow?: boolean\n  /**\n   * Determines which side of the container the items will pin to during enter/exit\n   * @default \"start\"\n   */\n  itemAnchor?: \"start\" | \"end\"\n  /**\n   * Determines which property will be animated during transitions\n   * @default \"height\"\n   */\n  dimension?: \"width\" | \"height\"\n  layoutEnter?: LayoutTransitionDefinition\n  layoutExit?: LayoutTransitionDefinition\n  layoutMove?: LayoutTransitionDefinition\n\n  enter?: TransitionDefinition\n  exit?: TransitionDefinition\n  initial?: InitialTransitionDefinition\n  /** Class applied to the inner TransitionGroup */\n  transitionClassName?: string\n  /**\n   * Applies `will-change` to force animating elements to composite layers. Use with caution!\n   * @default false\n   */\n  forceCompositeLayer?: boolean\n}\n\nexport const AnimateLayout = (props: AnimateLayoutProps) => {\n  const {\n    as: TagName = \"span\",\n    children,\n    transitionClassName,\n    insertMethod,\n    className,\n    hideOverflow = false,\n    // An initial height animation will almost never be correct. Consider carefully when overriding.\n    preventInitialTransition = true,\n    itemAnchor = \"start\",\n    dimension = \"height\",\n  } = props\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const captainRef = useRef<HTMLDivElement | null>(null)\n  const exitTimestampRef = useRef<number | null>(null)\n\n  const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props)\n\n  const handleEnter = (element: HTMLDivElement) => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    // If handleExit() was called >50ms ago, consider this a \"move\" and don't touch \"interrupted\" state\n    const justExited = exitTimestampRef.current && Date.now() - exitTimestampRef.current < 50\n\n    const anotherCaptain = !!captainRef.current\n    // Look at me, I'm the captain now\n    captainRef.current = element\n\n    // Recent exits are a near guarantee we are \"moving\" states\n    container.dataset.direction = justExited || anotherCaptain ? \"move\" : \"in\"\n\n    // If we just exited, don't touch the interrupted state. Exit just set it with the correct state of things\n    if (!justExited) {\n      container.dataset.interrupted = String(!!container.style[dimension])\n    }\n\n    const clientRect = container.getBoundingClientRect()\n    container.style[dimension] = `${clientRect[dimension]}px`\n  }\n\n  const handleEnterActive = (element: HTMLDivElement) => {\n    const container = containerRef.current\n\n    if (!container) {\n      return\n    }\n\n    // ~Impossible to not be the captain at this point, but check anyway.\n    const amICaptain = captainRef.current === element\n    if (!amICaptain) {\n      return\n    }\n\n    // IMPORTANT: Use clientHeight/clientWidth to measure children, in case they have scale() applied\n    const value = dimension === \"width\" ? element.clientWidth : element.clientHeight\n    container.style[dimension] = `${value}px`\n  }\n\n  const handleEnterComplete = (element: HTMLDivElement) => {\n    const container = containerRef.current\n\n    // Wait for the next tick, to ensure React has cleared `[data-entering*]` state from the DOM\n    // Without this, it's possible that we release the height from the container\n    // before the children in the DOM are naturally positioned (non-absolute).\n    waitForAnimationFrame(() => {\n      const amICaptain = captainRef.current === element\n      if (!container || !amICaptain) {\n        return\n      }\n\n      // Restore natural height to the DOM node\n      container.style[dimension] = \"\"\n    })\n  }\n\n  const handleExit = (element: HTMLDivElement) => {\n    const container = containerRef.current\n    const amICaptain = !captainRef.current || captainRef.current === element\n\n    if (!container || !amICaptain) {\n      return\n    }\n\n    // o7\n    captainRef.current = null\n    exitTimestampRef.current = Date.now()\n\n    container.dataset.direction = \"out\"\n    container.dataset.interrupted = String(!!container.style[dimension])\n\n    const clientRect = container.getBoundingClientRect()\n    container.style[dimension] = `${clientRect[dimension]}px`\n  }\n\n  const handleExitActive = (_element: HTMLDivElement) => {\n    const container = containerRef.current\n    const newCaptainExists = !!captainRef.current\n\n    // If another component has become the captain, exit early\n    if (!container || newCaptainExists) {\n      return\n    }\n\n    // Animate to zero layout\n    container.style[dimension] = \"0\"\n  }\n\n  const handleExitComplete = (_element: HTMLDivElement) => {\n    // Wait for the next tick, to ensure React has cleared `[data-exiting*]` state from the DOM\n    waitForAnimationFrame(() => {\n      const container = containerRef.current\n      const newCaptainExists = !!captainRef.current\n\n      // If another component has become the captain, exit early\n      if (!container || newCaptainExists) {\n        return\n      }\n\n      // Restore natural height to the DOM node\n      container.style[dimension] = \"\"\n    })\n  }\n\n  return (\n    <TagName\n      ref={containerRef}\n      className={clsx(s.Layout, className)}\n      style={variables}\n      data-item-anchor={itemAnchor}\n      data-clip={hideOverflow}\n      data-dimension={dimension}\n    >\n      <TransitionGroup\n        as={TagName}\n        className={clsx(s.TransitionItem, transitionClassName)}\n        insertMethod={insertMethod}\n        enterDuration={enterTotalDuration}\n        exitDuration={exitTotalDuration}\n        preventInitialTransition={preventInitialTransition}\n        onEnter={handleEnter}\n        onEnterActive={handleEnterActive}\n        onEnterComplete={handleEnterComplete}\n        onExit={handleExit}\n        onExitActive={handleExitActive}\n        onExitComplete={handleExitComplete}\n      >\n        {children}\n      </TransitionGroup>\n    </TagName>\n  )\n}\n\n// Keep in sync with default values in AnimateLayout.module.css\nconst DEFAULT_LAYOUT_ENTER_DURATION_MS = 300\nconst DEFAULT_LAYOUT_ENTER_DELAY_MS = 0\nconst DEFAULT_LAYOUT_EXIT_DURATION_MS = 300\nconst DEFAULT_LAYOUT_EXIT_DELAY_MS = 0\nconst DEFAULT_LAYOUT_MOVE_DURATION_MS = 300\nconst DEFAULT_LAYOUT_MOVE_DELAY_MS = 0\nconst DEFAULT_ENTER_DURATION_MS_EASE = 300\nconst DEFAULT_ENTER_DURATION_MS_CUBIC = 300\nconst DEFAULT_ENTER_DELAY_MS = 100\nconst DEFAULT_EXIT_DURATION_MS_EASE = 200\nconst DEFAULT_EXIT_DURATION_MS_CUBIC = 200\nconst DEFAULT_EXIT_DELAY_MS = 0\n\nfunction getAnimationProperties({\n  initial,\n  enter,\n  exit,\n  forceCompositeLayer,\n  layoutEnter,\n  layoutExit,\n  layoutMove,\n}: AnimateLayoutProps): {\n  enterTotalDuration: number\n  exitTotalDuration: number\n  variables: CSSProperties\n} {\n  // Dynamically inspect if we're transitioning transform properties, and apply cubic curves and timings as defaults\n  const initialTransform = toTransformProperty(initial)\n  const enterTransform = toTransformProperty(enter)\n  const exitTransform = toTransformProperty(exit)\n  const isCubicTransition = [initialTransform, exitTransform, enterTransform].some(\n    (t) => t !== \"none\",\n  )\n  const enterDuration =\n    enter?.duration ??\n    (isCubicTransition ? DEFAULT_ENTER_DURATION_MS_CUBIC : DEFAULT_ENTER_DURATION_MS_EASE)\n  const enterTimingFunction =\n    enter?.timingFunction ?? (isCubicTransition ? \"var(--cubic-enter)\" : \"ease\")\n  const exitDuration =\n    exit?.duration ??\n    (isCubicTransition ? DEFAULT_EXIT_DURATION_MS_CUBIC : DEFAULT_EXIT_DURATION_MS_EASE)\n  const exitTimingFunction =\n    exit?.timingFunction ?? (isCubicTransition ? \"var(--cubic-exit)\" : \"ease\")\n\n  // Generate variable overrides from props\n  const variables = toCssVariables({\n    \"tg-will-change\": forceCompositeLayer ? \"transform, opacity\" : \"auto\",\n    \"tg-enter-opacity\": toOpacityProperty(enter?.opacity ?? 1),\n    \"tg-enter-transform\": enterTransform,\n    \"tg-enter-filter\": toFilterProperty(enter),\n    \"tg-enter-duration\": toMsDurationProperty(enterDuration),\n    \"tg-enter-delay\": toMsDurationProperty(enter?.delay ?? DEFAULT_ENTER_DELAY_MS),\n    \"tg-enter-timing-function\": enterTimingFunction,\n    \"tg-exit-opacity\": toOpacityProperty(exit?.opacity ?? 0),\n    \"tg-exit-transform\": exitTransform,\n    \"tg-exit-filter\": toFilterProperty(exit ?? {}),\n    \"tg-exit-duration\": toMsDurationProperty(exitDuration),\n    \"tg-exit-delay\": toMsDurationProperty(exit?.delay ?? DEFAULT_EXIT_DELAY_MS),\n    \"tg-exit-timing-function\": exitTimingFunction,\n    \"tg-initial-opacity\": toOpacityProperty(initial?.opacity ?? exit?.opacity ?? 0),\n    \"tg-initial-transform\": initialTransform === \"none\" ? exitTransform : initialTransform,\n    \"tg-initial-filter\": toFilterProperty(initial ?? exit ?? {}),\n    \"tg-layout-enter-duration\": toMsDurationProperty(\n      layoutEnter?.duration ?? DEFAULT_LAYOUT_ENTER_DURATION_MS,\n    ),\n    \"tg-layout-enter-delay\": toMsDurationProperty(\n      layoutEnter?.delay ?? DEFAULT_LAYOUT_ENTER_DELAY_MS,\n    ),\n    \"tg-layout-enter-timing-function\": layoutEnter?.timingFunction ?? \"var(--cubic-move)\",\n    \"tg-layout-exit-duration\": toMsDurationProperty(\n      layoutExit?.duration ?? DEFAULT_LAYOUT_EXIT_DURATION_MS,\n    ),\n    \"tg-layout-exit-delay\": toMsDurationProperty(layoutExit?.delay ?? DEFAULT_LAYOUT_EXIT_DELAY_MS),\n    \"tg-layout-exit-timing-function\": layoutExit?.timingFunction ?? \"var(--cubic-move)\",\n    \"tg-layout-move-duration\": toMsDurationProperty(\n      layoutMove?.duration ?? DEFAULT_LAYOUT_MOVE_DURATION_MS,\n    ),\n    \"tg-layout-move-delay\": toMsDurationProperty(layoutMove?.delay ?? DEFAULT_LAYOUT_MOVE_DELAY_MS),\n    \"tg-layout-move-timing-function\": layoutMove?.timingFunction ?? \"var(--cubic-move)\",\n  } satisfies Record<string, string>)\n\n  const enterTotalDuration =\n    (enter?.delay ?? DEFAULT_ENTER_DELAY_MS) + (enterDuration ?? DEFAULT_ENTER_DURATION_MS_EASE)\n  const exitTotalDuration =\n    (exit?.delay ?? DEFAULT_EXIT_DELAY_MS) + (exitDuration ?? DEFAULT_EXIT_DURATION_MS_EASE)\n  const layoutEnterTotalDuration =\n    (layoutEnter?.delay ?? DEFAULT_LAYOUT_ENTER_DELAY_MS) +\n    (layoutEnter?.duration ?? DEFAULT_LAYOUT_ENTER_DURATION_MS)\n  const layoutExitTotalDuration =\n    (layoutExit?.delay ?? DEFAULT_LAYOUT_EXIT_DELAY_MS) +\n    (layoutExit?.duration ?? DEFAULT_LAYOUT_EXIT_DURATION_MS)\n  const layoutMoveTotalDuration =\n    (layoutMove?.delay ?? DEFAULT_LAYOUT_MOVE_DELAY_MS) +\n    (layoutMove?.duration ?? DEFAULT_LAYOUT_MOVE_DURATION_MS)\n\n  return {\n    // In order for us to release layout dimensions (e.g., height) to the natural DOM state,\n    // we must ensure the behaviors from the TransitionGroup callbacks are synced with the outer layout `transitions`.\n    // Setting TransitionGroup timing to the max of these durations is the simplest approach.\n    // In practice, these should only vary by about 50-200ms at most; imperceivable to end-users.\n    enterTotalDuration: Math.max(\n      enterTotalDuration,\n      layoutEnterTotalDuration,\n      layoutMoveTotalDuration,\n    ),\n    exitTotalDuration: Math.max(\n      exitTotalDuration,\n      layoutExitTotalDuration,\n      layoutMoveTotalDuration,\n    ),\n    variables,\n  }\n}\n"]}

package/dist/es/components/Transition/AnimateLayout.module.css

@@ -0,0 +1,101 @@
+@layer components {.Layout {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+  transition-property: height, width;
+
+  /* The container is considered to have three directional states by the latest action: */
+  /* - "in": (default) a new child entered with no other siblings present */
+}
+
+  .Layout[data-clip="true"] {
+    overflow: hidden;
+  }
+  /* - "move": a new child entered while another sibling was present */
+  .Layout[data-direction="in"] {
+    transition-delay: var(--tg-layout-enter-delay);
+    transition-duration: var(--tg-layout-enter-duration);
+    transition-timing-function: var(--tg-layout-enter-timing-function);
+  }
+  /* - "out": a child exited */
+
+  .Layout[data-direction="out"] {
+    transition-delay: var(--tg-layout-exit-delay);
+    transition-duration: var(--tg-layout-exit-duration);
+    transition-timing-function: var(--tg-layout-exit-timing-function);
+  }
+
+  /* "move" defaults to "in" values */
+  .Layout[data-direction="move"] {
+    transition-delay: var(--tg-layout-move-delay);
+    transition-duration: var(--tg-layout-move-duration);
+    transition-timing-function: var(--tg-layout-move-timing-function);
+  }
+
+  /* Interruptions should not experience delays */
+  .Layout[data-interrupted="true"] {
+    transition-delay: 0ms;
+  }.TransitionItem {
+  flex-shrink: 0;
+  will-change: var(--tg-will-change, auto);
+
+  /* Interruptions are allowed to experience delay, as opposed to <Animate> */
+  /* This is because they may involve interplay with a non-clipped container, which then creates */
+  /* unintended visual artifacts if the interruption is not delayed. */
+}
+
+  .TransitionItem[data-entering],
+  .TransitionItem[data-exiting] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+    .Layout[data-dimension="width"] > .TransitionItem[data-entering], .Layout[data-dimension="width"] > .TransitionItem[data-exiting] {
+      width: auto;
+    }
+
+    .Layout[data-item-anchor="end"] > .TransitionItem[data-entering], .Layout[data-item-anchor="end"] > .TransitionItem[data-exiting] {
+      top: initial;
+      bottom: 0;
+    }
+
+    .Layout[data-item-anchor="end"][data-dimension="width"] > .TransitionItem[data-entering], .Layout[data-item-anchor="end"][data-dimension="width"] > .TransitionItem[data-exiting] {
+      right: 0;
+      left: initial;
+    }
+
+  .TransitionItem[data-entering] {
+    filter: var(--tg-initial-filter);
+    opacity: var(--tg-initial-opacity);
+    transform: var(--tg-initial-transform);
+  }
+
+  .TransitionItem[data-exiting] {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+  }
+  .TransitionItem[data-entering-active],
+  .TransitionItem[data-entering][data-interrupted] {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+    transition:
+      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
+  }
+
+  .TransitionItem[data-exiting-active],
+  .TransitionItem[data-exiting][data-interrupted] {
+    filter: var(--tg-exit-filter);
+    opacity: var(--tg-exit-opacity);
+    transform: var(--tg-exit-transform);
+    transition:
+      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
+  }
+}

package/dist/es/components/Transition/AnimateLayoutGroup.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TransitionGroup } from "./TransitionGroup";
+import clsx from "clsx";
+import {} from "react";
+import { toCssVariables, toFilterProperty, toMsDurationProperty, toOpacityProperty, toTransformProperty, waitForAnimationFrame, } from "../../lib/helpers";
+import s from "./AnimateLayoutGroup.module.css";
+import { NonNullChildren, } from "./shared";
+export const AnimateLayoutGroup = (props) => {
+    const { as: TagName = "span", children, className, transitionClassName, dimension = "height", } = props;
+    const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props);
+    const handleEnter = (element) => {
+        // Stage zero layout
+        element.style[dimension] = "0";
+    };
+    const handleEnterActive = (element) => {
+        waitForAnimationFrame(() => {
+            // Animate to target height
+            // IMPORTANT: Use clientHeight/clientWidth to measure children, in case they have scale() applied
+            const value = dimension === "width"
+                ? element.firstElementChild?.clientWidth
+                : element.firstElementChild?.clientHeight;
+            element.style[dimension] = `${value ?? 0}px`;
+        });
+    };
+    const handleEnterComplete = (element) => {
+        waitForAnimationFrame(() => {
+            // Restore natural layout to the DOM node
+            element.style[dimension] = "";
+        });
+    };
+    const handleExit = (element) => {
+        element.style[dimension] = `${element.getBoundingClientRect()[dimension]}px`;
+    };
+    const handleExitActive = (element) => {
+        waitForAnimationFrame(() => {
+            // Animate to zero layout
+            element.style[dimension] = "0";
+        });
+    };
+    return (_jsx(TransitionGroup, { as: TagName, className: clsx(s.LayoutItem, className), style: variables, 
+        // Adding 32ms to timers because of the additional waitForAnimationFrame() calls
+        enterDuration: enterTotalDuration + 32, exitDuration: exitTotalDuration + 32, onEnter: handleEnter, onEnterActive: handleEnterActive, onEnterComplete: handleEnterComplete, onExit: handleExit, onExitActive: handleExitActive, children: NonNullChildren(children).map((child) => (
+        // Ensure any falsy child.key value is sent specifically as `undefined`.
+        // This ensures that key is not misinterpreted as a string 'null', 'false', etc.
+        _jsx(TagName, { className: clsx(s.TransitionItem, transitionClassName), "data-dimension": dimension, children: child }, child.key || undefined))) }));
+};
+// Keep in sync with default values in AnimateLayout.module.css
+const DEFAULT_LAYOUT_ENTER_DURATION_MS = 300;
+const DEFAULT_LAYOUT_ENTER_DELAY_MS = 0;
+const DEFAULT_LAYOUT_EXIT_DURATION_MS = 300;
+const DEFAULT_LAYOUT_EXIT_DELAY_MS = 50;
+const DEFAULT_LAYOUT_MOVE_DURATION_MS = 300;
+const DEFAULT_LAYOUT_MOVE_DELAY_MS = 0;
+const DEFAULT_ENTER_DURATION_MS_EASE = 400;
+const DEFAULT_ENTER_DURATION_MS_CUBIC = 400;
+const DEFAULT_ENTER_DELAY_MS = 150;
+const DEFAULT_EXIT_DURATION_MS_EASE = 200;
+const DEFAULT_EXIT_DURATION_MS_CUBIC = 300;
+const DEFAULT_EXIT_DELAY_MS = 0;
+function getAnimationProperties({ initial, enter, exit, forceCompositeLayer, layoutEnter, layoutExit, layoutMove, }) {
+    // Dynamically inspect if we're transitioning transform properties, and apply cubic curves and timings as defaults
+    const initialTransform = toTransformProperty(initial);
+    const enterTransform = toTransformProperty(enter);
+    const exitTransform = toTransformProperty(exit);
+    const isCubicTransition = [initialTransform, exitTransform, enterTransform].some((t) => t !== "none");
+    const enterDuration = enter?.duration ??
+        (isCubicTransition ? DEFAULT_ENTER_DURATION_MS_CUBIC : DEFAULT_ENTER_DURATION_MS_EASE);
+    const enterTimingFunction = enter?.timingFunction ?? (isCubicTransition ? "var(--cubic-enter)" : "ease");
+    const exitDuration = exit?.duration ??
+        (isCubicTransition ? DEFAULT_EXIT_DURATION_MS_CUBIC : DEFAULT_EXIT_DURATION_MS_EASE);
+    const exitTimingFunction = exit?.timingFunction ?? (isCubicTransition ? "var(--cubic-exit)" : "ease");
+    // Generate variable overrides from props
+    const variables = toCssVariables({
+        "tg-will-change": forceCompositeLayer ? "transform, opacity" : "auto",
+        "tg-enter-opacity": toOpacityProperty(enter?.opacity ?? 1),
+        "tg-enter-transform": enterTransform,
+        "tg-enter-filter": toFilterProperty(enter ?? {}),
+        "tg-enter-duration": toMsDurationProperty(enterDuration),
+        "tg-enter-delay": toMsDurationProperty(enter?.delay ?? DEFAULT_ENTER_DELAY_MS),
+        "tg-enter-timing-function": enterTimingFunction,
+        "tg-exit-opacity": toOpacityProperty(exit?.opacity ?? 0),
+        "tg-exit-transform": exitTransform,
+        "tg-exit-filter": toFilterProperty(exit ?? {}),
+        "tg-exit-duration": toMsDurationProperty(exitDuration),
+        "tg-exit-delay": toMsDurationProperty(exit?.delay ?? DEFAULT_EXIT_DELAY_MS),
+        "tg-exit-timing-function": exitTimingFunction,
+        "tg-initial-opacity": toOpacityProperty(initial?.opacity ?? exit?.opacity ?? 0),
+        "tg-initial-transform": initialTransform === "none" ? exitTransform : initialTransform,
+        "tg-initial-filter": toFilterProperty(initial ?? exit ?? {}),
+        "tg-layout-enter-duration": toMsDurationProperty(layoutEnter?.duration ?? DEFAULT_LAYOUT_ENTER_DURATION_MS),
+        "tg-layout-enter-delay": toMsDurationProperty(layoutEnter?.delay ?? DEFAULT_LAYOUT_ENTER_DELAY_MS),
+        "tg-layout-enter-timing-function": layoutEnter?.timingFunction ?? "var(--cubic-move)",
+        "tg-layout-exit-duration": toMsDurationProperty(layoutExit?.duration ?? DEFAULT_LAYOUT_EXIT_DURATION_MS),
+        "tg-layout-exit-delay": toMsDurationProperty(layoutExit?.delay ?? DEFAULT_LAYOUT_EXIT_DELAY_MS),
+        "tg-layout-exit-timing-function": layoutExit?.timingFunction ?? "var(--cubic-move)",
+        "tg-layout-move-duration": toMsDurationProperty(layoutMove?.duration ?? DEFAULT_LAYOUT_MOVE_DURATION_MS),
+        "tg-layout-move-delay": toMsDurationProperty(layoutMove?.delay ?? DEFAULT_LAYOUT_MOVE_DURATION_MS),
+        "tg-layout-move-timing-function": layoutMove?.timingFunction ?? "var(--cubic-move)",
+    });
+    const enterTotalDuration = (enter?.delay ?? DEFAULT_ENTER_DELAY_MS) + (enterDuration ?? DEFAULT_ENTER_DURATION_MS_EASE);
+    const exitTotalDuration = (exit?.delay ?? DEFAULT_EXIT_DELAY_MS) + (exitDuration ?? DEFAULT_EXIT_DURATION_MS_EASE);
+    const layoutEnterTotalDuration = (layoutEnter?.delay ?? DEFAULT_LAYOUT_ENTER_DELAY_MS) +
+        (layoutEnter?.duration ?? DEFAULT_LAYOUT_ENTER_DURATION_MS);
+    const layoutExitTotalDuration = (layoutExit?.delay ?? DEFAULT_LAYOUT_EXIT_DELAY_MS) +
+        (layoutExit?.duration ?? DEFAULT_LAYOUT_EXIT_DURATION_MS);
+    const layoutMoveTotalDuration = (layoutMove?.delay ?? DEFAULT_LAYOUT_MOVE_DELAY_MS) +
+        (layoutMove?.duration ?? DEFAULT_LAYOUT_MOVE_DURATION_MS);
+    return {
+        // In order for us to release layout dimensions (e.g., height) to the natural DOM state,
+        // we must ensure the behaviors from the TransitionGroup callbacks are synced with the outer layout `transitions`.
+        // Setting TransitionGroup timing to the max of these durations is the simplest approach.
+        // In practice, these should only vary by about 50-200ms at most; imperceivable to end-users.
+        enterTotalDuration: Math.max(enterTotalDuration, layoutEnterTotalDuration, layoutMoveTotalDuration),
+        exitTotalDuration: Math.max(exitTotalDuration, layoutExitTotalDuration, layoutMoveTotalDuration),
+        variables,
+    };
+}
+//# sourceMappingURL=AnimateLayoutGroup.js.map

package/dist/es/components/Transition/AnimateLayoutGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateLayoutGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/AnimateLayoutGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAA;AAE9E,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAsB,MAAM,OAAO,CAAA;AAC1C,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,CAAC,MAAM,iCAAiC,CAAA;AAC/C,OAAO,EAGL,eAAe,GAEhB,MAAM,UAAU,CAAA;AAqCjB,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IACnE,MAAM,EACJ,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,SAAS,GAAG,QAAQ,GACrB,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;IAE1F,MAAM,WAAW,GAAG,CAAC,OAAuB,EAAE,EAAE;QAC9C,oBAAoB;QACpB,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,GAAG,CAAA;IAChC,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAC,OAAuB,EAAE,EAAE;QACpD,qBAAqB,CAAC,GAAG,EAAE;YACzB,2BAA2B;YAC3B,iGAAiG;YACjG,MAAM,KAAK,GACT,SAAS,KAAK,OAAO;gBACnB,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,WAAW;gBACxC,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,YAAY,CAAA;YAE7C,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,GAAG,KAAK,IAAI,CAAC,IAAI,CAAA;QAC9C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,mBAAmB,GAAG,CAAC,OAAuB,EAAE,EAAE;QACtD,qBAAqB,CAAC,GAAG,EAAE;YACzB,yCAAyC;YACzC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAA;QAC/B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,CAAC,OAAuB,EAAE,EAAE;QAC7C,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,SAAS,CAAC,IAAI,CAAA;IAC9E,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,CAAC,OAAuB,EAAE,EAAE;QACnD,qBAAqB,CAAC,GAAG,EAAE;YACzB,yBAAyB;YACzB,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,GAAG,CAAA;QAChC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,OAAO,CACL,KAAC,eAAe,IACd,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,EACxC,KAAK,EAAE,SAAS;QAChB,gFAAgF;QAChF,aAAa,EAAE,kBAAkB,GAAG,EAAE,EACtC,YAAY,EAAE,iBAAiB,GAAG,EAAE,EACpC,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,iBAAiB,EAChC,eAAe,EAAE,mBAAmB,EACpC,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,YAE7B,eAAe,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC;QACxC,wEAAwE;QACxE,gFAAgF;QAChF,KAAC,OAAO,IACN,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,cAAc,EAAE,mBAAmB,CAAC,oBAGtC,SAAS,YAExB,KAAK,IAHD,KAAK,CAAC,GAAG,IAAI,SAAS,CAInB,CACX,CAAC,GACc,CACnB,CAAA;AACH,CAAC,CAAA;AAED,+DAA+D;AAC/D,MAAM,gCAAgC,GAAG,GAAG,CAAA;AAC5C,MAAM,6BAA6B,GAAG,CAAC,CAAA;AACvC,MAAM,+BAA+B,GAAG,GAAG,CAAA;AAC3C,MAAM,4BAA4B,GAAG,EAAE,CAAA;AACvC,MAAM,+BAA+B,GAAG,GAAG,CAAA;AAC3C,MAAM,4BAA4B,GAAG,CAAC,CAAA;AACtC,MAAM,8BAA8B,GAAG,GAAG,CAAA;AAC1C,MAAM,+BAA+B,GAAG,GAAG,CAAA;AAC3C,MAAM,sBAAsB,GAAG,GAAG,CAAA;AAClC,MAAM,6BAA6B,GAAG,GAAG,CAAA;AACzC,MAAM,8BAA8B,GAAG,GAAG,CAAA;AAC1C,MAAM,qBAAqB,GAAG,CAAC,CAAA;AAE/B,SAAS,sBAAsB,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,IAAI,EACJ,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,UAAU,GACc;IAKxB,kHAAkH;IAClH,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAA;IACrD,MAAM,cAAc,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,aAAa,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAA;IAC/C,MAAM,iBAAiB,GAAG,CAAC,gBAAgB,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC,IAAI,CAC9E,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CACpB,CAAA;IACD,MAAM,aAAa,GACjB,KAAK,EAAE,QAAQ;QACf,CAAC,iBAAiB,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAA;IACxF,MAAM,mBAAmB,GACvB,KAAK,EAAE,cAAc,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IAC9E,MAAM,YAAY,GAChB,IAAI,EAAE,QAAQ;QACd,CAAC,iBAAiB,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAA;IACtF,MAAM,kBAAkB,GACtB,IAAI,EAAE,cAAc,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IAE5E,yCAAyC;IACzC,MAAM,SAAS,GAAG,cAAc,CAAC;QAC/B,gBAAgB,EAAE,mBAAmB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM;QACrE,kBAAkB,EAAE,iBAAiB,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC;QAC1D,oBAAoB,EAAE,cAAc;QACpC,iBAAiB,EAAE,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC;QAChD,mBAAmB,EAAE,oBAAoB,CAAC,aAAa,CAAC;QACxD,gBAAgB,EAAE,oBAAoB,CAAC,KAAK,EAAE,KAAK,IAAI,sBAAsB,CAAC;QAC9E,0BAA0B,EAAE,mBAAmB;QAC/C,iBAAiB,EAAE,iBAAiB,CAAC,IAAI,EAAE,OAAO,IAAI,CAAC,CAAC;QACxD,mBAAmB,EAAE,aAAa;QAClC,gBAAgB,EAAE,gBAAgB,CAAC,IAAI,IAAI,EAAE,CAAC;QAC9C,kBAAkB,EAAE,oBAAoB,CAAC,YAAY,CAAC;QACtD,eAAe,EAAE,oBAAoB,CAAC,IAAI,EAAE,KAAK,IAAI,qBAAqB,CAAC;QAC3E,yBAAyB,EAAE,kBAAkB;QAC7C,oBAAoB,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,OAAO,IAAI,CAAC,CAAC;QAC/E,sBAAsB,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB;QACtF,mBAAmB,EAAE,gBAAgB,CAAC,OAAO,IAAI,IAAI,IAAI,EAAE,CAAC;QAC5D,0BAA0B,EAAE,oBAAoB,CAC9C,WAAW,EAAE,QAAQ,IAAI,gCAAgC,CAC1D;QACD,uBAAuB,EAAE,oBAAoB,CAC3C,WAAW,EAAE,KAAK,IAAI,6BAA6B,CACpD;QACD,iCAAiC,EAAE,WAAW,EAAE,cAAc,IAAI,mBAAmB;QACrF,yBAAyB,EAAE,oBAAoB,CAC7C,UAAU,EAAE,QAAQ,IAAI,+BAA+B,CACxD;QACD,sBAAsB,EAAE,oBAAoB,CAAC,UAAU,EAAE,KAAK,IAAI,4BAA4B,CAAC;QAC/F,gCAAgC,EAAE,UAAU,EAAE,cAAc,IAAI,mBAAmB;QACnF,yBAAyB,EAAE,oBAAoB,CAC7C,UAAU,EAAE,QAAQ,IAAI,+BAA+B,CACxD;QACD,sBAAsB,EAAE,oBAAoB,CAC1C,UAAU,EAAE,KAAK,IAAI,+BAA+B,CACrD;QACD,gCAAgC,EAAE,UAAU,EAAE,cAAc,IAAI,mBAAmB;KACnD,CAAC,CAAA;IAEnC,MAAM,kBAAkB,GACtB,CAAC,KAAK,EAAE,KAAK,IAAI,sBAAsB,CAAC,GAAG,CAAC,aAAa,IAAI,8BAA8B,CAAC,CAAA;IAC9F,MAAM,iBAAiB,GACrB,CAAC,IAAI,EAAE,KAAK,IAAI,qBAAqB,CAAC,GAAG,CAAC,YAAY,IAAI,6BAA6B,CAAC,CAAA;IAC1F,MAAM,wBAAwB,GAC5B,CAAC,WAAW,EAAE,KAAK,IAAI,6BAA6B,CAAC;QACrD,CAAC,WAAW,EAAE,QAAQ,IAAI,gCAAgC,CAAC,CAAA;IAC7D,MAAM,uBAAuB,GAC3B,CAAC,UAAU,EAAE,KAAK,IAAI,4BAA4B,CAAC;QACnD,CAAC,UAAU,EAAE,QAAQ,IAAI,+BAA+B,CAAC,CAAA;IAC3D,MAAM,uBAAuB,GAC3B,CAAC,UAAU,EAAE,KAAK,IAAI,4BAA4B,CAAC;QACnD,CAAC,UAAU,EAAE,QAAQ,IAAI,+BAA+B,CAAC,CAAA;IAE3D,OAAO;QACL,wFAAwF;QACxF,kHAAkH;QAClH,yFAAyF;QACzF,6FAA6F;QAC7F,kBAAkB,EAAE,IAAI,CAAC,GAAG,CAC1B,kBAAkB,EAClB,wBAAwB,EACxB,uBAAuB,CACxB;QACD,iBAAiB,EAAE,IAAI,CAAC,GAAG,CACzB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,CACxB;QACD,SAAS;KACV,CAAA;AACH,CAAC","sourcesContent":["\"use client\"\n\nimport { TransitionGroup, type TransitionGroupProps } from \"./TransitionGroup\"\n\nimport clsx from \"clsx\"\nimport { type CSSProperties } from \"react\"\nimport {\n  toCssVariables,\n  toFilterProperty,\n  toMsDurationProperty,\n  toOpacityProperty,\n  toTransformProperty,\n  waitForAnimationFrame,\n} from \"../../lib/helpers\"\nimport s from \"./AnimateLayoutGroup.module.css\"\nimport {\n  type InitialTransitionDefinition,\n  type LayoutTransitionDefinition,\n  NonNullChildren,\n  type TransitionDefinition,\n} from \"./shared\"\n\nexport type AnimateLayoutGroupProps = Pick<\n  TransitionGroupProps,\n  \"as\" | \"children\" | \"className\" | \"insertMethod\" | \"preventInitialTransition\"\n> & {\n  /**\n   * Determines if `overflow: hidden` is applied to the wrapper element\n   * @default false\n   */\n  hideOverflow?: boolean\n  /**\n   * Determines which side of the container the items will pin to during enter/exit\n   * @default \"start\"\n   */\n  itemAnchor?: \"start\" | \"end\"\n  /**\n   * Determines which property will be animated during transitions\n   * @default \"height\"\n   */\n  dimension?: \"width\" | \"height\"\n  layoutEnter?: LayoutTransitionDefinition\n  layoutExit?: LayoutTransitionDefinition\n  layoutMove?: LayoutTransitionDefinition\n\n  enter?: TransitionDefinition\n  exit?: TransitionDefinition\n  initial?: InitialTransitionDefinition\n  /** Class applied to the inner TransitionGroup */\n  transitionClassName?: string\n  /**\n   * Applies `will-change` to force animating elements to composite layers. Use with caution!\n   * @default false\n   */\n  forceCompositeLayer?: boolean\n}\n\nexport const AnimateLayoutGroup = (props: AnimateLayoutGroupProps) => {\n  const {\n    as: TagName = \"span\",\n    children,\n    className,\n    transitionClassName,\n    dimension = \"height\",\n  } = props\n  const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props)\n\n  const handleEnter = (element: HTMLDivElement) => {\n    // Stage zero layout\n    element.style[dimension] = \"0\"\n  }\n\n  const handleEnterActive = (element: HTMLDivElement) => {\n    waitForAnimationFrame(() => {\n      // Animate to target height\n      // IMPORTANT: Use clientHeight/clientWidth to measure children, in case they have scale() applied\n      const value =\n        dimension === \"width\"\n          ? element.firstElementChild?.clientWidth\n          : element.firstElementChild?.clientHeight\n\n      element.style[dimension] = `${value ?? 0}px`\n    })\n  }\n\n  const handleEnterComplete = (element: HTMLDivElement) => {\n    waitForAnimationFrame(() => {\n      // Restore natural layout to the DOM node\n      element.style[dimension] = \"\"\n    })\n  }\n\n  const handleExit = (element: HTMLDivElement) => {\n    element.style[dimension] = `${element.getBoundingClientRect()[dimension]}px`\n  }\n\n  const handleExitActive = (element: HTMLDivElement) => {\n    waitForAnimationFrame(() => {\n      // Animate to zero layout\n      element.style[dimension] = \"0\"\n    })\n  }\n\n  return (\n    <TransitionGroup\n      as={TagName}\n      className={clsx(s.LayoutItem, className)}\n      style={variables}\n      // Adding 32ms to timers because of the additional waitForAnimationFrame() calls\n      enterDuration={enterTotalDuration + 32}\n      exitDuration={exitTotalDuration + 32}\n      onEnter={handleEnter}\n      onEnterActive={handleEnterActive}\n      onEnterComplete={handleEnterComplete}\n      onExit={handleExit}\n      onExitActive={handleExitActive}\n    >\n      {NonNullChildren(children).map((child) => (\n        // Ensure any falsy child.key value is sent specifically as `undefined`.\n        // This ensures that key is not misinterpreted as a string 'null', 'false', etc.\n        <TagName\n          className={clsx(s.TransitionItem, transitionClassName)}\n          // @ts-expect-error Pass-through the validation of `key` to <TransitionGroup>\n          key={child.key || undefined}\n          data-dimension={dimension}\n        >\n          {child}\n        </TagName>\n      ))}\n    </TransitionGroup>\n  )\n}\n\n// Keep in sync with default values in AnimateLayout.module.css\nconst DEFAULT_LAYOUT_ENTER_DURATION_MS = 300\nconst DEFAULT_LAYOUT_ENTER_DELAY_MS = 0\nconst DEFAULT_LAYOUT_EXIT_DURATION_MS = 300\nconst DEFAULT_LAYOUT_EXIT_DELAY_MS = 50\nconst DEFAULT_LAYOUT_MOVE_DURATION_MS = 300\nconst DEFAULT_LAYOUT_MOVE_DELAY_MS = 0\nconst DEFAULT_ENTER_DURATION_MS_EASE = 400\nconst DEFAULT_ENTER_DURATION_MS_CUBIC = 400\nconst DEFAULT_ENTER_DELAY_MS = 150\nconst DEFAULT_EXIT_DURATION_MS_EASE = 200\nconst DEFAULT_EXIT_DURATION_MS_CUBIC = 300\nconst DEFAULT_EXIT_DELAY_MS = 0\n\nfunction getAnimationProperties({\n  initial,\n  enter,\n  exit,\n  forceCompositeLayer,\n  layoutEnter,\n  layoutExit,\n  layoutMove,\n}: AnimateLayoutGroupProps): {\n  enterTotalDuration: number\n  exitTotalDuration: number\n  variables: CSSProperties\n} {\n  // Dynamically inspect if we're transitioning transform properties, and apply cubic curves and timings as defaults\n  const initialTransform = toTransformProperty(initial)\n  const enterTransform = toTransformProperty(enter)\n  const exitTransform = toTransformProperty(exit)\n  const isCubicTransition = [initialTransform, exitTransform, enterTransform].some(\n    (t) => t !== \"none\",\n  )\n  const enterDuration =\n    enter?.duration ??\n    (isCubicTransition ? DEFAULT_ENTER_DURATION_MS_CUBIC : DEFAULT_ENTER_DURATION_MS_EASE)\n  const enterTimingFunction =\n    enter?.timingFunction ?? (isCubicTransition ? \"var(--cubic-enter)\" : \"ease\")\n  const exitDuration =\n    exit?.duration ??\n    (isCubicTransition ? DEFAULT_EXIT_DURATION_MS_CUBIC : DEFAULT_EXIT_DURATION_MS_EASE)\n  const exitTimingFunction =\n    exit?.timingFunction ?? (isCubicTransition ? \"var(--cubic-exit)\" : \"ease\")\n\n  // Generate variable overrides from props\n  const variables = toCssVariables({\n    \"tg-will-change\": forceCompositeLayer ? \"transform, opacity\" : \"auto\",\n    \"tg-enter-opacity\": toOpacityProperty(enter?.opacity ?? 1),\n    \"tg-enter-transform\": enterTransform,\n    \"tg-enter-filter\": toFilterProperty(enter ?? {}),\n    \"tg-enter-duration\": toMsDurationProperty(enterDuration),\n    \"tg-enter-delay\": toMsDurationProperty(enter?.delay ?? DEFAULT_ENTER_DELAY_MS),\n    \"tg-enter-timing-function\": enterTimingFunction,\n    \"tg-exit-opacity\": toOpacityProperty(exit?.opacity ?? 0),\n    \"tg-exit-transform\": exitTransform,\n    \"tg-exit-filter\": toFilterProperty(exit ?? {}),\n    \"tg-exit-duration\": toMsDurationProperty(exitDuration),\n    \"tg-exit-delay\": toMsDurationProperty(exit?.delay ?? DEFAULT_EXIT_DELAY_MS),\n    \"tg-exit-timing-function\": exitTimingFunction,\n    \"tg-initial-opacity\": toOpacityProperty(initial?.opacity ?? exit?.opacity ?? 0),\n    \"tg-initial-transform\": initialTransform === \"none\" ? exitTransform : initialTransform,\n    \"tg-initial-filter\": toFilterProperty(initial ?? exit ?? {}),\n    \"tg-layout-enter-duration\": toMsDurationProperty(\n      layoutEnter?.duration ?? DEFAULT_LAYOUT_ENTER_DURATION_MS,\n    ),\n    \"tg-layout-enter-delay\": toMsDurationProperty(\n      layoutEnter?.delay ?? DEFAULT_LAYOUT_ENTER_DELAY_MS,\n    ),\n    \"tg-layout-enter-timing-function\": layoutEnter?.timingFunction ?? \"var(--cubic-move)\",\n    \"tg-layout-exit-duration\": toMsDurationProperty(\n      layoutExit?.duration ?? DEFAULT_LAYOUT_EXIT_DURATION_MS,\n    ),\n    \"tg-layout-exit-delay\": toMsDurationProperty(layoutExit?.delay ?? DEFAULT_LAYOUT_EXIT_DELAY_MS),\n    \"tg-layout-exit-timing-function\": layoutExit?.timingFunction ?? \"var(--cubic-move)\",\n    \"tg-layout-move-duration\": toMsDurationProperty(\n      layoutMove?.duration ?? DEFAULT_LAYOUT_MOVE_DURATION_MS,\n    ),\n    \"tg-layout-move-delay\": toMsDurationProperty(\n      layoutMove?.delay ?? DEFAULT_LAYOUT_MOVE_DURATION_MS,\n    ),\n    \"tg-layout-move-timing-function\": layoutMove?.timingFunction ?? \"var(--cubic-move)\",\n  } satisfies Record<string, string>)\n\n  const enterTotalDuration =\n    (enter?.delay ?? DEFAULT_ENTER_DELAY_MS) + (enterDuration ?? DEFAULT_ENTER_DURATION_MS_EASE)\n  const exitTotalDuration =\n    (exit?.delay ?? DEFAULT_EXIT_DELAY_MS) + (exitDuration ?? DEFAULT_EXIT_DURATION_MS_EASE)\n  const layoutEnterTotalDuration =\n    (layoutEnter?.delay ?? DEFAULT_LAYOUT_ENTER_DELAY_MS) +\n    (layoutEnter?.duration ?? DEFAULT_LAYOUT_ENTER_DURATION_MS)\n  const layoutExitTotalDuration =\n    (layoutExit?.delay ?? DEFAULT_LAYOUT_EXIT_DELAY_MS) +\n    (layoutExit?.duration ?? DEFAULT_LAYOUT_EXIT_DURATION_MS)\n  const layoutMoveTotalDuration =\n    (layoutMove?.delay ?? DEFAULT_LAYOUT_MOVE_DELAY_MS) +\n    (layoutMove?.duration ?? DEFAULT_LAYOUT_MOVE_DURATION_MS)\n\n  return {\n    // In order for us to release layout dimensions (e.g., height) to the natural DOM state,\n    // we must ensure the behaviors from the TransitionGroup callbacks are synced with the outer layout `transitions`.\n    // Setting TransitionGroup timing to the max of these durations is the simplest approach.\n    // In practice, these should only vary by about 50-200ms at most; imperceivable to end-users.\n    enterTotalDuration: Math.max(\n      enterTotalDuration,\n      layoutEnterTotalDuration,\n      layoutMoveTotalDuration,\n    ),\n    exitTotalDuration: Math.max(\n      exitTotalDuration,\n      layoutExitTotalDuration,\n      layoutMoveTotalDuration,\n    ),\n    variables,\n  }\n}\n"]}

package/dist/es/components/Transition/AnimateLayoutGroup.module.css

@@ -0,0 +1,72 @@
+@layer components {.LayoutItem {
+  position: relative;
+  flex-shrink: 0;
+
+  /* Enter & Exit staging occurs in JS */
+}
+
+  .LayoutItem[data-entering-active],
+  .LayoutItem[data-entering][data-interrupted] {
+    transition:
+      height var(--tg-layout-enter-duration) var(--tg-layout-enter-timing-function)
+        var(--tg-layout-enter-delay),
+      width var(--tg-layout-enter-duration) var(--tg-layout-enter-timing-function)
+        var(--tg-layout-enter-delay);
+  }
+
+  .LayoutItem[data-exiting-active],
+  .LayoutItem[data-exiting][data-interrupted] {
+    transition:
+      height var(--tg-layout-exit-duration) var(--tg-layout-exit-timing-function)
+        var(--tg-layout-exit-delay),
+      width var(--tg-layout-exit-duration) var(--tg-layout-exit-timing-function)
+        var(--tg-layout-exit-delay);
+  }.TransitionItem {
+  display: block;
+  will-change: var(--tg-will-change);
+
+  /* Interruptions are allowed to experience delay, as opposed to <Animate> */
+  /* This is because they may involve interplay with a non-clipped container, which then creates */
+  /* unintended visual artifacts if the interruption is not delayed. */
+}
+
+  .LayoutItem[data-entering] > .TransitionItem {
+    filter: var(--tg-initial-filter);
+    opacity: var(--tg-initial-opacity);
+    transform: var(--tg-initial-transform);
+  }
+
+  .LayoutItem[data-exiting] > .TransitionItem {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+  }
+
+  /* Width cannot be measured like height can in some scenarios */
+  .LayoutItem[data-entering] > .TransitionItem[data-dimension="width"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .LayoutItem[data-entering-active] > .TransitionItem,
+  .LayoutItem[data-entering][data-interrupted] > .TransitionItem {
+    filter: var(--tg-enter-filter);
+    opacity: var(--tg-enter-opacity);
+    transform: var(--tg-enter-transform);
+    transition:
+      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
+      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
+  }
+
+  .LayoutItem[data-exiting-active] > .TransitionItem,
+  .LayoutItem[data-exiting][data-interrupted] > .TransitionItem {
+    filter: var(--tg-exit-filter);
+    opacity: var(--tg-exit-opacity, 0);
+    transform: var(--tg-exit-transform);
+    transition:
+      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
+      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
+  }
+}