npm - @plexui/ui - Versions diffs - 0.19.0 → 0.20.0 - Mend

@plexui/ui 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (401) hide show

package/dist/es/components/Transition/Animate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Animate.js","sourceRoot":"","sources":["../../../../src/components/Transition/Animate.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAA;AAE9E,OAAO,EAAsB,MAAM,OAAO,CAAA;AAC1C,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,CAAC,MAAM,~~sBAAsB~~,CAAA;~~AACpC~~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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { TransitionGroup, type TransitionGroupProps } from \"./TransitionGroup\"\n\nimport { type CSSProperties } from \"react\"\nimport {\n toCssVariables,\n toFilterProperty,\n toMsDurationProperty,\n toOpacityProperty,\n toTransformProperty,\n} from \"../../lib/helpers\"\nimport s from \"./Animate.module.css\"\nimport { type InitialTransitionDefinition, type TransitionDefinition } from \"./shared\"\n\nexport type AnimateProps = Pick<\n TransitionGroupProps,\n \"as\" \| \"children\" \| \"className\" \| \"insertMethod\" \| \"preventInitialTransition\"\n> & {\n /** Class applied to the inner TransitionGroup /\n transitionClassName?: string\n /* Styles applied to the enter transition /\n enter?: TransitionDefinition\n /* Styles applied to the exit transition /\n exit?: TransitionDefinition\n /* Styles applied before the enter transition occurs /\n initial?: InitialTransitionDefinition\n /\n Determines how transition states are positioned\n * @default absolute\n /\n transitionPosition?: \"absolute\" \| \"static\"\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 Animate = (props: AnimateProps) => {\n const {\n as: TagName = \"span\",\n className,\n children,\n preventInitialTransition,\n insertMethod,\n transitionClassName,\n transitionPosition = \"absolute\",\n } = props\n const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props)\n\n return (\n <TagName\n className={clsx(\"block\", transitionPosition === \"absolute\" && \"relative\", className)}\n data-transition-position={transitionPosition}\n style={variables}\n >\n <TransitionGroup\n as={TagName}\n className={clsx(s.TransitionItem, transitionClassName)}\n enterDuration={enterTotalDuration}\n exitDuration={exitTotalDuration}\n insertMethod={insertMethod}\n preventInitialTransition={preventInitialTransition}\n >\n {children}\n </TransitionGroup>\n </TagName>\n )\n}\n\n// Keep in sync with default values in Animate.module.css\nconst DEFAULT_ENTER_DURATION_MS_EASE = 400\nconst DEFAULT_ENTER_DURATION_MS_CUBIC = 500\nconst DEFAULT_EXIT_DURATION_MS_EASE = 200\nconst DEFAULT_EXIT_DURATION_MS_CUBIC = 300\n\nfunction getAnimationProperties({\n initial: initial,\n enter: enter,\n exit: exit,\n forceCompositeLayer,\n}: AnimateProps): {\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 ?? 0),\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 ?? 0),\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 } satisfies Record<string, string>)\n\n const enterTotalDuration = (enter?.delay ?? 0) + enterDuration\n const exitTotalDuration = (exit?.delay ?? 0) + exitDuration\n\n return { enterTotalDuration, exitTotalDuration, variables }\n}\n"]}
1	+ {"version":3,"file":"Animate.js","sourceRoot":"","sources":["../../../../src/components/Transition/Animate.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { TransitionGroup, type TransitionGroupProps } from \"./TransitionGroup\"\n\nimport { type CSSProperties } from \"react\"\nimport {\n toCssVariables,\n toFilterProperty,\n toMsDurationProperty,\n toOpacityProperty,\n toTransformProperty,\n} from \"../../lib/helpers\"\nimport s from \"@plexui/styles/components/Transition/Animate.module.css\"\nimport { type InitialTransitionDefinition, type TransitionDefinition } from \"./shared\"\n\nexport type AnimateProps = Pick<\n TransitionGroupProps,\n \"as\" \| \"children\" \| \"className\" \| \"insertMethod\" \| \"preventInitialTransition\"\n> & {\n /** Class applied to the inner TransitionGroup /\n transitionClassName?: string\n /* Styles applied to the enter transition /\n enter?: TransitionDefinition\n /* Styles applied to the exit transition /\n exit?: TransitionDefinition\n /* Styles applied before the enter transition occurs /\n initial?: InitialTransitionDefinition\n /\n Determines how transition states are positioned\n * @default absolute\n /\n transitionPosition?: \"absolute\" \| \"static\"\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 Animate = (props: AnimateProps) => {\n const {\n as: TagName = \"span\",\n className,\n children,\n preventInitialTransition,\n insertMethod,\n transitionClassName,\n transitionPosition = \"absolute\",\n } = props\n const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props)\n\n return (\n <TagName\n className={clsx(\"block\", transitionPosition === \"absolute\" && \"relative\", className)}\n data-transition-position={transitionPosition}\n style={variables}\n >\n <TransitionGroup\n as={TagName}\n className={clsx(s.TransitionItem, transitionClassName)}\n enterDuration={enterTotalDuration}\n exitDuration={exitTotalDuration}\n insertMethod={insertMethod}\n preventInitialTransition={preventInitialTransition}\n >\n {children}\n </TransitionGroup>\n </TagName>\n )\n}\n\n// Keep in sync with default values in Animate.module.css\nconst DEFAULT_ENTER_DURATION_MS_EASE = 400\nconst DEFAULT_ENTER_DURATION_MS_CUBIC = 500\nconst DEFAULT_EXIT_DURATION_MS_EASE = 200\nconst DEFAULT_EXIT_DURATION_MS_CUBIC = 300\n\nfunction getAnimationProperties({\n initial: initial,\n enter: enter,\n exit: exit,\n forceCompositeLayer,\n}: AnimateProps): {\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 ?? 0),\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 ?? 0),\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 } satisfies Record<string, string>)\n\n const enterTotalDuration = (enter?.delay ?? 0) + enterDuration\n const exitTotalDuration = (exit?.delay ?? 0) + exitDuration\n\n return { enterTotalDuration, exitTotalDuration, variables }\n}\n"]}

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

@@ -2,10 +2,10 @@
 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";
+import { toCssVariables, toFilterProperty, toMsDurationProperty, toOpacityProperty, toTransformProperty, waitForAnimationFrame, } from "../../lib/helpers.js";
+import s from "@plexui/styles/components/Transition/AnimateLayout.module.css";
+import { TransitionGroup } from "./TransitionGroup.js";
+import {} from "./shared.js";
 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.

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

	@@ -1 +1 @@
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"]}
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 \"@plexui/styles/components/Transition/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/AnimateLayoutGroup.js CHANGED Viewed

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TransitionGroup } from "./TransitionGroup";
+import { TransitionGroup } from "./TransitionGroup.js";
 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";
+import { toCssVariables, toFilterProperty, toMsDurationProperty, toOpacityProperty, toTransformProperty, waitForAnimationFrame, } from "../../lib/helpers.js";
+import s from "@plexui/styles/components/Transition/AnimateLayoutGroup.module.css";
+import { NonNullChildren, } from "./shared.js";
 export const AnimateLayoutGroup = (props) => {
-    const { as: TagName = "span", children, className, transitionClassName, dimension = "height", } = props;
+    const { as: TagName = "span", children, className, transitionClassName, dimension = "height", hideOverflow = false, itemAnchor = "start", insertMethod, preventInitialTransition, } = props;
     const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props);
     const handleEnter = (element) => {
         // Stage zero layout
@@ -38,12 +38,16 @@ export const AnimateLayoutGroup = (props) => {
             element.style[dimension] = "0";
         });
     };
