@react-md/core 6.3.4 → 6.4.0

package/dist/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type FocusEvent,\n  type MouseEvent,\n  type MutableRefObject,\n  type Ref,\n  type RefObject,\n  type TouchEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from \"react\";\n\nimport {\n  type ControlledHoverModeImplementation,\n  useHoverMode,\n} from \"../hoverMode/useHoverMode.js\";\nimport {\n  type UserInteractionMode,\n  useUserInteractionMode,\n} from \"../interaction/UserInteractionModeProvider.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type FixedPositioningOptions,\n  type FixedPositioningTransitionCallbacks,\n  useFixedPositioning,\n} from \"../positioning/useFixedPositioning.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { usePageInactive } from \"../usePageInactive.js\";\nimport { parseCssLengthUnit } from \"../utils/parseCssLengthUnit.js\";\nimport { useTooltipHoverMode } from \"./TooltipHoverModeProvider.js\";\nimport {\n  DEFAULT_TOOLTIP_DENSE_SPACING,\n  DEFAULT_TOOLTIP_MARGIN,\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_SPACING,\n  DEFAULT_TOOLTIP_THRESHOLD,\n  TOOLTIP_SPACING_VAR,\n} from \"./constants.js\";\nimport {\n  type TooltipPositionHookOptions,\n  useTooltipPosition,\n} from \"./useTooltipPosition.js\";\nimport { getAnchor } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.8.0 */\nexport interface TooltipPositioningOptions {\n  style?: CSSProperties;\n\n  /**\n   * @see {@link FixedPositioningOptions.vwMargin}\n   * @defaultValue `16`\n   */\n  vwMargin?: number;\n\n  /**\n   * @see {@link FixedPositioningOptions.vhMargin}\n   * @defaultValue `16`\n   */\n  vhMargin?: number;\n\n  /**\n   * Set this to `true` to reduce the font size and padding on the tooltip and\n   * the amount of spacing between the tooltipped element and the tooltip.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * The amount of spacing to use between the tooltipped element and the tooltip\n   * when {@link disableAutoSpacing} is `false`.\n   *\n   * @defaultValue `\"1.5rem`\n   */\n  spacing?: number | string;\n\n  /**\n   * The amount of spacing to use between the tooltipped element and the tooltip\n   * when {@link disableAutoSpacing} is `false` and {@link dense} is `true`.\n   *\n   * @defaultValue `\"0.875rem`\n   */\n  denseSpacing?: number | string;\n\n  /**\n   * Set this to `true` to prevent the {@link defaultPosition} to swap to the\n   * other side of the tooltipped element when it is too close to the viewport\n   * edge. This will always be `true` if a {@link position} is provided.\n   *\n   * @defaultValue `false`\n   */\n  disableSwapping?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableAutoSpacing?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Removed the `TooltipTouchEventHandlers` and\n * `TooltipKeyboardEventHandlers` types, removed the need for the `onKeyDown`\n * event.\n */\nexport interface TooltippedElementEventHandlers<\n  E extends HTMLElement = HTMLButtonElement,\n> {\n  onBlur?: (event: FocusEvent<E>) => void;\n  onFocus?: (event: FocusEvent<E>) => void;\n  onMouseEnter?: (event: MouseEvent<E>) => void;\n  onMouseLeave?: (event: MouseEvent<E>) => void;\n  onTouchStart?: (event: TouchEvent<E>) => void;\n  onTouchEnd?: (event: TouchEvent<E>) => void;\n  onContextMenu?: (event: MouseEvent<E>) => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Renamed from `TooltipHookProvidedElementProps`\n */\nexport interface ProvidedTooltippedElementProps<E extends HTMLElement>\n  extends Required<TooltippedElementEventHandlers<E>> {\n  \"aria-describedby\": string | undefined;\n  id: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 A major API change for the hover mode behavior and no longer\n * requires a `baseId`/`id` for the tooltip. Also renamed from\n * `TooltipHookOptions` to `TooltipOptions` to match other hook naming\n * conventions.\n */\nexport interface TooltipOptions<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n> extends FixedPositioningTransitionCallbacks,\n    TooltippedElementEventHandlers<TooltippedElement>,\n    TooltipPositioningOptions,\n    TooltipPositionHookOptions {\n  /**\n   * @defaultValue `\"tooltip-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional override for the `aria-describedby`\n   */\n  describedBy?: string;\n\n  /**\n   * Any styles to be merged with the fixed positioning styles for the tooltip.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the event handlers should no longer attempt to show a tooltip. This\n   * should be set to `true` when your component might not have a tooltip associated\n   * with it.\n   *\n   * @example Real World Example\n   * ```tsx\n   * // This is _almost_ the source code for the `TooltippedButton` provided by react-md\n   * import { Button } from \"@react-md/core/button/Button\";\n   * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n   * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n   * import { type ReactElement, type ReactNode } from \"react\";\n   *\n   * export interface TooltippedButtonProps extends ButtonProps {\n   *   tooltip?: ReactNode;\n   * }\n   *\n   * export function TooltippedButton({\n   *   id,\n   *   tooltip,\n   *   children,\n   *   onBlur,\n   *   onFocus,\n   *   onMouseEnter,\n   *   onMouseLeave,\n   *   onTouchStart,\n   *   onTouchEnd,\n   *   onContextMenu,\n   *   ...props\n   * }: TooltippedButtonProps): ReactElement {\n   *   const { elementProps, tooltipProps } = useTooltip({\n   *     id,\n   *     disabled: !tooltip,\n   *     onBlur,\n   *     onFocus,\n   *     onMouseEnter,\n   *     onMouseLeave,\n   *     onTouchStart,\n   *     onTouchEnd,\n   *     onContextMenu,\n   *   });\n   *\n   *   return (\n   *     <>\n   *       <Button {...props} {...elementProps}>\n   *         {children}\n   *       </Button>\n   *       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `false`\n   * @since 5.1.0\n   */\n  disabled?: boolean;\n\n  /**\n   * The amount of time (in ms) to hover an element before the tooltip becomes\n   * visible.\n   *\n   * The default value is really the current hover timeout from the\n   * `TooltipHoverModeProvider`.\n   *\n   * @defaultValue `1000`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait before triggering the exit animation for the\n   * tooltip.\n   *\n   * The default value is really the current leaveTimeout timeout from the\n   * `TooltipHoverModeProvider`.\n   *\n   * @defaultValue `0`\n   */\n  leaveTimeout?: number;\n\n  /**\n   * Set this to `true` to only allow the tooltip to become visible when the\n   * `event .currentTarget` or `overflowRef` has text overflow.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  overflowOnly?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.disabled}\n   * @defaultValue `false`\n   */\n  disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`\n */\nexport interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>\n  extends Required<FixedPositioningTransitionCallbacks> {\n  id: string;\n  ref: Ref<E>;\n  dense: boolean;\n  style: CSSProperties | undefined;\n  visible: boolean;\n  position: SimplePosition;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 No longer returns any properties from the hover mode provider\n * because of the major API change to hover mode.. Also renamed from\n * `TooltipHookReturnValue` to `TooltipImplementation` to match other hook\n * naming conventions.\n */\nexport interface TooltipImplementation<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n  TooltipElement extends HTMLElement = HTMLSpanElement,\n> extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n  animatedOnce: boolean;\n  initiatedBy: MutableRefObject<UserInteractionMode | null>;\n  elementProps: ProvidedTooltippedElementProps<TooltippedElement>;\n  tooltipProps: ProvidedTooltipProps<TooltipElement>;\n\n  /**\n   * This is a wrapper around the {@link setVisible} behavior that will also\n   * clear any pending timeouts.\n   */\n  hideTooltip: () => void;\n\n  /**\n   * @since 6.0.0\n   */\n  overflowRef: RefObject<HTMLElement>;\n}\n\n/**\n * @example Simple Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n *\n * function Example() {\n *   const { elementProps, tooltipProps } = useTooltip();\n *\n *   return (\n *     <>\n *       <Button {...elementProps}>Button</Button>\n *       <Tooltip {...tooltipProps}>\n *         Tooltip Content\n *       </Tooltip>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Overflow-only Tooltips\n * ```tsx\n * import { cssUtils } from \"@react-md/core/cssUtils\";\n * import { Link, type LinkProps } from \"@react-md/core/link/Link\";\n * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n * import { type ReactElement } from \"react\";\n *\n * function NavigationLink(props: LinkProps): ReactElement {\n *   const { children, ...remaining } = props;\n *\n *   // using the `overflowRef` is optional and will default to the\n *   // `event.currentTarget` when `null`\n *   const { overflowRef, elementProps, tooltipProps } = useOverflowTooltip({\n *     // just to pass any event handlers\n *     ...remaining,\n *     overflowOnly: true,\n *   });\n *\n *   return (\n *     <Link {...remaining} {...elementProps} style={{ width: \"100%\" }}>\n *       <span ref={overflowRef} className={cssUtils({ textOverflow: \"ellipsis\" })}>\n *         {children}\n *       </span>\n *       <Tooltip {...tooltipProps}>\n *         {children}\n *       </Tooltip>\n *     </Link>\n *   );\n * }\n *\n * function Example(): ReactElement {\n *   return (\n *     <div style={{ width: \"10rem\", overflow: \"auto\" }}>\n *       <NavigationLink href=\"/\">Home</NavigationLink>\n *       <NavigationLink href=\"/some-path\">\n *         Super long text that will be truncated with ellipsis and\n *         have a tooltip appear\n *       </NavigationLink>\n *     </div>\n *   );\n * }\n * ```\n *\n * ## Inspecting Tooltip Styles\n *\n * Since tooltips will disappear on blur, mouseleave, etc, it is a bit hard to\n * inspect the tooltip styles. In dev mode, you can manually set the visibility\n * to `true` through the dev tools.\n * - find your tooltip implementation\n * - expand the Tooltip hook\n * - expand the HoverMode hook\n * - set the first boolean state to `true`\n *\n * The tooltip will now remain visible allowing you to find it within the\n * \"Inspector\" tab in the dev tools.\n *\n * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}\n * @since 2.8.0\n * @since 6.0.0 Uses a separate `TooltipHoverModeProvider`.\n *\n * TODO: I need to fix the tooltip for click events and history changes since\n * the mouseleave event will not be correctly bubbled if hovering a child\n * element when the click or history update happens. this causes the tooltip to\n * stay visible\n */\nexport function useTooltip<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n  TooltipElement extends HTMLElement = HTMLSpanElement,\n>(\n  options: TooltipOptions<TooltippedElement> = {}\n): TooltipImplementation<TooltippedElement, TooltipElement> {\n  const {\n    id: propId,\n    style: propStyle,\n    disabled = false,\n    describedBy,\n    dense = false,\n    hoverTimeout,\n    leaveTimeout,\n    vwMargin = DEFAULT_TOOLTIP_MARGIN,\n    vhMargin = DEFAULT_TOOLTIP_MARGIN,\n    spacing = DEFAULT_TOOLTIP_SPACING,\n    denseSpacing = DEFAULT_TOOLTIP_DENSE_SPACING,\n    disableSwapping,\n    disableAutoSpacing,\n    position: determinedPosition,\n    defaultPosition = DEFAULT_TOOLTIP_POSITION,\n    threshold = DEFAULT_TOOLTIP_THRESHOLD,\n    onBlur = noop,\n    onFocus = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onContextMenu = noop,\n    onEnter = noop,\n    onEntering,\n    onEntered = noop,\n    onExited,\n    overflowOnly,\n    disableFixedPositioning,\n  } = options;\n\n  const fallbackId = useId();\n  const id = propId || fallbackId;\n  const tooltipId = `${id}-tooltip`;\n  const {\n    animatedOnceRef,\n    hoverTimeoutRef,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n  } = useTooltipHoverMode();\n  const {\n    visible,\n    setVisible,\n    startShowFlow,\n    startHideFlow,\n    clearVisibilityTimeout,\n  } = useHoverMode({\n    hoverTimeout,\n    hoverTimeoutRef,\n    leaveTimeout,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n  });\n  const [position, updatePosition] = useTooltipPosition({\n    position: determinedPosition,\n    defaultPosition,\n    threshold,\n  });\n\n  const mode = useUserInteractionMode();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const tooltipRef = useRef<TooltipElement>(null);\n  const overflowRef = useRef<HTMLElement>(null);\n  const initiatedBy = useRef<UserInteractionMode | null>(null);\n  const { ref, style, callbacks } = useFixedPositioning({\n    nodeRef: tooltipRef,\n    style: propStyle,\n    fixedTo: elementRef,\n    anchor: getAnchor(position),\n    disableSwapping: disableSwapping ?? !!determinedPosition,\n    disabled: disableFixedPositioning,\n    getFixedPositionOptions() {\n      let tooltipSpacing = dense ? denseSpacing : spacing;\n      const tooltip = tooltipRef.current;\n      if (!disableAutoSpacing && tooltip) {\n        tooltipSpacing =\n          window\n            .getComputedStyle(tooltip)\n            .getPropertyValue(TOOLTIP_SPACING_VAR) || spacing;\n      }\n\n      const currentSpacing = parseCssLengthUnit({\n        value: tooltipSpacing,\n      });\n      const horizontal = position === \"left\" || position === \"right\";\n\n      return {\n        vwMargin,\n        vhMargin,\n        xMargin: horizontal ? currentSpacing : undefined,\n        yMargin: horizontal ? undefined : currentSpacing,\n      };\n    },\n    onEnter(appearing) {\n      onEnter(appearing);\n\n      // This allows you to inspect the tooltip styles through the element\n      // inspector without first hovering or focusing the tooltipped element\n      // beforehand by setting the `HoverMode` hook to `true`\n      if (process.env.NODE_ENV !== \"production\" && !elementRef.current) {\n        elementRef.current = document.getElementById(id);\n      }\n    },\n    onEntering,\n    onEntered(appearing) {\n      onEntered(appearing);\n\n      animatedOnceRef.current = true;\n    },\n    onExited,\n  });\n\n  const hideTooltip = useCallback(() => {\n    initiatedBy.current = null;\n    disableHoverMode();\n    clearVisibilityTimeout();\n    setVisible(false);\n  }, [clearVisibilityTimeout, disableHoverMode, setVisible]);\n\n  useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") {\n        hideTooltip();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    window.addEventListener(\"scroll\", hideTooltip, true);\n    window.addEventListener(\"touchend\", hideTooltip, true);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n      window.removeEventListener(\"scroll\", hideTooltip, true);\n      window.removeEventListener(\"touchend\", hideTooltip, true);\n    };\n  }, [hideTooltip, visible]);\n\n  const refocusFrame = useRef(0);\n  const pageInactive = useRef(false);\n  usePageInactive({\n    disabled,\n    onDisabledCleanup: hideTooltip,\n    onChange(active) {\n      if (active) {\n        refocusFrame.current = window.requestAnimationFrame(() => {\n          pageInactive.current = false;\n        });\n        return;\n      }\n\n      pageInactive.current = true;\n      hideTooltip();\n    },\n  });\n\n  const isNotOverflown = (currentTarget: HTMLElement): boolean => {\n    if (!overflowOnly) {\n      return false;\n    }\n\n    const element = overflowRef.current || currentTarget;\n    return !element || element.offsetWidth >= element.scrollWidth;\n  };\n\n  return {\n    visible,\n    setVisible,\n    hideTooltip,\n    animatedOnce: animatedOnceRef.current,\n    initiatedBy,\n    overflowRef,\n    startShowFlow,\n    startHideFlow,\n    clearVisibilityTimeout,\n    tooltipProps: {\n      id: tooltipId,\n      ref,\n      dense,\n      style,\n      visible,\n      position,\n      ...callbacks,\n    },\n    elementProps: {\n      \"aria-describedby\": cnb(visible && tooltipId, describedBy) || undefined,\n      id,\n      onMouseEnter(event) {\n        onMouseEnter(event);\n        if (\n          disabled ||\n          mode === \"touch\" ||\n          initiatedBy.current !== null ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        initiatedBy.current = \"mouse\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onMouseLeave(event) {\n        onMouseLeave(event);\n        if (disabled || initiatedBy.current !== \"mouse\") {\n          return;\n        }\n\n        startHideFlow();\n        initiatedBy.current = null;\n      },\n      onBlur(event) {\n        onBlur(event);\n        if (disabled) {\n          return;\n        }\n\n        initiatedBy.current = null;\n        startHideFlow();\n      },\n      onFocus(event) {\n        onFocus(event);\n        // skip the focus events when the browser is re-focused if the user\n        // pressed alt-tab, minimized the browser, etc\n        if (\n          disabled ||\n          mode !== \"keyboard\" ||\n          initiatedBy.current !== null ||\n          pageInactive.current ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          pageInactive.current = false;\n          return;\n        }\n\n        initiatedBy.current = \"keyboard\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onTouchStart(event) {\n        onTouchStart(event);\n        if (\n          disabled ||\n          initiatedBy.current !== null ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        initiatedBy.current = \"touch\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onTouchEnd(event) {\n        onTouchEnd(event);\n        if (disabled) {\n          return;\n        }\n\n        initiatedBy.current = null;\n        startHideFlow();\n      },\n      onContextMenu(event) {\n        onContextMenu(event);\n        if (\n          disabled ||\n          initiatedBy.current !== \"touch\" ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        event.preventDefault();\n        const selection = window.getSelection();\n        const node = selection?.anchorNode?.parentElement;\n        if (node && event.currentTarget.contains(node)) {\n          selection.empty();\n        }\n      },\n    },\n  };\n}\n"],"names":["cnb","useCallback","useEffect","useId","useRef","useHoverMode","useUserInteractionMode","useFixedPositioning","usePageInactive","parseCssLengthUnit","useTooltipHoverMode","DEFAULT_TOOLTIP_DENSE_SPACING","DEFAULT_TOOLTIP_MARGIN","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_SPACING","DEFAULT_TOOLTIP_THRESHOLD","TOOLTIP_SPACING_VAR","useTooltipPosition","getAnchor","noop","useTooltip","options","id","propId","style","propStyle","disabled","describedBy","dense","hoverTimeout","leaveTimeout","vwMargin","vhMargin","spacing","denseSpacing","disableSwapping","disableAutoSpacing","position","determinedPosition","defaultPosition","threshold","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","onEnter","onEntering","onEntered","onExited","overflowOnly","disableFixedPositioning","fallbackId","tooltipId","animatedOnceRef","hoverTimeoutRef","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","visible","setVisible","startShowFlow","startHideFlow","clearVisibilityTimeout","updatePosition","mode","elementRef","tooltipRef","overflowRef","initiatedBy","ref","callbacks","nodeRef","fixedTo","anchor","getFixedPositionOptions","tooltipSpacing","tooltip","current","window","getComputedStyle","getPropertyValue","currentSpacing","value","horizontal","xMargin","undefined","yMargin","appearing","process","env","NODE_ENV","document","getElementById","hideTooltip","handleKeyDown","event","key","addEventListener","removeEventListener","refocusFrame","pageInactive","onDisabledCleanup","onChange","active","requestAnimationFrame","isNotOverflown","currentTarget","element","offsetWidth","scrollWidth","animatedOnce","tooltipProps","elementProps","preventDefault","selection","getSelection","node","anchorNode","parentElement","contains","empty"],"mappings":"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"}
+{"version":3,"sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type CSSProperties,\n  type FocusEvent,\n  type MouseEvent,\n  type MutableRefObject,\n  type Ref,\n  type RefObject,\n  type TouchEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from \"react\";\n\nimport {\n  type ControlledHoverModeImplementation,\n  useHoverMode,\n} from \"../hoverMode/useHoverMode.js\";\nimport {\n  type UserInteractionMode,\n  useUserInteractionMode,\n} from \"../interaction/UserInteractionModeProvider.js\";\nimport { type SimplePosition } from \"../positioning/types.js\";\nimport {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type FixedPositioningOptions,\n  type FixedPositioningTransitionCallbacks,\n  useFixedPositioning,\n} from \"../positioning/useFixedPositioning.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport { usePageInactive } from \"../usePageInactive.js\";\nimport { parseCssLengthUnit } from \"../utils/parseCssLengthUnit.js\";\nimport { useTooltipHoverMode } from \"./TooltipHoverModeProvider.js\";\nimport {\n  DEFAULT_TOOLTIP_DENSE_SPACING,\n  DEFAULT_TOOLTIP_MARGIN,\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_SPACING,\n  DEFAULT_TOOLTIP_THRESHOLD,\n  TOOLTIP_SPACING_VAR,\n} from \"./constants.js\";\nimport {\n  type TooltipPositionHookOptions,\n  useTooltipPosition,\n} from \"./useTooltipPosition.js\";\nimport { getAnchor } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @since 2.8.0 */\nexport interface TooltipPositioningOptions {\n  style?: CSSProperties;\n\n  /**\n   * @see {@link FixedPositioningOptions.vwMargin}\n   * @defaultValue `16`\n   */\n  vwMargin?: number;\n\n  /**\n   * @see {@link FixedPositioningOptions.vhMargin}\n   * @defaultValue `16`\n   */\n  vhMargin?: number;\n\n  /**\n   * Set this to `true` to reduce the font size and padding on the tooltip and\n   * the amount of spacing between the tooltipped element and the tooltip.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * The amount of spacing to use between the tooltipped element and the tooltip\n   * when {@link disableAutoSpacing} is `false`.\n   *\n   * @defaultValue `\"1.5rem`\n   */\n  spacing?: number | string;\n\n  /**\n   * The amount of spacing to use between the tooltipped element and the tooltip\n   * when {@link disableAutoSpacing} is `false` and {@link dense} is `true`.\n   *\n   * @defaultValue `\"0.875rem`\n   */\n  denseSpacing?: number | string;\n\n  /**\n   * Set this to `true` to prevent the {@link defaultPosition} to swap to the\n   * other side of the tooltipped element when it is too close to the viewport\n   * edge. This will always be `true` if a {@link position} is provided.\n   *\n   * @defaultValue `false`\n   */\n  disableSwapping?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableAutoSpacing?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Removed the `TooltipTouchEventHandlers` and\n * `TooltipKeyboardEventHandlers` types, removed the need for the `onKeyDown`\n * event.\n */\nexport interface TooltippedElementEventHandlers<\n  E extends HTMLElement = HTMLButtonElement,\n> {\n  onBlur?: (event: FocusEvent<E>) => void;\n  onFocus?: (event: FocusEvent<E>) => void;\n  onMouseEnter?: (event: MouseEvent<E>) => void;\n  onMouseLeave?: (event: MouseEvent<E>) => void;\n  onTouchStart?: (event: TouchEvent<E>) => void;\n  onTouchEnd?: (event: TouchEvent<E>) => void;\n  onContextMenu?: (event: MouseEvent<E>) => void;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 Renamed from `TooltipHookProvidedElementProps`\n */\nexport interface ProvidedTooltippedElementProps<\n  E extends HTMLElement,\n> extends Required<TooltippedElementEventHandlers<E>> {\n  \"aria-describedby\": string | undefined;\n  id: string;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 A major API change for the hover mode behavior and no longer\n * requires a `baseId`/`id` for the tooltip. Also renamed from\n * `TooltipHookOptions` to `TooltipOptions` to match other hook naming\n * conventions.\n */\nexport interface TooltipOptions<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n>\n  extends\n    FixedPositioningTransitionCallbacks,\n    TooltippedElementEventHandlers<TooltippedElement>,\n    TooltipPositioningOptions,\n    TooltipPositionHookOptions {\n  /**\n   * @defaultValue `\"tooltip-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional override for the `aria-describedby`\n   */\n  describedBy?: string;\n\n  /**\n   * Any styles to be merged with the fixed positioning styles for the tooltip.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the event handlers should no longer attempt to show a tooltip. This\n   * should be set to `true` when your component might not have a tooltip associated\n   * with it.\n   *\n   * @example Real World Example\n   * ```tsx\n   * // This is _almost_ the source code for the `TooltippedButton` provided by react-md\n   * import { Button } from \"@react-md/core/button/Button\";\n   * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n   * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n   * import { type ReactElement, type ReactNode } from \"react\";\n   *\n   * export interface TooltippedButtonProps extends ButtonProps {\n   *   tooltip?: ReactNode;\n   * }\n   *\n   * export function TooltippedButton({\n   *   id,\n   *   tooltip,\n   *   children,\n   *   onBlur,\n   *   onFocus,\n   *   onMouseEnter,\n   *   onMouseLeave,\n   *   onTouchStart,\n   *   onTouchEnd,\n   *   onContextMenu,\n   *   ...props\n   * }: TooltippedButtonProps): ReactElement {\n   *   const { elementProps, tooltipProps } = useTooltip({\n   *     id,\n   *     disabled: !tooltip,\n   *     onBlur,\n   *     onFocus,\n   *     onMouseEnter,\n   *     onMouseLeave,\n   *     onTouchStart,\n   *     onTouchEnd,\n   *     onContextMenu,\n   *   });\n   *\n   *   return (\n   *     <>\n   *       <Button {...props} {...elementProps}>\n   *         {children}\n   *       </Button>\n   *       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `false`\n   * @since 5.1.0\n   */\n  disabled?: boolean;\n\n  /**\n   * The amount of time (in ms) to hover an element before the tooltip becomes\n   * visible.\n   *\n   * The default value is really the current hover timeout from the\n   * `TooltipHoverModeProvider`.\n   *\n   * @defaultValue `1000`\n   */\n  hoverTimeout?: number;\n\n  /**\n   * The amount of time to wait before triggering the exit animation for the\n   * tooltip.\n   *\n   * The default value is really the current leaveTimeout timeout from the\n   * `TooltipHoverModeProvider`.\n   *\n   * @defaultValue `0`\n   */\n  leaveTimeout?: number;\n\n  /**\n   * Set this to `true` to only allow the tooltip to become visible when the\n   * `event .currentTarget` or `overflowRef` has text overflow.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  overflowOnly?: boolean;\n\n  /**\n   * @see {@link FixedPositioningOptions.disabled}\n   * @defaultValue `false`\n   */\n  disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`\n */\nexport interface ProvidedTooltipProps<\n  E extends HTMLElement = HTMLSpanElement,\n> extends Required<FixedPositioningTransitionCallbacks> {\n  id: string;\n  ref: Ref<E>;\n  dense: boolean;\n  style: CSSProperties | undefined;\n  visible: boolean;\n  position: SimplePosition;\n}\n\n/**\n * @since 2.8.0\n * @since 6.0.0 No longer returns any properties from the hover mode provider\n * because of the major API change to hover mode.. Also renamed from\n * `TooltipHookReturnValue` to `TooltipImplementation` to match other hook\n * naming conventions.\n */\nexport interface TooltipImplementation<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n  TooltipElement extends HTMLElement = HTMLSpanElement,\n> extends ControlledHoverModeImplementation {\n  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n  animatedOnce: boolean;\n  initiatedBy: MutableRefObject<UserInteractionMode | null>;\n  elementProps: ProvidedTooltippedElementProps<TooltippedElement>;\n  tooltipProps: ProvidedTooltipProps<TooltipElement>;\n\n  /**\n   * This is a wrapper around the {@link setVisible} behavior that will also\n   * clear any pending timeouts.\n   */\n  hideTooltip: () => void;\n\n  /**\n   * @since 6.0.0\n   */\n  overflowRef: RefObject<HTMLElement>;\n}\n\n/**\n * @example Simple Usage\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n *\n * function Example() {\n *   const { elementProps, tooltipProps } = useTooltip();\n *\n *   return (\n *     <>\n *       <Button {...elementProps}>Button</Button>\n *       <Tooltip {...tooltipProps}>\n *         Tooltip Content\n *       </Tooltip>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Overflow-only Tooltips\n * ```tsx\n * import { cssUtils } from \"@react-md/core/cssUtils\";\n * import { Link, type LinkProps } from \"@react-md/core/link/Link\";\n * import { Tooltip } from \"@react-md/core/tooltip/Tooltip\";\n * import { useTooltip } from \"@react-md/core/tooltip/useTooltip\";\n * import { type ReactElement } from \"react\";\n *\n * function NavigationLink(props: LinkProps): ReactElement {\n *   const { children, ...remaining } = props;\n *\n *   // using the `overflowRef` is optional and will default to the\n *   // `event.currentTarget` when `null`\n *   const { overflowRef, elementProps, tooltipProps } = useOverflowTooltip({\n *     // just to pass any event handlers\n *     ...remaining,\n *     overflowOnly: true,\n *   });\n *\n *   return (\n *     <Link {...remaining} {...elementProps} style={{ width: \"100%\" }}>\n *       <span ref={overflowRef} className={cssUtils({ textOverflow: \"ellipsis\" })}>\n *         {children}\n *       </span>\n *       <Tooltip {...tooltipProps}>\n *         {children}\n *       </Tooltip>\n *     </Link>\n *   );\n * }\n *\n * function Example(): ReactElement {\n *   return (\n *     <div style={{ width: \"10rem\", overflow: \"auto\" }}>\n *       <NavigationLink href=\"/\">Home</NavigationLink>\n *       <NavigationLink href=\"/some-path\">\n *         Super long text that will be truncated with ellipsis and\n *         have a tooltip appear\n *       </NavigationLink>\n *     </div>\n *   );\n * }\n * ```\n *\n * ## Inspecting Tooltip Styles\n *\n * Since tooltips will disappear on blur, mouseleave, etc, it is a bit hard to\n * inspect the tooltip styles. In dev mode, you can manually set the visibility\n * to `true` through the dev tools.\n * - find your tooltip implementation\n * - expand the Tooltip hook\n * - expand the HoverMode hook\n * - set the first boolean state to `true`\n *\n * The tooltip will now remain visible allowing you to find it within the\n * \"Inspector\" tab in the dev tools.\n *\n * @see {@link https://react-md.dev/components/tooltip | Tooltip Demos}\n * @since 2.8.0\n * @since 6.0.0 Uses a separate `TooltipHoverModeProvider`.\n *\n * TODO: I need to fix the tooltip for click events and history changes since\n * the mouseleave event will not be correctly bubbled if hovering a child\n * element when the click or history update happens. this causes the tooltip to\n * stay visible\n */\nexport function useTooltip<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n  TooltipElement extends HTMLElement = HTMLSpanElement,\n>(\n  options: TooltipOptions<TooltippedElement> = {}\n): TooltipImplementation<TooltippedElement, TooltipElement> {\n  const {\n    id: propId,\n    style: propStyle,\n    disabled = false,\n    describedBy,\n    dense = false,\n    hoverTimeout,\n    leaveTimeout,\n    vwMargin = DEFAULT_TOOLTIP_MARGIN,\n    vhMargin = DEFAULT_TOOLTIP_MARGIN,\n    spacing = DEFAULT_TOOLTIP_SPACING,\n    denseSpacing = DEFAULT_TOOLTIP_DENSE_SPACING,\n    disableSwapping,\n    disableAutoSpacing,\n    position: determinedPosition,\n    defaultPosition = DEFAULT_TOOLTIP_POSITION,\n    threshold = DEFAULT_TOOLTIP_THRESHOLD,\n    onBlur = noop,\n    onFocus = noop,\n    onMouseEnter = noop,\n    onMouseLeave = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onContextMenu = noop,\n    onEnter = noop,\n    onEntering,\n    onEntered = noop,\n    onExited,\n    overflowOnly,\n    disableFixedPositioning,\n  } = options;\n\n  const fallbackId = useId();\n  const id = propId || fallbackId;\n  const tooltipId = `${id}-tooltip`;\n  const {\n    animatedOnceRef,\n    hoverTimeoutRef,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n  } = useTooltipHoverMode();\n  const {\n    visible,\n    setVisible,\n    startShowFlow,\n    startHideFlow,\n    clearVisibilityTimeout,\n  } = useHoverMode({\n    hoverTimeout,\n    hoverTimeoutRef,\n    leaveTimeout,\n    leaveTimeoutRef,\n    enableHoverMode,\n    disableHoverMode,\n    startDisableTimer,\n    clearDisableTimer,\n  });\n  const [position, updatePosition] = useTooltipPosition({\n    position: determinedPosition,\n    defaultPosition,\n    threshold,\n  });\n\n  const mode = useUserInteractionMode();\n  const elementRef = useRef<HTMLElement | null>(null);\n  const tooltipRef = useRef<TooltipElement>(null);\n  const overflowRef = useRef<HTMLElement>(null);\n  const initiatedBy = useRef<UserInteractionMode | null>(null);\n  const { ref, style, callbacks } = useFixedPositioning({\n    nodeRef: tooltipRef,\n    style: propStyle,\n    fixedTo: elementRef,\n    anchor: getAnchor(position),\n    disableSwapping: disableSwapping ?? !!determinedPosition,\n    disabled: disableFixedPositioning,\n    getFixedPositionOptions() {\n      let tooltipSpacing = dense ? denseSpacing : spacing;\n      const tooltip = tooltipRef.current;\n      if (!disableAutoSpacing && tooltip) {\n        tooltipSpacing =\n          window\n            .getComputedStyle(tooltip)\n            .getPropertyValue(TOOLTIP_SPACING_VAR) || spacing;\n      }\n\n      const currentSpacing = parseCssLengthUnit({\n        value: tooltipSpacing,\n      });\n      const horizontal = position === \"left\" || position === \"right\";\n\n      return {\n        vwMargin,\n        vhMargin,\n        xMargin: horizontal ? currentSpacing : undefined,\n        yMargin: horizontal ? undefined : currentSpacing,\n      };\n    },\n    onEnter(appearing) {\n      onEnter(appearing);\n\n      // This allows you to inspect the tooltip styles through the element\n      // inspector without first hovering or focusing the tooltipped element\n      // beforehand by setting the `HoverMode` hook to `true`\n      if (process.env.NODE_ENV !== \"production\" && !elementRef.current) {\n        elementRef.current = document.getElementById(id);\n      }\n    },\n    onEntering,\n    onEntered(appearing) {\n      onEntered(appearing);\n\n      animatedOnceRef.current = true;\n    },\n    onExited,\n  });\n\n  const hideTooltip = useCallback(() => {\n    initiatedBy.current = null;\n    disableHoverMode();\n    clearVisibilityTimeout();\n    setVisible(false);\n  }, [clearVisibilityTimeout, disableHoverMode, setVisible]);\n\n  useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") {\n        hideTooltip();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    window.addEventListener(\"scroll\", hideTooltip, true);\n    window.addEventListener(\"touchend\", hideTooltip, true);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n      window.removeEventListener(\"scroll\", hideTooltip, true);\n      window.removeEventListener(\"touchend\", hideTooltip, true);\n    };\n  }, [hideTooltip, visible]);\n\n  const refocusFrame = useRef(0);\n  const pageInactive = useRef(false);\n  usePageInactive({\n    disabled,\n    onDisabledCleanup: hideTooltip,\n    onChange(active) {\n      if (active) {\n        refocusFrame.current = window.requestAnimationFrame(() => {\n          pageInactive.current = false;\n        });\n        return;\n      }\n\n      pageInactive.current = true;\n      hideTooltip();\n    },\n  });\n\n  const isNotOverflown = (currentTarget: HTMLElement): boolean => {\n    if (!overflowOnly) {\n      return false;\n    }\n\n    const element = overflowRef.current || currentTarget;\n    return !element || element.offsetWidth >= element.scrollWidth;\n  };\n\n  return {\n    visible,\n    setVisible,\n    hideTooltip,\n    animatedOnce: animatedOnceRef.current,\n    initiatedBy,\n    overflowRef,\n    startShowFlow,\n    startHideFlow,\n    clearVisibilityTimeout,\n    tooltipProps: {\n      id: tooltipId,\n      ref,\n      dense,\n      style,\n      visible,\n      position,\n      ...callbacks,\n    },\n    elementProps: {\n      \"aria-describedby\": cnb(visible && tooltipId, describedBy) || undefined,\n      id,\n      onMouseEnter(event) {\n        onMouseEnter(event);\n        if (\n          disabled ||\n          mode === \"touch\" ||\n          initiatedBy.current !== null ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        initiatedBy.current = \"mouse\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onMouseLeave(event) {\n        onMouseLeave(event);\n        if (disabled || initiatedBy.current !== \"mouse\") {\n          return;\n        }\n\n        startHideFlow();\n        initiatedBy.current = null;\n      },\n      onBlur(event) {\n        onBlur(event);\n        if (disabled) {\n          return;\n        }\n\n        initiatedBy.current = null;\n        startHideFlow();\n      },\n      onFocus(event) {\n        onFocus(event);\n        // skip the focus events when the browser is re-focused if the user\n        // pressed alt-tab, minimized the browser, etc\n        if (\n          disabled ||\n          mode !== \"keyboard\" ||\n          initiatedBy.current !== null ||\n          pageInactive.current ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          pageInactive.current = false;\n          return;\n        }\n\n        initiatedBy.current = \"keyboard\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onTouchStart(event) {\n        onTouchStart(event);\n        if (\n          disabled ||\n          initiatedBy.current !== null ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        initiatedBy.current = \"touch\";\n        elementRef.current = event.currentTarget;\n        updatePosition(event.currentTarget);\n        startShowFlow(id);\n      },\n      onTouchEnd(event) {\n        onTouchEnd(event);\n        if (disabled) {\n          return;\n        }\n\n        initiatedBy.current = null;\n        startHideFlow();\n      },\n      onContextMenu(event) {\n        onContextMenu(event);\n        if (\n          disabled ||\n          initiatedBy.current !== \"touch\" ||\n          isNotOverflown(event.currentTarget)\n        ) {\n          return;\n        }\n\n        event.preventDefault();\n        const selection = window.getSelection();\n        const node = selection?.anchorNode?.parentElement;\n        if (node && event.currentTarget.contains(node)) {\n          selection.empty();\n        }\n      },\n    },\n  };\n}\n"],"names":["cnb","useCallback","useEffect","useId","useRef","useHoverMode","useUserInteractionMode","useFixedPositioning","usePageInactive","parseCssLengthUnit","useTooltipHoverMode","DEFAULT_TOOLTIP_DENSE_SPACING","DEFAULT_TOOLTIP_MARGIN","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_SPACING","DEFAULT_TOOLTIP_THRESHOLD","TOOLTIP_SPACING_VAR","useTooltipPosition","getAnchor","noop","useTooltip","options","id","propId","style","propStyle","disabled","describedBy","dense","hoverTimeout","leaveTimeout","vwMargin","vhMargin","spacing","denseSpacing","disableSwapping","disableAutoSpacing","position","determinedPosition","defaultPosition","threshold","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","onEnter","onEntering","onEntered","onExited","overflowOnly","disableFixedPositioning","fallbackId","tooltipId","animatedOnceRef","hoverTimeoutRef","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","visible","setVisible","startShowFlow","startHideFlow","clearVisibilityTimeout","updatePosition","mode","elementRef","tooltipRef","overflowRef","initiatedBy","ref","callbacks","nodeRef","fixedTo","anchor","getFixedPositionOptions","tooltipSpacing","tooltip","current","window","getComputedStyle","getPropertyValue","currentSpacing","value","horizontal","xMargin","undefined","yMargin","appearing","process","env","NODE_ENV","document","getElementById","hideTooltip","handleKeyDown","event","key","addEventListener","removeEventListener","refocusFrame","pageInactive","onDisabledCleanup","onChange","active","requestAnimationFrame","isNotOverflown","currentTarget","element","offsetWidth","scrollWidth","animatedOnce","tooltipProps","elementProps","preventDefault","selection","getSelection","node","anchorNode","parentElement","contains","empty"],"mappings":"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"}

