@react-md/core 1.0.0-next.2 → 1.0.0-next.20

package/dist/transition/useCarousel.js.map

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

package/dist/transition/useCollapseTransition.d.ts

@@ -1,23 +1,11 @@
-import type { CSSProperties } from "react";
-import type { CSSTransitionElementProps, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions, TransitionTimeout, TransitionTimeoutObject } from "./types.js";
+import { type CSSProperties } from "react";
+import { type CSSTransitionElementProps, type CSSTransitionHookReturnValue, type PreconfiguredCSSTransitionOptions, type TransitionTimeout, type TransitionTimeoutObject } from "./types.js";
 /**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_HEIGHT = 0;
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_PADDING_TOP = 0;
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM = 0;
-/**
- * @remarks \@since 2.0.0
+ * @since 2.0.0
  */
 export declare const DEFAULT_COLLAPSE_TIMEOUT: Readonly<TransitionTimeoutObject>;
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseConfigurationStyle {
     /**
@@ -32,8 +20,7 @@ export interface CollapseConfigurationStyle {
      * are all set to `0` (default), the child will be removed from the DOM while
      * collapsed.
      *
-     * @see {@link DEFAULT_COLLAPSE_MIN_HEIGHT}
-     * @defaultValue `DEFAULT_COLLAPSE_MIN_HEIGHT`
+     * @defaultValue `0`
      */
     minHeight?: number | string;
     /**
@@ -45,8 +32,7 @@ export interface CollapseConfigurationStyle {
      * are all set to `0` (default), the child will be removed from the DOM while
      * collapsed.
      *
-     * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_TOP}
-     * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_TOP`
+     * @defaultValue `0`
      */
     minPaddingTop?: number | string;
     /**
@@ -58,13 +44,12 @@ export interface CollapseConfigurationStyle {
      * are all set to `0` (default), the child will be removed from the DOM while
      * collapsed.
      *
-     * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM}
-     * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM`
+     * @defaultValue `0`
      */
     minPaddingBottom?: number | string;
 }
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseStyle extends CollapseConfigurationStyle {
     /**
@@ -79,7 +64,7 @@ export interface CollapseStyle extends CollapseConfigurationStyle {
  *
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseElementProps<E extends HTMLElement> extends CSSTransitionElementProps<E> {
     /**
@@ -93,7 +78,7 @@ export interface CollapseElementProps<E extends HTMLElement> extends CSSTransiti
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseTransitionHookOptions<E extends HTMLElement> extends Omit<PreconfiguredCSSTransitionOptions<E>, "exitedHidden">, CollapseConfigurationStyle {
     /**
@@ -118,15 +103,14 @@ export interface CollapseTransitionHookOptions<E extends HTMLElement> extends Om
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extends CSSTransitionHookReturnValue<E>, CollapseElementProps<E> {
     /**
      * This is just a convenience object so that you don't need to destructure as
      * many variables to pass to an element.
      *
-     * @example
-     * Simple Usage
+     * @example Simple Usage
      * ```tsx
      * const { elementProps, rendered } = useCollapseTransition({
      *   // ...options
@@ -171,11 +155,12 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extend
  * `minHeight`, `minPaddingTop`, and `minPaddingBottom` options can make this
  * work like a "See More"/"Preview" type of element
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCollapseTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * function Example(): ReactElement {
  *   const [collapsed, setCollapsed] = useState(true);
@@ -203,12 +188,14 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extend
  * }
  * ```
  *
- * @example
- * See More Example
+ * @example See More Example
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, IconRotator, Typography, useCollapseTransition } from "@react-md/core";
- * import { KeyboardArrowDownSVGIcon } from "@react-md/material-icons";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { IconRotator } from "@react-md/core/icon/IconRotator";
+ * import KeyboardArrowDownIcon from "@react-md/material-icons/KeyboardArrowDownIcon"
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * import styles from "./Example.module.scss";
  * // pretend styles:
@@ -245,7 +232,7 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extend
  *         className={styles.button}
  *       >
  *         <IconRotator rotated={!collapsed}>
- *           <KeyboardArrowDownSVGIcon />
+ *           <KeyboardArrowDownIcon />
  *         </IconRotator>
  *       </Button>
  *       <SomeComponentWithALotOfContent />
@@ -256,6 +243,6 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement> extend
  *
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export declare function useCollapseTransition<E extends HTMLElement>(options: CollapseTransitionHookOptions<E>): CollapseTransitionHookReturnValue<E>;

package/dist/transition/useCollapseTransition.js

@@ -10,16 +10,7 @@ const noop = ()=>{
 // do nothing
 };
 /**
- * @remarks \@since 2.0.0
- */ export const DEFAULT_COLLAPSE_MIN_HEIGHT = 0;
-/**
- * @remarks \@since 2.0.0
- */ export const DEFAULT_COLLAPSE_MIN_PADDING_TOP = 0;
-/**
- * @remarks \@since 2.0.0
- */ export const DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM = 0;
-/**
- * @remarks \@since 2.0.0
+ * @since 2.0.0
  */ export const DEFAULT_COLLAPSE_TIMEOUT = {
     enter: 250,
     exit: 200
@@ -32,11 +23,12 @@ const noop = ()=>{
  * `minHeight`, `minPaddingTop`, and `minPaddingBottom` options can make this
  * work like a "See More"/"Preview" type of element
  *
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCollapseTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * function Example(): ReactElement {
  *   const [collapsed, setCollapsed] = useState(true);
@@ -64,12 +56,14 @@ const noop = ()=>{
  * }
  * ```
  *
- * @example
- * See More Example
+ * @example See More Example
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, IconRotator, Typography, useCollapseTransition } from "@react-md/core";
- * import { KeyboardArrowDownSVGIcon } from "@react-md/material-icons";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { IconRotator } from "@react-md/core/icon/IconRotator";
+ * import KeyboardArrowDownIcon from "@react-md/material-icons/KeyboardArrowDownIcon"
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * import styles from "./Example.module.scss";
  * // pretend styles:
@@ -106,7 +100,7 @@ const noop = ()=>{
  *         className={styles.button}
  *       >
  *         <IconRotator rotated={!collapsed}>
- *           <KeyboardArrowDownSVGIcon />
+ *           <KeyboardArrowDownIcon />
  *         </IconRotator>
  *       </Button>
  *       <SomeComponentWithALotOfContent />
@@ -117,9 +111,9 @@ const noop = ()=>{
  *
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */ export function useCollapseTransition(options) {
-    const { nodeRef: propNodeRef, style: propStyle, className, transitionIn, timeout = DEFAULT_COLLAPSE_TIMEOUT, minHeight = DEFAULT_COLLAPSE_MIN_HEIGHT, minPaddingTop = DEFAULT_COLLAPSE_MIN_PADDING_TOP, minPaddingBottom = DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM, temporary = minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0, appear = false, enter = true, exit = true, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop } = options;
+    const { nodeRef: propNodeRef, style: propStyle, className, transitionIn, timeout = DEFAULT_COLLAPSE_TIMEOUT, minHeight = 0, minPaddingTop = 0, minPaddingBottom = 0, temporary = minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0, appear = false, enter = true, exit = true, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop } = options;
     const [nodeRef, refCallback] = useEnsuredRef(propNodeRef);
     const [style, setStyle] = useState(()=>{
         if (transitionIn) {

package/dist/transition/useCollapseTransition.js.map

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

package/dist/transition/useCrossFadeTransition.d.ts

@@ -2,19 +2,19 @@ import type { CSSTransitionClassNames, CSSTransitionClassNamesObject, CSSTransit
 /**
  * The default cross fade transition classes to use.
  *
- * @remarks \@since 2.0.0
+ * @since 2.0.0
  */
 export declare const CROSS_FADE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject>;
 /**
  * The default cross fade transition timeout.
  *
- * @remarks \@since 2.0.0
+ * @since 2.0.0
  */
 export declare const CROSS_FADE_TIMEOUT: Readonly<TransitionTimeoutObject>;
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CrossFadeTransitionHookOptions<E extends HTMLElement> extends PreconfiguredCSSTransitionInDefaultedOptions<E> {
     /**
@@ -41,8 +41,7 @@ export interface CrossFadeTransitionHookOptions<E extends HTMLElement> extends P
  * distance. This is generally used for full page transitions when a route
  * changes.
  *
- * @example
- * New Page Transition with the Layout component
+ * @example New Page Transition with the Layout component
  * ```tsx
  * import { ReactElement, ReactNode, useLayoutEffect } from "react";
  * import { useLocation } from "react-router-dom":
@@ -82,6 +81,6 @@ export interface CrossFadeTransitionHookOptions<E extends HTMLElement> extends P
  *
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export declare function useCrossFadeTransition<E extends HTMLElement>(options?: CrossFadeTransitionHookOptions<E>): CSSTransitionHookReturnValue<E>;

package/dist/transition/useCrossFadeTransition.js

@@ -3,7 +3,7 @@ import { useCSSTransition } from "./useCSSTransition.js";
 /**
  * The default cross fade transition classes to use.
  *
- * @remarks \@since 2.0.0
+ * @since 2.0.0
  */ export const CROSS_FADE_CLASSNAMES = {
     appear: "rmd-cross-fade",
     appearActive: "rmd-cross-fade--active",
@@ -13,7 +13,7 @@ import { useCSSTransition } from "./useCSSTransition.js";
 /**
  * The default cross fade transition timeout.
  *
- * @remarks \@since 2.0.0
+ * @since 2.0.0
  */ export const CROSS_FADE_TIMEOUT = {
     appear: 300,
     enter: 300,
@@ -25,8 +25,7 @@ import { useCSSTransition } from "./useCSSTransition.js";
  * distance. This is generally used for full page transitions when a route
  * changes.
  *
- * @example
- * New Page Transition with the Layout component
+ * @example New Page Transition with the Layout component
  * ```tsx
  * import { ReactElement, ReactNode, useLayoutEffect } from "react";
  * import { useLocation } from "react-router-dom":
@@ -66,11 +65,12 @@ import { useCSSTransition } from "./useCSSTransition.js";
  *
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */ export function useCrossFadeTransition(options = {}) {
-    const { transitionIn = true, timeout = CROSS_FADE_TIMEOUT, classNames = CROSS_FADE_CLASSNAMES, ...cssOptions } = options;
+    const { appear = false, transitionIn = true, timeout = CROSS_FADE_TIMEOUT, classNames = CROSS_FADE_CLASSNAMES, ...cssOptions } = options;
     return useCSSTransition({
         ...cssOptions,
+        appear,
         timeout,
         classNames,
         transitionIn

package/dist/transition/useCrossFadeTransition.js.map

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

package/dist/transition/useMaxWidthTransition.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface MaxWidthTransitionOptions {
     element: ReactNode;
@@ -10,6 +10,15 @@ export interface MaxWidthTransitionOptions {
     disableTransition?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * The `useMaxWidthTransition` hook is used to animate the `max-width` using
+ * the {@link maxWidthTransition} utility classes.
+ *
+ * NOTE: This hook clones the className into the child element using the
+ * `cloneElement` API. The child **must** accept and pass the `className` forward
+ * to work correctly.
+ *
+ * @see {@link maxWidthTransition}
+ *
+ * @since 6.0.0
  */
 export declare function useMaxWidthTransition(options: MaxWidthTransitionOptions): ReactNode;

package/dist/transition/useMaxWidthTransition.js

@@ -3,7 +3,16 @@ import { cnb } from "cnbuilder";
 import { Children, cloneElement, isValidElement } from "react";
 import { maxWidthTransition } from "./maxWidthTransition.js";
 /**
- * @remarks \@since 6.0.0
+ * The `useMaxWidthTransition` hook is used to animate the `max-width` using
+ * the {@link maxWidthTransition} utility classes.
+ *
+ * NOTE: This hook clones the className into the child element using the
+ * `cloneElement` API. The child **must** accept and pass the `className` forward
+ * to work correctly.
+ *
+ * @see {@link maxWidthTransition}
+ *
+ * @since 6.0.0
  */ export function useMaxWidthTransition(options) {
     const { element, disabled, disableTransition, transitionIn, className } = options;
     if (disabled || !isValidElement(element)) {

package/dist/transition/useMaxWidthTransition.js.map

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

package/dist/transition/useScaleTransition.d.ts

@@ -1,34 +1,51 @@
-import type { CSSTransitionClassNames, CSSTransitionClassNamesObject, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions, TransitionTimeoutObject } from "./types.js";
+import type { CSSTransitionClassNames, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions } from "./types.js";
 /**
  * The default {@link CSSTransitionClassNames} for a horizontal scale
  * transition.
  *
- * @remarks
- * \@since 2.0.0
- * \@since 6.0.0 The class names were updated to be prefixed with
+ * @since 2.0.0
+ * @since 6.0.0 The class names were updated to be prefixed with
  * `rmd-scale-transition`
  */
-export declare const SCALE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject>;
+export declare const SCALE_CLASSNAMES: {
+    readonly appear: "rmd-scale-transition--enter";
+    readonly appearActive: "rmd-scale-transition--enter-active";
+    readonly enter: "rmd-scale-transition--enter";
+    readonly enterActive: "rmd-scale-transition--enter-active";
+    readonly enterDone: "";
+    readonly exit: "rmd-scale-transition--exit";
+    readonly exitActive: "rmd-scale-transition--exit-active";
+};
 /**
  * The default {@link CSSTransitionClassNames} for a vertical scale transition.
  *
- * @remarks
- * \@since 2.0.0
- * \@since 6.0.0 The class names were updated to be prefixed with
+ * @since 2.0.0
+ * @since 6.0.0 The class names were updated to be prefixed with
  * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}
  */
-export declare const SCALE_Y_CLASSNAMES: Readonly<CSSTransitionClassNamesObject>;
+export declare const SCALE_Y_CLASSNAMES: {
+    readonly appear: "rmd-scale-transition--enter rmd-scale-transition--y-enter";
+    readonly appearActive: "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active";
+    readonly enter: "rmd-scale-transition--enter rmd-scale-transition--y-enter";
+    readonly enterActive: "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active";
+    readonly enterDone: "";
+    readonly exit: "rmd-scale-transition--exit rmd-scale-transition--y-exit";
+    readonly exitActive: "rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active";
+};
 /**
  * The default {@link TransitionTimeout} to use for horizontal and vertical
  * scale transitions.
  *
- * @remarks \@since 2.0.0
+ * @since 2.0.0
  */
-export declare const SCALE_TIMEOUT: Readonly<TransitionTimeoutObject>;
+export declare const SCALE_TIMEOUT: {
+    readonly enter: 200;
+    readonly exit: 150;
+};
 /**
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface ScaleTransitionHookOptions<E extends HTMLElement> extends PreconfiguredCSSTransitionOptions<E> {
     /**
@@ -55,11 +72,12 @@ export interface ScaleTransitionHookOptions<E extends HTMLElement> extends Preco
  * Implements a scale transition that should generally be used for temporary
  * elements that are positioned via `position: absolute` or `position: fixed`.
  *
- * @example
- * Dropdown Menu Example
+ * @example Dropdown Menu Example
  * ```tsx
- * import { ReactElement, useRef, useState } from "react";
- * import { Button, useFixedPositioning, useScaleTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useFixedPositioning } from "@react-md/core/positioning/useFixedPositioning";
+ * import { useScaleTransition } from "@react-md/core/transition/useScaleTransition";
+ * import { type ReactElement, useRef, useState } from "react";
  *
  * function Example(): ReactElement {
  *   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -90,6 +108,6 @@ export interface ScaleTransitionHookOptions<E extends HTMLElement> extends Preco
  *
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export declare function useScaleTransition<E extends HTMLElement>(options: ScaleTransitionHookOptions<E>): CSSTransitionHookReturnValue<E>;