@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/src/transition/_transition.scss

@@ -4,14 +4,14 @@
 @use "../theme/colors";
 @use "../theme/theme";
 
-$disable-everything: false !default;
-$disable-collapse-transition: $disable-everything !default;
-$disable-cross-fade-transition: $disable-everything !default;
-$disable-scale-transition: $disable-everything !default;
+$disable-transitions: false !default;
+$disable-collapse-transition: $disable-transitions !default;
+$disable-cross-fade-transition: $disable-transitions !default;
+$disable-scale-transition: $disable-transitions !default;
 $disable-scale-y-transition: $disable-scale-transition !default;
-$disable-skeleton-placeholder: $disable-everything !default;
-$disable-slide-transition: $disable-everything !default;
-$disable-max-width-transition: $disable-everything !default;
+$disable-skeleton-placeholder: $disable-transitions !default;
+$disable-slide-transition: $disable-transitions !default;
+$disable-max-width-transition: $disable-transitions !default;
 $disable-max-width-transition-gap: $disable-max-width-transition !default;
 
 $linear-duration: 0.15s !default;
@@ -32,6 +32,7 @@ $scale-y-transition-enter-duration: $enter-duration !default;
 $scale-y-transition-leave-duration: $leave-duration !default;
 
 $skeleton-placeholder-height: 1.125em !default;
+$skeleton-placeholder-width: 43% !default;
 $skeleton-placeholder-border-radius: 0.25rem !default;
 $skeleton-placeholder-light-background-color: #000 !default;
 $skeleton-placeholder-dark-background-color: colors.$grey-300 !default;
@@ -64,52 +65,28 @@ $max-width-transition-duration: $linear-duration !default;
 $max-width-transition-timing-function: $linear-timing-function !default;
 $max-width-transition-default: 100% !default;
 
