@react-md/core 6.3.4 → 6.4.0

package/dist/interaction/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/types.ts"],"sourcesContent":["import type {\n  DragEventHandler,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  TouchEventHandler,\n} from \"react\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-interaction-background-color\"?: string;\n    \"--rmd-hover-background-color\"?: string;\n    \"--rmd-focus-background-color\"?: string;\n    \"--rmd-press-background-color\"?: string;\n    \"--rmd-selected-background-color\"?: string;\n    \"--rmd-focus-color\"?: string;\n    \"--rmd-focus-width\"?: string | number;\n    \"--rmd-ripple-inset\"?: string | number;\n    \"--rmd-ripple-border-radius\"?: string | number;\n    \"--rmd-ripple-background-color\"?: string;\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComponentWithRippleProps {\n  /**\n   * Set this to `true` to disable the ripple behavior for this single component\n   * only. If all components should have the ripple disabled:\n   *\n   * ```ts\n   * INTERACTION_CONFIG.mode = \"none\";\n   * // or\n   * INTERACTION_CONFIG.mode = \"press\";\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disableRipple?: boolean;\n}\n\n/**\n * This is used to provide feedback to the user that they are interacting with\n * elements on the page. It is recommended to not set this to `\"none\"` unless\n * you will implement your own version.\n *\n * When this is set to `\"press\"`, the `background-color` for the element will\n * become slightly darker while the user:\n * - is holding the mouse down on the element\n * - holding the enter or space key on the element\n * - holding their finger on the element for touch devices\n *\n * The `background-color` will transition in and out based on the pressed state.\n *\n * When this is set to `\"ripple\"`, a water droplet type of animation will appear\n * from the current coordinates of the mouse or touch event within the element.\n * Keyboard events will just trigger the animation from the center of the\n * element. Once the user stops pressing the element, the animation will start\n * to fade out.\n *\n * Note: this should match the `$interaction-mode` SCSS variable.\n *\n * @defaultValue `\"ripple\"`\n * @since 6.0.0\n */\nexport type ElementInteractionMode = \"ripple\" | \"press\" | \"none\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionHandlers<E extends HTMLElement> {\n  onBlur: FocusEventHandler<E>;\n\n  /**\n   * The click event handler is is only used to display a ripple for\n   * `<button type=\"submit\" />` since pressing enter on form elements should\n   * submit the form. This ripple is really just to help show that the form has\n   * been submitted.\n   */\n  onClick: MouseEventHandler<E>;\n\n  /**\n   * The keydown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation when the `enter` or `space`\n   * keys are pressed. It will also trigger a click event for elements that do\n   * not support this natively (`<button>`, `<a>`).\n   *\n   * When the space key is pressed, `event.preventDefault()` will also be called\n   * to prevent the page from scrolling.\n   */\n  onKeyDown: KeyboardEventHandler<E>;\n\n  /**\n   * The keyup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the keydown event.\n   */\n  onKeyUp: KeyboardEventHandler<E>;\n\n  /**\n   * The mousedown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onMouseDown: MouseEventHandler<E>;\n\n  /**\n   * The mouseup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the mousedown event.\n   */\n  onMouseUp: MouseEventHandler<E>;\n\n  /**\n   * The mouseleave event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"mouse\"`.\n   *\n   * The ripples have to be cancelled since the user might release the mouse\n   * outside of the element which would never trigger the `onMouseUp` flow.\n   */\n  onMouseLeave: MouseEventHandler<E>;\n\n  /**\n   * The dragstart event handler will remove the ripples and prevent any other\n   * interactions.\n   */\n  onDragStart: DragEventHandler<E>;\n\n  /**\n   * The touchstart event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onTouchStart: TouchEventHandler<E>;\n\n  /**\n   * The touchend event handler is used to either deactivate the `pressed`\n   * state for the element or start the exit animation for the ripple if the\n   * ripple was activated by the touchstart event.\n   */\n  onTouchEnd: TouchEventHandler<E>;\n\n  /**\n   * The touchmove event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"touch\"`.\n   */\n  onTouchMove: TouchEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleStyle {\n  readonly left: number;\n  readonly top: number;\n  readonly height: number;\n  readonly width: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleState {\n  readonly style: RippleStyle;\n  readonly exiting: boolean;\n  readonly entered: boolean;\n  readonly startTime: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RippleStateList = readonly RippleState[];\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleTransitionCallbacks {\n  onEntered: (ripple: RippleState) => void;\n  onExited: (ripple: RippleState) => void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ProvidedRippleContainerProps\n  extends RippleTransitionCallbacks {\n  ripples: RippleStateList;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ElementInteractionState {\n  pressed: boolean;\n  ripples: RippleStateList;\n}\n"],"names":[],"mappings":"AAkMA;;;CAGC,GACD,WAGC"}
+{"version":3,"sources":["../../src/interaction/types.ts"],"sourcesContent":["import type {\n  DragEventHandler,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  TouchEventHandler,\n} from \"react\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-interaction-background-color\"?: string;\n    \"--rmd-hover-background-color\"?: string;\n    \"--rmd-focus-background-color\"?: string;\n    \"--rmd-press-background-color\"?: string;\n    \"--rmd-selected-background-color\"?: string;\n    \"--rmd-focus-color\"?: string;\n    \"--rmd-focus-width\"?: string | number;\n    \"--rmd-ripple-inset\"?: string | number;\n    \"--rmd-ripple-border-radius\"?: string | number;\n    \"--rmd-ripple-background-color\"?: string;\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ComponentWithRippleProps {\n  /**\n   * Set this to `true` to disable the ripple behavior for this single component\n   * only. If all components should have the ripple disabled:\n   *\n   * ```ts\n   * INTERACTION_CONFIG.mode = \"none\";\n   * // or\n   * INTERACTION_CONFIG.mode = \"press\";\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disableRipple?: boolean;\n}\n\n/**\n * This is used to provide feedback to the user that they are interacting with\n * elements on the page. It is recommended to not set this to `\"none\"` unless\n * you will implement your own version.\n *\n * When this is set to `\"press\"`, the `background-color` for the element will\n * become slightly darker while the user:\n * - is holding the mouse down on the element\n * - holding the enter or space key on the element\n * - holding their finger on the element for touch devices\n *\n * The `background-color` will transition in and out based on the pressed state.\n *\n * When this is set to `\"ripple\"`, a water droplet type of animation will appear\n * from the current coordinates of the mouse or touch event within the element.\n * Keyboard events will just trigger the animation from the center of the\n * element. Once the user stops pressing the element, the animation will start\n * to fade out.\n *\n * Note: this should match the `$interaction-mode` SCSS variable.\n *\n * @defaultValue `\"ripple\"`\n * @since 6.0.0\n */\nexport type ElementInteractionMode = \"ripple\" | \"press\" | \"none\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionHandlers<E extends HTMLElement> {\n  onBlur: FocusEventHandler<E>;\n\n  /**\n   * The click event handler is is only used to display a ripple for\n   * `<button type=\"submit\" />` since pressing enter on form elements should\n   * submit the form. This ripple is really just to help show that the form has\n   * been submitted.\n   */\n  onClick: MouseEventHandler<E>;\n\n  /**\n   * The keydown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation when the `enter` or `space`\n   * keys are pressed. It will also trigger a click event for elements that do\n   * not support this natively (`<button>`, `<a>`).\n   *\n   * When the space key is pressed, `event.preventDefault()` will also be called\n   * to prevent the page from scrolling.\n   */\n  onKeyDown: KeyboardEventHandler<E>;\n\n  /**\n   * The keyup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the keydown event.\n   */\n  onKeyUp: KeyboardEventHandler<E>;\n\n  /**\n   * The mousedown event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onMouseDown: MouseEventHandler<E>;\n\n  /**\n   * The mouseup event handler is used to either deactivate the `pressed` state\n   * for the element or start the exit animation for the ripple if the ripple\n   * was activated by the mousedown event.\n   */\n  onMouseUp: MouseEventHandler<E>;\n\n  /**\n   * The mouseleave event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"mouse\"`.\n   *\n   * The ripples have to be cancelled since the user might release the mouse\n   * outside of the element which would never trigger the `onMouseUp` flow.\n   */\n  onMouseLeave: MouseEventHandler<E>;\n\n  /**\n   * The dragstart event handler will remove the ripples and prevent any other\n   * interactions.\n   */\n  onDragStart: DragEventHandler<E>;\n\n  /**\n   * The touchstart event handler is used to either activate the `pressed` state\n   * for the element or start the ripple animation.\n   */\n  onTouchStart: TouchEventHandler<E>;\n\n  /**\n   * The touchend event handler is used to either deactivate the `pressed`\n   * state for the element or start the exit animation for the ripple if the\n   * ripple was activated by the touchstart event.\n   */\n  onTouchEnd: TouchEventHandler<E>;\n\n  /**\n   * The touchmove event handler will remove all ripples and prevent any other\n   * interactions if the current {@link UserInteractionMode} is `\"touch\"`.\n   */\n  onTouchMove: TouchEventHandler<E>;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleStyle {\n  readonly left: number;\n  readonly top: number;\n  readonly height: number;\n  readonly width: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleState {\n  readonly style: RippleStyle;\n  readonly exiting: boolean;\n  readonly entered: boolean;\n  readonly startTime: number;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type RippleStateList = readonly RippleState[];\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface RippleTransitionCallbacks {\n  onEntered: (ripple: RippleState) => void;\n  onExited: (ripple: RippleState) => void;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ProvidedRippleContainerProps extends RippleTransitionCallbacks {\n  ripples: RippleStateList;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface ElementInteractionState {\n  pressed: boolean;\n  ripples: RippleStateList;\n}\n"],"names":[],"mappings":"AAiMA;;;CAGC,GACD,WAGC"}