package/dist/transition/CSSTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/CSSTransition.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Children, type ReactElement, cloneElement } from \"react\";\n\nimport {\n  type CSSTransitionComponentImplementation,\n  type CSSTransitionHookOptions,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\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 CSSTransitionProps<E extends HTMLElement>\n  extends CSSTransitionHookOptions<E>,\n    CSSTransitionComponentImplementation<E> {}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCSSTransition} hook that\n * 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 Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button } from \"@react-md/core/button/Button\":\n * import { CSSTransition } from \"@react-md/core/transition/CSSTransition\":\n *\n * // pretend global styles:\n * //\n * // .opacity--enter {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n * //\n * // .opacity--enter-active {\n * //   opacity: 1;\n * // }\n * //\n * // .opacity--exit {\n * //   opacity: 1;\n * // }\n * //\n * // .opacity--exit-active {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <CSSTransition\n *         timeout={300}\n *         className=\"opacity\"\n *         temporary\n *         transitionIn={transitionIn}\n *       >\n *         <div>\n *           This is some content that will animate!\n *         </div>\n *       </CSSTransition>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/css-transition | CSSTransition Demos}\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function CSSTransition<E extends HTMLElement>(\n  props: CSSTransitionProps<E>\n): ReactElement | null {\n  const { children, className, ...options } = props;\n  const child = Children.only(children);\n  const { elementProps, rendered } = useCSSTransition({\n    ...options,\n    className: cnb(child.props.className, className),\n  });\n\n  return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCSSTransition","CSSTransition","props","children","className","options","child","only","elementProps","rendered"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAqBC,YAAY,QAAQ,QAAQ;AAMlE,SAASC,gBAAgB,QAAQ,wBAAwB;AAWzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DC,GACD,OAAO,SAASC,cACdC,KAA4B;IAE5B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,iBAAiB;QAClD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}
+{"version":3,"sources":["../../src/transition/CSSTransition.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Children, type ReactElement, cloneElement } from \"react\";\n\nimport {\n  type CSSTransitionComponentImplementation,\n  type CSSTransitionHookOptions,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\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 CSSTransitionProps<E extends HTMLElement>\n  extends\n    CSSTransitionHookOptions<E>,\n    CSSTransitionComponentImplementation<E> {}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCSSTransition} hook that\n * 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 Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button } from \"@react-md/core/button/Button\":\n * import { CSSTransition } from \"@react-md/core/transition/CSSTransition\":\n *\n * // pretend global styles:\n * //\n * // .opacity--enter {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n * //\n * // .opacity--enter-active {\n * //   opacity: 1;\n * // }\n * //\n * // .opacity--exit {\n * //   opacity: 1;\n * // }\n * //\n * // .opacity--exit-active {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <CSSTransition\n *         timeout={300}\n *         className=\"opacity\"\n *         temporary\n *         transitionIn={transitionIn}\n *       >\n *         <div>\n *           This is some content that will animate!\n *         </div>\n *       </CSSTransition>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/css-transition | CSSTransition Demos}\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function CSSTransition<E extends HTMLElement>(\n  props: CSSTransitionProps<E>\n): ReactElement | null {\n  const { children, className, ...options } = props;\n  const child = Children.only(children);\n  const { elementProps, rendered } = useCSSTransition({\n    ...options,\n    className: cnb(child.props.className, className),\n  });\n\n  return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCSSTransition","CSSTransition","props","children","className","options","child","only","elementProps","rendered"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAqBC,YAAY,QAAQ,QAAQ;AAMlE,SAASC,gBAAgB,QAAQ,wBAAwB;AAYzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DC,GACD,OAAO,SAASC,cACdC,KAA4B;IAE5B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAC5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,iBAAiB;QAClD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}

package/dist/transition/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/Collapse.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Children, type ReactElement, cloneElement } from \"react\";\n\nimport {\n  type CollapseElementProps,\n  type CollapseTransitionHookOptions,\n  useCollapseTransition,\n} from \"./useCollapseTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n *\n * @since 2.0.0\n * @since 4.0.0 Updated for the new CSS Transition API.\n */\nexport interface CollapseProps<E extends HTMLElement>\n  extends Omit<CollapseTransitionHookOptions<E>, \"transitionIn\"> {\n  /**\n   * The child element that should have a `ref` and the `style`/`className`\n   * props cloned into using the `cloneElement` API. If the child is a custom\n   * component, you **must** use `React.forwardRef` and pass the `ref` and the\n   * other props for the transition to work correctly.\n   */\n  children: ReactElement<CollapseElementProps<E>>;\n\n  /**\n   * Boolean if the element should be collapsed.\n   *\n   * @see {@link CollapseTransitionHookOptions.transitionIn}\n   */\n  collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCollapseTransition} 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 Simple Example\n * ```tsx\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *\n *   return (\n *     <>\n *       <Button onClick={() => setCollapsed(!collapsed)}>\n *         Toggle\n *       </Button>\n *       <Collapse collapsed={collapsed}>\n *         <div>\n *           Some content that should only be visible while not collapsed.\n *         </div>\n *       </Collapse>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/collapse | Collapse Demos}\n * @see {@link useCollapseTransition} for additional examples\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 function Collapse<E extends HTMLElement>(\n  props: CollapseProps<E>\n): ReactElement {\n  const { children, collapsed, className, ...options } = props;\n  const child = Children.only(children);\n  const { elementProps, rendered } = useCollapseTransition({\n    ...options,\n    className: cnb(child.props.className, className),\n    transitionIn: !collapsed,\n  });\n\n  return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCollapseTransition","Collapse","props","children","collapsed","className","options","child","only","elementProps","rendered","transitionIn"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAqBC,YAAY,QAAQ,QAAQ;AAElE,SAGEC,qBAAqB,QAChB,6BAA6B;AA2BpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,SACdC,KAAuB;IAEvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGJ;IACvD,MAAMK,QAAQT,SAASU,IAAI,CAACL;IAC5B,MAAM,EAAEM,YAAY,EAAEC,QAAQ,EAAE,GAAGV,sBAAsB;QACvD,GAAGM,OAAO;QACVD,WAAWR,IAAIU,MAAML,KAAK,CAACG,SAAS,EAAEA;QACtCM,cAAc,CAACP;IACjB;IAEA,qBAAO;kBAAGM,0BAAYX,aAAaI,UAAUM;;AAC/C"}
+{"version":3,"sources":["../../src/transition/Collapse.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Children, type ReactElement, cloneElement } from \"react\";\n\nimport {\n  type CollapseElementProps,\n  type CollapseTransitionHookOptions,\n  useCollapseTransition,\n} from \"./useCollapseTransition.js\";\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n *\n * @since 2.0.0\n * @since 4.0.0 Updated for the new CSS Transition API.\n */\nexport interface CollapseProps<E extends HTMLElement> extends Omit<\n  CollapseTransitionHookOptions<E>,\n  \"transitionIn\"\n> {\n  /**\n   * The child element that should have a `ref` and the `style`/`className`\n   * props cloned into using the `cloneElement` API. If the child is a custom\n   * component, you **must** use `React.forwardRef` and pass the `ref` and the\n   * other props for the transition to work correctly.\n   */\n  children: ReactElement<CollapseElementProps<E>>;\n\n  /**\n   * Boolean if the element should be collapsed.\n   *\n   * @see {@link CollapseTransitionHookOptions.transitionIn}\n   */\n  collapsed: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is a component implementation of the {@link useCollapseTransition} 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 Simple Example\n * ```tsx\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *\n *   return (\n *     <>\n *       <Button onClick={() => setCollapsed(!collapsed)}>\n *         Toggle\n *       </Button>\n *       <Collapse collapsed={collapsed}>\n *         <div>\n *           Some content that should only be visible while not collapsed.\n *         </div>\n *       </Collapse>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/collapse | Collapse Demos}\n * @see {@link useCollapseTransition} for additional examples\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 function Collapse<E extends HTMLElement>(\n  props: CollapseProps<E>\n): ReactElement {\n  const { children, collapsed, className, ...options } = props;\n  const child = Children.only(children);\n  const { elementProps, rendered } = useCollapseTransition({\n    ...options,\n    className: cnb(child.props.className, className),\n    transitionIn: !collapsed,\n  });\n\n  return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useCollapseTransition","Collapse","props","children","collapsed","className","options","child","only","elementProps","rendered","transitionIn"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAqBC,YAAY,QAAQ,QAAQ;AAElE,SAGEC,qBAAqB,QAChB,6BAA6B;AA6BpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,GACD,OAAO,SAASC,SACdC,KAAuB;IAEvB,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGJ;IACvD,MAAMK,QAAQT,SAASU,IAAI,CAACL;IAC5B,MAAM,EAAEM,YAAY,EAAEC,QAAQ,EAAE,GAAGV,sBAAsB;QACvD,GAAGM,OAAO;QACVD,WAAWR,IAAIU,MAAML,KAAK,CAACG,SAAS,EAAEA;QACtCM,cAAc,CAACP;IACjB;IAEA,qBAAO;kBAAGM,0BAAYX,aAAaI,UAAUM;;AAC/C"}

package/dist/transition/CrossFade.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/CrossFade.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Children, type ReactElement, cloneElement } from \"react\";\n\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n  type CrossFadeTransitionHookOptions,\n  useCrossFadeTransition,\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 * @see {@link https://react-md.dev/components/cross-fade | CrossFade Demos}\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"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAqBC,YAAY,QAAQ,QAAQ;AAGlE,SAEEC,sBAAsB,QACjB,8BAA8B;AAqBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,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"}
+{"version":3,"sources":["../../src/transition/CrossFade.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Children, type ReactElement, cloneElement } from \"react\";\n\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n  type CrossFadeTransitionHookOptions,\n  useCrossFadeTransition,\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\n    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 * @see {@link https://react-md.dev/components/cross-fade | CrossFade Demos}\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"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAqBC,YAAY,QAAQ,QAAQ;AAGlE,SAEEC,sBAAsB,QACjB,8BAA8B;AAsBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,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/ScaleTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/ScaleTransition.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Children, type ReactElement, cloneElement } from \"react\";\n\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n  type ScaleTransitionHookOptions,\n  useScaleTransition,\n} from \"./useScaleTransition.js\";\n\n/**\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 2.0.0\n * @since 4.0.0 The typeParam was added\n * @since 6.0.0 Removed portal props\n */\nexport interface ScaleTransitionProps<E extends HTMLElement>\n  extends CSSTransitionComponentImplementation<E>,\n    ScaleTransitionHookOptions<E> {}\n\n/**\n * **Client Component**\n *\n * A component implementation of the {@link useScaleTransition} hook that just\n * has some reasonable defaults and supports portalling the children. Since this\n * component uses the `React.cloneElement` to inject the `ref` and `className`\n * into the `children`, it is recommended to use the hook instead.\n *\n * @example Dropdown Menu Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\";\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 *\n *   return (\n *     <>\n *       <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <ScaleTransition\n *         {...transitionOptions}\n *         vertical\n *         transitionIn={transitionIn}\n *       >\n *         <div style={style}>\n *           Some content within a menu\n *         </div>\n *       </ScaleTransition>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/scale-transition | ScaleTransition Demos}\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 2.0.0\n * @since 4.0.0 The typeParam was added and the API was updated.\n * @since 6.0.0 Removed the built-in support for portalling.\n */\nexport function ScaleTransition<E extends HTMLElement>(\n  props: ScaleTransitionProps<E>\n): ReactElement {\n  const { children, className, ...options } = props;\n  const child = Children.only(children);\n\n  const { elementProps, rendered } = useScaleTransition({\n    ...options,\n    className: cnb(child.props.className, className),\n  });\n\n  return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useScaleTransition","ScaleTransition","props","children","className","options","child","only","elementProps","rendered"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAqBC,YAAY,QAAQ,QAAQ;AAGlE,SAEEC,kBAAkB,QACb,0BAA0B;AAajC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,gBACdC,KAA8B;IAE9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAE5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,mBAAmB;QACpD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}
+{"version":3,"sources":["../../src/transition/ScaleTransition.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { Children, type ReactElement, cloneElement } from \"react\";\n\nimport { type CSSTransitionComponentImplementation } from \"./types.js\";\nimport {\n  type ScaleTransitionHookOptions,\n  useScaleTransition,\n} from \"./useScaleTransition.js\";\n\n/**\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 2.0.0\n * @since 4.0.0 The typeParam was added\n * @since 6.0.0 Removed portal props\n */\nexport interface ScaleTransitionProps<E extends HTMLElement>\n  extends\n    CSSTransitionComponentImplementation<E>,\n    ScaleTransitionHookOptions<E> {}\n\n/**\n * **Client Component**\n *\n * A component implementation of the {@link useScaleTransition} hook that just\n * has some reasonable defaults and supports portalling the children. Since this\n * component uses the `React.cloneElement` to inject the `ref` and `className`\n * into the `children`, it is recommended to use the hook instead.\n *\n * @example Dropdown Menu Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\";\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 *\n *   return (\n *     <>\n *       <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <ScaleTransition\n *         {...transitionOptions}\n *         vertical\n *         transitionIn={transitionIn}\n *       >\n *         <div style={style}>\n *           Some content within a menu\n *         </div>\n *       </ScaleTransition>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/scale-transition | ScaleTransition Demos}\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 2.0.0\n * @since 4.0.0 The typeParam was added and the API was updated.\n * @since 6.0.0 Removed the built-in support for portalling.\n */\nexport function ScaleTransition<E extends HTMLElement>(\n  props: ScaleTransitionProps<E>\n): ReactElement {\n  const { children, className, ...options } = props;\n  const child = Children.only(children);\n\n  const { elementProps, rendered } = useScaleTransition({\n    ...options,\n    className: cnb(child.props.className, className),\n  });\n\n  return <>{rendered && cloneElement(children, elementProps)}</>;\n}\n"],"names":["cnb","Children","cloneElement","useScaleTransition","ScaleTransition","props","children","className","options","child","only","elementProps","rendered"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,EAAqBC,YAAY,QAAQ,QAAQ;AAGlE,SAEEC,kBAAkB,QACb,0BAA0B;AAcjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CC,GACD,OAAO,SAASC,gBACdC,KAA8B;IAE9B,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,SAAS,GAAGH;IAC5C,MAAMI,QAAQR,SAASS,IAAI,CAACJ;IAE5B,MAAM,EAAEK,YAAY,EAAEC,QAAQ,EAAE,GAAGT,mBAAmB;QACpD,GAAGK,OAAO;QACVD,WAAWP,IAAIS,MAAMJ,KAAK,CAACE,SAAS,EAAEA;IACxC;IAEA,qBAAO;kBAAGK,0BAAYV,aAAaI,UAAUK;;AAC/C"}

package/dist/transition/SkeletonPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/SkeletonPlaceholder.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport {\n  type SkeletonPlaceholderOptions,\n  useSkeletonPlaceholder,\n} from \"./useSkeletonPlaceholder.js\";\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SkeletonPlaceholderOptions {\n  /**\n   * @defaultValue `!!children`\n   * @see {@link SkeletonPlaceholderOptions.disabled}\n   */\n  disabled?: boolean;\n\n  /** @see {@link SkeletonPlaceholderOptions.disabled} for an example */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core/transition/SkeletonPlaceholder\";\n *\n * interface ExampleProps {\n *   loading: boolean;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ loading, children }: ExampleProps): ReactElement {\n *   if (loading) {\n *     return <SkeletonPlaceholder />;\n *   }\n *\n *   return <>{children}</>;\n * }\n * ```\n *\n * @example Pre-rendered Layout\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core/transition/SkeletonPlaceholder\";\n *\n * interface Data {\n *   id: string;\n *   name: string;\n *   createdBy: string\n *   createdOn: string;\n *   modifiedBy: string;\n *   modifiedOn: string;\n * }\n *\n * function ShowData({\n *   id,\n *   name,\n *   createdBy,\n *   createdOn,\n *   modifiedBy,\n *   modifiedOn,\n * }: Partial<Data>:: ReactElement {\n *   const loading =\n *     !name &&\n *     !createdBy &&\n *     !createdOn &&\n *     !modifiedBy &&\n *     !modifiedOn;\n *\n *   return (\n *     <Box grid gridName=\"custom-class-name\">\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {id}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {name}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {createdOn}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {createdBy}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {modifiedOn}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {modifiedBy}\n *       </SkeletonPlaceholder>\n *     </Box>\n *   );\n * }\n *\n * export function Example(): ReactElement {\n *   const { data } = useLoadSomeDataQuery();\n *\n *   const items = useMemo(() => {\n *     // if the data has been fetched, just return the data\n *     if (data) {\n *       return data;\n *     }\n *\n *     // if the data does not exist, set up a skeleton of your layout by\n *     // rendering a random number of items.\n *     //\n *     // NOTE: This is memoized so you don't create a random length each\n *     // render\n *     const length = randomInt({ min: 3, max: 10 })\n *     return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n *   }, [data])\n *\n *   return (\n *     <List>\n *       {items.map((item) => <ShowData {...item} />)}\n *     </List>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}\n * @since 6.0.0\n */\nexport const SkeletonPlaceholder = forwardRef<\n  HTMLDivElement,\n  SkeletonPlaceholderProps\n>(function SkeletonPlaceholder(props, ref): ReactElement {\n  const {\n    style,\n    className,\n    height,\n    width,\n    children,\n    disabled = !!children,\n    delay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n    ...remaining\n  } = props;\n  const skeleton = useSkeletonPlaceholder({\n    disabled,\n    style,\n    className,\n    height,\n    width,\n    delay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  });\n\n  return (\n    <div {...remaining} ref={ref} {...skeleton}>\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","useSkeletonPlaceholder","SkeletonPlaceholder","props","ref","style","className","height","width","children","disabled","delay","minDelay","maxDelay","minPercentage","maxPercentage","remaining","skeleton","div"],"mappings":"AAAA;;AAEA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAEEC,sBAAsB,QACjB,8BAA8B;AAgBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGC,GACD,OAAO,MAAMC,oCAAsBF,WAGjC,SAASE,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,WAAW,CAAC,CAACD,QAAQ,EACrBE,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACb,GAAGC,WACJ,GAAGb;IACJ,MAAMc,WAAWhB,uBAAuB;QACtCS;QACAL;QACAC;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACG;QAAK,GAAGF,SAAS;QAAEZ,KAAKA;QAAM,GAAGa,QAAQ;kBACvCR;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/transition/SkeletonPlaceholder.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport {\n  type SkeletonPlaceholderOptions,\n  useSkeletonPlaceholder,\n} from \"./useSkeletonPlaceholder.js\";\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderProps\n  extends HTMLAttributes<HTMLDivElement>, SkeletonPlaceholderOptions {\n  /**\n   * @defaultValue `!!children`\n   * @see {@link SkeletonPlaceholderOptions.disabled}\n   */\n  disabled?: boolean;\n\n  /** @see {@link SkeletonPlaceholderOptions.disabled} for an example */\n  children?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core/transition/SkeletonPlaceholder\";\n *\n * interface ExampleProps {\n *   loading: boolean;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ loading, children }: ExampleProps): ReactElement {\n *   if (loading) {\n *     return <SkeletonPlaceholder />;\n *   }\n *\n *   return <>{children}</>;\n * }\n * ```\n *\n * @example Pre-rendered Layout\n * ```tsx\n * import type { ReactElement } from \"@react\";\n * import { SkeletonPlaceholder } from \"@react-md/core/transition/SkeletonPlaceholder\";\n *\n * interface Data {\n *   id: string;\n *   name: string;\n *   createdBy: string\n *   createdOn: string;\n *   modifiedBy: string;\n *   modifiedOn: string;\n * }\n *\n * function ShowData({\n *   id,\n *   name,\n *   createdBy,\n *   createdOn,\n *   modifiedBy,\n *   modifiedOn,\n * }: Partial<Data>:: ReactElement {\n *   const loading =\n *     !name &&\n *     !createdBy &&\n *     !createdOn &&\n *     !modifiedBy &&\n *     !modifiedOn;\n *\n *   return (\n *     <Box grid gridName=\"custom-class-name\">\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {id}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {name}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {createdOn}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {createdBy}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {modifiedOn}\n *       </SkeletonPlaceholder>\n *       <SkeletonPlaceholder disabled={!loading}>\n *         {modifiedBy}\n *       </SkeletonPlaceholder>\n *     </Box>\n *   );\n * }\n *\n * export function Example(): ReactElement {\n *   const { data } = useLoadSomeDataQuery();\n *\n *   const items = useMemo(() => {\n *     // if the data has been fetched, just return the data\n *     if (data) {\n *       return data;\n *     }\n *\n *     // if the data does not exist, set up a skeleton of your layout by\n *     // rendering a random number of items.\n *     //\n *     // NOTE: This is memoized so you don't create a random length each\n *     // render\n *     const length = randomInt({ min: 3, max: 10 })\n *     return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n *   }, [data])\n *\n *   return (\n *     <List>\n *       {items.map((item) => <ShowData {...item} />)}\n *     </List>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}\n * @since 6.0.0\n */\nexport const SkeletonPlaceholder = forwardRef<\n  HTMLDivElement,\n  SkeletonPlaceholderProps\n>(function SkeletonPlaceholder(props, ref): ReactElement {\n  const {\n    style,\n    className,\n    height,\n    width,\n    children,\n    disabled = !!children,\n    delay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n    ...remaining\n  } = props;\n  const skeleton = useSkeletonPlaceholder({\n    disabled,\n    style,\n    className,\n    height,\n    width,\n    delay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  });\n\n  return (\n    <div {...remaining} ref={ref} {...skeleton}>\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","useSkeletonPlaceholder","SkeletonPlaceholder","props","ref","style","className","height","width","children","disabled","delay","minDelay","maxDelay","minPercentage","maxPercentage","remaining","skeleton","div"],"mappings":"AAAA;;AAEA,SAIEA,UAAU,QACL,QAAQ;AAEf,SAEEC,sBAAsB,QACjB,8BAA8B;AAerC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGC,GACD,OAAO,MAAMC,oCAAsBF,WAGjC,SAASE,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,WAAW,CAAC,CAACD,QAAQ,EACrBE,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACb,GAAGC,WACJ,GAAGb;IACJ,MAAMc,WAAWhB,uBAAuB;QACtCS;QACAL;QACAC;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACG;QAAK,GAAGF,SAAS;QAAEZ,KAAKA;QAAM,GAAGa,QAAQ;kBACvCR;;AAGP,GAAG"}