-    return (_jsx(TransitionGroup, { as: TagName, className: clsx(s.LayoutItem, className), style: variables,
+    return (_jsx(TransitionGroup, { as: TagName, className: clsx(s.LayoutItem, className),
+        // The wrapper of each item is the element that resizes
+        style: 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, children: NonNullChildren(children).map((child) => (
+        enterDuration: enterTotalDuration + 32, exitDuration: exitTotalDuration + 32, onEnter: handleEnter, onEnterActive: handleEnterActive, onEnterComplete: handleEnterComplete, onExit: handleExit, onExitActive: handleExitActive,
+        // Accepted in the props type; forward so they take effect
+        insertMethod: insertMethod, preventInitialTransition: preventInitialTransition, 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))) }));
+        _jsx(TagName, { className: clsx(s.TransitionItem, transitionClassName), "data-dimension": dimension, "data-item-anchor": itemAnchor, children: child }, child.key || undefined))) }));
 };
 // Keep in sync with default values in AnimateLayout.module.css
 const DEFAULT_LAYOUT_ENTER_DURATION_MS = 300;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AnimateLayoutGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/AnimateLayoutGroup.tsx"],"names":[],"mappings":"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","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"]}
1	+ {"version":3,"file":"AnimateLayoutGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/AnimateLayoutGroup.tsx"],"names":[],"mappings":"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","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 \"@plexui/styles/components/Transition/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 hideOverflow = false,\n itemAnchor = \"start\",\n insertMethod,\n preventInitialTransition,\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 // The wrapper of each item is the element that resizes\n style={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 // Accepted in the props type; forward so they take effect\n insertMethod={insertMethod}\n preventInitialTransition={preventInitialTransition}\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 data-item-anchor={itemAnchor}\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/SlotTransitionGroup.js CHANGED Viewed

@@ -2,12 +2,12 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { Children, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState, } from "react";
 import { mergeRefs } from "react-merge-refs";
-import { waitForAnimationFrame } from "../../lib/helpers";
+import { waitForAnimationFrame } from "../../lib/helpers.js";
 // (no-op) clsx removed: className is not managed at group-level for slotted children
 import { useTimeout } from "usehooks-ts";
