@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/dist/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type {\n  CSSProperties,\n  FocusEvent,\n  MouseEvent,\n  Ref,\n  TouchEvent,\n} from \"react\";\nimport { useCallback, useEffect, useId, useRef } from \"react\";\nimport { useHoverMode } from \"../hoverMode/useHoverMode.js\";\nimport type { UserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport type { FixedPositioningTransitionCallbacks } from \"../positioning/useFixedPositioning.js\";\nimport { useFixedPositioning } 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 type { TooltipPositionHookOptions } from \"./useTooltipPosition.js\";\nimport { useTooltipPosition } from \"./useTooltipPosition.js\";\nimport { getAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tooltip-background-color\"?: string;\n    \"--rmd-tooltip-color\"?: string;\n    \"--rmd-tooltip-spacing\"?: string | number;\n  }\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @remarks \\@since 2.8.0 */\nexport interface TooltipPositioningOptions {\n  style?: CSSProperties;\n\n  /**\n   * @defaultValue `DEFAULT_TOOLTIP_MARGIN`\n   * @see {@link DEFAULT_TOOLTIP_MARGIN}\n   */\n  vwMargin?: number;\n\n  /**\n   * @defaultValue `DEFAULT_TOOLTIP_MARGIN`\n   * @see {@link DEFAULT_TOOLTIP_MARGIN}\n   */\n  vhMargin?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * @defaultValue `DEFAULT_TOOLTIP_SPACING`\n   * @see {@link DEFAULT_TOOLTIP_SPACING}\n   */\n  spacing?: number | string;\n\n  /**\n   * @defaultValue `DEFAULT_TOOLTIP_DENSE_SPACING`\n   * @see {@link DEFAULT_TOOLTIP_DENSE_SPACING}\n   */\n  denseSpacing?: number | string;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableSwapping?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableAutoSpacing?: boolean;\n}\n\n/**\n * @remarks\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, and infer element typeparam while calling instead of at hook level.\n */\nexport interface TooltippedElementEventHandlers {\n  onBlur?<E extends HTMLElement>(event: FocusEvent<E>): void;\n  onFocus?<E extends HTMLElement>(event: FocusEvent<E>): void;\n  onMouseEnter?<E extends HTMLElement>(event: MouseEvent<E>): void;\n  onMouseLeave?<E extends HTMLElement>(event: MouseEvent<E>): void;\n  onTouchStart?<E extends HTMLElement>(event: TouchEvent<E>): void;\n  onTouchEnd?<E extends HTMLElement>(event: TouchEvent<E>): void;\n  onContextMenu?<E extends HTMLElement>(event: MouseEvent<E>): void;\n}\n\n/** @remarks \\@since 2.8.0 */\nexport interface ProvidedTooltippedElementProps\n  extends Required<TooltippedElementEventHandlers> {\n  \"aria-describedby\": string | undefined;\n  id: string;\n}\n\n/**\n * @remarks\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  extends FixedPositioningTransitionCallbacks,\n    TooltippedElementEventHandlers,\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\n   * Real World Example\n   * ```tsx\n   * import { Button, ButtonProps, Tooltip, useTooltip  } from \"@react-md/core\";\n   * import type { ReactElement, 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   * @remarks \\@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 `DEFAULT_TOOLTIP_DELAY`\n   */\n  hoverTime?: 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  leaveTime?: number;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`\n */\nexport interface ProvidedTooltipProps\n  extends Required<FixedPositioningTransitionCallbacks> {\n  id: string;\n  ref: Ref<HTMLSpanElement>;\n  dense: boolean;\n  style: CSSProperties;\n  visible: boolean;\n  position: SimplePosition;\n}\n\n/**\n * @remarks\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  visible: boolean;\n  setVisible: UseStateSetter<boolean>;\n  animatedOnce: boolean;\n  elementProps: ProvidedTooltippedElementProps;\n  tooltipProps: ProvidedTooltipProps;\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/**\n * @example\n * Simple Usage\n * ```tsx\n * import { Button, useTooltip, Tooltip } from \"@react-md/core\";\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 * ## 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 * @remarks\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  options: TooltipOptions = {}\n): TooltipImplementation {\n  const {\n    id: propId,\n    style: propStyle,\n    disabled = false,\n    describedBy,\n    dense = false,\n    hoverTime,\n    leaveTime,\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  } = 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    hoverTime,\n    hoverTimeoutRef,\n    leaveTime,\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<HTMLSpanElement>(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    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  return {\n    visible,\n    setVisible,\n    hideTooltip,\n    animatedOnce: animatedOnceRef.current,\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 (disabled || mode === \"touch\" || initiatedBy.current !== null) {\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        ) {\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 (disabled || initiatedBy.current !== null) {\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 (disabled || initiatedBy.current !== \"touch\") {\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","hoverTime","leaveTime","vwMargin","vhMargin","spacing","denseSpacing","disableSwapping","disableAutoSpacing","position","determinedPosition","defaultPosition","threshold","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","onEnter","onEntering","onEntered","onExited","fallbackId","tooltipId","animatedOnceRef","hoverTimeoutRef","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","visible","setVisible","startShowFlow","startHideFlow","clearVisibilityTimeout","updatePosition","mode","elementRef","tooltipRef","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","animatedOnce","tooltipProps","elementProps","currentTarget","preventDefault","selection","getSelection","node","anchorNode","parentElement","contains","empty"],"mappings":"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"}
+{"version":3,"sources":["../../src/tooltip/useTooltip.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type {\n  CSSProperties,\n  FocusEvent,\n  MouseEvent,\n  MutableRefObject,\n  Ref,\n  RefObject,\n  TouchEvent,\n} from \"react\";\nimport { useCallback, useEffect, useId, useRef } from \"react\";\nimport {\n  useHoverMode,\n  type ControlledHoverModeImplementation,\n} from \"../hoverMode/useHoverMode.js\";\nimport type { UserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport type { SimplePosition } from \"../positioning/types.js\";\nimport type { FixedPositioningTransitionCallbacks } from \"../positioning/useFixedPositioning.js\";\nimport { useFixedPositioning } 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 type { TooltipPositionHookOptions } from \"./useTooltipPosition.js\";\nimport { useTooltipPosition } from \"./useTooltipPosition.js\";\nimport { getAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tooltip-background-color\"?: string;\n    \"--rmd-tooltip-color\"?: string;\n    \"--rmd-tooltip-spacing\"?: string | number;\n  }\n}\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/** @remarks \\@since 2.8.0 */\nexport interface TooltipPositioningOptions {\n  style?: CSSProperties;\n\n  /**\n   * @defaultValue `DEFAULT_TOOLTIP_MARGIN`\n   * @see {@link DEFAULT_TOOLTIP_MARGIN}\n   */\n  vwMargin?: number;\n\n  /**\n   * @defaultValue `DEFAULT_TOOLTIP_MARGIN`\n   * @see {@link DEFAULT_TOOLTIP_MARGIN}\n   */\n  vhMargin?: number;\n\n  /**\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * @defaultValue `DEFAULT_TOOLTIP_SPACING`\n   * @see {@link DEFAULT_TOOLTIP_SPACING}\n   */\n  spacing?: number | string;\n\n  /**\n   * @defaultValue `DEFAULT_TOOLTIP_DENSE_SPACING`\n   * @see {@link DEFAULT_TOOLTIP_DENSE_SPACING}\n   */\n  denseSpacing?: number | string;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableSwapping?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  disableAutoSpacing?: boolean;\n}\n\n/**\n * @remarks\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/** @remarks \\@since 2.8.0 */\nexport interface ProvidedTooltippedElementProps<E extends HTMLElement>\n  extends Required<TooltippedElementEventHandlers<E>> {\n  \"aria-describedby\": string | undefined;\n  id: string;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 A major API change for the hover mode behavior and no longer\n * requires a `baseId`/`id` for the tooltip. Also renamed from\n * `TooltipHookOptions` to `TooltipOptions` to match other hook naming\n * conventions.\n */\nexport interface TooltipOptions<\n  TooltippedElement extends HTMLElement = HTMLButtonElement,\n> extends FixedPositioningTransitionCallbacks,\n    TooltippedElementEventHandlers<TooltippedElement>,\n    TooltipPositioningOptions,\n    TooltipPositionHookOptions {\n  /**\n   * @defaultValue `\"tooltip-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional override for the `aria-describedby`\n   */\n  describedBy?: string;\n\n  /**\n   * Any styles to be merged with the fixed positioning styles for the tooltip.\n   */\n  style?: CSSProperties;\n\n  /**\n   * Boolean if the event handlers should no longer attempt to show a tooltip. This\n   * should be set to `true` when your component might not have a tooltip associated\n   * with it.\n   *\n   * @example\n   * Real World Example\n   * ```tsx\n   * import { Button, ButtonProps, Tooltip, useTooltip  } from \"@react-md/core\";\n   * import type { ReactElement, 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   * @remarks \\@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 `DEFAULT_TOOLTIP_DELAY`\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   * @remarks \\@since 6.0.0\n   */\n  overflowOnly?: boolean;\n}\n\n/**\n * @remarks\n * \\@since 2.8.0\n * \\@since 6.0.0 This was renamed from `TooltipHookProvidedTooltipProps`\n */\nexport interface ProvidedTooltipProps<E extends HTMLElement = HTMLSpanElement>\n  extends Required<FixedPositioningTransitionCallbacks> {\n  id: string;\n  ref: Ref<E>;\n  dense: boolean;\n  style: CSSProperties;\n  visible: boolean;\n  position: SimplePosition;\n}\n\n/**\n * @remarks\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   * @remarks \\@since 6.0.0\n   */\n  overflowRef: RefObject<HTMLElement>;\n}\n\n/**\n * @example\n * Simple Usage\n * ```tsx\n * import { Button, useTooltip, Tooltip } from \"@react-md/core\";\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\n * Overflow-only Tooltips\n * ```tsx\n * import {\n *   cssUtils,\n *   Link,\n *   Tooltip,\n *   useTooltip,\n *   type LinkProps,\n * } from \"@react-md/core\";\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 * @remarks\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  } = 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    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","fallbackId","tooltipId","animatedOnceRef","hoverTimeoutRef","leaveTimeoutRef","enableHoverMode","disableHoverMode","startDisableTimer","clearDisableTimer","visible","setVisible","startShowFlow","startHideFlow","clearVisibilityTimeout","updatePosition","mode","elementRef","tooltipRef","overflowRef","initiatedBy","ref","callbacks","nodeRef","fixedTo","anchor","getFixedPositionOptions","tooltipSpacing","tooltip","current","window","getComputedStyle","getPropertyValue","currentSpacing","value","horizontal","xMargin","undefined","yMargin","appearing","process","env","NODE_ENV","document","getElementById","hideTooltip","handleKeyDown","event","key","addEventListener","removeEventListener","refocusFrame","pageInactive","onDisabledCleanup","onChange","active","requestAnimationFrame","isNotOverflown","currentTarget","element","offsetWidth","scrollWidth","animatedOnce","tooltipProps","elementProps","preventDefault","selection","getSelection","node","anchorNode","parentElement","contains","empty"],"mappings":"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"}

