@plexui/vue 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,164 @@
+import clsx from "clsx";
+import { defineComponent, h } from "vue";
+import { toCssVariables, toFilterProperty, toMsDurationProperty, toOpacityProperty, toTransformProperty, waitForAnimationFrame, } from "../../lib/helpers.js";
+import { flattenChildren, isPlaceholder } from "./childList.js";
+import { TransitionGroup } from "./TransitionGroup.js";
+import s from "@plexui/styles/components/Transition/AnimateLayoutGroup.module.css";
+/** Port of packages/ui/src/components/Transition/AnimateLayoutGroup.tsx. */
+export const AnimateLayoutGroup = defineComponent({
+    name: "AnimateLayoutGroup",
+    inheritAttrs: false,
+    props: {
+        as: { type: String, default: "span" },
+        /** Determines how new children are added. @default "append" */
+        insertMethod: String,
+        /** When false, children run their enter transition on the initial mount. @default true */
+        preventInitialTransition: { type: Boolean, default: undefined },
+        /** Determines if `overflow: hidden` is applied to the wrapper element. @default false */
+        hideOverflow: { type: Boolean, default: false },
+        /** Determines which side of the container the items will pin to during enter/exit. @default "start" */
+        itemAnchor: { type: String, default: "start" },
+        /** Determines which property will be animated during transitions. @default "height" */
+        dimension: { type: String, default: "height" },
+        layoutEnter: Object,
+        layoutExit: Object,
+        layoutMove: Object,
+        enter: Object,
+        exit: Object,
+        initial: Object,
+        /** Class applied to each item wrapper */
+        transitionClassName: String,
+        forceCompositeLayer: Boolean,
+    },
+    setup(props, { slots, attrs }) {
+        const handleEnter = (element) => {
+            // Stage zero layout
+            element.style[props.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 = props.dimension === "width"
+                    ? element.firstElementChild?.clientWidth
+                    : element.firstElementChild?.clientHeight;
+                element.style[props.dimension] = `${value ?? 0}px`;
+            });
+        };
+        const handleEnterComplete = (element) => {
+            waitForAnimationFrame(() => {
+                // Restore natural layout to the DOM node
+                element.style[props.dimension] = "";
+            });
+        };
+        const handleExit = (element) => {
+            element.style[props.dimension] = `${element.getBoundingClientRect()[props.dimension]}px`;
+        };
+        const handleExitActive = (element) => {
+            waitForAnimationFrame(() => {
+                // Animate to zero layout
+                element.style[props.dimension] = "0";
+            });
+        };
+        return () => {
+            const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props);
+            const children = flattenChildren(slots.default?.() ?? []).filter((vnode) => !isPlaceholder(vnode));
+            return h(TransitionGroup, {
+                as: props.as,
+                class: clsx(s.LayoutItem, attrs.class),
+                // The wrapper of each item is the element that resizes
+                style: props.hideOverflow ? { ...variables, overflow: "hidden" } : 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,
+                insertMethod: props.insertMethod,
+                preventInitialTransition: props.preventInitialTransition,
+            }, {
+                default: () => children.map((child, index) => h(props.as, {
+                    // React's Children.toArray gives unkeyed children ".0", ".1"...
+                    "key": child.key ?? `.${index}`,
+                    "class": clsx(s.TransitionItem, props.transitionClassName),
+                    "data-dimension": props.dimension,
+                    "data-item-anchor": props.itemAnchor,
+                }, [child])),
+            });
+        };
+    },
+});
+// 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.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { defineComponent, h, type PropType, type VNode } from \"vue\"\nimport {\n  toCssVariables,\n  toFilterProperty,\n  toMsDurationProperty,\n  toOpacityProperty,\n  toTransformProperty,\n  waitForAnimationFrame,\n} from \"../../lib/helpers.js\"\nimport { flattenChildren, isPlaceholder } from \"./childList.js\"\nimport type {\n  InitialTransitionDefinition,\n  InsertMethod,\n  LayoutTransitionDefinition,\n  TransitionDefinition,\n  TransitionElement,\n} from \"./shared.js\"\nimport { TransitionGroup } from \"./TransitionGroup.js\"\nimport s from \"@plexui/styles/components/Transition/AnimateLayoutGroup.module.css\"\n\ntype AnimationOptions = {\n  initial?: InitialTransitionDefinition\n  enter?: TransitionDefinition\n  exit?: TransitionDefinition\n  forceCompositeLayer?: boolean\n  layoutEnter?: LayoutTransitionDefinition\n  layoutExit?: LayoutTransitionDefinition\n  layoutMove?: LayoutTransitionDefinition\n}\n\n/** Port of packages/ui/src/components/Transition/AnimateLayoutGroup.tsx. */\nexport const AnimateLayoutGroup = defineComponent({\n  name: \"AnimateLayoutGroup\",\n  inheritAttrs: false,\n  props: {\n    as: { type: String as PropType<\"div\" | \"span\">, default: \"span\" },\n    /** Determines how new children are added. @default \"append\" */\n    insertMethod: String as PropType<InsertMethod>,\n    /** When false, children run their enter transition on the initial mount. @default true */\n    preventInitialTransition: { type: Boolean, default: undefined },\n    /** Determines if `overflow: hidden` is applied to the wrapper element. @default false */\n    hideOverflow: { type: Boolean, default: false },\n    /** Determines which side of the container the items will pin to during enter/exit. @default \"start\" */\n    itemAnchor: { type: String as PropType<\"start\" | \"end\">, default: \"start\" },\n    /** Determines which property will be animated during transitions. @default \"height\" */\n    dimension: { type: String as PropType<\"width\" | \"height\">, default: \"height\" },\n    layoutEnter: Object as PropType<LayoutTransitionDefinition>,\n    layoutExit: Object as PropType<LayoutTransitionDefinition>,\n    layoutMove: Object as PropType<LayoutTransitionDefinition>,\n    enter: Object as PropType<TransitionDefinition>,\n    exit: Object as PropType<TransitionDefinition>,\n    initial: Object as PropType<InitialTransitionDefinition>,\n    /** Class applied to each item wrapper */\n    transitionClassName: String,\n    forceCompositeLayer: Boolean,\n  },\n  setup(props, { slots, attrs }) {\n    const handleEnter = (element: TransitionElement) => {\n      // Stage zero layout\n      element.style[props.dimension] = \"0\"\n    }\n\n    const handleEnterActive = (element: TransitionElement) => {\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          props.dimension === \"width\"\n            ? element.firstElementChild?.clientWidth\n            : element.firstElementChild?.clientHeight\n        element.style[props.dimension] = `${value ?? 0}px`\n      })\n    }\n\n    const handleEnterComplete = (element: TransitionElement) => {\n      waitForAnimationFrame(() => {\n        // Restore natural layout to the DOM node\n        element.style[props.dimension] = \"\"\n      })\n    }\n\n    const handleExit = (element: TransitionElement) => {\n      element.style[props.dimension] = `${element.getBoundingClientRect()[props.dimension]}px`\n    }\n\n    const handleExitActive = (element: TransitionElement) => {\n      waitForAnimationFrame(() => {\n        // Animate to zero layout\n        element.style[props.dimension] = \"0\"\n      })\n    }\n\n    return () => {\n      const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props)\n      const children: VNode[] = flattenChildren(slots.default?.() ?? []).filter((vnode) => !isPlaceholder(vnode))\n\n      return h(\n        TransitionGroup,\n        {\n          as: props.as,\n          class: clsx(s.LayoutItem, attrs.class as string | undefined),\n          // The wrapper of each item is the element that resizes\n          style: props.hideOverflow ? { ...variables, overflow: \"hidden\" } : 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          insertMethod: props.insertMethod,\n          preventInitialTransition: props.preventInitialTransition,\n        },\n        {\n          default: () =>\n            children.map((child, index) =>\n              h(\n                props.as,\n                {\n                  // React's Children.toArray gives unkeyed children \".0\", \".1\"...\n                  \"key\": child.key ?? `.${index}`,\n                  \"class\": clsx(s.TransitionItem, props.transitionClassName),\n                  \"data-dimension\": props.dimension,\n                  \"data-item-anchor\": props.itemAnchor,\n                },\n                [child],\n              ),\n            ),\n        },\n      )\n    }\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}: AnimationOptions): {\n  enterTotalDuration: number\n  exitTotalDuration: number\n  variables: Record<string, string>\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\nexport type AnimateLayoutGroupProps = InstanceType<typeof AnimateLayoutGroup>[\"$props\"]\n"]}

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