-$transition-var-lookup: (
-  skeleton-placeholder-background-color: (
-    var: --rmd-skeleton-placeholder-background-color,
-    value: $skeleton-placeholder-background-color,
-  ),
-  skeleton-placeholder-height: (
-    var: --rmd-skeleton-placeholder-height,
-    value: $skeleton-placeholder-height,
-  ),
-  skeleton-placeholder-width: (
-    var: --rmd-skeleton-placeholder-width,
-    value: null,
-  ),
-  slide-duration: (
-    var: --rmd-slide-duration,
-    value: $slide-duration,
-  ),
-  max-width: (
-    var: --rmd-max-width,
-    value: $max-width-transition-default,
-  ),
-  max-width-gap: (
-    var: --rmd-max-width-gap,
-    value: 0,
-  ),
+$transition-variables: (
+  skeleton-placeholder-background-color,
+  skeleton-placeholder-height,
+  skeleton-placeholder-width,
+  slide-duration,
+  max-width,
+  max-width-gap
 );
 
 @function transition-get-var($name, $fallback: null) {
-  $found: utils.validate($transition-var-lookup, $name, "transition var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($transition-variables, $name, "transition");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin transition-set-var($name, $value) {
-  $var: map.get(
-    utils.validate($transition-var-lookup, $name, "transition var"),
-    var
-  );
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($transition-variables, $name, "transition")}: #{$value};
+  }
 }
 
 @mixin transition-use-var($property, $name: $property, $fallback: null) {
@@ -241,6 +218,10 @@ $transition-var-lookup: (
       $skeleton-placeholder-animation-timing-function infinite;
     border-radius: $skeleton-placeholder-border-radius;
     color: transparent;
+
+    // this was added so that at least _something_ renders on SSR. It would be
+    // nice to have SSR-safe random numbers for this.
+    width: $skeleton-placeholder-width;
   }
 
   @include keyframes(rmd-skeleton-placeholder) {
@@ -301,53 +282,83 @@ $transition-var-lookup: (
   }
 }
 
-@mixin transition-styles {
-  @if not $disable-collapse-transition {
-    @include collapse-transition;
+@mixin transition-variables {
+  @if not $disable-skeleton-placeholder {
+    @include transition-set-var(
+      skeleton-placeholder-background-color,
+      $skeleton-placeholder-background-color
+    );
+    @include transition-set-var(
+      skeleton-placeholder-height,
+      $skeleton-placeholder-height
+    );
   }
 
-  @if not $disable-cross-fade-transition {
-    @include cross-fade-transition;
+  @if not $disable-slide-transition {
+    @include transition-set-var(slide-duration, $slide-duration);
   }
 
-  @if not $disable-scale-transition or not $disable-scale-y-transition {
-    @include scale-transition;
-  }
+  @if not $disable-max-width-transition {
+    @include transition-set-var(max-width, $max-width-transition-default);
 
-  @if not $disable-scale-y-transition {
-    @include scale-y-transition;
+    @if not $disable-max-width-transition-gap {
+      @include transition-set-var(max-width-gap, 0);
+    }
   }
+}
 
-  @if not $disable-skeleton-placeholder {
-    @include skeleton-placeholder-animation;
-  }
+@mixin transition-styles($disable-layer: false) {
+  @include utils.optional-layer(
+    transition,
+    $disable-layer or $disable-transitions
+  ) {
+    @if not $disable-collapse-transition {
+      @include collapse-transition;
+    }
 
-  @if not $disable-slide-transition {
-    @include slide-transition;
-  }
+    @if not $disable-cross-fade-transition {
+      @include cross-fade-transition;
+    }
 
-  @if not $disable-max-width-transition {
-    .rmd-max-width-transition {
-      @if not $disable-max-width-transition-gap {
-        @include utils.auto-rtl(
-          margin-right,
-          utils.negate-var(transition-get-var(max-width-gap)),
-          0
-        );
-      }
+    @if not $disable-scale-transition or not $disable-scale-y-transition {
+      @include scale-transition;
+    }
 
-      max-width: 0;
-      overflow: hidden;
-      transition: max-width
-        $max-width-transition-duration
-        $max-width-transition-timing-function;
-      will-change: max-width;
+    @if not $disable-scale-y-transition {
+      @include scale-y-transition;
+    }
+
+    @if not $disable-skeleton-placeholder {
+      @include skeleton-placeholder-animation;
+    }
+
+    @if not $disable-slide-transition {
+      @include slide-transition;
+    }
 
-      &--visible {
+    @if not $disable-max-width-transition {
+      .rmd-max-width-transition {
         @if not $disable-max-width-transition-gap {
-          @include utils.auto-rtl(margin-right, 0);
+          @include utils.auto-rtl(
+            margin-right,
+            utils.negate-var(transition-get-var(max-width-gap)),
+            0
+          );
+        }
+
+        max-width: 0;
+        overflow: hidden;
+        transition: max-width
+          $max-width-transition-duration
+          $max-width-transition-timing-function;
+        will-change: max-width;
+
+        &--visible {
+          @if not $disable-max-width-transition-gap {
+            @include utils.auto-rtl(margin-right, 0);
+          }
+          @include transition-use-var(max-width);
         }
-        @include transition-use-var(max-width);
       }
     }
   }

package/src/transition/config.ts

@@ -0,0 +1,34 @@
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TransitionConfig {
+  /**
+   * Set this to `true` to disable all transitions from `react-md`.
+   *
+   * Note: It is recommended to set this to `true` in testing to keep things
+   * simple and will automatically be set when using:
+   *
+   * ```ts
+   * import "@react-md/core/test-utils/jest-setup.js";
+   * ```
+   *
+   * @defaultValue `false`
+   */
+  disabled: boolean;
+}
+
+// NOTE: Uses get/set for test mocking
+
+let disabled = false;
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export const TRANSITION_CONFIG: TransitionConfig = {
+  get disabled() {
+    return disabled;
+  },
+  set disabled(nextDisabled: boolean) {
+    disabled = nextDisabled;
+  },
+};

package/src/transition/skeletonPlaceholderUtils.ts

@@ -0,0 +1,105 @@
+import { type CSSProperties } from "react";
+import { bem } from "../utils/bem.js";
+import { randomInt } from "../utils/randomInt.js";
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export const skeletonPlaceholder = bem("rmd-skeleton-placeholder");
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SkeletonPlaceholderRandomOptions {
+  /**
+   * The minimum `animation-delay` milliseconds allowed in the random generator.
+   * This value should be: `0 <= minDelay < maxDelay`.
+   *
+   * The `animation-delay` will be generated by:
+   * ```ts
+   * const delay = randomInt({
+   *   min: minDelay,
+   *   max: maxDelay,
+   * });
+   *
+   * return {
+   *   animationDelay: `-${delay}ms`,
+   * };
+   * ```
+   *
+   * @defaultValue `0`
+   */
+  minDelay?: number;
+
+  /**
+   * @see {@link minDelay}
+   * @defaultValue `400`
+   */
+  maxDelay?: number;
+
+  /**
+   * The minimum width percentage allowed in the random generator. This value
+   * should be: `0 >= minPercentage < maxPercentage`.
+   *
+   * The `width` will be generated by:
+   * ```ts
+   * const width = randomInt({
+   *   min: minPercentage,
+   *   max: maxPercentage,
+   * });
+   *
+   * return {
+   *   width: `${width}%`,
+   * };
+   * ```
+   * @defaultValue `40`
+   */
+  minPercentage?: number;
+
+  /**
+   * @see {@link minPercentage}
+   * @defaultValue `85`
+   */
+  maxPercentage?: number;
+}
+
+/**
+ * A server-only safe util to generate a random skeleton placeholder.
+ *
+ * @example
+ * ```tsx
+ * import { skeletonPlaceholder, randomSkeletonPlaceholder } from "@react-md/core";
+ * import "server-only";
+ *
+ * export function RandomSkeletonPlaceholder(): ReactElement {
+ *   return
+ *     <div
+ *       style={randomSkeletonPlaceholder()}
+ *       className={skeletonPlaceholder()}
+ *     />
+ *   );
+ * }
+ * ```
+ * @remarks \@since 6.0.0
+ */
+export function randomSkeletonPlaceholder(
+  options: SkeletonPlaceholderRandomOptions = {}
+): CSSProperties {
+  const {
+    minDelay = 0,
+    maxDelay = 400,
+    minPercentage = 40,
+    maxPercentage = 85,
+  } = options;
+
+  return {
+    animationDelay: `-${randomInt({
+      min: minDelay,
+      max: maxDelay,
+    })}ms`,
+    width: `${randomInt({
+      min: minPercentage,
+      max: maxPercentage,
+    })}%`,
+  };
+}

package/src/transition/useCollapseTransition.ts

@@ -19,21 +19,6 @@ const noop = (): void => {
   // do nothing
 };
 
-/**
- * @remarks \@since 2.0.0
- */
-export const DEFAULT_COLLAPSE_MIN_HEIGHT = 0;
-
-/**
- * @remarks \@since 2.0.0
- */
-export const DEFAULT_COLLAPSE_MIN_PADDING_TOP = 0;
-
-/**
- * @remarks \@since 2.0.0
- */
-export const DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM = 0;
-
 /**
  * @remarks \@since 2.0.0
  */
@@ -58,8 +43,7 @@ export interface CollapseConfigurationStyle {
    * are all set to `0` (default), the child will be removed from the DOM while
    * collapsed.
    *
-   * @see {@link DEFAULT_COLLAPSE_MIN_HEIGHT}
-   * @defaultValue `DEFAULT_COLLAPSE_MIN_HEIGHT`
+   * @defaultValue `0`
    */
   minHeight?: number | string;
 
@@ -72,8 +56,7 @@ export interface CollapseConfigurationStyle {
    * are all set to `0` (default), the child will be removed from the DOM while
    * collapsed.
    *
-   * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_TOP}
-   * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_TOP`
+   * @defaultValue `0`
    */
   minPaddingTop?: number | string;
 
@@ -86,8 +69,7 @@ export interface CollapseConfigurationStyle {
    * are all set to `0` (default), the child will be removed from the DOM while
    * collapsed.
    *
-   * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM}
-   * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM`
+   * @defaultValue `0`
    */
   minPaddingBottom?: number | string;
 }
@@ -307,9 +289,9 @@ export function useCollapseTransition<E extends HTMLElement>(
     className,
     transitionIn,
     timeout = DEFAULT_COLLAPSE_TIMEOUT,
-    minHeight = DEFAULT_COLLAPSE_MIN_HEIGHT,
-    minPaddingTop = DEFAULT_COLLAPSE_MIN_PADDING_TOP,
-    minPaddingBottom = DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM,
+    minHeight = 0,
+    minPaddingTop = 0,
+    minPaddingBottom = 0,
     temporary = minHeight === 0 &&
       minPaddingTop === 0 &&
       minPaddingBottom === 0,

package/src/transition/useSkeletonPlaceholder.ts

@@ -1,23 +1,28 @@
 "use client";
 import { cnb } from "cnbuilder";
-import type { CSSProperties } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState, type CSSProperties } 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");
+import {
+  randomSkeletonPlaceholder,
+  skeletonPlaceholder,
+  type SkeletonPlaceholderRandomOptions,
+} from "./skeletonPlaceholderUtils.js";
 
 /** @remarks \@since 6.0.0 */
-export interface SkeletonPlaceholderOptions {
+export interface SkeletonPlaceholderOptions
+  extends SkeletonPlaceholderRandomOptions {
   style?: CSSProperties;
   className?: string;
 
-  /** @defaultValue `40` */
-  minPercentage?: number;
-
-  /** @defaultValue `85` */
-  maxPercentage?: number;
+  /**
+   * Set this to a custom `animation-delay` value (should be in milliseconds).
+   *
+   * @example
+   * ```ts
+   * delay="200ms"
+   * ```
+   */
+  delay?: string;
 
   /**
    * Set this value tp a number or length unit string to set the height with
@@ -209,63 +214,73 @@ export function useSkeletonPlaceholder(
     height,
     width: propWidth,
     disabled = false,
-    minPercentage = 40,
-    maxPercentage = 85,
+    delay: propDelay,
+    minDelay,
+    maxDelay,
+    minPercentage,
+    maxPercentage,
   } = options;
   const ssr = useSsr();
 
-  const [randomPercentage, setRandomPercentage] = useState<string | undefined>(
-    () => {
-      if (
-        typeof window === "undefined" ||
-        ssr ||
-        typeof propWidth !== "undefined"
-      ) {
-        return;
-      }
-
-      return `${randomInt({ min: minPercentage, max: maxPercentage })}%`;
+  const isDefinedWidth = typeof propWidth !== "undefined";
+  const isDefinedDelay = typeof propDelay !== "undefined";
+  const [randomStyles, setRandomStyles] = useState<CSSProperties>(() => {
+    if (typeof window === "undefined" || ssr || disabled) {
+      return {};
     }
-  );
+
+    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, maxPercentage, minPercentage, propWidth, ssr]);
-
-  const width = useMemo(() => {
-    if (disabled || typeof propWidth !== "undefined") {
-      return propWidth;
-    }
-
-    if (ssr) {
-      return randomPercentage;
-    }
-
-    return `${randomInt({ min: minPercentage, max: maxPercentage })}%`;
   }, [
     disabled,
+    isDefinedDelay,
+    isDefinedWidth,
+    maxDelay,
     maxPercentage,
+    minDelay,
     minPercentage,
-    propWidth,
-    randomPercentage,
     ssr,
   ]);
 
+  let width = propWidth;
+  let animationDelay = propDelay;
+  if (!disabled) {
+    if (!isDefinedDelay) {
+      ({ animationDelay } = randomStyles);
+    }
+    if (!isDefinedWidth) {
+      ({ width } = randomStyles);
+    }
+  }
+
   let style: CSSProperties | undefined = 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,
+      // Note: not including MozAnimationDelay and WebkitAnimationDelay since
+      // they weren't applied when they were set. Probably no longer required?
+      animationDelay: animationDelay ?? style?.animationDelay,
     };
   }
 

package/src/transition/useTransition.ts

@@ -10,6 +10,7 @@ import type {
   TransitionState,
 } from "./types.js";
 import { getTransitionTimeout } from "./utils.js";
+import { TRANSITION_CONFIG } from "./config.js";
 
 const INITIAL_STATE: TransitionState = {
   appearing: false,
@@ -143,11 +144,11 @@ export function useTransition<E extends HTMLElement>(
     () => {
       let stage: TransitionStage = "exited";
       if (transitionIn) {
-        stage = appear ? "enter" : "entered";
+        stage = appear && !TRANSITION_CONFIG.disabled ? "enter" : "entered";
       }
 
       return {
-        appearing: appear && transitionIn,
+        appearing: appear && transitionIn && !TRANSITION_CONFIG.disabled,
         rendered: !temporary || transitionIn,
         stage,
       };
@@ -211,8 +212,12 @@ export function useTransition<E extends HTMLElement>(
     let nextStage: TransitionStage = stage;
     switch (stage) {
       case "enter":
-        onEnter(appearing);
-        nextStage = "entering";
+        if (TRANSITION_CONFIG.disabled) {
+          nextStage = "entered";
+        } else {
+          onEnter(appearing);
+          nextStage = "entering";
+        }
         break;
       case "entering":
         onEntering(appearing);
@@ -223,8 +228,12 @@ export function useTransition<E extends HTMLElement>(
         onEntered(appearing);
         break;
       case "exit":
-        onExit();
-        nextStage = "exiting";
+        if (TRANSITION_CONFIG.disabled) {
+          nextStage = "exited";
+        } else {
+          onExit();
+          nextStage = "exiting";
+        }
         break;
       case "exiting":
         onExiting();

package/src/transition/utils.ts

@@ -57,9 +57,9 @@ export interface CollapseSizing {
  * @internal
  */
 export function getElementSizing(element: HTMLElement | null): CollapseSizing {
-  let maxHeight;
-  let paddingTop;
-  let paddingBottom;
+  let maxHeight: number | undefined;
+  let paddingTop: number | undefined;
+  let paddingBottom: number | undefined;
   if (element) {
     // clone the element so that the total height and padding can be calculated
     // without being affected by the collapse transition inline styles
@@ -74,14 +74,19 @@ export function getElementSizing(element: HTMLElement | null): CollapseSizing {
     container.appendChild(cloned);
     maxHeight = cloned.scrollHeight;
     const style = window.getComputedStyle(cloned);
+    const isContentBox = style.boxSizing === "content-box";
     if (style.paddingTop) {
       paddingTop = parseFloat(style.paddingTop);
-      maxHeight + paddingTop;
+      if (isContentBox) {
+        maxHeight += paddingTop;
+      }
     }
 
     if (style.paddingBottom) {
       paddingBottom = parseFloat(style.paddingBottom);
-      maxHeight + paddingBottom;
+      if (isContentBox) {
+        maxHeight += paddingBottom;
+      }
     }
     container.removeChild(cloned);
   }

package/src/tree/DefaultTreeItemRenderer.tsx

@@ -1,7 +1,11 @@
 import { type ReactElement } from "react";
-import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.jsx";
+import { type RenderRecursiveItemsProps } from "../utils/RenderRecursively.js";
 import { TreeItem } from "./TreeItem.js";
-import { type DefaultTreeItemNode, type TreeItemNode } from "./types.js";
+import {
+  type DefaultTreeItemNode,
+  type TreeData,
+  type TreeItemNode,
+} from "./types.js";
 
 /**
  * **Client Component**
@@ -17,7 +21,7 @@ import { type DefaultTreeItemNode, type TreeItemNode } from "./types.js";
  */
 export function DefaultTreeItemRenderer<
   T extends TreeItemNode = DefaultTreeItemNode,
->(props: RenderRecursiveItemsProps<T>): ReactElement {
+>(props: RenderRecursiveItemsProps<T, TreeData<T>>): ReactElement {
   const { item: _item, parents, children: childItems } = props;
   const item = props.item as DefaultTreeItemNode;