@react-md/core 6.4.0 → 6.5.1

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<\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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"}
+{"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          globalThis\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    globalThis.addEventListener(\"keydown\", handleKeyDown);\n    window.addEventListener(\"scroll\", hideTooltip, true);\n    globalThis.addEventListener(\"touchend\", hideTooltip, true);\n    return () => {\n      globalThis.removeEventListener(\"keydown\", handleKeyDown);\n      window.removeEventListener(\"scroll\", hideTooltip, true);\n      globalThis.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 = globalThis.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 = globalThis.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","globalThis","getComputedStyle","getPropertyValue","currentSpacing","value","horizontal","xMargin","undefined","yMargin","appearing","process","env","NODE_ENV","document","getElementById","hideTooltip","handleKeyDown","event","key","addEventListener","window","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/tooltip/useTooltipPosition.js

@@ -24,7 +24,7 @@ import { getPosition } from "./utils.js";
         defaultPosition,
         threshold
     ]);
-    if (typeof determinedPosition !== "undefined") {
+    if (determinedPosition !== undefined) {
         return [
             determinedPosition,
             noop

package/dist/tooltip/useTooltipPosition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/useTooltipPosition.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport {\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_THRESHOLD,\n} from \"./constants.js\";\nimport { getPosition } from \"./utils.js\";\n\n/** @internal */\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.8.0\n */\nexport interface TooltipPositionHookOptions {\n  /**\n   * An optional controlled position to use that will disable the functionality\n   * to determine the \"best\" position to render the tooltip within the viewport.\n   */\n  position?: SimplePosition;\n\n  /**\n   * An optional position to use before the positioning calculation has\n   * occurred. This is also used to determine if the position should be\n   * horizontal vs vertical.\n   *\n   * Vertical - `\"below\"` or `\"above\"`\n   * Horizontal - `\"left\"` or `\"right\"`\n   *\n   * @defaultValue `\"below\"`\n   */\n  defaultPosition?: SimplePosition;\n\n  /**\n   * This value should be between 0 and 1 and will be multiplied by either the\n   * viewport height or viewport width to determine the best position to render\n   * the tooltip based on available space within the viewport.\n   *\n   * You _probably_ won't ever really need to update this value.\n   *\n   * @defaultValue `0.75`\n   */\n  threshold?: number;\n}\n\n/**\n * @internal\n * @since 2.8.0\n */\nexport type UpdateTooltipPosition = (container: HTMLElement) => void;\n\n/**\n * @internal\n * @since 2.8.0\n */\nexport type TooltipPositionHookReturnValue = [\n  SimplePosition,\n  UpdateTooltipPosition,\n];\n\n/**\n * A hook that's used to determine the \"best\" position to render the tooltip\n * within the viewport.\n *\n * @internal\n * @since 2.8.0\n */\nexport function useTooltipPosition(\n  options: TooltipPositionHookOptions\n): TooltipPositionHookReturnValue {\n  const {\n    position: determinedPosition,\n    threshold = DEFAULT_TOOLTIP_THRESHOLD,\n    defaultPosition = DEFAULT_TOOLTIP_POSITION,\n  } = options;\n\n  const [position, setPosition] = useState(defaultPosition);\n  const updatePosition = useCallback<UpdateTooltipPosition>(\n    (container) => {\n      setPosition(\n        getPosition({\n          container,\n          threshold,\n          defaultPosition,\n        })\n      );\n    },\n    [defaultPosition, threshold]\n  );\n\n  if (typeof determinedPosition !== \"undefined\") {\n    return [determinedPosition, noop];\n  }\n\n  return [position, updatePosition];\n}\n"],"names":["useCallback","useState","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_THRESHOLD","getPosition","noop","useTooltipPosition","options","position","determinedPosition","threshold","defaultPosition","setPosition","updatePosition","container"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAG9C,SACEC,wBAAwB,EACxBC,yBAAyB,QACpB,iBAAiB;AACxB,SAASC,WAAW,QAAQ,aAAa;AAEzC,cAAc,GACd,MAAMC,OAAO;AACX,aAAa;AACf;AAmDA;;;;;;CAMC,GACD,OAAO,SAASC,mBACdC,OAAmC;IAEnC,MAAM,EACJC,UAAUC,kBAAkB,EAC5BC,YAAYP,yBAAyB,EACrCQ,kBAAkBT,wBAAwB,EAC3C,GAAGK;IAEJ,MAAM,CAACC,UAAUI,YAAY,GAAGX,SAASU;IACzC,MAAME,iBAAiBb,YACrB,CAACc;QACCF,YACER,YAAY;YACVU;YACAJ;YACAC;QACF;IAEJ,GACA;QAACA;QAAiBD;KAAU;IAG9B,IAAI,OAAOD,uBAAuB,aAAa;QAC7C,OAAO;YAACA;YAAoBJ;SAAK;IACnC;IAEA,OAAO;QAACG;QAAUK;KAAe;AACnC"}
+{"version":3,"sources":["../../src/tooltip/useTooltipPosition.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport {\n  DEFAULT_TOOLTIP_POSITION,\n  DEFAULT_TOOLTIP_THRESHOLD,\n} from \"./constants.js\";\nimport { getPosition } from \"./utils.js\";\n\n/** @internal */\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 2.8.0\n */\nexport interface TooltipPositionHookOptions {\n  /**\n   * An optional controlled position to use that will disable the functionality\n   * to determine the \"best\" position to render the tooltip within the viewport.\n   */\n  position?: SimplePosition;\n\n  /**\n   * An optional position to use before the positioning calculation has\n   * occurred. This is also used to determine if the position should be\n   * horizontal vs vertical.\n   *\n   * Vertical - `\"below\"` or `\"above\"`\n   * Horizontal - `\"left\"` or `\"right\"`\n   *\n   * @defaultValue `\"below\"`\n   */\n  defaultPosition?: SimplePosition;\n\n  /**\n   * This value should be between 0 and 1 and will be multiplied by either the\n   * viewport height or viewport width to determine the best position to render\n   * the tooltip based on available space within the viewport.\n   *\n   * You _probably_ won't ever really need to update this value.\n   *\n   * @defaultValue `0.75`\n   */\n  threshold?: number;\n}\n\n/**\n * @internal\n * @since 2.8.0\n */\nexport type UpdateTooltipPosition = (container: HTMLElement) => void;\n\n/**\n * @internal\n * @since 2.8.0\n */\nexport type TooltipPositionHookReturnValue = [\n  SimplePosition,\n  UpdateTooltipPosition,\n];\n\n/**\n * A hook that's used to determine the \"best\" position to render the tooltip\n * within the viewport.\n *\n * @internal\n * @since 2.8.0\n */\nexport function useTooltipPosition(\n  options: TooltipPositionHookOptions\n): TooltipPositionHookReturnValue {\n  const {\n    position: determinedPosition,\n    threshold = DEFAULT_TOOLTIP_THRESHOLD,\n    defaultPosition = DEFAULT_TOOLTIP_POSITION,\n  } = options;\n\n  const [position, setPosition] = useState(defaultPosition);\n  const updatePosition = useCallback<UpdateTooltipPosition>(\n    (container) => {\n      setPosition(\n        getPosition({\n          container,\n          threshold,\n          defaultPosition,\n        })\n      );\n    },\n    [defaultPosition, threshold]\n  );\n\n  if (determinedPosition !== undefined) {\n    return [determinedPosition, noop];\n  }\n\n  return [position, updatePosition];\n}\n"],"names":["useCallback","useState","DEFAULT_TOOLTIP_POSITION","DEFAULT_TOOLTIP_THRESHOLD","getPosition","noop","useTooltipPosition","options","position","determinedPosition","threshold","defaultPosition","setPosition","updatePosition","container","undefined"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAG9C,SACEC,wBAAwB,EACxBC,yBAAyB,QACpB,iBAAiB;AACxB,SAASC,WAAW,QAAQ,aAAa;AAEzC,cAAc,GACd,MAAMC,OAAO;AACX,aAAa;AACf;AAmDA;;;;;;CAMC,GACD,OAAO,SAASC,mBACdC,OAAmC;IAEnC,MAAM,EACJC,UAAUC,kBAAkB,EAC5BC,YAAYP,yBAAyB,EACrCQ,kBAAkBT,wBAAwB,EAC3C,GAAGK;IAEJ,MAAM,CAACC,UAAUI,YAAY,GAAGX,SAASU;IACzC,MAAME,iBAAiBb,YACrB,CAACc;QACCF,YACER,YAAY;YACVU;YACAJ;YACAC;QACF;IAEJ,GACA;QAACA;QAAiBD;KAAU;IAG9B,IAAID,uBAAuBM,WAAW;QACpC,OAAO;YAACN;YAAoBJ;SAAK;IACnC;IAEA,OAAO;QAACG;QAAUK;KAAe;AACnC"}

package/dist/transition/useCarousel.js

@@ -138,7 +138,7 @@ import { loop } from "../utils/loop.js";
         if (paused) {
             return;
         }
-        const timeout = window.setTimeout(()=>{
+        const timeout = globalThis.setTimeout(()=>{
             const nextActiveIndex = loop({
                 min: 0,
                 max: total,
@@ -151,7 +151,7 @@ import { loop } from "../utils/loop.js";
             });
         }, duration);
         return ()=>{
-            window.clearTimeout(timeout);
+            globalThis.clearTimeout(timeout);
         };
     }, [
         paused,

package/dist/transition/useCarousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useCarousel.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\n\nimport { type UseStateSetter } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { loop } from \"../utils/loop.js\";\nimport { type SlideDirection } from \"./SlideContainer.js\";\n\n/** @since 6.0.0 */\nexport interface CarouselSlideState {\n  direction: SlideDirection;\n  activeIndex: number;\n}\n\n/** @since 6.0.0 */\nexport interface CarouselState extends CarouselSlideState {\n  paused: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface CarouselImplementation extends CarouselState {\n  /**\n   * Increments the carousel slide active index by 1 ensuring it does not\n   * advance past the {@link CarouselOptions.totalSlides} index.\n   */\n  increment: () => void;\n\n  /**\n   * Decrements the carousel slide active index by 1 and prevents decrementing\n   * past 0.\n   */\n  decrement: () => void;\n\n  /**\n   * This can be used to manually control the {@link paused} state.\n   */\n  setPaused: UseStateSetter<boolean>;\n\n  /**\n   * Toggles the {@link paused} state.\n   */\n  togglePaused: () => void;\n\n  /**\n   * A convenience wrapper for the {@link setCarouselSlideState} that will\n   * ensure the {@link CarouselSlideState.direction} is correct based on the\n   * current active index and next active index.\n   */\n  setActiveIndex: UseStateSetter<number>;\n\n  /**\n   * This can be used if the provided carousel actions do not solve your use\n   * case.\n   */\n  setCarouselSlideState: UseStateSetter<CarouselSlideState>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CarouselOptions {\n  /**\n   * The amount of time in milliseconds each slide should be visible before\n   * advancing to the next slide.\n   *\n   * @defaultValue `8000`\n   */\n  duration?: number;\n\n  /**\n   * The total number of slides within your carousel so that you can safely loop\n   * through all slides.\n   */\n  totalSlides: number;\n}\n\n/**\n * @example Accessible Carousel Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { useCarousel } from \"@react-md/core/transition/useCarousel\";\n * import ChevronLeftIcon from \"@react-md/material-icons/ChevronLeftIcon\";\n * import ChevronRightIcon from \"@react-md/material-icons/ChevronRightIcon\";\n * import PauseIcon from \"@react-md/material-icons/PauseIcon\";\n * import PlayArrowIcon from \"@react-md/material-icons/PlayArrowIcon\";\n * import type { ReactElement } from \"react\";\n *\n * const slides = [\n *   { title: \"Slide 1\" },\n *   { title: \"Slide 2\" },\n *   { title: \"Slide 3\" },\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const {\n *     paused,\n *     direction,\n *     activeIndex,\n *     togglePaused,\n *     setActiveIndex,\n *     increment,\n *     decrement,\n *   } = useCarousel({\n *     duration: 5000,\n *     totalSlides: slides.length,\n *   });\n *\n *   const slideId = useId();\n *\n *   return (\n *     <div\n *       aria-roledescription=\"carousel\"\n *       aria-label=\"Carousel\"\n *       id={useId()}\n *       role=\"region\"\n *     >\n *       <SlideContainer aria-live=\"off\" direction={direction}>\n *         {slides.map(({ title }, index) => (\n *           <Slide\n *             key={title}\n *             aria-label={`Slide ${index + 1} of ${slides.length - 1}`}\n *             aria-roledescription=\"slide\"\n *             id={`${slideId}-${index}`}\n *             role=\"group\"\n *             active={activeIndex === index}\n *           >\n *             {title}\n *           </Slide>\n *         ))}\n *       </SlideContainer>\n *       <Button\n *         aria-label=\"Pause\"\n *         aria-pressed={paused}\n *         button=\"icon\"\n *         onClick={togglePaused}\n *       >\n *         {paused ? <PlayArrowIcon /> : <PauseIcon />}\n *       </Button>\n *       {slides.map(({ title }, index) => (\n *         <Button\n *           key={title}\n *           aria-label={`Slide ${index + 1}`}\n *           aria-selected={activeIndex === index}\n *           aria-controls={`${slideId}-${index}`}\n *           role=\"tab\"\n *           onClick={() => setActiveIndex(index))}\n *         />\n *       ))}\n *       <Button\n *         aria-label=\"Previous Slide\"\n *         onClick={decrement}\n *         disabled={activeIndex === 0}\n *         buttonType=\"icon\"\n *       >\n *         <ChevronLeftIcon />\n *       </Button>\n *       <Button\n *         aria-label=\"Next Slide\"\n *         onClick={increment}\n *         disabled={activeIndex === slides.length - 1}\n *         buttonType=\"icon\"\n *       >\n *         <ChevronRightIcon />\n *       </Button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/carousel | Carousel Demos}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/carousel/}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html}\n * @since 6.0.0\n */\nexport function useCarousel(options: CarouselOptions): CarouselImplementation {\n  const { duration = 8000, totalSlides } = options;\n  const total = totalSlides - 1;\n\n  const [state, setCarouselSlideState] = useState<CarouselSlideState>({\n    direction: \"forward\",\n    activeIndex: 0,\n  });\n  const {\n    toggled: paused,\n    toggle: togglePaused,\n    setToggled: setPaused,\n  } = useToggle(false);\n  const setActiveIndex = useCallback<UseStateSetter<number>>(\n    (activeIndexOrGetter) => {\n      setCarouselSlideState((prevState) => {\n        const prevActiveIndex = prevState.activeIndex;\n        const nextActiveIndex =\n          typeof activeIndexOrGetter === \"function\"\n            ? activeIndexOrGetter(prevActiveIndex)\n            : activeIndexOrGetter;\n\n        return {\n          direction: prevActiveIndex < nextActiveIndex ? \"forward\" : \"backward\",\n          activeIndex: nextActiveIndex,\n        };\n      });\n    },\n    []\n  );\n  const increment = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"forward\",\n      activeIndex: Math.min(total, prevState.activeIndex + 1),\n    }));\n  }, [total]);\n  const decrement = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"backward\",\n      activeIndex: Math.max(0, prevState.activeIndex - 1),\n    }));\n  }, []);\n\n  const { activeIndex } = state;\n  useEffect(() => {\n    if (paused) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => {\n      const nextActiveIndex = loop({\n        min: 0,\n        max: total,\n        value: activeIndex,\n        increment: true,\n      });\n      setCarouselSlideState({\n        direction: activeIndex < nextActiveIndex ? \"forward\" : \"backward\",\n        activeIndex: nextActiveIndex,\n      });\n    }, duration);\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [paused, duration, activeIndex, total]);\n\n  return {\n    ...state,\n    increment,\n    decrement,\n    paused,\n    setPaused,\n    togglePaused,\n    setActiveIndex,\n    setCarouselSlideState,\n  };\n}\n"],"names":["useCallback","useEffect","useState","useToggle","loop","useCarousel","options","duration","totalSlides","total","state","setCarouselSlideState","direction","activeIndex","toggled","paused","toggle","togglePaused","setToggled","setPaused","setActiveIndex","activeIndexOrGetter","prevState","prevActiveIndex","nextActiveIndex","increment","Math","min","decrement","max","timeout","window","setTimeout","value","clearTimeout"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAGzD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,IAAI,QAAQ,mBAAmB;AAuExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EAAEC,WAAW,IAAI,EAAEC,WAAW,EAAE,GAAGF;IACzC,MAAMG,QAAQD,cAAc;IAE5B,MAAM,CAACE,OAAOC,sBAAsB,GAAGT,SAA6B;QAClEU,WAAW;QACXC,aAAa;IACf;IACA,MAAM,EACJC,SAASC,MAAM,EACfC,QAAQC,YAAY,EACpBC,YAAYC,SAAS,EACtB,GAAGhB,UAAU;IACd,MAAMiB,iBAAiBpB,YACrB,CAACqB;QACCV,sBAAsB,CAACW;YACrB,MAAMC,kBAAkBD,UAAUT,WAAW;YAC7C,MAAMW,kBACJ,OAAOH,wBAAwB,aAC3BA,oBAAoBE,mBACpBF;YAEN,OAAO;gBACLT,WAAWW,kBAAkBC,kBAAkB,YAAY;gBAC3DX,aAAaW;YACf;QACF;IACF,GACA,EAAE;IAEJ,MAAMC,YAAYzB,YAAY;QAC5BW,sBAAsB,CAACW,YAAe,CAAA;gBACpCV,WAAW;gBACXC,aAAaa,KAAKC,GAAG,CAAClB,OAAOa,UAAUT,WAAW,GAAG;YACvD,CAAA;IACF,GAAG;QAACJ;KAAM;IACV,MAAMmB,YAAY5B,YAAY;QAC5BW,sBAAsB,CAACW,YAAe,CAAA;gBACpCV,WAAW;gBACXC,aAAaa,KAAKG,GAAG,CAAC,GAAGP,UAAUT,WAAW,GAAG;YACnD,CAAA;IACF,GAAG,EAAE;IAEL,MAAM,EAAEA,WAAW,EAAE,GAAGH;IACxBT,UAAU;QACR,IAAIc,QAAQ;YACV;QACF;QAEA,MAAMe,UAAUC,OAAOC,UAAU,CAAC;YAChC,MAAMR,kBAAkBpB,KAAK;gBAC3BuB,KAAK;gBACLE,KAAKpB;gBACLwB,OAAOpB;gBACPY,WAAW;YACb;YACAd,sBAAsB;gBACpBC,WAAWC,cAAcW,kBAAkB,YAAY;gBACvDX,aAAaW;YACf;QACF,GAAGjB;QAEH,OAAO;YACLwB,OAAOG,YAAY,CAACJ;QACtB;IACF,GAAG;QAACf;QAAQR;QAAUM;QAAaJ;KAAM;IAEzC,OAAO;QACL,GAAGC,KAAK;QACRe;QACAG;QACAb;QACAI;QACAF;QACAG;QACAT;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useCarousel.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\n\nimport { type UseStateSetter } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { loop } from \"../utils/loop.js\";\nimport { type SlideDirection } from \"./SlideContainer.js\";\n\n/** @since 6.0.0 */\nexport interface CarouselSlideState {\n  direction: SlideDirection;\n  activeIndex: number;\n}\n\n/** @since 6.0.0 */\nexport interface CarouselState extends CarouselSlideState {\n  paused: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface CarouselImplementation extends CarouselState {\n  /**\n   * Increments the carousel slide active index by 1 ensuring it does not\n   * advance past the {@link CarouselOptions.totalSlides} index.\n   */\n  increment: () => void;\n\n  /**\n   * Decrements the carousel slide active index by 1 and prevents decrementing\n   * past 0.\n   */\n  decrement: () => void;\n\n  /**\n   * This can be used to manually control the {@link paused} state.\n   */\n  setPaused: UseStateSetter<boolean>;\n\n  /**\n   * Toggles the {@link paused} state.\n   */\n  togglePaused: () => void;\n\n  /**\n   * A convenience wrapper for the {@link setCarouselSlideState} that will\n   * ensure the {@link CarouselSlideState.direction} is correct based on the\n   * current active index and next active index.\n   */\n  setActiveIndex: UseStateSetter<number>;\n\n  /**\n   * This can be used if the provided carousel actions do not solve your use\n   * case.\n   */\n  setCarouselSlideState: UseStateSetter<CarouselSlideState>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CarouselOptions {\n  /**\n   * The amount of time in milliseconds each slide should be visible before\n   * advancing to the next slide.\n   *\n   * @defaultValue `8000`\n   */\n  duration?: number;\n\n  /**\n   * The total number of slides within your carousel so that you can safely loop\n   * through all slides.\n   */\n  totalSlides: number;\n}\n\n/**\n * @example Accessible Carousel Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { useCarousel } from \"@react-md/core/transition/useCarousel\";\n * import ChevronLeftIcon from \"@react-md/material-icons/ChevronLeftIcon\";\n * import ChevronRightIcon from \"@react-md/material-icons/ChevronRightIcon\";\n * import PauseIcon from \"@react-md/material-icons/PauseIcon\";\n * import PlayArrowIcon from \"@react-md/material-icons/PlayArrowIcon\";\n * import type { ReactElement } from \"react\";\n *\n * const slides = [\n *   { title: \"Slide 1\" },\n *   { title: \"Slide 2\" },\n *   { title: \"Slide 3\" },\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const {\n *     paused,\n *     direction,\n *     activeIndex,\n *     togglePaused,\n *     setActiveIndex,\n *     increment,\n *     decrement,\n *   } = useCarousel({\n *     duration: 5000,\n *     totalSlides: slides.length,\n *   });\n *\n *   const slideId = useId();\n *\n *   return (\n *     <div\n *       aria-roledescription=\"carousel\"\n *       aria-label=\"Carousel\"\n *       id={useId()}\n *       role=\"region\"\n *     >\n *       <SlideContainer aria-live=\"off\" direction={direction}>\n *         {slides.map(({ title }, index) => (\n *           <Slide\n *             key={title}\n *             aria-label={`Slide ${index + 1} of ${slides.length - 1}`}\n *             aria-roledescription=\"slide\"\n *             id={`${slideId}-${index}`}\n *             role=\"group\"\n *             active={activeIndex === index}\n *           >\n *             {title}\n *           </Slide>\n *         ))}\n *       </SlideContainer>\n *       <Button\n *         aria-label=\"Pause\"\n *         aria-pressed={paused}\n *         button=\"icon\"\n *         onClick={togglePaused}\n *       >\n *         {paused ? <PlayArrowIcon /> : <PauseIcon />}\n *       </Button>\n *       {slides.map(({ title }, index) => (\n *         <Button\n *           key={title}\n *           aria-label={`Slide ${index + 1}`}\n *           aria-selected={activeIndex === index}\n *           aria-controls={`${slideId}-${index}`}\n *           role=\"tab\"\n *           onClick={() => setActiveIndex(index))}\n *         />\n *       ))}\n *       <Button\n *         aria-label=\"Previous Slide\"\n *         onClick={decrement}\n *         disabled={activeIndex === 0}\n *         buttonType=\"icon\"\n *       >\n *         <ChevronLeftIcon />\n *       </Button>\n *       <Button\n *         aria-label=\"Next Slide\"\n *         onClick={increment}\n *         disabled={activeIndex === slides.length - 1}\n *         buttonType=\"icon\"\n *       >\n *         <ChevronRightIcon />\n *       </Button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/carousel | Carousel Demos}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/carousel/}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html}\n * @since 6.0.0\n */\nexport function useCarousel(options: CarouselOptions): CarouselImplementation {\n  const { duration = 8000, totalSlides } = options;\n  const total = totalSlides - 1;\n\n  const [state, setCarouselSlideState] = useState<CarouselSlideState>({\n    direction: \"forward\",\n    activeIndex: 0,\n  });\n  const {\n    toggled: paused,\n    toggle: togglePaused,\n    setToggled: setPaused,\n  } = useToggle(false);\n  const setActiveIndex = useCallback<UseStateSetter<number>>(\n    (activeIndexOrGetter) => {\n      setCarouselSlideState((prevState) => {\n        const prevActiveIndex = prevState.activeIndex;\n        const nextActiveIndex =\n          typeof activeIndexOrGetter === \"function\"\n            ? activeIndexOrGetter(prevActiveIndex)\n            : activeIndexOrGetter;\n\n        return {\n          direction: prevActiveIndex < nextActiveIndex ? \"forward\" : \"backward\",\n          activeIndex: nextActiveIndex,\n        };\n      });\n    },\n    []\n  );\n  const increment = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"forward\",\n      activeIndex: Math.min(total, prevState.activeIndex + 1),\n    }));\n  }, [total]);\n  const decrement = useCallback(() => {\n    setCarouselSlideState((prevState) => ({\n      direction: \"backward\",\n      activeIndex: Math.max(0, prevState.activeIndex - 1),\n    }));\n  }, []);\n\n  const { activeIndex } = state;\n  useEffect(() => {\n    if (paused) {\n      return;\n    }\n\n    const timeout = globalThis.setTimeout(() => {\n      const nextActiveIndex = loop({\n        min: 0,\n        max: total,\n        value: activeIndex,\n        increment: true,\n      });\n      setCarouselSlideState({\n        direction: activeIndex < nextActiveIndex ? \"forward\" : \"backward\",\n        activeIndex: nextActiveIndex,\n      });\n    }, duration);\n\n    return () => {\n      globalThis.clearTimeout(timeout);\n    };\n  }, [paused, duration, activeIndex, total]);\n\n  return {\n    ...state,\n    increment,\n    decrement,\n    paused,\n    setPaused,\n    togglePaused,\n    setActiveIndex,\n    setCarouselSlideState,\n  };\n}\n"],"names":["useCallback","useEffect","useState","useToggle","loop","useCarousel","options","duration","totalSlides","total","state","setCarouselSlideState","direction","activeIndex","toggled","paused","toggle","togglePaused","setToggled","setPaused","setActiveIndex","activeIndexOrGetter","prevState","prevActiveIndex","nextActiveIndex","increment","Math","min","decrement","max","timeout","globalThis","setTimeout","value","clearTimeout"],"mappings":"AAAA;AAEA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAGzD,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,IAAI,QAAQ,mBAAmB;AAuExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGC,GACD,OAAO,SAASC,YAAYC,OAAwB;IAClD,MAAM,EAAEC,WAAW,IAAI,EAAEC,WAAW,EAAE,GAAGF;IACzC,MAAMG,QAAQD,cAAc;IAE5B,MAAM,CAACE,OAAOC,sBAAsB,GAAGT,SAA6B;QAClEU,WAAW;QACXC,aAAa;IACf;IACA,MAAM,EACJC,SAASC,MAAM,EACfC,QAAQC,YAAY,EACpBC,YAAYC,SAAS,EACtB,GAAGhB,UAAU;IACd,MAAMiB,iBAAiBpB,YACrB,CAACqB;QACCV,sBAAsB,CAACW;YACrB,MAAMC,kBAAkBD,UAAUT,WAAW;YAC7C,MAAMW,kBACJ,OAAOH,wBAAwB,aAC3BA,oBAAoBE,mBACpBF;YAEN,OAAO;gBACLT,WAAWW,kBAAkBC,kBAAkB,YAAY;gBAC3DX,aAAaW;YACf;QACF;IACF,GACA,EAAE;IAEJ,MAAMC,YAAYzB,YAAY;QAC5BW,sBAAsB,CAACW,YAAe,CAAA;gBACpCV,WAAW;gBACXC,aAAaa,KAAKC,GAAG,CAAClB,OAAOa,UAAUT,WAAW,GAAG;YACvD,CAAA;IACF,GAAG;QAACJ;KAAM;IACV,MAAMmB,YAAY5B,YAAY;QAC5BW,sBAAsB,CAACW,YAAe,CAAA;gBACpCV,WAAW;gBACXC,aAAaa,KAAKG,GAAG,CAAC,GAAGP,UAAUT,WAAW,GAAG;YACnD,CAAA;IACF,GAAG,EAAE;IAEL,MAAM,EAAEA,WAAW,EAAE,GAAGH;IACxBT,UAAU;QACR,IAAIc,QAAQ;YACV;QACF;QAEA,MAAMe,UAAUC,WAAWC,UAAU,CAAC;YACpC,MAAMR,kBAAkBpB,KAAK;gBAC3BuB,KAAK;gBACLE,KAAKpB;gBACLwB,OAAOpB;gBACPY,WAAW;YACb;YACAd,sBAAsB;gBACpBC,WAAWC,cAAcW,kBAAkB,YAAY;gBACvDX,aAAaW;YACf;QACF,GAAGjB;QAEH,OAAO;YACLwB,WAAWG,YAAY,CAACJ;QAC1B;IACF,GAAG;QAACf;QAAQR;QAAUM;QAAaJ;KAAM;IAEzC,OAAO;QACL,GAAGC,KAAK;QACRe;QACAG;QACAb;QACAI;QACAF;QACAG;QACAT;IACF;AACF"}

package/dist/transition/useCollapseTransition.js

@@ -119,7 +119,7 @@ const noop = ()=>{
     const [nodeRef, refCallback] = useEnsuredRef(propNodeRef);
     const [style, setStyle] = useState(()=>{
         if (transitionIn) {
-            return undefined;
+            return;
         }
         return {
             maxHeight: minHeight,

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<\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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"}
+{"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;\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","maxHeight","paddingTop","paddingBottom","transitionTimeout","appearing","rendered","ref","stage","transitionTo","disablePortal","reflow","current","duration","transitionDuration","undefined","entering","exiting","collapsible","elementProps","leave","disableOverflow"],"mappings":"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"}

package/dist/transition/useSkeletonPlaceholder.js

@@ -21,10 +21,10 @@ import { randomSkeletonPlaceholder, skeletonPlaceholder } from "./skeletonPlaceh
  */ export function useSkeletonPlaceholder(options = {}) {
     const { style: propStyle, className, height, width: propWidth, disabled = false, delay: propDelay, minDelay, maxDelay, minPercentage, maxPercentage } = options;
     const ssr = useSsr();
-    const isDefinedWidth = typeof propWidth !== "undefined";
-    const isDefinedDelay = typeof propDelay !== "undefined";
+    const isDefinedWidth = propWidth !== undefined;
+    const isDefinedDelay = propDelay !== undefined;
     const [randomStyles, setRandomStyles] = useState(()=>{
-        if (typeof window === "undefined" || ssr || disabled) {
+        if (globalThis.window === undefined || ssr || disabled) {
             return {};
         }
         return randomSkeletonPlaceholder({
@@ -65,7 +65,7 @@ import { randomSkeletonPlaceholder, skeletonPlaceholder } from "./skeletonPlaceh
         }
     }
     let style = propStyle;
-    if (!!width || !!animationDelay || typeof height !== "undefined") {
+    if (!!width || !!animationDelay || height !== undefined) {
         style = {
             ...style,
             height: height ?? style?.height,

package/dist/transition/useSkeletonPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useSkeletonPlaceholder.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type SkeletonPlaceholderRandomOptions,\n  randomSkeletonPlaceholder,\n  skeletonPlaceholder,\n} from \"./skeletonPlaceholderUtils.js\";\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderOptions extends SkeletonPlaceholderRandomOptions {\n  style?: CSSProperties;\n  className?: string;\n\n  /**\n   * Set this to a custom `animation-delay` value (should be in milliseconds).\n   *\n   * @example\n   * ```ts\n   * delay=\"200ms\"\n   * ```\n   */\n  delay?: string;\n\n  /**\n   * Set this value to a number or length unit string to set the height with\n   * inline styles.\n   *\n   * If this is `undefined`, it will use the skeleton placeholder CSS variable\n   * value instead which defaults to `1.125em`\n   *\n   * @defaultValue `undefined`\n   */\n  height?: string | number;\n\n  /**\n   * A custom width to apply to the skeleton placeholder.\n   *\n   * Set this value to an empty string if you want to control the width through\n   * SCSS.\n   *\n   * @example No Inline Width CSS\n   * ```scss\n   * @use \"@react-md/core\";\n   *\n   * .customStyles {\n   *   // You could use these mixins on a parent element instead which would\n   *   // set the height and width to all skeleton placeholders that appear as a\n   *   // child instead\n   *   // @include core.transition-set-var(skeleton-placeholder-height, 1.5rem);\n   *   // @include core.transition-set-var(skeleton-placeholder-width, 40%);\n   *\n   *   height: 1,5rem;\n   *   width: 40%;\n   * }\n   * ```\n   *\n   * @example No Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n   *\n   * import styles from \"./MyComponent.module.scss\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     width: null,\n   *     className: styles.customStyles,\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   *\n   * Set this value to a number or length unit string to set the width with\n   * inline styles.\n   *\n   * @example Custom Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     // any of these are valid\n   *     // width: 40,\n   *     // width: \"1rem\",\n   *     // width: \"1vh\",\n   *     // width: \"40%\",\n   *     width: \"1rem\",\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   * If this value is `undefined`, a random percentage will be generated instead\n   * using the {@link minPercentage} and {@link maxPercentage} options.\n   *\n   * Set this value to `null` if the size should be derived from the provided\n   * `className` instead.\n   *\n   * @defaultValue `randomInt({ min: minPercentage, max: maxPercentage })%`\n   */\n  width?: number | string | null;\n\n  /**\n   * Settings this to `true` will prevent any of the skeleton placeholder styles\n   * to be applied. This is really only useful if you can prerender parts of\n   * your layout while waiting for the data to load.\n   *\n   * @example Pre-rendered Layout\n   * ```tsx\n   * import type { ReactElement } from \"@react\";\n   * import { SkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\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 gridClassName=\"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   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SkeletonPlaceholderStylingProps {\n  style?: CSSProperties;\n  className: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n * import { type ReactElement } from \"react\";\n *\n * export default function UsingTheHookExample(): ReactElement {\n *   const { style, className } = useSkeletonPlaceholder();\n *   return <div style={style} className={className} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}\n * @see {@link https://react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}\n * @since 6.0.0\n */\nexport function useSkeletonPlaceholder(\n  options: SkeletonPlaceholderOptions = {}\n): SkeletonPlaceholderStylingProps {\n  const {\n    style: propStyle,\n    className,\n    height,\n    width: propWidth,\n    disabled = false,\n    delay: propDelay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  } = options;\n  const ssr = useSsr();\n\n  const isDefinedWidth = typeof propWidth !== \"undefined\";\n  const isDefinedDelay = typeof propDelay !== \"undefined\";\n  const [randomStyles, setRandomStyles] = useState<CSSProperties>(() => {\n    if (typeof window === \"undefined\" || ssr || disabled) {\n      return {};\n    }\n\n    return randomSkeletonPlaceholder({\n      minDelay,\n      maxDelay,\n      minPercentage,\n      maxPercentage,\n    });\n  });\n\n  useEffect(() => {\n    if (!ssr || disabled || (isDefinedDelay && isDefinedWidth)) {\n      return;\n    }\n\n    setRandomStyles(\n      randomSkeletonPlaceholder({\n        minDelay,\n        maxDelay,\n        minPercentage,\n        maxPercentage,\n      })\n    );\n  }, [\n    disabled,\n    isDefinedDelay,\n    isDefinedWidth,\n    maxDelay,\n    maxPercentage,\n    minDelay,\n    minPercentage,\n    ssr,\n  ]);\n\n  let width = propWidth;\n  let animationDelay = propDelay;\n  if (!disabled) {\n    if (!isDefinedDelay) {\n      ({ animationDelay } = randomStyles);\n    }\n    if (!isDefinedWidth) {\n      ({ width } = randomStyles);\n    }\n  }\n\n  let style: CSSProperties | undefined = propStyle;\n  if (!!width || !!animationDelay || typeof height !== \"undefined\") {\n    style = {\n      ...style,\n      height: height ?? style?.height,\n      width: width ?? style?.width,\n      // Note: not including MozAnimationDelay and WebkitAnimationDelay since\n      // they weren't applied when they were set. Probably no longer required?\n      animationDelay: animationDelay ?? style?.animationDelay,\n    };\n  }\n\n  return {\n    style,\n    className: cnb(className, !disabled && skeletonPlaceholder()),\n  };\n}\n"],"names":["cnb","useEffect","useState","useSsr","randomSkeletonPlaceholder","skeletonPlaceholder","useSkeletonPlaceholder","options","style","propStyle","className","height","width","propWidth","disabled","delay","propDelay","minDelay","maxDelay","minPercentage","maxPercentage","ssr","isDefinedWidth","isDefinedDelay","randomStyles","setRandomStyles","window","animationDelay"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA6BC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAEEC,yBAAyB,EACzBC,mBAAmB,QACd,gCAAgC;AAqMvC;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASC,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,MAAM,EACNC,OAAOC,SAAS,EAChBC,WAAW,KAAK,EAChBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACd,GAAGb;IACJ,MAAMc,MAAMlB;IAEZ,MAAMmB,iBAAiB,OAAOT,cAAc;IAC5C,MAAMU,iBAAiB,OAAOP,cAAc;IAC5C,MAAM,CAACQ,cAAcC,gBAAgB,GAAGvB,SAAwB;QAC9D,IAAI,OAAOwB,WAAW,eAAeL,OAAOP,UAAU;YACpD,OAAO,CAAC;QACV;QAEA,OAAOV,0BAA0B;YAC/Ba;YACAC;YACAC;YACAC;QACF;IACF;IAEAnB,UAAU;QACR,IAAI,CAACoB,OAAOP,YAAaS,kBAAkBD,gBAAiB;YAC1D;QACF;QAEAG,gBACErB,0BAA0B;YACxBa;YACAC;YACAC;YACAC;QACF;IAEJ,GAAG;QACDN;QACAS;QACAD;QACAJ;QACAE;QACAH;QACAE;QACAE;KACD;IAED,IAAIT,QAAQC;IACZ,IAAIc,iBAAiBX;IACrB,IAAI,CAACF,UAAU;QACb,IAAI,CAACS,gBAAgB;YAClB,CAAA,EAAEI,cAAc,EAAE,GAAGH,YAAW;QACnC;QACA,IAAI,CAACF,gBAAgB;YAClB,CAAA,EAAEV,KAAK,EAAE,GAAGY,YAAW;QAC1B;IACF;IAEA,IAAIhB,QAAmCC;IACvC,IAAI,CAAC,CAACG,SAAS,CAAC,CAACe,kBAAkB,OAAOhB,WAAW,aAAa;QAChEH,QAAQ;YACN,GAAGA,KAAK;YACRG,QAAQA,UAAUH,OAAOG;YACzBC,OAAOA,SAASJ,OAAOI;YACvB,uEAAuE;YACvE,wEAAwE;YACxEe,gBAAgBA,kBAAkBnB,OAAOmB;QAC3C;IACF;IAEA,OAAO;QACLnB;QACAE,WAAWV,IAAIU,WAAW,CAACI,YAAYT;IACzC;AACF"}
+{"version":3,"sources":["../../src/transition/useSkeletonPlaceholder.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type SkeletonPlaceholderRandomOptions,\n  randomSkeletonPlaceholder,\n  skeletonPlaceholder,\n} from \"./skeletonPlaceholderUtils.js\";\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderOptions extends SkeletonPlaceholderRandomOptions {\n  style?: CSSProperties;\n  className?: string;\n\n  /**\n   * Set this to a custom `animation-delay` value (should be in milliseconds).\n   *\n   * @example\n   * ```ts\n   * delay=\"200ms\"\n   * ```\n   */\n  delay?: string;\n\n  /**\n   * Set this value to a number or length unit string to set the height with\n   * inline styles.\n   *\n   * If this is `undefined`, it will use the skeleton placeholder CSS variable\n   * value instead which defaults to `1.125em`\n   *\n   * @defaultValue `undefined`\n   */\n  height?: string | number;\n\n  /**\n   * A custom width to apply to the skeleton placeholder.\n   *\n   * Set this value to an empty string if you want to control the width through\n   * SCSS.\n   *\n   * @example No Inline Width CSS\n   * ```scss\n   * @use \"@react-md/core\";\n   *\n   * .customStyles {\n   *   // You could use these mixins on a parent element instead which would\n   *   // set the height and width to all skeleton placeholders that appear as a\n   *   // child instead\n   *   // @include core.transition-set-var(skeleton-placeholder-height, 1.5rem);\n   *   // @include core.transition-set-var(skeleton-placeholder-width, 40%);\n   *\n   *   height: 1,5rem;\n   *   width: 40%;\n   * }\n   * ```\n   *\n   * @example No Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n   *\n   * import styles from \"./MyComponent.module.scss\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     width: null,\n   *     className: styles.customStyles,\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   *\n   * Set this value to a number or length unit string to set the width with\n   * inline styles.\n   *\n   * @example Custom Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     // any of these are valid\n   *     // width: 40,\n   *     // width: \"1rem\",\n   *     // width: \"1vh\",\n   *     // width: \"40%\",\n   *     width: \"1rem\",\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   * If this value is `undefined`, a random percentage will be generated instead\n   * using the {@link minPercentage} and {@link maxPercentage} options.\n   *\n   * Set this value to `null` if the size should be derived from the provided\n   * `className` instead.\n   *\n   * @defaultValue `randomInt({ min: minPercentage, max: maxPercentage })%`\n   */\n  width?: number | string | null;\n\n  /**\n   * Settings this to `true` will prevent any of the skeleton placeholder styles\n   * to be applied. This is really only useful if you can prerender parts of\n   * your layout while waiting for the data to load.\n   *\n   * @example Pre-rendered Layout\n   * ```tsx\n   * import type { ReactElement } from \"@react\";\n   * import { SkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\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 gridClassName=\"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   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface SkeletonPlaceholderStylingProps {\n  style?: CSSProperties;\n  className: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n * import { type ReactElement } from \"react\";\n *\n * export default function UsingTheHookExample(): ReactElement {\n *   const { style, className } = useSkeletonPlaceholder();\n *   return <div style={style} className={className} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}\n * @see {@link https://react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}\n * @since 6.0.0\n */\nexport function useSkeletonPlaceholder(\n  options: SkeletonPlaceholderOptions = {}\n): SkeletonPlaceholderStylingProps {\n  const {\n    style: propStyle,\n    className,\n    height,\n    width: propWidth,\n    disabled = false,\n    delay: propDelay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  } = options;\n  const ssr = useSsr();\n\n  const isDefinedWidth = propWidth !== undefined;\n  const isDefinedDelay = propDelay !== undefined;\n  const [randomStyles, setRandomStyles] = useState<CSSProperties>(() => {\n    if (globalThis.window === undefined || ssr || disabled) {\n      return {};\n    }\n\n    return randomSkeletonPlaceholder({\n      minDelay,\n      maxDelay,\n      minPercentage,\n      maxPercentage,\n    });\n  });\n\n  useEffect(() => {\n    if (!ssr || disabled || (isDefinedDelay && isDefinedWidth)) {\n      return;\n    }\n\n    setRandomStyles(\n      randomSkeletonPlaceholder({\n        minDelay,\n        maxDelay,\n        minPercentage,\n        maxPercentage,\n      })\n    );\n  }, [\n    disabled,\n    isDefinedDelay,\n    isDefinedWidth,\n    maxDelay,\n    maxPercentage,\n    minDelay,\n    minPercentage,\n    ssr,\n  ]);\n\n  let width = propWidth;\n  let animationDelay = propDelay;\n  if (!disabled) {\n    if (!isDefinedDelay) {\n      ({ animationDelay } = randomStyles);\n    }\n    if (!isDefinedWidth) {\n      ({ width } = randomStyles);\n    }\n  }\n\n  let style: CSSProperties | undefined = propStyle;\n  if (!!width || !!animationDelay || height !== undefined) {\n    style = {\n      ...style,\n      height: height ?? style?.height,\n      width: width ?? style?.width,\n      // Note: not including MozAnimationDelay and WebkitAnimationDelay since\n      // they weren't applied when they were set. Probably no longer required?\n      animationDelay: animationDelay ?? style?.animationDelay,\n    };\n  }\n\n  return {\n    style,\n    className: cnb(className, !disabled && skeletonPlaceholder()),\n  };\n}\n"],"names":["cnb","useEffect","useState","useSsr","randomSkeletonPlaceholder","skeletonPlaceholder","useSkeletonPlaceholder","options","style","propStyle","className","height","width","propWidth","disabled","delay","propDelay","minDelay","maxDelay","minPercentage","maxPercentage","ssr","isDefinedWidth","undefined","isDefinedDelay","randomStyles","setRandomStyles","globalThis","window","animationDelay"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA6BC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAEEC,yBAAyB,EACzBC,mBAAmB,QACd,gCAAgC;AAqMvC;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASC,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,MAAM,EACNC,OAAOC,SAAS,EAChBC,WAAW,KAAK,EAChBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACd,GAAGb;IACJ,MAAMc,MAAMlB;IAEZ,MAAMmB,iBAAiBT,cAAcU;IACrC,MAAMC,iBAAiBR,cAAcO;IACrC,MAAM,CAACE,cAAcC,gBAAgB,GAAGxB,SAAwB;QAC9D,IAAIyB,WAAWC,MAAM,KAAKL,aAAaF,OAAOP,UAAU;YACtD,OAAO,CAAC;QACV;QAEA,OAAOV,0BAA0B;YAC/Ba;YACAC;YACAC;YACAC;QACF;IACF;IAEAnB,UAAU;QACR,IAAI,CAACoB,OAAOP,YAAaU,kBAAkBF,gBAAiB;YAC1D;QACF;QAEAI,gBACEtB,0BAA0B;YACxBa;YACAC;YACAC;YACAC;QACF;IAEJ,GAAG;QACDN;QACAU;QACAF;QACAJ;QACAE;QACAH;QACAE;QACAE;KACD;IAED,IAAIT,QAAQC;IACZ,IAAIgB,iBAAiBb;IACrB,IAAI,CAACF,UAAU;QACb,IAAI,CAACU,gBAAgB;YAClB,CAAA,EAAEK,cAAc,EAAE,GAAGJ,YAAW;QACnC;QACA,IAAI,CAACH,gBAAgB;YAClB,CAAA,EAAEV,KAAK,EAAE,GAAGa,YAAW;QAC1B;IACF;IAEA,IAAIjB,QAAmCC;IACvC,IAAI,CAAC,CAACG,SAAS,CAAC,CAACiB,kBAAkBlB,WAAWY,WAAW;QACvDf,QAAQ;YACN,GAAGA,KAAK;YACRG,QAAQA,UAAUH,OAAOG;YACzBC,OAAOA,SAASJ,OAAOI;YACvB,uEAAuE;YACvE,wEAAwE;YACxEiB,gBAAgBA,kBAAkBrB,OAAOqB;QAC3C;IACF;IAEA,OAAO;QACLrB;QACAE,WAAWV,IAAIU,WAAW,CAACI,YAAYT;IACzC;AACF"}

package/dist/transition/useTransition.js

@@ -218,11 +218,11 @@ const noop = ()=>{
             dispatch(dispatchStage);
             return;
         }
-        const timer = window.setTimeout(()=>{
+        const timer = globalThis.setTimeout(()=>{
             dispatch(dispatchStage);
         }, duration);
         return ()=>{
-            window.clearTimeout(timer);
+            globalThis.clearTimeout(timer);
         };
     }, [
         appearing,

package/dist/transition/useTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { useReducer, useRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { TRANSITION_CONFIG } from \"./config.js\";\nimport type {\n  TransitionHookOptions,\n  TransitionHookReturnValue,\n  TransitionStage,\n  TransitionState,\n} from \"./types.js\";\nimport { getTransitionTimeout } from \"./utils.js\";\n\nconst INITIAL_STATE: TransitionState = {\n  appearing: false,\n  rendered: true,\n  stage: \"exited\",\n};\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * You'll most likely want to use the {@link useCSSTransition} hook instead\n * since this is just a low-level hook that can be used to transition using\n * timeouts.\n *\n * @see {@link https://react-md.dev/hooks/use-transition | useTransition Demos}\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n * @since 6.0.0 Added the `disablePortal` flag to the return value for SSR.\n */\nexport function useTransition<E extends HTMLElement>(\n  options: TransitionHookOptions<E>\n): TransitionHookReturnValue<E> {\n  const {\n    nodeRef,\n    timeout,\n    transitionIn,\n    reflow = false,\n    temporary = false,\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    disablePortal: propDisablePortal,\n  } = options;\n\n  const configurationRef = useRef({\n    timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n    reflow,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    configurationRef.current = {\n      timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n    };\n  }, [\n    appear,\n    enter,\n    exit,\n    onEnter,\n    onEntered,\n    onEntering,\n    onExit,\n    onExited,\n    onExiting,\n    reflow,\n    timeout,\n  ]);\n\n  const ssr = useSsr();\n  const [ref, refCallback] = useEnsuredRef<E>(nodeRef);\n  const [disablePortal, setDisablePortal] = useState(ssr);\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: TransitionState,\n      action: TransitionStage | \"unmount\"\n    ): TransitionState {\n      const { appear, enter, exit } = configurationRef.current.timeout;\n      const { appearing } = state;\n      switch (action) {\n        case \"enter\": {\n          const duration = appearing ? appear : enter;\n          return {\n            stage: duration > 0 ? \"enter\" : \"entered\",\n            rendered: true,\n            appearing,\n          };\n        }\n        case \"entering\":\n        case \"entered\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing,\n          };\n        case \"exit\": {\n          const stage = exit > 0 ? \"exit\" : \"exited\";\n          return {\n            stage,\n            rendered: !temporary || stage !== \"exited\",\n            appearing: false,\n          };\n        }\n        case \"exiting\":\n        case \"exited\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing: false,\n          };\n        case \"unmount\":\n          if (state.stage === \"exited\" && !state.appearing && !state.rendered) {\n            return state;\n          }\n\n          return {\n            stage: \"exited\",\n            rendered: false,\n            appearing: false,\n          };\n      }\n    },\n    INITIAL_STATE,\n    () => {\n      let stage: TransitionStage = \"exited\";\n      if (transitionIn) {\n        stage = appear && !TRANSITION_CONFIG.disabled ? \"enter\" : \"entered\";\n      }\n\n      return {\n        appearing: appear && transitionIn && !TRANSITION_CONFIG.disabled,\n        rendered: !temporary || transitionIn,\n        stage,\n      };\n    }\n  );\n  const { appearing, rendered, stage } = state;\n\n  const isFirstRender = useRef(true);\n  const isRehydrateAppear = useRef(ssr && !transitionIn);\n  const defaultTransitionIn = useRef(transitionIn);\n  useIsomorphicLayoutEffect(() => {\n    const {\n      timeout,\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n    } = configurationRef.current;\n    let { onExited } = configurationRef.current;\n    if (isFirstRender.current) {\n      // The exited hook should **not** fire on first render since the element\n      // was never in the DOM.\n      isFirstRender.current = false;\n      onExited = noop;\n    }\n\n    // if the transitionIn did not change between initial render and rehydration,\n    // allow the enter transition to behave like normal.\n    if (\n      isRehydrateAppear.current &&\n      !ssr &&\n      !transitionIn &&\n      !defaultTransitionIn.current\n    ) {\n      isRehydrateAppear.current = false;\n    }\n\n    // Cancel any exiting/exited transitions and instead immediately start the\n    // enter transition\n    if (transitionIn && stage.startsWith(\"exit\")) {\n      const nextStage = isRehydrateAppear.current ? \"entered\" : \"enter\";\n      dispatch(nextStage);\n      return;\n    }\n\n    // Cancel any entering/entered transitions and instead immediately start the\n    // exit transition\n    if (!transitionIn && stage.startsWith(\"enter\")) {\n      dispatch(\"exit\");\n      return;\n    }\n\n    if (reflow && ref.current && stage !== \"exited\" && stage !== \"entered\") {\n      // force reflow by accessing scrollTop\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      ref.current.scrollTop;\n    }\n\n    let duration = 0;\n    let nextStage: TransitionStage = stage;\n    switch (stage) {\n      case \"enter\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"entered\";\n        } else {\n          onEnter(appearing);\n          nextStage = \"entering\";\n        }\n        break;\n      case \"entering\":\n        onEntering(appearing);\n        duration = timeout.enter;\n        nextStage = \"entered\";\n        break;\n      case \"entered\":\n        onEntered(appearing);\n        break;\n      case \"exit\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"exited\";\n        } else {\n          onExit();\n          nextStage = \"exiting\";\n        }\n        break;\n      case \"exiting\":\n        onExiting();\n        duration = timeout.exit;\n        nextStage = \"exited\";\n        break;\n      case \"exited\":\n        onExited();\n        setDisablePortal(false);\n        break;\n    }\n\n    if (stage === nextStage) {\n      // this is used to help catch changing the temporary prop.\n      // not sure if I should really support that though...\n      if (stage === \"exited\" && temporary) {\n        dispatch(\"unmount\");\n      }\n\n      return;\n    }\n\n    // I used to rely on the `dispatch(\"unmount\")` above, but it seems like\n    // there are some cases where re-rendering takes too long so the temporary\n    // element flashes\n    const dispatchStage =\n      temporary && nextStage === \"exited\" ? \"unmount\" : nextStage;\n    if (duration <= 0) {\n      dispatch(dispatchStage);\n      return;\n    }\n\n    const timer = window.setTimeout(() => {\n      dispatch(dispatchStage);\n    }, duration);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [appearing, ref, ssr, stage, temporary, transitionIn]);\n\n  return {\n    ref: refCallback,\n    stage,\n    rendered,\n    appearing,\n    transitionTo: dispatch,\n    disablePortal: propDisablePortal || disablePortal,\n  };\n}\n"],"names":["useReducer","useRef","useState","useSsr","useEnsuredRef","useIsomorphicLayoutEffect","TRANSITION_CONFIG","getTransitionTimeout","INITIAL_STATE","appearing","rendered","stage","noop","useTransition","options","nodeRef","timeout","transitionIn","reflow","temporary","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","disablePortal","propDisablePortal","configurationRef","current","ssr","ref","refCallback","setDisablePortal","state","dispatch","reducer","action","duration","disabled","isFirstRender","isRehydrateAppear","defaultTransitionIn","startsWith","nextStage","scrollTop","dispatchStage","timer","window","setTimeout","clearTimeout","transitionTo"],"mappings":"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"}
+{"version":3,"sources":["../../src/transition/useTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { useReducer, useRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport { TRANSITION_CONFIG } from \"./config.js\";\nimport type {\n  TransitionHookOptions,\n  TransitionHookReturnValue,\n  TransitionStage,\n  TransitionState,\n} from \"./types.js\";\nimport { getTransitionTimeout } from \"./utils.js\";\n\nconst INITIAL_STATE: TransitionState = {\n  appearing: false,\n  rendered: true,\n  stage: \"exited\",\n};\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * You'll most likely want to use the {@link useCSSTransition} hook instead\n * since this is just a low-level hook that can be used to transition using\n * timeouts.\n *\n * @see {@link https://react-md.dev/hooks/use-transition | useTransition Demos}\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n * @since 6.0.0 Added the `disablePortal` flag to the return value for SSR.\n */\nexport function useTransition<E extends HTMLElement>(\n  options: TransitionHookOptions<E>\n): TransitionHookReturnValue<E> {\n  const {\n    nodeRef,\n    timeout,\n    transitionIn,\n    reflow = false,\n    temporary = false,\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    disablePortal: propDisablePortal,\n  } = options;\n\n  const configurationRef = useRef({\n    timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n    reflow,\n    onEnter,\n    onEntering,\n    onEntered,\n    onExit,\n    onExiting,\n    onExited,\n  } as const);\n  useIsomorphicLayoutEffect(() => {\n    configurationRef.current = {\n      timeout: getTransitionTimeout({ timeout, appear, enter, exit }),\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n      onExited,\n    };\n  }, [\n    appear,\n    enter,\n    exit,\n    onEnter,\n    onEntered,\n    onEntering,\n    onExit,\n    onExited,\n    onExiting,\n    reflow,\n    timeout,\n  ]);\n\n  const ssr = useSsr();\n  const [ref, refCallback] = useEnsuredRef<E>(nodeRef);\n  const [disablePortal, setDisablePortal] = useState(ssr);\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: TransitionState,\n      action: TransitionStage | \"unmount\"\n    ): TransitionState {\n      const { appear, enter, exit } = configurationRef.current.timeout;\n      const { appearing } = state;\n      switch (action) {\n        case \"enter\": {\n          const duration = appearing ? appear : enter;\n          return {\n            stage: duration > 0 ? \"enter\" : \"entered\",\n            rendered: true,\n            appearing,\n          };\n        }\n        case \"entering\":\n        case \"entered\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing,\n          };\n        case \"exit\": {\n          const stage = exit > 0 ? \"exit\" : \"exited\";\n          return {\n            stage,\n            rendered: !temporary || stage !== \"exited\",\n            appearing: false,\n          };\n        }\n        case \"exiting\":\n        case \"exited\":\n          return {\n            stage: action,\n            rendered: true,\n            appearing: false,\n          };\n        case \"unmount\":\n          if (state.stage === \"exited\" && !state.appearing && !state.rendered) {\n            return state;\n          }\n\n          return {\n            stage: \"exited\",\n            rendered: false,\n            appearing: false,\n          };\n      }\n    },\n    INITIAL_STATE,\n    () => {\n      let stage: TransitionStage = \"exited\";\n      if (transitionIn) {\n        stage = appear && !TRANSITION_CONFIG.disabled ? \"enter\" : \"entered\";\n      }\n\n      return {\n        appearing: appear && transitionIn && !TRANSITION_CONFIG.disabled,\n        rendered: !temporary || transitionIn,\n        stage,\n      };\n    }\n  );\n  const { appearing, rendered, stage } = state;\n\n  const isFirstRender = useRef(true);\n  const isRehydrateAppear = useRef(ssr && !transitionIn);\n  const defaultTransitionIn = useRef(transitionIn);\n  useIsomorphicLayoutEffect(() => {\n    const {\n      timeout,\n      reflow,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExiting,\n    } = configurationRef.current;\n    let { onExited } = configurationRef.current;\n    if (isFirstRender.current) {\n      // The exited hook should **not** fire on first render since the element\n      // was never in the DOM.\n      isFirstRender.current = false;\n      onExited = noop;\n    }\n\n    // if the transitionIn did not change between initial render and rehydration,\n    // allow the enter transition to behave like normal.\n    if (\n      isRehydrateAppear.current &&\n      !ssr &&\n      !transitionIn &&\n      !defaultTransitionIn.current\n    ) {\n      isRehydrateAppear.current = false;\n    }\n\n    // Cancel any exiting/exited transitions and instead immediately start the\n    // enter transition\n    if (transitionIn && stage.startsWith(\"exit\")) {\n      const nextStage = isRehydrateAppear.current ? \"entered\" : \"enter\";\n      dispatch(nextStage);\n      return;\n    }\n\n    // Cancel any entering/entered transitions and instead immediately start the\n    // exit transition\n    if (!transitionIn && stage.startsWith(\"enter\")) {\n      dispatch(\"exit\");\n      return;\n    }\n\n    if (reflow && ref.current && stage !== \"exited\" && stage !== \"entered\") {\n      // force reflow by accessing scrollTop\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      ref.current.scrollTop;\n    }\n\n    let duration = 0;\n    let nextStage: TransitionStage = stage;\n    switch (stage) {\n      case \"enter\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"entered\";\n        } else {\n          onEnter(appearing);\n          nextStage = \"entering\";\n        }\n        break;\n      case \"entering\":\n        onEntering(appearing);\n        duration = timeout.enter;\n        nextStage = \"entered\";\n        break;\n      case \"entered\":\n        onEntered(appearing);\n        break;\n      case \"exit\":\n        if (TRANSITION_CONFIG.disabled) {\n          nextStage = \"exited\";\n        } else {\n          onExit();\n          nextStage = \"exiting\";\n        }\n        break;\n      case \"exiting\":\n        onExiting();\n        duration = timeout.exit;\n        nextStage = \"exited\";\n        break;\n      case \"exited\":\n        onExited();\n        setDisablePortal(false);\n        break;\n    }\n\n    if (stage === nextStage) {\n      // this is used to help catch changing the temporary prop.\n      // not sure if I should really support that though...\n      if (stage === \"exited\" && temporary) {\n        dispatch(\"unmount\");\n      }\n\n      return;\n    }\n\n    // I used to rely on the `dispatch(\"unmount\")` above, but it seems like\n    // there are some cases where re-rendering takes too long so the temporary\n    // element flashes\n    const dispatchStage =\n      temporary && nextStage === \"exited\" ? \"unmount\" : nextStage;\n    if (duration <= 0) {\n      dispatch(dispatchStage);\n      return;\n    }\n\n    const timer = globalThis.setTimeout(() => {\n      dispatch(dispatchStage);\n    }, duration);\n\n    return () => {\n      globalThis.clearTimeout(timer);\n    };\n  }, [appearing, ref, ssr, stage, temporary, transitionIn]);\n\n  return {\n    ref: refCallback,\n    stage,\n    rendered,\n    appearing,\n    transitionTo: dispatch,\n    disablePortal: propDisablePortal || disablePortal,\n  };\n}\n"],"names":["useReducer","useRef","useState","useSsr","useEnsuredRef","useIsomorphicLayoutEffect","TRANSITION_CONFIG","getTransitionTimeout","INITIAL_STATE","appearing","rendered","stage","noop","useTransition","options","nodeRef","timeout","transitionIn","reflow","temporary","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","disablePortal","propDisablePortal","configurationRef","current","ssr","ref","refCallback","setDisablePortal","state","dispatch","reducer","action","duration","disabled","isFirstRender","isRehydrateAppear","defaultTransitionIn","startsWith","nextStage","scrollTop","dispatchStage","timer","globalThis","setTimeout","clearTimeout","transitionTo"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAErD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,yBAAyB,QAAQ,kCAAkC;AAC5E,SAASC,iBAAiB,QAAQ,cAAc;AAOhD,SAASC,oBAAoB,QAAQ,aAAa;AAElD,MAAMC,gBAAiC;IACrCC,WAAW;IACXC,UAAU;IACVC,OAAO;AACT;AAEA,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;;;;;;CAUC,GACD,OAAO,SAASC,cACdC,OAAiC;IAEjC,MAAM,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,SAAS,KAAK,EACdC,YAAY,KAAK,EACjBC,SAAS,KAAK,EACdC,QAAQ,IAAI,EACZC,OAAO,IAAI,EACXC,UAAUX,IAAI,EACdY,aAAaZ,IAAI,EACjBa,YAAYb,IAAI,EAChBc,SAASd,IAAI,EACbe,YAAYf,IAAI,EAChBgB,WAAWhB,IAAI,EACfiB,eAAeC,iBAAiB,EACjC,GAAGhB;IAEJ,MAAMiB,mBAAmB9B,OAAO;QAC9Be,SAAST,qBAAqB;YAAES;YAASI;YAAQC;YAAOC;QAAK;QAC7DJ;QACAK;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IACAvB,0BAA0B;QACxB0B,iBAAiBC,OAAO,GAAG;YACzBhB,SAAST,qBAAqB;gBAAES;gBAASI;gBAAQC;gBAAOC;YAAK;YAC7DJ;YACAK;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF,GAAG;QACDR;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;QACAE;QACAD;QACAT;QACAF;KACD;IAED,MAAMiB,MAAM9B;IACZ,MAAM,CAAC+B,KAAKC,YAAY,GAAG/B,cAAiBW;IAC5C,MAAM,CAACc,eAAeO,iBAAiB,GAAGlC,SAAS+B;IACnD,MAAM,CAACI,OAAOC,SAAS,GAAGtC,WACxB,SAASuC,QACPF,KAAsB,EACtBG,MAAmC;QAEnC,MAAM,EAAEpB,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGS,iBAAiBC,OAAO,CAAChB,OAAO;QAChE,MAAM,EAAEP,SAAS,EAAE,GAAG4B;QACtB,OAAQG;YACN,KAAK;gBAAS;oBACZ,MAAMC,WAAWhC,YAAYW,SAASC;oBACtC,OAAO;wBACLV,OAAO8B,WAAW,IAAI,UAAU;wBAChC/B,UAAU;wBACVD;oBACF;gBACF;YACA,KAAK;YACL,KAAK;gBACH,OAAO;oBACLE,OAAO6B;oBACP9B,UAAU;oBACVD;gBACF;YACF,KAAK;gBAAQ;oBACX,MAAME,QAAQW,OAAO,IAAI,SAAS;oBAClC,OAAO;wBACLX;wBACAD,UAAU,CAACS,aAAaR,UAAU;wBAClCF,WAAW;oBACb;gBACF;YACA,KAAK;YACL,KAAK;gBACH,OAAO;oBACLE,OAAO6B;oBACP9B,UAAU;oBACVD,WAAW;gBACb;YACF,KAAK;gBACH,IAAI4B,MAAM1B,KAAK,KAAK,YAAY,CAAC0B,MAAM5B,SAAS,IAAI,CAAC4B,MAAM3B,QAAQ,EAAE;oBACnE,OAAO2B;gBACT;gBAEA,OAAO;oBACL1B,OAAO;oBACPD,UAAU;oBACVD,WAAW;gBACb;QACJ;IACF,GACAD,eACA;QACE,IAAIG,QAAyB;QAC7B,IAAIM,cAAc;YAChBN,QAAQS,UAAU,CAACd,kBAAkBoC,QAAQ,GAAG,UAAU;QAC5D;QAEA,OAAO;YACLjC,WAAWW,UAAUH,gBAAgB,CAACX,kBAAkBoC,QAAQ;YAChEhC,UAAU,CAACS,aAAaF;YACxBN;QACF;IACF;IAEF,MAAM,EAAEF,SAAS,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAG0B;IAEvC,MAAMM,gBAAgB1C,OAAO;IAC7B,MAAM2C,oBAAoB3C,OAAOgC,OAAO,CAAChB;IACzC,MAAM4B,sBAAsB5C,OAAOgB;IACnCZ,0BAA0B;QACxB,MAAM,EACJW,OAAO,EACPE,MAAM,EACNK,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACV,GAAGI,iBAAiBC,OAAO;QAC5B,IAAI,EAAEJ,QAAQ,EAAE,GAAGG,iBAAiBC,OAAO;QAC3C,IAAIW,cAAcX,OAAO,EAAE;YACzB,wEAAwE;YACxE,wBAAwB;YACxBW,cAAcX,OAAO,GAAG;YACxBJ,WAAWhB;QACb;QAEA,6EAA6E;QAC7E,oDAAoD;QACpD,IACEgC,kBAAkBZ,OAAO,IACzB,CAACC,OACD,CAAChB,gBACD,CAAC4B,oBAAoBb,OAAO,EAC5B;YACAY,kBAAkBZ,OAAO,GAAG;QAC9B;QAEA,0EAA0E;QAC1E,mBAAmB;QACnB,IAAIf,gBAAgBN,MAAMmC,UAAU,CAAC,SAAS;YAC5C,MAAMC,YAAYH,kBAAkBZ,OAAO,GAAG,YAAY;YAC1DM,SAASS;YACT;QACF;QAEA,4EAA4E;QAC5E,kBAAkB;QAClB,IAAI,CAAC9B,gBAAgBN,MAAMmC,UAAU,CAAC,UAAU;YAC9CR,SAAS;YACT;QACF;QAEA,IAAIpB,UAAUgB,IAAIF,OAAO,IAAIrB,UAAU,YAAYA,UAAU,WAAW;YACtE,sCAAsC;YACtC,oEAAoE;YACpEuB,IAAIF,OAAO,CAACgB,SAAS;QACvB;QAEA,IAAIP,WAAW;QACf,IAAIM,YAA6BpC;QACjC,OAAQA;YACN,KAAK;gBACH,IAAIL,kBAAkBoC,QAAQ,EAAE;oBAC9BK,YAAY;gBACd,OAAO;oBACLxB,QAAQd;oBACRsC,YAAY;gBACd;gBACA;YACF,KAAK;gBACHvB,WAAWf;gBACXgC,WAAWzB,QAAQK,KAAK;gBACxB0B,YAAY;gBACZ;YACF,KAAK;gBACHtB,UAAUhB;gBACV;YACF,KAAK;gBACH,IAAIH,kBAAkBoC,QAAQ,EAAE;oBAC9BK,YAAY;gBACd,OAAO;oBACLrB;oBACAqB,YAAY;gBACd;gBACA;YACF,KAAK;gBACHpB;gBACAc,WAAWzB,QAAQM,IAAI;gBACvByB,YAAY;gBACZ;YACF,KAAK;gBACHnB;gBACAQ,iBAAiB;gBACjB;QACJ;QAEA,IAAIzB,UAAUoC,WAAW;YACvB,0DAA0D;YAC1D,qDAAqD;YACrD,IAAIpC,UAAU,YAAYQ,WAAW;gBACnCmB,SAAS;YACX;YAEA;QACF;QAEA,uEAAuE;QACvE,0EAA0E;QAC1E,kBAAkB;QAClB,MAAMW,gBACJ9B,aAAa4B,cAAc,WAAW,YAAYA;QACpD,IAAIN,YAAY,GAAG;YACjBH,SAASW;YACT;QACF;QAEA,MAAMC,QAAQC,WAAWC,UAAU,CAAC;YAClCd,SAASW;QACX,GAAGR;QAEH,OAAO;YACLU,WAAWE,YAAY,CAACH;QAC1B;IACF,GAAG;QAACzC;QAAWyB;QAAKD;QAAKtB;QAAOQ;QAAWF;KAAa;IAExD,OAAO;QACLiB,KAAKC;QACLxB;QACAD;QACAD;QACA6C,cAAchB;QACdT,eAAeC,qBAAqBD;IACtC;AACF"}

package/dist/transition/utils.js

@@ -38,23 +38,23 @@
         cloned.style.paddingRight = element.style.paddingRight;
         cloned.style.visibility = "hidden";
         const container = element.parentElement || document.body;
-        container.appendChild(cloned);
+        container.append(cloned);
         maxHeight = cloned.scrollHeight;
-        const style = window.getComputedStyle(cloned);
+        const style = globalThis.getComputedStyle(cloned);
         const isContentBox = style.boxSizing === "content-box";
         if (style.paddingTop) {
-            paddingTop = parseFloat(style.paddingTop);
+            paddingTop = Number.parseFloat(style.paddingTop);
             if (isContentBox) {
                 maxHeight += paddingTop;
             }
         }
         if (style.paddingBottom) {
-            paddingBottom = parseFloat(style.paddingBottom);
+            paddingBottom = Number.parseFloat(style.paddingBottom);
             if (isContentBox) {
                 maxHeight += paddingBottom;
             }
         }
-        container.removeChild(cloned);
+        cloned.remove();
     }
     return {
         maxHeight,

package/dist/transition/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/utils.ts"],"sourcesContent":["import type {\n  CSSTransitionClassNames,\n  CSSTransitionClassNamesObject,\n  TransitionActions,\n  TransitionTimeout,\n  TransitionTimeoutObject,\n} from \"./types.js\";\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport interface TransitionTimeoutOptions extends Required<TransitionActions> {\n  timeout: TransitionTimeout;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport function getTransitionTimeout(\n  options: Readonly<TransitionTimeoutOptions>\n): Readonly<Required<TransitionTimeoutObject>> {\n  const { timeout, appear, enter, exit } = options;\n  if (typeof timeout === \"number\") {\n    return {\n      appear: appear ? timeout : 0,\n      enter: enter ? timeout : 0,\n      exit: exit ? timeout : 0,\n    };\n  }\n\n  return {\n    appear: (appear && (timeout.appear ?? timeout.enter)) || 0,\n    enter: (enter && timeout.enter) || 0,\n    exit: (exit && timeout.exit) || 0,\n  };\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport interface CollapseSizing {\n  maxHeight?: number;\n  paddingTop?: number;\n  paddingBottom?: number;\n}\n\n/**\n * A small util that will find the max-height, padding-top, and padding-bottom\n * for the provided element. This is really used to be able to transition the\n * max-height value since `max-height: auto` does not transition. The only way\n * to get transition is to change max-height values manually.\n *\n * @since 4.0.0\n * @internal\n */\nexport function getElementSizing(element: HTMLElement | null): CollapseSizing {\n  let maxHeight: number | undefined;\n  let paddingTop: number | undefined;\n  let paddingBottom: number | undefined;\n  if (element) {\n    // clone the element so that the total height and padding can be calculated\n    // without being affected by the collapse transition inline styles\n    const cloned = element.cloneNode(true) as HTMLElement;\n    cloned.style.maxHeight = \"\";\n    cloned.style.padding = \"\";\n    cloned.style.paddingLeft = element.style.paddingLeft;\n    cloned.style.paddingRight = element.style.paddingRight;\n    cloned.style.visibility = \"hidden\";\n\n    const container = element.parentElement || document.body;\n    container.appendChild(cloned);\n    maxHeight = cloned.scrollHeight;\n    const style = window.getComputedStyle(cloned);\n    const isContentBox = style.boxSizing === \"content-box\";\n    if (style.paddingTop) {\n      paddingTop = parseFloat(style.paddingTop);\n      if (isContentBox) {\n        maxHeight += paddingTop;\n      }\n    }\n\n    if (style.paddingBottom) {\n      paddingBottom = parseFloat(style.paddingBottom);\n      if (isContentBox) {\n        maxHeight += paddingBottom;\n      }\n    }\n    container.removeChild(cloned);\n  }\n\n  return { maxHeight, paddingTop, paddingBottom };\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport interface TransitionClassNamesOptions extends TransitionTimeoutOptions {\n  classNames: CSSTransitionClassNames;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport function getTransitionClassNames(\n  options: TransitionClassNamesOptions\n): Readonly<Required<CSSTransitionClassNamesObject>> {\n  const { classNames, ...timeoutOptions } = options;\n  const timeout = getTransitionTimeout(timeoutOptions);\n\n  if (typeof classNames === \"string\") {\n    const { appear, enter, exit } = timeout;\n    return {\n      appear: appear ? `${classNames}--appear` : \"\",\n      appearActive: appear ? `${classNames}--appear-active` : \"\",\n      appearDone: \"\",\n      enter: enter ? `${classNames}--enter` : \"\",\n      enterActive: enter ? `${classNames}--enter-active` : \"\",\n      enterDone: \"\",\n      exit: exit ? `${classNames}--exit` : \"\",\n      exitActive: exit ? `${classNames}--exit-active` : \"\",\n      exitDone: \"\",\n    };\n  }\n\n  const {\n    enter = \"\",\n    enterActive = \"\",\n    enterDone = \"\",\n    exit = \"\",\n    exitActive = \"\",\n    exitDone = \"\",\n    appear = (timeout.appear && enter) || \"\",\n    appearActive = (timeout.appear && enterActive) || \"\",\n    appearDone = (timeout.appear && enterDone) || \"\",\n  } = classNames;\n\n  return {\n    appear,\n    appearActive,\n    appearDone,\n    enter,\n    enterActive,\n    enterDone,\n    exit,\n    exitActive,\n    exitDone,\n  };\n}\n"],"names":["getTransitionTimeout","options","timeout","appear","enter","exit","getElementSizing","element","maxHeight","paddingTop","paddingBottom","cloned","cloneNode","style","padding","paddingLeft","paddingRight","visibility","container","parentElement","document","body","appendChild","scrollHeight","window","getComputedStyle","isContentBox","boxSizing","parseFloat","removeChild","getTransitionClassNames","classNames","timeoutOptions","appearActive","appearDone","enterActive","enterDone","exitActive","exitDone"],"mappings":"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"}
+{"version":3,"sources":["../../src/transition/utils.ts"],"sourcesContent":["import type {\n  CSSTransitionClassNames,\n  CSSTransitionClassNamesObject,\n  TransitionActions,\n  TransitionTimeout,\n  TransitionTimeoutObject,\n} from \"./types.js\";\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport interface TransitionTimeoutOptions extends Required<TransitionActions> {\n  timeout: TransitionTimeout;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport function getTransitionTimeout(\n  options: Readonly<TransitionTimeoutOptions>\n): Readonly<Required<TransitionTimeoutObject>> {\n  const { timeout, appear, enter, exit } = options;\n  if (typeof timeout === \"number\") {\n    return {\n      appear: appear ? timeout : 0,\n      enter: enter ? timeout : 0,\n      exit: exit ? timeout : 0,\n    };\n  }\n\n  return {\n    appear: (appear && (timeout.appear ?? timeout.enter)) || 0,\n    enter: (enter && timeout.enter) || 0,\n    exit: (exit && timeout.exit) || 0,\n  };\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport interface CollapseSizing {\n  maxHeight?: number;\n  paddingTop?: number;\n  paddingBottom?: number;\n}\n\n/**\n * A small util that will find the max-height, padding-top, and padding-bottom\n * for the provided element. This is really used to be able to transition the\n * max-height value since `max-height: auto` does not transition. The only way\n * to get transition is to change max-height values manually.\n *\n * @since 4.0.0\n * @internal\n */\nexport function getElementSizing(element: HTMLElement | null): CollapseSizing {\n  let maxHeight: number | undefined;\n  let paddingTop: number | undefined;\n  let paddingBottom: number | undefined;\n  if (element) {\n    // clone the element so that the total height and padding can be calculated\n    // without being affected by the collapse transition inline styles\n    const cloned = element.cloneNode(true) as HTMLElement;\n    cloned.style.maxHeight = \"\";\n    cloned.style.padding = \"\";\n    cloned.style.paddingLeft = element.style.paddingLeft;\n    cloned.style.paddingRight = element.style.paddingRight;\n    cloned.style.visibility = \"hidden\";\n\n    const container = element.parentElement || document.body;\n    container.append(cloned);\n    maxHeight = cloned.scrollHeight;\n    const style = globalThis.getComputedStyle(cloned);\n    const isContentBox = style.boxSizing === \"content-box\";\n    if (style.paddingTop) {\n      paddingTop = Number.parseFloat(style.paddingTop);\n      if (isContentBox) {\n        maxHeight += paddingTop;\n      }\n    }\n\n    if (style.paddingBottom) {\n      paddingBottom = Number.parseFloat(style.paddingBottom);\n      if (isContentBox) {\n        maxHeight += paddingBottom;\n      }\n    }\n    cloned.remove();\n  }\n\n  return { maxHeight, paddingTop, paddingBottom };\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport interface TransitionClassNamesOptions extends TransitionTimeoutOptions {\n  classNames: CSSTransitionClassNames;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport function getTransitionClassNames(\n  options: TransitionClassNamesOptions\n): Readonly<Required<CSSTransitionClassNamesObject>> {\n  const { classNames, ...timeoutOptions } = options;\n  const timeout = getTransitionTimeout(timeoutOptions);\n\n  if (typeof classNames === \"string\") {\n    const { appear, enter, exit } = timeout;\n    return {\n      appear: appear ? `${classNames}--appear` : \"\",\n      appearActive: appear ? `${classNames}--appear-active` : \"\",\n      appearDone: \"\",\n      enter: enter ? `${classNames}--enter` : \"\",\n      enterActive: enter ? `${classNames}--enter-active` : \"\",\n      enterDone: \"\",\n      exit: exit ? `${classNames}--exit` : \"\",\n      exitActive: exit ? `${classNames}--exit-active` : \"\",\n      exitDone: \"\",\n    };\n  }\n\n  const {\n    enter = \"\",\n    enterActive = \"\",\n    enterDone = \"\",\n    exit = \"\",\n    exitActive = \"\",\n    exitDone = \"\",\n    appear = (timeout.appear && enter) || \"\",\n    appearActive = (timeout.appear && enterActive) || \"\",\n    appearDone = (timeout.appear && enterDone) || \"\",\n  } = classNames;\n\n  return {\n    appear,\n    appearActive,\n    appearDone,\n    enter,\n    enterActive,\n    enterDone,\n    exit,\n    exitActive,\n    exitDone,\n  };\n}\n"],"names":["getTransitionTimeout","options","timeout","appear","enter","exit","getElementSizing","element","maxHeight","paddingTop","paddingBottom","cloned","cloneNode","style","padding","paddingLeft","paddingRight","visibility","container","parentElement","document","body","append","scrollHeight","globalThis","getComputedStyle","isContentBox","boxSizing","Number","parseFloat","remove","getTransitionClassNames","classNames","timeoutOptions","appearActive","appearDone","enterActive","enterDone","exitActive","exitDone"],"mappings":"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"}

package/dist/tree/TreeItem.js

@@ -85,7 +85,7 @@ import { treeItem, treeItemContent, treeItemMedia } from "./styles.js";
     // cheating a bit so there are type errors around the event handlers
     const ContentComponent = isLink ? Link : "span";
     const leftAddonType = propLeftAddonType ?? (expanderLeft && leftAddon) ? "media" : undefined;
-    const isMediaLeftAddon = typeof propLeftAddonType === "undefined" && leftAddonType === "media";
+    const isMediaLeftAddon = propLeftAddonType === undefined && leftAddonType === "media";
     const disableLeftAddonCenteredMedia = propDisableLeftAddonCenteredMedia ?? isMediaLeftAddon;
     return /*#__PURE__*/ _jsxs("li", {
         ...liProps,