@@ -0,0 +1,111 @@
+import { cloneVNode, defineComponent, h, ref } from "vue";
+import getDisableAnimations from "./getDisableAnimations.js";
+import { flattenChildren, isPlaceholder, useChildList } from "./childList.js";
+import { useMountDelay } from "./TransitionGroup.js";
+import { useTransitionChild } from "./useTransitionChild.js";
+// Port of packages/ui/src/components/Transition/SlotTransitionGroup.tsx:
+// like TransitionGroup, but the transition attributes go on the child
+// itself instead of a wrapper element.
+const callbackProp = Function;
+// HTML or SVG elements, or a component's root element
+const toElement = (value) => {
+    if (value instanceof HTMLElement || value instanceof SVGElement)
+        return value;
+    const el = value?.$el;
+    return el instanceof HTMLElement || el instanceof SVGElement ? el : null;
+};
+const SlotTransitionGroupChildInner = defineComponent({
+    name: "SlotTransitionGroupChildInner",
+    props: {
+        component: { type: Object, required: true },
+        preventMountTransition: Boolean,
+        shouldRender: { type: Boolean, required: true },
+        enterDuration: { type: Number, required: true },
+        exitDuration: { type: Number, required: true },
+        removeChild: { type: Function, required: true },
+        callbacks: Object,
+    },
+    setup(props) {
+        const element = ref(null);
+        const state = useTransitionChild(props, () => element.value);
+        const setElement = (value) => {
+            element.value = toElement(value);
+        };
+        return () => cloneVNode(props.component, {
+            "data-entering": state.enter ? "" : undefined,
+            "data-entering-active": state.enterActive ? "" : undefined,
+            "data-exiting": state.exit ? "" : undefined,
+            "data-exiting-active": state.exitActive ? "" : undefined,
+            "data-interrupted": state.interrupted ? "" : undefined,
+            "ref": setElement,
+        }, true);
+    },
+});
+const SlotTransitionGroupChild = defineComponent({
+    name: "SlotTransitionGroupChild",
+    inheritAttrs: false,
+    props: {
+        preventMountTransition: Boolean,
+        enterMountDelay: Number,
+    },
+    setup(props, { attrs }) {
+        const mounted = useMountDelay(() => props);
+        return () => mounted.value
+            ? h(SlotTransitionGroupChildInner, { ...attrs, preventMountTransition: props.preventMountTransition })
+            : null;
+    },
+});
+export const SlotTransitionGroup = defineComponent({
+    name: "SlotTransitionGroup",
+    props: {
+        /** Determines the amount of time that the enter state is applied during mounting */
+        enterDuration: { type: Number, default: 0 },
+        /** Determines the amount of time that the exit state is applied before unmounting */
+        exitDuration: { type: Number, default: 0 },
+        /** Determines if children should have an enter transition applied during mounting of the group. */
+        preventInitialTransition: { type: Boolean, default: true },
+        /** Delay in MS to wait before mounting a child. Unset for no delay (default). */
+        enterMountDelay: Number,
+        /** Render children changes immediately, bypassing transition timings */
+        disableAnimations: { type: Boolean, default: () => getDisableAnimations() },
+        /** Determines how new children are added to the children array */
+        insertMethod: { type: String, default: "append" },
+        onEnter: callbackProp,
+        onEnterActive: callbackProp,
+        onEnterComplete: callbackProp,
+        onExit: callbackProp,
+        onExitActive: callbackProp,
+        onExitComplete: callbackProp,
+    },
+    setup(props, { slots }) {
+        const children = useChildList("SlotTransitionGroup");
+        const callbacks = {
+            onEnter: (el) => props.onEnter?.(el),
+            onEnterActive: (el) => props.onEnterActive?.(el),
+            onEnterComplete: (el) => props.onEnterComplete?.(el),
+            onExit: (el) => props.onExit?.(el),
+            onExitActive: (el) => props.onExitActive?.(el),
+            onExitComplete: (el) => props.onExitComplete?.(el),
+        };
+        return () => {
+            const slotChildren = flattenChildren(slots.default?.() ?? []);
+            const renderChildren = children.next(children.keyedChildren(slotChildren), props.insertMethod, props.preventInitialTransition);
+            // Fast path: when animations are disabled, render children as-is
+            if (props.disableAnimations) {
+                return slotChildren.filter((vnode) => !isPlaceholder(vnode));
+            }
+            return renderChildren.map((child) => h(SlotTransitionGroupChild, {
+                key: child.key,
+                preventMountTransition: child.preventMountTransition,
+                enterMountDelay: props.enterMountDelay,
+                component: child.vnode,
+                shouldRender: child.shouldRender,
+                enterDuration: props.enterDuration,
+                exitDuration: props.exitDuration,
+                removeChild: () => children.remove(child.key),
+                callbacks,
+            }));
+        };
+    },
+});
+//# sourceMappingURL=SlotTransitionGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlotTransitionGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/SlotTransitionGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import { cloneVNode, defineComponent, h, ref, type ComponentPublicInstance, type PropType, type VNode } from \"vue\"\nimport getDisableAnimations from \"./getDisableAnimations.js\"\nimport { flattenChildren, isPlaceholder, useChildList } from \"./childList.js\"\nimport type { InsertMethod, TransitionElement, TransitionGroupChildCallback, TransitionGroupChildCallbacks } from \"./shared.js\"\nimport { useMountDelay } from \"./TransitionGroup.js\"\nimport { useTransitionChild } from \"./useTransitionChild.js\"\n\n// Port of packages/ui/src/components/Transition/SlotTransitionGroup.tsx:\n// like TransitionGroup, but the transition attributes go on the child\n// itself instead of a wrapper element.\n\nconst callbackProp = Function as PropType<TransitionGroupChildCallback>\n\n// HTML or SVG elements, or a component's root element\nconst toElement = (value: unknown): TransitionElement | null => {\n  if (value instanceof HTMLElement || value instanceof SVGElement) return value\n  const el = (value as ComponentPublicInstance | null)?.$el\n  return el instanceof HTMLElement || el instanceof SVGElement ? el : null\n}\n\nconst SlotTransitionGroupChildInner = defineComponent({\n  name: \"SlotTransitionGroupChildInner\",\n  props: {\n    component: { type: Object as PropType<VNode>, required: true },\n    preventMountTransition: Boolean,\n    shouldRender: { type: Boolean, required: true },\n    enterDuration: { type: Number, required: true },\n    exitDuration: { type: Number, required: true },\n    removeChild: { type: Function as PropType<() => void>, required: true },\n    callbacks: Object as PropType<TransitionGroupChildCallbacks>,\n  },\n  setup(props) {\n    const element = ref<TransitionElement | null>(null)\n    const state = useTransitionChild(props, () => element.value)\n    const setElement = (value: unknown) => {\n      element.value = toElement(value)\n    }\n\n    return () =>\n      cloneVNode(\n        props.component,\n        {\n          \"data-entering\": state.enter ? \"\" : undefined,\n          \"data-entering-active\": state.enterActive ? \"\" : undefined,\n          \"data-exiting\": state.exit ? \"\" : undefined,\n          \"data-exiting-active\": state.exitActive ? \"\" : undefined,\n          \"data-interrupted\": state.interrupted ? \"\" : undefined,\n          \"ref\": setElement,\n        },\n        true,\n      )\n  },\n})\n\nconst SlotTransitionGroupChild = defineComponent({\n  name: \"SlotTransitionGroupChild\",\n  inheritAttrs: false,\n  props: {\n    preventMountTransition: Boolean,\n    enterMountDelay: Number,\n  },\n  setup(props, { attrs }) {\n    const mounted = useMountDelay(() => props)\n    return () =>\n      mounted.value\n        ? h(SlotTransitionGroupChildInner, { ...attrs, preventMountTransition: props.preventMountTransition } as never)\n        : null\n  },\n})\n\nexport const SlotTransitionGroup = defineComponent({\n  name: \"SlotTransitionGroup\",\n  props: {\n    /** Determines the amount of time that the enter state is applied during mounting */\n    enterDuration: { type: Number, default: 0 },\n    /** Determines the amount of time that the exit state is applied before unmounting */\n    exitDuration: { type: Number, default: 0 },\n    /** Determines if children should have an enter transition applied during mounting of the group. */\n    preventInitialTransition: { type: Boolean, default: true },\n    /** Delay in MS to wait before mounting a child. Unset for no delay (default). */\n    enterMountDelay: Number,\n    /** Render children changes immediately, bypassing transition timings */\n    disableAnimations: { type: Boolean, default: () => getDisableAnimations() },\n    /** Determines how new children are added to the children array */\n    insertMethod: { type: String as PropType<InsertMethod>, default: \"append\" },\n    onEnter: callbackProp,\n    onEnterActive: callbackProp,\n    onEnterComplete: callbackProp,\n    onExit: callbackProp,\n    onExitActive: callbackProp,\n    onExitComplete: callbackProp,\n  },\n  setup(props, { slots }) {\n    const children = useChildList(\"SlotTransitionGroup\")\n    const callbacks: TransitionGroupChildCallbacks = {\n      onEnter: (el) => props.onEnter?.(el),\n      onEnterActive: (el) => props.onEnterActive?.(el),\n      onEnterComplete: (el) => props.onEnterComplete?.(el),\n      onExit: (el) => props.onExit?.(el),\n      onExitActive: (el) => props.onExitActive?.(el),\n      onExitComplete: (el) => props.onExitComplete?.(el),\n    }\n\n    return () => {\n      const slotChildren: VNode[] = flattenChildren(slots.default?.() ?? [])\n      const renderChildren = children.next(\n        children.keyedChildren(slotChildren),\n        props.insertMethod,\n        props.preventInitialTransition,\n      )\n\n      // Fast path: when animations are disabled, render children as-is\n      if (props.disableAnimations) {\n        return slotChildren.filter((vnode) => !isPlaceholder(vnode))\n      }\n\n      return renderChildren.map((child) =>\n        h(SlotTransitionGroupChild, {\n          key: child.key,\n          preventMountTransition: child.preventMountTransition,\n          enterMountDelay: props.enterMountDelay,\n          component: child.vnode,\n          shouldRender: child.shouldRender,\n          enterDuration: props.enterDuration,\n          exitDuration: props.exitDuration,\n          removeChild: () => children.remove(child.key),\n          callbacks,\n        }),\n      )\n    }\n  },\n})\n\nexport type SlotTransitionGroupProps = InstanceType<typeof SlotTransitionGroup>[\"$props\"]\n"]}

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

