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

package/dist/transition/useScaleTransition.js

@@ -1,14 +1,24 @@
 "use client";
 import { useCSSTransition } from "./useCSSTransition.js";
+/**
+ * The default {@link TransitionTimeout} to use for horizontal and vertical
+ * scale transitions.
+ *
+ * @since 2.0.0
+ * @since 6.0.0 Renamed from `SCALE_TIMEOUT` to `DEFAULT_SCALE_TIMEOUT`.
+ */ export const DEFAULT_SCALE_TIMEOUT = {
+    enter: 200,
+    exit: 150
+};
 /**
  * The default {@link CSSTransitionClassNames} for a horizontal scale
  * transition.
  *
- * @remarks
- * \@since 2.0.0
- * \@since 6.0.0 The class names were updated to be prefixed with
- * `rmd-scale-transition`
- */ export const SCALE_CLASSNAMES = {
+ * @since 2.0.0
+ * @since 6.0.0 The class names were updated to be prefixed with
+ * `rmd-scale-transition` and renamed from `SCALE_CLASSNAMES` to
+ * `DEFAULT_SCALE_CLASSNAMES`.
+ */ export const DEFAULT_SCALE_CLASSNAMES = {
     appear: "rmd-scale-transition--enter",
     appearActive: "rmd-scale-transition--enter-active",
     enter: "rmd-scale-transition--enter",
@@ -20,11 +30,12 @@ import { useCSSTransition } from "./useCSSTransition.js";
 /**
  * The default {@link CSSTransitionClassNames} for a vertical scale transition.
  *
- * @remarks
- * \@since 2.0.0
- * \@since 6.0.0 The class names were updated to be prefixed with
- * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}
- */ export const SCALE_Y_CLASSNAMES = {
+ * @since 2.0.0
+ * @since 6.0.0 The class names were updated to be prefixed with
+ * `rmd-scale-y-transition` and merged with the {@link DEFAULT_SCALE_CLASSNAMES}.
+ * It was also renamed from `SCALE_Y_CLASSNAMES` to
+ * `DEFAULT_SCALE_Y_CLASSNAMES`.
+ */ export const DEFAULT_SCALE_Y_CLASSNAMES = {
     appear: "rmd-scale-transition--enter rmd-scale-transition--y-enter",
     appearActive: "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active",
     enter: "rmd-scale-transition--enter rmd-scale-transition--y-enter",
@@ -33,24 +44,16 @@ import { useCSSTransition } from "./useCSSTransition.js";
     exit: "rmd-scale-transition--exit rmd-scale-transition--y-exit",
     exitActive: "rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active"
 };
-/**
- * The default {@link TransitionTimeout} to use for horizontal and vertical
- * scale transitions.
- *
- * @remarks \@since 2.0.0
- */ export const SCALE_TIMEOUT = {
-    enter: 200,
-    exit: 150
-};
 /**
  * Implements a scale transition that should generally be used for temporary
  * elements that are positioned via `position: absolute` or `position: fixed`.
  *
- * @example
- * Dropdown Menu Example
+ * @example Dropdown Menu Example
  * ```tsx
- * import { ReactElement, useRef, useState } from "react";
- * import { Button, useFixedPositioning, useScaleTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useFixedPositioning } from "@react-md/core/positioning/useFixedPositioning";
+ * import { useScaleTransition } from "@react-md/core/transition/useScaleTransition";
+ * import { type ReactElement, useRef, useState } from "react";
  *
  * function Example(): ReactElement {
  *   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -79,15 +82,18 @@ import { useCSSTransition } from "./useCSSTransition.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-scale-transition | useScaleTransition Demos}
+ * @see {@link https://next.react-md.dev/components/scale | Scale Demos}
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @since 4.0.0
  */ export function useScaleTransition(options) {
-    const { timeout = SCALE_TIMEOUT, vertical = false, temporary = true, classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES, ...transitionOptions } = options;
+    const { timeout = DEFAULT_SCALE_TIMEOUT, vertical = false, temporary = true, exitedHidden = true, classNames = vertical ? DEFAULT_SCALE_Y_CLASSNAMES : DEFAULT_SCALE_CLASSNAMES, ...transitionOptions } = options;
     return useCSSTransition({
         ...transitionOptions,
         timeout,
         temporary,
+        exitedHidden,
         classNames
     });
 }

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 * @remarks\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 * @remarks\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 * @remarks \\@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 * @remarks \\@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\n * 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 * @remarks \\@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    classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES,\n    ...transitionOptions\n  } = options;\n\n  return useCSSTransition({\n    ...transitionOptions,\n    timeout,\n    temporary,\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","classNames","transitionOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAA4D;IACvEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF;;;;;;;CAOC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,SAASI,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUH,aAAa,EACvBI,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,aAAaF,WAAWL,qBAAqBR,gBAAgB,EAC7D,GAAGgB,mBACJ,GAAGL;IAEJ,OAAOZ,iBAAiB;QACtB,GAAGiB,iBAAiB;QACpBJ;QACAE;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useScaleTransition.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSTransitionClassNames,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/**\n * The default {@link TransitionTimeout} to use for horizontal and vertical\n * scale transitions.\n *\n * @since 2.0.0\n * @since 6.0.0 Renamed from `SCALE_TIMEOUT` to `DEFAULT_SCALE_TIMEOUT`.\n */\nexport const DEFAULT_SCALE_TIMEOUT = {\n  enter: 200,\n  exit: 150,\n} as const satisfies TransitionTimeout;\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` and renamed from `SCALE_CLASSNAMES` to\n * `DEFAULT_SCALE_CLASSNAMES`.\n */\nexport const DEFAULT_SCALE_CLASSNAMES = {\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} as const satisfies CSSTransitionClassNames;\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 DEFAULT_SCALE_CLASSNAMES}.\n * It was also renamed from `SCALE_Y_CLASSNAMES` to\n * `DEFAULT_SCALE_Y_CLASSNAMES`.\n */\nexport const DEFAULT_SCALE_Y_CLASSNAMES = {\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} as const satisfies CSSTransitionClassNames;\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 DEFAULT_SCALE_CLASSNAMES}\n   * @see {@link DEFAULT_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 { Button } from \"@react-md/core/button/Button\";\n * import { useFixedPositioning } from \"@react-md/core/positioning/useFixedPositioning\";\n * import { useScaleTransition } from \"@react-md/core/transition/useScaleTransition\";\n * import { type ReactElement, useRef, useState } from \"react\";\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 * @see {@link https://next.react-md.dev/hooks/use-scale-transition | useScaleTransition Demos}\n * @see {@link https://next.react-md.dev/components/scale | Scale Demos}\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 = DEFAULT_SCALE_TIMEOUT,\n    vertical = false,\n    temporary = true,\n    exitedHidden = true,\n    classNames = vertical\n      ? DEFAULT_SCALE_Y_CLASSNAMES\n      : DEFAULT_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","DEFAULT_SCALE_TIMEOUT","enter","exit","DEFAULT_SCALE_CLASSNAMES","appear","appearActive","enterActive","enterDone","exitActive","DEFAULT_SCALE_Y_CLASSNAMES","useScaleTransition","options","timeout","vertical","temporary","exitedHidden","classNames","transitionOptions"],"mappings":"AAAA;AAQA,SAASA,gBAAgB,QAAQ,wBAAwB;AAEzD;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB;IACnCC,OAAO;IACPC,MAAM;AACR,EAAuC;AAEvC;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B;IACtCC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbC,WAAW;IACXL,MAAM;IACNM,YAAY;AACd,EAA6C;AAE7C;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B;IACxCL,QAAQ;IACRC,cACE;IACFJ,OAAO;IACPK,aACE;IACFC,WAAW;IACXL,MAAM;IACNM,YACE;AACJ,EAA6C;AAgC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,SAASE,mBACdC,OAAsC;IAEtC,MAAM,EACJC,UAAUZ,qBAAqB,EAC/Ba,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,aAAaH,WACTJ,6BACAN,wBAAwB,EAC5B,GAAGc,mBACJ,GAAGN;IAEJ,OAAOZ,iBAAiB;QACtB,GAAGkB,iBAAiB;QACpBL;QACAE;QACAC;QACAC;IACF;AACF"}

package/dist/transition/useSkeletonPlaceholder.d.ts

@@ -1,15 +1,20 @@
-import type { CSSProperties } from "react";
-export declare const skeletonPlaceholder: import("../utils/bem.js").BEMResult;
-/** @remarks \@since 6.0.0 */
-export interface SkeletonPlaceholderOptions {
+import { type CSSProperties } from "react";
+import { type SkeletonPlaceholderRandomOptions } from "./skeletonPlaceholderUtils.js";
+/** @since 6.0.0 */
+export interface SkeletonPlaceholderOptions extends SkeletonPlaceholderRandomOptions {
     style?: CSSProperties;
     className?: string;
-    /** @defaultValue `40` */
-    minPercentage?: number;
-    /** @defaultValue `85` */
-    maxPercentage?: number;
     /**
-     * Set this value tp a number or length unit string to set the height with
+     * Set this to a custom `animation-delay` value (should be in milliseconds).
+     *
+     * @example
+     * ```ts
+     * delay="200ms"
+     * ```
+     */
+    delay?: string;
+    /**
+     * Set this value to a number or length unit string to set the height with
      * inline styles.
      *
      * If this is `undefined`, it will use the skeleton placeholder CSS variable
@@ -24,8 +29,7 @@ export interface SkeletonPlaceholderOptions {
      * Set this value to an empty string if you want to control the width through
      * SCSS.
      *
-     * @example
-     * No Inline Width CSS
+     * @example No Inline Width CSS
      * ```scss
      * @use "@react-md/core";
      *
@@ -41,11 +45,10 @@ export interface SkeletonPlaceholderOptions {
      * }
      * ```
      *
-     * @example
-     * No Inline Width
+     * @example No Inline Width
      * ```ts
      * import type { ReactElement } from "@react";
-     * import { useSkeletonPlaceholder } from "@react-md/core";
+     * import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
      *
      * import styles from "./MyComponent.module.scss";
      *
@@ -63,11 +66,10 @@ export interface SkeletonPlaceholderOptions {
      * Set this value to a number or length unit string to set the width with
      * inline styles.
      *
-     * @example
-     * Custom Inline Width
+     * @example Custom Inline Width
      * ```ts
      * import type { ReactElement } from "@react";
-     * import { useSkeletonPlaceholder } from "@react-md/core";
+     * import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
      *
      * export function Example(): ReactElement {
      *   const skeletonProps = useSkeletonPlaceholder({
@@ -97,11 +99,10 @@ export interface SkeletonPlaceholderOptions {
      * to be applied. This is really only useful if you can prerender parts of
      * your layout while waiting for the data to load.
      *
-     * @example
-     * Pre-rendered Layout
+     * @example Pre-rendered Layout
      * ```tsx
      * import type { ReactElement } from "@react";
-     * import { SkeletonPlaceholder } from "@react-md/core";
+     * import { SkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
      *
      * interface Data {
      *   id: string;
@@ -181,8 +182,27 @@ export interface SkeletonPlaceholderOptions {
      */
     disabled?: boolean;
 }
+/**
+ * @since 6.0.0
+ */
 export interface SkeletonPlaceholderStylingProps {
     style?: CSSProperties;
     className: string;
 }
+/**
+ * @example Simple Example
+ * ```tsx
+ * import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
+ * import { type ReactElement } from "react";
+ *
+ * export default function UsingTheHookExample(): ReactElement {
+ *   const { style, className } = useSkeletonPlaceholder();
+ *   return <div style={style} className={className} />;
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}
+ * @see {@link https://next.react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}
+ * @since 6.0.0
+ */
 export declare function useSkeletonPlaceholder(options?: SkeletonPlaceholderOptions): SkeletonPlaceholderStylingProps;

package/dist/transition/useSkeletonPlaceholder.js

@@ -1,62 +1,78 @@
 "use client";
 import { cnb } from "cnbuilder";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { useSsr } from "../SsrProvider.js";
-import { bem } from "../utils/bem.js";
-import { randomInt } from "../utils/randomInt.js";
-export const skeletonPlaceholder = bem("rmd-skeleton-placeholder");
-export function useSkeletonPlaceholder(options = {}) {
-    const { style: propStyle, className, height, width: propWidth, disabled = false, minPercentage = 40, maxPercentage = 85 } = options;
+import { randomSkeletonPlaceholder, skeletonPlaceholder } from "./skeletonPlaceholderUtils.js";
+/**
+ * @example Simple Example
+ * ```tsx
+ * import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
+ * import { type ReactElement } from "react";
+ *
+ * export default function UsingTheHookExample(): ReactElement {
+ *   const { style, className } = useSkeletonPlaceholder();
+ *   return <div style={style} className={className} />;
+ * }
+ * ```
+ *
+ * @see {@link https://next.react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}
+ * @see {@link https://next.react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}
+ * @since 6.0.0
+ */ export function useSkeletonPlaceholder(options = {}) {
+    const { style: propStyle, className, height, width: propWidth, disabled = false, delay: propDelay, minDelay, maxDelay, minPercentage, maxPercentage } = options;
     const ssr = useSsr();
-    const [randomPercentage, setRandomPercentage] = useState(()=>{
-        if (typeof window === "undefined" || ssr || typeof propWidth !== "undefined") {
-            return;
+    const isDefinedWidth = typeof propWidth !== "undefined";
+    const isDefinedDelay = typeof propDelay !== "undefined";
+    const [randomStyles, setRandomStyles] = useState(()=>{
+        if (typeof window === "undefined" || ssr || disabled) {
+            return {};
         }
-        return `${randomInt({
-            min: minPercentage,
-            max: maxPercentage
-        })}%`;
+        return randomSkeletonPlaceholder({
+            minDelay,
+            maxDelay,
+            minPercentage,
+            maxPercentage
+        });
     });
     useEffect(()=>{
-        if (!ssr || disabled || typeof propWidth !== "undefined") {
+        if (!ssr || disabled || isDefinedDelay && isDefinedWidth) {
             return;
         }
-        setRandomPercentage(`${randomInt({
-            min: minPercentage,
-            max: maxPercentage
-        })}%`);
+        setRandomStyles(randomSkeletonPlaceholder({
+            minDelay,
+            maxDelay,
+            minPercentage,
+            maxPercentage
+        }));
     }, [
         disabled,
+        isDefinedDelay,
+        isDefinedWidth,
+        maxDelay,
         maxPercentage,
+        minDelay,
         minPercentage,
-        propWidth,
         ssr
     ]);
-    const width = useMemo(()=>{
-        if (disabled || typeof propWidth !== "undefined") {
-            return propWidth;
+    let width = propWidth;
+    let animationDelay = propDelay;
+    if (!disabled) {
+        if (!isDefinedDelay) {
+            ({ animationDelay } = randomStyles);
         }
-        if (ssr) {
-            return randomPercentage;
+        if (!isDefinedWidth) {
+            ({ width } = randomStyles);
         }
-        return `${randomInt({
-            min: minPercentage,
-            max: maxPercentage
-        })}%`;
-    }, [
-        disabled,
-        maxPercentage,
-        minPercentage,
-        propWidth,
-        randomPercentage,
-        ssr
-    ]);
+    }
     let style = propStyle;
-    if (typeof width !== "undefined" && width !== "" || typeof height !== "undefined") {
+    if (!!width || !!animationDelay || typeof height !== "undefined") {
         style = {
             ...style,
             height: height ?? style?.height,
-            width: width ?? style?.width
+            width: width ?? style?.width,
+            // Note: not including MozAnimationDelay and WebkitAnimationDelay since
+            // they weren't applied when they were set. Probably no longer required?
+            animationDelay: animationDelay ?? style?.animationDelay
         };
     }
     return {

package/dist/transition/useSkeletonPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useSkeletonPlaceholder.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type { CSSProperties } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { randomInt } from \"../utils/randomInt.js\";\n\nexport const skeletonPlaceholder = bem(\"rmd-skeleton-placeholder\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface SkeletonPlaceholderOptions {\n  style?: CSSProperties;\n  className?: string;\n\n  /** @defaultValue `40` */\n  minPercentage?: number;\n\n  /** @defaultValue `85` */\n  maxPercentage?: number;\n\n  /**\n   * Set this value tp 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\n   * 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\n   * 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\n   * 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\n   * Pre-rendered Layout\n   * ```tsx\n   * import type { ReactElement } from \"@react\";\n   * import { SkeletonPlaceholder } from \"@react-md/core\";\n   *\n   * interface Data {\n   *   id: string;\n   *   name: string;\n   *   createdBy: string\n   *   createdOn: string;\n   *   modifiedBy: string;\n   *   modifiedOn: string;\n   * }\n   *\n   * function ShowData({\n   *   id,\n   *   name,\n   *   createdBy,\n   *   createdOn,\n   *   modifiedBy,\n   *   modifiedOn,\n   * }: Partial<Data>:: ReactElement {\n   *   const loading =\n   *     !name &&\n   *     !createdBy &&\n   *     !createdOn &&\n   *     !modifiedBy &&\n   *     !modifiedOn;\n   *\n   *   return (\n   *     <Box grid 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    minPercentage = 40,\n    maxPercentage = 85,\n  } = options;\n  const ssr = useSsr();\n\n  const [randomPercentage, setRandomPercentage] = useState<string | undefined>(\n    () => {\n      if (\n        typeof window === \"undefined\" ||\n        ssr ||\n        typeof propWidth !== \"undefined\"\n      ) {\n        return;\n      }\n\n      return `${randomInt({ min: minPercentage, max: maxPercentage })}%`;\n    }\n  );\n\n  useEffect(() => {\n    if (!ssr || disabled || typeof propWidth !== \"undefined\") {\n      return;\n    }\n\n    setRandomPercentage(\n      `${randomInt({ min: minPercentage, max: maxPercentage })}%`\n    );\n  }, [disabled, maxPercentage, minPercentage, propWidth, ssr]);\n\n  const width = useMemo(() => {\n    if (disabled || typeof propWidth !== \"undefined\") {\n      return propWidth;\n    }\n\n    if (ssr) {\n      return randomPercentage;\n    }\n\n    return `${randomInt({ min: minPercentage, max: maxPercentage })}%`;\n  }, [\n    disabled,\n    maxPercentage,\n    minPercentage,\n    propWidth,\n    randomPercentage,\n    ssr,\n  ]);\n\n  let style: CSSProperties | undefined = propStyle;\n  if (\n    (typeof width !== \"undefined\" && width !== \"\") ||\n    typeof height !== \"undefined\"\n  ) {\n    style = {\n      ...style,\n      height: height ?? style?.height,\n      width: width ?? style?.width,\n    };\n  }\n\n  return {\n    style,\n    className: cnb(className, !disabled && skeletonPlaceholder()),\n  };\n}\n"],"names":["cnb","useEffect","useMemo","useState","useSsr","bem","randomInt","skeletonPlaceholder","useSkeletonPlaceholder","options","style","propStyle","className","height","width","propWidth","disabled","minPercentage","maxPercentage","ssr","randomPercentage","setRandomPercentage","window","min","max"],"mappings":"AAAA;AACA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACrD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,SAAS,QAAQ,wBAAwB;AAElD,OAAO,MAAMC,sBAAsBF,IAAI,4BAA4B;AAkMnE,OAAO,SAASG,uBACdC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,MAAM,EACNC,OAAOC,SAAS,EAChBC,WAAW,KAAK,EAChBC,gBAAgB,EAAE,EAClBC,gBAAgB,EAAE,EACnB,GAAGT;IACJ,MAAMU,MAAMf;IAEZ,MAAM,CAACgB,kBAAkBC,oBAAoB,GAAGlB,SAC9C;QACE,IACE,OAAOmB,WAAW,eAClBH,OACA,OAAOJ,cAAc,aACrB;YACA;QACF;QAEA,OAAO,CAAC,EAAET,UAAU;YAAEiB,KAAKN;YAAeO,KAAKN;QAAc,GAAG,CAAC,CAAC;IACpE;IAGFjB,UAAU;QACR,IAAI,CAACkB,OAAOH,YAAY,OAAOD,cAAc,aAAa;YACxD;QACF;QAEAM,oBACE,CAAC,EAAEf,UAAU;YAAEiB,KAAKN;YAAeO,KAAKN;QAAc,GAAG,CAAC,CAAC;IAE/D,GAAG;QAACF;QAAUE;QAAeD;QAAeF;QAAWI;KAAI;IAE3D,MAAML,QAAQZ,QAAQ;QACpB,IAAIc,YAAY,OAAOD,cAAc,aAAa;YAChD,OAAOA;QACT;QAEA,IAAII,KAAK;YACP,OAAOC;QACT;QAEA,OAAO,CAAC,EAAEd,UAAU;YAAEiB,KAAKN;YAAeO,KAAKN;QAAc,GAAG,CAAC,CAAC;IACpE,GAAG;QACDF;QACAE;QACAD;QACAF;QACAK;QACAD;KACD;IAED,IAAIT,QAAmCC;IACvC,IACE,AAAC,OAAOG,UAAU,eAAeA,UAAU,MAC3C,OAAOD,WAAW,aAClB;QACAH,QAAQ;YACN,GAAGA,KAAK;YACRG,QAAQA,UAAUH,OAAOG;YACzBC,OAAOA,SAASJ,OAAOI;QACzB;IACF;IAEA,OAAO;QACLJ;QACAE,WAAWZ,IAAIY,WAAW,CAACI,YAAYT;IACzC;AACF"}
+{"version":3,"sources":["../../src/transition/useSkeletonPlaceholder.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type SkeletonPlaceholderRandomOptions,\n  randomSkeletonPlaceholder,\n  skeletonPlaceholder,\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/transition/useSkeletonPlaceholder\";\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/transition/useSkeletonPlaceholder\";\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/transition/useSkeletonPlaceholder\";\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\n/**\n * @since 6.0.0\n */\nexport interface SkeletonPlaceholderStylingProps {\n  style?: CSSProperties;\n  className: string;\n}\n\n/**\n * @example Simple Example\n * ```tsx\n * import { useSkeletonPlaceholder } from \"@react-md/core/transition/useSkeletonPlaceholder\";\n * import { type ReactElement } from \"react\";\n *\n * export default function UsingTheHookExample(): ReactElement {\n *   const { style, className } = useSkeletonPlaceholder();\n *   return <div style={style} className={className} />;\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}\n * @see {@link https://next.react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}\n * @since 6.0.0\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;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA6BC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAEEC,yBAAyB,EACzBC,mBAAmB,QACd,gCAAgC;AAsMvC;;;;;;;;;;;;;;;CAeC,GACD,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.d.ts

@@ -1,18 +1,24 @@
-import type { CSSTransitionClassNames, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions, TransitionTimeout } from "./types.js";
-/** @remarks \@since 6.0.0 */
-export declare const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout>;
-/** @remarks \@since 6.0.0 */
-export declare const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: Readonly<CSSTransitionClassNames>;
-/** @remarks \@since 6.0.0 */
+import { type CSSTransitionHookReturnValue, type PreconfiguredCSSTransitionOptions } from "./types.js";
+/** @since 6.0.0 */
+export declare const DEFAULT_SLIDE_TRANSITION_TIMEOUT: 150;
+/** @since 6.0.0 */
+export declare const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: {
+    readonly enter: "rmd-slide--enter";
+    readonly enterActive: "rmd-slide--enter-active rmd-slide--animate";
+    readonly exit: "rmd-slide--exit";
+    readonly exitActive: "rmd-slide--exit-active rmd-slide--animate";
+};
+/** @since 6.0.0 */
 export type SlideTransitionOptions<E extends HTMLElement> = PreconfiguredCSSTransitionOptions<E>;
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import type { SlideDirection } from "@react-md/core";
- * import { slideContainer, useSlideTransition } from "@react-md/core";
- * import type { ReactElement, ReactNode } from "react";
- * import { useState } from "react";
+ * import {
+ *   type SlideDirection,
+ *   slideContainer,
+ * } from "@react-md/core/transition/SlideContainer";
+ * import { useSlideTransition } from "@react-md/core/transition/useSlideTransition";
+ * import { type ReactElement, type ReactNode, useState } from "react";
  *
  * interface SlideProps {
  *   active: boolean;
@@ -21,7 +27,7 @@ export type SlideTransitionOptions<E extends HTMLElement> = PreconfiguredCSSTran
  *
  * function Slide({ active, children }: SlideProps): ReactElement | null {
  *   const { rendered, elementProps } = useSlideTransition({
- *     transition: active,
+ *     transitionIn: active,
  *   });
  *
  *   if (!rendered) {
@@ -41,7 +47,7 @@ export type SlideTransitionOptions<E extends HTMLElement> = PreconfiguredCSSTran
  *     direction: "left",
  *     activeIndex: 0,
  *   });
- *   const { direction, activeIndex } = state
+ *   const { direction, activeIndex } = state;
  *
  *   // when changing a slide, `direction` should be set to "left" if the
  *   // previous `activeIndex` is less than the next index
@@ -53,23 +59,18 @@ export type SlideTransitionOptions<E extends HTMLElement> = PreconfiguredCSSTran
  *   // }))
  *
  *   return (
- *     <div className={slideContainer({ direction )}>
- *       <Slide active={activeIndex === 0}>
- *         Slide 1
- *       </Slide>
- *       <Slide active={activeIndex === 1}>
- *         Slide 2
- *       </Slide>
- *       <Slide active={activeIndex === 2}>
- *         Slide 3
- *       </Slide>
+ *     <div className={slideContainer({ direction })}>
+ *       <Slide active={activeIndex === 0}>Slide 1</Slide>
+ *       <Slide active={activeIndex === 1}>Slide 2</Slide>
+ *       <Slide active={activeIndex === 2}>Slide 3</Slide>
  *     </div>
  *   );
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slide | Slide Demos}
  * @see {@link SlideContainer} and {@link Slide} for convenient default
  * implementations.
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export declare function useSlideTransition<E extends HTMLElement>(options: SlideTransitionOptions<E>): CSSTransitionHookReturnValue<E>;

package/dist/transition/useSlideTransition.js

@@ -1,21 +1,22 @@
 "use client";
 import { cnb } from "cnbuilder";
 import { useCSSTransition } from "./useCSSTransition.js";
-/** @remarks \@since 6.0.0 */ export const DEFAULT_SLIDE_TRANSITION_TIMEOUT = 150;
-/** @remarks \@since 6.0.0 */ export const DEFAULT_SLIDE_TRANSITION_CLASSNAMES = {
+/** @since 6.0.0 */ export const DEFAULT_SLIDE_TRANSITION_TIMEOUT = 150;
+/** @since 6.0.0 */ export const DEFAULT_SLIDE_TRANSITION_CLASSNAMES = {
     enter: "rmd-slide--enter",
     enterActive: "rmd-slide--enter-active rmd-slide--animate",
     exit: "rmd-slide--exit",
     exitActive: "rmd-slide--exit-active rmd-slide--animate"
 };
 /**
- * @example
- * Simple Example
+ * @example Simple Example
  * ```tsx
- * import type { SlideDirection } from "@react-md/core";
- * import { slideContainer, useSlideTransition } from "@react-md/core";
- * import type { ReactElement, ReactNode } from "react";
- * import { useState } from "react";
+ * import {
+ *   type SlideDirection,
+ *   slideContainer,
+ * } from "@react-md/core/transition/SlideContainer";
+ * import { useSlideTransition } from "@react-md/core/transition/useSlideTransition";
+ * import { type ReactElement, type ReactNode, useState } from "react";
  *
  * interface SlideProps {
  *   active: boolean;
@@ -24,7 +25,7 @@ import { useCSSTransition } from "./useCSSTransition.js";
  *
  * function Slide({ active, children }: SlideProps): ReactElement | null {
  *   const { rendered, elementProps } = useSlideTransition({
- *     transition: active,
+ *     transitionIn: active,
  *   });
  *
  *   if (!rendered) {
@@ -44,7 +45,7 @@ import { useCSSTransition } from "./useCSSTransition.js";
  *     direction: "left",
  *     activeIndex: 0,
  *   });
- *   const { direction, activeIndex } = state
+ *   const { direction, activeIndex } = state;
  *
  *   // when changing a slide, `direction` should be set to "left" if the
  *   // previous `activeIndex` is less than the next index
@@ -56,24 +57,19 @@ import { useCSSTransition } from "./useCSSTransition.js";
  *   // }))
  *
  *   return (
- *     <div className={slideContainer({ direction )}>
- *       <Slide active={activeIndex === 0}>
- *         Slide 1
- *       </Slide>
- *       <Slide active={activeIndex === 1}>
- *         Slide 2
- *       </Slide>
- *       <Slide active={activeIndex === 2}>
- *         Slide 3
- *       </Slide>
+ *     <div className={slideContainer({ direction })}>
+ *       <Slide active={activeIndex === 0}>Slide 1</Slide>
+ *       <Slide active={activeIndex === 1}>Slide 2</Slide>
+ *       <Slide active={activeIndex === 2}>Slide 3</Slide>
  *     </div>
  *   );
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slide | Slide Demos}
  * @see {@link SlideContainer} and {@link Slide} for convenient default
  * implementations.
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */ export function useSlideTransition(options) {
     const { timeout = DEFAULT_SLIDE_TRANSITION_TIMEOUT, className, temporary = false, exitedHidden = true, ...transitionOptions } = options;
     return useCSSTransition({

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/** @remarks \\@since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout> = 150;\n\n/** @remarks \\@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/** @remarks \\@since 6.0.0 */\nexport type SlideTransitionOptions<E extends HTMLElement> =\n  PreconfiguredCSSTransitionOptions<E>;\n\n/**\n * @example\n * 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 * @remarks \\@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,2BAA2B,GAC3B,OAAO,MAAMC,mCAAgE,IAAI;AAEjF,2BAA2B,GAC3B,OAAO,MAAMC,sCACX;IACEC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAMJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEC,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\";\n\nimport { cnb } from \"cnbuilder\";\n\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionHookReturnValue,\n  type PreconfiguredCSSTransitionOptions,\n  type TransitionTimeout,\n} from \"./types.js\";\nimport { useCSSTransition } from \"./useCSSTransition.js\";\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_TIMEOUT =\n  150 as const satisfies TransitionTimeout;\n\n/** @since 6.0.0 */\nexport const DEFAULT_SLIDE_TRANSITION_CLASSNAMES = {\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} as const satisfies CSSTransitionClassNames;\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 {\n *   type SlideDirection,\n *   slideContainer,\n * } from \"@react-md/core/transition/SlideContainer\";\n * import { useSlideTransition } from \"@react-md/core/transition/useSlideTransition\";\n * import { type ReactElement, type ReactNode, 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 *     transitionIn: 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}>Slide 1</Slide>\n *       <Slide active={activeIndex === 1}>Slide 2</Slide>\n *       <Slide active={activeIndex === 2}>Slide 3</Slide>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/slide | Slide Demos}\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;AAEA,SAASA,GAAG,QAAQ,YAAY;AAQhC,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,iBAAiB,GACjB,OAAO,MAAMC,mCACX,IAAyC;AAE3C,iBAAiB,GACjB,OAAO,MAAMC,sCAAsC;IACjDC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAA6C;AAM7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DC,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

@@ -4,8 +4,10 @@ import type { TransitionHookOptions, TransitionHookReturnValue } from "./types.j
  * since this is just a low-level hook that can be used to transition using
  * timeouts.
  *
+ * @see {@link https://next.react-md.dev/hooks/use-transition | useTransition Demos}
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
- * @remarks \@since 4.0.0
+ * @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>;