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

package/dist/transition/SlideContainer.js

@@ -7,9 +7,10 @@ const styles = bem("rmd-slide-container");
  * @see {@link useSlideTransition} for an example
  * @since 6.0.0
  */ export function slideContainer(options) {
-    const { className, direction } = options;
+    const { className, direction, vertical } = options;
     return cnb(styles({
-        [direction]: true
+        [direction]: true,
+        vertical
     }), className);
 }
 /**
@@ -18,7 +19,8 @@ const styles = bem("rmd-slide-container");
  *
  * @example Simple Example
  * ```tsx
- * import { SlideContainer, Slide } from "@react-md/core";
+ * import { Slide } from "@react-md/core/transition/Slide";
+ * import { SlideContainer } from "@react-md/core/transition/SlideContainer";
  * import type { ReactElement, ReactNode } from "react";
  * import { useState } from "react";
  *
@@ -29,17 +31,17 @@ const styles = bem("rmd-slide-container");
  *
  * function Example(): ReactElement {
  *   const [state, setState] = useState<State>({
- *     direction: "left",
+ *     direction: "forward",
  *     activeIndex: 0,
  *   });
  *   const { direction, activeIndex } = state;
  *
- *   // when changing a slide, `direction` should be set to "left" if the
+ *   // when changing a slide, `direction` should be set to "forward" if the
  *   // previous `activeIndex` is less than the next index
  *   //
  *   // i.e.
  *   // setState((prevState) => ({
- *   //   direction: prevState.activeIndex < index ? "left" : "right",
+ *   //   direction: prevState.activeIndex < index ? "forward" : "backward",
  *   //   activeIndex: index,
  *   // }))
  *
@@ -59,15 +61,17 @@ const styles = bem("rmd-slide-container");
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slide | Slide Demos}
  * @since 6.0.0
  */ export const SlideContainer = /*#__PURE__*/ forwardRef(function SlideContainer(props, ref) {
-    const { className, direction, children, ...remaining } = props;
+    const { className, direction, vertical, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
         ref: ref,
         className: slideContainer({
             className,
-            direction
+            direction,
+            vertical
         }),
         children: children
     });

package/dist/transition/SlideContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/SlideContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slide-container\");\n\n/**\n * @example Direction \"left\"\n * ```\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n * ```\n *\n * @example Direction \"right\"\n * ```\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n * ```\n *\n * @since 6.0.0\n */\nexport type SlideDirection = \"left\" | \"right\";\n\n/** @since 6.0.0 */\nexport interface SlideContainerClassNameOptions {\n  className?: string;\n\n  /** @see {@link SlideDirection} */\n  direction: SlideDirection;\n}\n\n/**\n * @see {@link useSlideTransition} for an example\n * @since 6.0.0\n */\nexport function slideContainer(\n  options: SlideContainerClassNameOptions\n): string {\n  const { className, direction } = options;\n\n  return cnb(styles({ [direction]: true }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SlideContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SlideContainerClassNameOptions {}\n\n/**\n * The `SlideContainer` is used to enable a slide transition when child `Slide`\n * components change.\n *\n * @example Simple Example\n * ```tsx\n * import { SlideContainer, Slide } from \"@react-md/core\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\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 *     <SlideContainer direction={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 *     </SlideContainer>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(\n  function SlideContainer(props, ref) {\n    const { className, direction, children, ...remaining } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={slideContainer({ className, direction })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","slideContainer","options","className","direction","SlideContainer","props","ref","children","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAqDnB;;;CAGC,GACD,OAAO,SAASE,eACdC,OAAuC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IAEjC,OAAOL,IAAIG,OAAO;QAAE,CAACI,UAAU,EAAE;IAAK,IAAID;AAC5C;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDC,GACD,OAAO,MAAME,+BAAiBP,WAC5B,SAASO,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEJ,SAAS,EAAEC,SAAS,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAEzD,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLJ,WAAWF,eAAe;YAAEE;YAAWC;QAAU;kBAEhDI;;AAGP,GACA"}
+{"version":3,"sources":["../../src/transition/SlideContainer.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-slide-container\");\n\n/**\n * @example Direction \"forward\"\n * ```\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n * ```\n *\n * @example Direction \"backward\"\n * ```\n *           -------------\n *           |           |\n *  Slide 1  |  Slide 2  |\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *      Slide 1     Slide 2\n *           |           |\n *           -------------\n *           -------------\n *           |           |\n *           |  Slide 1  |  Slide 2\n *           |           |\n *           -------------\n * ```\n *\n * @since 6.0.0\n */\nexport type SlideDirection = \"backward\" | \"forward\";\n\n/** @since 6.0.0 */\nexport interface SlideContainerClassNameOptions {\n  className?: string;\n\n  /** @see {@link SlideDirection} */\n  direction: SlideDirection;\n\n  vertical?: boolean;\n}\n\n/**\n * @see {@link useSlideTransition} for an example\n * @since 6.0.0\n */\nexport function slideContainer(\n  options: SlideContainerClassNameOptions\n): string {\n  const { className, direction, vertical } = options;\n\n  return cnb(styles({ [direction]: true, vertical }), className);\n}\n\n/** @since 6.0.0 */\nexport interface SlideContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SlideContainerClassNameOptions {}\n\n/**\n * The `SlideContainer` is used to enable a slide transition when child `Slide`\n * components change.\n *\n * @example Simple Example\n * ```tsx\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import type { ReactElement, ReactNode } from \"react\";\n * import { useState } from \"react\";\n *\n * interface State {\n *   direction: SlideDirection;\n *   activeIndex: number;\n * }\n *\n * function Example(): ReactElement {\n *   const [state, setState] = useState<State>({\n *     direction: \"forward\",\n *     activeIndex: 0,\n *   });\n *   const { direction, activeIndex } = state;\n *\n *   // when changing a slide, `direction` should be set to \"forward\" if the\n *   // previous `activeIndex` is less than the next index\n *   //\n *   // i.e.\n *   // setState((prevState) => ({\n *   //   direction: prevState.activeIndex < index ? \"forward\" : \"backward\",\n *   //   activeIndex: index,\n *   // }))\n *\n *   return (\n *     <SlideContainer direction={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 *     </SlideContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/slide | Slide Demos}\n * @since 6.0.0\n */\nexport const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(\n  function SlideContainer(props, ref) {\n    const { className, direction, vertical, children, ...remaining } = props;\n\n    return (\n      <div\n        {...remaining}\n        ref={ref}\n        className={slideContainer({ className, direction, vertical })}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","bem","styles","slideContainer","options","className","direction","vertical","SlideContainer","props","ref","children","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8BC,UAAU,QAAQ,QAAQ;AAExD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAuDnB;;;CAGC,GACD,OAAO,SAASE,eACdC,OAAuC;IAEvC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGH;IAE3C,OAAOL,IAAIG,OAAO;QAAE,CAACI,UAAU,EAAE;QAAMC;IAAS,IAAIF;AACtD;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDC,GACD,OAAO,MAAMG,+BAAiBR,WAC5B,SAASQ,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEL,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAEnE,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLL,WAAWF,eAAe;YAAEE;YAAWC;YAAWC;QAAS;kBAE1DI;;AAGP,GACA"}

package/dist/transition/_transition.scss

@@ -1,45 +1,136 @@
+////
+/// @group core.transition
+////
+
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
 @use "../theme/colors";
 @use "../theme/theme";
 
+/// Set to `true` to disable all transition styles.
+/// @type Boolean
 $disable-transitions: false !default;
+
+/// Set to `true` to disable the collapse transition styles.
+/// @type Boolean
 $disable-collapse-transition: $disable-transitions !default;
+
+/// Set to `true` to disable the cross-fade transition styles.
+/// @type Boolean
 $disable-cross-fade-transition: $disable-transitions !default;
+
+/// Set to `true` to disable the scale transition styles.
+/// @type Boolean
 $disable-scale-transition: $disable-transitions !default;
+
+/// Set to `true` to disable the scale-y transition styles.
+/// @type Boolean
 $disable-scale-y-transition: $disable-scale-transition !default;
+
+/// Set to `true` to disable the skeleton placeholder transition styles.
+/// @type Boolean
 $disable-skeleton-placeholder: $disable-transitions !default;
+
+/// Set to `true` to disable the slide transition styles.
+/// @type Boolean
 $disable-slide-transition: $disable-transitions !default;
+
+/// Set to `true` to disable the max-width transition styles.
+/// @type Boolean
 $disable-max-width-transition: $disable-transitions !default;
+
+/// Set to `true` to disable the max-width transition gap styles.
+/// @type Boolean
 $disable-max-width-transition-gap: $disable-max-width-transition !default;
 
+/// The default transition duration for linear transitions. i.e. a transition
+/// that has the same enter and leave duration.
+/// @type Number
 $linear-duration: 0.15s !default;
+
+/// The default transition duration when an element enters less quickly than it
+/// leaves.
+/// @type Number
 $enter-duration: 0.2s !default;
+
+/// The default transition duration when an element leaves more quickly than it
+/// enters.
+/// @type Number
 $leave-duration: 0.15s !default;
 
+/// A default transition-timing-function to use when an element should appear quickly.
+/// @type String
 $sharp-timing-function: cubic-bezier(0.4, 0, 0.6, 1) !default;
+
+/// A default transition-timing-function to use when an element should appear
+/// and exit at the same speed.
+/// @type String
 $linear-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+/// A default transition-timing-function to use when an element should
+/// accelerate during the transition.
+/// @type String
 $acceleration-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
+
+/// A default transition-timing-function to use when an element should
+/// decelerate during the transition.
+/// @type String
 $deceleration-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
 
+/// The starting position for the `CrossFade` transition.
+/// @type Number
 $cross-fade-translate-distance: -1rem !default;
+
+/// The cross fade transition duration.
+/// @type Number
 $cross-fade-transition-duration: 0.3s !default;
 
+/// The scale transition enter duration.
+/// @type Number
 $scale-transition-enter-duration: $enter-duration !default;
+
+/// The scale transition leave duration.
+/// @type Number
 $scale-transition-leave-duration: $leave-duration !default;
+
+/// The scale transition y (vertical) enter duration.
+/// @type Number
 $scale-y-transition-enter-duration: $enter-duration !default;
+
+/// The scale transition y (vertical) leave duration.
+/// @type Number
 $scale-y-transition-leave-duration: $leave-duration !default;
 
+/// The default skeleton placeholder height.
+/// @type Number
 $skeleton-placeholder-height: 1.125em !default;
+
+/// The default skeleton placeholder width`.
+/// @type Number
 $skeleton-placeholder-width: 43% !default;
+
+/// The default skeleton placeholder border-radius.
+/// @type Number
 $skeleton-placeholder-border-radius: 0.25rem !default;
+
+/// The default light theme skeleton placeholder background color.
+/// @type Color
 $skeleton-placeholder-light-background-color: #000 !default;
+
+/// The default dark theme skeleton placeholder background color.
+/// @type Color
 $skeleton-placeholder-dark-background-color: colors.$grey-300 !default;
+
+/// The default skeleton placeholder background color
+/// @type Color
 $skeleton-placeholder-background-color: theme.get-default-color(
   $skeleton-placeholder-dark-background-color,
   $skeleton-placeholder-light-background-color
 ) !default;
+
+/// The default skeleton placeholder `@keyframes` styles.
+/// @type Map
 $skeleton-placeholder-animation: (
   0%: (
     opacity: 0.06,
@@ -54,16 +145,38 @@ $skeleton-placeholder-animation: (
     opacity: 0.06,
   ),
 ) !default;
+
+/// The default skeleton placeholder animation duration.
+/// @type Number
 $skeleton-placeholder-animation-duration: 1.8s !default;
+
+/// The default skeleton placeholder animation timing function.
+/// @type String
 $skeleton-placeholder-animation-timing-function: ease-in-out !default;
 
+/// The default slide transition duration.
+/// @type Number
 $slide-duration: $linear-duration !default;
+
+/// The default slide transition timing function.
+/// @type String
 $slide-timing-function: $linear-timing-function !default;
 
+/// The default max width transition duration.
+/// @type Number
 $max-width-transition-duration: $linear-duration !default;
+
+/// The default max width transition timing function.
+/// @type Number
 $max-width-transition-timing-function: $linear-timing-function !default;
+
+/// The default max width transition's `max-width`
+/// @type Number
 $max-width-transition-default: 100% !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $transition-variables: (
   skeleton-placeholder-background-color,
   skeleton-placeholder-height,
@@ -73,6 +186,9 @@ $transition-variables: (
   max-width-gap
 );
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function transition-get-var($name, $fallback: null) {
   $var: utils.get-var-name($transition-variables, $name, "transition");
   @if $fallback {
@@ -82,16 +198,24 @@ $transition-variables: (
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin transition-set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($transition-variables, $name, "transition")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin transition-use-var($property, $name: $property, $fallback: null) {
   #{$property}: transition-get-var($name, $fallback);
 }
 
+/// Applies the light the variables based on feature flags
 @mixin transition-use-light-theme {
   @if not $disable-skeleton-placeholder {
     @include transition-set-var(
@@ -101,6 +225,7 @@ $transition-variables: (
   }
 }
 
+/// Applies the dark the variables based on feature flags
 @mixin transition-use-dark-theme {
   @if not $disable-skeleton-placeholder {
     @include transition-set-var(
@@ -111,12 +236,19 @@ $transition-variables: (
 }
 
 /// Note: This was only added because there was an issue with stylelint using @include as the only child within a keyframes
+///
+/// @param {String} name - the keyframes animation name.
+/// @content The keyframes content.
+/// @access private
 @mixin keyframes($name) {
   @keyframes #{$name} {
     @content;
   }
 }
 
+/// This should only be used if not using the `transition-styles` mixin.
+///
+/// @see {mixin} transition-styles
 @mixin collapse-transition {
   .rmd-collapse {
     transition-property: max-height, padding-bottom, padding-top;
@@ -136,6 +268,9 @@ $transition-variables: (
   }
 }
 
+/// This should only be used if not using the `transition-styles` mixin.
+///
+/// @see {mixin} transition-styles
 @mixin cross-fade-transition {
   .rmd-cross-fade {
     opacity: 0;
@@ -151,6 +286,9 @@ $transition-variables: (
   }
 }
 
+/// This should not be used if the `transition-styles` mixin is used.
+///
+/// @see {mixin} transition-styles
 @mixin scale-transition {
   .rmd-scale-transition--enter {
     opacity: 0;
@@ -179,6 +317,9 @@ $transition-variables: (
   }
 }
 
+/// This should not be used if the `transition-styles` mixin is used.
+///
+/// @see {mixin} transition-styles
 @mixin scale-y-transition {
   .rmd-scale-transition--y-enter {
     transform: scaleY(0);
@@ -205,6 +346,9 @@ $transition-variables: (
   }
 }
 
+/// This should not be used if the `transition-styles` mixin is used.
+///
+/// @see {mixin} transition-styles
 @mixin skeleton-placeholder-animation {
   .rmd-skeleton-placeholder {
     @include transition-use-var(
@@ -228,8 +372,20 @@ $transition-variables: (
   }
 }
 
+/// This should not be used if the `transition-styles` mixin is used.
+///
+/// @see {mixin} transition-styles
 @mixin slide-transition {
   .rmd-slide-container {
+    --p1-start-x: var(--p1-start);
+    --p1-start-y: 0;
+    --p1-end-x: var(--p1-end);
+    --p1-end-y: 0;
+    --p2-start-x: var(--p2-start);
+    --p2-start-y: 0;
+    --p2-end-x: var(--p2-end);
+    --p2-end-y: 0;
+
     align-items: flex-start;
     display: flex;
     flex-wrap: nowrap;
@@ -237,19 +393,30 @@ $transition-variables: (
     overflow: hidden auto;
     width: 100%;
 
-    &--left {
+    &--forward {
       --p1-start: 0;
       --p2-start: 0;
       --p1-end: -100%;
       --p2-end: -100%;
     }
 
-    &--right {
+    &--backward {
       --p1-start: -100%;
       --p2-start: -100%;
       --p1-end: 0;
       --p2-end: 0;
     }
+
+    &--vertical {
+      --p1-start-x: 0;
+      --p1-start-y: var(--p1-start);
+      --p1-end-x: 0;
+      --p1-end-y: var(--p1-end);
+      --p2-start-x: 0;
+      --p2-start-y: var(--p2-start);
+      --p2-end-x: 0;
+      --p2-end-y: var(--p2-end);
+    }
   }
 
   .rmd-slide {
@@ -264,23 +431,24 @@ $transition-variables: (
     }
 
     &--enter {
-      transform: translate3d(var(--p1-start), 0, 0);
+      transform: translate3d(var(--p1-start-x), var(--p1-start-y), 0);
     }
 
     &--enter-active {
-      transform: translate3d(var(--p1-end), 0, 0);
+      transform: translate3d(var(--p1-end-x), var(--p1-end-y), 0);
     }
 
     &--exit {
-      transform: translate3d(var(--p2-start), 0, 0);
+      transform: translate3d(var(--p2-start-x), var(--p2-start-y), 0);
     }
 
     &--exit-active {
-      transform: translate3d(var(--p2-end), 0, 0);
+      transform: translate3d(var(--p2-end-x), var(--p2-end-y), 0);
     }
   }
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin transition-variables {
   @if not $disable-skeleton-placeholder {
     @include transition-set-var(
@@ -306,6 +474,10 @@ $transition-variables: (
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin transition-styles($disable-layer: false) {
   @include utils.optional-layer(
     transition,

package/dist/transition/getTransitionCallbacks.d.ts

@@ -0,0 +1,76 @@
+import { type TransitionCallbacks, type TransitionEnterHandler, type TransitionExitHandler } from "./types.js";
+/**
+ * @since 6.0.0
+ */
+export interface GetTransitionCallbacksOptions extends TransitionCallbacks {
+    /**
+     * Set this to `true` if the `onEnterOnce` callback should be triggered for
+     * the `onEnter` callback instead of `onEntering`.
+     *
+     * @defaultValue `false`
+     */
+    enter?: boolean;
+    /**
+     * If this function is provided, it will be called:
+     *
+     * - `onEntered` if `disableTransition` is `true` or
+     *   `TRANSITION_CONFIG.disabled` is `true`
+     * - otherwise:
+     *   - `onEnter` if `enter` is `true`
+     *   - `onEntering` if `enter` is `false` or not provided
+     */
+    onEnterOnce?: TransitionEnterHandler;
+    /**
+     * Set this to `true` if the `onExitOnce` callback should be triggered for
+     * the `onExit` callback instead of `onExiting`.
+     *
+     * @defaultValue `false`
+     */
+    exit?: boolean;
+    /**
+     * If this function is provided, it will be called:
+     *
+     * - `onExited` if `disableTransition` is `true` or
+     *   `TRANSITION_CONFIG.disabled` is `true`
+     * - otherwise:
+     *   - `onExit` if `enter` is `true`
+     *   - `onExiting` if `enter` is `false` or not provided
+     */
+    onExitOnce?: TransitionExitHandler;
+    /**
+     * Set this to `true` if the component has manually disabled transitions.
+     *
+     * @defaultValue `false`
+     */
+    disableTransition?: boolean;
+}
+/**
+ * This is a helper function for applying specific effects to the transition
+ * callbacks when transitions might be disabled. This is probably an internal
+ * only function, but might be useful externally as well. Here are a few
+ * examples for it's usage internally:
+ *
+ * @example Autocomplete Behavior
+ * ```tsx
+ *   listboxProps={{
+ *      ...getTransitionCallbacks({
+ *        enter: true,
+ *        onEnter,
+ *        onEntered,
+ *        onEnterOnce: () => {
+ *          onOpen();
+ *
+ *          // when the listbox is opened, need to flag the entered state to show
+ *          // that new `query` values should be accepted. Also store the initial
+ *          // query.
+ *          entered.current = true;
+ *          initialQuery.current = query;
+ *        },
+ *        disableTransition,
+ *      }),
+ *    }}
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function getTransitionCallbacks(options: GetTransitionCallbacksOptions): Required<TransitionCallbacks>;

package/dist/transition/getTransitionCallbacks.js

@@ -0,0 +1,57 @@
+import { TRANSITION_CONFIG } from "./config.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * This is a helper function for applying specific effects to the transition
+ * callbacks when transitions might be disabled. This is probably an internal
+ * only function, but might be useful externally as well. Here are a few
+ * examples for it's usage internally:
+ *
+ * @example Autocomplete Behavior
+ * ```tsx
+ *   listboxProps={{
+ *      ...getTransitionCallbacks({
+ *        enter: true,
+ *        onEnter,
+ *        onEntered,
+ *        onEnterOnce: () => {
+ *          onOpen();
+ *
+ *          // when the listbox is opened, need to flag the entered state to show
+ *          // that new `query` values should be accepted. Also store the initial
+ *          // query.
+ *          entered.current = true;
+ *          initialQuery.current = query;
+ *        },
+ *        disableTransition,
+ *      }),
+ *    }}
+ * ```
+ *
+ * @since 6.0.0
+ */ export function getTransitionCallbacks(options) {
+    const { disableTransition, enter, onEnter, onEntered, onEntering, onEnterOnce = noop, exit, onExit, onExited, onExiting, onExitOnce = noop } = options;
+    const handleEnter = (callback = noop, skipped)=>(appearing)=>{
+            callback(appearing);
+            if (!skipped) {
+                onEnterOnce(appearing);
+            }
+        };
+    const handleExit = (callback = noop, skipped)=>()=>{
+            callback();
+            if (!skipped) {
+                onExitOnce();
+            }
+        };
+    return {
+        onEnter: handleEnter(onEnter, !enter),
+        onEntering: handleEnter(onEntering, enter),
+        onEntered: handleEnter(onEntered, !disableTransition && !TRANSITION_CONFIG.disabled),
+        onExit: handleExit(onExit, !exit),
+        onExiting: handleExit(onExiting, exit),
+        onExited: handleExit(onExited, !disableTransition && !TRANSITION_CONFIG.disabled)
+    };
+}
+
+//# sourceMappingURL=getTransitionCallbacks.js.map

package/dist/transition/getTransitionCallbacks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/transition/getTransitionCallbacks.ts"],"sourcesContent":["import { TRANSITION_CONFIG } from \"./config.js\";\nimport {\n  type TransitionCallbacks,\n  type TransitionEnterHandler,\n  type TransitionExitHandler,\n} from \"./types.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport interface GetTransitionCallbacksOptions extends TransitionCallbacks {\n  /**\n   * Set this to `true` if the `onEnterOnce` callback should be triggered for\n   * the `onEnter` callback instead of `onEntering`.\n   *\n   * @defaultValue `false`\n   */\n  enter?: boolean;\n\n  /**\n   * If this function is provided, it will be called:\n   *\n   * - `onEntered` if `disableTransition` is `true` or\n   *   `TRANSITION_CONFIG.disabled` is `true`\n   * - otherwise:\n   *   - `onEnter` if `enter` is `true`\n   *   - `onEntering` if `enter` is `false` or not provided\n   */\n  onEnterOnce?: TransitionEnterHandler;\n\n  /**\n   * Set this to `true` if the `onExitOnce` callback should be triggered for\n   * the `onExit` callback instead of `onExiting`.\n   *\n   * @defaultValue `false`\n   */\n  exit?: boolean;\n\n  /**\n   * If this function is provided, it will be called:\n   *\n   * - `onExited` if `disableTransition` is `true` or\n   *   `TRANSITION_CONFIG.disabled` is `true`\n   * - otherwise:\n   *   - `onExit` if `enter` is `true`\n   *   - `onExiting` if `enter` is `false` or not provided\n   */\n  onExitOnce?: TransitionExitHandler;\n\n  /**\n   * Set this to `true` if the component has manually disabled transitions.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * This is a helper function for applying specific effects to the transition\n * callbacks when transitions might be disabled. This is probably an internal\n * only function, but might be useful externally as well. Here are a few\n * examples for it's usage internally:\n *\n * @example Autocomplete Behavior\n * ```tsx\n *   listboxProps={{\n *      ...getTransitionCallbacks({\n *        enter: true,\n *        onEnter,\n *        onEntered,\n *        onEnterOnce: () => {\n *          onOpen();\n *\n *          // when the listbox is opened, need to flag the entered state to show\n *          // that new `query` values should be accepted. Also store the initial\n *          // query.\n *          entered.current = true;\n *          initialQuery.current = query;\n *        },\n *        disableTransition,\n *      }),\n *    }}\n * ```\n *\n * @since 6.0.0\n */\nexport function getTransitionCallbacks(\n  options: GetTransitionCallbacksOptions\n): Required<TransitionCallbacks> {\n  const {\n    disableTransition,\n    enter,\n    onEnter,\n    onEntered,\n    onEntering,\n    onEnterOnce = noop,\n    exit,\n    onExit,\n    onExited,\n    onExiting,\n    onExitOnce = noop,\n  } = options;\n\n  const handleEnter =\n    (callback: TransitionEnterHandler = noop, skipped: boolean | undefined) =>\n    (appearing: boolean): void => {\n      callback(appearing);\n      if (!skipped) {\n        onEnterOnce(appearing);\n      }\n    };\n\n  const handleExit =\n    (callback: TransitionExitHandler = noop, skipped: boolean | undefined) =>\n    (): void => {\n      callback();\n      if (!skipped) {\n        onExitOnce();\n      }\n    };\n\n  return {\n    onEnter: handleEnter(onEnter, !enter),\n    onEntering: handleEnter(onEntering, enter),\n    onEntered: handleEnter(\n      onEntered,\n      !disableTransition && !TRANSITION_CONFIG.disabled\n    ),\n    onExit: handleExit(onExit, !exit),\n    onExiting: handleExit(onExiting, exit),\n    onExited: handleExit(\n      onExited,\n      !disableTransition && !TRANSITION_CONFIG.disabled\n    ),\n  };\n}\n"],"names":["TRANSITION_CONFIG","noop","getTransitionCallbacks","options","disableTransition","enter","onEnter","onEntered","onEntering","onEnterOnce","exit","onExit","onExited","onExiting","onExitOnce","handleEnter","callback","skipped","appearing","handleExit","disabled"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,cAAc;AAOhD,MAAMC,OAAO;AACX,aAAa;AACf;AAoDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BC,GACD,OAAO,SAASC,uBACdC,OAAsC;IAEtC,MAAM,EACJC,iBAAiB,EACjBC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,UAAU,EACVC,cAAcR,IAAI,EAClBS,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,aAAab,IAAI,EAClB,GAAGE;IAEJ,MAAMY,cACJ,CAACC,WAAmCf,IAAI,EAAEgB,UAC1C,CAACC;YACCF,SAASE;YACT,IAAI,CAACD,SAAS;gBACZR,YAAYS;YACd;QACF;IAEF,MAAMC,aACJ,CAACH,WAAkCf,IAAI,EAAEgB,UACzC;YACED;YACA,IAAI,CAACC,SAAS;gBACZH;YACF;QACF;IAEF,OAAO;QACLR,SAASS,YAAYT,SAAS,CAACD;QAC/BG,YAAYO,YAAYP,YAAYH;QACpCE,WAAWQ,YACTR,WACA,CAACH,qBAAqB,CAACJ,kBAAkBoB,QAAQ;QAEnDT,QAAQQ,WAAWR,QAAQ,CAACD;QAC5BG,WAAWM,WAAWN,WAAWH;QACjCE,UAAUO,WACRP,UACA,CAACR,qBAAqB,CAACJ,kBAAkBoB,QAAQ;IAErD;AACF"}

package/dist/transition/skeletonPlaceholderUtils.d.ts

@@ -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 {

package/dist/transition/skeletonPlaceholderUtils.js

@@ -8,7 +8,10 @@ import { randomInt } from "../utils/randomInt.js";
  *
  * @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 {

package/dist/transition/skeletonPlaceholderUtils.js.map

@@ -1 +1 @@
-{"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 { skeletonPlaceholder, randomSkeletonPlaceholder } from \"@react-md/core\";\n * import \"server-only\";\n *\n * export function RandomSkeletonPlaceholder(): ReactElement {\n *   return\n *     <div\n *       style={randomSkeletonPlaceholder()}\n *       className={skeletonPlaceholder()}\n *     />\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport function randomSkeletonPlaceholder(\n  options: SkeletonPlaceholderRandomOptions = {}\n): CSSProperties {\n  const {\n    minDelay = 0,\n    maxDelay = 400,\n    minPercentage = 40,\n    maxPercentage = 85,\n  } = options;\n\n  return {\n    animationDelay: `-${randomInt({\n      min: minDelay,\n      max: maxDelay,\n    })}ms`,\n    width: `${randomInt({\n      min: minPercentage,\n      max: maxPercentage,\n    })}%`,\n  };\n}\n"],"names":["bem","randomInt","skeletonPlaceholder","randomSkeletonPlaceholder","options","minDelay","maxDelay","minPercentage","maxPercentage","animationDelay","min","max","width"],"mappings":"AAEA,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,GAAGX,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"}