package/dist/transition/SkeletonPlaceholder.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import { type SkeletonPlaceholderOptions } from "./useSkeletonPlaceholder.js";
 declare module "react" {
     interface CSSProperties {
@@ -122,4 +122,4 @@ export interface SkeletonPlaceholderProps extends HTMLAttributes<HTMLDivElement>
  *
  * @remarks \@since 6.0.0
  */
-export declare function SkeletonPlaceholder(props: SkeletonPlaceholderProps): ReactElement;
+export declare const SkeletonPlaceholder: import("react").ForwardRefExoticComponent<SkeletonPlaceholderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/transition/SkeletonPlaceholder.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { useSkeletonPlaceholder } from "./useSkeletonPlaceholder.js";
 /**
  * **Client Component**
@@ -105,22 +106,26 @@ import { useSkeletonPlaceholder } from "./useSkeletonPlaceholder.js";
  * ```
  *
  * @remarks \@since 6.0.0
- */ export function SkeletonPlaceholder(props) {
-    const { style, className, height, width, children, disabled = !!children, minPercentage, maxPercentage, ...remaining } = props;
+ */ export const SkeletonPlaceholder = /*#__PURE__*/ forwardRef(function SkeletonPlaceholder(props, ref) {
+    const { style, className, height, width, children, disabled = !!children, delay, minDelay, maxDelay, minPercentage, maxPercentage, ...remaining } = props;
     const skeleton = useSkeletonPlaceholder({
         disabled,
         style,
         className,
         height,
         width,
+        delay,
+        minDelay,
+        maxDelay,
         minPercentage,
         maxPercentage
     });
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
+        ref: ref,
         ...skeleton,
         children: children
     });
-}
+});
 
 //# sourceMappingURL=SkeletonPlaceholder.js.map