package/dist/interaction/useElementInteraction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/interaction/useElementInteraction.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type TouchEvent,\n  useCallback,\n  useReducer,\n  useRef,\n} from \"react\";\n\nimport { RippleContainer } from \"./RippleContainer.js\";\nimport { useUserInteractionMode } from \"./UserInteractionModeProvider.js\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\nimport {\n  type ElementInteractionHandlers,\n  type ElementInteractionMode,\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\nimport { getRippleStyle, releaseRipple, updateRipplesState } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport const PRESSED_CLASS_NAME = \"rmd-pressed\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionOptions<E extends HTMLElement>\n  extends Partial<ElementInteractionHandlers<E>> {\n  /**\n   * This can be used to override the {@link INTERACTION_CONFIG.mode}\n   *\n   * @defaultValue `INTERACTION_CONFIG.mode`\n   */\n  mode?: ElementInteractionMode;\n\n  /**\n   * Boolean if the element is currently disabled which will prevent any of the\n   * element interaction states from happening.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface ElementInteractionImplementation<E extends HTMLElement> {\n  /**\n   * The event handlers required for element interaction.\n   */\n  handlers: Readonly<ElementInteractionHandlers<E>>;\n\n  /**\n   * Boolean if the element is currently pressed. This will always be `false` if\n   * the {@link ElementInteractionMode} is set to `\"none\"`\n   */\n  pressed: boolean;\n\n  /**\n   * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is\n   * `true` and the {@link ElementInteractionMode} is set to `\"press\"`. It will\n   * be `undefined` otherwise.\n   */\n  pressedClassName: string | undefined;\n\n  /**\n   * The ripple click/touch interaction. This will be `undefined` when the {@link ElementInteractionMode}\n   * is set to `\"none\"` or `\"press\"`.\n   */\n  ripples?: ReactElement;\n}\n\ntype ElementInteractionAction =\n  | { type: \"press\"; style?: RippleStyle; programmatic?: boolean }\n  | { type: \"release\" | \"cancel\" }\n  | { type: \"entered\" | \"exited\"; ripple: RippleState };\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook is used to apply the required element interaction based on the\n * {@link ElementInteractionMode} and should generally be used internally only.\n *\n * @example Providing Element Interaction\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core/interaction/useElementInteraction\";\n * import { cnb } from \"cnbuilder\";\n * import { type ReactElement } from \"react\";\n *\n * import styles from \"./CustomComponent.module.scss\";\n *\n * interface Props extends HTMLAttributes<HTMLDivElement> {\n *   disabled?: boolean;\n * }\n *\n * function CustomComponent(props: Props): ReactElement {\n *   const {\n *     disabled = false,\n *     className,\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *     ...remaining\n *   } = props;\n *\n *   const { handlers, pressed, ripples } = useElementInteraction({\n *     disabled,\n *     // pass remaining props so that if any event handlers were provided to\n *     // the component, they will be merged with the element interaction\n *     // handlers\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *   });\n *\n *   return (\n *     <div\n *       {...remaining}\n *       {...handlers}\n *       aria-disabled={disabled}\n *       role=\"button\"\n *       className={cnb(styles.button, pressed && styles.pressed)}\n *       tabIndex={disabled ? undefined : 0}\n *     >\n *       {children}\n *       {ripples}\n *     </div>\n *   );\n * }\n * ```\n *\n * @param options - An object of {@link ElementInteractionOptions} that is used\n * to merge event handlers or disable the interactions.\n * @returns the {@link ElementInteractionImplementation}\n * @since 6.0.0 Touch interactions were removed since it never looked\n * good if the user touched a clickable element right before scrolling. The\n * ripple effect will only be fired on click now for touch devices.\n */\nexport function useElementInteraction<E extends HTMLElement>(\n  options: ElementInteractionOptions<E> = {}\n): ElementInteractionImplementation<E> {\n  const {\n    onBlur = noop,\n    onClick = noop,\n    onMouseDown = noop,\n    onMouseUp = noop,\n    onMouseLeave = noop,\n    onKeyUp = noop,\n    onKeyDown = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onTouchMove = noop,\n    onDragStart = noop,\n    mode = INTERACTION_CONFIG.mode,\n    disabled = false,\n  } = options;\n\n  const holding = useRef(false);\n  const disableClick = useRef(false);\n  const userMode = useUserInteractionMode();\n  const isInteractionDisabled = disabled || mode === \"none\";\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: ElementInteractionState,\n      action: ElementInteractionAction\n    ): ElementInteractionState {\n      switch (action.type) {\n        case \"press\": {\n          const { style } = action;\n          let { ripples } = state;\n          if (style) {\n            ripples = [\n              ...ripples,\n              {\n                style,\n                entered: false,\n                exiting: false,\n                startTime: Date.now(),\n              },\n            ];\n          }\n\n          return {\n            pressed: true,\n            ripples,\n          };\n        }\n        case \"cancel\":\n          // Note: unlike previous react-md versions, this will immediately\n          // remove ALL ripple effects instead of trying to fade out. this seems\n          // much nicer for touch devices when they are trying to scroll\n          return {\n            pressed: false,\n            ripples: [],\n          };\n        case \"release\": {\n          if (mode === \"press\") {\n            return { ...state, pressed: false };\n          }\n\n          return releaseRipple(state);\n        }\n        case \"entered\":\n          return updateRipplesState({\n            type: \"entered\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n        case \"exited\":\n          return updateRipplesState({\n            type: \"exited\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n\n        default:\n          return state;\n      }\n    },\n    { pressed: false, ripples: [] }\n  );\n  const { pressed } = state;\n\n  let ripples: ReactElement | undefined;\n  if (mode === \"ripple\") {\n    ripples = (\n      <RippleContainer\n        ripples={state.ripples}\n        onEntered={(ripple) => {\n          dispatch({ type: \"entered\", ripple });\n        }}\n        onExited={(ripple) => {\n          dispatch({ type: \"exited\", ripple });\n        }}\n      />\n    );\n  }\n\n  return {\n    pressed,\n    pressedClassName:\n      pressed && mode === \"press\" ? PRESSED_CLASS_NAME : undefined,\n    ripples,\n    handlers: {\n      onBlur: useCallback(\n        (event: FocusEvent<E>) => {\n          onBlur(event);\n          if (holding.current) {\n            holding.current = false;\n            dispatch({ type: \"release\" });\n          }\n        },\n        [onBlur]\n      ),\n      onClick: useCallback(\n        (event: MouseEvent<E>) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n          if (\n            event.isPropagationStopped() ||\n            userMode === \"touch\" ||\n            mode !== \"ripple\" ||\n            disableClick.current ||\n            holding.current ||\n            document.activeElement === event.currentTarget\n          ) {\n            disableClick.current = false;\n            return;\n          }\n\n          dispatch({\n            type: \"press\",\n            style: getRippleStyle(event, true),\n          });\n        },\n        [disabled, mode, onClick, userMode]\n      ),\n      onMouseDown: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseDown(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            event.shiftKey ||\n            event.ctrlKey ||\n            event.metaKey ||\n            event.altKey ||\n            event.button !== 0\n          ) {\n            return;\n          }\n\n          // prevent text selection on double click\n          // https://stackoverflow.com/a/43321596\n          if (event.detail > 1) {\n            event.preventDefault();\n          }\n\n          holding.current = true;\n          disableClick.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [onMouseDown, isInteractionDisabled, userMode, mode]\n      ),\n      onMouseUp: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseUp(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onMouseUp]\n      ),\n      onMouseLeave: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseLeave(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onMouseLeave, userMode]\n      ),\n      onDragStart(event) {\n        onDragStart(event);\n        if (\n          event.isPropagationStopped() ||\n          !holding.current ||\n          userMode !== \"mouse\"\n        ) {\n          return;\n        }\n\n        holding.current = false;\n        dispatch({ type: \"cancel\" });\n      },\n      onKeyDown: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyDown(event);\n          const { key } = event;\n          const { tagName } = event.currentTarget;\n\n          if (\n            event.isPropagationStopped() ||\n            userMode !== \"keyboard\" ||\n            disabled ||\n            (key !== \" \" && key !== \"Enter\") ||\n            // links do not support clicking on space\n            (key === \" \" && tagName === \"A\") ||\n            // inputs submit a form instead of clicking on enter\n            (key === \"Enter\" && tagName === \"INPUT\")\n          ) {\n            return;\n          }\n\n          // stop propagation since we're starting to do custom event behavior\n          // to click the element for everything except elements that the\n          // browser clicks natively\n          event.stopPropagation();\n\n          if (tagName !== \"BUTTON\" && tagName !== \"A\") {\n            if (key === \" \") {\n              // prevent the pager from scrolling\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n\n          if (holding.current || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          dispatch({ type: \"press\", style: getRippleStyle(event, false) });\n        },\n        [disabled, isInteractionDisabled, onKeyDown, userMode]\n      ),\n      onKeyUp: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyUp(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"keyboard\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onKeyUp, userMode]\n      ),\n      onTouchStart: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchStart(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [mode, isInteractionDisabled, onTouchStart]\n      ),\n      onTouchEnd: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchEnd(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onTouchEnd]\n      ),\n      onTouchMove: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchMove(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onTouchMove]\n      ),\n    },\n  };\n}\n"],"names":["useCallback","useReducer","useRef","RippleContainer","useUserInteractionMode","INTERACTION_CONFIG","getRippleStyle","releaseRipple","updateRipplesState","PRESSED_CLASS_NAME","noop","useElementInteraction","options","onBlur","onClick","onMouseDown","onMouseUp","onMouseLeave","onKeyUp","onKeyDown","onTouchStart","onTouchEnd","onTouchMove","onDragStart","mode","disabled","holding","disableClick","userMode","isInteractionDisabled","state","dispatch","reducer","action","type","style","ripples","entered","exiting","startTime","Date","now","pressed","ripple","current","onEntered","onExited","pressedClassName","undefined","handlers","event","isPropagationStopped","document","activeElement","currentTarget","shiftKey","ctrlKey","metaKey","altKey","button","detail","preventDefault","key","tagName","stopPropagation","click"],"mappings":"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"}
+{"version":3,"sources":["../../src/interaction/useElementInteraction.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type TouchEvent,\n  useCallback,\n  useReducer,\n  useRef,\n} from \"react\";\n\nimport { RippleContainer } from \"./RippleContainer.js\";\nimport { useUserInteractionMode } from \"./UserInteractionModeProvider.js\";\nimport { INTERACTION_CONFIG } from \"./config.js\";\nimport {\n  type ElementInteractionHandlers,\n  type ElementInteractionMode,\n  type ElementInteractionState,\n  type RippleState,\n  type RippleStyle,\n} from \"./types.js\";\nimport { getRippleStyle, releaseRipple, updateRipplesState } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-surface-inset\"?: string | number;\n    \"--rmd-surface-border-radius\"?: string | number;\n  }\n}\n\n/** @since 6.0.0 */\nexport const PRESSED_CLASS_NAME = \"rmd-pressed\";\n\n/** @since 6.0.0 */\nexport interface ElementInteractionOptions<\n  E extends HTMLElement,\n> extends Partial<ElementInteractionHandlers<E>> {\n  /**\n   * This can be used to override the {@link INTERACTION_CONFIG.mode}\n   *\n   * @defaultValue `INTERACTION_CONFIG.mode`\n   */\n  mode?: ElementInteractionMode;\n\n  /**\n   * Boolean if the element is currently disabled which will prevent any of the\n   * element interaction states from happening.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface ElementInteractionImplementation<E extends HTMLElement> {\n  /**\n   * The event handlers required for element interaction.\n   */\n  handlers: Readonly<ElementInteractionHandlers<E>>;\n\n  /**\n   * Boolean if the element is currently pressed. This will always be `false` if\n   * the {@link ElementInteractionMode} is set to `\"none\"`\n   */\n  pressed: boolean;\n\n  /**\n   * This will be set to {@link PRESSED_CLASS_NAME} only when {@link pressed} is\n   * `true` and the {@link ElementInteractionMode} is set to `\"press\"`. It will\n   * be `undefined` otherwise.\n   */\n  pressedClassName: string | undefined;\n\n  /**\n   * The ripple click/touch interaction. This will be `undefined` when the {@link ElementInteractionMode}\n   * is set to `\"none\"` or `\"press\"`.\n   */\n  ripples?: ReactElement;\n}\n\ntype ElementInteractionAction =\n  | { type: \"press\"; style?: RippleStyle; programmatic?: boolean }\n  | { type: \"release\" | \"cancel\" }\n  | { type: \"entered\" | \"exited\"; ripple: RippleState };\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This hook is used to apply the required element interaction based on the\n * {@link ElementInteractionMode} and should generally be used internally only.\n *\n * @example Providing Element Interaction\n * ```tsx\n * import { useElementInteraction } from \"@react-md/core/interaction/useElementInteraction\";\n * import { cnb } from \"cnbuilder\";\n * import { type ReactElement } from \"react\";\n *\n * import styles from \"./CustomComponent.module.scss\";\n *\n * interface Props extends HTMLAttributes<HTMLDivElement> {\n *   disabled?: boolean;\n * }\n *\n * function CustomComponent(props: Props): ReactElement {\n *   const {\n *     disabled = false,\n *     className,\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *     ...remaining\n *   } = props;\n *\n *   const { handlers, pressed, ripples } = useElementInteraction({\n *     disabled,\n *     // pass remaining props so that if any event handlers were provided to\n *     // the component, they will be merged with the element interaction\n *     // handlers\n *     onBlur,\n *     onClick,\n *     onKeyDown,\n *     onKeyUp,\n *     onMouseDown,\n *     onMouseUp,\n *     onMouseLeave,\n *     onTouchStart,\n *     onTouchMove,\n *     onTouchEnd,\n *   });\n *\n *   return (\n *     <div\n *       {...remaining}\n *       {...handlers}\n *       aria-disabled={disabled}\n *       role=\"button\"\n *       className={cnb(styles.button, pressed && styles.pressed)}\n *       tabIndex={disabled ? undefined : 0}\n *     >\n *       {children}\n *       {ripples}\n *     </div>\n *   );\n * }\n * ```\n *\n * @param options - An object of {@link ElementInteractionOptions} that is used\n * to merge event handlers or disable the interactions.\n * @returns the {@link ElementInteractionImplementation}\n * @since 6.0.0 Touch interactions were removed since it never looked\n * good if the user touched a clickable element right before scrolling. The\n * ripple effect will only be fired on click now for touch devices.\n */\nexport function useElementInteraction<E extends HTMLElement>(\n  options: ElementInteractionOptions<E> = {}\n): ElementInteractionImplementation<E> {\n  const {\n    onBlur = noop,\n    onClick = noop,\n    onMouseDown = noop,\n    onMouseUp = noop,\n    onMouseLeave = noop,\n    onKeyUp = noop,\n    onKeyDown = noop,\n    onTouchStart = noop,\n    onTouchEnd = noop,\n    onTouchMove = noop,\n    onDragStart = noop,\n    mode = INTERACTION_CONFIG.mode,\n    disabled = false,\n  } = options;\n\n  const holding = useRef(false);\n  const disableClick = useRef(false);\n  const userMode = useUserInteractionMode();\n  const isInteractionDisabled = disabled || mode === \"none\";\n  const [state, dispatch] = useReducer(\n    function reducer(\n      state: ElementInteractionState,\n      action: ElementInteractionAction\n    ): ElementInteractionState {\n      switch (action.type) {\n        case \"press\": {\n          const { style } = action;\n          let { ripples } = state;\n          if (style) {\n            ripples = [\n              ...ripples,\n              {\n                style,\n                entered: false,\n                exiting: false,\n                startTime: Date.now(),\n              },\n            ];\n          }\n\n          return {\n            pressed: true,\n            ripples,\n          };\n        }\n        case \"cancel\":\n          // Note: unlike previous react-md versions, this will immediately\n          // remove ALL ripple effects instead of trying to fade out. this seems\n          // much nicer for touch devices when they are trying to scroll\n          return {\n            pressed: false,\n            ripples: [],\n          };\n        case \"release\": {\n          if (mode === \"press\") {\n            return { ...state, pressed: false };\n          }\n\n          return releaseRipple(state);\n        }\n        case \"entered\":\n          return updateRipplesState({\n            type: \"entered\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n        case \"exited\":\n          return updateRipplesState({\n            type: \"exited\",\n            state,\n            ripple: action.ripple,\n            holding: holding.current,\n          });\n\n        default:\n          return state;\n      }\n    },\n    { pressed: false, ripples: [] }\n  );\n  const { pressed } = state;\n\n  let ripples: ReactElement | undefined;\n  if (mode === \"ripple\") {\n    ripples = (\n      <RippleContainer\n        ripples={state.ripples}\n        onEntered={(ripple) => {\n          dispatch({ type: \"entered\", ripple });\n        }}\n        onExited={(ripple) => {\n          dispatch({ type: \"exited\", ripple });\n        }}\n      />\n    );\n  }\n\n  return {\n    pressed,\n    pressedClassName:\n      pressed && mode === \"press\" ? PRESSED_CLASS_NAME : undefined,\n    ripples,\n    handlers: {\n      onBlur: useCallback(\n        (event: FocusEvent<E>) => {\n          onBlur(event);\n          if (holding.current) {\n            holding.current = false;\n            dispatch({ type: \"release\" });\n          }\n        },\n        [onBlur]\n      ),\n      onClick: useCallback(\n        (event: MouseEvent<E>) => {\n          if (disabled) {\n            return;\n          }\n\n          onClick(event);\n          if (\n            event.isPropagationStopped() ||\n            userMode === \"touch\" ||\n            mode !== \"ripple\" ||\n            disableClick.current ||\n            holding.current ||\n            document.activeElement === event.currentTarget\n          ) {\n            disableClick.current = false;\n            return;\n          }\n\n          dispatch({\n            type: \"press\",\n            style: getRippleStyle(event, true),\n          });\n        },\n        [disabled, mode, onClick, userMode]\n      ),\n      onMouseDown: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseDown(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            event.shiftKey ||\n            event.ctrlKey ||\n            event.metaKey ||\n            event.altKey ||\n            event.button !== 0\n          ) {\n            return;\n          }\n\n          // prevent text selection on double click\n          // https://stackoverflow.com/a/43321596\n          if (event.detail > 1) {\n            event.preventDefault();\n          }\n\n          holding.current = true;\n          disableClick.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [onMouseDown, isInteractionDisabled, userMode, mode]\n      ),\n      onMouseUp: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseUp(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onMouseUp]\n      ),\n      onMouseLeave: useCallback(\n        (event: MouseEvent<E>) => {\n          onMouseLeave(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"mouse\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onMouseLeave, userMode]\n      ),\n      onDragStart(event) {\n        onDragStart(event);\n        if (\n          event.isPropagationStopped() ||\n          !holding.current ||\n          userMode !== \"mouse\"\n        ) {\n          return;\n        }\n\n        holding.current = false;\n        dispatch({ type: \"cancel\" });\n      },\n      onKeyDown: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyDown(event);\n          const { key } = event;\n          const { tagName } = event.currentTarget;\n\n          if (\n            event.isPropagationStopped() ||\n            userMode !== \"keyboard\" ||\n            disabled ||\n            (key !== \" \" && key !== \"Enter\") ||\n            // links do not support clicking on space\n            (key === \" \" && tagName === \"A\") ||\n            // inputs submit a form instead of clicking on enter\n            (key === \"Enter\" && tagName === \"INPUT\")\n          ) {\n            return;\n          }\n\n          // stop propagation since we're starting to do custom event behavior\n          // to click the element for everything except elements that the\n          // browser clicks natively\n          event.stopPropagation();\n\n          if (tagName !== \"BUTTON\" && tagName !== \"A\") {\n            if (key === \" \") {\n              // prevent the pager from scrolling\n              event.preventDefault();\n            }\n\n            event.currentTarget.click();\n          }\n\n          if (holding.current || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          dispatch({ type: \"press\", style: getRippleStyle(event, false) });\n        },\n        [disabled, isInteractionDisabled, onKeyDown, userMode]\n      ),\n      onKeyUp: useCallback(\n        (event: KeyboardEvent<E>) => {\n          onKeyUp(event);\n          if (\n            event.isPropagationStopped() ||\n            isInteractionDisabled ||\n            userMode !== \"keyboard\" ||\n            !holding.current\n          ) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onKeyUp, userMode]\n      ),\n      onTouchStart: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchStart(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = true;\n          let style: RippleStyle | undefined;\n          if (mode === \"ripple\") {\n            style = getRippleStyle(event, false);\n          }\n\n          dispatch({ type: \"press\", style });\n        },\n        [mode, isInteractionDisabled, onTouchStart]\n      ),\n      onTouchEnd: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchEnd(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"release\" });\n        },\n        [isInteractionDisabled, onTouchEnd]\n      ),\n      onTouchMove: useCallback(\n        (event: TouchEvent<E>) => {\n          onTouchMove(event);\n          if (event.isPropagationStopped() || isInteractionDisabled) {\n            return;\n          }\n\n          holding.current = false;\n          dispatch({ type: \"cancel\" });\n        },\n        [isInteractionDisabled, onTouchMove]\n      ),\n    },\n  };\n}\n"],"names":["useCallback","useReducer","useRef","RippleContainer","useUserInteractionMode","INTERACTION_CONFIG","getRippleStyle","releaseRipple","updateRipplesState","PRESSED_CLASS_NAME","noop","useElementInteraction","options","onBlur","onClick","onMouseDown","onMouseUp","onMouseLeave","onKeyUp","onKeyDown","onTouchStart","onTouchEnd","onTouchMove","onDragStart","mode","disabled","holding","disableClick","userMode","isInteractionDisabled","state","dispatch","reducer","action","type","style","ripples","entered","exiting","startTime","Date","now","pressed","ripple","current","onEntered","onExited","pressedClassName","undefined","handlers","event","isPropagationStopped","document","activeElement","currentTarget","shiftKey","ctrlKey","metaKey","altKey","button","detail","preventDefault","key","tagName","stopPropagation","click"],"mappings":"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"}