-import getDisableAnimations from "./getDisableAnimations";
-import { assertSingleChildWhenRef, ChildrenWithKeys, computeNextRenderChildren, noop, useChildCallback, } from "./shared";
-import { getInitialTransitionState, transitionReducer } from "./transitionReducer";
+import getDisableAnimations from "./getDisableAnimations.js";
+import { assertSingleChildWhenRef, ChildrenWithKeys, computeNextRenderChildren, noop, useChildCallback, } from "./shared.js";
+import { getInitialTransitionState, transitionReducer } from "./transitionReducer.js";
 const SlotTransitionGroupChildInner = ({ ref, component, preventMountTransition, shouldRender, enterDuration, exitDuration, removeChild, onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete, }) => {
     const [state, dispatch] = useReducer(transitionReducer, getInitialTransitionState(preventMountTransition || false));
     const preventedMountTransition = useRef(false);

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

@@ -2,13 +2,13 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { Children, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState, } from "react";
 import { mergeRefs } from "react-merge-refs";
-import { waitForAnimationFrame } from "../../lib/helpers";
+import { waitForAnimationFrame } from "../../lib/helpers.js";
 import clsx from "clsx";
 import { useTimeout } from "usehooks-ts";
-import getDisableAnimations from "./getDisableAnimations";
-import { assertSingleChildWhenRef, ChildrenWithKeys, computeNextRenderChildren, noop, useChildCallback, } from "./shared";
-import s from "./TransitionGroup.module.css";
-import { getInitialTransitionState, transitionReducer } from "./transitionReducer";
+import getDisableAnimations from "./getDisableAnimations.js";
+import { assertSingleChildWhenRef, ChildrenWithKeys, computeNextRenderChildren, noop, useChildCallback, } from "./shared.js";
+import s from "@plexui/styles/components/Transition/TransitionGroup.module.css";
+import { getInitialTransitionState, transitionReducer } from "./transitionReducer.js";
 const TransitionGroupChildInner = ({ ref: forwardedRef, as: TagName, children, className, transitionId, style, preventMountTransition, shouldRender, enterDuration, exitDuration, removeChild, onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete, }) => {
     const [state, dispatch] = useReducer(transitionReducer, getInitialTransitionState(preventMountTransition || false));
     // Allow a child to prevent mount transition, but still experience

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TransitionGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/TransitionGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport React, {\n Children,\n useCallback,\n useEffect,\n useLayoutEffect,\n useReducer,\n useRef,\n useState,\n type CSSProperties,\n} from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\n\nimport { waitForAnimationFrame } from \"../../lib/helpers\"\n\nimport clsx from \"clsx\"\nimport { useTimeout } from \"usehooks-ts\"\nimport getDisableAnimations from \"./getDisableAnimations\"\nimport {\n assertSingleChildWhenRef,\n ChildrenWithKeys,\n computeNextRenderChildren,\n noop,\n useChildCallback,\n type CallbackType,\n type ReactElementWithKey,\n type TransitionGroupChildCallbacks,\n} from \"./shared\"\nimport s from \"./TransitionGroup.module.css\"\nimport { getInitialTransitionState, transitionReducer } from \"./transitionReducer\"\n\ntype TransitionGroupChildProps = {\n as: \"div\" \| \"span\"\n children: React.ReactNode\n className?: string\n transitionId?: string\n style?: CSSProperties\n preventMountTransition?: boolean\n shouldRender: boolean\n enterDuration: number\n exitDuration: number\n enterMountDelay?: number\n removeChild: () => void\n ref?: React.Ref<unknown>\n} & TransitionGroupChildCallbacks\n\nconst TransitionGroupChildInner = ({\n ref: forwardedRef,\n as: TagName,\n children,\n className,\n transitionId,\n style,\n preventMountTransition,\n shouldRender,\n enterDuration,\n exitDuration,\n removeChild,\n onEnter,\n onEnterActive,\n onEnterComplete,\n onExit,\n onExitActive,\n onExitComplete,\n}: TransitionGroupChildProps) => {\n const [state, dispatch] = useReducer(\n transitionReducer,\n getInitialTransitionState(preventMountTransition \|\| false),\n )\n // Allow a child to prevent mount transition, but still experience\n // future enter transition events, when applicable.\n const preventedMountTransition = useRef<boolean>(false)\n const elementRef = useRef<HTMLDivElement \| null>(null)\n // Duration values should not affect hook re-renders, so we create refs for them\n const enterDurationRef = useRef<number>(enterDuration)\n enterDurationRef.current = enterDuration\n const exitDurationRef = useRef<number>(exitDuration)\n exitDurationRef.current = exitDuration\n\n const lastCallbackRef = useRef<CallbackType>(null)\n const triggerCallback = useCallback(\n (callbackType: CallbackType) => {\n const element = elementRef.current\n\n if (!element \|\| callbackType === lastCallbackRef.current) {\n return\n }\n\n lastCallbackRef.current = callbackType\n\n switch (callbackType) {\n case \"enter\":\n onEnter(element)\n break\n case \"enter-active\":\n onEnterActive(element)\n break\n case \"enter-complete\":\n onEnterComplete(element)\n break\n case \"exit\":\n onExit(element)\n break\n case \"exit-active\":\n onExitActive(element)\n break\n case \"exit-complete\":\n onExitComplete(element)\n break\n default:\n callbackType satisfies never\n break\n }\n },\n [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete],\n )\n\n React.useLayoutEffect(() => {\n // Exit transition\n if (!shouldRender) {\n let exitTimeout: number \| undefined\n\n dispatch({ type: \"exit-before\" })\n triggerCallback(\"exit\")\n\n const cancelAnimationFrame = waitForAnimationFrame(() => {\n dispatch({ type: \"exit-active\" })\n triggerCallback(\"exit-active\")\n\n exitTimeout = window.setTimeout(() => {\n triggerCallback(\"exit-complete\")\n removeChild()\n }, exitDurationRef.current)\n })\n\n return () => {\n cancelAnimationFrame()\n if (exitTimeout !== undefined) clearTimeout(exitTimeout)\n }\n }\n\n // Enter transition\n\n // Check if we need to prevent this specific entering cycle\n if (preventMountTransition && !preventedMountTransition.current) {\n // Mark initial transition as prevented and short-circuit.\n preventedMountTransition.current = true\n return\n }\n\n let enterTimeout: number \| undefined\n\n dispatch({ type: \"enter-before\" })\n triggerCallback(\"enter\")\n\n const cancelAnimationFrame = waitForAnimationFrame(() => {\n dispatch({ type: \"enter-active\" })\n triggerCallback(\"enter-active\")\n\n enterTimeout = window.setTimeout(() => {\n dispatch({ type: \"done\" })\n triggerCallback(\"enter-complete\")\n }, enterDurationRef.current)\n })\n\n return () => {\n cancelAnimationFrame()\n if (enterTimeout !== undefined) clearTimeout(enterTimeout)\n }\n }, [\n shouldRender,\n // This value is immutable after <TransitionGroup> is created, and does not change on re-renders.\n preventMountTransition,\n removeChild,\n triggerCallback,\n ])\n\n useEffect(() => {\n // Required for <StrictMode>, because we need to unset this token\n // when the hooks are re-run. It's an imperative effect that we need to manage.\n return () => {\n preventedMountTransition.current = false\n }\n }, [])\n\n return (\n <TagName\n ref={mergeRefs([elementRef, forwardedRef])}\n className={clsx(className, s.TransitionGroupChild)}\n data-transition-id={transitionId}\n style={style}\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 {children}\n </TagName>\n )\n}\n\nconst TransitionGroupChild = (props: TransitionGroupChildProps) => {\n // Don't spread these out of props - pass all props to inner child\n const { enterMountDelay, preventMountTransition } = props\n // Mount gating occurs when enterMountDelay exists, and isn't initial mount\n // Otherwise, this flag is a no-op and the TransitionChild mounts normally.\n const mountDelay = !preventMountTransition && enterMountDelay != null ? enterMountDelay : null\n const [mounted, setMounted] = useState(mountDelay == null)\n useTimeout(() => setMounted(true), mounted ? null : mountDelay)\n\n return mounted ? <TransitionGroupChildInner {...props} /> : null\n}\n\nexport type TransitionGroupProps = {\n /** Components controlled by TransitionGroup rendering /\n children: React.ReactNode\n /* Determines the tag used by wrapping elements /\n as?: \"div\" \| \"span\"\n /* Class passed to wrapping elements /\n className?: string\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?: number\n /* Determines the amount of time that the exit state is applied before unmounting /\n exitDuration?: number\n /\n Determines if children should have an enter transition applied during mounting of the TransitionGroup.\n * @default true\n /\n preventInitialTransition?: boolean\n /* Delay in MS to wait before mounting a child. `null` for no delay (default). /\n enterMountDelay?: number\n /* Render children changes immediately, bypassing transition timings /\n disableAnimations?: boolean\n /* Determines how new children are added to the children array /\n insertMethod?: \"append\" \| \"prepend\"\n /* Styles applied to wrapping elements /\n style?: CSSProperties\n /* Ref for the TransitionGroup */\n ref?: React.Ref<unknown>\n} & Partial<TransitionGroupChildCallbacks>\n\ntype RenderChild = {\n component: ReactElementWithKey\n shouldRender: boolean\n preventMountTransition?: boolean\n removeChild: () => void\n} & TransitionGroupChildCallbacks\n\nexport const TransitionGroup = (props: TransitionGroupProps) => {\n const {\n ref: forwardedRef,\n as: TagName = \"span\",\n children,\n className,\n transitionId,\n style,\n enterDuration = 0,\n exitDuration = 0,\n preventInitialTransition = true,\n enterMountDelay,\n insertMethod = \"append\",\n disableAnimations = getDisableAnimations(),\n } = props\n // Create stable, mutable references for all callbacks\n const onEnter = useChildCallback(props.onEnter ?? noop)\n const onEnterActive = useChildCallback(props.onEnterActive ?? noop)\n const onEnterComplete = useChildCallback(props.onEnterComplete ?? noop)\n const onExit = useChildCallback(props.onExit ?? noop)\n const onExitActive = useChildCallback(props.onExitActive ?? noop)\n const onExitComplete = useChildCallback(props.onExitComplete ?? noop)\n\n // Ensure all children are provided with keys.\n // Cannot reliably use Children.toArray() because `key` is processed: https://reactjs.org/docs/react-api.html#reactchildrentoarray\n Children.forEach(children, (child) => {\n // @ts-expect-error - We know `key` might not exist on certain types, that's why we're checking\n if (child && !child.key) {\n throw new Error(\"Child elements of <TransitionGroup /> must include a `key`\")\n }\n })\n\n const createDefaultRenderChildProps = useCallback(\n (child: ReactElementWithKey): RenderChild => ({\n component: child,\n shouldRender: true,\n removeChild: () => {\n setRenderChildren((currentRenderChildren) =>\n currentRenderChildren.filter((c) => child.key !== c.component.key),\n )\n },\n onEnter,\n onEnterActive,\n onEnterComplete,\n onExit,\n onExitActive,\n onExitComplete,\n }),\n [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete],\n )\n\n const [renderChildren, setRenderChildren] = useState<RenderChild[]>((): RenderChild[] => {\n return ChildrenWithKeys(children).map((child) => ({\n ...createDefaultRenderChildProps(child),\n // Lock this value to whatever the value was on initial render of the TransitionGroup.\n // It doesn't make sense to change this once it is mounted.\n preventMountTransition: preventInitialTransition,\n }))\n })\n\n useLayoutEffect(() => {\n setRenderChildren((currentRenderChildren): RenderChild[] => {\n const propChildrenArray = ChildrenWithKeys(children)\n return computeNextRenderChildren(\n propChildrenArray,\n currentRenderChildren,\n createDefaultRenderChildProps,\n insertMethod,\n )\n })\n }, [children, insertMethod, createDefaultRenderChildProps])\n\n // Prevent mistakes with forwardRef() by ensuring single child usage within the group.\n assertSingleChildWhenRef(\"TransitionGroup\", forwardedRef, Children.count(children))\n\n if (disableAnimations) {\n return (\n <>\n {Children.map(children, (child) => (\n <TagName\n // @ts-expect-error -- TS is not happy about this forwardedRef, but it's fine.\n ref={forwardedRef}\n className={className}\n style={style}\n data-transition-id={transitionId}\n >\n {child}\n </TagName>\n ))}\n </>\n )\n }\n\n return (\n <>\n {renderChildren.map(({ component, ...restProps }) => (\n <TransitionGroupChild\n key={component.key}\n {...restProps}\n as={TagName}\n className={className}\n transitionId={transitionId}\n enterDuration={enterDuration}\n exitDuration={exitDuration}\n enterMountDelay={enterMountDelay}\n style={style}\n ref={forwardedRef}\n >\n {component}\n </TransitionGroupChild>\n ))}\n </>\n )\n}\n"]}
1	+ {"version":3,"file":"TransitionGroup.js","sourceRoot":"","sources":["../../../../src/components/Transition/TransitionGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport React, {\n Children,\n useCallback,\n useEffect,\n useLayoutEffect,\n useReducer,\n useRef,\n useState,\n type CSSProperties,\n} from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\n\nimport { waitForAnimationFrame } from \"../../lib/helpers\"\n\nimport clsx from \"clsx\"\nimport { useTimeout } from \"usehooks-ts\"\nimport getDisableAnimations from \"./getDisableAnimations\"\nimport {\n assertSingleChildWhenRef,\n ChildrenWithKeys,\n computeNextRenderChildren,\n noop,\n useChildCallback,\n type CallbackType,\n type ReactElementWithKey,\n type TransitionGroupChildCallbacks,\n} from \"./shared\"\nimport s from \"@plexui/styles/components/Transition/TransitionGroup.module.css\"\nimport { getInitialTransitionState, transitionReducer } from \"./transitionReducer\"\n\ntype TransitionGroupChildProps = {\n as: \"div\" \| \"span\"\n children: React.ReactNode\n className?: string\n transitionId?: string\n style?: CSSProperties\n preventMountTransition?: boolean\n shouldRender: boolean\n enterDuration: number\n exitDuration: number\n enterMountDelay?: number\n removeChild: () => void\n ref?: React.Ref<unknown>\n} & TransitionGroupChildCallbacks\n\nconst TransitionGroupChildInner = ({\n ref: forwardedRef,\n as: TagName,\n children,\n className,\n transitionId,\n style,\n preventMountTransition,\n shouldRender,\n enterDuration,\n exitDuration,\n removeChild,\n onEnter,\n onEnterActive,\n onEnterComplete,\n onExit,\n onExitActive,\n onExitComplete,\n}: TransitionGroupChildProps) => {\n const [state, dispatch] = useReducer(\n transitionReducer,\n getInitialTransitionState(preventMountTransition \|\| false),\n )\n // Allow a child to prevent mount transition, but still experience\n // future enter transition events, when applicable.\n const preventedMountTransition = useRef<boolean>(false)\n const elementRef = useRef<HTMLDivElement \| null>(null)\n // Duration values should not affect hook re-renders, so we create refs for them\n const enterDurationRef = useRef<number>(enterDuration)\n enterDurationRef.current = enterDuration\n const exitDurationRef = useRef<number>(exitDuration)\n exitDurationRef.current = exitDuration\n\n const lastCallbackRef = useRef<CallbackType>(null)\n const triggerCallback = useCallback(\n (callbackType: CallbackType) => {\n const element = elementRef.current\n\n if (!element \|\| callbackType === lastCallbackRef.current) {\n return\n }\n\n lastCallbackRef.current = callbackType\n\n switch (callbackType) {\n case \"enter\":\n onEnter(element)\n break\n case \"enter-active\":\n onEnterActive(element)\n break\n case \"enter-complete\":\n onEnterComplete(element)\n break\n case \"exit\":\n onExit(element)\n break\n case \"exit-active\":\n onExitActive(element)\n break\n case \"exit-complete\":\n onExitComplete(element)\n break\n default:\n callbackType satisfies never\n break\n }\n },\n [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete],\n )\n\n React.useLayoutEffect(() => {\n // Exit transition\n if (!shouldRender) {\n let exitTimeout: number \| undefined\n\n dispatch({ type: \"exit-before\" })\n triggerCallback(\"exit\")\n\n const cancelAnimationFrame = waitForAnimationFrame(() => {\n dispatch({ type: \"exit-active\" })\n triggerCallback(\"exit-active\")\n\n exitTimeout = window.setTimeout(() => {\n triggerCallback(\"exit-complete\")\n removeChild()\n }, exitDurationRef.current)\n })\n\n return () => {\n cancelAnimationFrame()\n if (exitTimeout !== undefined) clearTimeout(exitTimeout)\n }\n }\n\n // Enter transition\n\n // Check if we need to prevent this specific entering cycle\n if (preventMountTransition && !preventedMountTransition.current) {\n // Mark initial transition as prevented and short-circuit.\n preventedMountTransition.current = true\n return\n }\n\n let enterTimeout: number \| undefined\n\n dispatch({ type: \"enter-before\" })\n triggerCallback(\"enter\")\n\n const cancelAnimationFrame = waitForAnimationFrame(() => {\n dispatch({ type: \"enter-active\" })\n triggerCallback(\"enter-active\")\n\n enterTimeout = window.setTimeout(() => {\n dispatch({ type: \"done\" })\n triggerCallback(\"enter-complete\")\n }, enterDurationRef.current)\n })\n\n return () => {\n cancelAnimationFrame()\n if (enterTimeout !== undefined) clearTimeout(enterTimeout)\n }\n }, [\n shouldRender,\n // This value is immutable after <TransitionGroup> is created, and does not change on re-renders.\n preventMountTransition,\n removeChild,\n triggerCallback,\n ])\n\n useEffect(() => {\n // Required for <StrictMode>, because we need to unset this token\n // when the hooks are re-run. It's an imperative effect that we need to manage.\n return () => {\n preventedMountTransition.current = false\n }\n }, [])\n\n return (\n <TagName\n ref={mergeRefs([elementRef, forwardedRef])}\n className={clsx(className, s.TransitionGroupChild)}\n data-transition-id={transitionId}\n style={style}\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 {children}\n </TagName>\n )\n}\n\nconst TransitionGroupChild = (props: TransitionGroupChildProps) => {\n // Don't spread these out of props - pass all props to inner child\n const { enterMountDelay, preventMountTransition } = props\n // Mount gating occurs when enterMountDelay exists, and isn't initial mount\n // Otherwise, this flag is a no-op and the TransitionChild mounts normally.\n const mountDelay = !preventMountTransition && enterMountDelay != null ? enterMountDelay : null\n const [mounted, setMounted] = useState(mountDelay == null)\n useTimeout(() => setMounted(true), mounted ? null : mountDelay)\n\n return mounted ? <TransitionGroupChildInner {...props} /> : null\n}\n\nexport type TransitionGroupProps = {\n /** Components controlled by TransitionGroup rendering /\n children: React.ReactNode\n /* Determines the tag used by wrapping elements /\n as?: \"div\" \| \"span\"\n /* Class passed to wrapping elements /\n className?: string\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?: number\n /* Determines the amount of time that the exit state is applied before unmounting /\n exitDuration?: number\n /\n Determines if children should have an enter transition applied during mounting of the TransitionGroup.\n * @default true\n /\n preventInitialTransition?: boolean\n /* Delay in MS to wait before mounting a child. `null` for no delay (default). /\n enterMountDelay?: number\n /* Render children changes immediately, bypassing transition timings /\n disableAnimations?: boolean\n /* Determines how new children are added to the children array /\n insertMethod?: \"append\" \| \"prepend\"\n /* Styles applied to wrapping elements /\n style?: CSSProperties\n /* Ref for the TransitionGroup */\n ref?: React.Ref<unknown>\n} & Partial<TransitionGroupChildCallbacks>\n\ntype RenderChild = {\n component: ReactElementWithKey\n shouldRender: boolean\n preventMountTransition?: boolean\n removeChild: () => void\n} & TransitionGroupChildCallbacks\n\nexport const TransitionGroup = (props: TransitionGroupProps) => {\n const {\n ref: forwardedRef,\n as: TagName = \"span\",\n children,\n className,\n transitionId,\n style,\n enterDuration = 0,\n exitDuration = 0,\n preventInitialTransition = true,\n enterMountDelay,\n insertMethod = \"append\",\n disableAnimations = getDisableAnimations(),\n } = props\n // Create stable, mutable references for all callbacks\n const onEnter = useChildCallback(props.onEnter ?? noop)\n const onEnterActive = useChildCallback(props.onEnterActive ?? noop)\n const onEnterComplete = useChildCallback(props.onEnterComplete ?? noop)\n const onExit = useChildCallback(props.onExit ?? noop)\n const onExitActive = useChildCallback(props.onExitActive ?? noop)\n const onExitComplete = useChildCallback(props.onExitComplete ?? noop)\n\n // Ensure all children are provided with keys.\n // Cannot reliably use Children.toArray() because `key` is processed: https://reactjs.org/docs/react-api.html#reactchildrentoarray\n Children.forEach(children, (child) => {\n // @ts-expect-error - We know `key` might not exist on certain types, that's why we're checking\n if (child && !child.key) {\n throw new Error(\"Child elements of <TransitionGroup /> must include a `key`\")\n }\n })\n\n const createDefaultRenderChildProps = useCallback(\n (child: ReactElementWithKey): RenderChild => ({\n component: child,\n shouldRender: true,\n removeChild: () => {\n setRenderChildren((currentRenderChildren) =>\n currentRenderChildren.filter((c) => child.key !== c.component.key),\n )\n },\n onEnter,\n onEnterActive,\n onEnterComplete,\n onExit,\n onExitActive,\n onExitComplete,\n }),\n [onEnter, onEnterActive, onEnterComplete, onExit, onExitActive, onExitComplete],\n )\n\n const [renderChildren, setRenderChildren] = useState<RenderChild[]>((): RenderChild[] => {\n return ChildrenWithKeys(children).map((child) => ({\n ...createDefaultRenderChildProps(child),\n // Lock this value to whatever the value was on initial render of the TransitionGroup.\n // It doesn't make sense to change this once it is mounted.\n preventMountTransition: preventInitialTransition,\n }))\n })\n\n useLayoutEffect(() => {\n setRenderChildren((currentRenderChildren): RenderChild[] => {\n const propChildrenArray = ChildrenWithKeys(children)\n return computeNextRenderChildren(\n propChildrenArray,\n currentRenderChildren,\n createDefaultRenderChildProps,\n insertMethod,\n )\n })\n }, [children, insertMethod, createDefaultRenderChildProps])\n\n // Prevent mistakes with forwardRef() by ensuring single child usage within the group.\n assertSingleChildWhenRef(\"TransitionGroup\", forwardedRef, Children.count(children))\n\n if (disableAnimations) {\n return (\n <>\n {Children.map(children, (child) => (\n <TagName\n // @ts-expect-error -- TS is not happy about this forwardedRef, but it's fine.\n ref={forwardedRef}\n className={className}\n style={style}\n data-transition-id={transitionId}\n >\n {child}\n </TagName>\n ))}\n </>\n )\n }\n\n return (\n <>\n {renderChildren.map(({ component, ...restProps }) => (\n <TransitionGroupChild\n key={component.key}\n {...restProps}\n as={TagName}\n className={className}\n transitionId={transitionId}\n enterDuration={enterDuration}\n exitDuration={exitDuration}\n enterMountDelay={enterMountDelay}\n style={style}\n ref={forwardedRef}\n >\n {component}\n </TransitionGroupChild>\n ))}\n </>\n )\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { isTest } from "../../lib/constants";
+import { isTest } from "../../lib/constants.js";
 // By default, all tests will treat <TransitionGroup> as `disableAnimations={true}`,
 // removing the need to be aware of misc. async animations happening across tests.
 // We could add support for things like `prefers-reduced-motion` in the future here as well.

package/dist/es/components/Transition/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
-export { Animate } from "./Animate";
-export { AnimateLayout } from "./AnimateLayout";
-export { AnimateLayoutGroup } from "./AnimateLayoutGroup";
-export { SlotTransitionGroup } from "./SlotTransitionGroup";
-export { TransitionGroup } from "./TransitionGroup";
+export { Animate } from "./Animate.js";
+export { AnimateLayout } from "./AnimateLayout.js";
+export { AnimateLayoutGroup } from "./AnimateLayoutGroup.js";
+export { SlotTransitionGroup } from "./SlotTransitionGroup.js";
+export { TransitionGroup } from "./TransitionGroup.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Transition/shared.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { Children, useCallback, useRef } from "react";
-import { isDev, isTest } from "../../lib/constants";
+import { isDev, isTest } from "../../lib/constants.js";
 export const NonNullChildren = (children) => Children.toArray(children).filter((child) => child !== null && child !== undefined);
 export const ChildrenWithKeys = (children, shouldThrow = false, componentName = "TransitionGroup") => {
     const validChildren = [];
@@ -21,15 +21,17 @@ export const useChildCallback = (cb) => {
     return useCallback((element) => ref.current(element), []);
 };
 export function computeNextRenderChildren(propChildrenArray, currentRenderChildren, createDefaultRenderChildProps, insertMethod) {
-    const propChildKeyMap = propChildrenArray.reduce((acc, child) => ({ ...acc, [child.key]: 1 }), {});
-    const currentRenderChildKeyMap = currentRenderChildren.reduce((acc, child) => ({ ...acc, [child.component.key]: 1 }), {});
+    // Sets, not plain objects: a key such as "constructor" must not match an
+    // inherited Object property
+    const propChildKeys = new Set(propChildrenArray.map((child) => child.key));
+    const currentRenderChildKeys = new Set(currentRenderChildren.map((child) => child.component.key));
     const newRenderChildren = propChildrenArray
-        .filter((propChild) => !currentRenderChildKeyMap[propChild.key])
+        .filter((propChild) => !currentRenderChildKeys.has(propChild.key))
         .map(createDefaultRenderChildProps);
     const updatedCurrentChildren = currentRenderChildren.map((childProps) => ({
         ...childProps,
         component: propChildrenArray.find(({ key }) => key === childProps.component.key) || childProps.component,
-        shouldRender: !!propChildKeyMap[childProps.component.key],
+        shouldRender: propChildKeys.has(childProps.component.key),
     }));
     return insertMethod === "append"
         ? updatedCurrentChildren.concat(newRenderChildren)

package/dist/es/components/Transition/shared.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/components/Transition/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAwDnD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAyB,EAAE,EAAE,CAC3D,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,CAAA;AAOrF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,QAAyB,EACzB,cAAuB,KAAK,EAC5B,gBAAwB,iBAAiB,EAClB,EAAE;IACzB,MAAM,aAAa,GAA0B,EAAE,CAAA;IAC/C,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;YACxE,2FAA2F;YAC3F,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC3B,CAAC;aAAM,IAAI,WAAW,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,sBAAsB,aAAa,4BAA4B,CAAC,CAAA;QAClF,CAAC;IACH,CAAC,CAAC,CAAA;IACF,OAAO,aAAa,CAAA;AACtB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;AAE5B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAgC,EAAE,EAAE;IACnE,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,CAAA;IACtB,GAAG,CAAC,OAAO,GAAG,EAAE,CAAA;IAChB,OAAO,WAAW,CAA+B,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;AACzF,CAAC,CAAA;AAID,MAAM,UAAU,yBAAyB,CAGvC,iBAAwC,EACxC,qBAAoC,EACpC,6BAA0E,EAC1E,YAA0B;IAE1B,MAAM,~~eAAe~~,GAAG,~~iBAAiB~~,CAAC,~~MAAM~~,~~CAC9C,~~CAAC,GAAG,~~EAAE,KAAK,EAAE,EAAE,~~CAAC,CAAC,EAAE,~~GAAG,GAAG,~~EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,~~EAAE,~~CAAC,~~EAAE,CAAC,EAC5C,EAAE,CACH,~~CAAA;~~IACD~~,MAAM,~~wBAAwB~~,GAAG,~~qBAAqB~~,CAAC,~~MAAM~~,~~CAC3D,~~CAAC,GAAG,~~EAAE,KAAK,EAAE,EAAE,~~CAAC,CAAC,EAAE,~~GAAG,GAAG,~~EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,~~EAAE,~~CAAC,~~EAAE,CAAC,EACtD,EAAE,CACH,~~CAAA;~~IAED~~,MAAM,iBAAiB,GAAkB,iBAAiB;SACvD,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,~~wBAAwB~~,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;~~SAC/D~~,GAAG,CAAC,6BAA6B,CAAC,CAAA;IAErC,MAAM,sBAAsB,GAAkB,qBAAqB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QACvF,GAAG,UAAU;QACb,SAAS,EACP,iBAAiB,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,SAAS;QAC/F,YAAY,EAAE,~~CAAC~~,CAAC,~~eAAe~~,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC;KAC1D,CAAC,CAAC,CAAA;IAEH,OAAO,YAAY,KAAK,QAAQ;QAC9B,CAAC,CAAC,sBAAsB,CAAC,MAAM,CAAC,iBAAiB,CAAC;QAClD,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAA;AACtD,CAAC;AAED,MAAM,UAAU,wBAAwB,CACtC,aAAqB,EACrB,GAAmC,EACnC,aAAqB;IAErB,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC,IAAI,GAAG,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;QAClD,MAAM,IAAI,KAAK,CAAC,oDAAoD,aAAa,KAAK,CAAC,CAAA;IACzF,CAAC;AACH,CAAC","sourcesContent":["import React, { Children, useCallback, useRef } from \"react\"\nimport { isDev, isTest } from \"../../lib/constants\"\n\nexport type TransitionDefinition = {\n opacity?: number\n /** The horizontal translation value in pixels /\n x?: number\n /* The horizontal vertical value in pixels /\n y?: number\n /* The opacity value ranging from 0 to 1. /\n scale?: number\n rotate?: number \| string\n skewX?: number \| string\n skewY?: number \| string\n blur?: number\n duration?: number\n delay?: number\n timingFunction?: string\n}\n\nexport type InitialTransitionDefinition = Omit<\n TransitionDefinition,\n \"duration\" \| \"delay\" \| \"timingFunction\"\n>\n\nexport type LayoutTransitionDefinition = {\n duration?: number\n delay?: number\n timingFunction?: string\n}\n\nexport type CallbackType =\n \| \"enter\"\n \| \"enter-active\"\n \| \"enter-complete\"\n \| \"exit\"\n \| \"exit-active\"\n \| \"exit-complete\"\n\n// Transition callbacks and types shared across implementations\nexport type TransitionGroupChildCallback = (element: HTMLDivElement) => void\n\nexport type TransitionGroupChildCallbacks = {\n /* Callback fired when an enter animation is staged (e.g., component mounted to the DOM) /\n onEnter: TransitionGroupChildCallback\n /* Callback fired when an enter animation starts /\n onEnterActive: TransitionGroupChildCallback\n /* Callback fired when an enter animation completes /\n onEnterComplete: TransitionGroupChildCallback\n /* Callback fired when an exit animation is staged /\n onExit: TransitionGroupChildCallback\n /* Callback fired when an exit animation starts /\n onExitActive: TransitionGroupChildCallback\n /* Callback fired when an exit animation completes (e.g., component unmounted from the DOM) */\n onExitComplete: TransitionGroupChildCallback\n}\n\nexport const NonNullChildren = (children: React.ReactNode) =>\n Children.toArray(children).filter((child) => child !== null && child !== undefined)\n\n// Shared keyed-children and transition helpers\nexport interface ReactElementWithKey extends React.ReactElement {\n key: string\n}\n\nexport const ChildrenWithKeys = (\n children: React.ReactNode,\n shouldThrow: boolean = false,\n componentName: string = \"TransitionGroup\",\n): ReactElementWithKey[] => {\n const validChildren: ReactElementWithKey[] = []\n Children.forEach(children, (child) => {\n if (child && typeof child === \"object\" && \"key\" in child && !!child.key) {\n // @ts-expect-error -- The above conditional is enough coercion that the component is valid\n validChildren.push(child)\n } else if (shouldThrow) {\n throw new Error(`Child elements of <${componentName} /> must include a \\`key\\``)\n }\n })\n return validChildren\n}\n\nexport const noop = () => {}\n\nexport const useChildCallback = (cb: (el: HTMLDivElement) => void) => {\n const ref = useRef(cb)\n ref.current = cb\n return useCallback<(el: HTMLDivElement) => void>((element) => ref.current(element), [])\n}\n\nexport type InsertMethod = \"append\" \| \"prepend\"\n\nexport function computeNextRenderChildren<\n RenderChild extends { component: ReactElementWithKey; shouldRender: boolean },\n>(\n propChildrenArray: ReactElementWithKey[],\n currentRenderChildren: RenderChild[],\n createDefaultRenderChildProps: (child: ReactElementWithKey) => RenderChild,\n insertMethod: InsertMethod,\n): RenderChild[] {\n const ~~propChildKeyMap~~ = propChildrenArray.~~reduce<Record<string, number>>~~(\n (~~acc,~~ child) => ~~({ ...acc, [~~child.key~~]: 1 }~~)~~,\n {},\n~~ )\n const ~~currentRenderChildKeyMap~~ = currentRenderChildren.~~reduce<Record<string, number>>~~(\n (~~acc,~~ child) => ~~({ ...acc, [~~child.component.key~~]: 1 }~~)~~,\n {},\n~~ )\n\n const newRenderChildren: RenderChild[] = propChildrenArray\n .filter((propChild) => !~~currentRenderChildKeyMap[~~propChild.key])\n .map(createDefaultRenderChildProps)\n\n const updatedCurrentChildren: RenderChild[] = currentRenderChildren.map((childProps) => ({\n ...childProps,\n component:\n propChildrenArray.find(({ key }) => key === childProps.component.key) \|\| childProps.component,\n shouldRender: ~~!!propChildKeyMap[~~childProps.component.key],\n }))\n\n return insertMethod === \"append\"\n ? updatedCurrentChildren.concat(newRenderChildren)\n : newRenderChildren.concat(updatedCurrentChildren)\n}\n\nexport function assertSingleChildWhenRef(\n componentName: string,\n ref: React.Ref<unknown> \| undefined,\n childrenCount: number,\n): void {\n if ((isTest \|\| isDev) && ref && childrenCount > 1) {\n throw new Error(`Cannot use forwardRef with multiple children in <${componentName} />`)\n }\n}\n"]}
1	+ {"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/components/Transition/shared.ts"],"names":[],"mappings":"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","sourcesContent":["import React, { Children, useCallback, useRef } from \"react\"\nimport { isDev, isTest } from \"../../lib/constants\"\n\nexport type TransitionDefinition = {\n opacity?: number\n /** The horizontal translation value in pixels /\n x?: number\n /* The horizontal vertical value in pixels /\n y?: number\n /* The opacity value ranging from 0 to 1. /\n scale?: number\n rotate?: number \| string\n skewX?: number \| string\n skewY?: number \| string\n blur?: number\n duration?: number\n delay?: number\n timingFunction?: string\n}\n\nexport type InitialTransitionDefinition = Omit<\n TransitionDefinition,\n \"duration\" \| \"delay\" \| \"timingFunction\"\n>\n\nexport type LayoutTransitionDefinition = {\n duration?: number\n delay?: number\n timingFunction?: string\n}\n\nexport type CallbackType =\n \| \"enter\"\n \| \"enter-active\"\n \| \"enter-complete\"\n \| \"exit\"\n \| \"exit-active\"\n \| \"exit-complete\"\n\n// Transition callbacks and types shared across implementations\nexport type TransitionGroupChildCallback = (element: HTMLDivElement) => void\n\nexport type TransitionGroupChildCallbacks = {\n /* Callback fired when an enter animation is staged (e.g., component mounted to the DOM) /\n onEnter: TransitionGroupChildCallback\n /* Callback fired when an enter animation starts /\n onEnterActive: TransitionGroupChildCallback\n /* Callback fired when an enter animation completes /\n onEnterComplete: TransitionGroupChildCallback\n /* Callback fired when an exit animation is staged /\n onExit: TransitionGroupChildCallback\n /* Callback fired when an exit animation starts /\n onExitActive: TransitionGroupChildCallback\n /* Callback fired when an exit animation completes (e.g., component unmounted from the DOM) */\n onExitComplete: TransitionGroupChildCallback\n}\n\nexport const NonNullChildren = (children: React.ReactNode) =>\n Children.toArray(children).filter((child) => child !== null && child !== undefined)\n\n// Shared keyed-children and transition helpers\nexport interface ReactElementWithKey extends React.ReactElement {\n key: string\n}\n\nexport const ChildrenWithKeys = (\n children: React.ReactNode,\n shouldThrow: boolean = false,\n componentName: string = \"TransitionGroup\",\n): ReactElementWithKey[] => {\n const validChildren: ReactElementWithKey[] = []\n Children.forEach(children, (child) => {\n if (child && typeof child === \"object\" && \"key\" in child && !!child.key) {\n // @ts-expect-error -- The above conditional is enough coercion that the component is valid\n validChildren.push(child)\n } else if (shouldThrow) {\n throw new Error(`Child elements of <${componentName} /> must include a \\`key\\``)\n }\n })\n return validChildren\n}\n\nexport const noop = () => {}\n\nexport const useChildCallback = (cb: (el: HTMLDivElement) => void) => {\n const ref = useRef(cb)\n ref.current = cb\n return useCallback<(el: HTMLDivElement) => void>((element) => ref.current(element), [])\n}\n\nexport type InsertMethod = \"append\" \| \"prepend\"\n\nexport function computeNextRenderChildren<\n RenderChild extends { component: ReactElementWithKey; shouldRender: boolean },\n>(\n propChildrenArray: ReactElementWithKey[],\n currentRenderChildren: RenderChild[],\n createDefaultRenderChildProps: (child: ReactElementWithKey) => RenderChild,\n insertMethod: InsertMethod,\n): RenderChild[] {\n // Sets, not plain objects: a key such as \"constructor\" must not match an\n // inherited Object property\n const propChildKeys = new Set(propChildrenArray.map((child) => child.key))\n const currentRenderChildKeys = new Set(currentRenderChildren.map((child) => child.component.key))\n\n const newRenderChildren: RenderChild[] = propChildrenArray\n .filter((propChild) => !currentRenderChildKeys.has(propChild.key))\n .map(createDefaultRenderChildProps)\n\n const updatedCurrentChildren: RenderChild[] = currentRenderChildren.map((childProps) => ({\n ...childProps,\n component:\n propChildrenArray.find(({ key }) => key === childProps.component.key) \|\| childProps.component,\n shouldRender: propChildKeys.has(childProps.component.key),\n }))\n\n return insertMethod === \"append\"\n ? updatedCurrentChildren.concat(newRenderChildren)\n : newRenderChildren.concat(updatedCurrentChildren)\n}\n\nexport function assertSingleChildWhenRef(\n componentName: string,\n ref: React.Ref<unknown> \| undefined,\n childrenCount: number,\n): void {\n if ((isTest \|\| isDev) && ref && childrenCount > 1) {\n throw new Error(`Cannot use forwardRef with multiple children in <${componentName} />`)\n }\n}\n"]}

package/dist/es/components/UIProvider/UIProvider.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import {} from "react";
-import { UIProviderContext } from "./UIProviderContext";
+import { UIProviderContext } from "./UIProviderContext.js";
 /**
  * Shared context for all Storybook components - wrap your app in this
  * provider to use Storybook components.

package/dist/es/components/UIProvider/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export { UIProvider } from "./UIProvider";
+export { UIProvider } from "./UIProvider.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/UIProvider/internal.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
 import { useContext } from "react";
-import { UIProviderContext } from "./UIProviderContext";
+import { UIProviderContext } from "./UIProviderContext.js";
 export function useLinkComponent() {
     const context = useContext(UIProviderContext);
     return context?.linkComponent ?? "a";

package/dist/es/hooks/useAnimatedScrollTo.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
-import { prefersReducedMotion } from "../lib/helpers";
+import { prefersReducedMotion } from "../lib/helpers.js";
 const clamp0 = (n) => Math.max(0, n);
 export const useAnimatedScrollTo = (scrollRef) => {
     const rafIdRef = useRef(null);

package/dist/es/hooks/useBreakpoints.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useMediaQuery } from "usehooks-ts";
-import { isDev } from "../lib/constants";
+import { isDev } from "../lib/constants.js";
 export const cache = new Map();
 let rootStyles = null;
 // Fallbacks mirror defaults from postcss.config.mjs
@@ -13,6 +13,10 @@ const FALLBACK_BREAKPOINTS = {
 };
 const resolveBreakpoint = (bp) => {
     if (!cache.has(bp)) {
+        // No document while server rendering: use the defaults, uncached
+        if (typeof document === "undefined") {
+            return FALLBACK_BREAKPOINTS[bp in FALLBACK_BREAKPOINTS ? bp : "lg"];
+        }
         rootStyles ||= getComputedStyle(document.documentElement);
         const value = parseInt(rootStyles.getPropertyValue(`--breakpoint-${bp}`).trim().replace("px", ""), 10);
         if (!value) {
@@ -30,5 +34,7 @@ const resolveBreakpoint = (bp) => {
     }
     return cache.get(bp);
 };
-export const useBreakpoint = (bp) => useMediaQuery(`(min-width: ${resolveBreakpoint(bp)}px)`);
+// False on the first render, on the server and the client alike (so hydration
+// matches), then the media query's value from a layout effect
+export const useBreakpoint = (bp) => useMediaQuery(`(min-width: ${resolveBreakpoint(bp)}px)`, { initializeWithValue: false });
 //# sourceMappingURL=useBreakpoints.js.map

package/dist/es/hooks/useBreakpoints.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBreakpoints.js","sourceRoot":"","sources":["../../../src/hooks/useBreakpoints.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAExC,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAkB,CAAA;AAC9C,IAAI,UAAU,GAA+B,IAAI,CAAA;AAEjD,oDAAoD;AACpD,MAAM,oBAAoB,GAAsC;IAC9D,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;CACH,CAAA;AAEV,MAAM,iBAAiB,GAAG,CAAC,EAAqB,EAAU,EAAE;IAC1D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;QACnB,UAAU,KAAK,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAA;QAEzD,MAAM,KAAK,GAAG,QAAQ,CACpB,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAC1E,EAAE,CACH,CAAA;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,IAAI,KAAK,EAAE,CAAC;gBACV,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CACV,gBAAgB,EAAE,qEAAqE;oBACrF,0FAA0F,CAC7F,CAAA;YACH,CAAC;YAED,iFAAiF;YACjF,MAAM,OAAO,GAAG,EAAE,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;YACtD,0EAA0E;YAC1E,OAAO,oBAAoB,CAAC,OAAO,CAAC,CAAA;QACtC,CAAC;QAED,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;IACtB,CAAC;IAED,OAAO,KAAK,CAAC,GAAG,CAAC,EAAE,CAAE,CAAA;AACvB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAqB,EAAW,EAAE,CAC9D,aAAa,CAAC,eAAe,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA","sourcesContent":["import { useMediaQuery } from \"usehooks-ts\"\nimport { isDev } from \"../lib/constants\"\n\nexport const cache = new Map<string, number>()\nlet rootStyles: CSSStyleDeclaration \| null = null\n\n// Fallbacks mirror defaults from postcss.config.mjs\nconst FALLBACK_BREAKPOINTS: Record<PlexUI.Breakpoint, number> = {\n \"xs\": 380,\n \"sm\": 576,\n \"md\": 768,\n \"lg\": 1024,\n \"xl\": 1280,\n \"2xl\": 1536,\n} as const\n\nconst resolveBreakpoint = (bp: PlexUI.Breakpoint): number => {\n if (!cache.has(bp)) {\n rootStyles \|\|= getComputedStyle(document.documentElement)\n\n const value = parseInt(\n rootStyles.getPropertyValue(`--breakpoint-${bp}`).trim().replace(\"px\", \"\"),\n 10,\n )\n\n if (!value) {\n if (isDev) {\n // eslint-disable-next-line no-console\n console.warn(\n `--breakpoint-${bp} is not defined in :root. Falling back to default breakpoint map.\\n` +\n \"This usually means your postcss breakpoints and PlexUI.Breakpoint types are out of sync.\",\n )\n }\n\n // If the breakpoint is not in the fallback map, use the default \"lg\" breakpoint.\n const validBp = bp in FALLBACK_BREAKPOINTS ? bp : \"lg\"\n // Return early and don't cache fallbacks in case CSS variables load later\n return FALLBACK_BREAKPOINTS[validBp]\n }\n\n cache.set(bp, value)\n }\n\n return cache.get(bp)!\n}\n\nexport const useBreakpoint = (bp: PlexUI.Breakpoint): boolean =>\n useMediaQuery(`(min-width: ${resolveBreakpoint(bp)}px)`)\n"]}
1	+ {"version":3,"file":"useBreakpoints.js","sourceRoot":"","sources":["../../../src/hooks/useBreakpoints.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAExC,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAkB,CAAA;AAC9C,IAAI,UAAU,GAA+B,IAAI,CAAA;AAEjD,oDAAoD;AACpD,MAAM,oBAAoB,GAAsC;IAC9D,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;CACH,CAAA;AAEV,MAAM,iBAAiB,GAAG,CAAC,EAAqB,EAAU,EAAE;IAC1D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;QACnB,iEAAiE;QACjE,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YACpC,OAAO,oBAAoB,CAAC,EAAE,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;QACrE,CAAC;QAED,UAAU,KAAK,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAA;QAEzD,MAAM,KAAK,GAAG,QAAQ,CACpB,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAC1E,EAAE,CACH,CAAA;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,IAAI,KAAK,EAAE,CAAC;gBACV,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CACV,gBAAgB,EAAE,qEAAqE;oBACrF,0FAA0F,CAC7F,CAAA;YACH,CAAC;YAED,iFAAiF;YACjF,MAAM,OAAO,GAAG,EAAE,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;YACtD,0EAA0E;YAC1E,OAAO,oBAAoB,CAAC,OAAO,CAAC,CAAA;QACtC,CAAC;QAED,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;IACtB,CAAC;IAED,OAAO,KAAK,CAAC,GAAG,CAAC,EAAE,CAAE,CAAA;AACvB,CAAC,CAAA;AAED,8EAA8E;AAC9E,8DAA8D;AAC9D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAqB,EAAW,EAAE,CAC9D,aAAa,CAAC,eAAe,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,CAAA","sourcesContent":["import { useMediaQuery } from \"usehooks-ts\"\nimport { isDev } from \"../lib/constants\"\n\nexport const cache = new Map<string, number>()\nlet rootStyles: CSSStyleDeclaration \| null = null\n\n// Fallbacks mirror defaults from postcss.config.mjs\nconst FALLBACK_BREAKPOINTS: Record<PlexUI.Breakpoint, number> = {\n \"xs\": 380,\n \"sm\": 576,\n \"md\": 768,\n \"lg\": 1024,\n \"xl\": 1280,\n \"2xl\": 1536,\n} as const\n\nconst resolveBreakpoint = (bp: PlexUI.Breakpoint): number => {\n if (!cache.has(bp)) {\n // No document while server rendering: use the defaults, uncached\n if (typeof document === \"undefined\") {\n return FALLBACK_BREAKPOINTS[bp in FALLBACK_BREAKPOINTS ? bp : \"lg\"]\n }\n\n rootStyles \|\|= getComputedStyle(document.documentElement)\n\n const value = parseInt(\n rootStyles.getPropertyValue(`--breakpoint-${bp}`).trim().replace(\"px\", \"\"),\n 10,\n )\n\n if (!value) {\n if (isDev) {\n // eslint-disable-next-line no-console\n console.warn(\n `--breakpoint-${bp} is not defined in :root. Falling back to default breakpoint map.\\n` +\n \"This usually means your postcss breakpoints and PlexUI.Breakpoint types are out of sync.\",\n )\n }\n\n // If the breakpoint is not in the fallback map, use the default \"lg\" breakpoint.\n const validBp = bp in FALLBACK_BREAKPOINTS ? bp : \"lg\"\n // Return early and don't cache fallbacks in case CSS variables load later\n return FALLBACK_BREAKPOINTS[validBp]\n }\n\n cache.set(bp, value)\n }\n\n return cache.get(bp)!\n}\n\n// False on the first render, on the server and the client alike (so hydration\n// matches), then the media query's value from a layout effect\nexport const useBreakpoint = (bp: PlexUI.Breakpoint): boolean =>\n useMediaQuery(`(min-width: ${resolveBreakpoint(bp)}px)`, { initializeWithValue: false })\n"]}

package/dist/es/hooks/useEscCloseStack.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useEffect, useId } from "react";
-import { useLatestValue } from "./useLatestValue";
+import { useLatestValue } from "./useLatestValue.js";
 let handlers = [];
 let listenerBound = false;
 const handleKeyDown = (evt) => {