@@ -0,0 +1,164 @@
+import clsx from "clsx";
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import getDisableAnimations from "./getDisableAnimations.js";
+import { flattenChildren, isPlaceholder, useChildList } from "./childList.js";
+import { useTransitionChild } from "./useTransitionChild.js";
+import s from "@plexui/styles/components/Transition/TransitionGroup.module.css";
+const callbackProp = Function;
+const TransitionGroupChildInner = defineComponent({
+    name: "TransitionGroupChildInner",
+    props: {
+        as: { type: String, required: true },
+        className: String,
+        transitionId: String,
+        styleValue: [String, Object, Array],
+        preventMountTransition: Boolean,
+        shouldRender: { type: Boolean, required: true },
+        enterDuration: { type: Number, required: true },
+        exitDuration: { type: Number, required: true },
+        removeChild: { type: Function, required: true },
+        callbacks: Object,
+    },
+    setup(props, { slots }) {
+        const element = ref(null);
+        const state = useTransitionChild(props, () => element.value);
+        return () => h(props.as, {
+            "ref": element,
+            "class": clsx(props.className, s.TransitionGroupChild),
+            "data-transition-id": props.transitionId,
+            "style": props.styleValue,
+            "data-entering": state.enter ? "" : undefined,
+            "data-entering-active": state.enterActive ? "" : undefined,
+            "data-exiting": state.exit ? "" : undefined,
+            "data-exiting-active": state.exitActive ? "" : undefined,
+            "data-interrupted": state.interrupted ? "" : undefined,
+        }, slots.default?.());
+    },
+});
+/**
+ * Delays mounting a child by `enterMountDelay` ms, except on the initial
+ * (prevented) mount. Like usehooks-ts' useTimeout, a changed delay restarts
+ * the pending timer; removing the delay while pending leaves it unmounted.
+ */
+export const useMountDelay = (getProps) => {
+    const delay = () => {
+        const { preventMountTransition, enterMountDelay } = getProps();
+        return !preventMountTransition && enterMountDelay != null ? enterMountDelay : null;
+    };
+    const mounted = ref(delay() == null);
+    let timeout;
+    onMounted(() => {
+        watch(delay, (mountDelay) => {
+            clearTimeout(timeout);
+            if (!mounted.value && mountDelay != null) {
+                timeout = window.setTimeout(() => (mounted.value = true), mountDelay);
+            }
+        }, { immediate: true });
+    });
+    onBeforeUnmount(() => clearTimeout(timeout));
+    return mounted;
+};
+const TransitionGroupChild = defineComponent({
+    name: "TransitionGroupChild",
+    inheritAttrs: false,
+    props: {
+        preventMountTransition: Boolean,
+        enterMountDelay: Number,
+    },
+    setup(props, { attrs, slots }) {
+        const mounted = useMountDelay(() => props);
+        return () => mounted.value
+            ? h(TransitionGroupChildInner, { ...attrs, preventMountTransition: props.preventMountTransition }, slots)
+            : null;
+    },
+});
+// With `disableAnimations`, React wraps the children through `Children.map`,
+// which keys each wrapper by its child's key and a `false` child's wrapper by
+// its position. A reordered child moves with its wrapper (keeping its DOM and
+// state), and a `false` child turning into an element (or back) gets a new
+// wrapper. Placeholders take a symbol per position, which no child key can
+// equal.
+const placeholderKeys = [];
+const wrapperKey = (vnode, index) => {
+    if (!isPlaceholder(vnode))
+        return vnode.key;
+    return (placeholderKeys[index] ??= Symbol(`placeholder-${index}`));
+};
+/**
+ * Wraps each keyed child in a `<span>` (or `<div>`) that carries
+ * `data-entering` / `data-exiting` state while it mounts and unmounts.
+ *
+ * A `false` slot child (a comment vnode) mirrors React's `Children.map`
+ * over `false`: with `disableAnimations` it still renders an empty wrapper.
+ * Leave the slot out entirely to render nothing.
+ */
+export const TransitionGroup = defineComponent({
+    name: "TransitionGroup",
+    inheritAttrs: false,
+    props: {
+        /** Determines the tag used by wrapping elements */
+        as: { type: String, default: "span" },
+        /** Identifier passed to wrapping elements as `[data-transition-id]` */
+        transitionId: String,
+        /** Determines the amount of time that the enter state is applied during mounting */
+        enterDuration: { type: Number, default: 0 },
+        /** Determines the amount of time that the exit state is applied before unmounting */
+        exitDuration: { type: Number, default: 0 },
+        /** Determines if children should have an enter transition applied during mounting of the TransitionGroup. */
+        preventInitialTransition: { type: Boolean, default: true },
+        /** Delay in MS to wait before mounting a child. Unset for no delay (default). */
+        enterMountDelay: Number,
+        /** Render children changes immediately, bypassing transition timings */
+        disableAnimations: { type: Boolean, default: () => getDisableAnimations() },
+        /** Determines how new children are added to the children array */
+        insertMethod: { type: String, default: "append" },
+        /** Called when an enter animation is staged (e.g., component mounted to the DOM) */
+        onEnter: callbackProp,
+        /** Called when an enter animation starts */
+        onEnterActive: callbackProp,
+        /** Called when an enter animation completes */
+        onEnterComplete: callbackProp,
+        /** Called when an exit animation is staged */
+        onExit: callbackProp,
+        /** Called when an exit animation starts */
+        onExitActive: callbackProp,
+        /** Called when an exit animation completes (e.g., component unmounted from the DOM) */
+        onExitComplete: callbackProp,
+    },
+    setup(props, { slots, attrs }) {
+        const children = useChildList("TransitionGroup");
+        // Read at call time, so callers can swap handlers between renders
+        const callbacks = {
+            onEnter: (el) => props.onEnter?.(el),
+            onEnterActive: (el) => props.onEnterActive?.(el),
+            onEnterComplete: (el) => props.onEnterComplete?.(el),
+            onExit: (el) => props.onExit?.(el),
+            onExitActive: (el) => props.onExitActive?.(el),
+            onExitComplete: (el) => props.onExitComplete?.(el),
+        };
+        return () => {
+            const slotChildren = flattenChildren(slots.default?.() ?? []);
+            const className = attrs.class;
+            const style = attrs.style;
+            const renderChildren = children.next(children.keyedChildren(slotChildren), props.insertMethod, props.preventInitialTransition);
+            if (props.disableAnimations) {
+                return slotChildren.map((vnode, index) => h(props.as, { "key": wrapperKey(vnode, index), "class": className, style, "data-transition-id": props.transitionId }, isPlaceholder(vnode) ? undefined : [vnode]));
+            }
+            return renderChildren.map((child) => h(TransitionGroupChild, {
+                key: child.key,
+                preventMountTransition: child.preventMountTransition,
+                enterMountDelay: props.enterMountDelay,
+                as: props.as,
+                className,
+                transitionId: props.transitionId,
+                styleValue: style,
+                shouldRender: child.shouldRender,
+                enterDuration: props.enterDuration,
+                exitDuration: props.exitDuration,
+                removeChild: () => children.remove(child.key),
+                callbacks,
+            }, { default: () => [child.vnode] }));
+        };
+    },
+});
+//# sourceMappingURL=TransitionGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransitionGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/TransitionGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { defineComponent, h, onBeforeUnmount, onMounted, ref, watch, type PropType, type StyleValue, type VNode } from \"vue\"\nimport getDisableAnimations from \"./getDisableAnimations.js\"\nimport { flattenChildren, isPlaceholder, useChildList } from \"./childList.js\"\nimport type { InsertMethod, TransitionGroupChildCallback, TransitionGroupChildCallbacks } from \"./shared.js\"\nimport { useTransitionChild } from \"./useTransitionChild.js\"\nimport s from \"@plexui/styles/components/Transition/TransitionGroup.module.css\"\n\n// Port of packages/ui/src/components/Transition/TransitionGroup.tsx. Same\n// wrappers, data attributes and timings, so the shared CSS animates both.\n\ntype Tag = \"div\" | \"span\"\n\nconst callbackProp = Function as PropType<TransitionGroupChildCallback>\n\nconst TransitionGroupChildInner = defineComponent({\n  name: \"TransitionGroupChildInner\",\n  props: {\n    as: { type: String as PropType<Tag>, required: true },\n    className: String,\n    transitionId: String,\n    styleValue: [String, Object, Array] as PropType<StyleValue>,\n    preventMountTransition: Boolean,\n    shouldRender: { type: Boolean, required: true },\n    enterDuration: { type: Number, required: true },\n    exitDuration: { type: Number, required: true },\n    removeChild: { type: Function as PropType<() => void>, required: true },\n    callbacks: Object as PropType<TransitionGroupChildCallbacks>,\n  },\n  setup(props, { slots }) {\n    const element = ref<HTMLElement | null>(null)\n    const state = useTransitionChild(props, () => element.value)\n\n    return () =>\n      h(\n        props.as,\n        {\n          \"ref\": element,\n          \"class\": clsx(props.className, s.TransitionGroupChild),\n          \"data-transition-id\": props.transitionId,\n          \"style\": props.styleValue,\n          \"data-entering\": state.enter ? \"\" : undefined,\n          \"data-entering-active\": state.enterActive ? \"\" : undefined,\n          \"data-exiting\": state.exit ? \"\" : undefined,\n          \"data-exiting-active\": state.exitActive ? \"\" : undefined,\n          \"data-interrupted\": state.interrupted ? \"\" : undefined,\n        },\n        slots.default?.(),\n      )\n  },\n})\n\n/**\n * Delays mounting a child by `enterMountDelay` ms, except on the initial\n * (prevented) mount. Like usehooks-ts' useTimeout, a changed delay restarts\n * the pending timer; removing the delay while pending leaves it unmounted.\n */\nexport const useMountDelay = (getProps: () => { preventMountTransition?: boolean; enterMountDelay?: number }) => {\n  const delay = () => {\n    const { preventMountTransition, enterMountDelay } = getProps()\n    return !preventMountTransition && enterMountDelay != null ? enterMountDelay : null\n  }\n  const mounted = ref(delay() == null)\n  let timeout: number | undefined\n\n  onMounted(() => {\n    watch(\n      delay,\n      (mountDelay) => {\n        clearTimeout(timeout)\n        if (!mounted.value && mountDelay != null) {\n          timeout = window.setTimeout(() => (mounted.value = true), mountDelay)\n        }\n      },\n      { immediate: true },\n    )\n  })\n  onBeforeUnmount(() => clearTimeout(timeout))\n  return mounted\n}\n\nconst TransitionGroupChild = defineComponent({\n  name: \"TransitionGroupChild\",\n  inheritAttrs: false,\n  props: {\n    preventMountTransition: Boolean,\n    enterMountDelay: Number,\n  },\n  setup(props, { attrs, slots }) {\n    const mounted = useMountDelay(() => props)\n    return () =>\n      mounted.value\n        ? h(TransitionGroupChildInner, { ...attrs, preventMountTransition: props.preventMountTransition } as never, slots)\n        : null\n  },\n})\n\n// With `disableAnimations`, React wraps the children through `Children.map`,\n// which keys each wrapper by its child's key and a `false` child's wrapper by\n// its position. A reordered child moves with its wrapper (keeping its DOM and\n// state), and a `false` child turning into an element (or back) gets a new\n// wrapper. Placeholders take a symbol per position, which no child key can\n// equal.\nconst placeholderKeys: symbol[] = []\nconst wrapperKey = (vnode: VNode, index: number): PropertyKey => {\n  if (!isPlaceholder(vnode)) return vnode.key!\n  return (placeholderKeys[index] ??= Symbol(`placeholder-${index}`))\n}\n\n/**\n * Wraps each keyed child in a `<span>` (or `<div>`) that carries\n * `data-entering` / `data-exiting` state while it mounts and unmounts.\n *\n * A `false` slot child (a comment vnode) mirrors React's `Children.map`\n * over `false`: with `disableAnimations` it still renders an empty wrapper.\n * Leave the slot out entirely to render nothing.\n */\nexport const TransitionGroup = defineComponent({\n  name: \"TransitionGroup\",\n  inheritAttrs: false,\n  props: {\n    /** Determines the tag used by wrapping elements */\n    as: { type: String as PropType<Tag>, default: \"span\" },\n    /** Identifier passed to wrapping elements as `[data-transition-id]` */\n    transitionId: String,\n    /** Determines the amount of time that the enter state is applied during mounting */\n    enterDuration: { type: Number, default: 0 },\n    /** Determines the amount of time that the exit state is applied before unmounting */\n    exitDuration: { type: Number, default: 0 },\n    /** Determines if children should have an enter transition applied during mounting of the TransitionGroup. */\n    preventInitialTransition: { type: Boolean, default: true },\n    /** Delay in MS to wait before mounting a child. Unset for no delay (default). */\n    enterMountDelay: Number,\n    /** Render children changes immediately, bypassing transition timings */\n    disableAnimations: { type: Boolean, default: () => getDisableAnimations() },\n    /** Determines how new children are added to the children array */\n    insertMethod: { type: String as PropType<InsertMethod>, default: \"append\" },\n    /** Called when an enter animation is staged (e.g., component mounted to the DOM) */\n    onEnter: callbackProp,\n    /** Called when an enter animation starts */\n    onEnterActive: callbackProp,\n    /** Called when an enter animation completes */\n    onEnterComplete: callbackProp,\n    /** Called when an exit animation is staged */\n    onExit: callbackProp,\n    /** Called when an exit animation starts */\n    onExitActive: callbackProp,\n    /** Called when an exit animation completes (e.g., component unmounted from the DOM) */\n    onExitComplete: callbackProp,\n  },\n  setup(props, { slots, attrs }) {\n    const children = useChildList(\"TransitionGroup\")\n    // Read at call time, so callers can swap handlers between renders\n    const callbacks: TransitionGroupChildCallbacks = {\n      onEnter: (el) => props.onEnter?.(el),\n      onEnterActive: (el) => props.onEnterActive?.(el),\n      onEnterComplete: (el) => props.onEnterComplete?.(el),\n      onExit: (el) => props.onExit?.(el),\n      onExitActive: (el) => props.onExitActive?.(el),\n      onExitComplete: (el) => props.onExitComplete?.(el),\n    }\n\n    return () => {\n      const slotChildren: VNode[] = flattenChildren(slots.default?.() ?? [])\n      const className = attrs.class as string | undefined\n      const style = attrs.style as StyleValue | undefined\n      const renderChildren = children.next(\n        children.keyedChildren(slotChildren),\n        props.insertMethod,\n        props.preventInitialTransition,\n      )\n\n      if (props.disableAnimations) {\n        return slotChildren.map((vnode, index) =>\n          h(\n            props.as,\n            { \"key\": wrapperKey(vnode, index), \"class\": className, style, \"data-transition-id\": props.transitionId },\n            isPlaceholder(vnode) ? undefined : [vnode],\n          ),\n        )\n      }\n\n      return renderChildren.map((child) =>\n        h(\n          TransitionGroupChild,\n          {\n            key: child.key,\n            preventMountTransition: child.preventMountTransition,\n            enterMountDelay: props.enterMountDelay,\n            as: props.as,\n            className,\n            transitionId: props.transitionId,\n            styleValue: style,\n            shouldRender: child.shouldRender,\n            enterDuration: props.enterDuration,\n            exitDuration: props.exitDuration,\n            removeChild: () => children.remove(child.key),\n            callbacks,\n          },\n          { default: () => [child.vnode] },\n        ),\n      )\n    }\n  },\n})\n\nexport type TransitionGroupProps = InstanceType<typeof TransitionGroup>[\"$props\"]\n"]}

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

