@react-md/core 1.0.0-next.14 → 1.0.0-next.16

package/dist/transition/collapseStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/collapseStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-collapse\");\n\n/**\n * @since 6.0.0\n */\nexport interface CollapseClassNameOptions {\n  className?: string;\n  enter?: boolean;\n  leave?: boolean;\n  exited?: boolean;\n  disableOverflow?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function collapse(options: CollapseClassNameOptions = {}): string {\n  const { enter, leave, exited, disableOverflow, className } = options;\n\n  return cnb(\n    styles({\n      enter,\n      leave,\n      \"no-overflow\": disableOverflow,\n    }),\n    exited && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","collapse","options","enter","leave","exited","disableOverflow","className"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AAanB;;CAEC,GACD,OAAO,SAASG,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,MAAM,EAAEC,eAAe,EAAEC,SAAS,EAAE,GAAGL;IAE7D,OAAOL,IACLG,OAAO;QACLG;QACAC;QACA,eAAeE;IACjB,IACAD,UAAUN,oBACVQ;AAEJ"}
+{"version":3,"sources":["../../src/transition/collapseStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-collapse\");\n\n/**\n * @since 6.0.0\n */\nexport interface CollapseClassNameOptions {\n  className?: string;\n  enter?: boolean;\n  leave?: boolean;\n  exited?: boolean;\n  disableOverflow?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function collapse(options: CollapseClassNameOptions = {}): string {\n  const { enter, leave, exited, disableOverflow, className } = options;\n\n  return cnb(\n    styles({\n      enter,\n      leave,\n      \"no-overflow\": disableOverflow,\n    }),\n    exited && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","collapse","options","enter","leave","exited","disableOverflow","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AAanB;;CAEC,GACD,OAAO,SAASG,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,MAAM,EAAEC,eAAe,EAAEC,SAAS,EAAE,GAAGL;IAE7D,OAAOL,IACLG,OAAO;QACLG;QACAC;QACA,eAAeE;IACjB,IACAD,UAAUN,oBACVQ;AAEJ"}

package/dist/transition/config.js.map

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

package/dist/transition/maxWidthTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/maxWidthTransition.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-max-width-transition\");\n\nexport interface MaxWidthTransitionClassNameOptions {\n  className?: string;\n\n  disabled?: boolean;\n  transitionIn: boolean;\n}\n\nexport function maxWidthTransition(\n  options: MaxWidthTransitionClassNameOptions\n): string {\n  const { disabled, className, transitionIn } = options;\n\n  return cnb(\n    !disabled && styles({ visible: transitionIn }),\n    disabled && !transitionIn && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","maxWidthTransition","options","disabled","className","transitionIn","visible"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AASnB,OAAO,SAASG,mBACdC,OAA2C;IAE3C,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGH;IAE9C,OAAOL,IACL,CAACM,YAAYH,OAAO;QAAEM,SAASD;IAAa,IAC5CF,YAAY,CAACE,gBAAgBN,oBAC7BK;AAEJ"}
+{"version":3,"sources":["../../src/transition/maxWidthTransition.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\n\nconst styles = bem(\"rmd-max-width-transition\");\n\nexport interface MaxWidthTransitionClassNameOptions {\n  className?: string;\n\n  disabled?: boolean;\n  transitionIn: boolean;\n}\n\nexport function maxWidthTransition(\n  options: MaxWidthTransitionClassNameOptions\n): string {\n  const { disabled, className, transitionIn } = options;\n\n  return cnb(\n    !disabled && styles({ visible: transitionIn }),\n    disabled && !transitionIn && DISPLAY_NONE_CLASS,\n    className\n  );\n}\n"],"names":["cnb","bem","DISPLAY_NONE_CLASS","styles","maxWidthTransition","options","disabled","className","transitionIn","visible"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,kBAAkB,QAAQ,+BAA+B;AAElE,MAAMC,SAASF,IAAI;AASnB,OAAO,SAASG,mBACdC,OAA2C;IAE3C,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGH;IAE9C,OAAOL,IACL,CAACM,YAAYH,OAAO;QAAEM,SAASD;IAAa,IAC5CF,YAAY,CAACE,gBAAgBN,oBAC7BK;AAEJ"}

package/dist/transition/skeletonPlaceholderUtils.js.map

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

package/dist/transition/types.d.ts

@@ -315,12 +315,28 @@ export interface PreconfiguredCSSTransitionOptions<E extends HTMLElement> extend
     /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */
     transitionIn: boolean;
 }
+/**
+ * @since 6.0.0
+ */
+export interface SSRTransitionOptions {
+    /**
+     * This is mostly used internally to make it so that you can render portalled
+     * elements inline with content if SSR is enabled in your app. To enable this
+     * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.
+     *
+     * This value will be `true` if a portalled element was rendered by default
+     * from the server and remain true until it unmounts from the DOM.
+     *
+     * @defaultValue `false`
+     */
+    disablePortal?: boolean;
+}
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  * @since 4.0.0
  */
-export interface TransitionHookOptions<E extends HTMLElement> extends TransitionOptions<E> {
+export interface TransitionHookOptions<E extends HTMLElement> extends TransitionOptions<E>, SSRTransitionOptions {
     /**
      * Boolean if the DOM should forcefully be reflow each time a transition
      * change occurs. This is generally required for any CSS transition and is
@@ -329,11 +345,6 @@ export interface TransitionHookOptions<E extends HTMLElement> extends Transition
      * @defaultValue `false`
      */
     reflow?: boolean;
-    /**
-     * @since 6.0.0
-     * @defaultValue `false`
-     */
-    disablePortal?: boolean;
 }
 /**
  * @since 4.0.0
@@ -360,7 +371,7 @@ export interface TransitionState {
  * transition.
  * @since 4.0.0
  */
-export interface TransitionHookReturnValue<E extends HTMLElement> extends TransitionState {
+export interface TransitionHookReturnValue<E extends HTMLElement> extends TransitionState, Required<SSRTransitionOptions> {
     /**
      * A ref that is required for the transition to occur and should be passed to
      * the element affected by the transition.
@@ -403,33 +414,17 @@ export interface TransitionHookReturnValue<E extends HTMLElement> extends Transi
      * @param stage - The {@link TransitionStage} to set to
      */
     transitionTo(stage: TransitionStage): void;
-    /**
-     * This is mostly used internally to make it so that you can render portalled
-     * elements inline with content if SSR is enabled in your app. To enable this
-     * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.
-     *
-     * This value will be `true` if a portalled element was rendered by default
-     * from the server and remain true until it unmounts from the DOM.
-     *
-     * @defaultValue `false`
-     * @since 6.0.0
-     */
-    disablePortal: boolean;
 }
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  * @since 4.0.0
  */
-export interface CSSTransitionHookOptions<E extends HTMLElement> extends PreconfiguredCSSTransitionOptions<E> {
+export interface CSSTransitionHookOptions<E extends HTMLElement> extends PreconfiguredCSSTransitionOptions<E>, SSRTransitionOptions {
     /** {@inheritDoc TransitionTimeout} */
     timeout: TransitionTimeout;
     /** {@inheritDoc CSSTransitionClassNames} */
     classNames: CSSTransitionClassNames;
-    /**
-     * @since 6.0.0
-     */
-    disablePortal?: boolean;
 }
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the

package/dist/transition/types.js.map

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

package/dist/transition/useCSSTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useCSSTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport type {\n  CSSTransitionElementProps,\n  CSSTransitionHookOptions,\n  CSSTransitionHookReturnValue,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  TransitionHookOptions,\n} from \"./types.js\";\nimport { useTransition } from \"./useTransition.js\";\nimport { getTransitionClassNames } from \"./utils.js\";\n\n/**\n * This hook is used to create CSS transitions for different components whenever\n * a {@link TransitionHookOptions.transitionIn} flag is changed.\n *\n * @example Simple Transition\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, Typography, useCSSTransition } from \"@react-md/core\";\n *\n * // Pretend styles\n * // .enter {\n * //   opacity: 0.5;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .enter--active {\n * //   opacity: 1;\n * // }\n * //\n * // .exit {\n * //   opacity: 1;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .exit--active {\n * //   opacity: 0.5;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { elementProps } = useCSSTransition({\n *     timeout: 150,\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *     transitionIn,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <Typography {...elementProps}>\n *         Some Opacity Changing Text\n *       </Typography>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Visibility Transition\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, Typography, useCSSTransition } from \"@react-md/core\";\n *\n * // Pretend styles\n * // .enter {\n * //   opacity: 0;\n * //   transition: opacity .2s;\n * // }\n * //\n * // .enter--active {\n * //   opacity: 1;\n * // }\n * //\n * // .exit {\n * //   opacity: 1;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .exit--active {\n * //   opacity: 0;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { elementProps, rendered } = useCSSTransition({\n *     timeout: {\n *       enter: 200,\n *       exit: 150,\n *     },\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *     transitionIn,\n *     temporary: true,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <Typography {...elementProps}>\n *           Some Opacity Changing Text\n *         </Typography>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @example Mount Transition\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n *\n * // Pretend styles\n * // .opacity {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n * //\n * // .opacity--active {\n * //   opacity: 1;\n * // }\n * //\n *\n * function Example(): ReactElement {\n *   const { elementProps } = useCSSTransition({\n *     appear: true,\n *     transitionIn: true,\n *     timeout: 300,\n *     classNames: \"opacity\",\n *   })\n *\n *   return <div {...elementProps}>Some Content!</div>;\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 useCSSTransition<E extends HTMLElement>(\n  options: CSSTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    className,\n    classNames,\n    appear = false,\n    enter = true,\n    exit = true,\n    timeout,\n    temporary = false,\n    exitedHidden = false,\n    ...transitionOptions\n  } = options;\n\n  const { ref, stage, rendered, appearing, transitionTo, disablePortal } =\n    useTransition({\n      ...transitionOptions,\n      appear,\n      enter,\n      exit,\n      timeout,\n      reflow: true,\n      temporary,\n    });\n  const isEntering = stage === \"entering\";\n  const isEnter = isEntering || stage === \"enter\";\n  const isEntered = stage === \"entered\";\n  const isExiting = stage === \"exiting\";\n  const isExit = isExiting || stage === \"exit\";\n  const isExited = stage === \"exited\";\n  const transitionClassNames = getTransitionClassNames({\n    timeout,\n    appear,\n    enter,\n    exit,\n    classNames,\n  });\n\n  const elementProps: CSSTransitionElementProps<E> = {\n    ref,\n    className:\n      cnb(\n        // always apply the provided className first since it makes snapshot\n        // tests easier to parse if dynamic classes come afterwards\n        className,\n        !temporary && exitedHidden && stage === \"exited\" && DISPLAY_NONE_CLASS,\n        appearing && isEnter && transitionClassNames.appear,\n        appearing && isEntering && transitionClassNames.appearActive,\n        appearing && isEntered && transitionClassNames.appearDone,\n        !appearing && isEnter && transitionClassNames.enter,\n        !appearing && isEntering && transitionClassNames.enterActive,\n        !appearing && isEntered && transitionClassNames.enterDone,\n        isExit && transitionClassNames.exit,\n        isExiting && transitionClassNames.exitActive,\n        isExited && transitionClassNames.exitDone\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","DISPLAY_NONE_CLASS","useTransition","getTransitionClassNames","useCSSTransition","options","className","classNames","appear","enter","exit","timeout","temporary","exitedHidden","transitionOptions","ref","stage","rendered","appearing","transitionTo","disablePortal","reflow","isEntering","isEnter","isEntered","isExiting","isExit","isExited","transitionClassNames","elementProps","appearActive","appearDone","enterActive","enterDone","exitActive","exitDone","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,kBAAkB,QAAQ,+BAA+B;AAQlE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,uBAAuB,QAAQ,aAAa;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6IC,GACD,OAAO,SAASC,iBACdC,OAAoC;IAEpC,MAAM,EACJC,SAAS,EACTC,UAAU,EACVC,SAAS,KAAK,EACdC,QAAQ,IAAI,EACZC,OAAO,IAAI,EACXC,OAAO,EACPC,YAAY,KAAK,EACjBC,eAAe,KAAK,EACpB,GAAGC,mBACJ,GAAGT;IAEJ,MAAM,EAAEU,GAAG,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa,EAAE,GACpElB,cAAc;QACZ,GAAGY,iBAAiB;QACpBN;QACAC;QACAC;QACAC;QACAU,QAAQ;QACRT;IACF;IACF,MAAMU,aAAaN,UAAU;IAC7B,MAAMO,UAAUD,cAAcN,UAAU;IACxC,MAAMQ,YAAYR,UAAU;IAC5B,MAAMS,YAAYT,UAAU;IAC5B,MAAMU,SAASD,aAAaT,UAAU;IACtC,MAAMW,WAAWX,UAAU;IAC3B,MAAMY,uBAAuBzB,wBAAwB;QACnDQ;QACAH;QACAC;QACAC;QACAH;IACF;IAEA,MAAMsB,eAA6C;QACjDd;QACAT,WACEN,IACE,oEAAoE;QACpE,2DAA2D;QAC3DM,WACA,CAACM,aAAaC,gBAAgBG,UAAU,YAAYf,oBACpDiB,aAAaK,WAAWK,qBAAqBpB,MAAM,EACnDU,aAAaI,cAAcM,qBAAqBE,YAAY,EAC5DZ,aAAaM,aAAaI,qBAAqBG,UAAU,EACzD,CAACb,aAAaK,WAAWK,qBAAqBnB,KAAK,EACnD,CAACS,aAAaI,cAAcM,qBAAqBI,WAAW,EAC5D,CAACd,aAAaM,aAAaI,qBAAqBK,SAAS,EACzDP,UAAUE,qBAAqBlB,IAAI,EACnCe,aAAaG,qBAAqBM,UAAU,EAC5CP,YAAYC,qBAAqBO,QAAQ,KACtCC;IACT;IAEA,OAAO;QACL,GAAGP,YAAY;QACfb;QACAC;QACAC;QACAW;QACAV;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useCSSTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport type {\n  CSSTransitionElementProps,\n  CSSTransitionHookOptions,\n  CSSTransitionHookReturnValue,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  TransitionHookOptions,\n} from \"./types.js\";\nimport { useTransition } from \"./useTransition.js\";\nimport { getTransitionClassNames } from \"./utils.js\";\n\n/**\n * This hook is used to create CSS transitions for different components whenever\n * a {@link TransitionHookOptions.transitionIn} flag is changed.\n *\n * @example Simple Transition\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, Typography, useCSSTransition } from \"@react-md/core\";\n *\n * // Pretend styles\n * // .enter {\n * //   opacity: 0.5;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .enter--active {\n * //   opacity: 1;\n * // }\n * //\n * // .exit {\n * //   opacity: 1;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .exit--active {\n * //   opacity: 0.5;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { elementProps } = useCSSTransition({\n *     timeout: 150,\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *     transitionIn,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       <Typography {...elementProps}>\n *         Some Opacity Changing Text\n *       </Typography>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Visibility Transition\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, Typography, useCSSTransition } from \"@react-md/core\";\n *\n * // Pretend styles\n * // .enter {\n * //   opacity: 0;\n * //   transition: opacity .2s;\n * // }\n * //\n * // .enter--active {\n * //   opacity: 1;\n * // }\n * //\n * // .exit {\n * //   opacity: 1;\n * //   transition: opacity .15s;\n * // }\n * //\n * // .exit--active {\n * //   opacity: 0;\n * // }\n *\n * function Example(): ReactElement {\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { elementProps, rendered } = useCSSTransition({\n *     timeout: {\n *       enter: 200,\n *       exit: 150,\n *     },\n *     classNames: {\n *       enter: \"enter\",\n *       enterActive: \"enter--active\",\n *       exit: \"exit\",\n *       exitActive: \"exit--active\",\n *     },\n *     transitionIn,\n *     temporary: true,\n *   });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <Typography {...elementProps}>\n *           Some Opacity Changing Text\n *         </Typography>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @example Mount Transition\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { useCSSTransition } from \"@react-md/transition\";\n *\n * // Pretend styles\n * // .opacity {\n * //   opacity: 0;\n * //   transition: opacity .3s;\n * // }\n * //\n * // .opacity--active {\n * //   opacity: 1;\n * // }\n * //\n *\n * function Example(): ReactElement {\n *   const { elementProps } = useCSSTransition({\n *     appear: true,\n *     transitionIn: true,\n *     timeout: 300,\n *     classNames: \"opacity\",\n *   })\n *\n *   return <div {...elementProps}>Some Content!</div>;\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 useCSSTransition<E extends HTMLElement>(\n  options: CSSTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    className,\n    classNames,\n    appear = false,\n    enter = true,\n    exit = true,\n    timeout,\n    temporary = false,\n    exitedHidden = false,\n    ...transitionOptions\n  } = options;\n\n  const { ref, stage, rendered, appearing, transitionTo, disablePortal } =\n    useTransition({\n      ...transitionOptions,\n      appear,\n      enter,\n      exit,\n      timeout,\n      reflow: true,\n      temporary,\n    });\n  const isEntering = stage === \"entering\";\n  const isEnter = isEntering || stage === \"enter\";\n  const isEntered = stage === \"entered\";\n  const isExiting = stage === \"exiting\";\n  const isExit = isExiting || stage === \"exit\";\n  const isExited = stage === \"exited\";\n  const transitionClassNames = getTransitionClassNames({\n    timeout,\n    appear,\n    enter,\n    exit,\n    classNames,\n  });\n\n  const elementProps: CSSTransitionElementProps<E> = {\n    ref,\n    className:\n      cnb(\n        // always apply the provided className first since it makes snapshot\n        // tests easier to parse if dynamic classes come afterwards\n        className,\n        !temporary && exitedHidden && stage === \"exited\" && DISPLAY_NONE_CLASS,\n        appearing && isEnter && transitionClassNames.appear,\n        appearing && isEntering && transitionClassNames.appearActive,\n        appearing && isEntered && transitionClassNames.appearDone,\n        !appearing && isEnter && transitionClassNames.enter,\n        !appearing && isEntering && transitionClassNames.enterActive,\n        !appearing && isEntered && transitionClassNames.enterDone,\n        isExit && transitionClassNames.exit,\n        isExiting && transitionClassNames.exitActive,\n        isExited && transitionClassNames.exitDone\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","DISPLAY_NONE_CLASS","useTransition","getTransitionClassNames","useCSSTransition","options","className","classNames","appear","enter","exit","timeout","temporary","exitedHidden","transitionOptions","ref","stage","rendered","appearing","transitionTo","disablePortal","reflow","isEntering","isEnter","isEntered","isExiting","isExit","isExited","transitionClassNames","elementProps","appearActive","appearDone","enterActive","enterDone","exitActive","exitDone","undefined"],"mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,kBAAkB,QAAQ,+BAA+B;AAQlE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,uBAAuB,QAAQ,aAAa;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6IC,GACD,OAAO,SAASC,iBACdC,OAAoC;IAEpC,MAAM,EACJC,SAAS,EACTC,UAAU,EACVC,SAAS,KAAK,EACdC,QAAQ,IAAI,EACZC,OAAO,IAAI,EACXC,OAAO,EACPC,YAAY,KAAK,EACjBC,eAAe,KAAK,EACpB,GAAGC,mBACJ,GAAGT;IAEJ,MAAM,EAAEU,GAAG,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa,EAAE,GACpElB,cAAc;QACZ,GAAGY,iBAAiB;QACpBN;QACAC;QACAC;QACAC;QACAU,QAAQ;QACRT;IACF;IACF,MAAMU,aAAaN,UAAU;IAC7B,MAAMO,UAAUD,cAAcN,UAAU;IACxC,MAAMQ,YAAYR,UAAU;IAC5B,MAAMS,YAAYT,UAAU;IAC5B,MAAMU,SAASD,aAAaT,UAAU;IACtC,MAAMW,WAAWX,UAAU;IAC3B,MAAMY,uBAAuBzB,wBAAwB;QACnDQ;QACAH;QACAC;QACAC;QACAH;IACF;IAEA,MAAMsB,eAA6C;QACjDd;QACAT,WACEN,IACE,oEAAoE;QACpE,2DAA2D;QAC3DM,WACA,CAACM,aAAaC,gBAAgBG,UAAU,YAAYf,oBACpDiB,aAAaK,WAAWK,qBAAqBpB,MAAM,EACnDU,aAAaI,cAAcM,qBAAqBE,YAAY,EAC5DZ,aAAaM,aAAaI,qBAAqBG,UAAU,EACzD,CAACb,aAAaK,WAAWK,qBAAqBnB,KAAK,EACnD,CAACS,aAAaI,cAAcM,qBAAqBI,WAAW,EAC5D,CAACd,aAAaM,aAAaI,qBAAqBK,SAAS,EACzDP,UAAUE,qBAAqBlB,IAAI,EACnCe,aAAaG,qBAAqBM,UAAU,EAC5CP,YAAYC,qBAAqBO,QAAQ,KACtCC;IACT;IAEA,OAAO;QACL,GAAGP,YAAY;QACfb;QACAC;QACAC;QACAW;QACAV;QACAC;IACF;AACF"}

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/** @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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEzD,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"}
+{"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/** @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;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEzD,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.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 * @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 { 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 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 * @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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,QAAQ,QAAQ,sBAAsB;AAQ/C,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,gBAAgB,EAAEC,oBAAoB,QAAQ,aAAa;AAEpE,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,OAAO,MAAMC,2BAA8D;IACzEC,OAAO;IACPC,MAAM;AACR,EAAE;AA+JF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FC,GACD,OAAO,SAASC,sBACdC,OAAyC;IAEzC,MAAM,EACJC,SAASC,WAAW,EACpBC,OAAOC,SAAS,EAChBC,SAAS,EACTC,YAAY,EACZC,UAAUX,wBAAwB,EAClCY,YAAY,CAAC,EACbC,gBAAgB,CAAC,EACjBC,mBAAmB,CAAC,EACpBC,YAAYH,cAAc,KACxBC,kBAAkB,KAClBC,qBAAqB,CAAC,EACxBE,SAAS,KAAK,EACdf,QAAQ,IAAI,EACZC,OAAO,IAAI,EACXe,UAAUlB,IAAI,EACdmB,aAAanB,IAAI,EACjBoB,YAAYpB,IAAI,EAChBqB,SAASrB,IAAI,EACbsB,YAAYtB,IAAI,EAChBuB,WAAWvB,IAAI,EAChB,GAAGK;IAEJ,MAAM,CAACC,SAASkB,YAAY,GAAG9B,cAAca;IAC7C,MAAM,CAACC,OAAOiB,SAAS,GAAGhC,SAAoC;QAC5D,IAAIkB,cAAc;YAChB,OAAOe;QACT;QAEA,OAAO;YACLC,WAAWd;YACXe,YAAYd;YACZe,eAAed;QACjB;IACF;IAEA,MAAMe,oBAAoB/B,qBAAqB;QAC7Ca;QACAK;QACAf;QACAC;IACF;IAEA,MAAM,EAAE4B,SAAS,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,EAAEC,YAAY,EAAEC,aAAa,EAAE,GACpEvC,cAAc;QACZS,SAASkB;QACTZ;QACAD;QACA0B,QAAQ;QACRpB;QACAf;QACAC;QACAa;QACAE,SAAQa,SAAS;YACfb,QAAQa;YACRN,SAAS;gBACPE,WAAWd;gBACXe,YAAYd;gBACZe,eAAed;YACjB;QACF;QACAI,YAAWY,SAAS;YAClBZ,WAAWY;YACX,MAAM,EAAEJ,SAAS,EAAEC,UAAU,EAAEC,aAAa,EAAE,GAAG/B,iBAC/CQ,QAAQgC,OAAO;YAGjB,MAAMC,WAAWR,YACbD,kBAAkBb,MAAM,GACxBa,kBAAkB5B,KAAK;YAE3BuB,SAAS;gBACPE;gBACAC;gBACAC;gBACAW,oBAAoB,CAAC,EAAED,SAAS,EAAE,CAAC;YACrC;QACF;QACAnB,WAAUW,SAAS;YACjBX,UAAUW;YACVN,SAASC;QACX;QACAL;YACEA;YACA,MAAM,EAAEM,SAAS,EAAEC,UAAU,EAAEC,aAAa,EAAE,GAAG/B,iBAC/CQ,QAAQgC,OAAO;YAGjBb,SAAS;gBACPE;gBACAC;gBACAC;gBACAW,oBAAoB,CAAC,EAAEV,kBAAkB3B,IAAI,CAAC,EAAE,CAAC;YACnD;QACF;QACAmB;YACEA;YACAG,SAAS;gBACPE,WAAWd;gBACXe,YAAYd;gBACZe,eAAed;gBACfyB,oBAAoB,CAAC,EAAEV,kBAAkB3B,IAAI,CAAC,EAAE,CAAC;YACnD;QACF;QACAoB;YACEA;YACAE,SAAS;gBACPE,WAAWd;gBACXe,YAAYd;gBACZe,eAAed;YACjB;QACF;IACF;IACF,MAAM0B,WAAWP,UAAU,WAAWA,UAAU;IAChD,MAAMQ,UAAUR,UAAU,UAAUA,UAAU;IAC9C,MAAMS,cACJb,kBAAkB5B,KAAK,KAAK,KAAK4B,kBAAkB3B,IAAI,KAAK;IAE9D,MAAMyC,eAAwC;QAC5CX;QACAzB,OAAO;YAAE,GAAGA,KAAK;YAAE,GAAGC,SAAS;QAAC;QAChCC,WACElB,IACEkB,WACAiC,eACE/C,SAAS;YACPM,OAAOuC;YACPI,OAAOH;YACPI,iBAAiB,CAACnC,gBAAgB,CAAC,CAACH;QACtC,IACF0B,UAAU,YACRrB,cAAc,KACdC,kBAAkB,KAClBC,qBAAqB,KACrBpB,uBACC+B;IACT;IAEA,OAAO;QACL,GAAGkB,YAAY;QACfV;QACAF;QACAD;QACAa;QACAT;QACAC;IACF;AACF"}
+{"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 * @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 { 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 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 * @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":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,QAAQ,QAAQ,sBAAsB;AAQ/C,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,gBAAgB,EAAEC,oBAAoB,QAAQ,aAAa;AAEpE,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;CAEC,GACD,OAAO,MAAMC,2BAA8D;IACzEC,OAAO;IACPC,MAAM;AACR,EAAE;AA+JF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FC,GACD,OAAO,SAASC,sBACdC,OAAyC;IAEzC,MAAM,EACJC,SAASC,WAAW,EACpBC,OAAOC,SAAS,EAChBC,SAAS,EACTC,YAAY,EACZC,UAAUX,wBAAwB,EAClCY,YAAY,CAAC,EACbC,gBAAgB,CAAC,EACjBC,mBAAmB,CAAC,EACpBC,YAAYH,cAAc,KACxBC,kBAAkB,KAClBC,qBAAqB,CAAC,EACxBE,SAAS,KAAK,EACdf,QAAQ,IAAI,EACZC,OAAO,IAAI,EACXe,UAAUlB,IAAI,EACdmB,aAAanB,IAAI,EACjBoB,YAAYpB,IAAI,EAChBqB,SAASrB,IAAI,EACbsB,YAAYtB,IAAI,EAChBuB,WAAWvB,IAAI,EAChB,GAAGK;IAEJ,MAAM,CAACC,SAASkB,YAAY,GAAG9B,cAAca;IAC7C,MAAM,CAACC,OAAOiB,SAAS,GAAGhC,SAAoC;QAC5D,IAAIkB,cAAc;YAChB,OAAOe;QACT;QAEA,OAAO;YACLC,WAAWd;YACXe,YAAYd;YACZe,eAAed;QACjB;IACF;IAEA,MAAMe,oBAAoB/B,qBAAqB;QAC7Ca;QACAK;QACAf;QACAC;IACF;IAEA,MAAM,EAAE4B,SAAS,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,EAAEC,YAAY,EAAEC,aAAa,EAAE,GACpEvC,cAAc;QACZS,SAASkB;QACTZ;QACAD;QACA0B,QAAQ;QACRpB;QACAf;QACAC;QACAa;QACAE,SAAQa,SAAS;YACfb,QAAQa;YACRN,SAAS;gBACPE,WAAWd;gBACXe,YAAYd;gBACZe,eAAed;YACjB;QACF;QACAI,YAAWY,SAAS;YAClBZ,WAAWY;YACX,MAAM,EAAEJ,SAAS,EAAEC,UAAU,EAAEC,aAAa,EAAE,GAAG/B,iBAC/CQ,QAAQgC,OAAO;YAGjB,MAAMC,WAAWR,YACbD,kBAAkBb,MAAM,GACxBa,kBAAkB5B,KAAK;YAE3BuB,SAAS;gBACPE;gBACAC;gBACAC;gBACAW,oBAAoB,CAAC,EAAED,SAAS,EAAE,CAAC;YACrC;QACF;QACAnB,WAAUW,SAAS;YACjBX,UAAUW;YACVN,SAASC;QACX;QACAL;YACEA;YACA,MAAM,EAAEM,SAAS,EAAEC,UAAU,EAAEC,aAAa,EAAE,GAAG/B,iBAC/CQ,QAAQgC,OAAO;YAGjBb,SAAS;gBACPE;gBACAC;gBACAC;gBACAW,oBAAoB,CAAC,EAAEV,kBAAkB3B,IAAI,CAAC,EAAE,CAAC;YACnD;QACF;QACAmB;YACEA;YACAG,SAAS;gBACPE,WAAWd;gBACXe,YAAYd;gBACZe,eAAed;gBACfyB,oBAAoB,CAAC,EAAEV,kBAAkB3B,IAAI,CAAC,EAAE,CAAC;YACnD;QACF;QACAoB;YACEA;YACAE,SAAS;gBACPE,WAAWd;gBACXe,YAAYd;gBACZe,eAAed;YACjB;QACF;IACF;IACF,MAAM0B,WAAWP,UAAU,WAAWA,UAAU;IAChD,MAAMQ,UAAUR,UAAU,UAAUA,UAAU;IAC9C,MAAMS,cACJb,kBAAkB5B,KAAK,KAAK,KAAK4B,kBAAkB3B,IAAI,KAAK;IAE9D,MAAMyC,eAAwC;QAC5CX;QACAzB,OAAO;YAAE,GAAGA,KAAK;YAAE,GAAGC,SAAS;QAAC;QAChCC,WACElB,IACEkB,WACAiC,eACE/C,SAAS;YACPM,OAAOuC;YACPI,OAAOH;YACPI,iBAAiB,CAACnC,gBAAgB,CAAC,CAACH;QACtC,IACF0B,UAAU,YACRrB,cAAc,KACdC,kBAAkB,KAClBC,qBAAqB,KACrBpB,uBACC+B;IACT;IAEA,OAAO;QACL,GAAGkB,YAAY;QACfV;QACAF;QACAD;QACAa;QACAT;QACAC;IACF;AACF"}

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 * @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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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 * @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;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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.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 * @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 * @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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","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\";\nimport { cnb } from \"cnbuilder\";\nimport type { ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\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 * @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"}

package/dist/transition/useScaleTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useScaleTransition.ts"],"sourcesContent":["\"use client\";\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionClassNamesObject,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeoutObject,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default {@link CSSTransitionClassNames} for a horizontal scale\n * transition.\n *\n * @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-transition`\n */\nexport const SCALE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n  appear: \"rmd-scale-transition--enter\",\n  appearActive: \"rmd-scale-transition--enter-active\",\n  enter: \"rmd-scale-transition--enter\",\n  enterActive: \"rmd-scale-transition--enter-active\",\n  enterDone: \"\",\n  exit: \"rmd-scale-transition--exit\",\n  exitActive: \"rmd-scale-transition--exit-active\",\n};\n\n/**\n * The default {@link CSSTransitionClassNames} for a vertical scale transition.\n *\n * @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}\n */\nexport const SCALE_Y_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n  appear: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n  appearActive:\n    \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n  enter: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n  enterActive:\n    \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n  enterDone: \"\",\n  exit: \"rmd-scale-transition--exit rmd-scale-transition--y-exit\",\n  exitActive:\n    \"rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active\",\n};\n\n/**\n * The default {@link TransitionTimeout} to use for horizontal and vertical\n * scale transitions.\n *\n * @since 2.0.0\n */\nexport const SCALE_TIMEOUT: Readonly<TransitionTimeoutObject> = {\n  enter: 200,\n  exit: 150,\n};\n\n/**\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface ScaleTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionOptions<E> {\n  /**\n   * Boolean if the scale transition should be vertical instead of horizontal.\n   * This really only changes the default value for the {@link classNames}.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * @see {@link PreconfiguredCSSTransitionOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @see {@link vertical}\n   * @see {@link SCALE_CLASSNAMES}\n   * @see {@link SCALE_Y_CLASSNAMES}\n   * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * Implements a scale transition that should generally be used for temporary\n * elements that are positioned via `position: absolute` or `position: fixed`.\n *\n * @example Dropdown Menu Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useFixedPositioning, useScaleTransition } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const buttonRef = useRef<HTMLButtonElement>(null);\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { style, transitionOptions } = useFixedPositioning({\n *     fixedTo: buttonRef,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     ...transitionOptions,\n *     transitionIn,\n *     vertical: true,\n *   });\n *\n *   return (\n *     <>\n *       <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps} style={style}>\n *           Some content within a menu\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useScaleTransition<E extends HTMLElement>(\n  options: ScaleTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    timeout = SCALE_TIMEOUT,\n    vertical = false,\n    temporary = true,\n    exitedHidden = true,\n    classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    temporary,\n    exitedHidden,\n    classNames,\n  });\n}\n"],"names":["useCSSTransition","SCALE_CLASSNAMES","appear","appearActive","enter","enterActive","enterDone","exit","exitActive","SCALE_Y_CLASSNAMES","SCALE_TIMEOUT","useScaleTransition","options","timeout","vertical","temporary","exitedHidden","classNames","transitionOptions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;;CAOC,GACD,OAAO,MAAMC,mBAA4D;IACvEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,qBAA8D;IACzEP,QAAQ;IACRC,cACE;IACFC,OAAO;IACPC,aACE;IACFC,WAAW;IACXC,MAAM;IACNC,YACE;AACJ,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAME,gBAAmD;IAC9DN,OAAO;IACPG,MAAM;AACR,EAAE;AAgCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASI,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUH,aAAa,EACvBI,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,aAAaH,WAAWL,qBAAqBR,gBAAgB,EAC7D,GAAGiB,mBACJ,GAAGN;IAEJ,OAAOZ,iBAAiB;QACtB,GAAGkB,iBAAiB;QACpBL;QACAE;QACAC;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useScaleTransition.ts"],"sourcesContent":["\"use client\";\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionClassNamesObject,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeoutObject,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default {@link CSSTransitionClassNames} for a horizontal scale\n * transition.\n *\n * @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-transition`\n */\nexport const SCALE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n  appear: \"rmd-scale-transition--enter\",\n  appearActive: \"rmd-scale-transition--enter-active\",\n  enter: \"rmd-scale-transition--enter\",\n  enterActive: \"rmd-scale-transition--enter-active\",\n  enterDone: \"\",\n  exit: \"rmd-scale-transition--exit\",\n  exitActive: \"rmd-scale-transition--exit-active\",\n};\n\n/**\n * The default {@link CSSTransitionClassNames} for a vertical scale transition.\n *\n * @since 2.0.0\n * @since 6.0.0 The class names were updated to be prefixed with\n * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}\n */\nexport const SCALE_Y_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {\n  appear: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n  appearActive:\n    \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n  enter: \"rmd-scale-transition--enter rmd-scale-transition--y-enter\",\n  enterActive:\n    \"rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active\",\n  enterDone: \"\",\n  exit: \"rmd-scale-transition--exit rmd-scale-transition--y-exit\",\n  exitActive:\n    \"rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active\",\n};\n\n/**\n * The default {@link TransitionTimeout} to use for horizontal and vertical\n * scale transitions.\n *\n * @since 2.0.0\n */\nexport const SCALE_TIMEOUT: Readonly<TransitionTimeoutObject> = {\n  enter: 200,\n  exit: 150,\n};\n\n/**\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport interface ScaleTransitionHookOptions<E extends HTMLElement>\n  extends PreconfiguredCSSTransitionOptions<E> {\n  /**\n   * Boolean if the scale transition should be vertical instead of horizontal.\n   * This really only changes the default value for the {@link classNames}.\n   *\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * @see {@link PreconfiguredCSSTransitionOptions.temporary}\n   * @defaultValue `true`\n   */\n  temporary?: boolean;\n\n  /**\n   * @see {@link vertical}\n   * @see {@link SCALE_CLASSNAMES}\n   * @see {@link SCALE_Y_CLASSNAMES}\n   * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n}\n\n/**\n * Implements a scale transition that should generally be used for temporary\n * elements that are positioned via `position: absolute` or `position: fixed`.\n *\n * @example Dropdown Menu Example\n * ```tsx\n * import { ReactElement, useRef, useState } from \"react\";\n * import { Button, useFixedPositioning, useScaleTransition } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const buttonRef = useRef<HTMLButtonElement>(null);\n *   const [transitionIn, setTransitionIn] = useState(false);\n *   const { style, transitionOptions } = useFixedPositioning({\n *     fixedTo: buttonRef,\n *   });\n *   const { elementProps, rendered } = useScaleTransition({\n *     ...transitionOptions,\n *     transitionIn,\n *     vertical: true,\n *   });\n *\n *   return (\n *     <>\n *       <Button ref={buttonRef} onClick={() => setTransitionIn(!transitionIn)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps} style={style}>\n *           Some content within a menu\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @typeParam E - The HTMLElement type used or the ref required for the\n * transition.\n * @since 4.0.0\n */\nexport function useScaleTransition<E extends HTMLElement>(\n  options: ScaleTransitionHookOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    timeout = SCALE_TIMEOUT,\n    vertical = false,\n    temporary = true,\n    exitedHidden = true,\n    classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    temporary,\n    exitedHidden,\n    classNames,\n  });\n}\n"],"names":["useCSSTransition","SCALE_CLASSNAMES","appear","appearActive","enter","enterActive","enterDone","exit","exitActive","SCALE_Y_CLASSNAMES","SCALE_TIMEOUT","useScaleTransition","options","timeout","vertical","temporary","exitedHidden","classNames","transitionOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;;CAOC,GACD,OAAO,MAAMC,mBAA4D;IACvEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,qBAA8D;IACzEP,QAAQ;IACRC,cACE;IACFC,OAAO;IACPC,aACE;IACFC,WAAW;IACXC,MAAM;IACNC,YACE;AACJ,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAME,gBAAmD;IAC9DN,OAAO;IACPG,MAAM;AACR,EAAE;AAgCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASI,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUH,aAAa,EACvBI,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,aAAaH,WAAWL,qBAAqBR,gBAAgB,EAC7D,GAAGiB,mBACJ,GAAGN;IAEJ,OAAOZ,iBAAiB;QACtB,GAAGkB,iBAAiB;QACpBL;QACAE;QACAC;QACAC;IACF;AACF"}

package/dist/transition/useSkeletonPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useSkeletonPlaceholder.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { useEffect, useState, type CSSProperties } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  randomSkeletonPlaceholder,\n  skeletonPlaceholder,\n  type SkeletonPlaceholderRandomOptions,\n} from \"./skeletonPlaceholderUtils.js\";\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderOptions\n  extends SkeletonPlaceholderRandomOptions {\n  style?: CSSProperties;\n  className?: string;\n\n  /**\n   * Set this to a custom `animation-delay` value (should be in milliseconds).\n   *\n   * @example\n   * ```ts\n   * delay=\"200ms\"\n   * ```\n   */\n  delay?: string;\n\n  /**\n   * Set this value to a number or length unit string to set the height with\n   * inline styles.\n   *\n   * If this is `undefined`, it will use the skeleton placeholder CSS variable\n   * value instead which defaults to `1.125em`\n   *\n   * @defaultValue `undefined`\n   */\n  height?: string | number;\n\n  /**\n   * A custom width to apply to the skeleton placeholder.\n   *\n   * Set this value to an empty string if you want to control the width through\n   * SCSS.\n   *\n   * @example No Inline Width CSS\n   * ```scss\n   * @use \"@react-md/core\";\n   *\n   * .customStyles {\n   *   // You could use these mixins on a parent element instead which would\n   *   // set the height and width to all skeleton placeholders that appear as a\n   *   // child instead\n   *   // @include core.transition-set-var(skeleton-placeholder-height, 1.5rem);\n   *   // @include core.transition-set-var(skeleton-placeholder-width, 40%);\n   *\n   *   height: 1,5rem;\n   *   width: 40%;\n   * }\n   * ```\n   *\n   * @example No Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * import styles from \"./MyComponent.module.scss\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     width: null,\n   *     className: styles.customStyles,\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   *\n   * Set this value to a number or length unit string to set the width with\n   * inline styles.\n   *\n   * @example Custom Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     // any of these are valid\n   *     // width: 40,\n   *     // width: \"1rem\",\n   *     // width: \"1vh\",\n   *     // width: \"40%\",\n   *     width: \"1rem\",\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   * If this value is `undefined`, a random percentage will be generated instead\n   * using the {@link minPercentage} and {@link maxPercentage} options.\n   *\n   * Set this value to `null` if the size should be derived from the provided\n   * `className` instead.\n   *\n   * @defaultValue `randomInt({ min: minPercentage, max: maxPercentage })%`\n   */\n  width?: number | string | null;\n\n  /**\n   * Settings this to `true` will prevent any of the skeleton placeholder styles\n   * to be applied. This is really only useful if you can prerender parts of\n   * your layout while waiting for the data to load.\n   *\n   * @example Pre-rendered Layout\n   * ```tsx\n   * import type { ReactElement } from \"@react\";\n   * import { SkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * interface Data {\n   *   id: string;\n   *   name: string;\n   *   createdBy: string\n   *   createdOn: string;\n   *   modifiedBy: string;\n   *   modifiedOn: string;\n   * }\n   *\n   * function ShowData({\n   *   id,\n   *   name,\n   *   createdBy,\n   *   createdOn,\n   *   modifiedBy,\n   *   modifiedOn,\n   * }: Partial<Data>:: ReactElement {\n   *   const loading =\n   *     !name &&\n   *     !createdBy &&\n   *     !createdOn &&\n   *     !modifiedBy &&\n   *     !modifiedOn;\n   *\n   *   return (\n   *     <Box grid gridClassName=\"custom-class-name\">\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {id}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {name}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {createdOn}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {createdBy}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {modifiedOn}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {modifiedBy}\n   *       </SkeletonPlaceholder>\n   *     </Box>\n   *   );\n   * }\n   *\n   * export function Example(): ReactElement {\n   *   const { data } = useLoadSomeDataQuery();\n   *\n   *   const items = useMemo(() => {\n   *     // if the data has been fetched, just return the data\n   *     if (data) {\n   *       return data;\n   *     }\n   *\n   *     // if the data does not exist, set up a skeleton of your layout by\n   *     // rendering a random number of items.\n   *     //\n   *     // NOTE: This is memoized so you don't create a random length each\n   *     // render\n   *     const length = randomInt({ min: 3, max: 10 })\n   *     return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n   *   }, [data])\n   *\n   *   return (\n   *     <List>\n   *       {items.map((item) => <ShowData {...item} />)}\n   *     </List>\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\nexport interface SkeletonPlaceholderStylingProps {\n  style?: CSSProperties;\n  className: string;\n}\n\nexport function useSkeletonPlaceholder(\n  options: SkeletonPlaceholderOptions = {}\n): SkeletonPlaceholderStylingProps {\n  const {\n    style: propStyle,\n    className,\n    height,\n    width: propWidth,\n    disabled = false,\n    delay: propDelay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  } = options;\n  const ssr = useSsr();\n\n  const isDefinedWidth = typeof propWidth !== \"undefined\";\n  const isDefinedDelay = typeof propDelay !== \"undefined\";\n  const [randomStyles, setRandomStyles] = useState<CSSProperties>(() => {\n    if (typeof window === \"undefined\" || ssr || disabled) {\n      return {};\n    }\n\n    return randomSkeletonPlaceholder({\n      minDelay,\n      maxDelay,\n      minPercentage,\n      maxPercentage,\n    });\n  });\n\n  useEffect(() => {\n    if (!ssr || disabled || (isDefinedDelay && isDefinedWidth)) {\n      return;\n    }\n\n    setRandomStyles(\n      randomSkeletonPlaceholder({\n        minDelay,\n        maxDelay,\n        minPercentage,\n        maxPercentage,\n      })\n    );\n  }, [\n    disabled,\n    isDefinedDelay,\n    isDefinedWidth,\n    maxDelay,\n    maxPercentage,\n    minDelay,\n    minPercentage,\n    ssr,\n  ]);\n\n  let width = propWidth;\n  let animationDelay = propDelay;\n  if (!disabled) {\n    if (!isDefinedDelay) {\n      ({ animationDelay } = randomStyles);\n    }\n    if (!isDefinedWidth) {\n      ({ width } = randomStyles);\n    }\n  }\n\n  let style: CSSProperties | undefined = propStyle;\n  if (!!width || !!animationDelay || typeof height !== \"undefined\") {\n    style = {\n      ...style,\n      height: height ?? style?.height,\n      width: width ?? style?.width,\n      // Note: not including MozAnimationDelay and WebkitAnimationDelay since\n      // they weren't applied when they were set. Probably no longer required?\n      animationDelay: animationDelay ?? style?.animationDelay,\n    };\n  }\n\n  return {\n    style,\n    className: cnb(className, !disabled && skeletonPlaceholder()),\n  };\n}\n"],"names":["cnb","useEffect","useState","useSsr","randomSkeletonPlaceholder","skeletonPlaceholder","useSkeletonPlaceholder","options","style","propStyle","className","height","width","propWidth","disabled","delay","propDelay","minDelay","maxDelay","minPercentage","maxPercentage","ssr","isDefinedWidth","isDefinedDelay","randomStyles","setRandomStyles","window","animationDelay"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,SAAS,EAAEC,QAAQ,QAA4B,QAAQ;AAChE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SACEC,yBAAyB,EACzBC,mBAAmB,QAEd,gCAAgC;AAmMvC,OAAO,SAASC,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,MAAM,EACNC,OAAOC,SAAS,EAChBC,WAAW,KAAK,EAChBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACd,GAAGb;IACJ,MAAMc,MAAMlB;IAEZ,MAAMmB,iBAAiB,OAAOT,cAAc;IAC5C,MAAMU,iBAAiB,OAAOP,cAAc;IAC5C,MAAM,CAACQ,cAAcC,gBAAgB,GAAGvB,SAAwB;QAC9D,IAAI,OAAOwB,WAAW,eAAeL,OAAOP,UAAU;YACpD,OAAO,CAAC;QACV;QAEA,OAAOV,0BAA0B;YAC/Ba;YACAC;YACAC;YACAC;QACF;IACF;IAEAnB,UAAU;QACR,IAAI,CAACoB,OAAOP,YAAaS,kBAAkBD,gBAAiB;YAC1D;QACF;QAEAG,gBACErB,0BAA0B;YACxBa;YACAC;YACAC;YACAC;QACF;IAEJ,GAAG;QACDN;QACAS;QACAD;QACAJ;QACAE;QACAH;QACAE;QACAE;KACD;IAED,IAAIT,QAAQC;IACZ,IAAIc,iBAAiBX;IACrB,IAAI,CAACF,UAAU;QACb,IAAI,CAACS,gBAAgB;YAClB,CAAA,EAAEI,cAAc,EAAE,GAAGH,YAAW;QACnC;QACA,IAAI,CAACF,gBAAgB;YAClB,CAAA,EAAEV,KAAK,EAAE,GAAGY,YAAW;QAC1B;IACF;IAEA,IAAIhB,QAAmCC;IACvC,IAAI,CAAC,CAACG,SAAS,CAAC,CAACe,kBAAkB,OAAOhB,WAAW,aAAa;QAChEH,QAAQ;YACN,GAAGA,KAAK;YACRG,QAAQA,UAAUH,OAAOG;YACzBC,OAAOA,SAASJ,OAAOI;YACvB,uEAAuE;YACvE,wEAAwE;YACxEe,gBAAgBA,kBAAkBnB,OAAOmB;QAC3C;IACF;IAEA,OAAO;QACLnB;QACAE,WAAWV,IAAIU,WAAW,CAACI,YAAYT;IACzC;AACF"}
+{"version":3,"sources":["../../src/transition/useSkeletonPlaceholder.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { useEffect, useState, type CSSProperties } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  randomSkeletonPlaceholder,\n  skeletonPlaceholder,\n  type SkeletonPlaceholderRandomOptions,\n} from \"./skeletonPlaceholderUtils.js\";\n\n/** @since 6.0.0 */\nexport interface SkeletonPlaceholderOptions\n  extends SkeletonPlaceholderRandomOptions {\n  style?: CSSProperties;\n  className?: string;\n\n  /**\n   * Set this to a custom `animation-delay` value (should be in milliseconds).\n   *\n   * @example\n   * ```ts\n   * delay=\"200ms\"\n   * ```\n   */\n  delay?: string;\n\n  /**\n   * Set this value to a number or length unit string to set the height with\n   * inline styles.\n   *\n   * If this is `undefined`, it will use the skeleton placeholder CSS variable\n   * value instead which defaults to `1.125em`\n   *\n   * @defaultValue `undefined`\n   */\n  height?: string | number;\n\n  /**\n   * A custom width to apply to the skeleton placeholder.\n   *\n   * Set this value to an empty string if you want to control the width through\n   * SCSS.\n   *\n   * @example No Inline Width CSS\n   * ```scss\n   * @use \"@react-md/core\";\n   *\n   * .customStyles {\n   *   // You could use these mixins on a parent element instead which would\n   *   // set the height and width to all skeleton placeholders that appear as a\n   *   // child instead\n   *   // @include core.transition-set-var(skeleton-placeholder-height, 1.5rem);\n   *   // @include core.transition-set-var(skeleton-placeholder-width, 40%);\n   *\n   *   height: 1,5rem;\n   *   width: 40%;\n   * }\n   * ```\n   *\n   * @example No Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * import styles from \"./MyComponent.module.scss\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     width: null,\n   *     className: styles.customStyles,\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   *\n   * Set this value to a number or length unit string to set the width with\n   * inline styles.\n   *\n   * @example Custom Inline Width\n   * ```ts\n   * import type { ReactElement } from \"@react\";\n   * import { useSkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * export function Example(): ReactElement {\n   *   const skeletonProps = useSkeletonPlaceholder({\n   *     // any of these are valid\n   *     // width: 40,\n   *     // width: \"1rem\",\n   *     // width: \"1vh\",\n   *     // width: \"40%\",\n   *     width: \"1rem\",\n   *   });\n   *\n   *   return <div {...skeletonProps} />;\n   * }\n   * ```\n   *\n   * If this value is `undefined`, a random percentage will be generated instead\n   * using the {@link minPercentage} and {@link maxPercentage} options.\n   *\n   * Set this value to `null` if the size should be derived from the provided\n   * `className` instead.\n   *\n   * @defaultValue `randomInt({ min: minPercentage, max: maxPercentage })%`\n   */\n  width?: number | string | null;\n\n  /**\n   * Settings this to `true` will prevent any of the skeleton placeholder styles\n   * to be applied. This is really only useful if you can prerender parts of\n   * your layout while waiting for the data to load.\n   *\n   * @example Pre-rendered Layout\n   * ```tsx\n   * import type { ReactElement } from \"@react\";\n   * import { SkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * interface Data {\n   *   id: string;\n   *   name: string;\n   *   createdBy: string\n   *   createdOn: string;\n   *   modifiedBy: string;\n   *   modifiedOn: string;\n   * }\n   *\n   * function ShowData({\n   *   id,\n   *   name,\n   *   createdBy,\n   *   createdOn,\n   *   modifiedBy,\n   *   modifiedOn,\n   * }: Partial<Data>:: ReactElement {\n   *   const loading =\n   *     !name &&\n   *     !createdBy &&\n   *     !createdOn &&\n   *     !modifiedBy &&\n   *     !modifiedOn;\n   *\n   *   return (\n   *     <Box grid gridClassName=\"custom-class-name\">\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {id}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {name}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {createdOn}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {createdBy}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {modifiedOn}\n   *       </SkeletonPlaceholder>\n   *       <SkeletonPlaceholder disabled={!loading}>\n   *         {modifiedBy}\n   *       </SkeletonPlaceholder>\n   *     </Box>\n   *   );\n   * }\n   *\n   * export function Example(): ReactElement {\n   *   const { data } = useLoadSomeDataQuery();\n   *\n   *   const items = useMemo(() => {\n   *     // if the data has been fetched, just return the data\n   *     if (data) {\n   *       return data;\n   *     }\n   *\n   *     // if the data does not exist, set up a skeleton of your layout by\n   *     // rendering a random number of items.\n   *     //\n   *     // NOTE: This is memoized so you don't create a random length each\n   *     // render\n   *     const length = randomInt({ min: 3, max: 10 })\n   *     return Array.from({ length }, (_, i) => ({ id: `placeholder-${i}` }));\n   *   }, [data])\n   *\n   *   return (\n   *     <List>\n   *       {items.map((item) => <ShowData {...item} />)}\n   *     </List>\n   *   );\n   * }\n   * ```\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n}\n\nexport interface SkeletonPlaceholderStylingProps {\n  style?: CSSProperties;\n  className: string;\n}\n\nexport function useSkeletonPlaceholder(\n  options: SkeletonPlaceholderOptions = {}\n): SkeletonPlaceholderStylingProps {\n  const {\n    style: propStyle,\n    className,\n    height,\n    width: propWidth,\n    disabled = false,\n    delay: propDelay,\n    minDelay,\n    maxDelay,\n    minPercentage,\n    maxPercentage,\n  } = options;\n  const ssr = useSsr();\n\n  const isDefinedWidth = typeof propWidth !== \"undefined\";\n  const isDefinedDelay = typeof propDelay !== \"undefined\";\n  const [randomStyles, setRandomStyles] = useState<CSSProperties>(() => {\n    if (typeof window === \"undefined\" || ssr || disabled) {\n      return {};\n    }\n\n    return randomSkeletonPlaceholder({\n      minDelay,\n      maxDelay,\n      minPercentage,\n      maxPercentage,\n    });\n  });\n\n  useEffect(() => {\n    if (!ssr || disabled || (isDefinedDelay && isDefinedWidth)) {\n      return;\n    }\n\n    setRandomStyles(\n      randomSkeletonPlaceholder({\n        minDelay,\n        maxDelay,\n        minPercentage,\n        maxPercentage,\n      })\n    );\n  }, [\n    disabled,\n    isDefinedDelay,\n    isDefinedWidth,\n    maxDelay,\n    maxPercentage,\n    minDelay,\n    minPercentage,\n    ssr,\n  ]);\n\n  let width = propWidth;\n  let animationDelay = propDelay;\n  if (!disabled) {\n    if (!isDefinedDelay) {\n      ({ animationDelay } = randomStyles);\n    }\n    if (!isDefinedWidth) {\n      ({ width } = randomStyles);\n    }\n  }\n\n  let style: CSSProperties | undefined = propStyle;\n  if (!!width || !!animationDelay || typeof height !== \"undefined\") {\n    style = {\n      ...style,\n      height: height ?? style?.height,\n      width: width ?? style?.width,\n      // Note: not including MozAnimationDelay and WebkitAnimationDelay since\n      // they weren't applied when they were set. Probably no longer required?\n      animationDelay: animationDelay ?? style?.animationDelay,\n    };\n  }\n\n  return {\n    style,\n    className: cnb(className, !disabled && skeletonPlaceholder()),\n  };\n}\n"],"names":["cnb","useEffect","useState","useSsr","randomSkeletonPlaceholder","skeletonPlaceholder","useSkeletonPlaceholder","options","style","propStyle","className","height","width","propWidth","disabled","delay","propDelay","minDelay","maxDelay","minPercentage","maxPercentage","ssr","isDefinedWidth","isDefinedDelay","randomStyles","setRandomStyles","window","animationDelay"],"mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,SAAS,EAAEC,QAAQ,QAA4B,QAAQ;AAChE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SACEC,yBAAyB,EACzBC,mBAAmB,QAEd,gCAAgC;AAmMvC,OAAO,SAASC,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,MAAM,EACNC,OAAOC,SAAS,EAChBC,WAAW,KAAK,EAChBC,OAAOC,SAAS,EAChBC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,aAAa,EACd,GAAGb;IACJ,MAAMc,MAAMlB;IAEZ,MAAMmB,iBAAiB,OAAOT,cAAc;IAC5C,MAAMU,iBAAiB,OAAOP,cAAc;IAC5C,MAAM,CAACQ,cAAcC,gBAAgB,GAAGvB,SAAwB;QAC9D,IAAI,OAAOwB,WAAW,eAAeL,OAAOP,UAAU;YACpD,OAAO,CAAC;QACV;QAEA,OAAOV,0BAA0B;YAC/Ba;YACAC;YACAC;YACAC;QACF;IACF;IAEAnB,UAAU;QACR,IAAI,CAACoB,OAAOP,YAAaS,kBAAkBD,gBAAiB;YAC1D;QACF;QAEAG,gBACErB,0BAA0B;YACxBa;YACAC;YACAC;YACAC;QACF;IAEJ,GAAG;QACDN;QACAS;QACAD;QACAJ;QACAE;QACAH;QACAE;QACAE;KACD;IAED,IAAIT,QAAQC;IACZ,IAAIc,iBAAiBX;IACrB,IAAI,CAACF,UAAU;QACb,IAAI,CAACS,gBAAgB;YAClB,CAAA,EAAEI,cAAc,EAAE,GAAGH,YAAW;QACnC;QACA,IAAI,CAACF,gBAAgB;YAClB,CAAA,EAAEV,KAAK,EAAE,GAAGY,YAAW;QAC1B;IACF;IAEA,IAAIhB,QAAmCC;IACvC,IAAI,CAAC,CAACG,SAAS,CAAC,CAACe,kBAAkB,OAAOhB,WAAW,aAAa;QAChEH,QAAQ;YACN,GAAGA,KAAK;YACRG,QAAQA,UAAUH,OAAOG;YACzBC,OAAOA,SAASJ,OAAOI;YACvB,uEAAuE;YACvE,wEAAwE;YACxEe,gBAAgBA,kBAAkBnB,OAAOmB;QAC3C;IACF;IAEA,OAAO;QACLnB;QACAE,WAAWV,IAAIU,WAAW,CAACI,YAAYT;IACzC;AACF"}

package/dist/transition/useSlideTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useSlideTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout> = 150;\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: Readonly<CSSTransitionClassNames> =\n  {\n    enter: \"rmd-slide--enter\",\n    enterActive: \"rmd-slide--enter-active rmd-slide--animate\",\n    exit: \"rmd-slide--exit\",\n    exitActive: \"rmd-slide--exit-active rmd-slide--animate\",\n  };\n\n/** @since 6.0.0 */\nexport type SlideTransitionOptions<E extends HTMLElement> =\n  PreconfiguredCSSTransitionOptions<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { SlideDirection } from \"@react-md/core\";\n * import { slideContainer, useSlideTransition } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface SlideProps {\n *   active: boolean;\n *   children: ReactNode;\n * }\n *\n * function Slide({ active, children }: SlideProps): ReactElement | null {\n *   const { rendered, elementProps } = useSlideTransition({\n *     transition: active,\n *   });\n *\n *   if (!rendered) {\n *     return null;\n *   }\n *\n *   return <div {...elementProps}>{children}</div>;\n * }\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"left\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state\n *\n *   // when changing a slide, `direction` should be set to \"left\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"left\" : \"right\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <div className={slideContainer({ direction )}>\n *       <Slide active={activeIndex === 0}>\n *         Slide 1\n *       </Slide>\n *       <Slide active={activeIndex === 1}>\n *         Slide 2\n *       </Slide>\n *       <Slide active={activeIndex === 2}>\n *         Slide 3\n *       </Slide>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link SlideContainer} and {@link Slide} for convenient default\n * implementations.\n * @since 6.0.0\n */\nexport function useSlideTransition<E extends HTMLElement>(\n  options: SlideTransitionOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n    className,\n    temporary = false,\n    exitedHidden = true,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    className: cnb(\"rmd-slide\", className),\n    classNames: DEFAULT_SLIDE_TRANSITION_CLASSNAMES,\n    temporary,\n    exitedHidden,\n  });\n}\n"],"names":["cnb","useCSSTransition","DEFAULT_SLIDE_TRANSITION_TIMEOUT","DEFAULT_SLIDE_TRANSITION_CLASSNAMES","enter","enterActive","exit","exitActive","useSlideTransition","options","timeout","className","temporary","exitedHidden","transitionOptions","classNames"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAOhC,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,iBAAiB,GACjB,OAAO,MAAMC,mCAAgE,IAAI;AAEjF,iBAAiB,GACjB,OAAO,MAAMC,sCACX;IACEC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAMJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,GACD,OAAO,SAASC,mBACdC,OAAkC;IAElC,MAAM,EACJC,UAAUR,gCAAgC,EAC1CS,SAAS,EACTC,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,mBACJ,GAAGL;IAEJ,OAAOR,iBAAiB;QACtB,GAAGa,iBAAiB;QACpBJ;QACAC,WAAWX,IAAI,aAAaW;QAC5BI,YAAYZ;QACZS;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useSlideTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout> = 150;\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: Readonly<CSSTransitionClassNames> =\n  {\n    enter: \"rmd-slide--enter\",\n    enterActive: \"rmd-slide--enter-active rmd-slide--animate\",\n    exit: \"rmd-slide--exit\",\n    exitActive: \"rmd-slide--exit-active rmd-slide--animate\",\n  };\n\n/** @since 6.0.0 */\nexport type SlideTransitionOptions<E extends HTMLElement> =\n  PreconfiguredCSSTransitionOptions<E>;\n\n/**\n * @example Simple Example\n * ```tsx\n * import type { SlideDirection } from \"@react-md/core\";\n * import { slideContainer, useSlideTransition } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface SlideProps {\n *   active: boolean;\n *   children: ReactNode;\n * }\n *\n * function Slide({ active, children }: SlideProps): ReactElement | null {\n *   const { rendered, elementProps } = useSlideTransition({\n *     transition: active,\n *   });\n *\n *   if (!rendered) {\n *     return null;\n *   }\n *\n *   return <div {...elementProps}>{children}</div>;\n * }\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"left\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state\n *\n *   // when changing a slide, `direction` should be set to \"left\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"left\" : \"right\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <div className={slideContainer({ direction )}>\n *       <Slide active={activeIndex === 0}>\n *         Slide 1\n *       </Slide>\n *       <Slide active={activeIndex === 1}>\n *         Slide 2\n *       </Slide>\n *       <Slide active={activeIndex === 2}>\n *         Slide 3\n *       </Slide>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link SlideContainer} and {@link Slide} for convenient default\n * implementations.\n * @since 6.0.0\n */\nexport function useSlideTransition<E extends HTMLElement>(\n  options: SlideTransitionOptions<E>\n): CSSTransitionHookReturnValue<E> {\n  const {\n    timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT,\n    className,\n    temporary = false,\n    exitedHidden = true,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    className: cnb(\"rmd-slide\", className),\n    classNames: DEFAULT_SLIDE_TRANSITION_CLASSNAMES,\n    temporary,\n    exitedHidden,\n  });\n}\n"],"names":["cnb","useCSSTransition","DEFAULT_SLIDE_TRANSITION_TIMEOUT","DEFAULT_SLIDE_TRANSITION_CLASSNAMES","enter","enterActive","exit","exitActive","useSlideTransition","options","timeout","className","temporary","exitedHidden","transitionOptions","classNames"],"mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAOhC,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,iBAAiB,GACjB,OAAO,MAAMC,mCAAgE,IAAI;AAEjF,iBAAiB,GACjB,OAAO,MAAMC,sCACX;IACEC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAMJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,GACD,OAAO,SAASC,mBACdC,OAAkC;IAElC,MAAM,EACJC,UAAUR,gCAAgC,EAC1CS,SAAS,EACTC,YAAY,KAAK,EACjBC,eAAe,IAAI,EACnB,GAAGC,mBACJ,GAAGL;IAEJ,OAAOR,iBAAiB;QACtB,GAAGa,iBAAiB;QACpBJ;QACAC,WAAWX,IAAI,aAAaW;QAC5BI,YAAYZ;QACZS;QACAC;IACF;AACF"}

package/dist/transition/useTransition.d.ts

@@ -7,5 +7,6 @@ import type { TransitionHookOptions, TransitionHookReturnValue } from "./types.j
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0
+ * @since 6.0.0 Added the `disablePortal` flag to the return value for SSR.
  */
 export declare function useTransition<E extends HTMLElement>(options: TransitionHookOptions<E>): TransitionHookReturnValue<E>;

package/dist/transition/useTransition.js

@@ -21,6 +21,7 @@ const noop = ()=>{
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0
+ * @since 6.0.0 Added the `disablePortal` flag to the return value for SSR.
  */ export function useTransition(options) {
     const { nodeRef, timeout, transitionIn, reflow = false, temporary = false, appear = false, enter = true, exit = true, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop, disablePortal: propDisablePortal } = options;
     const configurationRef = useRef({