npm - @react-md/core - Versions diffs - 1.0.0-next.13 → 1.0.0-next.14 - Mend

@react-md/core 1.0.0-next.13 → 1.0.0-next.14

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 (1114) hide show

package/dist/positioning/useFixedPositioning.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\nimport type { CSSProperties, Ref, RefCallback, RefObject } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport type { TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport type { CalculateFixedPositionOptions } from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/*\n @since 4.0.0\n /\nexport type FixedPositioningTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEnter\" \| \"onEntering\" \| \"onEntered\" \| \"onExited\"\n>;\n\n/\n This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\n \n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n /\nexport interface FixedPositioningTransitionOptions<E extends HTMLElement>\n extends FixedPositioningTransitionCallbacks {\n /* {@inheritDoc TransitionOptions.nodeRef} /\n nodeRef?: Ref<E>;\n}\n\n/\n @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n /\nexport interface FixedPositioningScrollData<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> {\n fixedElement: FixedElement;\n fixedToElement: FixedToElement;\n\n /\n Boolean if the {@link fixedToElement} is visible within the viewport.\n /\n visible: boolean;\n}\n\n/\n This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n \n @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @since 4.0.0\n /\nexport type TransitionScrollCallback<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> = (\n event: Event,\n data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/\n @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n /\nexport interface FixedPositioningOptions<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> extends FixedPositioningTransitionOptions<FixedElement>,\n CalculateFixedPositionOptions {\n /\n An optional style that will be merged with the fixed positioning required\n * styles.\n \n @see {@link FixedPositionStyle}\n /\n style?: CSSProperties;\n\n /\n A ref pointing to an element that another element should be fixed to. This\n * must be provided for the positioning to work.\n /\n fixedTo: RefObject<FixedToElement>;\n\n /\n An optional function that can be used to override positioning options if\n * some options require the element to be in the DOM for specific\n * calculations.\n /\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n\n /\n An optional function to call if the page resizes while the `FixedElement`\n * is visible.\n /\n onResize?: EventListener;\n /* @see {@link TransitionScrollCallback} /\n onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n}\n\n/\n @typeParam E - An HTMLElement type for the fixed element.\n * @since 4.0.0\n /\nexport interface FixedPositioningHookReturnValue<E extends HTMLElement> {\n /\n A ref that should be passed to a component for the fixed positioning\n * behavior to work correctly.\n \n This should really only be used if the {@link TransitionOptions} is not\n * being used.\n /\n ref: RefCallback<E>;\n\n /\n @see {@link FixedPositionStyle}\n /\n style: CSSProperties;\n\n /\n This should really only be used if the {@link transitionOptions} is not\n * being used.\n /\n callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n /\n A function that can be called to update the style for the fixed element.\n /\n updateStyle(): void;\n\n /* {@inheritDoc FixedPositioningTransitionOptions} /\n transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/\n This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n \n @example Simple Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useCSSTransition, useFixedPositioning } from \"@react-md/core\";\n \n function Example(): ReactElement {\n * const fixedTo = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo,\n * });\n * const { elementProps, rendered } = useCSSTransition({\n * ...transitionOptions,\n * transitionIn,\n * temporary: true,\n * timeout: {\n * enter: 200,\n * exit: 150,\n * },\n * classNames: {\n * enter: \"enter\",\n * enterActive: \"enter--active\",\n * exit: \"exit\",\n * exitActive: \"exit--active\",\n * },\n * });\n \n return (\n * <>\n * <Button\n * ref={fixedTo}\n * onClick={() => setTransitionIn(!transitionIn)}\n * >\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Fixed Temporary Element\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n \n @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport function useFixedPositioning<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>(\n options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningHookReturnValue<FixedElement> {\n const {\n style: propStyle,\n nodeRef,\n fixedTo,\n onEnter = noop,\n onEntering = noop,\n onEntered = noop,\n onExited = noop,\n anchor = BELOW_CENTER_ANCHOR,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions = noop,\n onScroll,\n onResize = noop,\n } = options;\n\n const [active, setActive] = useState(false);\n const [ref, refHandler] = useEnsuredRef(nodeRef);\n const optionsRef = useRef({\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } as const);\n useIsomorphicLayoutEffect(() => {\n optionsRef.current = {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n };\n }, [\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n ]);\n const [style, setStyle] = useState<CSSProperties \| undefined>(\n () =>\n getFixedPosition({\n container: ref.current,\n element: fixedTo.current,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n }).style\n );\n\n const updateStyle = useCallback(() => {\n const {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } = optionsRef.current;\n const element = ref.current;\n const container = fixedTo.current;\n const { style } = getFixedPosition({\n container,\n element,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n });\n\n setStyle(style);\n setActive(!!element && !element.hidden);\n\n // Only changing the initialX and initialY should cause the useEffect below\n // to trigger, which is why everything else is set in a ref.\n }, [initialX, initialY]);\n\n useEffect(() => {\n if (!active) {\n return;\n }\n\n const resizeCallback = (event: Event): void => {\n onResize(event);\n updateStyle();\n };\n const scrollCallback = (event: Event): void => {\n const fixedElement = ref.current;\n const fixedToElement = fixedTo.current;\n if (onScroll && fixedElement && fixedToElement) {\n onScroll(event, {\n visible: isWithinViewport({ fixedElement, fixedToElement }),\n fixedElement,\n fixedToElement,\n });\n }\n\n updateStyle();\n };\n\n const resizeHandler = delegateEvent(\"resize\", window, true);\n const scrollHandler = delegateEvent(\"scroll\", window, true, {\n passive: true,\n });\n resizeHandler.add(resizeCallback);\n scrollHandler.add(scrollCallback);\n return () => {\n resizeHandler.remove(resizeCallback);\n scrollHandler.remove(scrollCallback);\n };\n }, [active, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n onEnter(appearing) {\n onEnter(appearing);\n updateStyle();\n },\n onEntering(appearing) {\n onEntering(appearing);\n updateStyle();\n },\n onEntered(appearing) {\n onEntered(appearing);\n updateStyle();\n },\n onExited() {\n onExited();\n setActive(false);\n },\n };\n\n return {\n ref: refHandler,\n style: { ...style, ...propStyle },\n callbacks,\n updateStyle,\n transitionOptions: {\n ...callbacks,\n nodeRef: refHandler,\n },\n };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../../src/positioning/useFixedPositioning.ts"],"sourcesContent":["\"use client\";\nimport {\n useCallback,\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n type Ref,\n type RefCallback,\n type RefObject,\n} from \"react\";\nimport { delegateEvent } from \"../delegateEvent.js\";\nimport { type TransitionCallbacks } from \"../transition/types.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { BELOW_CENTER_ANCHOR } from \"./constants.js\";\nimport { getFixedPosition } from \"./getFixedPosition.js\";\nimport { type CalculateFixedPositionOptions } from \"./types.js\";\nimport { isWithinViewport } from \"./utils.js\";\n\nconst noop = (): undefined => undefined;\n\n/*\n @since 4.0.0\n /\nexport type FixedPositioningTransitionCallbacks = Pick<\n TransitionCallbacks,\n \"onEnter\" \| \"onEntering\" \| \"onEntered\" \| \"onExited\"\n>;\n\n/\n This options should be passed to the {@link useCSSTransition} for the styling\n * and positioning to work correctly.\n \n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n /\nexport interface FixedPositioningTransitionOptions<E extends HTMLElement>\n extends FixedPositioningTransitionCallbacks {\n /* {@inheritDoc TransitionOptions.nodeRef} /\n nodeRef?: Ref<E>;\n}\n\n/\n @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n /\nexport interface FixedPositioningScrollData<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> {\n fixedElement: FixedElement;\n fixedToElement: FixedToElement;\n\n /\n Boolean if the {@link fixedToElement} is visible within the viewport.\n /\n visible: boolean;\n}\n\n/\n This function is called when the page is scrolled while the fixed element is\n * visible. This is generally used to reposition the fixed element or hide it if\n * it is no longer visible within the viewport.\n \n @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @param event - The scroll event\n * @param data - The {@link FixedPositioningScrollData} that can be used for\n * custom scroll behavior.\n * @since 4.0.0\n /\nexport type TransitionScrollCallback<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> = (\n event: Event,\n data: Readonly<FixedPositioningScrollData<FixedToElement, FixedElement>>\n) => void;\n\n/\n @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n /\nexport interface FixedPositioningOptions<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n> extends FixedPositioningTransitionOptions<FixedElement>,\n CalculateFixedPositionOptions {\n /\n An optional style that will be merged with the fixed positioning required\n * styles.\n \n @see {@link FixedPositionStyle}\n /\n style?: CSSProperties;\n\n /\n A ref pointing to an element that another element should be fixed to. This\n * must be provided for the positioning to work.\n /\n fixedTo: RefObject<FixedToElement>;\n\n /\n An optional function that can be used to override positioning options if\n * some options require the element to be in the DOM for specific\n * calculations.\n /\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n\n /\n An optional function to call if the page resizes while the `FixedElement`\n * is visible.\n /\n onResize?: EventListener;\n /* @see {@link TransitionScrollCallback} /\n onScroll?: TransitionScrollCallback<FixedToElement, FixedElement>;\n}\n\n/\n @typeParam E - An HTMLElement type for the fixed element.\n * @since 4.0.0\n /\nexport interface FixedPositioningHookReturnValue<E extends HTMLElement> {\n /\n A ref that should be passed to a component for the fixed positioning\n * behavior to work correctly.\n \n This should really only be used if the {@link TransitionOptions} is not\n * being used.\n /\n ref: RefCallback<E>;\n\n /\n @see {@link FixedPositionStyle}\n /\n style: CSSProperties;\n\n /\n This should really only be used if the {@link transitionOptions} is not\n * being used.\n /\n callbacks: Readonly<Required<FixedPositioningTransitionCallbacks>>;\n\n /\n A function that can be called to update the style for the fixed element.\n /\n updateStyle(): void;\n\n /* {@inheritDoc FixedPositioningTransitionOptions} /\n transitionOptions: Readonly<Required<FixedPositioningTransitionOptions<E>>>;\n}\n\n/\n This hook is used to attach a temporary (fixed) element to another element\n * within the page. In other words, this is a way to have an element with\n * `position: fixed` as if it were `position: absolute` to a parent element that\n * had `position: relative`.\n \n @example Simple Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useCSSTransition, useFixedPositioning } from \"@react-md/core\";\n \n function Example(): ReactElement {\n * const fixedTo = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo,\n * });\n * const { elementProps, rendered } = useCSSTransition({\n * ...transitionOptions,\n * transitionIn,\n * temporary: true,\n * timeout: {\n * enter: 200,\n * exit: 150,\n * },\n * classNames: {\n * enter: \"enter\",\n * enterActive: \"enter--active\",\n * exit: \"exit\",\n * exitActive: \"exit--active\",\n * },\n * });\n \n return (\n * <>\n * <Button\n * ref={fixedTo}\n * onClick={() => setTransitionIn(!transitionIn)}\n * >\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Fixed Temporary Element\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n \n @typeParam FixedToElement - An HTMLElement type for the static element.\n * @typeParam FixedElement - An HTMLElement type for the fixed element.\n * @since 4.0.0\n */\nexport function useFixedPositioning<\n FixedToElement extends HTMLElement,\n FixedElement extends HTMLElement,\n>(\n options: FixedPositioningOptions<FixedToElement, FixedElement>\n): FixedPositioningHookReturnValue<FixedElement> {\n const {\n style: propStyle,\n nodeRef,\n fixedTo,\n onEnter = noop,\n onEntering = noop,\n onEntered = noop,\n onExited = noop,\n anchor = BELOW_CENTER_ANCHOR,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions = noop,\n onScroll,\n onResize = noop,\n } = options;\n\n const [active, setActive] = useState(false);\n const [ref, refHandler] = useEnsuredRef(nodeRef);\n const optionsRef = useRef({\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } as const);\n useIsomorphicLayoutEffect(() => {\n optionsRef.current = {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n };\n }, [\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n ]);\n const [style, setStyle] = useState<CSSProperties \| undefined>(\n () =>\n getFixedPosition({\n container: ref.current,\n element: fixedTo.current,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n }).style\n );\n\n const updateStyle = useCallback(() => {\n const {\n ref,\n fixedTo,\n anchor,\n disableSwapping,\n disableVHBounds,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n getFixedPositionOptions,\n } = optionsRef.current;\n const element = ref.current;\n const container = fixedTo.current;\n const { style } = getFixedPosition({\n container,\n element,\n anchor,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n preventOverlap,\n transformOrigin,\n vhMargin,\n vwMargin,\n width,\n xMargin,\n yMargin,\n ...getFixedPositionOptions(),\n });\n\n setStyle(style);\n setActive(!!element && !element.hidden);\n\n // Only changing the initialX and initialY should cause the useEffect below\n // to trigger, which is why everything else is set in a ref.\n }, [initialX, initialY]);\n\n useEffect(() => {\n if (!active) {\n return;\n }\n\n const resizeCallback = (event: Event): void => {\n onResize(event);\n updateStyle();\n };\n const scrollCallback = (event: Event): void => {\n const fixedElement = ref.current;\n const fixedToElement = fixedTo.current;\n if (onScroll && fixedElement && fixedToElement) {\n onScroll(event, {\n visible: isWithinViewport({ fixedElement, fixedToElement }),\n fixedElement,\n fixedToElement,\n });\n }\n\n updateStyle();\n };\n\n const resizeHandler = delegateEvent(\"resize\", window, true);\n const scrollHandler = delegateEvent(\"scroll\", window, true, {\n passive: true,\n });\n resizeHandler.add(resizeCallback);\n scrollHandler.add(scrollCallback);\n return () => {\n resizeHandler.remove(resizeCallback);\n scrollHandler.remove(scrollCallback);\n };\n }, [active, fixedTo, onResize, onScroll, ref, updateStyle]);\n\n const callbacks: Required<FixedPositioningTransitionCallbacks> = {\n onEnter(appearing) {\n onEnter(appearing);\n updateStyle();\n },\n onEntering(appearing) {\n onEntering(appearing);\n updateStyle();\n },\n onEntered(appearing) {\n onEntered(appearing);\n updateStyle();\n },\n onExited() {\n onExited();\n setActive(false);\n },\n };\n\n return {\n ref: refHandler,\n style: { ...style, ...propStyle },\n callbacks,\n updateStyle,\n transitionOptions: {\n ...callbacks,\n nodeRef: refHandler,\n },\n };\n}\n"],"names":["useCallback","useEffect","useRef","useState","delegateEvent","useEnsuredRef","useIsomorphicLayoutEffect","BELOW_CENTER_ANCHOR","getFixedPosition","isWithinViewport","noop","undefined","useFixedPositioning","options","style","propStyle","nodeRef","fixedTo","onEnter","onEntering","onEntered","onExited","anchor","disableSwapping","disableVHBounds","initialX","initialY","preventOverlap","transformOrigin","vhMargin","vwMargin","width","xMargin","yMargin","getFixedPositionOptions","onScroll","onResize","active","setActive","ref","refHandler","optionsRef","current","setStyle","container","element","updateStyle","hidden","resizeCallback","event","scrollCallback","fixedElement","fixedToElement","visible","resizeHandler","window","scrollHandler","passive","add","remove","callbacks","appearing","transitionOptions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/positioning/utils.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { PositionAnchor } from "./types.js";
+import { type PositionAnchor } from "./types.js";
 /** @internal */
 export interface XCoordConfig {
     xMargin: number;

package/dist/positioning/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import type { PositionAnchor } from \"./types.js\";\n\n/** @internal /\nexport interface XCoordConfig {\n xMargin: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/* @internal /\nexport interface YCoordConfig {\n yMargin: number;\n elHeight: number;\n initialY?: number;\n containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n \n @internal\n /\nexport function getLeftCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n \n @internal\n /\nexport function getInnerLeftCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) + xMargin;\n}\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n \n Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n \n @internal\n /\nexport function getCenterXCoord({\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n const containerCenter = containerRect.width / 2;\n const elementCenter = elWidth / 2;\n return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n \n @internal\n /\nexport function getInnerRightCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (\n (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n );\n}\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n \n @internal\n /\nexport function getRightCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/\n Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n \n @internal\n /\nexport function getAboveCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/\n Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n \n @internal\n /\nexport function getTopCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) + yMargin;\n}\n\n/\n Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n \n Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n \n @internal\n /\nexport function getCenterYCoord({\n yMargin,\n elHeight,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n const containerCenter = containerRect.height / 2;\n const elementCenter = elHeight / 2;\n return (\n (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n );\n}\n\n/\n Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n \n @internal\n /\nexport function getBottomCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (\n (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n );\n}\n\n/\n Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n \n @internal\n /\nexport function getBelowCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/\n @since 6.0.0\n * @internal\n /\nexport interface TransformOriginOptions extends PositionAnchor {\n transformOriginY?: number;\n}\n\n/\n This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n \n @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n /\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n const { transformOriginY: yPosition } = options;\n\n let x = \"0\";\n switch (options.x) {\n case \"right\":\n case \"inner-left\":\n x = \"0\";\n break;\n case \"center\":\n x = \"50%\";\n break;\n case \"left\":\n case \"inner-right\":\n x = \"100%\";\n break;\n default:\n x = \"0\";\n }\n\n let y = \"0\";\n if (typeof yPosition === \"number\") {\n y = `${yPosition}px`;\n } else {\n switch (options.y) {\n case \"above\":\n case \"bottom\":\n y = \"100%\";\n break;\n case \"center\":\n y = \"50%\";\n break;\n case \"below\":\n case \"top\":\n y = \"0\";\n break;\n default:\n y = \"0\";\n }\n }\n\n return `${x} ${y}`;\n}\n\n/\n Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n * selector for the nested item.\n \n NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n \n @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n /\nexport function findSizingContainer(\n el: HTMLElement \| null\n): HTMLElement \| null {\n if (!el) {\n return null;\n }\n\n if (/(tree\|list)item/.test(el.getAttribute(\"role\") \|\| \"\")) {\n const content = el.querySelector(\n \".rmd-tree-item__content, .rmd-item-text\"\n ) as HTMLElement;\n if (content) {\n return content;\n }\n } else if (el.getAttribute(\"type\") === \"file\") {\n const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n if (label) {\n return label;\n }\n }\n\n const data = el.getAttribute(\"data-sizing-selector\");\n if (data) {\n const content = el.querySelector(data) as HTMLElement;\n if (content) {\n return content;\n }\n\n if (process.env.NODE_ENV !== \"production\") {\n throw new Error(\n \"Unable to find a child element using the `data-sizing-selector`\"\n );\n }\n }\n\n return el;\n}\n\n/\n This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n \n @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n /\nexport function getElementRect(element: HTMLElement): DOMRect {\n const cloned = element.cloneNode(true) as HTMLElement;\n // remove the id so there won't be two elements with the same id on the page\n cloned.removeAttribute(\"id\");\n\n // remove the role just in case the role would alert screen readers once added\n // to the dom\n cloned.removeAttribute(\"role\");\n\n // ensure the cloned node won't shift the page or be visible\n cloned.style.position = \"fixed\";\n cloned.style.visibility = \"hidden\";\n\n // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n // the height and width if the element is able to line wrap.\n cloned.style.left = \"\";\n cloned.style.top = \"\";\n cloned.style.right = \"\";\n cloned.style.bottom = \"\";\n\n // reset transforms so that custom animations don't mess with the sizing\n cloned.style.transform = \"none\";\n\n const parent = element.parentElement \|\| document.body;\n parent.appendChild(cloned);\n\n const rect = cloned.getBoundingClientRect();\n parent.removeChild(cloned);\n\n return rect;\n}\n\n/\n @since 4.0.0\n * @internal\n /\ninterface IsWithinViewportOptions {\n fixedElement: HTMLElement;\n fixedToElement: HTMLElement;\n}\n\n/\n @since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n const { fixedElement, fixedToElement } = options;\n const fixedElementRect = fixedElement.getBoundingClientRect();\n const fixedToElementRect = fixedToElement.getBoundingClientRect();\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","appendChild","rect","getBoundingClientRect","removeChild","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import { type PositionAnchor } from \"./types.js\";\n\n/** @internal /\nexport interface XCoordConfig {\n xMargin: number;\n elWidth: number;\n initialX?: number;\n containerRect: DOMRect;\n}\n\n/* @internal /\nexport interface YCoordConfig {\n yMargin: number;\n elHeight: number;\n initialY?: number;\n containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n \n @internal\n /\nexport function getLeftCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n \n @internal\n /\nexport function getInnerLeftCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left) + xMargin;\n}\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n \n Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n \n @internal\n /\nexport function getCenterXCoord({\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n const containerCenter = containerRect.width / 2;\n const elementCenter = elWidth / 2;\n return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n \n @internal\n /\nexport function getInnerRightCoord({\n xMargin,\n elWidth,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (\n (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n );\n}\n\n/\n Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n \n @internal\n /\nexport function getRightCoord({\n xMargin,\n initialX,\n containerRect,\n}: XCoordConfig): Left {\n return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/\n Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n \n @internal\n /\nexport function getAboveCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/\n Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n \n @internal\n /\nexport function getTopCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top) + yMargin;\n}\n\n/\n Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n \n Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n \n @internal\n /\nexport function getCenterYCoord({\n yMargin,\n elHeight,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n const containerCenter = containerRect.height / 2;\n const elementCenter = elHeight / 2;\n return (\n (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n );\n}\n\n/\n Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n \n @internal\n /\nexport function getBottomCoord({\n yMargin,\n initialY,\n elHeight,\n containerRect,\n}: YCoordConfig): Top {\n return (\n (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n );\n}\n\n/\n Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n \n @internal\n /\nexport function getBelowCoord({\n yMargin,\n initialY,\n containerRect,\n}: YCoordConfig): Top {\n return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/\n @since 6.0.0\n * @internal\n /\nexport interface TransformOriginOptions extends PositionAnchor {\n transformOriginY?: number;\n}\n\n/\n This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n \n @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n /\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n const { transformOriginY: yPosition } = options;\n\n let x = \"0\";\n switch (options.x) {\n case \"right\":\n case \"inner-left\":\n x = \"0\";\n break;\n case \"center\":\n x = \"50%\";\n break;\n case \"left\":\n case \"inner-right\":\n x = \"100%\";\n break;\n default:\n x = \"0\";\n }\n\n let y = \"0\";\n if (typeof yPosition === \"number\") {\n y = `${yPosition}px`;\n } else {\n switch (options.y) {\n case \"above\":\n case \"bottom\":\n y = \"100%\";\n break;\n case \"center\":\n y = \"50%\";\n break;\n case \"below\":\n case \"top\":\n y = \"0\";\n break;\n default:\n y = \"0\";\n }\n }\n\n return `${x} ${y}`;\n}\n\n/\n Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n * selector for the nested item.\n \n NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n \n @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n /\nexport function findSizingContainer(\n el: HTMLElement \| null\n): HTMLElement \| null {\n if (!el) {\n return null;\n }\n\n if (/(tree\|list)item/.test(el.getAttribute(\"role\") \|\| \"\")) {\n const content = el.querySelector(\n \".rmd-tree-item__content, .rmd-item-text\"\n ) as HTMLElement;\n if (content) {\n return content;\n }\n } else if (el.getAttribute(\"type\") === \"file\") {\n const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n if (label) {\n return label;\n }\n }\n\n const data = el.getAttribute(\"data-sizing-selector\");\n if (data) {\n const content = el.querySelector(data) as HTMLElement;\n if (content) {\n return content;\n }\n\n if (process.env.NODE_ENV !== \"production\") {\n throw new Error(\n \"Unable to find a child element using the `data-sizing-selector`\"\n );\n }\n }\n\n return el;\n}\n\n/\n This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n \n @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n /\nexport function getElementRect(element: HTMLElement): DOMRect {\n const cloned = element.cloneNode(true) as HTMLElement;\n // remove the id so there won't be two elements with the same id on the page\n cloned.removeAttribute(\"id\");\n\n // remove the role just in case the role would alert screen readers once added\n // to the dom\n cloned.removeAttribute(\"role\");\n\n // ensure the cloned node won't shift the page or be visible\n cloned.style.position = \"fixed\";\n cloned.style.visibility = \"hidden\";\n\n // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n // the height and width if the element is able to line wrap.\n cloned.style.left = \"\";\n cloned.style.top = \"\";\n cloned.style.right = \"\";\n cloned.style.bottom = \"\";\n\n // reset transforms so that custom animations don't mess with the sizing\n cloned.style.transform = \"none\";\n\n const parent = element.parentElement \|\| document.body;\n parent.appendChild(cloned);\n\n const rect = cloned.getBoundingClientRect();\n parent.removeChild(cloned);\n\n return rect;\n}\n\n/\n @since 4.0.0\n * @internal\n /\ninterface IsWithinViewportOptions {\n fixedElement: HTMLElement;\n fixedToElement: HTMLElement;\n}\n\n/\n @since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n const { fixedElement, fixedToElement } = options;\n const fixedElementRect = fixedElement.getBoundingClientRect();\n const fixedToElementRect = fixedToElement.getBoundingClientRect();\n const vh = window.innerHeight;\n const vw = window.innerWidth;\n const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","appendChild","rect","getBoundingClientRect","removeChild","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/responsive-item/_responsive-item.scss CHANGED Viewed

@@ -126,7 +126,10 @@ $disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
           @each $suffix, $ratio-list in $aspect-ratios {
             &--#{$suffix} {
-              @include aspect-ratio(nth($ratio-list, 1), nth($ratio-list, 2));
+              @include aspect-ratio(
+                list.nth($ratio-list, 1),
+                list.nth($ratio-list, 2)
+              );
             }
           }
         }

package/dist/theme/_theme.scss CHANGED Viewed

@@ -1,8 +1,8 @@
 @use "sass:color";
 @use "sass:list";
 @use "sass:map";
-@use "sass:string";
 @use "sass:meta";
+@use "sass:string";
 @use "colors";
 @use "a11y";
@@ -456,7 +456,7 @@ $theme-variables: (
         "not use material design colors, set #{$fallback} instead to get a correct color for the provided swatch: " +
         "#{$swatch}.";
       @error $error-msg;
-    } @else if type-of($fallback-color) != "color" {
+    } @else if meta.type-of($fallback-color) != "color" {
       @error "Invalid fallback color: '#{$fallback-color}'. This must be a valid color.";
     } @else {
       @return $fallback-color;
@@ -482,7 +482,7 @@ $theme-variables: (
   } @else {
     $index: 1;
     $found: false;
-    @while not $found and $index < length(colors.$available-color-names) {
+    @while not $found and $index < list.length(colors.$available-color-names) {
       $suffix: list.nth(colors.$available-color-names, $index);
       $suffix-index: string.index($current-color-name, $suffix);
       @if $suffix-index {
@@ -500,7 +500,7 @@ $theme-variables: (
   $color-name: "#{$current-color-name}#{if($accent, "-a", "")}-#{$swatch}";
-  @return map-get(colors.$color-map, $color-name);
+  @return map.get(colors.$color-map, $color-name);
 }
 @mixin default-system-theme {

package/dist/transition/CrossFade.js CHANGED Viewed

@@ -68,13 +68,12 @@ import { useCrossFadeTransition } from "./useCrossFadeTransition.js";
  * @since 4.0.0 Updated for the new CSS Transition API and no longer supports
  * wrapping children in a `<div>`.
  */ export function CrossFade(props) {
-    const { appear = true, transitionIn = appear, children, className, ...options } = props;
+    const { appear = true, children, className, ...options } = props;
     const child = Children.only(children);
     const { elementProps, rendered } = useCrossFadeTransition({
         ...options,
         appear,
-        className: cnb(child.props.className, className),
-        transitionIn
+        className: cnb(child.props.className, className)
     });
     return /*#__PURE__*/ _jsx(_Fragment, {
         children: rendered && /*#__PURE__*/ cloneElement(children, elementProps)

package/dist/transition/CrossFade.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/transition/CrossFade.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n useCrossFadeTransition,\n type CrossFadeTransitionHookOptions,\n} from \"./useCrossFadeTransition.js\";\n\n/*\n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 2.0.0\n * @since 4.0.0 Updated for the new CSS Transition API\n /\nexport interface CrossFadeProps<E extends HTMLElement>\n extends CrossFadeTransitionHookOptions<E>,\n CSSTransitionComponentImplementation<E> {\n /\n Unlike the {@link useCrossFadeTransition}, the `appear` value is defaulted\n * to `true` so that the transition can occur when the `key` changes.\n \n @see {@link CrossFadeTransitionHookOptions.appear}\n * @defaultValue `true`\n /\n appear?: boolean;\n}\n\n/\n Client Component\n \n This is a component implementation of the {@link useCrossFadeTransition} hook\n * that implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n \n @example Appear transitions with a React `key`\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { CrossFade } from \"@react-md/transition\";\n \n import Page1 from \"./Page1\";\n * import Page2 from \"./Page2\";\n * import Page3 from \"./Page3\";\n \n function Example(): ReactElement {\n * const [page, setPage] = useState(0):\n \n let content: ReactNode;\n * switch (page) {\n * case 0:\n * content = <Page1 />\n * break:\n * case 1:\n * content = <Page2 />\n * break;\n * case 2:\n * content = <Page3 />\n * break;\n * default:\n * content = null;\n * }\n \n return (\n * <>\n * <Button\n * onClick={() => {\n * setPage(prevPage => {\n * const nextPage = prevPage + 1;\n * if (nextPage > 2) {\n * return 0;\n * }\n \n return nextPage;\n * })\n * }}\n * >\n * Change Page\n * </Button>\n * <CrossFade key={page}>\n * <div>{content}</div>\n * </CrossFade>\n * </>\n * );\n * }\n * ```\n \n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 2.0.0\n * @since 4.0.0 Updated for the new CSS Transition API and no longer supports\n * wrapping children in a `<div>`.\n */\nexport function CrossFade<E extends HTMLElement>(\n props: CrossFadeProps<E>\n): ReactElement {\n const {\n appear = true~~,\n transitionIn~~ = ~~appear,\n children,\n~~ className~~,\n~~ ...options\n } = props;\n\n const child = Children.only(children);\n const { elementProps, rendered } = useCrossFadeTransition({\n ...options,\n appear,\n className: cnb(child.props.className, className),\n ~~transitionIn,\n~~ });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCrossFadeTransition","CrossFade","props","appear","~~transitionIn","~~children","className","options","child","only","elementProps","rendered"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAElE,SACEC,sBAAsB,QAEjB,8BAA8B;AAqBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,UACdC,KAAwB;IAExB,MAAM,~~EACJC~~,SAAS,IAAI,~~EACbC~~,~~eAAeD,MAAM,EACrBE,~~QAAQ,~~EACRC~~,SAAS,~~EACT~~,GAAGC,~~SACJ~~,~~GAAGL~~;~~IAEJ~~,~~MAAMM~~,~~QAAQV~~,~~SAASW~~,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,~~GAAGX~~,uBAAuB;QACxD,~~GAAGO~~,OAAO;~~QACVJ~~;~~QACAG~~,~~WAAWT~~,~~IAAIW~~,~~MAAMN~~,KAAK,~~CAACI~~,SAAS,EAAEA;~~QACtCF~~;~~IACF;~~IAEA,qBAAO;~~kBAAGO~~,~~0BAAYZ~~,~~aAAaM~~,UAAUK;;AAC/C"}
1	+ {"version":3,"sources":["../../src/transition/CrossFade.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { Children, cloneElement, type ReactElement } from \"react\";\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n useCrossFadeTransition,\n type CrossFadeTransitionHookOptions,\n} from \"./useCrossFadeTransition.js\";\n\n/*\n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 2.0.0\n * @since 4.0.0 Updated for the new CSS Transition API\n /\nexport interface CrossFadeProps<E extends HTMLElement>\n extends CrossFadeTransitionHookOptions<E>,\n CSSTransitionComponentImplementation<E> {\n /\n Unlike the {@link useCrossFadeTransition}, the `appear` value is defaulted\n * to `true` so that the transition can occur when the `key` changes.\n \n @see {@link CrossFadeTransitionHookOptions.appear}\n * @defaultValue `true`\n /\n appear?: boolean;\n}\n\n/\n Client Component\n \n This is a component implementation of the {@link useCrossFadeTransition} hook\n * that implements the `temporary` behavior. Since this component uses the\n * `React.cloneElement` to inject the `ref` and `className` into the `children`,\n * it is recommended to use the hook instead.\n \n @example Appear transitions with a React `key`\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { CrossFade } from \"@react-md/transition\";\n \n import Page1 from \"./Page1\";\n * import Page2 from \"./Page2\";\n * import Page3 from \"./Page3\";\n \n function Example(): ReactElement {\n * const [page, setPage] = useState(0):\n \n let content: ReactNode;\n * switch (page) {\n * case 0:\n * content = <Page1 />\n * break:\n * case 1:\n * content = <Page2 />\n * break;\n * case 2:\n * content = <Page3 />\n * break;\n * default:\n * content = null;\n * }\n \n return (\n * <>\n * <Button\n * onClick={() => {\n * setPage(prevPage => {\n * const nextPage = prevPage + 1;\n * if (nextPage > 2) {\n * return 0;\n * }\n \n return nextPage;\n * })\n * }}\n * >\n * Change Page\n * </Button>\n * <CrossFade key={page}>\n * <div>{content}</div>\n * </CrossFade>\n * </>\n * );\n * }\n * ```\n \n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 2.0.0\n * @since 4.0.0 Updated for the new CSS Transition API and no longer supports\n * wrapping children in a `<div>`.\n */\nexport function CrossFade<E extends HTMLElement>(\n props: CrossFadeProps<E>\n): ReactElement {\n const { appear = true, children, className, ...options } = props;\n\n const child = Children.only(children);\n const { elementProps, rendered } = useCrossFadeTransition({\n ...options,\n appear,\n className: cnb(child.props.className, className),\n });\n\n return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCrossFadeTransition","CrossFade","props","appear","children","className","options","child","only","elementProps","rendered"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAEC,YAAY,QAA2B,QAAQ;AAElE,SACEC,sBAAsB,QAEjB,8BAA8B;AAqBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,UACdC,KAAwB;IAExB,MAAM,EAAEC,SAAS,IAAI,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGJ;IAE3D,MAAMK,QAAQT,SAASU,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGV,uBAAuB;QACxD,GAAGM,OAAO;QACVH;QACAE,WAAWR,IAAIU,MAAML,KAAK,CAACG,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYX,aAAaK,UAAUK;;AAC/C"}

package/dist/transition/useCrossFadeTransition.js CHANGED Viewed

@@ -67,9 +67,10 @@ import { useCSSTransition } from "./useCSSTransition.js";
  * transition.
  * @since 4.0.0
  */ export function useCrossFadeTransition(options = {}) {
-    const { transitionIn = true, timeout = CROSS_FADE_TIMEOUT, classNames = CROSS_FADE_CLASSNAMES, ...cssOptions } = options;
+    const { appear = false, transitionIn = true, timeout = CROSS_FADE_TIMEOUT, classNames = CROSS_FADE_CLASSNAMES, ...cssOptions } = options;
     return useCSSTransition({
         ...cssOptions,
+        appear,
         timeout,
         classNames,
         transitionIn

package/dist/transition/useCrossFadeTransition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/transition/useCrossFadeTransition.ts"],"sourcesContent":["\"use client\";\nimport type {\n CSSTransitionClassNames,\n CSSTransitionClassNamesObject,\n CSSTransitionHookReturnValue,\n PreconfiguredCSSTransitionInDefaultedOptions,\n TransitionTimeout,\n TransitionTimeoutObject,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/*\n The default cross fade transition classes to use.\n \n @since 2.0.0\n /\nexport const CROSS_FADE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n appear: \"rmd-cross-fade\",\n appearActive: \"rmd-cross-fade--active\",\n enter: \"rmd-cross-fade\",\n enterActive: \"rmd-cross-fade--active\",\n};\n\n/\n The default cross fade transition timeout.\n \n @since 2.0.0\n /\nexport const CROSS_FADE_TIMEOUT: Readonly<TransitionTimeoutObject> = {\n appear: 300,\n enter: 300,\n exit: 0,\n};\n\n/\n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n /\nexport interface CrossFadeTransitionHookOptions<E extends HTMLElement>\n extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n /\n @see {@link TransitionTimeout}\n * @see {@link CROSS_FADE_TIMEOUT}\n * @defaultValue `CROSS_FADE_TIMEOUT`\n /\n timeout?: TransitionTimeout;\n\n /\n @see {@link CSSTransitionClassNames}\n * @see {@link CROSS_FADE_CLASSNAMES}\n * @defaultValue `CROSS_FADE_CLASSNAMES`\n /\n classNames?: CSSTransitionClassNames;\n\n /\n @see {@link PreconfiguredCSSTransitionInDefaultedOptions.transitionIn}\n * @defaultValue `true`\n /\n transitionIn?: boolean;\n}\n\n/\n This hook is used to create a \"cross fade\" transition -- a transition that\n * gradually increases the opacity and transforms the element vertically a short\n * distance. This is generally used for full page transitions when a route\n * changes.\n \n @example New Page Transition with the Layout component\n * ```tsx\n * import { ReactElement, ReactNode, useLayoutEffect } from \"react\";\n * import { useLocation } from \"react-router-dom\":\n * import { Layout, useCrossFadeTransition, useLayoutNavigation } from \"@react-md/core\";\n \n import { navItems } from \"./navItems\";\n \n interface ExampleProps {\n * children: ReactNode;\n * }\n \n function Example({ children }: ExampleProps): ReactElement {\n * const { pathname } = useLocation();\n * const { elementProps, transitionTo } = useCrossFadeTransition();\n \n const prevPathname = useRef(pathname);\n * useLayoutEffect(() => {\n * if (prevPathname.current === pathname) {\n * return\n * }\n \n prevPathname.current = pathname;\n * transitionTo('enter');\n * }, [pathname, transitionTo])\n \n return (\n * <Layout\n * {...useLayoutNavigation(navItems, pathname)}\n * appBarTitle=\"My App\"\n * mainProps={elementProps}\n * >\n * {children}\n * </Layout>\n * );\n * }\n * ```\n \n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useCrossFadeTransition<E extends HTMLElement>(\n options: CrossFadeTransitionHookOptions<E> = {}\n): CSSTransitionHookReturnValue<E> {\n const {\n transitionIn = true,\n timeout = CROSS_FADE_TIMEOUT,\n classNames = CROSS_FADE_CLASSNAMES,\n ...cssOptions\n } = options;\n\n return useCSSTransition({\n ...cssOptions,\n timeout,\n classNames,\n transitionIn,\n });\n}\n"],"names":["useCSSTransition","CROSS_FADE_CLASSNAMES","appear","appearActive","enter","enterActive","CROSS_FADE_TIMEOUT","exit","useCrossFadeTransition","options","transitionIn","timeout","classNames","cssOptions"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA;AASA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;CAIC,GACD,OAAO,MAAMC,wBAAiE;IAC5EC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;AACf,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAMC,qBAAwD;IACnEJ,QAAQ;IACRE,OAAO;IACPG,MAAM;AACR,EAAE;AA8BF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,uBACdC,UAA6C,CAAC,CAAC;IAE/C,MAAM,~~EACJC~~,eAAe,IAAI,EACnBC,UAAUL,kBAAkB,EAC5BM,aAAaX,qBAAqB,EAClC,GAAGY,YACJ,GAAGJ;IAEJ,OAAOT,iBAAiB;QACtB,GAAGa,UAAU;~~QACbF~~;QACAC;QACAF;IACF;AACF"}
1	+ {"version":3,"sources":["../../src/transition/useCrossFadeTransition.ts"],"sourcesContent":["\"use client\";\nimport type {\n CSSTransitionClassNames,\n CSSTransitionClassNamesObject,\n CSSTransitionHookReturnValue,\n PreconfiguredCSSTransitionInDefaultedOptions,\n TransitionTimeout,\n TransitionTimeoutObject,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/*\n The default cross fade transition classes to use.\n \n @since 2.0.0\n /\nexport const CROSS_FADE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n appear: \"rmd-cross-fade\",\n appearActive: \"rmd-cross-fade--active\",\n enter: \"rmd-cross-fade\",\n enterActive: \"rmd-cross-fade--active\",\n};\n\n/\n The default cross fade transition timeout.\n \n @since 2.0.0\n /\nexport const CROSS_FADE_TIMEOUT: Readonly<TransitionTimeoutObject> = {\n appear: 300,\n enter: 300,\n exit: 0,\n};\n\n/\n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n /\nexport interface CrossFadeTransitionHookOptions<E extends HTMLElement>\n extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n /\n @see {@link TransitionTimeout}\n * @see {@link CROSS_FADE_TIMEOUT}\n * @defaultValue `CROSS_FADE_TIMEOUT`\n /\n timeout?: TransitionTimeout;\n\n /\n @see {@link CSSTransitionClassNames}\n * @see {@link CROSS_FADE_CLASSNAMES}\n * @defaultValue `CROSS_FADE_CLASSNAMES`\n /\n classNames?: CSSTransitionClassNames;\n\n /\n @see {@link PreconfiguredCSSTransitionInDefaultedOptions.transitionIn}\n * @defaultValue `true`\n /\n transitionIn?: boolean;\n}\n\n/\n This hook is used to create a \"cross fade\" transition -- a transition that\n * gradually increases the opacity and transforms the element vertically a short\n * distance. This is generally used for full page transitions when a route\n * changes.\n \n @example New Page Transition with the Layout component\n * ```tsx\n * import { ReactElement, ReactNode, useLayoutEffect } from \"react\";\n * import { useLocation } from \"react-router-dom\":\n * import { Layout, useCrossFadeTransition, useLayoutNavigation } from \"@react-md/core\";\n \n import { navItems } from \"./navItems\";\n \n interface ExampleProps {\n * children: ReactNode;\n * }\n \n function Example({ children }: ExampleProps): ReactElement {\n * const { pathname } = useLocation();\n * const { elementProps, transitionTo } = useCrossFadeTransition();\n \n const prevPathname = useRef(pathname);\n * useLayoutEffect(() => {\n * if (prevPathname.current === pathname) {\n * return\n * }\n \n prevPathname.current = pathname;\n * transitionTo('enter');\n * }, [pathname, transitionTo])\n \n return (\n * <Layout\n * {...useLayoutNavigation(navItems, pathname)}\n * appBarTitle=\"My App\"\n * mainProps={elementProps}\n * >\n * {children}\n * </Layout>\n * );\n * }\n * ```\n \n @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useCrossFadeTransition<E extends HTMLElement>(\n options: CrossFadeTransitionHookOptions<E> = {}\n): CSSTransitionHookReturnValue<E> {\n const {\n appear = false,\n transitionIn = true,\n timeout = CROSS_FADE_TIMEOUT,\n classNames = CROSS_FADE_CLASSNAMES,\n ...cssOptions\n } = options;\n\n return useCSSTransition({\n ...cssOptions,\n appear,\n timeout,\n classNames,\n transitionIn,\n });\n}\n"],"names":["useCSSTransition","CROSS_FADE_CLASSNAMES","appear","appearActive","enter","enterActive","CROSS_FADE_TIMEOUT","exit","useCrossFadeTransition","options","transitionIn","timeout","classNames","cssOptions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AASA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;CAIC,GACD,OAAO,MAAMC,wBAAiE;IAC5EC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;AACf,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAMC,qBAAwD;IACnEJ,QAAQ;IACRE,OAAO;IACPG,MAAM;AACR,EAAE;AA8BF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,uBACdC,UAA6C,CAAC,CAAC;IAE/C,MAAM,EACJP,SAAS,KAAK,EACdQ,eAAe,IAAI,EACnBC,UAAUL,kBAAkB,EAC5BM,aAAaX,qBAAqB,EAClC,GAAGY,YACJ,GAAGJ;IAEJ,OAAOT,iBAAiB;QACtB,GAAGa,UAAU;QACbX;QACAS;QACAC;QACAF;IACF;AACF"}

package/dist/transition/useScaleTransition.js CHANGED Viewed

@@ -80,11 +80,12 @@ import { useCSSTransition } from "./useCSSTransition.js";
  * transition.
  * @since 4.0.0
  */ export function useScaleTransition(options) {
-    const { timeout = SCALE_TIMEOUT, vertical = false, temporary = true, classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES, ...transitionOptions } = options;
+    const { timeout = SCALE_TIMEOUT, vertical = false, temporary = true, exitedHidden = true, classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES, ...transitionOptions } = options;
     return useCSSTransition({
         ...transitionOptions,
         timeout,
         temporary,
+        exitedHidden,
         classNames
     });
 }

package/dist/transition/useScaleTransition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/transition/useScaleTransition.ts"],"sourcesContent":["\"use client\";\nimport type {\n CSSTransitionClassNames,\n CSSTransitionClassNamesObject,\n CSSTransitionHookReturnValue,\n PreconfiguredCSSTransitionOptions,\n TransitionTimeoutObject,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/*\n The default {@link CSSTransitionClassNames} for a horizontal scale\n * transition.\n \n @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-transition`\n /\nexport const SCALE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n appear: \"rmd-scale-transition--enter\",\n appearActive: \"rmd-scale-transition--enter-active\",\n enter: \"rmd-scale-transition--enter\",\n enterActive: \"rmd-scale-transition--enter-active\",\n enterDone: \"\",\n exit: \"rmd-scale-transition--exit\",\n exitActive: \"rmd-scale-transition--exit-active\",\n};\n\n/\n The default {@link CSSTransitionClassNames} for a vertical scale transition.\n \n @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}\n /\nexport const SCALE_Y_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n appear: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n appearActive:\n \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n enter: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n enterActive:\n \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n enterDone: \"\",\n exit: \"rmd-scale-transition--exit rmd-scale-transition--y-exit\",\n exitActive:\n \"rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active\",\n};\n\n/\n The default {@link TransitionTimeout} to use for horizontal and vertical\n * scale transitions.\n \n @since 2.0.0\n /\nexport const SCALE_TIMEOUT: Readonly<TransitionTimeoutObject> = {\n enter: 200,\n exit: 150,\n};\n\n/\n @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n /\nexport interface ScaleTransitionHookOptions<E extends HTMLElement>\n extends PreconfiguredCSSTransitionOptions<E> {\n /\n Boolean if the scale transition should be vertical instead of horizontal.\n * This really only changes the default value for the {@link classNames}.\n \n @defaultValue `false`\n /\n vertical?: boolean;\n\n /\n @see {@link PreconfiguredCSSTransitionOptions.temporary}\n * @defaultValue `true`\n /\n temporary?: boolean;\n\n /\n @see {@link vertical}\n * @see {@link SCALE_CLASSNAMES}\n * @see {@link SCALE_Y_CLASSNAMES}\n * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES`\n /\n classNames?: CSSTransitionClassNames;\n}\n\n/\n Implements a scale transition that should generally be used for temporary\n * elements that are positioned via `position: absolute` or `position: fixed`.\n \n @example Dropdown Menu Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useFixedPositioning, useScaleTransition } from \"@react-md/core\";\n \n function Example(): ReactElement {\n * const buttonRef = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo: buttonRef,\n * });\n * const { elementProps, rendered } = useScaleTransition({\n * ...transitionOptions,\n * transitionIn,\n * vertical: true,\n * });\n \n return (\n * <>\n * <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Some content within a menu\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n \n @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useScaleTransition<E extends HTMLElement>(\n options: ScaleTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n const {\n timeout = SCALE_TIMEOUT,\n vertical = false,\n temporary = true,\n classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES,\n ...transitionOptions\n } = options;\n\n return useCSSTransition({\n ...transitionOptions,\n timeout,\n temporary,\n classNames,\n });\n}\n"],"names":["useCSSTransition","SCALE_CLASSNAMES","appear","appearActive","enter","enterActive","enterDone","exit","exitActive","SCALE_Y_CLASSNAMES","SCALE_TIMEOUT","useScaleTransition","options","timeout","vertical","temporary","classNames","transitionOptions"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;;CAOC,GACD,OAAO,MAAMC,mBAA4D;IACvEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,qBAA8D;IACzEP,QAAQ;IACRC,cACE;IACFC,OAAO;IACPC,aACE;IACFC,WAAW;IACXC,MAAM;IACNC,YACE;AACJ,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAME,gBAAmD;IAC9DN,OAAO;IACPG,MAAM;AACR,EAAE;AAgCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASI,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUH,aAAa,EACvBI,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,~~aAAaF~~,WAAWL,qBAAqBR,gBAAgB,EAC7D,~~GAAGgB~~,mBACJ,~~GAAGL~~;IAEJ,OAAOZ,iBAAiB;QACtB,~~GAAGiB~~,iBAAiB;~~QACpBJ~~;QACAE;QACAC;IACF;AACF"}
1	+ {"version":3,"sources":["../../src/transition/useScaleTransition.ts"],"sourcesContent":["\"use client\";\nimport type {\n CSSTransitionClassNames,\n CSSTransitionClassNamesObject,\n CSSTransitionHookReturnValue,\n PreconfiguredCSSTransitionOptions,\n TransitionTimeoutObject,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/*\n The default {@link CSSTransitionClassNames} for a horizontal scale\n * transition.\n \n @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-transition`\n /\nexport const SCALE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n appear: \"rmd-scale-transition--enter\",\n appearActive: \"rmd-scale-transition--enter-active\",\n enter: \"rmd-scale-transition--enter\",\n enterActive: \"rmd-scale-transition--enter-active\",\n enterDone: \"\",\n exit: \"rmd-scale-transition--exit\",\n exitActive: \"rmd-scale-transition--exit-active\",\n};\n\n/\n The default {@link CSSTransitionClassNames} for a vertical scale transition.\n \n @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}\n /\nexport const SCALE_Y_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n appear: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n appearActive:\n \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n enter: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n enterActive:\n \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n enterDone: \"\",\n exit: \"rmd-scale-transition--exit rmd-scale-transition--y-exit\",\n exitActive:\n \"rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active\",\n};\n\n/\n The default {@link TransitionTimeout} to use for horizontal and vertical\n * scale transitions.\n \n @since 2.0.0\n /\nexport const SCALE_TIMEOUT: Readonly<TransitionTimeoutObject> = {\n enter: 200,\n exit: 150,\n};\n\n/\n @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n /\nexport interface ScaleTransitionHookOptions<E extends HTMLElement>\n extends PreconfiguredCSSTransitionOptions<E> {\n /\n Boolean if the scale transition should be vertical instead of horizontal.\n * This really only changes the default value for the {@link classNames}.\n \n @defaultValue `false`\n /\n vertical?: boolean;\n\n /\n @see {@link PreconfiguredCSSTransitionOptions.temporary}\n * @defaultValue `true`\n /\n temporary?: boolean;\n\n /\n @see {@link vertical}\n * @see {@link SCALE_CLASSNAMES}\n * @see {@link SCALE_Y_CLASSNAMES}\n * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES`\n /\n classNames?: CSSTransitionClassNames;\n}\n\n/\n Implements a scale transition that should generally be used for temporary\n * elements that are positioned via `position: absolute` or `position: fixed`.\n \n @example Dropdown Menu Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useFixedPositioning, useScaleTransition } from \"@react-md/core\";\n \n function Example(): ReactElement {\n * const buttonRef = useRef<HTMLButtonElement>(null);\n * const [transitionIn, setTransitionIn] = useState(false);\n * const { style, transitionOptions } = useFixedPositioning({\n * fixedTo: buttonRef,\n * });\n * const { elementProps, rendered } = useScaleTransition({\n * ...transitionOptions,\n * transitionIn,\n * vertical: true,\n * });\n \n return (\n * <>\n * <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n * Toggle\n * </Button>\n * {rendered && (\n * <div {...elementProps} style={style}>\n * Some content within a menu\n * </div>\n * )}\n * </>\n * );\n * }\n * ```\n \n @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useScaleTransition<E extends HTMLElement>(\n options: ScaleTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n const {\n timeout = SCALE_TIMEOUT,\n vertical = false,\n temporary = true,\n exitedHidden = true,\n classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES,\n ...transitionOptions\n } = options;\n\n return useCSSTransition({\n ...transitionOptions,\n timeout,\n temporary,\n exitedHidden,\n classNames,\n });\n}\n"],"names":["useCSSTransition","SCALE_CLASSNAMES","appear","appearActive","enter","enterActive","enterDone","exit","exitActive","SCALE_Y_CLASSNAMES","SCALE_TIMEOUT","useScaleTransition","options","timeout","vertical","temporary","exitedHidden","classNames","transitionOptions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;;CAOC,GACD,OAAO,MAAMC,mBAA4D;IACvEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,qBAA8D;IACzEP,QAAQ;IACRC,cACE;IACFC,OAAO;IACPC,aACE;IACFC,WAAW;IACXC,MAAM;IACNC,YACE;AACJ,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAME,gBAAmD;IAC9DN,OAAO;IACPG,MAAM;AACR,EAAE;AAgCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASI,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUH,aAAa,EACvBI,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,aAAaH,WAAWL,qBAAqBR,gBAAgB,EAC7D,GAAGiB,mBACJ,GAAGN;IAEJ,OAAOZ,iBAAiB;QACtB,GAAGkB,iBAAiB;QACpBL;QACAE;QACAC;QACAC;IACF;AACF"}

package/dist/{useAsyncAction.d.ts → useAsyncFunction.d.ts} RENAMED Viewed

@@ -2,26 +2,26 @@ import type { NonNullRef, UseStateSetter } from "./types.js";
 /**
  * @since 6.0.0
  */
-export type AsyncActionFunction<Args extends unknown[]> = (...args: Args) => Promise<void>;
+export type AsyncFunction<Args extends unknown[]> = (...args: Args) => Promise<void>;
 /**
  * @since 6.0.0
  */
-export type HandleAsyncAction = <Args extends unknown[]>(action: AsyncActionFunction<Args>) => AsyncActionFunction<Args>;
+export type HandleAsyncFunction = <Args extends unknown[]>(action: AsyncFunction<Args>) => AsyncFunction<Args>;
 /**
  * @since 6.0.0
  */
-export interface AsyncActionOptions {
+export interface AsyncFunctionHookOptions {
     /** @defaultValue `false` */
     disabled?: boolean;
 }
 /**
  * @since 6.0.0
  */
-export interface AsyncActionImplementation {
+export interface AsyncFunctionHookImplementation {
     pending: boolean;
     unmounted: NonNullRef<boolean>;
     setPending: UseStateSetter<boolean>;
-    handleAsync: HandleAsyncAction;
+    handleAsync: HandleAsyncFunction;
 }
 /**
  * A simple utility hook for triggering a pending state while an async function
@@ -32,7 +32,7 @@ export interface AsyncActionImplementation {
  * @example Simple Example (Async Button)
  * ```tsx
  * import type { ButtonProps } from "@react-md/core";
- * import { box, Button, CircularProgress, useAsyncAction } from "@react-md/core";
+ * import { box, Button, CircularProgress, useAsyncFunction } from "@react-md/core";
  * import { cnb } from "cnbuilder";
  * import type { MouseEvent, ReactElement } from "react";
  *
@@ -44,7 +44,7 @@ export interface AsyncActionImplementation {
  *
  * export function AsyncButton(props: AsyncButtonProps): ReactElement {
  *   const { onClick, children, theme, className, disabled, ...remaining } = props;
- *   const { handleAsync, pending } = useAsyncAction({ disabled });
+ *   const { handleAsync, pending } = useAsyncFunction({ disabled });
  *
  *   return (
  *     <Button
@@ -95,7 +95,7 @@ export interface AsyncActionImplementation {
  *   DialogContent,
  *   DialogFooter,
  *   Form,
- *   useAsyncAction,
+ *   useAsyncFunction,
  * } from "@react-md/core";
  * import CloseIcon from "@react-md/material-icons/CloseIcon";
  * import type { ReactElement } from "react";
@@ -107,7 +107,7 @@ export interface AsyncActionImplementation {
  * }
  *
  * function Example({ hide, submit }: ExampleProps): ReactElement {
- *   const { handleAsync, pending } = useAsyncAction();
+ *   const { handleAsync, pending } = useAsyncFunction();
  *   const formId = useId();
  *
  *   return (
@@ -150,4 +150,4 @@ export interface AsyncActionImplementation {
  *
  * @since 6.0.0
  */
-export declare function useAsyncAction(options?: AsyncActionOptions): AsyncActionImplementation;
+export declare function useAsyncFunction(options?: AsyncFunctionHookOptions): AsyncFunctionHookImplementation;

package/dist/{useAsyncAction.js → useAsyncFunction.js} RENAMED Viewed

@@ -10,7 +10,7 @@ import { useUnmounted } from "./useUnmounted.js";
  * @example Simple Example (Async Button)
  * ```tsx
  * import type { ButtonProps } from "@react-md/core";
- * import { box, Button, CircularProgress, useAsyncAction } from "@react-md/core";
+ * import { box, Button, CircularProgress, useAsyncFunction } from "@react-md/core";
  * import { cnb } from "cnbuilder";
  * import type { MouseEvent, ReactElement } from "react";
  *
@@ -22,7 +22,7 @@ import { useUnmounted } from "./useUnmounted.js";
  *
  * export function AsyncButton(props: AsyncButtonProps): ReactElement {
  *   const { onClick, children, theme, className, disabled, ...remaining } = props;
- *   const { handleAsync, pending } = useAsyncAction({ disabled });
+ *   const { handleAsync, pending } = useAsyncFunction({ disabled });
  *
  *   return (
  *     <Button
@@ -73,7 +73,7 @@ import { useUnmounted } from "./useUnmounted.js";
  *   DialogContent,
  *   DialogFooter,
  *   Form,
- *   useAsyncAction,
+ *   useAsyncFunction,
  * } from "@react-md/core";
  * import CloseIcon from "@react-md/material-icons/CloseIcon";
  * import type { ReactElement } from "react";
@@ -85,7 +85,7 @@ import { useUnmounted } from "./useUnmounted.js";
  * }
  *
  * function Example({ hide, submit }: ExampleProps): ReactElement {
- *   const { handleAsync, pending } = useAsyncAction();
+ *   const { handleAsync, pending } = useAsyncFunction();
  *   const formId = useId();
  *
  *   return (
@@ -127,7 +127,7 @@ import { useUnmounted } from "./useUnmounted.js";
  * ```
  *
  * @since 6.0.0
- */ export function useAsyncAction(options = {}) {
+ */ export function useAsyncFunction(options = {}) {
     const { disabled } = options;
     const [pending, setPending] = useState(false);
     const unmounted = useUnmounted();
@@ -156,4 +156,4 @@ import { useUnmounted } from "./useUnmounted.js";
     };
 }
-//# sourceMappingURL=useAsyncAction.js.map
+//# sourceMappingURL=useAsyncFunction.js.map

package/dist/useAsyncFunction.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/useAsyncFunction.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\nimport type { NonNullRef, UseStateSetter } from \"./types.js\";\nimport { useUnmounted } from \"./useUnmounted.js\";\n\n/**\n * @since 6.0.0\n */\nexport type AsyncFunction<Args extends unknown[]> = (\n ...args: Args\n) => Promise<void>;\n\n/**\n * @since 6.0.0\n */\nexport type HandleAsyncFunction = <Args extends unknown[]>(\n action: AsyncFunction<Args>\n) => AsyncFunction<Args>;\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookOptions {\n /** @defaultValue `false` */\n disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AsyncFunctionHookImplementation {\n pending: boolean;\n unmounted: NonNullRef<boolean>;\n setPending: UseStateSetter<boolean>;\n handleAsync: HandleAsyncFunction;\n}\n\n/**\n * A simple utility hook for triggering a pending state while an async function\n * is running. This is really only useful if you aren't using something like\n * `react-query`, `@reduxjs/toolkit/query`, `@apollo/client`, etc for API calls\n * which have a built-in pending state for mutations.\n *\n * @example Simple Example (Async Button)\n * ```tsx\n * import type { ButtonProps } from \"@react-md/core\";\n * import { box, Button, CircularProgress, useAsyncFunction } from \"@react-md/core\";\n * import { cnb } from \"cnbuilder\";\n * import type { MouseEvent, ReactElement } from \"react\";\n *\n * import styles from \"./AsyncButton.module.scss\";\n *\n * export interface AsyncButtonProps extends ButtonProps {\n * onClick(event: MouseEvent<HTMLButtonElement>): Promise<void>;\n * }\n *\n * export function AsyncButton(props: AsyncButtonProps): ReactElement {\n * const { onClick, children, theme, className, disabled, ...remaining } = props;\n * const { handleAsync, pending } = useAsyncFunction({ disabled });\n *\n * return (\n * <Button\n * {...remaining}\n * aria-disabled={pending || undefined}\n * disabled={disabled}\n * className={cnb(pending && styles.loading, className)}\n * theme={pending ? \"disabled\" : theme}\n * onClick={handleAsync(onClick)}\n * >\n * {children}\n * {pending && (\n * <span\n * className={box({\n * align: \"center\",\n * disablePadding: true,\n * className: styles.overlay,\n * })}\n * >\n * <CircularProgress />\n * </span>\n * )}\n * </Button>\n * );\n * }\n *\n * // `AsyncButton.module.scss`\n * // hide everything in the button except for the overlay containing the circular\n * // progress\n * .loading > *:not(.overlay) {\n * opacity: 0;\n * }\n *\n * .overlay {\n * border-radius: inherit;\n * box-shadow: inherit;\n * inset: 0;\n * position: absolute;\n * z-index: 1;\n * }\n * ```\n *\n * @example Confirmation Dialog with Overlay\n * ```tsx\n * import {\n * Button,\n * DialogHeader,\n * DialogContent,\n * DialogFooter,\n * Form,\n * useAsyncFunction,\n * } from \"@react-md/core\";\n * import CloseIcon from \"@react-md/material-icons/CloseIcon\";\n * import type { ReactElement } from \"react\";\n * import { useId } from \"react\";\n *\n * interface ExampleProps {\n * hide(); void;\n * submit(): Promise<void>\n * }\n *\n * function Example({ hide, submit }: ExampleProps): ReactElement {\n * const { handleAsync, pending } = useAsyncFunction();\n * const formId = useId();\n *\n * return (\n * <>\n * <DialogHeader>\n * <DialogTitle>Some Title</DialogTitle>\n * <Button aria-label=\"Close\" onClick={hide} disabled={pending}>\n * <CloseIcon />\n * </Button>\n * </DialogHeader>\n * <DialogContent>\n * <Form\n * id={formId}\n * onReset={hide}\n * onSubmit={handleAsync(submit)}\n * >\n * // pretend content\n * </Form>\n * </DialogContent>\n * <DialogFooter>\n * <Button\n * type=\"reset\"\n * form={formId}\n * disabled={pending}\n * >\n * Cancel\n * </Button>\n * <Button\n * type=\"submit\"\n * form={formId}\n * disabled={pending}\n * >\n * Confirm\n * </Button>\n * </DialogFooter>\n * </>\n * );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useAsyncFunction(\n options: AsyncFunctionHookOptions = {}\n): AsyncFunctionHookImplementation {\n const { disabled } = options;\n\n const [pending, setPending] = useState(false);\n const unmounted = useUnmounted();\n\n const handleAsync = useCallback<HandleAsyncFunction>(\n (action) =>\n async (...args) => {\n if (pending || disabled) {\n return;\n }\n\n setPending(true);\n try {\n await action(...args);\n } finally {\n if (!unmounted.current) {\n setPending(false);\n }\n }\n },\n [disabled, pending, unmounted]\n );\n\n return {\n pending,\n unmounted,\n setPending,\n handleAsync,\n };\n}\n"],"names":["useCallback","useState","useUnmounted","useAsyncFunction","options","disabled","pending","setPending","unmounted","handleAsync","action","args","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,SAASC,YAAY,QAAQ,oBAAoB;AAkCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8HC,GACD,OAAO,SAASC,iBACdC,UAAoC,CAAC,CAAC;IAEtC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,CAACE,SAASC,WAAW,GAAGN,SAAS;IACvC,MAAMO,YAAYN;IAElB,MAAMO,cAAcT,YAClB,CAACU,SACC,OAAO,GAAGC;YACR,IAAIL,WAAWD,UAAU;gBACvB;YACF;YAEAE,WAAW;YACX,IAAI;gBACF,MAAMG,UAAUC;YAClB,SAAU;gBACR,IAAI,CAACH,UAAUI,OAAO,EAAE;oBACtBL,WAAW;gBACb;YACF;QACF,GACF;QAACF;QAAUC;QAASE;KAAU;IAGhC,OAAO;QACLF;QACAE;QACAD;QACAE;IACF;AACF"}

package/dist/useMutationObserver.d.ts ADDED Viewed

@@ -0,0 +1,52 @@
+import { type RefCallback, type Ref } from "react";
+/**
+ * @since 6.0.0
+ */
+export interface MutationObserverHookOptions<E extends HTMLElement> extends MutationObserverInit {
+    ref?: Ref<E>;
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#options
+     * @defaultValue `!childList && !attributes && !characterData`
+     */
+    disabled?: boolean;
+    onObserved(mutation: MutationRecord): void;
+}
+/**
+ * The mutation observer is used to track the changes made to the DOM tree.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useMutationObserver } from "@react-md/core";
+ * import { useCallback, type HTMLAttributes, type ReactElement } from "react";
+ *
+ * function Example(props: HTMLAttributes<HTMLDivElement>): ReactElement {
+ *   const { children, ...remaining } = props;
+ *
+ *   const targetRef = useMutationObserver({
+ *     subtree: true,
+ *     attributes: true,
+ *     childList: true,
+ *     onUpdate: useCallback((mutation) => {
+ *       switch (mutation.type) {
+ *         case "childList":
+ *           console.log("A child node has been added or removed");
+ *           break;
+ *         case "attributes":
+ *           console.log(`The ${mutation.attributeName} attribute was modified`);
+ *           break
+ *       }
+ *
+ *     }, []),
+ *   });
+ *
+ *   return (
+ *     <div {...remaining} ref={targetRef}>
+ *       {children}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function useMutationObserver<E extends HTMLElement>(options: MutationObserverHookOptions<E>): RefCallback<E>;

package/dist/useMutationObserver.js ADDED Viewed

@@ -0,0 +1,84 @@
+import { useEffect } from "react";
+import { useEnsuredRef } from "./useEnsuredRef.js";
+/**
+ * The mutation observer is used to track the changes made to the DOM tree.
+ *
+ * @example Simple Example
+ * ```tsx
+ * import { useMutationObserver } from "@react-md/core";
+ * import { useCallback, type HTMLAttributes, type ReactElement } from "react";
+ *
+ * function Example(props: HTMLAttributes<HTMLDivElement>): ReactElement {
+ *   const { children, ...remaining } = props;
+ *
+ *   const targetRef = useMutationObserver({
+ *     subtree: true,
+ *     attributes: true,
+ *     childList: true,
+ *     onUpdate: useCallback((mutation) => {
+ *       switch (mutation.type) {
+ *         case "childList":
+ *           console.log("A child node has been added or removed");
+ *           break;
+ *         case "attributes":
+ *           console.log(`The ${mutation.attributeName} attribute was modified`);
+ *           break
+ *       }
+ *
+ *     }, []),
+ *   });
+ *
+ *   return (
+ *     <div {...remaining} ref={targetRef}>
+ *       {children}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @since 6.0.0
+ */ export function useMutationObserver(options) {
+    const { ref, onObserved, attributes, attributeFilter, attributeOldValue, subtree, childList, characterData, characterDataOldValue, disabled = !childList && !attributes && !characterData } = options;
+    const [targetNodeRef, refCallback] = useEnsuredRef(ref);
+    useEffect(()=>{
+        if (disabled) {
+            return;
+        }
+        const observerTarget = targetNodeRef.current;
+        if (!observerTarget) {
+            return;
+        }
+        const observer = new MutationObserver((records)=>{
+            const [entry] = records;
+            if (entry) {
+                onObserved(entry);
+            }
+        });
+        observer.observe(observerTarget, {
+            attributes,
+            attributeFilter,
+            attributeOldValue,
+            subtree,
+            childList,
+            characterData,
+            characterDataOldValue
+        });
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        attributeFilter,
+        attributeOldValue,
+        attributes,
+        characterData,
+        characterDataOldValue,
+        childList,
+        disabled,
+        onObserved,
+        subtree,
+        targetNodeRef
+    ]);
+    return refCallback;
+}
+//# sourceMappingURL=useMutationObserver.js.map