package/dist/transition/Slide.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/Slide.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"./types.js\";\nimport {\n  DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n  useSlideTransition,\n} from \"./useSlideTransition.js\";\n\n// NOTE: Tis is in both `useSlideTransition` and `Slide` since there are no\n// reusable types between these two files.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-slide-duration\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface SlideProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * Set this to `true` to animate this slide into view within a\n   * `SlideContainer`. When this switches from `true` to `false`, it will\n   * animate out.\n   */\n  active: boolean;\n\n  /** @defaultValue {@link DEFAULT_SLIDE_TRANSITION_DURATION} */\n  timeout?: TransitionTimeout;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A reasonable default for handling a slide transition using\n * {@link useSlideTransition}.\n *\n * @see {@link https://react-md.dev/components/slide | Slide Demos}\n * @see {@link SlideContainer} for example usage.\n * @since 6.0.0\n */\nexport const Slide = forwardRef<HTMLDivElement, SlideProps>(\n  function Slide(props, nodeRef) {\n    const {\n      active,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      className,\n      children,\n      timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n      temporary = false,\n      exitedHidden = true,\n      ...remaining\n    } = props;\n\n    const { rendered, elementProps } = useSlideTransition({\n      nodeRef,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      className,\n      timeout,\n      temporary,\n      transitionIn: active,\n      exitedHidden,\n    });\n\n    if (!rendered) {\n      return null;\n    }\n\n    return (\n      <div {...remaining} {...elementProps}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","DEFAULT_SLIDE_TRANSITION_TIMEOUT","useSlideTransition","Slide","props","nodeRef","active","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","className","children","timeout","temporary","exitedHidden","remaining","rendered","elementProps","transitionIn","div"],"mappings":"AAAA;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAOxE,SACEC,gCAAgC,EAChCC,kBAAkB,QACb,0BAA0B;AA2BjC;;;;;;;;;CASC,GACD,OAAO,MAAMC,sBAAQH,WACnB,SAASG,MAAMC,KAAK,EAAEC,OAAO;IAC3B,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,UAAUjB,gCAAgC,EAC1CkB,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,WACJ,GAAGjB;IAEJ,MAAM,EAAEkB,QAAQ,EAAEC,YAAY,EAAE,GAAGrB,mBAAmB;QACpDG;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAK,cAAclB;QACdc;IACF;IAEA,IAAI,CAACE,UAAU;QACb,OAAO;IACT;IAEA,qBACE,KAACG;QAAK,GAAGJ,SAAS;QAAG,GAAGE,YAAY;kBACjCN;;AAGP,GACA"}
+{"version":3,"sources":["../../src/transition/Slide.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"./types.js\";\nimport {\n  DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n  useSlideTransition,\n} from \"./useSlideTransition.js\";\n\n// NOTE: Tis is in both `useSlideTransition` and `Slide` since there are no\n// reusable types between these two files.\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-slide-duration\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface SlideProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions {\n  /**\n   * Set this to `true` to animate this slide into view within a\n   * `SlideContainer`. When this switches from `true` to `false`, it will\n   * animate out.\n   */\n  active: boolean;\n\n  /** @defaultValue {@link DEFAULT_SLIDE_TRANSITION_DURATION} */\n  timeout?: TransitionTimeout;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A reasonable default for handling a slide transition using\n * {@link useSlideTransition}.\n *\n * @see {@link https://react-md.dev/components/slide | Slide Demos}\n * @see {@link SlideContainer} for example usage.\n * @since 6.0.0\n */\nexport const Slide = forwardRef<HTMLDivElement, SlideProps>(\n  function Slide(props, nodeRef) {\n    const {\n      active,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      className,\n      children,\n      timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n      temporary = false,\n      exitedHidden = true,\n      ...remaining\n    } = props;\n\n    const { rendered, elementProps } = useSlideTransition({\n      nodeRef,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n      className,\n      timeout,\n      temporary,\n      transitionIn: active,\n      exitedHidden,\n    });\n\n    if (!rendered) {\n      return null;\n    }\n\n    return (\n      <div {...remaining} {...elementProps}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","DEFAULT_SLIDE_TRANSITION_TIMEOUT","useSlideTransition","Slide","props","nodeRef","active","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","className","children","timeout","temporary","exitedHidden","remaining","rendered","elementProps","transitionIn","div"],"mappings":"AAAA;;AAEA,SAA8CA,UAAU,QAAQ,QAAQ;AAOxE,SACEC,gCAAgC,EAChCC,kBAAkB,QACb,0BAA0B;AA4BjC;;;;;;;;;CASC,GACD,OAAO,MAAMC,sBAAQH,WACnB,SAASG,MAAMC,KAAK,EAAEC,OAAO;IAC3B,MAAM,EACJC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACRC,UAAUjB,gCAAgC,EAC1CkB,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,WACJ,GAAGjB;IAEJ,MAAM,EAAEkB,QAAQ,EAAEC,YAAY,EAAE,GAAGrB,mBAAmB;QACpDG;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAK,cAAclB;QACdc;IACF;IAEA,IAAI,CAACE,UAAU;QACb,OAAO;IACT;IAEA,qBACE,KAACG;QAAK,GAAGJ,SAAS;QAAG,GAAGE,YAAY;kBACjCN;;AAGP,GACA"}