package/dist/transition/SkeletonPlaceholder.js.map

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

package/dist/transition/_transition.scss

@@ -4,14 +4,14 @@
 @use "../theme/colors";
 @use "../theme/theme";
 
-$disable-everything: false !default;
-$disable-collapse-transition: $disable-everything !default;
-$disable-cross-fade-transition: $disable-everything !default;
-$disable-scale-transition: $disable-everything !default;
+$disable-transitions: false !default;
+$disable-collapse-transition: $disable-transitions !default;
+$disable-cross-fade-transition: $disable-transitions !default;
+$disable-scale-transition: $disable-transitions !default;
 $disable-scale-y-transition: $disable-scale-transition !default;
-$disable-skeleton-placeholder: $disable-everything !default;
-$disable-slide-transition: $disable-everything !default;
-$disable-max-width-transition: $disable-everything !default;
+$disable-skeleton-placeholder: $disable-transitions !default;
+$disable-slide-transition: $disable-transitions !default;
+$disable-max-width-transition: $disable-transitions !default;
 $disable-max-width-transition-gap: $disable-max-width-transition !default;
 
 $linear-duration: 0.15s !default;
@@ -32,6 +32,7 @@ $scale-y-transition-enter-duration: $enter-duration !default;
 $scale-y-transition-leave-duration: $leave-duration !default;
 
 $skeleton-placeholder-height: 1.125em !default;