@@ -0,0 +1,60 @@
+import { Comment, shallowRef } from "vue";
+import { isTransparentFragment } from "../../lib/renderHelpers.js";
+export const isPlaceholder = (vnode) => vnode.type === Comment;
+/**
+ * Expands the fragments React flattens like arrays, so `v-for` (compiled to a
+ * fragment of keyed vnodes) yields the keyed children. A keyed
+ * `<template v-for>` item with several roots stays one child, as React keeps
+ * a `<Fragment key>` together.
+ */
+export const flattenChildren = (vnodes) => vnodes.flatMap((vnode) => (isTransparentFragment(vnode) ? flattenChildren(vnode.children) : [vnode]));
+/**
+ * The keyed child bookkeeping of React's TransitionGroup
+ * (`computeNextRenderChildren`): children that leave stay rendered with
+ * `shouldRender: false` until their exit completes and they are removed.
+ */
+export function useChildList(componentName) {
+    let list = null;
+    // Bumped when an exited child is removed, to re-render without it
+    const removals = shallowRef(0);
+    const remove = (key) => {
+        list = (list ?? []).filter((child) => child.key !== key);
+        removals.value += 1;
+    };
+    const keyedChildren = (children) => {
+        const keyed = children.filter((vnode) => !isPlaceholder(vnode));
+        for (const vnode of keyed) {
+            if (vnode.key == null) {
+                throw new Error(`Child elements of <${componentName} /> must include a \`key\``);
+            }
+        }
+        return keyed;
+    };
+    const next = (propChildren, insertMethod, preventInitialTransition) => {
+        void removals.value;
+        if (list === null) {
+            // Lock preventMountTransition to its value on the first render
+            list = propChildren.map((vnode) => ({
+                key: vnode.key,
+                vnode,
+                shouldRender: true,
+                preventMountTransition: preventInitialTransition,
+            }));
+            return list;
+        }
+        const propKeys = new Set(propChildren.map((vnode) => vnode.key));
+        const currentKeys = new Set(list.map((child) => child.key));
+        const added = propChildren
+            .filter((vnode) => !currentKeys.has(vnode.key))
+            .map((vnode) => ({ key: vnode.key, vnode, shouldRender: true }));
+        const updated = list.map((child) => ({
+            ...child,
+            vnode: propChildren.find((vnode) => vnode.key === child.key) ?? child.vnode,
+            shouldRender: propKeys.has(child.key),
+        }));
+        list = insertMethod === "append" ? updated.concat(added) : added.concat(updated);
+        return list;
+    };
+    return { keyedChildren, next, remove };
+}
+//# sourceMappingURL=childList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"childList.js","sourceRoot":"","sources":["../../../../src/components/Transition/childList.ts"],"names":[],"mappings":"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","sourcesContent":["import { Comment, shallowRef, type VNode } from \"vue\"\nimport { isTransparentFragment } from \"../../lib/renderHelpers.js\"\nimport type { InsertMethod } from \"./shared.js\"\n\nexport type RenderChild = {\n  key: PropertyKey\n  vnode: VNode\n  shouldRender: boolean\n  preventMountTransition?: boolean\n}\n\nexport const isPlaceholder = (vnode: VNode) => vnode.type === Comment\n\n/**\n * Expands the fragments React flattens like arrays, so `v-for` (compiled to a\n * fragment of keyed vnodes) yields the keyed children. A keyed\n * `<template v-for>` item with several roots stays one child, as React keeps\n * a `<Fragment key>` together.\n */\nexport const flattenChildren = (vnodes: VNode[]): VNode[] =>\n  vnodes.flatMap((vnode) => (isTransparentFragment(vnode) ? flattenChildren(vnode.children as VNode[]) : [vnode]))\n\n/**\n * The keyed child bookkeeping of React's TransitionGroup\n * (`computeNextRenderChildren`): children that leave stay rendered with\n * `shouldRender: false` until their exit completes and they are removed.\n */\nexport function useChildList(componentName: string) {\n  let list: RenderChild[] | null = null\n  // Bumped when an exited child is removed, to re-render without it\n  const removals = shallowRef(0)\n\n  const remove = (key: PropertyKey) => {\n    list = (list ?? []).filter((child) => child.key !== key)\n    removals.value += 1\n  }\n\n  const keyedChildren = (children: VNode[]) => {\n    const keyed = children.filter((vnode) => !isPlaceholder(vnode))\n    for (const vnode of keyed) {\n      if (vnode.key == null) {\n        throw new Error(`Child elements of <${componentName} /> must include a \\`key\\``)\n      }\n    }\n    return keyed\n  }\n\n  const next = (propChildren: VNode[], insertMethod: InsertMethod, preventInitialTransition: boolean) => {\n    void removals.value\n\n    if (list === null) {\n      // Lock preventMountTransition to its value on the first render\n      list = propChildren.map((vnode) => ({\n        key: vnode.key!,\n        vnode,\n        shouldRender: true,\n        preventMountTransition: preventInitialTransition,\n      }))\n      return list\n    }\n\n    const propKeys = new Set(propChildren.map((vnode) => vnode.key))\n    const currentKeys = new Set(list.map((child) => child.key))\n    const added = propChildren\n      .filter((vnode) => !currentKeys.has(vnode.key!))\n      .map((vnode) => ({ key: vnode.key!, vnode, shouldRender: true }))\n    const updated = list.map((child) => ({\n      ...child,\n      vnode: propChildren.find((vnode) => vnode.key === child.key) ?? child.vnode,\n      shouldRender: propKeys.has(child.key),\n    }))\n    list = insertMethod === \"append\" ? updated.concat(added) : added.concat(updated)\n    return list\n  }\n\n  return { keyedChildren, next, remove }\n}\n"]}

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

@@ -0,0 +1,5 @@
+import { isTest } from "../../lib/environment.js";
+// By default, all tests will treat <TransitionGroup> as `disableAnimations={true}`,
+// removing the need to be aware of misc. async animations happening across tests.
+export default () => isTest;
+//# sourceMappingURL=getDisableAnimations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getDisableAnimations.js","sourceRoot":"","sources":["../../../../src/components/Transition/getDisableAnimations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AAEjD,oFAAoF;AACpF,kFAAkF;AAClF,eAAe,GAAG,EAAE,CAAC,MAAM,CAAA","sourcesContent":["import { isTest } from \"../../lib/environment.js\"\n\n// By default, all tests will treat <TransitionGroup> as `disableAnimations={true}`,\n// removing the need to be aware of misc. async animations happening across tests.\nexport default () => isTest\n"]}