package/dist/transition/SlideContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/SlideContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slide-container\");\n\n/**\n * @example Direction \"forward\"\n * ```\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n * ```\n *\n * @example Direction \"backward\"\n * ```\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n * ```\n *\n * @since 6.0.0\n */\nexport type SlideDirection = \"backward\" | \"forward\";\n\n/** @since 6.0.0 */\nexport interface SlideContainerClassNameOptions {\n  className?: string;\n\n  /** @see {@link SlideDirection} */\n  direction: SlideDirection;\n\n  vertical?: boolean;\n}\n\n/**\n * @see {@link useSlideTransition} for an example\n * @since 6.0.0\n */\nexport function slideContainer(\n  options: SlideContainerClassNameOptions\n): string {\n  const { className, direction, vertical } = options;\n\n  return cnb(styles({ [direction]: true, vertical }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SlideContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SlideContainerClassNameOptions {}\n\n/**\n * The `SlideContainer` is used to enable a slide transition when child `Slide`\n * components change.\n *\n * @example Simple Example\n * ```tsx\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"forward\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state;\n *\n *   // when changing a slide, `direction` should be set to \"forward\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"forward\" : \"backward\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <SlideContainer direction={direction}>\n *       <Slide active={activeIndex === 0}>\n *         Slide 1\n *       </Slide>\n *       <Slide active={activeIndex === 1}>\n *         Slide 2\n *       </Slide>\n *       <Slide active={activeIndex === 2}>\n *         Slide 3\n *       </Slide>\n *     </SlideContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/slide | Slide Demos}\n * @since 6.0.0\n */\nexport const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(\n  function SlideContainer(props, ref) {\n    const { className, direction, vertical, children, ...remaining } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={slideContainer({ className, direction, vertical })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","slideContainer","options","className","direction","vertical","SlideContainer","props","ref","children","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAuDnB;;;CAGC,GACD,OAAO,SAASE,eACdC,OAAuC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGH;IAE3C,OAAOL,IAAIG,OAAO;QAAE,CAACI,UAAU,EAAE;QAAMC;IAAS,IAAIF;AACtD;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMG,+BAAiBR,WAC5B,SAASQ,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEL,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAEnE,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLL,WAAWF,eAAe;YAAEE;YAAWC;YAAWC;QAAS;kBAE1DI;;AAGP,GACA"}
+{"version":3,"sources":["../../src/transition/SlideContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slide-container\");\n\n/**\n * @example Direction \"forward\"\n * ```\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n * ```\n *\n * @example Direction \"backward\"\n * ```\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n * ```\n *\n * @since 6.0.0\n */\nexport type SlideDirection = \"backward\" | \"forward\";\n\n/** @since 6.0.0 */\nexport interface SlideContainerClassNameOptions {\n  className?: string;\n\n  /** @see {@link SlideDirection} */\n  direction: SlideDirection;\n\n  vertical?: boolean;\n}\n\n/**\n * @see {@link useSlideTransition} for an example\n * @since 6.0.0\n */\nexport function slideContainer(\n  options: SlideContainerClassNameOptions\n): string {\n  const { className, direction, vertical } = options;\n\n  return cnb(styles({ [direction]: true, vertical }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SlideContainerProps\n  extends HTMLAttributes<HTMLDivElement>, SlideContainerClassNameOptions {}\n\n/**\n * The `SlideContainer` is used to enable a slide transition when child `Slide`\n * components change.\n *\n * @example Simple Example\n * ```tsx\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"forward\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state;\n *\n *   // when changing a slide, `direction` should be set to \"forward\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"forward\" : \"backward\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <SlideContainer direction={direction}>\n *       <Slide active={activeIndex === 0}>\n *         Slide 1\n *       </Slide>\n *       <Slide active={activeIndex === 1}>\n *         Slide 2\n *       </Slide>\n *       <Slide active={activeIndex === 2}>\n *         Slide 3\n *       </Slide>\n *     </SlideContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/slide | Slide Demos}\n * @since 6.0.0\n */\nexport const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(\n  function SlideContainer(props, ref) {\n    const { className, direction, vertical, children, ...remaining } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={slideContainer({ className, direction, vertical })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","slideContainer","options","className","direction","vertical","SlideContainer","props","ref","children","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAuDnB;;;CAGC,GACD,OAAO,SAASE,eACdC,OAAuC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGH;IAE3C,OAAOL,IAAIG,OAAO;QAAE,CAACI,UAAU,EAAE;QAAMC;IAAS,IAAIF;AACtD;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMG,+BAAiBR,WAC5B,SAASQ,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEL,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAEnE,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLL,WAAWF,eAAe;YAAEE;YAAWC;YAAWC;QAAS;kBAE1DI;;AAGP,GACA"}

package/dist/transition/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/types.ts"],"sourcesContent":["// This is pretty much `react-transition-group` since I liked the API wanted a\n// hook implementation. I also had to redo most of the types for v4.0.0 due to\n// the new `nodeRef` stuff, so it made it easier to create the types and hooks\n// here.\nimport type { ReactElement, Ref, RefCallback } from \"react\";\n\n/**\n * @since 4.0.0\n */\nexport interface TransitionActions {\n  /**\n   * Boolean if the transition should occur immediately once the component\n   * mounts if the {@link TransitionOptions.transitionIn} is `true`\n   *\n   * @defaultValue `false`\n   */\n  appear?: boolean;\n\n  /**\n   * Boolean if the transition should occur whenever the\n   * {@link TransitionOptions.transitionIn} is switch to `true` after the\n   * component has been rendered in the DOM.\n   *\n   * @defaultValue `true`\n   */\n  enter?: boolean;\n\n  /**\n   * Boolean if the transition should occur whenever the\n   * {@link TransitionOptions.transitionIn} is switch to `false` after the\n   * component has been rendered in the DOM.\n   *\n   * @defaultValue `true`\n   */\n  exit?: boolean;\n}\n\n/**\n * An object timeout values that would be used for each\n * {@link TransitionActions}. If a value is set to `0` or `undefined`, the\n * transition will not occur.\n *\n * @since 4.0.0\n */\nexport type TransitionTimeoutObject = {\n  [action in keyof TransitionActions]?: number;\n};\n\n/**\n * Either a single timeout duration in milliseconds to use for each of the\n * {@link TransitionActions} stages, or an object of transition durations.\n *\n * @since 4.0.0\n */\nexport type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;\n\n/**\n * @since 6.0.0\n */\nexport type TransitionEnterStage = \"enter\" | \"entering\" | \"entered\";\n\n/**\n * @since 6.0.0\n */\nexport type TransitionExitStage = \"exit\" | \"exiting\" | \"exited\";\n\n/**\n * The way the transition works is by flowing through the different stages and\n * assigning waiting for a timeout to occur. Setting the `stage` to `enter` will\n * begin the enter transition going from `enter -> entering -> entered` while\n * setting the stage to `exit` will transition from `exit -> exiting -> exited`.\n *\n * @since 4.0.0\n * @since 6.0.0 Type union between `TransitionEnterStage` and `TransitionExitStage`\n */\nexport type TransitionStage = TransitionEnterStage | TransitionExitStage;\n\n/**\n * This function is called at each `\"enter\"` {@link TransitionStage}. If a\n * {@link TransitionOptions.nodeRef} was provided, the DOM node should be\n * available in `nodeRef.current` by this point if the transition requires DOM\n * calculations.\n *\n * @param appearing - Boolean if this is the initial `appear` flow.\n * @since 4.0.0\n */\nexport type TransitionEnterHandler = (appearing: boolean) => void;\n\n/**\n * This function is called at each `\"exit\"` {@link TransitionStage}. If a\n * {@link TransitionOptions.nodeRef} was provided, the DOM node should be\n * available in `nodeRef.current` by this point if the transition requires DOM\n * calculations.\n *\n * @since 4.0.0\n */\nexport type TransitionExitHandler = () => void;\n\n/**\n * @since 4.0.0\n */\nexport interface TransitionCallbacks {\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"enter\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while entering.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEnter?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"enter\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while entering.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEntering?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"entering\"`.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEntered?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"entered\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while exiting.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onExit?: TransitionExitHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"exiting\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while exiting.\n   *\n   * @see {@link TransitionExitHandler}\n   */\n  onExiting?: TransitionExitHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"exited\"`.\n   *\n   * @see {@link TransitionExitHandler}\n   */\n  onExited?: TransitionExitHandler;\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 PreconfiguredTransitionInDefaultedOptions<\n  E extends HTMLElement,\n> extends TransitionActions,\n    TransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link TransitionHookReturnValue.ref}\n   */\n  nodeRef?: Ref<E>;\n\n  /**\n   * Boolean if the element should mount and unmount based on the\n   * {@link PreconfiguredTransitionInDefaultedOptions.transitionIn} value.\n   *\n   * @defaultValue `false`\n   */\n  temporary?: boolean;\n\n  /**\n   * This boolean controls the transition by activating flowing through the\n   * {@link TransitionStage}.\n   *\n   * @see {@link TransitionActions} for a description around the transitions.\n   */\n  transitionIn?: boolean;\n\n  /** {@inheritDoc TransitionTimeout} */\n  timeout?: TransitionTimeout;\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 PreconfiguredTransitionOptions<E extends HTMLElement>\n  extends PreconfiguredTransitionInDefaultedOptions<E> {\n  /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n  transitionIn: boolean;\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 TransitionOptions<E extends HTMLElement>\n  extends PreconfiguredTransitionOptions<E> {\n  /** {@inheritDoc TransitionTimeout} */\n  timeout: TransitionTimeout;\n}\n\n/**\n * An object of classnames that will be applied based on the\n * {@link TransitionStage} where all the classes in the previous stages will\n * also be applied.\n *\n * @example Explaining className application\n * ```ts\n * const { ref, className, stage, appearing } = useCSSTransition({\n *   appear: true,\n *   enter: true,\n *   exit: true,\n *   timeout: 300,\n *   classNames: {\n *     appear: \"appear\",\n *     appearEnter: \"appear--enter\",\n *     appearDone: \"appear--done appear--complete\",\n *     enter: \"enter\",\n *     enterEnter: \"\",\n *     enterDone: \"enter--done enter--complete\",\n *     exit: \"\",\n *     exitEnter: \"\",\n *     exitDone: \"exit--done exit--complete\",\n *   }\n * });\n *\n * // stage === \"enter\" && appearing\n * // className === \"appear\"\n * //\n * // stage === \"entering\" && appearing\n * // className === \"appear appear--enter\"\n * //\n * // stage === \"entered\" && appearing\n * // className === \"appear--done appear--complete\"\n * //\n * //\n * // stage === \"enter\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entering\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entered\" && !appearing\n * // className === \"enter--done enter--complete\"\n * //\n * //\n * // stage === \"exit\"\n * // className === \"\"\n * //\n * // stage === \"exiting\"\n * // className === \"\"\n * //\n * // stage === \"exited\"\n * // className === \"exit--done exit--complete\"\n * ```\n *\n * @since 4.0.0\n */\nexport interface CSSTransitionClassNamesObject {\n  /**\n   * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appear?: string;\n\n  /**\n   * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appearActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appearDone?: string;\n\n  /**\n   * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enter?: string;\n\n  /**\n   * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enterActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enterDone?: string;\n\n  /**\n   * The class name to apply starting at the `\"exit\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exit?: string;\n\n  /**\n   * The class name to apply starting at the `\"exiting\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exitActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"exited\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exitDone?: string;\n}\n\n/**\n * @since 4.0.0\n */\nexport type CSSTransitionClassNames =\n  | string\n  | Readonly<CSSTransitionClassNamesObject>;\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 PreconfiguredCSSTransitionInDefaultedOptions<\n  E extends HTMLElement,\n> extends PreconfiguredTransitionInDefaultedOptions<E> {\n  /**\n   * An optional className to be merged with the transition classes.\n   */\n  className?: string;\n\n  /**\n   * When this is `true` and the {@link temporary} option is `false`, the\n   * element will gain a class name to hide it with `display: none` instead of\n   * conditionally rendering the element.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  exitedHidden?: boolean;\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 PreconfiguredCSSTransitionOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n  /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n  transitionIn: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SSRTransitionOptions {\n  /**\n   * This is mostly used internally to make it so that you can render portalled\n   * elements inline with content if SSR is enabled in your app. To enable this\n   * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.\n   *\n   * This value will be `true` if a portalled element was rendered by default\n   * from the server and remain true until it unmounts from the DOM.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\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 TransitionHookOptions<E extends HTMLElement>\n  extends TransitionOptions<E>,\n    SSRTransitionOptions {\n  /**\n   * Boolean if the DOM should forcefully be reflow each time a transition\n   * change occurs. This is generally required for any CSS transition and is\n   * set to `true` for the {@link useCSSTransition} hook.\n   *\n   * @defaultValue `false`\n   */\n  reflow?: boolean;\n}\n\n/**\n * @since 4.0.0\n */\nexport interface TransitionState {\n  /** {@inheritDoc TransitionStage} */\n  stage: TransitionStage;\n\n  /**\n   * Boolean if the element should be rendered or not. This will always be\n   * `true` if the {@link TransitionOptions.temporary} is `false`. Otherwise, it\n   * will be `true` when not the `\"exited\"` {@link TransitionStage}.\n   */\n  rendered: boolean;\n\n  /**\n   * Boolean if this is the first {@link TransitionActions.appear} transition.\n   * This will be `true` during the first transition if\n   * {@link TransitionActions.appear} was also `true`. Otherwise it will be\n   * `false`.\n   */\n  appearing: boolean;\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 TransitionHookReturnValue<E extends HTMLElement>\n  extends TransitionState,\n    Required<SSRTransitionOptions> {\n  /**\n   * A ref that is required for the transition to occur and should be passed to\n   * the element affected by the transition.\n   */\n  ref: RefCallback<E>;\n\n  /**\n   * A function that can be used to specifically set the transition to a\n   * specific stage. This shouldn't really be used too much and is really just\n   * useful for \"appear only transitions\" that do not unmount the child\n   * elements.\n   *\n   * @example Simple Example\n   * ```tsx\n   * import { ReactElement, useEffect, useRef } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   * import { useRouter } from \"react-router-dom\";\n   *\n   * function Example(): ReactElement {\n   *   const { pathname } = useRouter();\n   *   const { elementProps, transitionTo } = useCSSTransition({\n   *     transitionIn: true,\n   *     timeout: 1000,\n   *     classNames: \"some-enter-transition\",\n   *   });\n   *\n   *   useEffect(() => {\n   *     // Do not trigger transition on first load.\n   *     if (prevPathname.current === pathname) {\n   *       return;\n   *     }\n   *\n   *     prevPathname.current = pathname;\n   *     transitionTo(\"enter\");\n   *   }, [pathname, transitionTo]);\n   *\n   *   return <div {...elementProps}>{content}</div>;\n   * }\n   * ```\n   *\n   * @param stage - The {@link TransitionStage} to set to\n   */\n  transitionTo: (stage: TransitionStage) => void;\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 CSSTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionOptions<E>,\n    SSRTransitionOptions {\n  /** {@inheritDoc TransitionTimeout} */\n  timeout: TransitionTimeout;\n  /** {@inheritDoc CSSTransitionClassNames} */\n  classNames: CSSTransitionClassNames;\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 CSSTransitionElementProps<E extends HTMLElement> {\n  /** @see {@link TransitionHookReturnValue.ref} */\n  ref: RefCallback<E>;\n\n  /**\n   * The current transition class name or `undefined`.\n   */\n  className: string | undefined;\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 CSSTransitionHookReturnValue<E extends HTMLElement>\n  extends TransitionHookReturnValue<E>,\n    CSSTransitionElementProps<E> {\n  /**\n   * This can be used so that you don't need to destructure multiple props from\n   * the hook return value to pass to the transitioning component.\n   *\n   * @example Simple Example\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   *\n   * interface ExampleProps {\n   *   transitionIn: boolean;\n   *   children: ReactNode;\n   * }\n   *\n   * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n   *   const { elementProps, rendered } = useCSSTransition({\n   *     timeout: 150,\n   *     classNames: \"example\",\n   *     transitionIn,\n   *   });\n   *\n   *   if (!rendered) {\n   *     return null;\n   *   }\n   *\n   *   return <div {...elementProps}>{children}</div>\n   * }\n   * ```\n   *\n   * @example Verbose Version\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   *\n   * interface ExampleProps {\n   *   transitionIn: boolean;\n   *   children: ReactNode;\n   * }\n   *\n   * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n   *   const { ref, className, rendered } = useCSSTransition({\n   *     timeout: 150,\n   *     classNames: \"example\",\n   *     transitionIn,\n   *   });\n   *\n   *   if (!rendered) {\n   *     return null;\n   *   }\n   *\n   *   return <div ref={ref} className={className}>{children}</div>\n   * }\n   * ```\n   */\n  elementProps: CSSTransitionElementProps<E>;\n}\n\n/**\n * This is mostly an internal type that can be used to help with transitionable\n * components.\n *\n * @since 4.0.0\n */\nexport interface CSSTransitionComponentProps extends TransitionCallbacks {\n  /** @see {@link CSSTransitionHookOptions.temporary} */\n  temporary?: boolean;\n  /** @see {@link TransitionTimeout} */\n  timeout?: TransitionTimeout;\n  /** @see {@link CSSTransitionClassNames} */\n  classNames?: CSSTransitionClassNames;\n  /** @see {@link CSSTransitionHookOptions.exitedHidden} */\n  exitedHidden?: boolean;\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 CSSTransitionComponentImplementation<E extends HTMLElement> {\n  /**\n   * The child element that should have a `ref` and `className` cloned into\n   * using the `cloneElement` API. If the child is a custom component, you\n   * **must** use `React.forwardRef` and pass both of these to a DOM element for\n   * the transition to work.\n   */\n  children: ReactElement<{ ref: Ref<E>; className: string | undefined }>;\n}\n"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,8EAA8E;AAC9E,8EAA8E;AAC9E,QAAQ;AAkmBR;;;;CAIC,GACD,WAQC"}
+{"version":3,"sources":["../../src/transition/types.ts"],"sourcesContent":["// This is pretty much `react-transition-group` since I liked the API wanted a\n// hook implementation. I also had to redo most of the types for v4.0.0 due to\n// the new `nodeRef` stuff, so it made it easier to create the types and hooks\n// here.\nimport type { ReactElement, Ref, RefCallback } from \"react\";\n\n/**\n * @since 4.0.0\n */\nexport interface TransitionActions {\n  /**\n   * Boolean if the transition should occur immediately once the component\n   * mounts if the {@link TransitionOptions.transitionIn} is `true`\n   *\n   * @defaultValue `false`\n   */\n  appear?: boolean;\n\n  /**\n   * Boolean if the transition should occur whenever the\n   * {@link TransitionOptions.transitionIn} is switch to `true` after the\n   * component has been rendered in the DOM.\n   *\n   * @defaultValue `true`\n   */\n  enter?: boolean;\n\n  /**\n   * Boolean if the transition should occur whenever the\n   * {@link TransitionOptions.transitionIn} is switch to `false` after the\n   * component has been rendered in the DOM.\n   *\n   * @defaultValue `true`\n   */\n  exit?: boolean;\n}\n\n/**\n * An object timeout values that would be used for each\n * {@link TransitionActions}. If a value is set to `0` or `undefined`, the\n * transition will not occur.\n *\n * @since 4.0.0\n */\nexport type TransitionTimeoutObject = {\n  [action in keyof TransitionActions]?: number;\n};\n\n/**\n * Either a single timeout duration in milliseconds to use for each of the\n * {@link TransitionActions} stages, or an object of transition durations.\n *\n * @since 4.0.0\n */\nexport type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;\n\n/**\n * @since 6.0.0\n */\nexport type TransitionEnterStage = \"enter\" | \"entering\" | \"entered\";\n\n/**\n * @since 6.0.0\n */\nexport type TransitionExitStage = \"exit\" | \"exiting\" | \"exited\";\n\n/**\n * The way the transition works is by flowing through the different stages and\n * assigning waiting for a timeout to occur. Setting the `stage` to `enter` will\n * begin the enter transition going from `enter -> entering -> entered` while\n * setting the stage to `exit` will transition from `exit -> exiting -> exited`.\n *\n * @since 4.0.0\n * @since 6.0.0 Type union between `TransitionEnterStage` and `TransitionExitStage`\n */\nexport type TransitionStage = TransitionEnterStage | TransitionExitStage;\n\n/**\n * This function is called at each `\"enter\"` {@link TransitionStage}. If a\n * {@link TransitionOptions.nodeRef} was provided, the DOM node should be\n * available in `nodeRef.current` by this point if the transition requires DOM\n * calculations.\n *\n * @param appearing - Boolean if this is the initial `appear` flow.\n * @since 4.0.0\n */\nexport type TransitionEnterHandler = (appearing: boolean) => void;\n\n/**\n * This function is called at each `\"exit\"` {@link TransitionStage}. If a\n * {@link TransitionOptions.nodeRef} was provided, the DOM node should be\n * available in `nodeRef.current` by this point if the transition requires DOM\n * calculations.\n *\n * @since 4.0.0\n */\nexport type TransitionExitHandler = () => void;\n\n/**\n * @since 4.0.0\n */\nexport interface TransitionCallbacks {\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"enter\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while entering.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEnter?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"enter\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while entering.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEntering?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"entering\"`.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onEntered?: TransitionEnterHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"entered\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while exiting.\n   *\n   * @see {@link TransitionEnterHandler}\n   */\n  onExit?: TransitionExitHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"exiting\"`.\n   *\n   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while exiting.\n   *\n   * @see {@link TransitionExitHandler}\n   */\n  onExiting?: TransitionExitHandler;\n\n  /**\n   * This function will be called once the {@link TransitionStage} has been set\n   * to `\"exited\"`.\n   *\n   * @see {@link TransitionExitHandler}\n   */\n  onExited?: TransitionExitHandler;\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 PreconfiguredTransitionInDefaultedOptions<\n  E extends HTMLElement,\n>\n  extends TransitionActions, TransitionCallbacks {\n  /**\n   * An optional ref that will be merged with the\n   * {@link TransitionHookReturnValue.ref}\n   */\n  nodeRef?: Ref<E>;\n\n  /**\n   * Boolean if the element should mount and unmount based on the\n   * {@link PreconfiguredTransitionInDefaultedOptions.transitionIn} value.\n   *\n   * @defaultValue `false`\n   */\n  temporary?: boolean;\n\n  /**\n   * This boolean controls the transition by activating flowing through the\n   * {@link TransitionStage}.\n   *\n   * @see {@link TransitionActions} for a description around the transitions.\n   */\n  transitionIn?: boolean;\n\n  /** {@inheritDoc TransitionTimeout} */\n  timeout?: TransitionTimeout;\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 PreconfiguredTransitionOptions<\n  E extends HTMLElement,\n> extends PreconfiguredTransitionInDefaultedOptions<E> {\n  /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n  transitionIn: boolean;\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 TransitionOptions<\n  E extends HTMLElement,\n> extends PreconfiguredTransitionOptions<E> {\n  /** {@inheritDoc TransitionTimeout} */\n  timeout: TransitionTimeout;\n}\n\n/**\n * An object of classnames that will be applied based on the\n * {@link TransitionStage} where all the classes in the previous stages will\n * also be applied.\n *\n * @example Explaining className application\n * ```ts\n * const { ref, className, stage, appearing } = useCSSTransition({\n *   appear: true,\n *   enter: true,\n *   exit: true,\n *   timeout: 300,\n *   classNames: {\n *     appear: \"appear\",\n *     appearEnter: \"appear--enter\",\n *     appearDone: \"appear--done appear--complete\",\n *     enter: \"enter\",\n *     enterEnter: \"\",\n *     enterDone: \"enter--done enter--complete\",\n *     exit: \"\",\n *     exitEnter: \"\",\n *     exitDone: \"exit--done exit--complete\",\n *   }\n * });\n *\n * // stage === \"enter\" && appearing\n * // className === \"appear\"\n * //\n * // stage === \"entering\" && appearing\n * // className === \"appear appear--enter\"\n * //\n * // stage === \"entered\" && appearing\n * // className === \"appear--done appear--complete\"\n * //\n * //\n * // stage === \"enter\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entering\" && !appearing\n * // className === \"enter\"\n * //\n * // stage === \"entered\" && !appearing\n * // className === \"enter--done enter--complete\"\n * //\n * //\n * // stage === \"exit\"\n * // className === \"\"\n * //\n * // stage === \"exiting\"\n * // className === \"\"\n * //\n * // stage === \"exited\"\n * // className === \"exit--done exit--complete\"\n * ```\n *\n * @since 4.0.0\n */\nexport interface CSSTransitionClassNamesObject {\n  /**\n   * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appear?: string;\n\n  /**\n   * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appearActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n   * while {@link TransitionState.appearing}.\n   *\n   * @defaultValue `\"\"`\n   */\n  appearDone?: string;\n\n  /**\n   * The class name to apply starting at the `\"enter\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enter?: string;\n\n  /**\n   * The class name to apply starting at the `\"entering\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enterActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"entered\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  enterDone?: string;\n\n  /**\n   * The class name to apply starting at the `\"exit\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exit?: string;\n\n  /**\n   * The class name to apply starting at the `\"exiting\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exitActive?: string;\n\n  /**\n   * The class name to apply starting at the `\"exited\"` {@link TransitionStage}\n   *\n   * @defaultValue `\"\"`\n   */\n  exitDone?: string;\n}\n\n/**\n * @since 4.0.0\n */\nexport type CSSTransitionClassNames =\n  | string\n  | Readonly<CSSTransitionClassNamesObject>;\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 PreconfiguredCSSTransitionInDefaultedOptions<\n  E extends HTMLElement,\n> extends PreconfiguredTransitionInDefaultedOptions<E> {\n  /**\n   * An optional className to be merged with the transition classes.\n   */\n  className?: string;\n\n  /**\n   * When this is `true` and the {@link temporary} option is `false`, the\n   * element will gain a class name to hide it with `display: none` instead of\n   * conditionally rendering the element.\n   *\n   * @defaultValue `false`\n   * @since 6.0.0\n   */\n  exitedHidden?: boolean;\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 PreconfiguredCSSTransitionOptions<\n  E extends HTMLElement,\n> extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n  /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */\n  transitionIn: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SSRTransitionOptions {\n  /**\n   * This is mostly used internally to make it so that you can render portalled\n   * elements inline with content if SSR is enabled in your app. To enable this\n   * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.\n   *\n   * This value will be `true` if a portalled element was rendered by default\n   * from the server and remain true until it unmounts from the DOM.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\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 TransitionHookOptions<E extends HTMLElement>\n  extends TransitionOptions<E>, SSRTransitionOptions {\n  /**\n   * Boolean if the DOM should forcefully be reflow each time a transition\n   * change occurs. This is generally required for any CSS transition and is\n   * set to `true` for the {@link useCSSTransition} hook.\n   *\n   * @defaultValue `false`\n   */\n  reflow?: boolean;\n}\n\n/**\n * @since 4.0.0\n */\nexport interface TransitionState {\n  /** {@inheritDoc TransitionStage} */\n  stage: TransitionStage;\n\n  /**\n   * Boolean if the element should be rendered or not. This will always be\n   * `true` if the {@link TransitionOptions.temporary} is `false`. Otherwise, it\n   * will be `true` when not the `\"exited\"` {@link TransitionStage}.\n   */\n  rendered: boolean;\n\n  /**\n   * Boolean if this is the first {@link TransitionActions.appear} transition.\n   * This will be `true` during the first transition if\n   * {@link TransitionActions.appear} was also `true`. Otherwise it will be\n   * `false`.\n   */\n  appearing: boolean;\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 TransitionHookReturnValue<E extends HTMLElement>\n  extends TransitionState, Required<SSRTransitionOptions> {\n  /**\n   * A ref that is required for the transition to occur and should be passed to\n   * the element affected by the transition.\n   */\n  ref: RefCallback<E>;\n\n  /**\n   * A function that can be used to specifically set the transition to a\n   * specific stage. This shouldn't really be used too much and is really just\n   * useful for \"appear only transitions\" that do not unmount the child\n   * elements.\n   *\n   * @example Simple Example\n   * ```tsx\n   * import { ReactElement, useEffect, useRef } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   * import { useRouter } from \"react-router-dom\";\n   *\n   * function Example(): ReactElement {\n   *   const { pathname } = useRouter();\n   *   const { elementProps, transitionTo } = useCSSTransition({\n   *     transitionIn: true,\n   *     timeout: 1000,\n   *     classNames: \"some-enter-transition\",\n   *   });\n   *\n   *   useEffect(() => {\n   *     // Do not trigger transition on first load.\n   *     if (prevPathname.current === pathname) {\n   *       return;\n   *     }\n   *\n   *     prevPathname.current = pathname;\n   *     transitionTo(\"enter\");\n   *   }, [pathname, transitionTo]);\n   *\n   *   return <div {...elementProps}>{content}</div>;\n   * }\n   * ```\n   *\n   * @param stage - The {@link TransitionStage} to set to\n   */\n  transitionTo: (stage: TransitionStage) => void;\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 CSSTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionOptions<E>, SSRTransitionOptions {\n  /** {@inheritDoc TransitionTimeout} */\n  timeout: TransitionTimeout;\n  /** {@inheritDoc CSSTransitionClassNames} */\n  classNames: CSSTransitionClassNames;\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 CSSTransitionElementProps<E extends HTMLElement> {\n  /** @see {@link TransitionHookReturnValue.ref} */\n  ref: RefCallback<E>;\n\n  /**\n   * The current transition class name or `undefined`.\n   */\n  className: string | undefined;\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 CSSTransitionHookReturnValue<E extends HTMLElement>\n  extends TransitionHookReturnValue<E>, CSSTransitionElementProps<E> {\n  /**\n   * This can be used so that you don't need to destructure multiple props from\n   * the hook return value to pass to the transitioning component.\n   *\n   * @example Simple Example\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   *\n   * interface ExampleProps {\n   *   transitionIn: boolean;\n   *   children: ReactNode;\n   * }\n   *\n   * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n   *   const { elementProps, rendered } = useCSSTransition({\n   *     timeout: 150,\n   *     classNames: \"example\",\n   *     transitionIn,\n   *   });\n   *\n   *   if (!rendered) {\n   *     return null;\n   *   }\n   *\n   *   return <div {...elementProps}>{children}</div>\n   * }\n   * ```\n   *\n   * @example Verbose Version\n   * ```tsx\n   * import type { ReactElement } from \"react\";\n   * import { useCSSTransition } from \"@react-md/transition\";\n   *\n   * interface ExampleProps {\n   *   transitionIn: boolean;\n   *   children: ReactNode;\n   * }\n   *\n   * function Example({ transitionIn, children }: ExampleProps): ReactElement | null {\n   *   const { ref, className, rendered } = useCSSTransition({\n   *     timeout: 150,\n   *     classNames: \"example\",\n   *     transitionIn,\n   *   });\n   *\n   *   if (!rendered) {\n   *     return null;\n   *   }\n   *\n   *   return <div ref={ref} className={className}>{children}</div>\n   * }\n   * ```\n   */\n  elementProps: CSSTransitionElementProps<E>;\n}\n\n/**\n * This is mostly an internal type that can be used to help with transitionable\n * components.\n *\n * @since 4.0.0\n */\nexport interface CSSTransitionComponentProps extends TransitionCallbacks {\n  /** @see {@link CSSTransitionHookOptions.temporary} */\n  temporary?: boolean;\n  /** @see {@link TransitionTimeout} */\n  timeout?: TransitionTimeout;\n  /** @see {@link CSSTransitionClassNames} */\n  classNames?: CSSTransitionClassNames;\n  /** @see {@link CSSTransitionHookOptions.exitedHidden} */\n  exitedHidden?: boolean;\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 CSSTransitionComponentImplementation<E extends HTMLElement> {\n  /**\n   * The child element that should have a `ref` and `className` cloned into\n   * using the `cloneElement` API. If the child is a custom component, you\n   * **must** use `React.forwardRef` and pass both of these to a DOM element for\n   * the transition to work.\n   */\n  children: ReactElement<{ ref: Ref<E>; className: string | undefined }>;\n}\n"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,8EAA8E;AAC9E,8EAA8E;AAC9E,QAAQ;AAimBR;;;;CAIC,GACD,WAQC"}

package/dist/transition/useCollapseTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useCollapseTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type CSSProperties, useState } from \"react\";\n\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { collapse } from \"./collapseStyles.js\";\nimport {\n  type CSSTransitionElementProps,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"./types.js\";\nimport { useTransition } from \"./useTransition.js\";\nimport { getElementSizing, getTransitionTimeout } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.0.0\n */\nexport const DEFAULT_COLLAPSE_TIMEOUT = {\n  enter: 250,\n  exit: 200,\n} as const satisfies TransitionTimeout;\n\n/**\n * @since 4.0.0\n */\nexport interface CollapseConfigurationStyle {\n  /**\n   * The minimum height that the collapsed element can be which defaults to `0`.\n   * This can either be a number of pixels or a string CSS height value.\n   *\n   * Setting this value to any non-zero value will allow for the element to\n   * shrink to the defined min-height, and then expand to the full height once\n   * no longer collapsed.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @defaultValue `0`\n   */\n  minHeight?: number | string;\n\n  /**\n   * The minimum padding-top that the collapsed element can be which defaults to\n   * `0`. This can either be a number of pixels or a string CSS `padding-top`\n   * value.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @defaultValue `0`\n   */\n  minPaddingTop?: number | string;\n\n  /**\n   * The minimum padding-bottom that the collapsed element can be which defaults\n   * to `0`. This can either be a number of pixels or a string CSS\n   * `padding-bottom` value.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @defaultValue `0`\n   */\n  minPaddingBottom?: number | string;\n}\n\n/**\n * @since 4.0.0\n */\nexport interface CollapseStyle extends CollapseConfigurationStyle {\n  /**\n   * This will only be set when the {@link TransitionStage} is `\"entering\"` or\n   * `\"exiting\"` as `\"${timeout}ms\"`.\n   */\n  transitionDuration?: string;\n}\n\n/**\n * These props (and `ref`) **must** be passed to a DOM element for the collapse\n * transition to work.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface CollapseElementProps<E extends HTMLElement>\n  extends CSSTransitionElementProps<E> {\n  /**\n   * A merged styled object required for the collapse transition to work.\n   *\n   * @see {@link CollapseStyle}\n   * @see {@link CollapseTransitionHookOptions.style}\n   */\n  style: CSSProperties;\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 CollapseTransitionHookOptions<E extends HTMLElement>\n  extends Omit<PreconfiguredCSSTransitionOptions<E>, \"exitedHidden\">,\n    CollapseConfigurationStyle {\n  /**\n   * An optional style to merge with the required collapse transition styles.\n   *\n   * If any keys from the {@link CollapseStyle} are included in this object,\n   * these styles will override and possibly break the collapse transition.\n   */\n  style?: CSSProperties;\n\n  /**\n   *\n   * @see {@link DEFAULT_COLLAPSE_TIMEOUT}\n   * @defaultValue `DEFAULT_COLLAPSE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   *\n   * @defaultValue `minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0`\n   */\n  temporary?: boolean;\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 CollapseTransitionHookReturnValue<E extends HTMLElement>\n  extends CSSTransitionHookReturnValue<E>,\n    CollapseElementProps<E> {\n  /**\n   * This is just a convenience object so that you don't need to destructure as\n   * many variables to pass to an element.\n   *\n   * @example Simple Usage\n   * ```tsx\n   * const { elementProps, rendered } = useCollapseTransition({\n   *   // ...options\n   *   transitionIn,\n   * });\n   *\n   * if (!rendered) {\n   *   return null\n   * }\n   *\n   * return <div {...elementProps}>{children}</div>;\n   *\n   * // This is the long-hand version\n   * const { ref, style, className, hidden, rendered } = useCollapseTransition({\n   *   // ...options\n   *   transitionIn,\n   * });\n   *\n   * if (!rendered) {\n   *   return null\n   * }\n   *\n   * return (\n   *   <div\n   *     ref={ref}\n   *     style={style}\n   *     className={className}\n   *     hidden={hidden}\n   *   >\n   *     {children}\n   *   </div>\n   * );\n   * ```\n   */\n  elementProps: Readonly<CollapseElementProps<E>>;\n}\n\n/**\n * This hook is used to create a transition to collapse and expand an element\n * **inline** with other content like an accordion by animating the\n * `max-height`, `padding-top`, and `padding-bottom` CSS properties. The default\n * behavior is to hide the element completely while collapsed, but providing the\n * `minHeight`, `minPaddingTop`, and `minPaddingBottom` options can make this\n * work like a \"See More\"/\"Preview\" type of element\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useCollapseTransition } from \"@react-md/core/transition/useCollapseTransition\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { type ReactElement, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *   const { elementProps, rendered } =\n *     useCollapseTransition({\n *       transitionIn: !collapsed,\n *       // If the collapsible element should maintain state by not unmounting\n *       // while collapsed, uncomment this next line\n *       // temporary: false,\n *     });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setCollapsed(!collapsed)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps}>\n *           <Typography>Stuff that should be collapsed</Typography>\n *           <div>Whatever content...</div>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @example See More Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { IconRotator } from \"@react-md/core/icon/IconRotator\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\"\n * import { useCollapseTransition } from \"@react-md/core/transition/useCollapseTransition\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { type ReactElement, useState } from \"react\";\n *\n * import styles from \"./Example.module.scss\";\n * // pretend styles:\n * //\n * // .container {\n * //   padding: 1rem;\n * //   position: relative;\n * // }\n * //\n * // .button {\n * //   position: absolute;\n * //   right: 0;\n * //   top: 0;\n * // }\n *\n *\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *   const { elementProps } =\n *     useCollapseTransition({\n *       transitionIn: !collapsed,\n *       minHeight: 120,\n *       minPaddingTop: 16,\n *       className: styles.container,\n *     });\n *\n *   return (\n *     <div {...elementProps}>\n *       <Button\n *         aria-expanded={!collapsed}\n *         aria-label=\"Expand\"\n *         onClick={() => setCollapsed(!collapsed)}\n *         buttonType=\"icon\"\n *         className={styles.button}\n *       >\n *         <IconRotator rotated={!collapsed}>\n *           <KeyboardArrowDownIcon />\n *         </IconRotator>\n *       </Button>\n *       <SomeComponentWithALotOfContent />\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-collapse-transition | useCollapseTransition Demos}\n * @see {@link https://react-md.dev/components/collapse | Collapse Demos}\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useCollapseTransition<E extends HTMLElement>(\n  options: CollapseTransitionHookOptions<E>\n): CollapseTransitionHookReturnValue<E> {\n  const {\n    nodeRef: propNodeRef,\n    style: propStyle,\n    className,\n    transitionIn,\n    timeout = DEFAULT_COLLAPSE_TIMEOUT,\n    minHeight = 0,\n    minPaddingTop = 0,\n    minPaddingBottom = 0,\n    temporary = minHeight === 0 &&\n      minPaddingTop === 0 &&\n      minPaddingBottom === 0,\n    appear = false,\n    enter = true,\n    exit = true,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExit = noop,\n    onExiting = noop,\n    onExited = noop,\n  } = options;\n\n  const [nodeRef, refCallback] = useEnsuredRef(propNodeRef);\n  const [style, setStyle] = useState<CSSProperties | undefined>(() => {\n    if (transitionIn) {\n      return undefined;\n    }\n\n    return {\n      maxHeight: minHeight,\n      paddingTop: minPaddingTop,\n      paddingBottom: minPaddingBottom,\n    };\n  });\n\n  const transitionTimeout = getTransitionTimeout({\n    timeout,\n    appear,\n    enter,\n    exit,\n  });\n\n  const { appearing, rendered, ref, stage, transitionTo, disablePortal } =\n    useTransition({\n      nodeRef: refCallback,\n      timeout,\n      transitionIn,\n      reflow: true,\n      appear,\n      enter,\n      exit,\n      temporary,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n        });\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        const { maxHeight, paddingTop, paddingBottom } = getElementSizing(\n          nodeRef.current\n        );\n\n        const duration = appearing\n          ? transitionTimeout.appear\n          : transitionTimeout.enter;\n\n        setStyle({\n          maxHeight,\n          paddingTop,\n          paddingBottom,\n          transitionDuration: `${duration}ms`,\n        });\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        setStyle(undefined);\n      },\n      onExit() {\n        onExit();\n        const { maxHeight, paddingTop, paddingBottom } = getElementSizing(\n          nodeRef.current\n        );\n\n        setStyle({\n          maxHeight,\n          paddingTop,\n          paddingBottom,\n          transitionDuration: `${transitionTimeout.exit}ms`,\n        });\n      },\n      onExiting() {\n        onExiting();\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n          transitionDuration: `${transitionTimeout.exit}ms`,\n        });\n      },\n      onExited() {\n        onExited();\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n        });\n      },\n    });\n  const entering = stage === \"enter\" || stage === \"entering\";\n  const exiting = stage === \"exit\" || stage === \"exiting\";\n  const collapsible =\n    transitionTimeout.enter !== 0 || transitionTimeout.exit !== 0;\n\n  const elementProps: CollapseElementProps<E> = {\n    ref,\n    style: { ...style, ...propStyle },\n    className:\n      cnb(\n        className,\n        collapsible &&\n          collapse({\n            enter: entering,\n            leave: exiting,\n            disableOverflow: !transitionIn || !!style,\n          }),\n        stage === \"exited\" &&\n          minHeight === 0 &&\n          minPaddingTop === 0 &&\n          minPaddingBottom === 0 &&\n          DISPLAY_NONE_CLASS\n      ) || undefined,\n  };\n\n  return {\n    ...elementProps,\n    stage,\n    rendered,\n    appearing,\n    elementProps,\n    transitionTo,\n    disablePortal,\n  };\n}\n"],"names":["cnb","useState","useEnsuredRef","DISPLAY_NONE_CLASS","collapse","useTransition","getElementSizing","getTransitionTimeout","noop","DEFAULT_COLLAPSE_TIMEOUT","enter","exit","useCollapseTransition","options","nodeRef","propNodeRef","style","propStyle","className","transitionIn","timeout","minHeight","minPaddingTop","minPaddingBottom","temporary","appear","onEnter","onEntering","onEntered","onExit","onExiting","onExited","refCallback","setStyle","undefined","maxHeight","paddingTop","paddingBottom","transitionTimeout","appearing","rendered","ref","stage","transitionTo","disablePortal","reflow","current","duration","transitionDuration","entering","exiting","collapsible","elementProps","leave","disableOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../src/transition/useCollapseTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type CSSProperties, useState } from \"react\";\n\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { collapse } from \"./collapseStyles.js\";\nimport {\n  type CSSTransitionElementProps,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"./types.js\";\nimport { useTransition } from \"./useTransition.js\";\nimport { getElementSizing, getTransitionTimeout } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.0.0\n */\nexport const DEFAULT_COLLAPSE_TIMEOUT = {\n  enter: 250,\n  exit: 200,\n} as const satisfies TransitionTimeout;\n\n/**\n * @since 4.0.0\n */\nexport interface CollapseConfigurationStyle {\n  /**\n   * The minimum height that the collapsed element can be which defaults to `0`.\n   * This can either be a number of pixels or a string CSS height value.\n   *\n   * Setting this value to any non-zero value will allow for the element to\n   * shrink to the defined min-height, and then expand to the full height once\n   * no longer collapsed.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @defaultValue `0`\n   */\n  minHeight?: number | string;\n\n  /**\n   * The minimum padding-top that the collapsed element can be which defaults to\n   * `0`. This can either be a number of pixels or a string CSS `padding-top`\n   * value.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @defaultValue `0`\n   */\n  minPaddingTop?: number | string;\n\n  /**\n   * The minimum padding-bottom that the collapsed element can be which defaults\n   * to `0`. This can either be a number of pixels or a string CSS\n   * `padding-bottom` value.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @defaultValue `0`\n   */\n  minPaddingBottom?: number | string;\n}\n\n/**\n * @since 4.0.0\n */\nexport interface CollapseStyle extends CollapseConfigurationStyle {\n  /**\n   * This will only be set when the {@link TransitionStage} is `\"entering\"` or\n   * `\"exiting\"` as `\"${timeout}ms\"`.\n   */\n  transitionDuration?: string;\n}\n\n/**\n * These props (and `ref`) **must** be passed to a DOM element for the collapse\n * transition to work.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface CollapseElementProps<\n  E extends HTMLElement,\n> extends CSSTransitionElementProps<E> {\n  /**\n   * A merged styled object required for the collapse transition to work.\n   *\n   * @see {@link CollapseStyle}\n   * @see {@link CollapseTransitionHookOptions.style}\n   */\n  style: CSSProperties;\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 CollapseTransitionHookOptions<E extends HTMLElement>\n  extends\n    Omit<PreconfiguredCSSTransitionOptions<E>, \"exitedHidden\">,\n    CollapseConfigurationStyle {\n  /**\n   * An optional style to merge with the required collapse transition styles.\n   *\n   * If any keys from the {@link CollapseStyle} are included in this object,\n   * these styles will override and possibly break the collapse transition.\n   */\n  style?: CSSProperties;\n\n  /**\n   *\n   * @see {@link DEFAULT_COLLAPSE_TIMEOUT}\n   * @defaultValue `DEFAULT_COLLAPSE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   *\n   * @defaultValue `minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0`\n   */\n  temporary?: boolean;\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 CollapseTransitionHookReturnValue<E extends HTMLElement>\n  extends CSSTransitionHookReturnValue<E>, CollapseElementProps<E> {\n  /**\n   * This is just a convenience object so that you don't need to destructure as\n   * many variables to pass to an element.\n   *\n   * @example Simple Usage\n   * ```tsx\n   * const { elementProps, rendered } = useCollapseTransition({\n   *   // ...options\n   *   transitionIn,\n   * });\n   *\n   * if (!rendered) {\n   *   return null\n   * }\n   *\n   * return <div {...elementProps}>{children}</div>;\n   *\n   * // This is the long-hand version\n   * const { ref, style, className, hidden, rendered } = useCollapseTransition({\n   *   // ...options\n   *   transitionIn,\n   * });\n   *\n   * if (!rendered) {\n   *   return null\n   * }\n   *\n   * return (\n   *   <div\n   *     ref={ref}\n   *     style={style}\n   *     className={className}\n   *     hidden={hidden}\n   *   >\n   *     {children}\n   *   </div>\n   * );\n   * ```\n   */\n  elementProps: Readonly<CollapseElementProps<E>>;\n}\n\n/**\n * This hook is used to create a transition to collapse and expand an element\n * **inline** with other content like an accordion by animating the\n * `max-height`, `padding-top`, and `padding-bottom` CSS properties. The default\n * behavior is to hide the element completely while collapsed, but providing the\n * `minHeight`, `minPaddingTop`, and `minPaddingBottom` options can make this\n * work like a \"See More\"/\"Preview\" type of element\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { useCollapseTransition } from \"@react-md/core/transition/useCollapseTransition\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { type ReactElement, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *   const { elementProps, rendered } =\n *     useCollapseTransition({\n *       transitionIn: !collapsed,\n *       // If the collapsible element should maintain state by not unmounting\n *       // while collapsed, uncomment this next line\n *       // temporary: false,\n *     });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setCollapsed(!collapsed)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps}>\n *           <Typography>Stuff that should be collapsed</Typography>\n *           <div>Whatever content...</div>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @example See More Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { IconRotator } from \"@react-md/core/icon/IconRotator\";\n * import KeyboardArrowDownIcon from \"@react-md/material-icons/KeyboardArrowDownIcon\"\n * import { useCollapseTransition } from \"@react-md/core/transition/useCollapseTransition\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { type ReactElement, useState } from \"react\";\n *\n * import styles from \"./Example.module.scss\";\n * // pretend styles:\n * //\n * // .container {\n * //   padding: 1rem;\n * //   position: relative;\n * // }\n * //\n * // .button {\n * //   position: absolute;\n * //   right: 0;\n * //   top: 0;\n * // }\n *\n *\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *   const { elementProps } =\n *     useCollapseTransition({\n *       transitionIn: !collapsed,\n *       minHeight: 120,\n *       minPaddingTop: 16,\n *       className: styles.container,\n *     });\n *\n *   return (\n *     <div {...elementProps}>\n *       <Button\n *         aria-expanded={!collapsed}\n *         aria-label=\"Expand\"\n *         onClick={() => setCollapsed(!collapsed)}\n *         buttonType=\"icon\"\n *         className={styles.button}\n *       >\n *         <IconRotator rotated={!collapsed}>\n *           <KeyboardArrowDownIcon />\n *         </IconRotator>\n *       </Button>\n *       <SomeComponentWithALotOfContent />\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-collapse-transition | useCollapseTransition Demos}\n * @see {@link https://react-md.dev/components/collapse | Collapse Demos}\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useCollapseTransition<E extends HTMLElement>(\n  options: CollapseTransitionHookOptions<E>\n): CollapseTransitionHookReturnValue<E> {\n  const {\n    nodeRef: propNodeRef,\n    style: propStyle,\n    className,\n    transitionIn,\n    timeout = DEFAULT_COLLAPSE_TIMEOUT,\n    minHeight = 0,\n    minPaddingTop = 0,\n    minPaddingBottom = 0,\n    temporary = minHeight === 0 &&\n      minPaddingTop === 0 &&\n      minPaddingBottom === 0,\n    appear = false,\n    enter = true,\n    exit = true,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExit = noop,\n    onExiting = noop,\n    onExited = noop,\n  } = options;\n\n  const [nodeRef, refCallback] = useEnsuredRef(propNodeRef);\n  const [style, setStyle] = useState<CSSProperties | undefined>(() => {\n    if (transitionIn) {\n      return undefined;\n    }\n\n    return {\n      maxHeight: minHeight,\n      paddingTop: minPaddingTop,\n      paddingBottom: minPaddingBottom,\n    };\n  });\n\n  const transitionTimeout = getTransitionTimeout({\n    timeout,\n    appear,\n    enter,\n    exit,\n  });\n\n  const { appearing, rendered, ref, stage, transitionTo, disablePortal } =\n    useTransition({\n      nodeRef: refCallback,\n      timeout,\n      transitionIn,\n      reflow: true,\n      appear,\n      enter,\n      exit,\n      temporary,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n        });\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        const { maxHeight, paddingTop, paddingBottom } = getElementSizing(\n          nodeRef.current\n        );\n\n        const duration = appearing\n          ? transitionTimeout.appear\n          : transitionTimeout.enter;\n\n        setStyle({\n          maxHeight,\n          paddingTop,\n          paddingBottom,\n          transitionDuration: `${duration}ms`,\n        });\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        setStyle(undefined);\n      },\n      onExit() {\n        onExit();\n        const { maxHeight, paddingTop, paddingBottom } = getElementSizing(\n          nodeRef.current\n        );\n\n        setStyle({\n          maxHeight,\n          paddingTop,\n          paddingBottom,\n          transitionDuration: `${transitionTimeout.exit}ms`,\n        });\n      },\n      onExiting() {\n        onExiting();\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n          transitionDuration: `${transitionTimeout.exit}ms`,\n        });\n      },\n      onExited() {\n        onExited();\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n        });\n      },\n    });\n  const entering = stage === \"enter\" || stage === \"entering\";\n  const exiting = stage === \"exit\" || stage === \"exiting\";\n  const collapsible =\n    transitionTimeout.enter !== 0 || transitionTimeout.exit !== 0;\n\n  const elementProps: CollapseElementProps<E> = {\n    ref,\n    style: { ...style, ...propStyle },\n    className:\n      cnb(\n        className,\n        collapsible &&\n          collapse({\n            enter: entering,\n            leave: exiting,\n            disableOverflow: !transitionIn || !!style,\n          }),\n        stage === \"exited\" &&\n          minHeight === 0 &&\n          minPaddingTop === 0 &&\n          minPaddingBottom === 0 &&\n          DISPLAY_NONE_CLASS\n      ) || undefined,\n  };\n\n  return {\n    ...elementProps,\n    stage,\n    rendered,\n    appearing,\n    elementProps,\n    transitionTo,\n    disablePortal,\n  };\n}\n"],"names":["cnb","useState","useEnsuredRef","DISPLAY_NONE_CLASS","collapse","useTransition","getElementSizing","getTransitionTimeout","noop","DEFAULT_COLLAPSE_TIMEOUT","enter","exit","useCollapseTransition","options","nodeRef","propNodeRef","style","propStyle","className","transitionIn","timeout","minHeight","minPaddingTop","minPaddingBottom","temporary","appear","onEnter","onEntering","onEntered","onExit","onExiting","onExited","refCallback","setStyle","undefined","maxHeight","paddingTop","paddingBottom","transitionTimeout","appearing","rendered","ref","stage","transitionTo","disablePortal","reflow","current","duration","transitionDuration","entering","exiting","collapsible","elementProps","leave","disableOverflow"],"mappings":"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"}

package/dist/transition/useCrossFadeTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useCrossFadeTransition.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionInDefaultedOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default cross fade transition timeout.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `CROSS_FADE_TIMEOUT` to\n * `DEFAULT_CROSS_FADE_TIMEOUT`\n */\nexport const DEFAULT_CROSS_FADE_TIMEOUT = {\n  appear: 300,\n  enter: 300,\n  exit: 0,\n} as const satisfies TransitionTimeout;\n\n/**\n * The default cross fade transition classes to use.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `CROSS_FADE_CLASSNAMES` to\n * `DEFAULT_CROSS_FADE_CLASSNAMES`.\n */\nexport const DEFAULT_CROSS_FADE_CLASSNAMES = {\n  appear: \"rmd-cross-fade\",\n  appearActive: \"rmd-cross-fade--active\",\n  enter: \"rmd-cross-fade\",\n  enterActive: \"rmd-cross-fade--active\",\n} as const satisfies CSSTransitionClassNames;\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 DEFAULT_CROSS_FADE_TIMEOUT}\n   * @defaultValue `CROSS_FADE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link CSSTransitionClassNames}\n   * @see {@link DEFAULT_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 * @see {@link https://react-md.dev/hooks/use-cross-fade-transition | useCrossFadeTransition Demos}\n * @see {@link https://react-md.dev/components/cross-fade | CrossFade Demos}\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 = DEFAULT_CROSS_FADE_TIMEOUT,\n    classNames = DEFAULT_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","DEFAULT_CROSS_FADE_TIMEOUT","appear","enter","exit","DEFAULT_CROSS_FADE_CLASSNAMES","appearActive","enterActive","useCrossFadeTransition","options","transitionIn","timeout","classNames","cssOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;CAMC,GACD,OAAO,MAAMC,6BAA6B;IACxCC,QAAQ;IACRC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC;;;;;;CAMC,GACD,OAAO,MAAMC,gCAAgC;IAC3CH,QAAQ;IACRI,cAAc;IACdH,OAAO;IACPI,aAAa;AACf,EAA6C;AA8B7C;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,uBACdC,UAA6C,CAAC,CAAC;IAE/C,MAAM,EACJP,SAAS,KAAK,EACdQ,eAAe,IAAI,EACnBC,UAAUV,0BAA0B,EACpCW,aAAaP,6BAA6B,EAC1C,GAAGQ,YACJ,GAAGJ;IAEJ,OAAOT,iBAAiB;QACtB,GAAGa,UAAU;QACbX;QACAS;QACAC;QACAF;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useCrossFadeTransition.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionInDefaultedOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default cross fade transition timeout.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `CROSS_FADE_TIMEOUT` to\n * `DEFAULT_CROSS_FADE_TIMEOUT`\n */\nexport const DEFAULT_CROSS_FADE_TIMEOUT = {\n  appear: 300,\n  enter: 300,\n  exit: 0,\n} as const satisfies TransitionTimeout;\n\n/**\n * The default cross fade transition classes to use.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `CROSS_FADE_CLASSNAMES` to\n * `DEFAULT_CROSS_FADE_CLASSNAMES`.\n */\nexport const DEFAULT_CROSS_FADE_CLASSNAMES = {\n  appear: \"rmd-cross-fade\",\n  appearActive: \"rmd-cross-fade--active\",\n  enter: \"rmd-cross-fade\",\n  enterActive: \"rmd-cross-fade--active\",\n} as const satisfies CSSTransitionClassNames;\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<\n  E extends HTMLElement,\n> extends PreconfiguredCSSTransitionInDefaultedOptions<E> {\n  /**\n   * @see {@link TransitionTimeout}\n   * @see {@link DEFAULT_CROSS_FADE_TIMEOUT}\n   * @defaultValue `CROSS_FADE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link CSSTransitionClassNames}\n   * @see {@link DEFAULT_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 * @see {@link https://react-md.dev/hooks/use-cross-fade-transition | useCrossFadeTransition Demos}\n * @see {@link https://react-md.dev/components/cross-fade | CrossFade Demos}\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 = DEFAULT_CROSS_FADE_TIMEOUT,\n    classNames = DEFAULT_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","DEFAULT_CROSS_FADE_TIMEOUT","appear","enter","exit","DEFAULT_CROSS_FADE_CLASSNAMES","appearActive","enterActive","useCrossFadeTransition","options","transitionIn","timeout","classNames","cssOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;CAMC,GACD,OAAO,MAAMC,6BAA6B;IACxCC,QAAQ;IACRC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC;;;;;;CAMC,GACD,OAAO,MAAMC,gCAAgC;IAC3CH,QAAQ;IACRI,cAAc;IACdH,OAAO;IACPI,aAAa;AACf,EAA6C;AA+B7C;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,uBACdC,UAA6C,CAAC,CAAC;IAE/C,MAAM,EACJP,SAAS,KAAK,EACdQ,eAAe,IAAI,EACnBC,UAAUV,0BAA0B,EACpCW,aAAaP,6BAA6B,EAC1C,GAAGQ,YACJ,GAAGJ;IAEJ,OAAOT,iBAAiB;QACtB,GAAGa,UAAU;QACbX;QACAS;QACAC;QACAF;IACF;AACF"}

package/dist/transition/useMaxWidthTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useMaxWidthTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport type { ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\n\nimport { maxWidthTransition } from \"./maxWidthTransition.js\";\n\ndeclare module \"react\" {\n  interface CSSProperites {\n    \"--rmd-max-width\"?: string | number;\n    \"--rmd-max-width-gap\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseMaxWidthTransitionOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions\n */\nexport interface MaxWidthTransitionOptions\n  extends BaseMaxWidthTransitionOptions {\n  element: ReactNode;\n  transitionIn: boolean;\n\n  disabled?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * The `useMaxWidthTransition` hook is used to animate the `max-width` using\n * the {@link maxWidthTransition} utility classes.\n *\n * NOTE: This hook clones the className into the child element using the\n * `cloneElement` API. The child **must** accept and pass the `className` forward\n * to work correctly.\n *\n * @see {@link maxWidthTransition}\n *\n * @since 6.0.0\n */\nexport function useMaxWidthTransition(\n  options: MaxWidthTransitionOptions\n): ReactNode {\n  const { element, disabled, disableTransition, transitionIn, className } =\n    options;\n\n  if (disabled || !isValidElement<{ className?: string }>(element)) {\n    return element;\n  }\n\n  const child = Children.only(element);\n  return cloneElement(element, {\n    className: maxWidthTransition({\n      className: cnb(child.props.className, className),\n      disabled: disableTransition,\n      transitionIn,\n    }),\n  });\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","maxWidthTransition","useMaxWidthTransition","options","element","disabled","disableTransition","transitionIn","className","child","only","props"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,QAAQ,QAAQ;AAE/D,SAASC,kBAAkB,QAAQ,0BAA0B;AA6B7D;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,SAAS,EAAE,GACrEL;IAEF,IAAIE,YAAY,CAACL,eAAuCI,UAAU;QAChE,OAAOA;IACT;IAEA,MAAMK,QAAQX,SAASY,IAAI,CAACN;IAC5B,OAAOL,aAAaK,SAAS;QAC3BI,WAAWP,mBAAmB;YAC5BO,WAAWX,IAAIY,MAAME,KAAK,CAACH,SAAS,EAAEA;YACtCH,UAAUC;YACVC;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useMaxWidthTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport type { ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\n\nimport { maxWidthTransition } from \"./maxWidthTransition.js\";\n\ndeclare module \"react\" {\n  interface CSSProperites {\n    \"--rmd-max-width\"?: string | number;\n    \"--rmd-max-width-gap\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseMaxWidthTransitionOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions\n */\nexport interface MaxWidthTransitionOptions extends BaseMaxWidthTransitionOptions {\n  element: ReactNode;\n  transitionIn: boolean;\n\n  disabled?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * The `useMaxWidthTransition` hook is used to animate the `max-width` using\n * the {@link maxWidthTransition} utility classes.\n *\n * NOTE: This hook clones the className into the child element using the\n * `cloneElement` API. The child **must** accept and pass the `className` forward\n * to work correctly.\n *\n * @see {@link maxWidthTransition}\n *\n * @since 6.0.0\n */\nexport function useMaxWidthTransition(\n  options: MaxWidthTransitionOptions\n): ReactNode {\n  const { element, disabled, disableTransition, transitionIn, className } =\n    options;\n\n  if (disabled || !isValidElement<{ className?: string }>(element)) {\n    return element;\n  }\n\n  const child = Children.only(element);\n  return cloneElement(element, {\n    className: maxWidthTransition({\n      className: cnb(child.props.className, className),\n      disabled: disableTransition,\n      transitionIn,\n    }),\n  });\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","maxWidthTransition","useMaxWidthTransition","options","element","disabled","disableTransition","transitionIn","className","child","only","props"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,QAAQ,QAAQ;AAE/D,SAASC,kBAAkB,QAAQ,0BAA0B;AA4B7D;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,SAAS,EAAE,GACrEL;IAEF,IAAIE,YAAY,CAACL,eAAuCI,UAAU;QAChE,OAAOA;IACT;IAEA,MAAMK,QAAQX,SAASY,IAAI,CAACN;IAC5B,OAAOL,aAAaK,SAAS;QAC3BI,WAAWP,mBAAmB;YAC5BO,WAAWX,IAAIY,MAAME,KAAK,CAACH,SAAS,EAAEA;YACtCH,UAAUC;YACVC;QACF;IACF;AACF"}

package/dist/transition/useScaleTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useScaleTransition.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default {@link TransitionTimeout} to use for horizontal and vertical\n * scale transitions.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `SCALE_TIMEOUT` to `DEFAULT_SCALE_TIMEOUT`.\n */\nexport const DEFAULT_SCALE_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\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` and renamed from `SCALE_CLASSNAMES` to\n * `DEFAULT_SCALE_CLASSNAMES`.\n */\nexport const DEFAULT_SCALE_CLASSNAMES = {\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} as const satisfies CSSTransitionClassNames;\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 DEFAULT_SCALE_CLASSNAMES}.\n * It was also renamed from `SCALE_Y_CLASSNAMES` to\n * `DEFAULT_SCALE_Y_CLASSNAMES`.\n */\nexport const DEFAULT_SCALE_Y_CLASSNAMES = {\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} as const satisfies CSSTransitionClassNames;\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 DEFAULT_SCALE_CLASSNAMES}\n   * @see {@link DEFAULT_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 { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\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 * @see {@link https://react-md.dev/hooks/use-scale-transition | useScaleTransition Demos}\n * @see {@link https://react-md.dev/components/scale | Scale Demos}\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 = DEFAULT_SCALE_TIMEOUT,\n    vertical = false,\n    temporary = true,\n    exitedHidden = true,\n    classNames = vertical\n      ? DEFAULT_SCALE_Y_CLASSNAMES\n      : DEFAULT_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","DEFAULT_SCALE_TIMEOUT","enter","exit","DEFAULT_SCALE_CLASSNAMES","appear","appearActive","enterActive","enterDone","exitActive","DEFAULT_SCALE_Y_CLASSNAMES","useScaleTransition","options","timeout","vertical","temporary","exitedHidden","classNames","transitionOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB;IACnCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B;IACtCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbC,WAAW;IACXL,MAAM;IACNM,YAAY;AACd,EAA6C;AAE7C;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B;IACxCL,QAAQ;IACRC,cACE;IACFJ,OAAO;IACPK,aACE;IACFC,WAAW;IACXL,MAAM;IACNM,YACE;AACJ,EAA6C;AAgC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASE,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUZ,qBAAqB,EAC/Ba,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,aAAaH,WACTJ,6BACAN,wBAAwB,EAC5B,GAAGc,mBACJ,GAAGN;IAEJ,OAAOZ,iBAAiB;QACtB,GAAGkB,iBAAiB;QACpBL;QACAE;QACAC;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useScaleTransition.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default {@link TransitionTimeout} to use for horizontal and vertical\n * scale transitions.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `SCALE_TIMEOUT` to `DEFAULT_SCALE_TIMEOUT`.\n */\nexport const DEFAULT_SCALE_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\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` and renamed from `SCALE_CLASSNAMES` to\n * `DEFAULT_SCALE_CLASSNAMES`.\n */\nexport const DEFAULT_SCALE_CLASSNAMES = {\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} as const satisfies CSSTransitionClassNames;\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 DEFAULT_SCALE_CLASSNAMES}.\n * It was also renamed from `SCALE_Y_CLASSNAMES` to\n * `DEFAULT_SCALE_Y_CLASSNAMES`.\n */\nexport const DEFAULT_SCALE_Y_CLASSNAMES = {\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} as const satisfies CSSTransitionClassNames;\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<\n  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 DEFAULT_SCALE_CLASSNAMES}\n   * @see {@link DEFAULT_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 { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\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 * @see {@link https://react-md.dev/hooks/use-scale-transition | useScaleTransition Demos}\n * @see {@link https://react-md.dev/components/scale | Scale Demos}\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 = DEFAULT_SCALE_TIMEOUT,\n    vertical = false,\n    temporary = true,\n    exitedHidden = true,\n    classNames = vertical\n      ? DEFAULT_SCALE_Y_CLASSNAMES\n      : DEFAULT_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","DEFAULT_SCALE_TIMEOUT","enter","exit","DEFAULT_SCALE_CLASSNAMES","appear","appearActive","enterActive","enterDone","exitActive","DEFAULT_SCALE_Y_CLASSNAMES","useScaleTransition","options","timeout","vertical","temporary","exitedHidden","classNames","transitionOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB;IACnCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B;IACtCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbC,WAAW;IACXL,MAAM;IACNM,YAAY;AACd,EAA6C;AAE7C;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B;IACxCL,QAAQ;IACRC,cACE;IACFJ,OAAO;IACPK,aACE;IACFC,WAAW;IACXL,MAAM;IACNM,YACE;AACJ,EAA6C;AAiC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASE,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUZ,qBAAqB,EAC/Ba,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,aAAaH,WACTJ,6BACAN,wBAAwB,EAC5B,GAAGc,mBACJ,GAAGN;IAEJ,OAAOZ,iBAAiB;QACtB,GAAGkB,iBAAiB;QACpBL;QACAE;QACAC;QACAC;IACF;AACF"}