+$skeleton-placeholder-width: 43% !default;
 $skeleton-placeholder-border-radius: 0.25rem !default;
 $skeleton-placeholder-light-background-color: #000 !default;
 $skeleton-placeholder-dark-background-color: colors.$grey-300 !default;
@@ -64,52 +65,28 @@ $max-width-transition-duration: $linear-duration !default;
 $max-width-transition-timing-function: $linear-timing-function !default;
 $max-width-transition-default: 100% !default;
 
-$transition-var-lookup: (
-  skeleton-placeholder-background-color: (
-    var: --rmd-skeleton-placeholder-background-color,
-    value: $skeleton-placeholder-background-color,
-  ),
-  skeleton-placeholder-height: (
-    var: --rmd-skeleton-placeholder-height,
-    value: $skeleton-placeholder-height,
-  ),
-  skeleton-placeholder-width: (
-    var: --rmd-skeleton-placeholder-width,
-    value: null,
-  ),
-  slide-duration: (
-    var: --rmd-slide-duration,
-    value: $slide-duration,
-  ),
-  max-width: (
-    var: --rmd-max-width,
-    value: $max-width-transition-default,
-  ),
-  max-width-gap: (
-    var: --rmd-max-width-gap,
-    value: 0,
-  ),
+$transition-variables: (
+  skeleton-placeholder-background-color,
+  skeleton-placeholder-height,
+  skeleton-placeholder-width,
+  slide-duration,
+  max-width,
+  max-width-gap
 );
 
 @function transition-get-var($name, $fallback: null) {
-  $found: utils.validate($transition-var-lookup, $name, "transition var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($transition-variables, $name, "transition");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin transition-set-var($name, $value) {
-  $var: map.get(
-    utils.validate($transition-var-lookup, $name, "transition var"),
-    var
-  );
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($transition-variables, $name, "transition")}: #{$value};
+  }
 }
 
 @mixin transition-use-var($property, $name: $property, $fallback: null) {
@@ -241,6 +218,10 @@ $transition-var-lookup: (
       $skeleton-placeholder-animation-timing-function infinite;
     border-radius: $skeleton-placeholder-border-radius;
     color: transparent;
+
+    // this was added so that at least _something_ renders on SSR. It would be
+    // nice to have SSR-safe random numbers for this.
+    width: $skeleton-placeholder-width;
   }
 
   @include keyframes(rmd-skeleton-placeholder) {
@@ -301,53 +282,83 @@ $transition-var-lookup: (
   }
 }
 
-@mixin transition-styles {
-  @if not $disable-collapse-transition {
-    @include collapse-transition;
+@mixin transition-variables {
+  @if not $disable-skeleton-placeholder {
+    @include transition-set-var(
+      skeleton-placeholder-background-color,
+      $skeleton-placeholder-background-color
+    );
+    @include transition-set-var(
+      skeleton-placeholder-height,
+      $skeleton-placeholder-height
+    );
   }
 
-  @if not $disable-cross-fade-transition {
-    @include cross-fade-transition;
+  @if not $disable-slide-transition {
+    @include transition-set-var(slide-duration, $slide-duration);
   }
 
-  @if not $disable-scale-transition or not $disable-scale-y-transition {
-    @include scale-transition;
-  }
+  @if not $disable-max-width-transition {
+    @include transition-set-var(max-width, $max-width-transition-default);
 
-  @if not $disable-scale-y-transition {
-    @include scale-y-transition;
+    @if not $disable-max-width-transition-gap {
+      @include transition-set-var(max-width-gap, 0);
+    }
   }
+}
 
-  @if not $disable-skeleton-placeholder {
-    @include skeleton-placeholder-animation;
-  }
+@mixin transition-styles($disable-layer: false) {
+  @include utils.optional-layer(
+    transition,
+    $disable-layer or $disable-transitions
+  ) {
+    @if not $disable-collapse-transition {
+      @include collapse-transition;
+    }
 
-  @if not $disable-slide-transition {
-    @include slide-transition;
-  }
+    @if not $disable-cross-fade-transition {
+      @include cross-fade-transition;
+    }
 
-  @if not $disable-max-width-transition {
-    .rmd-max-width-transition {
-      @if not $disable-max-width-transition-gap {
-        @include utils.auto-rtl(
-          margin-right,
-          utils.negate-var(transition-get-var(max-width-gap)),
-          0
-        );
-      }
+    @if not $disable-scale-transition or not $disable-scale-y-transition {
+      @include scale-transition;
+    }
 
-      max-width: 0;
-      overflow: hidden;
-      transition: max-width
-        $max-width-transition-duration
-        $max-width-transition-timing-function;
-      will-change: max-width;
+    @if not $disable-scale-y-transition {
+      @include scale-y-transition;
+    }
+
+    @if not $disable-skeleton-placeholder {
+      @include skeleton-placeholder-animation;
+    }
+
+    @if not $disable-slide-transition {
+      @include slide-transition;
+    }
 
-      &--visible {
+    @if not $disable-max-width-transition {
+      .rmd-max-width-transition {
         @if not $disable-max-width-transition-gap {
-          @include utils.auto-rtl(margin-right, 0);
+          @include utils.auto-rtl(
+            margin-right,
+            utils.negate-var(transition-get-var(max-width-gap)),
+            0
+          );
+        }
+
+        max-width: 0;
+        overflow: hidden;
+        transition: max-width
+          $max-width-transition-duration
+          $max-width-transition-timing-function;
+        will-change: max-width;
+
+        &--visible {
+          @if not $disable-max-width-transition-gap {
+            @include utils.auto-rtl(margin-right, 0);
+          }
+          @include transition-use-var(max-width);
         }
-        @include transition-use-var(max-width);
       }
     }
   }

package/dist/transition/config.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TransitionConfig {
+    /**
+     * Set this to `true` to disable all transitions from `react-md`.
+     *
+     * Note: It is recommended to set this to `true` in testing to keep things
+     * simple and will automatically be set when using:
+     *
+     * ```ts
+     * import "@react-md/core/test-utils/jest-setup.js";
+     * ```
+     *
+     * @defaultValue `false`
+     */
+    disabled: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare const TRANSITION_CONFIG: TransitionConfig;

package/dist/transition/config.js

@@ -0,0 +1,16 @@
+/**
+ * @remarks \@since 6.0.0
+ */ // NOTE: Uses get/set for test mocking
+let disabled = false;
+/**
+ * @remarks \@since 6.0.0
+ */ export const TRANSITION_CONFIG = {
+    get disabled () {
+        return disabled;
+    },
+    set disabled (nextDisabled){
+        disabled = nextDisabled;
+    }
+};
+
+//# sourceMappingURL=config.js.map

package/dist/transition/config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/transition/config.ts"],"sourcesContent":["/**\n * @remarks \\@since 6.0.0\n */\nexport interface TransitionConfig {\n  /**\n   * Set this to `true` to disable all transitions from `react-md`.\n   *\n   * Note: It is recommended to set this to `true` in testing to keep things\n   * simple and will automatically be set when using:\n   *\n   * ```ts\n   * import \"@react-md/core/test-utils/jest-setup.js\";\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disabled: boolean;\n}\n\n// NOTE: Uses get/set for test mocking\n\nlet disabled = false;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const TRANSITION_CONFIG: TransitionConfig = {\n  get disabled() {\n    return disabled;\n  },\n  set disabled(nextDisabled: boolean) {\n    disabled = nextDisabled;\n  },\n};\n"],"names":["disabled","TRANSITION_CONFIG","nextDisabled"],"mappings":"AAAA;;CAEC,GAiBD,sCAAsC;AAEtC,IAAIA,WAAW;AAEf;;CAEC,GACD,OAAO,MAAMC,oBAAsC;IACjD,IAAID,YAAW;QACb,OAAOA;IACT;IACA,IAAIA,UAASE,aAAuB;QAClCF,WAAWE;IACb;AACF,EAAE"}

package/dist/transition/skeletonPlaceholderUtils.d.ts

@@ -0,0 +1,77 @@
+import { type CSSProperties } from "react";
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare const skeletonPlaceholder: import("../utils/bem.js").BEMResult;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SkeletonPlaceholderRandomOptions {
+    /**
+     * The minimum `animation-delay` milliseconds allowed in the random generator.
+     * This value should be: `0 <= minDelay < maxDelay`.
+     *
+     * The `animation-delay` will be generated by:
+     * ```ts
+     * const delay = randomInt({
+     *   min: minDelay,
+     *   max: maxDelay,
+     * });
+     *
+     * return {
+     *   animationDelay: `-${delay}ms`,
+     * };
+     * ```
+     *
+     * @defaultValue `0`
+     */
+    minDelay?: number;
+    /**
+     * @see {@link minDelay}
+     * @defaultValue `400`
+     */
+    maxDelay?: number;
+    /**
+     * The minimum width percentage allowed in the random generator. This value
+     * should be: `0 >= minPercentage < maxPercentage`.
+     *
+     * The `width` will be generated by:
+     * ```ts
+     * const width = randomInt({
+     *   min: minPercentage,
+     *   max: maxPercentage,
+     * });
+     *
+     * return {
+     *   width: `${width}%`,
+     * };
+     * ```
+     * @defaultValue `40`
+     */
+    minPercentage?: number;
+    /**
+     * @see {@link minPercentage}
+     * @defaultValue `85`
+     */
+    maxPercentage?: number;
+}
+/**
+ * A server-only safe util to generate a random skeleton placeholder.
+ *
+ * @example
+ * ```tsx
+ * import { skeletonPlaceholder, randomSkeletonPlaceholder } from "@react-md/core";
+ * import "server-only";
+ *
+ * export function RandomSkeletonPlaceholder(): ReactElement {
+ *   return
+ *     <div
+ *       style={randomSkeletonPlaceholder()}
+ *       className={skeletonPlaceholder()}
+ *     />
+ *   );
+ * }
+ * ```
+ * @remarks \@since 6.0.0
+ */
+export declare function randomSkeletonPlaceholder(options?: SkeletonPlaceholderRandomOptions): CSSProperties;

package/dist/transition/skeletonPlaceholderUtils.js

@@ -0,0 +1,38 @@
+import { bem } from "../utils/bem.js";
+import { randomInt } from "../utils/randomInt.js";
+/**
+ * @remarks \@since 6.0.0
+ */ export const skeletonPlaceholder = bem("rmd-skeleton-placeholder");
+/**
+ * A server-only safe util to generate a random skeleton placeholder.
+ *
+ * @example
+ * ```tsx
+ * import { skeletonPlaceholder, randomSkeletonPlaceholder } from "@react-md/core";
+ * import "server-only";
+ *
+ * export function RandomSkeletonPlaceholder(): ReactElement {
+ *   return
+ *     <div
+ *       style={randomSkeletonPlaceholder()}
+ *       className={skeletonPlaceholder()}
+ *     />
+ *   );
+ * }
+ * ```
+ * @remarks \@since 6.0.0
+ */ export function randomSkeletonPlaceholder(options = {}) {
+    const { minDelay = 0, maxDelay = 400, minPercentage = 40, maxPercentage = 85 } = options;
+    return {
+        animationDelay: `-${randomInt({
+            min: minDelay,
+            max: maxDelay
+        })}ms`,
+        width: `${randomInt({
+            min: minPercentage,
+            max: maxPercentage
+        })}%`
+    };
+}
+
+//# sourceMappingURL=skeletonPlaceholderUtils.js.map

package/dist/transition/skeletonPlaceholderUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/transition/skeletonPlaceholderUtils.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport { bem } from \"../utils/bem.js\";\nimport { randomInt } from \"../utils/randomInt.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const skeletonPlaceholder = bem(\"rmd-skeleton-placeholder\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SkeletonPlaceholderRandomOptions {\n  /**\n   * The minimum `animation-delay` milliseconds allowed in the random generator.\n   * This value should be: `0 <= minDelay < maxDelay`.\n   *\n   * The `animation-delay` will be generated by:\n   * ```ts\n   * const delay = randomInt({\n   *   min: minDelay,\n   *   max: maxDelay,\n   * });\n   *\n   * return {\n   *   animationDelay: `-${delay}ms`,\n   * };\n   * ```\n   *\n   * @defaultValue `0`\n   */\n  minDelay?: number;\n\n  /**\n   * @see {@link minDelay}\n   * @defaultValue `400`\n   */\n  maxDelay?: number;\n\n  /**\n   * The minimum width percentage allowed in the random generator. This value\n   * should be: `0 >= minPercentage < maxPercentage`.\n   *\n   * The `width` will be generated by:\n   * ```ts\n   * const width = randomInt({\n   *   min: minPercentage,\n   *   max: maxPercentage,\n   * });\n   *\n   * return {\n   *   width: `${width}%`,\n   * };\n   * ```\n   * @defaultValue `40`\n   */\n  minPercentage?: number;\n\n  /**\n   * @see {@link minPercentage}\n   * @defaultValue `85`\n   */\n  maxPercentage?: number;\n}\n\n/**\n * A server-only safe util to generate a random skeleton placeholder.\n *\n * @example\n * ```tsx\n * import { skeletonPlaceholder, randomSkeletonPlaceholder } from \"@react-md/core\";\n * import \"server-only\";\n *\n * export function RandomSkeletonPlaceholder(): ReactElement {\n *   return\n *     <div\n *       style={randomSkeletonPlaceholder()}\n *       className={skeletonPlaceholder()}\n *     />\n *   );\n * }\n * ```\n * @remarks \\@since 6.0.0\n */\nexport function randomSkeletonPlaceholder(\n  options: SkeletonPlaceholderRandomOptions = {}\n): CSSProperties {\n  const {\n    minDelay = 0,\n    maxDelay = 400,\n    minPercentage = 40,\n    maxPercentage = 85,\n  } = options;\n\n  return {\n    animationDelay: `-${randomInt({\n      min: minDelay,\n      max: maxDelay,\n    })}ms`,\n    width: `${randomInt({\n      min: minPercentage,\n      max: maxPercentage,\n    })}%`,\n  };\n}\n"],"names":["bem","randomInt","skeletonPlaceholder","randomSkeletonPlaceholder","options","minDelay","maxDelay","minPercentage","maxPercentage","animationDelay","min","max","width"],"mappings":"AACA,SAASA,GAAG,QAAQ,kBAAkB;AACtC,SAASC,SAAS,QAAQ,wBAAwB;AAElD;;CAEC,GACD,OAAO,MAAMC,sBAAsBF,IAAI,4BAA4B;AA0DnE;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,SAASG,0BACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EACJC,WAAW,CAAC,EACZC,WAAW,GAAG,EACdC,gBAAgB,EAAE,EAClBC,gBAAgB,EAAE,EACnB,GAAGJ;IAEJ,OAAO;QACLK,gBAAgB,CAAC,CAAC,EAAER,UAAU;YAC5BS,KAAKL;YACLM,KAAKL;QACP,GAAG,EAAE,CAAC;QACNM,OAAO,CAAC,EAAEX,UAAU;YAClBS,KAAKH;YACLI,KAAKH;QACP,GAAG,CAAC,CAAC;IACP;AACF"}

package/dist/transition/useCollapseTransition.d.ts

@@ -1,17 +1,5 @@
 import type { CSSProperties } from "react";
 import type { CSSTransitionElementProps, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions, TransitionTimeout, TransitionTimeoutObject } from "./types.js";
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_HEIGHT = 0;
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_PADDING_TOP = 0;
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM = 0;
 /**
  * @remarks \@since 2.0.0
  */
@@ -32,8 +20,7 @@ export interface CollapseConfigurationStyle {
      * are all set to `0` (default), the child will be removed from the DOM while
      * collapsed.
      *
-     * @see {@link DEFAULT_COLLAPSE_MIN_HEIGHT}
-     * @defaultValue `DEFAULT_COLLAPSE_MIN_HEIGHT`
+     * @defaultValue `0`
      */
     minHeight?: number | string;
     /**
@@ -45,8 +32,7 @@ export interface CollapseConfigurationStyle {
      * are all set to `0` (default), the child will be removed from the DOM while
      * collapsed.
      *
-     * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_TOP}
-     * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_TOP`
+     * @defaultValue `0`
      */
     minPaddingTop?: number | string;
     /**
@@ -58,8 +44,7 @@ export interface CollapseConfigurationStyle {
      * are all set to `0` (default), the child will be removed from the DOM while
      * collapsed.
      *
-     * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM}
-     * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM`
+     * @defaultValue `0`
      */
     minPaddingBottom?: number | string;
 }