package/dist/layout/LayoutAppBar.d.ts

@@ -24,21 +24,21 @@ export interface LayoutAppBarProps extends AppBarProps {
  *
  * @example Static Height
  * ```scss
- * @use "everything";
+ * @use "everything" as *;
  *
  * :root {
- *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
+ *   @include layout-set-var(header-height, $app-bar-height);
  * }
  * ```
  *
  * @example Media Query Height Changes
  * ```scss
- * @use "everything";
+ * @use "everything" as *;
  *
  * :root {
- *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
- *   @include everything.tablet-media {
- *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);
+ *   @include layout-set-var(header-height, $app-bar-height);
+ *   @include tablet-media {
+ *     @include layout-set-var(header-height, $app-bar-dense-height);
  *   }
  * }
  * ```

package/dist/layout/LayoutAppBar.js

@@ -16,21 +16,21 @@ import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";
  *
  * @example Static Height
  * ```scss
- * @use "everything";
+ * @use "everything" as *;
  *
  * :root {
- *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
+ *   @include layout-set-var(header-height, $app-bar-height);
  * }
  * ```
  *
  * @example Media Query Height Changes
  * ```scss
- * @use "everything";
+ * @use "everything" as *;
  *
  * :root {
- *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
- *   @include everything.tablet-media {
- *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);
+ *   @include layout-set-var(header-height, $app-bar-height);
+ *   @include tablet-media {
+ *     @include layout-set-var(header-height, $app-bar-dense-height);
  *   }
  * }
  * ```

package/dist/layout/LayoutAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example Static Height\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n * }\n * ```\n *\n * @example Media Query Height Changes\n * ```scss\n * @use \"everything\";\n *\n * :root {\n *   @include everything.layout-set-var(header-height, everything.$app-bar-height);\n *   @include everything.tablet-media {\n *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(\n  function LayoutAppBar(props, ref) {\n    const {\n      as = \"header\",\n      id: propId,\n      position = \"fixed\",\n      skipProps,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"layout-header\");\n    const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n    useCSSVariables(variables);\n\n    return (\n      <AppBar\n        {...remaining}\n        id={id}\n        as={as}\n        ref={appBarRef}\n        position={position}\n      >\n        <SkipToMainContent {...skipProps} />\n        {children}\n      </AppBar>\n    );\n  }\n);\n"],"names":["forwardRef","AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QACE,GAAGc,SAAS;QACbL,IAAIA;QACJD,IAAIA;QACJD,KAAKQ;QACLJ,UAAUA;;0BAEV,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutAppBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\n\nimport {\n  AppBar,\n  type AppBarProps,\n  type CustomAppBarComponent,\n} from \"../app-bar/AppBar.js\";\nimport {\n  SkipToMainContent,\n  type SkipToMainContentProps,\n} from \"../link/SkipToMainContent.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport { type CssPosition, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useLayoutAppBarHeight } from \"./useLayoutAppBarHeight.js\";\n\n/**\n * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props\n */\nexport interface LayoutAppBarProps extends AppBarProps {\n  /** @defaultValue `\"header\"` */\n  as?: CustomAppBarComponent;\n\n  /** @defaultValue `\"fixed\"` */\n  position?: CssPosition;\n\n  /**\n   * Any additional props to pass to the {@link SkipToMainContent} component.\n   */\n  skipProps?: PropsWithRef<SkipToMainContentProps>;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to dynamically update the `--rmd-layout-header-offset`\n * based on the current height of this app bar. If you are concerned about\n * javascript bundle size, it is recommended to configure this variable in SCSS\n * instead.\n *\n * @example Static Height\n * ```scss\n * @use \"everything\" as *;\n *\n * :root {\n *   @include layout-set-var(header-height, $app-bar-height);\n * }\n * ```\n *\n * @example Media Query Height Changes\n * ```scss\n * @use \"everything\" as *;\n *\n * :root {\n *   @include layout-set-var(header-height, $app-bar-height);\n *   @include tablet-media {\n *     @include layout-set-var(header-height, $app-bar-dense-height);\n *   }\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and\n * `LayoutAppBarTitle` since they no longer exist. The only purpose of this\n * component is to dynamically set the `--rmd-layout-header-height` variable.\n */\nexport const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(\n  function LayoutAppBar(props, ref) {\n    const {\n      as = \"header\",\n      id: propId,\n      position = \"fixed\",\n      skipProps,\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"layout-header\");\n    const { appBarRef, variables } = useLayoutAppBarHeight(ref);\n    useCSSVariables(variables);\n\n    return (\n      <AppBar\n        {...remaining}\n        id={id}\n        as={as}\n        ref={appBarRef}\n        position={position}\n      >\n        <SkipToMainContent {...skipProps} />\n        {children}\n      </AppBar>\n    );\n  }\n);\n"],"names":["forwardRef","AppBar","SkipToMainContent","useCSSVariables","useEnsuredId","useLayoutAppBarHeight","LayoutAppBar","props","ref","as","id","propId","position","skipProps","children","remaining","appBarRef","variables"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SACEC,MAAM,QAGD,uBAAuB;AAC9B,SACEC,iBAAiB,QAEZ,+BAA+B;AACtC,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCC,GACD,OAAO,MAAMC,6BAAeN,WAC1B,SAASM,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,KAAK,QAAQ,EACbC,IAAIC,MAAM,EACVC,WAAW,OAAO,EAClBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGR;IACJ,MAAMG,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAE,GAAGZ,sBAAsBG;IACvDL,gBAAgBc;IAEhB,qBACE,MAAChB;QACE,GAAGc,SAAS;QACbL,IAAIA;QACJD,IAAIA;QACJD,KAAKQ;QACLJ,UAAUA;;0BAEV,KAACV;gBAAmB,GAAGW,SAAS;;YAC/BC;;;AAGP,GACA"}

package/dist/layout/LayoutNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type BaseSheetClassNameOptions,\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n} from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavProps\n  extends HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example Full Height Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Toggleable Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(\n  function LayoutNav(props, ref) {\n    const {\n      as: Component = \"nav\",\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = Component === \"nav\" && !ariaLabelledBy\n        ? \"Navigation\"\n        : undefined,\n      expanded,\n      children,\n      className,\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const { elementProps } = useCSSTransition({\n      nodeRef: ref,\n      timeout,\n      className: cnb(\n        layoutNav({ appBarOffset }),\n        sheet({\n          className,\n          raised: false,\n          horizontalSize: \"none\",\n        })\n      ),\n      classNames,\n      enter,\n      exit,\n      appear,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      exitedHidden: true,\n      transitionIn: expanded,\n    });\n\n    return (\n      <Component\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...remaining}\n        {...elementProps}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","raised","horizontalSize","exitedHidden","transitionIn","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,qBAAqB;AAO5B,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAsCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,cAAc,SAAS,CAACC,iBAC9C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWjB,IACTM,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,QAAQ;YACRC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/LayoutNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type BaseSheetClassNameOptions,\n  DEFAULT_SHEET_CLASSNAMES,\n  DEFAULT_SHEET_TIMEOUT,\n  sheet,\n} from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionActions,\n  type TransitionCallbacks,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { layoutNav } from \"./layoutNavStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutNavProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    BaseSheetClassNameOptions,\n    TransitionCallbacks,\n    TransitionActions {\n  children: ReactNode;\n\n  /**\n   * The component to render as.\n   *\n   * @defaultValue `\"nav\"`\n   */\n  as?: \"nav\" | \"div\";\n\n  /**\n   * Set this to `true` to display the navigation.\n   */\n  expanded: boolean;\n\n  /**\n   * Set this to `true` to force the navigation to appear below the fixed app\n   * bar.\n   *\n   * @defaultValue `false`\n   */\n  appBarOffset?: boolean;\n\n  /** @defaultValue {@link DEFAULT_SHEET_TIMEOUT} */\n  timeout?: TransitionTimeout;\n  /** @defaultValue {@link DEFAULT_SHEET_CLASSNAMES} */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a persistent navigation on the left of the\n * page. There is some built-in functionality to support resizing with the\n * `LayoutWindowSplitter` and expandable layouts. Do not use this component for\n * temporary navigation and instead use a `Sheet`.\n *\n * @example Full Height Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: true,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Toggleable Layout\n * ```tsx\n * \"use client\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import { cnb } from \"cnbuilder\";\n * import type { ReactElement, PropsWithChildren } from \"react\";\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   const { toggled: expanded, toggle } = useToggle();\n *   const { elementProps } = useHorizontalLayoutTransition({\n *     transitionIn: expanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...elementProps}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           onClick={toggle}\n *           buttonType=\"icon\"\n *         >\n *           <MenuIcon />\n *         </Button>\n *         <YourAppBarContent />\n *       </LayoutAppBar>\n *       <LayoutNav expanded>\n *         <YourNavigationComponent />\n *       </LayoutNav>\n *       <Main navOffset={expanded} appBarOffset {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(\n  function LayoutNav(props, ref) {\n    const {\n      as: Component = \"nav\",\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = Component === \"nav\" && !ariaLabelledBy\n        ? \"Navigation\"\n        : undefined,\n      expanded,\n      children,\n      className,\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      appear,\n      enter,\n      exit,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const { elementProps } = useCSSTransition({\n      nodeRef: ref,\n      timeout,\n      className: cnb(\n        layoutNav({ appBarOffset }),\n        sheet({\n          className,\n          raised: false,\n          horizontalSize: \"none\",\n        })\n      ),\n      classNames,\n      enter,\n      exit,\n      appear,\n      onEnter,\n      onEntering,\n      onEntered,\n      onExit,\n      onExited,\n      onExiting,\n      exitedHidden: true,\n      transitionIn: expanded,\n    });\n\n    return (\n      <Component\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...remaining}\n        {...elementProps}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DEFAULT_SHEET_CLASSNAMES","DEFAULT_SHEET_TIMEOUT","sheet","useCSSTransition","layoutNav","LayoutNav","props","ref","as","Component","ariaLabelledBy","ariaLabel","undefined","expanded","children","className","timeout","classNames","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExited","onExiting","appBarOffset","remaining","elementProps","nodeRef","raised","horizontalSize","exitedHidden","transitionIn","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAEEC,wBAAwB,EACxBC,qBAAqB,EACrBC,KAAK,QACA,qBAAqB;AAO5B,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAASC,SAAS,QAAQ,uBAAuB;AAuCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFC,GACD,OAAO,MAAMC,0BAAYN,WACvB,SAASM,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,IAAIC,YAAY,KAAK,EACrB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,cAAc,SAAS,CAACC,iBAC9C,eACAE,SAAS,EACbC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,UAAUf,qBAAqB,EAC/BgB,aAAajB,wBAAwB,EACrCkB,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGtB;IACJ,MAAM,EAAEuB,YAAY,EAAE,GAAG1B,iBAAiB;QACxC2B,SAASvB;QACTS;QACAD,WAAWjB,IACTM,UAAU;YAAEuB;QAAa,IACzBzB,MAAM;YACJa;YACAgB,QAAQ;YACRC,gBAAgB;QAClB;QAEFf;QACAE;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;QACAO,cAAc;QACdC,cAAcrB;IAChB;IAEA,qBACE,KAACJ;QACC0B,cAAYxB;QACZyB,mBAAiB1B;QAChB,GAAGkB,SAAS;QACZ,GAAGC,YAAY;kBAEff;;AAGP,GACA"}

package/dist/layout/LayoutWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  type BaseWindowSplitterProps,\n  WindowSplitter,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  type LayoutWindowSplitterClassNameOptions,\n  layoutWindowSplitter,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement>,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example Dynamic Resizing\n * ```tsx\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { LayoutWindowSplitter } from \"@react-md/core/layout/LayoutWindowSplitter\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { NoSsr } from \"@react-md/core/NoSsr\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useWindowSize } from \"@react-md/core/useWindowSize\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutWindowSplitter = forwardRef<\n  HTMLButtonElement,\n  LayoutWindowSplitterProps\n>(function LayoutWindowSplitter(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAG5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAEEC,cAAc,QACT,uCAAuC;AAE9C,SAEEC,oBAAoB,QACf,kCAAkC;AAqBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,GAAGH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/layout/LayoutWindowSplitter.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo } from \"react\";\n\nimport { type DefinedCSSVariableName } from \"../theme/types.js\";\nimport { useCSSVariables } from \"../theme/useCSSVariables.js\";\nimport {\n  type BaseWindowSplitterProps,\n  WindowSplitter,\n} from \"../window-splitter/WindowSplitter.js\";\nimport { type WindowSplitterWidgetProps } from \"../window-splitter/useWindowSplitter.js\";\nimport {\n  type LayoutWindowSplitterClassNameOptions,\n  layoutWindowSplitter,\n} from \"./layoutWindowSplitterStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterProps\n  extends\n    WindowSplitterWidgetProps<HTMLButtonElement>,\n    Omit<\n      BaseWindowSplitterProps,\n      keyof WindowSplitterWidgetProps<HTMLButtonElement>\n    >,\n    LayoutWindowSplitterClassNameOptions {\n  /** @defaultValue `\"Resize Navigation\"` */\n  \"aria-label\"?: string;\n\n  /**\n   * The current navigation width (in px).\n   */\n  navWidth: number;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to resize the `LayoutNav` component.\n *\n * @see {@link useResizableExpandableLayout} for a default implementation for\n * this component.\n *\n * @example Dynamic Resizing\n * ```tsx\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { LayoutWindowSplitter } from \"@react-md/core/layout/LayoutWindowSplitter\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { NoSsr } from \"@react-md/core/NoSsr\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useWindowSize } from \"@react-md/core/useWindowSize\";\n * import type { ReactElement, PropsWithChildren } from \"react\"\n *\n * function MyWindowSplitter(): ReactElement {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const min = 96;\n *   const max = Math.max(600, width * .7);\n *\n *   const { value, splitterProps } = useWindowSplitter({\n *     min,\n *     max,\n *     defaultValue: 256,\n *   });\n *\n *   return (\n *     <LayoutWindowSplitter\n *       aria-controls=\"layout-nav-id\"\n *       {...splitterProps}\n *       value={value}\n *     />\n *   );\n * }\n *\n * function Layout({ children }: PropsWithChildren): ReactElement {\n *   return (\n *     <>\n *       <LayoutNav id=\"layout-nav\" {...otherProps}>\n *         <YourNavigation />\n *       </LayoutNav>\n *       // only required when using SSR\n *       <NoSsr>\n *         <MyWindowSplitter />\n *       </NoSsr>\n *       <Main navOffset>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport const LayoutWindowSplitter = forwardRef<\n  HTMLButtonElement,\n  LayoutWindowSplitterProps\n>(function LayoutWindowSplitter(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = ariaLabelledBy ? undefined : \"Resize Navigation\",\n    appBarOffset,\n    disableResponsive,\n    className,\n    navWidth,\n    ...remaining\n  } = props;\n\n  useCSSVariables<DefinedCSSVariableName>(\n    useMemo(\n      () => [{ name: \"--rmd-layout-size\", value: `${navWidth}px` }],\n      [navWidth]\n    )\n  );\n\n  return (\n    <WindowSplitter\n      {...remaining}\n      ref={ref}\n      aria-label={ariaLabel as string}\n      aria-labelledby={ariaLabelledBy}\n      className={layoutWindowSplitter({\n        appBarOffset,\n        disableResponsive,\n        className,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","useMemo","useCSSVariables","WindowSplitter","layoutWindowSplitter","LayoutWindowSplitter","props","ref","ariaLabelledBy","ariaLabel","undefined","appBarOffset","disableResponsive","className","navWidth","remaining","name","value","aria-label","aria-labelledby"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,OAAO,QAAQ,QAAQ;AAG5C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAEEC,cAAc,QACT,uCAAuC;AAE9C,SAEEC,oBAAoB,QACf,kCAAkC;AAsBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DC,GACD,OAAO,MAAMC,qCAAuBL,WAGlC,SAASK,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAYD,iBAAiBE,YAAY,mBAAmB,EAC1EC,YAAY,EACZC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGT;IAEJJ,gBACED,QACE,IAAM;YAAC;gBAAEe,MAAM;gBAAqBC,OAAO,GAAGH,SAAS,EAAE,CAAC;YAAC;SAAE,EAC7D;QAACA;KAAS;IAId,qBACE,KAACX;QACE,GAAGY,SAAS;QACbR,KAAKA;QACLW,cAAYT;QACZU,mBAAiBX;QACjBK,WAAWT,qBAAqB;YAC9BO;YACAC;YACAC;QACF;;AAGN,GAAG"}

package/dist/layout/Main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n} from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type MainClassNameOptions, main } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>,\n    MainClassNameOptions {\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core/layout/mainStyles\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main(props, ref) {\n    const {\n      as: Component = \"main\",\n      id: propId,\n      className,\n      children,\n      tabIndex: propTabIndex,\n      navOffset,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"main\");\n    const tabIndex = useMainTabIndex(propTabIndex);\n\n    return (\n      <Component\n        {...remaining}\n        id={id}\n        ref={ref}\n        className={main({ navOffset, appBarOffset, className })}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","main","useMainTabIndex","Main","props","ref","as","Component","id","propId","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAAoCC,IAAI,QAAQ,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AA0BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,qBAAOJ,WAClB,SAASI,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMI,KAAKR,aAAaS,QAAQ;IAChC,MAAMG,WAAWV,gBAAgBW;IAEjC,qBACE,KAACN;QACE,GAAGS,SAAS;QACbR,IAAIA;QACJH,KAAKA;QACLK,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP,GACA"}
+{"version":3,"sources":["../../src/layout/Main.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n} from \"react\";\n\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { type MainClassNameOptions, main } from \"./mainStyles.js\";\nimport { useMainTabIndex } from \"./useMainTabIndex.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomMainElement = ElementType<\n  HTMLAttributes<HTMLElement> & {\n    ref: Ref<HTMLElement>;\n    className?: string;\n    tabIndex?: number;\n  }\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MainProps\n  extends HTMLAttributes<HTMLElement>, MainClassNameOptions {\n  /**\n   * @defaultValue `\"main\"`\n   */\n  as?: CustomMainElement;\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This component is really only used to dynamically set the `tabIndex` to `-1`\n * while using a keyboard for the `SkipToMainContent` component's focus behavior\n * to work correctly. If you don't need that functionality, use the {@link main}\n * style utility instead.\n *\n * @example Styles Only\n * ```tsx\n * import { main as mainStyles } from \"@react-md/core/layout/mainStyles\":\n *\n * function MyCustomMainElement({ children }) {\n *   return (\n *     <main\n *       className={mainStyles({\n *         navOffset: true,\n *         appBarOffset: true,\n *       })}\n *     >\n *       {children}\n *     </main>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0 Renamed from `LayoutMain` removed a lot of\n * functionality to keep this component simple.\n */\nexport const Main = forwardRef<HTMLElement, MainProps>(\n  function Main(props, ref) {\n    const {\n      as: Component = \"main\",\n      id: propId,\n      className,\n      children,\n      tabIndex: propTabIndex,\n      navOffset,\n      appBarOffset,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"main\");\n    const tabIndex = useMainTabIndex(propTabIndex);\n\n    return (\n      <Component\n        {...remaining}\n        id={id}\n        ref={ref}\n        className={main({ navOffset, appBarOffset, className })}\n        tabIndex={tabIndex}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","useEnsuredId","main","useMainTabIndex","Main","props","ref","as","Component","id","propId","className","children","tabIndex","propTabIndex","navOffset","appBarOffset","remaining"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,QACL,QAAQ;AAEf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAAoCC,IAAI,QAAQ,kBAAkB;AAClE,SAASC,eAAe,QAAQ,uBAAuB;AAyBvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,MAAMC,qBAAOJ,WAClB,SAASI,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,IAAIC,YAAY,MAAM,EACtBC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAUC,YAAY,EACtBC,SAAS,EACTC,YAAY,EACZ,GAAGC,WACJ,GAAGZ;IACJ,MAAMI,KAAKR,aAAaS,QAAQ;IAChC,MAAMG,WAAWV,gBAAgBW;IAEjC,qBACE,KAACN;QACE,GAAGS,SAAS;QACbR,IAAIA;QACJH,KAAKA;QACLK,WAAWT,KAAK;YAAEa;YAAWC;YAAcL;QAAU;QACrDE,UAAUA;kBAETD;;AAGP,GACA"}

package/dist/layout/useExpandableLayout.js

@@ -2,10 +2,13 @@
 import { cnb } from "cnbuilder";
 import { useSsr } from "../SsrProvider.js";
 import { useAppSize } from "../media-queries/AppSizeProvider.js";
+import { MEDIA_QUERY_CONFIG } from "../media-queries/config.js";
 import { useMediaQuery } from "../media-queries/useMediaQuery.js";
 import { useToggle } from "../useToggle.js";
+import { useDevEffect } from "../utils/useDevEffect.js";
 import { useHorizontalLayoutTransition } from "./useHorizontalLayoutTransition.js";
 import { useTemporaryLayout } from "./useTemporaryLayout.js";
+let loggedOnce = false;
 /**
  * @example Main Usage
  * ```tsx
@@ -122,6 +125,46 @@ import { useTemporaryLayout } from "./useTemporaryLayout.js";
     const isAppSizeMatch = temporaryUntil === "tablet" || temporaryUntil === "desktop";
     const matches = useMediaQuery(temporaryUntil, isAppSizeMatch);
     const temporary = isAppSizeMatch ? isPhone || temporaryUntil === "desktop" && !isDesktop : !matches;
+    useDevEffect(()=>{
+        if (process.env.NODE_ENV === "test") {
+            return;
+        }
+        let query;
+        if (temporaryUntil === "tablet" || temporaryUntil === "desktop") {
+            const minWidth = temporaryUntil === "tablet" ? MEDIA_QUERY_CONFIG.tabletMinWidth : MEDIA_QUERY_CONFIG.desktopMinWidth;
+            query = `screen and (min-width: ${minWidth})`;
+        } else {
+            query = temporaryUntil;
+        }
+        const timeout = window.setTimeout(()=>{
+            let found = false;
+            for(let i = 0; i < document.styleSheets.length; i++){
+                const sheet = document.styleSheets[i];
+                try {
+                    const rules = sheet.cssRules;
+                    for(let j = 0; j < rules.length; j++){
+                        const rule = rules[j];
+                        if (rule.cssText.includes(".rmd-layout") && rule.cssText.includes(`@media ${query}`)) {
+                            found = true;
+                            return;
+                        }
+                    }
+                } catch  {
+                //
+                }
+            }
+            if (!found && !loggedOnce) {
+                loggedOnce = true;
+                // eslint-disable-next-line no-console
+                console.error(`The react-md expandable layout has set \`temporaryUntil: "${temporaryUntil}"\` but the corresponding styles have not been found.` + " This usually  means the `$layout-navigation-breakpoint` or `temporaryUntil` value should be updated match.\n\n" + "See https://react-md.dev/getting-started/layout#updating-the-layout-to-be-temporary-until-a-specific-breakpoint-optional " + "for more information.");
+            }
+        }, 3000);
+        return ()=>{
+            window.clearTimeout(timeout);
+        };
+    }, [
+        temporaryUntil
+    ]);
     return {
         visible,
         temporary,

package/dist/layout/useExpandableLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type AppSize } from \"../media-queries/appSize.js\";\nimport { useMediaQuery } from \"../media-queries/useMediaQuery.js\";\nimport { type CSSTransitionElementProps } from \"../transition/types.js\";\nimport { type CssPosition, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { type LayoutNavProps } from \"./LayoutNav.js\";\nimport {\n  type HorizontalLayoutTransitionOptions,\n  useHorizontalLayoutTransition,\n} from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n  useTemporaryLayout,\n} from \"./useTemporaryLayout.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * Set this to `\"static\"` to make the navigation span the full height of the\n   * screen and hide the button until the screen shrinks to the temporary\n   * layout type.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean | \"static\";\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * The default behavior is to use the temporary layout until the\n   * {@link AppSize.isTablet} is `true`. Set this to `\"desktop\"` to use the\n   * temporary layout until {@link AppSize.isDesktop} is `true`. Otherwise,\n   * provide a media query string to use the temporary layout until the media\n   * query matches\n   *\n   * @example Custom Media Query\n   * ```tsx\n   * useExpandableLayout({\n   *   ...options,\n   *   // display the expandable layout once the min-width is at least 1201px\n   *   temporaryUntil: \"screen and (min-width: 1201px)\",\n   * });\n   * ```\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\" | (string & {});\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedExpandableLayoutNavToggleProps\n  extends ProvidedLayoutNavToggleProps {\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutImplementation\n  extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  persistent: boolean;\n  expanded: boolean;\n  expandNavigation: () => void;\n  collapseNavigation: () => void;\n  toggleNavigation: () => void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  navToggleProps: ProvidedExpandableLayoutNavToggleProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useExpandableLayout } from \"@react-md/core/layout/useExpandableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Safely Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * +     {persistent && (\n * +       <LayoutNav {...expandableNavProps}>\n * +         <CustomNavigation />\n * +       </LayoutNav>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    fullHeightNav = false,\n    temporaryUntil = \"tablet\",\n    transitionProps,\n    defaultExpanded = fullHeightNav === \"static\",\n    ...temporaryOptions\n  } = options;\n\n  const ssr = useSsr();\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const isAppSizeMatch =\n    temporaryUntil === \"tablet\" || temporaryUntil === \"desktop\";\n  const matches = useMediaQuery(temporaryUntil, isAppSizeMatch);\n  const temporary = isAppSizeMatch\n    ? isPhone || (temporaryUntil === \"desktop\" && !isDesktop)\n    : !matches;\n\n  return {\n    visible,\n    temporary,\n    persistent: ssr || !temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n      className: cnb(fullHeightNav === \"static\" && \"rmd-layout-nav-toggle\"),\n    },\n  };\n}\n"],"names":["cnb","useSsr","useAppSize","useMediaQuery","useToggle","useHorizontalLayoutTransition","useTemporaryLayout","useExpandableLayout","options","fullHeightNav","temporaryUntil","transitionProps","defaultExpanded","temporaryOptions","ssr","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","isAppSizeMatch","matches","temporary","persistent","expandableNavProps","appBarOffset","onClick","className"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,UAAU,QAAQ,sCAAsC;AAGjE,SAASC,aAAa,QAAQ,oCAAoC;AAGlE,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAEEC,6BAA6B,QACxB,qCAAqC;AAG5C,SAMEC,kBAAkB,QACb,0BAA0B;AAgGjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuGC,GACD,OAAO,SAASC,oBACdC,OAAgC;IAEhC,MAAM,EACJC,gBAAgB,KAAK,EACrBC,iBAAiB,QAAQ,EACzBC,eAAe,EACfC,kBAAkBH,kBAAkB,QAAQ,EAC5C,GAAGI,kBACJ,GAAGL;IAEJ,MAAMM,MAAMb;IACZ,MAAM,EACJc,WAAW,EACXC,SAAS,EACTC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,gBAAgB,EAChBC,OAAO,EACR,GAAGf,mBAAmBO;IAEvB,MAAM,EACJS,SAASC,QAAQ,EACjBC,QAAQC,gBAAgB,EACxBC,SAASC,kBAAkB,EAC3BC,QAAQC,gBAAgB,EACzB,GAAGzB,UAAUQ;IACd,MAAM,EAAEkB,YAAY,EAAE,GAAGzB,8BAA8B;QACrD,GAAGM,eAAe;QAClBoB,cAAcR;IAChB;IACA,MAAM,EAAES,OAAO,EAAEC,SAAS,EAAE,GAAG/B;IAC/B,MAAMgC,iBACJxB,mBAAmB,YAAYA,mBAAmB;IACpD,MAAMyB,UAAUhC,cAAcO,gBAAgBwB;IAC9C,MAAME,YAAYF,iBACdF,WAAYtB,mBAAmB,aAAa,CAACuB,YAC7C,CAACE;IAEL,OAAO;QACLd;QACAe;QACAC,YAAYvB,OAAO,CAACsB;QACpBjB;QACAC;QACAG;QACAE;QACAE;QACAE;QACAd,aAAa;YACX,GAAGA,WAAW;YACd,GAAIN,gBAAgBqB,eAAe,CAAC,CAAC;QACvC;QACAd,WAAW;YACT,GAAGA,SAAS;YACZ,GAAGc,YAAY;QACjB;QACAZ;QACAoB,oBAAoB;YAClBf;YACAgB,cAAc,CAAC9B;QACjB;QACAQ,gBAAgB;YACd,GAAGA,cAAc;YACjBuB;gBACE,IAAIJ,WAAW;oBACbhB;gBACF,OAAO;oBACLS;gBACF;YACF;YACAY,WAAWzC,IAAIS,kBAAkB,YAAY;QAC/C;IACF;AACF"}
+{"version":3,"sources":["../../src/layout/useExpandableLayout.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type AppSize } from \"../media-queries/appSize.js\";\nimport { MEDIA_QUERY_CONFIG } from \"../media-queries/config.js\";\nimport { useMediaQuery } from \"../media-queries/useMediaQuery.js\";\nimport { type CSSTransitionElementProps } from \"../transition/types.js\";\nimport { type CssPosition, type UseStateInitializer } from \"../types.js\";\nimport { useToggle } from \"../useToggle.js\";\nimport { useDevEffect } from \"../utils/useDevEffect.js\";\nimport { type LayoutNavProps } from \"./LayoutNav.js\";\nimport {\n  type HorizontalLayoutTransitionOptions,\n  useHorizontalLayoutTransition,\n} from \"./useHorizontalLayoutTransition.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useResizableLayout } from \"./useResizableLayout.js\";\nimport {\n  type ProvidedLayoutNavToggleProps,\n  type ProvidedTemporaryLayoutAppBarProps,\n  type ProvidedTemporaryLayoutMainProps,\n  type TemporaryLayoutImplementation,\n  type TemporaryLayoutOptions,\n  useTemporaryLayout,\n} from \"./useTemporaryLayout.js\";\n\nlet loggedOnce = false;\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutOptions extends TemporaryLayoutOptions {\n  /** @defaultValue `\"fixed\"` */\n  appBarPosition?: CssPosition;\n\n  /** @defaultValue `false` */\n  defaultExpanded?: UseStateInitializer<boolean>;\n\n  /**\n   * Set this to `true` if the expandable navigation should be the full height\n   * of the screen. This will also update the app bar so that it is not covered\n   * by the navigation. The default behavior is to place the navigation below\n   * the fixed header.\n   *\n   * Set this to `\"static\"` to make the navigation span the full height of the\n   * screen and hide the button until the screen shrinks to the temporary\n   * layout type.\n   *\n   * @defaultValue `false`\n   */\n  fullHeightNav?: boolean | \"static\";\n\n  /** @see {@link HorizontalLayoutTransitionOptions} */\n  transitionProps?: Omit<HorizontalLayoutTransitionOptions, \"transitionIn\">;\n\n  /**\n   * The default behavior is to use the temporary layout until the\n   * {@link AppSize.isTablet} is `true`. Set this to `\"desktop\"` to use the\n   * temporary layout until {@link AppSize.isDesktop} is `true`. Otherwise,\n   * provide a media query string to use the temporary layout until the media\n   * query matches\n   *\n   * @example Custom Media Query\n   * ```tsx\n   * useExpandableLayout({\n   *   ...options,\n   *   // display the expandable layout once the min-width is at least 1201px\n   *   temporaryUntil: \"screen and (min-width: 1201px)\",\n   * });\n   * ```\n   *\n   * @defaultValue `\"tablet\"`\n   */\n  temporaryUntil?: \"tablet\" | \"desktop\" | (string & {});\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutMainProps\n  extends\n    ProvidedTemporaryLayoutMainProps,\n    CSSTransitionElementProps<HTMLElement> {}\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutNavProps = Pick<\n  LayoutNavProps,\n  \"expanded\" | \"appBarOffset\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ProvidedLayoutAppBarProps = ProvidedTemporaryLayoutAppBarProps &\n  Partial<CSSTransitionElementProps<HTMLElement>>;\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedExpandableLayoutNavToggleProps extends ProvidedLayoutNavToggleProps {\n  className: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ExpandableLayoutImplementation extends TemporaryLayoutImplementation {\n  temporary: boolean;\n  persistent: boolean;\n  expanded: boolean;\n  expandNavigation: () => void;\n  collapseNavigation: () => void;\n  toggleNavigation: () => void;\n  appBarProps: ProvidedLayoutAppBarProps;\n  mainProps: ProvidedLayoutMainProps;\n  navToggleProps: ProvidedExpandableLayoutNavToggleProps;\n  expandableNavProps: ProvidedLayoutNavProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useExpandableLayout } from \"@react-md/core/layout/useExpandableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Safely Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useExpandableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * +     {persistent && (\n * +       <LayoutNav {...expandableNavProps}>\n * +         <CustomNavigation />\n * +       </LayoutNav>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n * @see {@link useResizableLayout}\n */\nexport function useExpandableLayout(\n  options: ExpandableLayoutOptions\n): ExpandableLayoutImplementation {\n  const {\n    fullHeightNav = false,\n    temporaryUntil = \"tablet\",\n    transitionProps,\n    defaultExpanded = fullHeightNav === \"static\",\n    ...temporaryOptions\n  } = options;\n\n  const ssr = useSsr();\n  const {\n    appBarProps,\n    mainProps,\n    navToggleProps,\n    temporaryNavProps,\n    hideTemporaryNav,\n    showTemporaryNav,\n    visible,\n  } = useTemporaryLayout(temporaryOptions);\n\n  const {\n    toggled: expanded,\n    enable: expandNavigation,\n    disable: collapseNavigation,\n    toggle: toggleNavigation,\n  } = useToggle(defaultExpanded);\n  const { elementProps } = useHorizontalLayoutTransition({\n    ...transitionProps,\n    transitionIn: expanded,\n  });\n  const { isPhone, isDesktop } = useAppSize();\n  const isAppSizeMatch =\n    temporaryUntil === \"tablet\" || temporaryUntil === \"desktop\";\n  const matches = useMediaQuery(temporaryUntil, isAppSizeMatch);\n  const temporary = isAppSizeMatch\n    ? isPhone || (temporaryUntil === \"desktop\" && !isDesktop)\n    : !matches;\n\n  useDevEffect(() => {\n    if (process.env.NODE_ENV === \"test\") {\n      return;\n    }\n\n    let query: string;\n    if (temporaryUntil === \"tablet\" || temporaryUntil === \"desktop\") {\n      const minWidth =\n        temporaryUntil === \"tablet\"\n          ? MEDIA_QUERY_CONFIG.tabletMinWidth\n          : MEDIA_QUERY_CONFIG.desktopMinWidth;\n      query = `screen and (min-width: ${minWidth})`;\n    } else {\n      query = temporaryUntil;\n    }\n\n    const timeout = window.setTimeout(() => {\n      let found = false;\n      for (let i = 0; i < document.styleSheets.length; i++) {\n        const sheet = document.styleSheets[i];\n\n        try {\n          const rules = sheet.cssRules;\n          for (let j = 0; j < rules.length; j++) {\n            const rule = rules[j];\n            if (\n              rule.cssText.includes(\".rmd-layout\") &&\n              rule.cssText.includes(`@media ${query}`)\n            ) {\n              found = true;\n              return;\n            }\n          }\n        } catch {\n          //\n        }\n      }\n\n      if (!found && !loggedOnce) {\n        loggedOnce = true;\n        // eslint-disable-next-line no-console\n        console.error(\n          `The react-md expandable layout has set \\`temporaryUntil: \"${temporaryUntil}\"\\` but the corresponding styles have not been found.` +\n            \" This usually  means the `$layout-navigation-breakpoint` or `temporaryUntil` value should be updated match.\\n\\n\" +\n            \"See https://react-md.dev/getting-started/layout#updating-the-layout-to-be-temporary-until-a-specific-breakpoint-optional \" +\n            \"for more information.\"\n        );\n      }\n    }, 3000);\n\n    return () => {\n      window.clearTimeout(timeout);\n    };\n  }, [temporaryUntil]);\n\n  return {\n    visible,\n    temporary,\n    persistent: ssr || !temporary,\n    hideTemporaryNav,\n    showTemporaryNav,\n    expanded,\n    expandNavigation,\n    collapseNavigation,\n    toggleNavigation,\n    appBarProps: {\n      ...appBarProps,\n      ...(fullHeightNav ? elementProps : {}),\n    },\n    mainProps: {\n      ...mainProps,\n      ...elementProps,\n    },\n    temporaryNavProps,\n    expandableNavProps: {\n      expanded,\n      appBarOffset: !fullHeightNav,\n    },\n    navToggleProps: {\n      ...navToggleProps,\n      onClick() {\n        if (temporary) {\n          showTemporaryNav();\n        } else {\n          toggleNavigation();\n        }\n      },\n      className: cnb(fullHeightNav === \"static\" && \"rmd-layout-nav-toggle\"),\n    },\n  };\n}\n"],"names":["cnb","useSsr","useAppSize","MEDIA_QUERY_CONFIG","useMediaQuery","useToggle","useDevEffect","useHorizontalLayoutTransition","useTemporaryLayout","loggedOnce","useExpandableLayout","options","fullHeightNav","temporaryUntil","transitionProps","defaultExpanded","temporaryOptions","ssr","appBarProps","mainProps","navToggleProps","temporaryNavProps","hideTemporaryNav","showTemporaryNav","visible","toggled","expanded","enable","expandNavigation","disable","collapseNavigation","toggle","toggleNavigation","elementProps","transitionIn","isPhone","isDesktop","isAppSizeMatch","matches","temporary","process","env","NODE_ENV","query","minWidth","tabletMinWidth","desktopMinWidth","timeout","window","setTimeout","found","i","document","styleSheets","length","sheet","rules","cssRules","j","rule","cssText","includes","console","error","clearTimeout","persistent","expandableNavProps","appBarOffset","onClick","className"],"mappings":"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"}

package/dist/layout/useHorizontalLayoutTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useHorizontalLayoutTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {\n  appearDone: \"rmd-layout-h--active\",\n  enter: \"rmd-layout-h--enter\",\n  enterActive: \"rmd-layout-h--active\",\n  enterDone: \"rmd-layout-h--active\",\n  exit: \"rmd-layout-h--exit\",\n} as const satisfies CSSTransitionClassNames;\n\n/**\n * @since 6.0.0\n */\nexport interface HorizontalLayoutTransitionOptions\n  extends PreconfiguredCSSTransitionOptions<HTMLElement> {\n  /**\n   * @see {@link DEFAULT_SHEET_TIMEOUT}\n   * @defaultValue `DEFAULT_SHEET_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n  /**\n   * @see {@link DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES}\n   * @defaultValue `DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @example\n * ```tsx\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * interface Props {\n *   title: ReactNode;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ title, children }: Props): ReactElement {\n *   const { toggled: staticNavExpanded, toggle: toggleStaticNav } = useToggle();\n *   const { elementProps, className } = useHorizontalLayoutTransition({\n *     transitionIn: staticNavExpanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar className={className}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           buttonType=\"icon\"\n *           onClick={toggleStaticNav}\n *         >\n *           <MenuOutlinedIcon />\n *         '</Button>\n *         {title}\n *       </LayoutAppBar>\n *       <Main {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport function useHorizontalLayoutTransition<\n  E extends HTMLElement = HTMLElement,\n>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E> {\n  return useCSSTransition({\n    timeout: DEFAULT_SHEET_TIMEOUT,\n    classNames: DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES,\n    ...options,\n    className: cnb(\"rmd-layout-h\", options.className),\n  });\n}\n"],"names":["cnb","DEFAULT_SHEET_TIMEOUT","useCSSTransition","DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES","appearDone","enter","enterActive","enterDone","exit","useHorizontalLayoutTransition","options","timeout","classNames","className"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,qBAAqB,QAAQ,qBAAqB;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA6C;AAmB7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,SAASC,8BAEdC,OAA0C;IAC1C,OAAOR,iBAAiB;QACtBS,SAASV;QACTW,YAAYT;QACZ,GAAGO,OAAO;QACVG,WAAWb,IAAI,gBAAgBU,QAAQG,SAAS;IAClD;AACF"}
+{"version":3,"sources":["../../src/layout/useHorizontalLayoutTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport { DEFAULT_SHEET_TIMEOUT } from \"../sheet/styles.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\n\n/**\n * @since 6.0.0\n */\nexport const DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES = {\n  appearDone: \"rmd-layout-h--active\",\n  enter: \"rmd-layout-h--enter\",\n  enterActive: \"rmd-layout-h--active\",\n  enterDone: \"rmd-layout-h--active\",\n  exit: \"rmd-layout-h--exit\",\n} as const satisfies CSSTransitionClassNames;\n\n/**\n * @since 6.0.0\n */\nexport interface HorizontalLayoutTransitionOptions extends PreconfiguredCSSTransitionOptions<HTMLElement> {\n  /**\n   * @see {@link DEFAULT_SHEET_TIMEOUT}\n   * @defaultValue `DEFAULT_SHEET_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n  /**\n   * @see {@link DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES}\n   * @defaultValue `DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @example\n * ```tsx\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useHorizontalLayoutTransition } from \"@react-md/core/layout/useHorizontalLayoutTransition\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * interface Props {\n *   title: ReactNode;\n *   children: ReactNode;\n * }\n *\n * export default function Example({ title, children }: Props): ReactElement {\n *   const { toggled: staticNavExpanded, toggle: toggleStaticNav } = useToggle();\n *   const { elementProps, className } = useHorizontalLayoutTransition({\n *     transitionIn: staticNavExpanded,\n *   });\n *\n *   return (\n *     <>\n *       <LayoutAppBar className={className}>\n *         <Button\n *           aria-label=\"Navigation\"\n *           buttonType=\"icon\"\n *           onClick={toggleStaticNav}\n *         >\n *           <MenuOutlinedIcon />\n *         '</Button>\n *         {title}\n *       </LayoutAppBar>\n *       <Main {...elementProps}>\n *         {children}\n *       </Main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport function useHorizontalLayoutTransition<\n  E extends HTMLElement = HTMLElement,\n>(options: HorizontalLayoutTransitionOptions): CSSTransitionHookReturnValue<E> {\n  return useCSSTransition({\n    timeout: DEFAULT_SHEET_TIMEOUT,\n    classNames: DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES,\n    ...options,\n    className: cnb(\"rmd-layout-h\", options.className),\n  });\n}\n"],"names":["cnb","DEFAULT_SHEET_TIMEOUT","useCSSTransition","DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES","appearDone","enter","enterActive","enterDone","exit","useHorizontalLayoutTransition","options","timeout","classNames","className"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,qBAAqB,QAAQ,qBAAqB;AAO3D,SAASC,gBAAgB,QAAQ,oCAAoC;AAErE;;CAEC,GACD,OAAO,MAAMC,kDAAkD;IAC7DC,YAAY;IACZC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;AACR,EAA6C;AAkB7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,SAASC,8BAEdC,OAA0C;IAC1C,OAAOR,iBAAiB;QACtBS,SAASV;QACTW,YAAYT;QACZ,GAAGO,OAAO;QACVG,WAAWb,IAAI,gBAAgBU,QAAQG,SAAS;IAClD;AACF"}

package/dist/layout/useLayoutTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useLayoutTree.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo } from \"react\";\n\nimport { type TreeProps } from \"../tree/Tree.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeDefaultIds,\n  type TreeItemNode,\n} from \"../tree/types.js\";\nimport { type TreeImplementation } from \"../tree/useTree.js\";\nimport { useTreeExpansion } from \"../tree/useTreeExpansion.js\";\nimport { getTreeItemsFrom } from \"../tree/utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nconst getParentIds = (\n  itemId: string,\n  navItems: TreeData<TreeItemNode>\n): readonly string[] =>\n  getTreeItemsFrom(navItems, itemId).map(({ itemId }) => itemId);\n\n/**\n * @since 6.0.0 Removed the `linkComponent` option.\n */\nexport interface LayoutTreeOptions<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> {\n  /**\n   * The current pathname which is used as the tree `itemId`.\n   */\n  pathname: string;\n\n  /**\n   * @example\n   * ```tsx\n   * const navItems = {\n   *   \"/\": {\n   *     itemId: \"/\",\n   *     parentId: null,\n   *     children: \"Home\",\n   *     leftAddon: <HomeIcon />,\n   *     to: \"/\",\n   *   },\n   *   \"/route-1\": {\n   *     itemId: \"/route-1\",\n   *     parentId: null,\n   *     children: \"Route 1\",\n   *     leftAddon: <TvIcon />,\n   *     to: \"/route-1\",\n   *   },\n   *   \"/route-2\": {\n   *     itemId: \"/route-2\",\n   *     parentId: null,\n   *     children: \"Route 2\",\n   *     leftAddon: <AppsIcon />,\n   *     to: \"/route-2\",\n   *   },\n   *   \"/route-3\": {\n   *     itemId: \"/route-3\",\n   *     parentId: null,\n   *     children: \"Route 3\",\n   *     leftAddon: <BookIcon />,\n   *     to: \"/route-3\",\n   *   },\n   * } satisfies TreeData;\n   * ```\n   */\n  navItems: TreeData<T>;\n\n  /**\n   * @defaultValue `getParentIds(pathname, navItems)`\n   */\n  defaultExpandedIds?: TreeDefaultIds;\n}\n\n/**\n * @since 6.0.0 Renamed from `LayoutNavigationState`, removed the\n * `linkComponent`, and remap `navItems` to `data` so it can be passed to the\n * `Tree` component.\n */\nexport interface LayoutTreeImplementation<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> extends Pick<TreeProps<T>, \"data\">,\n    TreeImplementation {}\n\n/**\n * Before considering to use a `Tree` for site navigation, it is important to\n * understand:\n * - There is a lot of functionality required to implement the tree widget so\n *   your bundle size will increase\n * - A pattern more suited for typical site navigation with expandable groups of\n *   links is the disclosure pattern.\n * - @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/\n *\n * This is a pretty reasonable default implementation for having a navigation\n * tree within the Layout component. The way it'll work is that the current\n * route will be the only selected item within the tree. When the pathname\n * changes, the selectedIds will be updated to only be the current pathname once\n * again.\n *\n * This means that you can use whatever routing library or history provider that\n * ensures that your layout re-renders on a path change.\n *\n * @example\n * ```tsx\n * import { useLayoutTree } from \"@react-md/core/layout/useLayoutTree\"\n * import { Tree } from \"@react-md/core/tree/Tree\";\n * import { type TreeData } from \"@react-md/core/tree/types\";\n * import { type ReactElement } from \"react\";\n *\n * // choose your routing library...\n * import { Link, useLocation } from \"react-router\";\n *\n * const navItems = {\n *   \"/\": {\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *     leftAddon: <HomeIcon />,\n *     to: \"/\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Route 1\",\n *     leftAddon: <TvIcon />,\n *     to: \"/route-1\",\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\",\n *     parentId: null,\n *     children: \"Route 2\",\n *     leftAddon: <AppsIcon />,\n *     to: \"/route-2\",\n *   },\n *   \"/route-3\": {\n *     itemId: \"/route-3\",\n *     parentId: null,\n *     children: \"Route 3\",\n *     leftAddon: <BookIcon />,\n *     to: \"/route-3\",\n *   },\n * } satisfies TreeData;\n *\n * function Example(): ReactElement {\n *   const { pathname } = useLocation();\n *   const tree = useLayoutTree({\n *     navItems,\n *     pathname,\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Navigation\"\n *       linkComponent={Link}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @see {@link https://react-md.dev/hooks/use-layout-tree | useLayoutTree Demos}\n * @since 6.0.0 Renamed from `useLayoutNavigation`.\n */\nexport function useLayoutTree(\n  options: LayoutTreeOptions\n): LayoutTreeImplementation {\n  const { defaultExpandedIds, navItems, pathname } = options;\n\n  const selectedIds = useMemo(() => new Set([pathname]), [pathname]);\n  const { expandedIds, expandMultipleTreeItems, toggleTreeItemExpansion } =\n    useTreeExpansion(\n      defaultExpandedIds ?? (() => getParentIds(pathname, navItems))\n    );\n\n  useEffect(() => {\n    expandMultipleTreeItems((prevExpandedIds) => {\n      const nextExpandedIds = new Set([\n        ...prevExpandedIds,\n        ...getParentIds(pathname, navItems),\n      ]);\n\n      return nextExpandedIds;\n    });\n  }, [expandMultipleTreeItems, pathname, navItems]);\n\n  return {\n    data: navItems,\n    multiSelect: false,\n    selectedIds,\n    expandedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    toggleTreeItemSelection: noop,\n    selectMultipleTreeItems: noop,\n  };\n}\n"],"names":["useEffect","useMemo","useTreeExpansion","getTreeItemsFrom","noop","getParentIds","itemId","navItems","map","useLayoutTree","options","defaultExpandedIds","pathname","selectedIds","Set","expandedIds","expandMultipleTreeItems","toggleTreeItemExpansion","prevExpandedIds","nextExpandedIds","data","multiSelect","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAU3C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,MAAMC,eAAe,CACnBC,QACAC,WAEAJ,iBAAiBI,UAAUD,QAAQE,GAAG,CAAC,CAAC,EAAEF,MAAM,EAAE,GAAKA;AAkEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFC,GACD,OAAO,SAASG,cACdC,OAA0B;IAE1B,MAAM,EAAEC,kBAAkB,EAAEJ,QAAQ,EAAEK,QAAQ,EAAE,GAAGF;IAEnD,MAAMG,cAAcZ,QAAQ,IAAM,IAAIa,IAAI;YAACF;SAAS,GAAG;QAACA;KAAS;IACjE,MAAM,EAAEG,WAAW,EAAEC,uBAAuB,EAAEC,uBAAuB,EAAE,GACrEf,iBACES,sBAAuB,CAAA,IAAMN,aAAaO,UAAUL,SAAQ;IAGhEP,UAAU;QACRgB,wBAAwB,CAACE;YACvB,MAAMC,kBAAkB,IAAIL,IAAI;mBAC3BI;mBACAb,aAAaO,UAAUL;aAC3B;YAED,OAAOY;QACT;IACF,GAAG;QAACH;QAAyBJ;QAAUL;KAAS;IAEhD,OAAO;QACLa,MAAMb;QACNc,aAAa;QACbR;QACAE;QACAC;QACAC;QACAK,yBAAyBlB;QACzBmB,yBAAyBnB;IAC3B;AACF"}
+{"version":3,"sources":["../../src/layout/useLayoutTree.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo } from \"react\";\n\nimport { type TreeProps } from \"../tree/Tree.js\";\nimport {\n  type DefaultTreeItemNode,\n  type TreeData,\n  type TreeDefaultIds,\n  type TreeItemNode,\n} from \"../tree/types.js\";\nimport { type TreeImplementation } from \"../tree/useTree.js\";\nimport { useTreeExpansion } from \"../tree/useTreeExpansion.js\";\nimport { getTreeItemsFrom } from \"../tree/utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @internal\n */\nconst getParentIds = (\n  itemId: string,\n  navItems: TreeData<TreeItemNode>\n): readonly string[] =>\n  getTreeItemsFrom(navItems, itemId).map(({ itemId }) => itemId);\n\n/**\n * @since 6.0.0 Removed the `linkComponent` option.\n */\nexport interface LayoutTreeOptions<\n  T extends TreeItemNode = DefaultTreeItemNode,\n> {\n  /**\n   * The current pathname which is used as the tree `itemId`.\n   */\n  pathname: string;\n\n  /**\n   * @example\n   * ```tsx\n   * const navItems = {\n   *   \"/\": {\n   *     itemId: \"/\",\n   *     parentId: null,\n   *     children: \"Home\",\n   *     leftAddon: <HomeIcon />,\n   *     to: \"/\",\n   *   },\n   *   \"/route-1\": {\n   *     itemId: \"/route-1\",\n   *     parentId: null,\n   *     children: \"Route 1\",\n   *     leftAddon: <TvIcon />,\n   *     to: \"/route-1\",\n   *   },\n   *   \"/route-2\": {\n   *     itemId: \"/route-2\",\n   *     parentId: null,\n   *     children: \"Route 2\",\n   *     leftAddon: <AppsIcon />,\n   *     to: \"/route-2\",\n   *   },\n   *   \"/route-3\": {\n   *     itemId: \"/route-3\",\n   *     parentId: null,\n   *     children: \"Route 3\",\n   *     leftAddon: <BookIcon />,\n   *     to: \"/route-3\",\n   *   },\n   * } satisfies TreeData;\n   * ```\n   */\n  navItems: TreeData<T>;\n\n  /**\n   * @defaultValue `getParentIds(pathname, navItems)`\n   */\n  defaultExpandedIds?: TreeDefaultIds;\n}\n\n/**\n * @since 6.0.0 Renamed from `LayoutNavigationState`, removed the\n * `linkComponent`, and remap `navItems` to `data` so it can be passed to the\n * `Tree` component.\n */\nexport interface LayoutTreeImplementation<\n  T extends TreeItemNode = DefaultTreeItemNode,\n>\n  extends Pick<TreeProps<T>, \"data\">, TreeImplementation {}\n\n/**\n * Before considering to use a `Tree` for site navigation, it is important to\n * understand:\n * - There is a lot of functionality required to implement the tree widget so\n *   your bundle size will increase\n * - A pattern more suited for typical site navigation with expandable groups of\n *   links is the disclosure pattern.\n * - @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/\n *\n * This is a pretty reasonable default implementation for having a navigation\n * tree within the Layout component. The way it'll work is that the current\n * route will be the only selected item within the tree. When the pathname\n * changes, the selectedIds will be updated to only be the current pathname once\n * again.\n *\n * This means that you can use whatever routing library or history provider that\n * ensures that your layout re-renders on a path change.\n *\n * @example\n * ```tsx\n * import { useLayoutTree } from \"@react-md/core/layout/useLayoutTree\"\n * import { Tree } from \"@react-md/core/tree/Tree\";\n * import { type TreeData } from \"@react-md/core/tree/types\";\n * import { type ReactElement } from \"react\";\n *\n * // choose your routing library...\n * import { Link, useLocation } from \"react-router\";\n *\n * const navItems = {\n *   \"/\": {\n *     itemId: \"/\",\n *     parentId: null,\n *     children: \"Home\",\n *     leftAddon: <HomeIcon />,\n *     to: \"/\",\n *   },\n *   \"/route-1\": {\n *     itemId: \"/route-1\",\n *     parentId: null,\n *     children: \"Route 1\",\n *     leftAddon: <TvIcon />,\n *     to: \"/route-1\",\n *   },\n *   \"/route-2\": {\n *     itemId: \"/route-2\",\n *     parentId: null,\n *     children: \"Route 2\",\n *     leftAddon: <AppsIcon />,\n *     to: \"/route-2\",\n *   },\n *   \"/route-3\": {\n *     itemId: \"/route-3\",\n *     parentId: null,\n *     children: \"Route 3\",\n *     leftAddon: <BookIcon />,\n *     to: \"/route-3\",\n *   },\n * } satisfies TreeData;\n *\n * function Example(): ReactElement {\n *   const { pathname } = useLocation();\n *   const tree = useLayoutTree({\n *     navItems,\n *     pathname,\n *   });\n *\n *   return (\n *     <Tree\n *       {...tree}\n *       aria-label=\"Navigation\"\n *       linkComponent={Link}\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @see {@link https://react-md.dev/components/tree | Tree Demos}\n * @see {@link https://react-md.dev/hooks/use-layout-tree | useLayoutTree Demos}\n * @since 6.0.0 Renamed from `useLayoutNavigation`.\n */\nexport function useLayoutTree(\n  options: LayoutTreeOptions\n): LayoutTreeImplementation {\n  const { defaultExpandedIds, navItems, pathname } = options;\n\n  const selectedIds = useMemo(() => new Set([pathname]), [pathname]);\n  const { expandedIds, expandMultipleTreeItems, toggleTreeItemExpansion } =\n    useTreeExpansion(\n      defaultExpandedIds ?? (() => getParentIds(pathname, navItems))\n    );\n\n  useEffect(() => {\n    expandMultipleTreeItems((prevExpandedIds) => {\n      const nextExpandedIds = new Set([\n        ...prevExpandedIds,\n        ...getParentIds(pathname, navItems),\n      ]);\n\n      return nextExpandedIds;\n    });\n  }, [expandMultipleTreeItems, pathname, navItems]);\n\n  return {\n    data: navItems,\n    multiSelect: false,\n    selectedIds,\n    expandedIds,\n    expandMultipleTreeItems,\n    toggleTreeItemExpansion,\n    toggleTreeItemSelection: noop,\n    selectMultipleTreeItems: noop,\n  };\n}\n"],"names":["useEffect","useMemo","useTreeExpansion","getTreeItemsFrom","noop","getParentIds","itemId","navItems","map","useLayoutTree","options","defaultExpandedIds","pathname","selectedIds","Set","expandedIds","expandMultipleTreeItems","toggleTreeItemExpansion","prevExpandedIds","nextExpandedIds","data","multiSelect","toggleTreeItemSelection","selectMultipleTreeItems"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAU3C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,MAAMC,eAAe,CACnBC,QACAC,WAEAJ,iBAAiBI,UAAUD,QAAQE,GAAG,CAAC,CAAC,EAAEF,MAAM,EAAE,GAAKA;AAkEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFC,GACD,OAAO,SAASG,cACdC,OAA0B;IAE1B,MAAM,EAAEC,kBAAkB,EAAEJ,QAAQ,EAAEK,QAAQ,EAAE,GAAGF;IAEnD,MAAMG,cAAcZ,QAAQ,IAAM,IAAIa,IAAI;YAACF;SAAS,GAAG;QAACA;KAAS;IACjE,MAAM,EAAEG,WAAW,EAAEC,uBAAuB,EAAEC,uBAAuB,EAAE,GACrEf,iBACES,sBAAuB,CAAA,IAAMN,aAAaO,UAAUL,SAAQ;IAGhEP,UAAU;QACRgB,wBAAwB,CAACE;YACvB,MAAMC,kBAAkB,IAAIL,IAAI;mBAC3BI;mBACAb,aAAaO,UAAUL;aAC3B;YAED,OAAOY;QACT;IACF,GAAG;QAACH;QAAyBJ;QAAUL;KAAS;IAEhD,OAAO;QACLa,MAAMb;QACNc,aAAa;QACbR;QACAE;QACAC;QACAC;QACAK,yBAAyBlB;QACzBmB,yBAAyBnB;IAC3B;AACF"}

package/dist/layout/useLayoutWindowSplitter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useLayoutWindowSplitter.ts"],"sourcesContent":["\"use client\";\n\nimport { type UncontrolledDraggableOptions } from \"../draggable/useDraggable.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { useWindowSize } from \"../useWindowSize.js\";\nimport {\n  type WindowSplitterImplementation,\n  type WindowSplitterOptions,\n  type WindowSplitterWidgetProps,\n  useWindowSplitter,\n} from \"../window-splitter/useWindowSplitter.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterOptions\n  extends Omit<WindowSplitterOptions, \"min\" | \"max\"> {\n  /**\n   * @see {@link WindowSplitterOptions.min}\n   * @defaultValue `96`\n   */\n  min?: number;\n\n  /**\n   * This is the minimum max value that can be allowed while resizing the\n   * browser. I don't know the best way to describe it, but the `max` value is\n   * determined by:\n   *\n   * ```ts\n   * const { width } = useWindowSize({ disableHeight: true });\n   * const max = Math.max(maxMinimum, width * windowPercentage);\n   * ```\n   *\n   * @defaultValue `600`\n   */\n  maxMinimum?: number;\n\n  /**\n   * This will be multiplied by the current window's width to determine the\n   * dynamic max value for the window splitter.\n   *\n   * @see {@link maxMinimum}\n   * @defaultValue `0.45`\n   */\n  windowPercentage?: number;\n\n  /** @defaultValue `256` */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutWindowSplitterProps\n  extends WindowSplitterWidgetProps<HTMLButtonElement> {\n  /** @defaultValue {@link WindowSplitterImplementation.value} */\n  navWidth: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterImplementation\n  extends WindowSplitterImplementation {\n  splitterProps: ProvidedLayoutWindowSplitterProps;\n}\n\n/**\n * A custom window splitter implementation to be used with the\n * `LayoutWindowSplitter` that will dynamically configure the max width to be a\n * percentage of the current window's width.\n *\n * Note: This will automatically save the width in local storage as\n * `\"navWidth\"`. See the example below if you do not want to use local storage.\n *\n * @example Without this hook\n * ```tsx\n * import { type ProvidedLayoutWindowSplitterProps } from \"@react-md/core/layout/useLayoutWindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useWindowSize } from \"@react-md/core/useWindowSize.js\";\n *\n * export function useMyLayoutWindowSplitter(): ProvidedLayoutWindowSplitterProps {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const { splitterProps, value } = useWindowSplitter({\n *     min: 96,\n *     max: Math.max(maxMinimum, width * 0.45),\n *     maxMinimum: 600,\n *   });\n *\n *   return {\n *     ...splitterProps,\n *     navWidth: value,\n *   };\n * }\n *\n * function MyLayout() {\n *   const splitterProps = useMyLayoutWindowSplitter();\n *\n *   return (\n *     <LayoutWindowSplitter\n *       {...splitterProps}\n *       aria-controls=\"layout-nav-id\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @see {@link useResizableLayout} For a pre-built solution.\n * @since 6.0.0\n */\nexport function useLayoutWindowSplitter(\n  options: LayoutWindowSplitterOptions = {}\n): LayoutWindowSplitterImplementation {\n  const {\n    min = 96,\n    maxMinimum = 600,\n    windowPercentage = 0.45,\n    defaultValue = 256,\n    ...remaining\n  } = options;\n  const { width } = useWindowSize({ disableHeight: true });\n  const implementation = useWindowSplitter({\n    min,\n    max: Math.max(maxMinimum, width * windowPercentage),\n    defaultValue,\n    // type cast so it doesn't complain about defaultValue being provided with\n    // value. That's mostly for public api usage\n    ...(remaining as UncontrolledDraggableOptions),\n  });\n\n  return {\n    ...implementation,\n    splitterProps: {\n      ...implementation.splitterProps,\n      navWidth: implementation.value,\n    },\n  };\n}\n"],"names":["useWindowSize","useWindowSplitter","useLayoutWindowSplitter","options","min","maxMinimum","windowPercentage","defaultValue","remaining","width","disableHeight","implementation","max","Math","splitterProps","navWidth","value"],"mappings":"AAAA;AAIA,SAASA,aAAa,QAAQ,sBAAsB;AACpD,SAIEC,iBAAiB,QACZ,0CAA0C;AAyDjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASC,wBACdC,UAAuC,CAAC,CAAC;IAEzC,MAAM,EACJC,MAAM,EAAE,EACRC,aAAa,GAAG,EAChBC,mBAAmB,IAAI,EACvBC,eAAe,GAAG,EAClB,GAAGC,WACJ,GAAGL;IACJ,MAAM,EAAEM,KAAK,EAAE,GAAGT,cAAc;QAAEU,eAAe;IAAK;IACtD,MAAMC,iBAAiBV,kBAAkB;QACvCG;QACAQ,KAAKC,KAAKD,GAAG,CAACP,YAAYI,QAAQH;QAClCC;QACA,0EAA0E;QAC1E,4CAA4C;QAC5C,GAAIC,SAAS;IACf;IAEA,OAAO;QACL,GAAGG,cAAc;QACjBG,eAAe;YACb,GAAGH,eAAeG,aAAa;YAC/BC,UAAUJ,eAAeK,KAAK;QAChC;IACF;AACF"}
+{"version":3,"sources":["../../src/layout/useLayoutWindowSplitter.ts"],"sourcesContent":["\"use client\";\n\nimport { type UncontrolledDraggableOptions } from \"../draggable/useDraggable.js\";\nimport { type UseStateInitializer } from \"../types.js\";\nimport { useWindowSize } from \"../useWindowSize.js\";\nimport {\n  type WindowSplitterImplementation,\n  type WindowSplitterOptions,\n  type WindowSplitterWidgetProps,\n  useWindowSplitter,\n} from \"../window-splitter/useWindowSplitter.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterOptions extends Omit<\n  WindowSplitterOptions,\n  \"min\" | \"max\"\n> {\n  /**\n   * @see {@link WindowSplitterOptions.min}\n   * @defaultValue `96`\n   */\n  min?: number;\n\n  /**\n   * This is the minimum max value that can be allowed while resizing the\n   * browser. I don't know the best way to describe it, but the `max` value is\n   * determined by:\n   *\n   * ```ts\n   * const { width } = useWindowSize({ disableHeight: true });\n   * const max = Math.max(maxMinimum, width * windowPercentage);\n   * ```\n   *\n   * @defaultValue `600`\n   */\n  maxMinimum?: number;\n\n  /**\n   * This will be multiplied by the current window's width to determine the\n   * dynamic max value for the window splitter.\n   *\n   * @see {@link maxMinimum}\n   * @defaultValue `0.45`\n   */\n  windowPercentage?: number;\n\n  /** @defaultValue `256` */\n  defaultValue?: UseStateInitializer<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedLayoutWindowSplitterProps extends WindowSplitterWidgetProps<HTMLButtonElement> {\n  /** @defaultValue {@link WindowSplitterImplementation.value} */\n  navWidth: number;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface LayoutWindowSplitterImplementation extends WindowSplitterImplementation {\n  splitterProps: ProvidedLayoutWindowSplitterProps;\n}\n\n/**\n * A custom window splitter implementation to be used with the\n * `LayoutWindowSplitter` that will dynamically configure the max width to be a\n * percentage of the current window's width.\n *\n * Note: This will automatically save the width in local storage as\n * `\"navWidth\"`. See the example below if you do not want to use local storage.\n *\n * @example Without this hook\n * ```tsx\n * import { type ProvidedLayoutWindowSplitterProps } from \"@react-md/core/layout/useLayoutWindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useWindowSize } from \"@react-md/core/useWindowSize.js\";\n *\n * export function useMyLayoutWindowSplitter(): ProvidedLayoutWindowSplitterProps {\n *   const { width } = useWindowSize({ disableHeight: true });\n *   const { splitterProps, value } = useWindowSplitter({\n *     min: 96,\n *     max: Math.max(maxMinimum, width * 0.45),\n *     maxMinimum: 600,\n *   });\n *\n *   return {\n *     ...splitterProps,\n *     navWidth: value,\n *   };\n * }\n *\n * function MyLayout() {\n *   const splitterProps = useMyLayoutWindowSplitter();\n *\n *   return (\n *     <LayoutWindowSplitter\n *       {...splitterProps}\n *       aria-controls=\"layout-nav-id\"\n *     />\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @see {@link useResizableLayout} For a pre-built solution.\n * @since 6.0.0\n */\nexport function useLayoutWindowSplitter(\n  options: LayoutWindowSplitterOptions = {}\n): LayoutWindowSplitterImplementation {\n  const {\n    min = 96,\n    maxMinimum = 600,\n    windowPercentage = 0.45,\n    defaultValue = 256,\n    ...remaining\n  } = options;\n  const { width } = useWindowSize({ disableHeight: true });\n  const implementation = useWindowSplitter({\n    min,\n    max: Math.max(maxMinimum, width * windowPercentage),\n    defaultValue,\n    // type cast so it doesn't complain about defaultValue being provided with\n    // value. That's mostly for public api usage\n    ...(remaining as UncontrolledDraggableOptions),\n  });\n\n  return {\n    ...implementation,\n    splitterProps: {\n      ...implementation.splitterProps,\n      navWidth: implementation.value,\n    },\n  };\n}\n"],"names":["useWindowSize","useWindowSplitter","useLayoutWindowSplitter","options","min","maxMinimum","windowPercentage","defaultValue","remaining","width","disableHeight","implementation","max","Math","splitterProps","navWidth","value"],"mappings":"AAAA;AAIA,SAASA,aAAa,QAAQ,sBAAsB;AACpD,SAIEC,iBAAiB,QACZ,0CAA0C;AAyDjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASC,wBACdC,UAAuC,CAAC,CAAC;IAEzC,MAAM,EACJC,MAAM,EAAE,EACRC,aAAa,GAAG,EAChBC,mBAAmB,IAAI,EACvBC,eAAe,GAAG,EAClB,GAAGC,WACJ,GAAGL;IACJ,MAAM,EAAEM,KAAK,EAAE,GAAGT,cAAc;QAAEU,eAAe;IAAK;IACtD,MAAMC,iBAAiBV,kBAAkB;QACvCG;QACAQ,KAAKC,KAAKD,GAAG,CAACP,YAAYI,QAAQH;QAClCC;QACA,0EAA0E;QAC1E,4CAA4C;QAC5C,GAAIC,SAAS;IACf;IAEA,OAAO;QACL,GAAGG,cAAc;QACjBG,eAAe;YACb,GAAGH,eAAeG,aAAa;YAC/BC,UAAUJ,eAAeK,KAAK;QAChC;IACF;AACF"}

package/dist/layout/useResizableLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/useResizableLayout.ts"],"sourcesContent":["import { useEnsuredId } from \"../useEnsuredId.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { type LayoutWindowSplitterProps } from \"./LayoutWindowSplitter.js\";\nimport {\n  type ExpandableLayoutImplementation,\n  type ExpandableLayoutOptions,\n  type ProvidedLayoutNavProps,\n} from \"./useExpandableLayout.js\";\nimport { useExpandableLayout } from \"./useExpandableLayout.js\";\nimport {\n  type LayoutWindowSplitterOptions,\n  useLayoutWindowSplitter,\n} from \"./useLayoutWindowSplitter.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ResizableLayoutOptions\n  extends ExpandableLayoutOptions,\n    LayoutWindowSplitterOptions {\n  /**\n   * This id will be used as the `aria-controls` prop for the\n   * `LayoutWindowSplitter` and should be applied to the `LayoutNav` as an `id`.\n   *\n   * @defaultValue `\"layout-nav\" + useId()`\n   */\n  navId?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedResizableLayoutNavProps\n  extends ProvidedLayoutNavProps {\n  id: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ResizableLayoutImplementation\n  extends ExpandableLayoutImplementation {\n  expandableNavProps: ProvidedResizableLayoutNavProps;\n  windowSplitterProps: LayoutWindowSplitterProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { LayoutWindowSplitter } from \"@react-md/core/layout/LayoutWindowSplitter\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useResizableLayout } from \"@react-md/core/layout/useResizableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useResizableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       <LayoutWindowSplitter {...windowSplitterProps} />\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useResizableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * -     <LayoutWindowSplitter {...windowSplitterProps} />\n * +     {persistent && (\n * +       <>\n * +         <LayoutNav {...expandableNavProps}>\n * +           <CustomNavigation />\n * +         </LayoutNav>\n * +         <LayoutWindowSplitter {...windowSplitterProps} />\n * +       </>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   )\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport function useResizableLayout(\n  options: ResizableLayoutOptions\n): ResizableLayoutImplementation {\n  const {\n    navId: propNavId,\n    pathname,\n    appBarPosition = \"fixed\",\n    fullHeightNav = false,\n    temporaryUntil,\n    defaultVisible,\n    defaultExpanded,\n    ...splitterOptions\n  } = options;\n  const navId = useEnsuredId(propNavId, \"layout-nav\");\n  const { splitterProps, ...windowSplitter } =\n    useLayoutWindowSplitter(splitterOptions);\n  const expandableLayout = useExpandableLayout({\n    pathname,\n    appBarPosition,\n    temporaryUntil,\n    fullHeightNav,\n    defaultExpanded,\n    defaultVisible,\n  });\n  const { expandableNavProps, expanded } = expandableLayout;\n\n  return {\n    ...expandableLayout,\n    ...windowSplitter,\n    expandableNavProps: {\n      id: navId,\n      ...expandableNavProps,\n    },\n    windowSplitterProps: {\n      ...splitterProps,\n      \"aria-controls\": navId,\n      appBarOffset: !fullHeightNav,\n      className: (!expanded && DISPLAY_NONE_CLASS) || undefined,\n    },\n  };\n}\n"],"names":["useEnsuredId","DISPLAY_NONE_CLASS","useExpandableLayout","useLayoutWindowSplitter","useResizableLayout","options","navId","propNavId","pathname","appBarPosition","fullHeightNav","temporaryUntil","defaultVisible","defaultExpanded","splitterOptions","splitterProps","windowSplitter","expandableLayout","expandableNavProps","expanded","id","windowSplitterProps","appBarOffset","className","undefined"],"mappings":"AAAA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,+BAA+B;AAOlE,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SAEEC,uBAAuB,QAClB,+BAA+B;AAkCtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GC,GACD,OAAO,SAASC,mBACdC,OAA+B;IAE/B,MAAM,EACJC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,iBAAiB,OAAO,EACxBC,gBAAgB,KAAK,EACrBC,cAAc,EACdC,cAAc,EACdC,eAAe,EACf,GAAGC,iBACJ,GAAGT;IACJ,MAAMC,QAAQN,aAAaO,WAAW;IACtC,MAAM,EAAEQ,aAAa,EAAE,GAAGC,gBAAgB,GACxCb,wBAAwBW;IAC1B,MAAMG,mBAAmBf,oBAAoB;QAC3CM;QACAC;QACAE;QACAD;QACAG;QACAD;IACF;IACA,MAAM,EAAEM,kBAAkB,EAAEC,QAAQ,EAAE,GAAGF;IAEzC,OAAO;QACL,GAAGA,gBAAgB;QACnB,GAAGD,cAAc;QACjBE,oBAAoB;YAClBE,IAAId;YACJ,GAAGY,kBAAkB;QACvB;QACAG,qBAAqB;YACnB,GAAGN,aAAa;YAChB,iBAAiBT;YACjBgB,cAAc,CAACZ;YACfa,WAAW,AAAC,CAACJ,YAAYlB,sBAAuBuB;QAClD;IACF;AACF"}
+{"version":3,"sources":["../../src/layout/useResizableLayout.ts"],"sourcesContent":["import { useEnsuredId } from \"../useEnsuredId.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { type LayoutWindowSplitterProps } from \"./LayoutWindowSplitter.js\";\nimport {\n  type ExpandableLayoutImplementation,\n  type ExpandableLayoutOptions,\n  type ProvidedLayoutNavProps,\n} from \"./useExpandableLayout.js\";\nimport { useExpandableLayout } from \"./useExpandableLayout.js\";\nimport {\n  type LayoutWindowSplitterOptions,\n  useLayoutWindowSplitter,\n} from \"./useLayoutWindowSplitter.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ResizableLayoutOptions\n  extends ExpandableLayoutOptions, LayoutWindowSplitterOptions {\n  /**\n   * This id will be used as the `aria-controls` prop for the\n   * `LayoutWindowSplitter` and should be applied to the `LayoutNav` as an `id`.\n   *\n   * @defaultValue `\"layout-nav\" + useId()`\n   */\n  navId?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedResizableLayoutNavProps extends ProvidedLayoutNavProps {\n  id: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ResizableLayoutImplementation extends ExpandableLayoutImplementation {\n  expandableNavProps: ProvidedResizableLayoutNavProps;\n  windowSplitterProps: LayoutWindowSplitterProps;\n}\n\n/**\n * @example Main Usage\n * ```tsx\n * import { AppBarTitle } from \"@react-md/core/app-bar/AppBarTitle\";\n * import { Button } from \"@react-md/core/button/Button\";\n * import { LayoutAppBar } from \"@react-md/core/layout/LayoutAppBar\";\n * import { LayoutNav } from \"@react-md/core/layout/LayoutNav\";\n * import { LayoutWindowSplitter } from \"@react-md/core/layout/LayoutWindowSplitter\";\n * import { Main } from \"@react-md/core/layout/Main\";\n * import { useResizableLayout } from \"@react-md/core/layout/useResizableLayout\";\n * import { Sheet } from \"@react-md/core/sheet/Sheet\";\n * import { type ReactElement, type ReactNode } from \"react\";\n *\n * import { CustomNavigation } from \"./CustomNavigation\";\n *\n * export interface LayoutProps {\n *   children: ReactNode;\n * }\n *\n * export function Layout(props: LayoutProps): ReactElement {\n *   const { children } = props;\n *\n *   // choose whichever one for your app\n *   // nextjs app dir\n *   const pathname = usePathname();\n *   // nextjs pages\n *   const { pathname } = useRouter();\n *   // react router\n *   const { pathname } = useHistory();\n *\n *   const {\n *     temporary,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useResizableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n *       <LayoutNav {...expandableNavProps}>\n *         <CustomNavigation />\n *       </LayoutNav>\n *       <LayoutWindowSplitter {...windowSplitterProps} />\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   );\n * }\n * ```\n *\n * If you have a large navigation panel, you can conditionally render the\n * `LayoutNav` with the `persistent` boolean returned by the hook which will\n * ensure that the DOM has rehydrated before unmounting to prevent SSR errors.\n *\n * @example Conditionally Rendering\n * ```diff\n *   const {\n *     temporary,\n * +   persistent,\n *     appBarProps,\n *     expandableNavProps,\n *     mainProps,\n *     navToggleProps,\n *     temporaryNavProps,\n *     windowSplitterProps,\n *   } = useResizableLayout({ pathname });\n *\n *   return (\n *     <>\n *       <LayoutAppBar {...appBarProps}>\n *         <Button {...navToggleProps} />\n *         <AppBarTitle>Hello, world!</AppBarTitle>\n *       </LayoutAppBar>\n * -     <LayoutNav {...expandableNavProps}>\n * -       <CustomNavigation />\n * -     </LayoutNav>\n * -     <LayoutWindowSplitter {...windowSplitterProps} />\n * +     {persistent && (\n * +       <>\n * +         <LayoutNav {...expandableNavProps}>\n * +           <CustomNavigation />\n * +         </LayoutNav>\n * +         <LayoutWindowSplitter {...windowSplitterProps} />\n * +       </>\n * +     )}\n *       {temporary && (\n *         <Sheet {...temporaryNavProps}>\n *           <CustomNavigation />\n *         </Sheet>\n *       )}\n *       <Main {...mainProps}>{children}</Main>\n *     </>\n *   )\n * ```\n *\n * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}\n * @since 6.0.0\n */\nexport function useResizableLayout(\n  options: ResizableLayoutOptions\n): ResizableLayoutImplementation {\n  const {\n    navId: propNavId,\n    pathname,\n    appBarPosition = \"fixed\",\n    fullHeightNav = false,\n    temporaryUntil,\n    defaultVisible,\n    defaultExpanded,\n    ...splitterOptions\n  } = options;\n  const navId = useEnsuredId(propNavId, \"layout-nav\");\n  const { splitterProps, ...windowSplitter } =\n    useLayoutWindowSplitter(splitterOptions);\n  const expandableLayout = useExpandableLayout({\n    pathname,\n    appBarPosition,\n    temporaryUntil,\n    fullHeightNav,\n    defaultExpanded,\n    defaultVisible,\n  });\n  const { expandableNavProps, expanded } = expandableLayout;\n\n  return {\n    ...expandableLayout,\n    ...windowSplitter,\n    expandableNavProps: {\n      id: navId,\n      ...expandableNavProps,\n    },\n    windowSplitterProps: {\n      ...splitterProps,\n      \"aria-controls\": navId,\n      appBarOffset: !fullHeightNav,\n      className: (!expanded && DISPLAY_NONE_CLASS) || undefined,\n    },\n  };\n}\n"],"names":["useEnsuredId","DISPLAY_NONE_CLASS","useExpandableLayout","useLayoutWindowSplitter","useResizableLayout","options","navId","propNavId","pathname","appBarPosition","fullHeightNav","temporaryUntil","defaultVisible","defaultExpanded","splitterOptions","splitterProps","windowSplitter","expandableLayout","expandableNavProps","expanded","id","windowSplitterProps","appBarOffset","className","undefined"],"mappings":"AAAA,SAASA,YAAY,QAAQ,qBAAqB;AAClD,SAASC,kBAAkB,QAAQ,+BAA+B;AAOlE,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SAEEC,uBAAuB,QAClB,+BAA+B;AA+BtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GC,GACD,OAAO,SAASC,mBACdC,OAA+B;IAE/B,MAAM,EACJC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,iBAAiB,OAAO,EACxBC,gBAAgB,KAAK,EACrBC,cAAc,EACdC,cAAc,EACdC,eAAe,EACf,GAAGC,iBACJ,GAAGT;IACJ,MAAMC,QAAQN,aAAaO,WAAW;IACtC,MAAM,EAAEQ,aAAa,EAAE,GAAGC,gBAAgB,GACxCb,wBAAwBW;IAC1B,MAAMG,mBAAmBf,oBAAoB;QAC3CM;QACAC;QACAE;QACAD;QACAG;QACAD;IACF;IACA,MAAM,EAAEM,kBAAkB,EAAEC,QAAQ,EAAE,GAAGF;IAEzC,OAAO;QACL,GAAGA,gBAAgB;QACnB,GAAGD,cAAc;QACjBE,oBAAoB;YAClBE,IAAId;YACJ,GAAGY,kBAAkB;QACvB;QACAG,qBAAqB;YACnB,GAAGN,aAAa;YAChB,iBAAiBT;YACjBgB,cAAc,CAACZ;YACfa,WAAW,AAAC,CAACJ,YAAYlB,sBAAuBuB;QAClD;IACF;AACF"}

package/dist/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/link/Link.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  forwardRef,\n} from \"react\";\n\nimport { type LinkClassNameOptions, link } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | \"a\";\n\n/**\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport interface LinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>,\n    LinkClassNameOptions {\n  /**\n   * All links **must** have a valid href.\n   */\n  href: string;\n\n  /**\n   * Set this to `true` if your link contains icons that should be centered and\n   * spaced with additional text. This is not used by default so that links can\n   * correctly line wrap while rendered within paragraphs of text.\n   *\n   * @defaultValue `false`\n   */\n  flex?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Link } from \"@react-md/core/link/Link\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Element(): ReactElement {\n *   return (\n *     <Typography>\n *       Here is a paragraph of text with a {\" \"}\n *       <Link href=\"/some-url\">link to some content</Link>.\n *     </Typography>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/link | Link Demos}\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(props, ref) {\n    const { className, flex, children, ...remaining } = props;\n\n    return (\n      <a {...remaining} ref={ref} className={link({ flex, className })}>\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["forwardRef","link","Link","props","ref","className","flex","children","remaining","a"],"mappings":";AAAA,SAGEA,UAAU,QACL,QAAQ;AAEf,SAAoCC,IAAI,QAAQ,cAAc;AAoC9D;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEpD,qBACE,KAACM;QAAG,GAAGD,SAAS;QAAEJ,KAAKA;QAAKC,WAAWJ,KAAK;YAAEK;YAAMD;QAAU;kBAC3DE;;AAGP,GACA"}
+{"version":3,"sources":["../../src/link/Link.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ForwardRefExoticComponent,\n  forwardRef,\n} from \"react\";\n\nimport { type LinkClassNameOptions, link } from \"./styles.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CustomLinkComponent =\n  | ForwardRefExoticComponent<{ href: string }>\n  | ForwardRefExoticComponent<{ to: string }>\n  | \"a\";\n\n/**\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport interface LinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement>, LinkClassNameOptions {\n  /**\n   * All links **must** have a valid href.\n   */\n  href: string;\n\n  /**\n   * Set this to `true` if your link contains icons that should be centered and\n   * spaced with additional text. This is not used by default so that links can\n   * correctly line wrap while rendered within paragraphs of text.\n   *\n   * @defaultValue `false`\n   */\n  flex?: boolean;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { Link } from \"@react-md/core/link/Link\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import type { ReactElement } from \"react\";\n *\n * function Element(): ReactElement {\n *   return (\n *     <Typography>\n *       Here is a paragraph of text with a {\" \"}\n *       <Link href=\"/some-url\">link to some content</Link>.\n *     </Typography>\n *   );\n * }\n * ```\n *\n *\n * @see {@link https://react-md.dev/components/link | Link Demos}\n * @since 6.0.0 Removed the `preventMaliciousTarget` prop since browsers\n * default to `rel=noopener` after updating the {@link https://github.com/whatwg/html/issues/4078|spec}.\n * @since 6.0.0 Removed the `component` prop since all you need for link\n * behavior is `className=\"rmd-link\"`.\n * @since 6.0.0 The `href` prop is required.\n * @since 6.0.0 Renamed `flexCentered` to `flex`.\n */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  function Link(props, ref) {\n    const { className, flex, children, ...remaining } = props;\n\n    return (\n      <a {...remaining} ref={ref} className={link({ flex, className })}>\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["forwardRef","link","Link","props","ref","className","flex","children","remaining","a"],"mappings":";AAAA,SAGEA,UAAU,QACL,QAAQ;AAEf,SAAoCC,IAAI,QAAQ,cAAc;AAmC9D;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEpD,qBACE,KAACM;QAAG,GAAGD,SAAS;QAAEJ,KAAKA;QAAKC,WAAWJ,KAAK;YAAEK;YAAMD;QAAU;kBAC3DE;;AAGP,GACA"}