@react-md/core 1.0.0-next.9 → 6.0.1

package/dist/transition/skeletonPlaceholderUtils.d.ts

@@ -1,10 +1,10 @@
 import { type CSSProperties } from "react";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare const skeletonPlaceholder: import("../utils/bem.js").BEMResult;
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface SkeletonPlaceholderRandomOptions {
     /**
@@ -60,7 +60,10 @@ export interface SkeletonPlaceholderRandomOptions {
  *
  * @example
  * ```tsx
- * import { skeletonPlaceholder, randomSkeletonPlaceholder } from "@react-md/core";
+ * import {
+ *   randomSkeletonPlaceholder,
+ *   skeletonPlaceholder,
+ * } from "@react-md/core/transition/skeletonPlaceholderUtils";
  * import "server-only";
  *
  * export function RandomSkeletonPlaceholder(): ReactElement {
@@ -72,6 +75,6 @@ export interface SkeletonPlaceholderRandomOptions {
  *   );
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function randomSkeletonPlaceholder(options?: SkeletonPlaceholderRandomOptions): CSSProperties;

package/dist/transition/skeletonPlaceholderUtils.js

@@ -1,14 +1,17 @@
 import { bem } from "../utils/bem.js";
 import { randomInt } from "../utils/randomInt.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export const skeletonPlaceholder = bem("rmd-skeleton-placeholder");
 /**
  * A server-only safe util to generate a random skeleton placeholder.
  *
  * @example
  * ```tsx
- * import { skeletonPlaceholder, randomSkeletonPlaceholder } from "@react-md/core";
+ * import {
+ *   randomSkeletonPlaceholder,
+ *   skeletonPlaceholder,
+ * } from "@react-md/core/transition/skeletonPlaceholderUtils";
  * import "server-only";
  *
  * export function RandomSkeletonPlaceholder(): ReactElement {
@@ -20,7 +23,7 @@ import { randomInt } from "../utils/randomInt.js";
  *   );
  * }
  * ```
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function randomSkeletonPlaceholder(options = {}) {
     const { minDelay = 0, maxDelay = 400, minPercentage = 40, maxPercentage = 85 } = options;
     return {

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

package/dist/transition/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement, Ref, RefCallback } from "react";
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface TransitionActions {
     /**
@@ -32,7 +32,7 @@ export interface TransitionActions {
  * {@link TransitionActions}. If a value is set to `0` or `undefined`, the
  * transition will not occur.
  *
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export type TransitionTimeoutObject = {
     [action in keyof TransitionActions]?: number;
@@ -41,19 +41,27 @@ export type TransitionTimeoutObject = {
  * Either a single timeout duration in milliseconds to use for each of the
  * {@link TransitionActions} stages, or an object of transition durations.
  *
- * @see {@link TransitionTimeout}
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;
+/**
+ * @since 6.0.0
+ */
+export type TransitionEnterStage = "enter" | "entering" | "entered";
+/**
+ * @since 6.0.0
+ */
+export type TransitionExitStage = "exit" | "exiting" | "exited";
 /**
  * The way the transition works is by flowing through the different stages and
  * assigning waiting for a timeout to occur. Setting the `stage` to `enter` will
  * begin the enter transition going from `enter -> entering -> entered` while
  * setting the stage to `exit` will transition from `exit -> exiting -> exited`.
  *
- * @remarks \@since 4.0.0
+ * @since 4.0.0
+ * @since 6.0.0 Type union between `TransitionEnterStage` and `TransitionExitStage`
  */
-export type TransitionStage = "enter" | "entering" | "entered" | "exit" | "exiting" | "exited";
+export type TransitionStage = TransitionEnterStage | TransitionExitStage;
 /**
  * This function is called at each `"enter"` {@link TransitionStage}. If a
  * {@link TransitionOptions.nodeRef} was provided, the DOM node should be
@@ -61,25 +69,30 @@ export type TransitionStage = "enter" | "entering" | "entered" | "exit" | "exiti
  * calculations.
  *
  * @param appearing - Boolean if this is the initial `appear` flow.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export type TransitionEnterHandler = (appearing: boolean) => void;
 /**
- * THis function is called at each `"exit"` {@link TransitionStage}. If a {@link
- * TransitionOptions.nodeRef} was provided, the DOM node should be available in
- * `nodeRef.current` by this point if the transition requires DOM calculations.
+ * This function is called at each `"exit"` {@link TransitionStage}. If a
+ * {@link TransitionOptions.nodeRef} was provided, the DOM node should be
+ * available in `nodeRef.current` by this point if the transition requires DOM
+ * calculations.
  *
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export type TransitionExitHandler = () => void;
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface TransitionCallbacks {
     /**
      * This function will be called once the {@link TransitionStage} has been set
      * to `"enter"`.
      *
+     * NOTE: This callback will be skipped when transitions are disabled. Use the
+     * `getTransitionCallbacks` helper if something should only be called once
+     * while entering.
+     *
      * @see {@link TransitionEnterHandler}
      */
     onEnter?: TransitionEnterHandler;
@@ -87,6 +100,10 @@ export interface TransitionCallbacks {
      * This function will be called once the {@link TransitionStage} has been set
      * to `"enter"`.
      *
+     * NOTE: This callback will be skipped when transitions are disabled. Use the
+     * `getTransitionCallbacks` helper if something should only be called once
+     * while entering.
+     *
      * @see {@link TransitionEnterHandler}
      */
     onEntering?: TransitionEnterHandler;
@@ -101,6 +118,10 @@ export interface TransitionCallbacks {
      * This function will be called once the {@link TransitionStage} has been set
      * to `"entered"`.
      *
+     * NOTE: This callback will be skipped when transitions are disabled. Use the
+     * `getTransitionCallbacks` helper if something should only be called once
+     * while exiting.
+     *
      * @see {@link TransitionEnterHandler}
      */
     onExit?: TransitionExitHandler;
@@ -108,6 +129,10 @@ export interface TransitionCallbacks {
      * This function will be called once the {@link TransitionStage} has been set
      * to `"exiting"`.
      *
+     * NOTE: This callback will be skipped when transitions are disabled. Use the
+     * `getTransitionCallbacks` helper if something should only be called once
+     * while exiting.
+     *
      * @see {@link TransitionExitHandler}
      */
     onExiting?: TransitionExitHandler;
@@ -122,7 +147,7 @@ export interface TransitionCallbacks {
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface PreconfiguredTransitionInDefaultedOptions<E extends HTMLElement> extends TransitionActions, TransitionCallbacks {
     /**
@@ -150,7 +175,7 @@ export interface PreconfiguredTransitionInDefaultedOptions<E extends HTMLElement
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface PreconfiguredTransitionOptions<E extends HTMLElement> extends PreconfiguredTransitionInDefaultedOptions<E> {
     /** {@inheritDoc PreconfiguredTransitionInDefaultedOptions.transitionIn} */
@@ -159,7 +184,7 @@ export interface PreconfiguredTransitionOptions<E extends HTMLElement> extends P
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface TransitionOptions<E extends HTMLElement> extends PreconfiguredTransitionOptions<E> {
     /** {@inheritDoc TransitionTimeout} */
@@ -170,8 +195,7 @@ export interface TransitionOptions<E extends HTMLElement> extends PreconfiguredT
  * {@link TransitionStage} where all the classes in the previous stages will
  * also be applied.
  *
- * @example
- * Explaining className application
+ * @example Explaining className application
  * ```ts
  * const { ref, className, stage, appearing } = useCSSTransition({
  *   appear: true,
@@ -221,7 +245,7 @@ export interface TransitionOptions<E extends HTMLElement> extends PreconfiguredT
  * // className === "exit--done exit--complete"
  * ```
  *
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CSSTransitionClassNamesObject {
     /**
@@ -283,13 +307,13 @@ export interface CSSTransitionClassNamesObject {
     exitDone?: string;
 }
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export type CSSTransitionClassNames = string | Readonly<CSSTransitionClassNamesObject>;
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface PreconfiguredCSSTransitionInDefaultedOptions<E extends HTMLElement> extends PreconfiguredTransitionInDefaultedOptions<E> {
     /**
@@ -302,25 +326,41 @@ export interface PreconfiguredCSSTransitionInDefaultedOptions<E extends HTMLElem
      * conditionally rendering the element.
      *
      * @defaultValue `false`
-     * @remarks \@since 6.0.0
+     * @since 6.0.0
      */
     exitedHidden?: boolean;
 }
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface PreconfiguredCSSTransitionOptions<E extends HTMLElement> extends PreconfiguredCSSTransitionInDefaultedOptions<E> {
     /** {@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.
- * @remarks \@since 4.0.0
+ * @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,14 +369,9 @@ export interface TransitionHookOptions<E extends HTMLElement> extends Transition
      * @defaultValue `false`
      */
     reflow?: boolean;
-    /**
-     * @remarks \@since 6.0.0
-     * @defaultValue `false`
-     */
-    disablePortal?: boolean;
 }
 /**
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface TransitionState {
     /** {@inheritDoc TransitionStage} */
@@ -358,9 +393,9 @@ export interface TransitionState {
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @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.
@@ -372,8 +407,7 @@ export interface TransitionHookReturnValue<E extends HTMLElement> extends Transi
      * useful for "appear only transitions" that do not unmount the child
      * elements.
      *
-     * @example
-     * Simple Example
+     * @example Simple Example
      * ```tsx
      * import { ReactElement, useEffect, useRef } from "react";
      * import { useCSSTransition } from "@react-md/transition";
@@ -403,39 +437,23 @@ 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`
-     * @remarks \@since 6.0.0
-     */
-    disablePortal: boolean;
+    transitionTo: (stage: TransitionStage) => void;
 }
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @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;
-    /**
-     * @remarks \@since 6.0.0
-     */
-    disablePortal?: boolean;
 }
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CSSTransitionElementProps<E extends HTMLElement> {
     /** @see {@link TransitionHookReturnValue.ref} */
@@ -448,15 +466,14 @@ export interface CSSTransitionElementProps<E extends HTMLElement> {
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CSSTransitionHookReturnValue<E extends HTMLElement> extends TransitionHookReturnValue<E>, CSSTransitionElementProps<E> {
     /**
      * This can be used so that you don't need to destructure multiple props from
      * the hook return value to pass to the transitioning component.
      *
-     * @example
-     * Simple Example
+     * @example Simple Example
      * ```tsx
      * import type { ReactElement } from "react";
      * import { useCSSTransition } from "@react-md/transition";
@@ -481,8 +498,7 @@ export interface CSSTransitionHookReturnValue<E extends HTMLElement> extends Tra
      * }
      * ```
      *
-     * @example
-     * Verbose Version
+     * @example Verbose Version
      * ```tsx
      * import type { ReactElement } from "react";
      * import { useCSSTransition } from "@react-md/transition";
@@ -513,7 +529,7 @@ export interface CSSTransitionHookReturnValue<E extends HTMLElement> extends Tra
  * This is mostly an internal type that can be used to help with transitionable
  * components.
  *
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CSSTransitionComponentProps extends TransitionCallbacks {
     /** @see {@link CSSTransitionHookOptions.temporary} */
@@ -528,7 +544,7 @@ export interface CSSTransitionComponentProps extends TransitionCallbacks {
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export interface CSSTransitionComponentImplementation<E extends HTMLElement> {
     /**

package/dist/transition/types.js

@@ -5,7 +5,7 @@
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */ export { };
 
 //# sourceMappingURL=types.js.map

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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@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 {@link\n * TransitionOptions.nodeRef} was provided, the DOM node should be available in\n * `nodeRef.current` by this point if the transition requires DOM calculations.\n *\n * @remarks \\@since 4.0.0\n */\nexport type TransitionExitHandler = () => void;\n\n/**\n * @remarks \\@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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@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\n * 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 * @remarks \\@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 * @remarks \\@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 * @remarks \\@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   * @remarks \\@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 * @remarks \\@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 * @remarks \\@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   * @remarks \\@since 6.0.0\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n}\n\n/**\n * @remarks \\@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 * @remarks \\@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\n   * 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   * @remarks \\@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 * @remarks \\@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   * @remarks \\@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 * @remarks \\@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 * @remarks \\@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\n   * 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\n   * 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 * @remarks \\@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 * @remarks \\@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;AAslBR;;;;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.\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 * @since 4.0.0\n */\nexport type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;\n\n/**\n * @since 6.0.0\n */\nexport type TransitionEnterStage = \"enter\" | \"entering\" | \"entered\";\n\n/**\n * @since 6.0.0\n */\nexport type TransitionExitStage = \"exit\" | \"exiting\" | \"exited\";\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 * @since 6.0.0 Type union between `TransitionEnterStage` and `TransitionExitStage`\n */\nexport type TransitionStage = TransitionEnterStage | TransitionExitStage;\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   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while entering.\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   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while entering.\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   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while exiting.\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   * NOTE: This callback will be skipped when transitions are disabled. Use the\n   * `getTransitionCallbacks` helper if something should only be called once\n   * while 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;AAkmBR;;;;CAIC,GACD,WAQC"}

package/dist/transition/useCSSTransition.d.ts

@@ -3,11 +3,12 @@ import type { CSSTransitionHookOptions, CSSTransitionHookReturnValue } from "./t
  * This hook is used to create CSS transitions for different components whenever
  * a {@link TransitionHookOptions.transitionIn} flag is changed.
  *
- * @example
- * Simple Transition
+ * @example Simple Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {
@@ -54,11 +55,12 @@ import type { CSSTransitionHookOptions, CSSTransitionHookReturnValue } from "./t
  * }
  * ```
  *
- * @example
- * Visibility Transition
+ * @example Visibility Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {
@@ -111,8 +113,7 @@ import type { CSSTransitionHookOptions, CSSTransitionHookReturnValue } from "./t
  * }
  * ```
  *
- * @example
- * Mount Transition
+ * @example Mount Transition
  * ```tsx
  * import type { ReactElement } from "react";
  * import { useCSSTransition } from "@react-md/transition";
@@ -140,8 +141,10 @@ import type { CSSTransitionHookOptions, CSSTransitionHookReturnValue } from "./t
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-css-transition | useCSSTransition Demos}
+ * @see {@link https://next.react-md.dev/components/css-transition | CSSTransition Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */
 export declare function useCSSTransition<E extends HTMLElement>(options: CSSTransitionHookOptions<E>): CSSTransitionHookReturnValue<E>;

package/dist/transition/useCSSTransition.js

@@ -7,11 +7,12 @@ import { getTransitionClassNames } from "./utils.js";
  * This hook is used to create CSS transitions for different components whenever
  * a {@link TransitionHookOptions.transitionIn} flag is changed.
  *
- * @example
- * Simple Transition
+ * @example Simple Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {
@@ -58,11 +59,12 @@ import { getTransitionClassNames } from "./utils.js";
  * }
  * ```
  *
- * @example
- * Visibility Transition
+ * @example Visibility Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {
@@ -115,8 +117,7 @@ import { getTransitionClassNames } from "./utils.js";
  * }
  * ```
  *
- * @example
- * Mount Transition
+ * @example Mount Transition
  * ```tsx
  * import type { ReactElement } from "react";
  * import { useCSSTransition } from "@react-md/transition";
@@ -144,9 +145,11 @@ import { getTransitionClassNames } from "./utils.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-css-transition | useCSSTransition Demos}
+ * @see {@link https://next.react-md.dev/components/css-transition | CSSTransition Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */ export function useCSSTransition(options) {
     const { className, classNames, appear = false, enter = true, exit = true, timeout, temporary = false, exitedHidden = false, ...transitionOptions } = options;
     const { ref, stage, rendered, appearing, transitionTo, disablePortal } = useTransition({