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

package/src/tooltip/TooltipHoverModeProvider.tsx

@@ -1,15 +1,17 @@
 "use client";
+
 import {
-  createContext,
-  useContext,
   type ReactElement,
   type ReactNode,
+  createContext,
+  useContext,
 } from "react";
+
 import {
-  createHoverModeContext,
-  useHoverModeProvider,
   type HoverModeConfiguration,
   type HoverModeContext,
+  createHoverModeContext,
+  useHoverModeProvider,
 } from "../hoverMode/useHoverModeProvider.js";
 import { DEFAULT_TOOLTIP_DELAY } from "./constants.js";
 

package/src/tooltip/tooltipStyles.ts

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
-import { cssUtils, type TextOverflow } from "../cssUtils.js";
+
+import { type TextOverflow, cssUtils } from "../cssUtils.js";
 import type { SimplePosition } from "../positioning/types.js";
 import { bem } from "../utils/bem.js";
 

package/src/tooltip/useTooltip.ts

@@ -1,10 +1,7 @@
 "use client";
+
 import { cnb } from "cnbuilder";
 import {
-  useCallback,
-  useEffect,
-  useId,
-  useRef,
   type CSSProperties,
   type FocusEvent,
   type MouseEvent,
@@ -12,21 +9,26 @@ import {
   type Ref,
   type RefObject,
   type TouchEvent,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
 } from "react";
+
 import {
-  useHoverMode,
   type ControlledHoverModeImplementation,
+  useHoverMode,
 } from "../hoverMode/useHoverMode.js";
 import {
-  useUserInteractionMode,
   type UserInteractionMode,
+  useUserInteractionMode,
 } from "../interaction/UserInteractionModeProvider.js";
 import { type SimplePosition } from "../positioning/types.js";
 import {
-  useFixedPositioning,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   type FixedPositioningOptions,
   type FixedPositioningTransitionCallbacks,
+  useFixedPositioning,
 } from "../positioning/useFixedPositioning.js";
 import { type UseStateSetter } from "../types.js";
 import { usePageInactive } from "../usePageInactive.js";
@@ -41,8 +43,8 @@ import {
   TOOLTIP_SPACING_VAR,
 } from "./constants.js";
 import {
-  useTooltipPosition,
   type TooltipPositionHookOptions,
+  useTooltipPosition,
 } from "./useTooltipPosition.js";
 import { getAnchor } from "./utils.js";
 
@@ -176,8 +178,11 @@ export interface TooltipOptions<
    *
    * @example Real World Example
    * ```tsx
-   * import { Button, ButtonProps, Tooltip, useTooltip  } from "@react-md/core";
-   * import type { ReactElement, ReactNode } from "react";
+   * // This is _almost_ the source code for the `TooltippedButton` provided by react-md
+   * import { Button } from "@react-md/core/button/Button";
+   * import { Tooltip } from "@react-md/core/tooltip/Tooltip";
+   * import { useTooltip } from "@react-md/core/tooltip/useTooltip";
+   * import { type ReactElement, type ReactNode } from "react";
    *
    * export interface TooltippedButtonProps extends ButtonProps {
    *   tooltip?: ReactNode;

package/src/tooltip/useTooltipPosition.ts

@@ -1,5 +1,7 @@
 "use client";
+
 import { useCallback, useState } from "react";
+
 import type { SimplePosition } from "../positioning/types.js";
 import {
   DEFAULT_TOOLTIP_POSITION,

package/src/transition/CSSTransition.tsx

@@ -1,6 +1,8 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { Children, cloneElement, type ReactElement } from "react";
+import { Children, type ReactElement, cloneElement } from "react";
+
 import {
   type CSSTransitionComponentImplementation,
   type CSSTransitionHookOptions,

package/src/transition/Collapse.tsx

@@ -1,10 +1,12 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { Children, cloneElement, type ReactElement } from "react";
+import { Children, type ReactElement, cloneElement } from "react";
+
 import {
-  useCollapseTransition,
   type CollapseElementProps,
   type CollapseTransitionHookOptions,
+  useCollapseTransition,
 } from "./useCollapseTransition.js";
 
 /**

package/src/transition/CrossFade.tsx

@@ -1,10 +1,12 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { Children, cloneElement, type ReactElement } from "react";
+import { Children, type ReactElement, cloneElement } from "react";
+
 import { type CSSTransitionComponentImplementation } from "./types.js";
 import {
-  useCrossFadeTransition,
   type CrossFadeTransitionHookOptions,
+  useCrossFadeTransition,
 } from "./useCrossFadeTransition.js";
 
 /**
@@ -34,7 +36,7 @@ export interface CrossFadeProps<E extends HTMLElement>
  * `React.cloneElement` to inject the `ref` and `className` into the `children`,
  * it is recommended to use the hook instead.
  *
- * @example Appear transitions with a React `key`
+ * @example Appear transitions with a React key
  * ```tsx
  * import { ReactElement, useState } from "react";
  * import { CrossFade } from "@react-md/transition";

package/src/transition/ScaleTransition.tsx

@@ -1,10 +1,12 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { Children, cloneElement, type ReactElement } from "react";
+import { Children, type ReactElement, cloneElement } from "react";
+
 import { type CSSTransitionComponentImplementation } from "./types.js";
 import {
-  useScaleTransition,
   type ScaleTransitionHookOptions,
+  useScaleTransition,
 } from "./useScaleTransition.js";
 
 /**

package/src/transition/SkeletonPlaceholder.tsx

@@ -1,13 +1,15 @@
 "use client";
+
 import {
-  forwardRef,
   type HTMLAttributes,
   type ReactElement,
   type ReactNode,
+  forwardRef,
 } from "react";
+
 import {
-  useSkeletonPlaceholder,
   type SkeletonPlaceholderOptions,
+  useSkeletonPlaceholder,
 } from "./useSkeletonPlaceholder.js";
 
 declare module "react" {

package/src/transition/Slide.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+
 import {
   type CSSTransitionComponentProps,
   type TransitionActions,

package/src/transition/SlideContainer.tsx

@@ -1,5 +1,6 @@
 import { cnb } from "cnbuilder";
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
+
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-slide-container");

package/src/transition/collapseStyles.ts

@@ -1,4 +1,5 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 

package/src/transition/config.ts

@@ -9,7 +9,10 @@ export interface TransitionConfig {
    * simple and will automatically be set when using:
    *
    * ```ts
-   * import "@react-md/core/test-utils/jest-setup.js";
+   * import "@react-md/core/test-utils/jest-globals/setup";
+   *
+   * // or
+   * import "@react-md/core/test-utils/vitest/setup";
    * ```
    *
    * @defaultValue `false`

package/src/transition/maxWidthTransition.ts

@@ -1,9 +1,13 @@
 import { cnb } from "cnbuilder";
+
 import { bem } from "../utils/bem.js";
 import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 
 const styles = bem("rmd-max-width-transition");
 
+/**
+ * @since 6.0.0
+ */
 export interface MaxWidthTransitionClassNameOptions {
   className?: string;
 
@@ -11,6 +15,9 @@ export interface MaxWidthTransitionClassNameOptions {
   transitionIn: boolean;
 }
 
+/**
+ * @since 6.0.0
+ */
 export function maxWidthTransition(
   options: MaxWidthTransitionClassNameOptions
 ): string {

package/src/transition/skeletonPlaceholderUtils.ts

@@ -1,4 +1,5 @@
 import { type CSSProperties } from "react";
+
 import { bem } from "../utils/bem.js";
 import { randomInt } from "../utils/randomInt.js";
 

package/src/transition/types.ts

@@ -2,7 +2,6 @@
 // hook implementation. I also had to redo most of the types for v4.0.0 due to
 // the new `nodeRef` stuff, so it made it easier to create the types and hooks
 // here.
-
 import type { ReactElement, Ref, RefCallback } from "react";
 
 /**
@@ -51,7 +50,6 @@ export type TransitionTimeoutObject = {
  * Either a single timeout duration in milliseconds to use for each of the
  * {@link TransitionActions} stages, or an object of transition durations.
  *
- * @see {@link TransitionTimeout}
  * @since 4.0.0
  */
 export type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;

package/src/transition/useCSSTransition.ts

@@ -1,5 +1,7 @@
 "use client";
+
 import { cnb } from "cnbuilder";
+
 import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 import type {
   CSSTransitionElementProps,
@@ -17,8 +19,10 @@ import { getTransitionClassNames } from "./utils.js";
  *
  * @example Simple Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {
@@ -67,8 +71,10 @@ import { getTransitionClassNames } from "./utils.js";
  *
  * @example Visibility Transition
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCSSTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCSSTransition } from "@react-md/core/transition/useCSSTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * // Pretend styles
  * // .enter {

package/src/transition/useCarousel.ts

@@ -1,5 +1,7 @@
 "use client";
+
 import { useCallback, useEffect, useState } from "react";
+
 import type { UseStateSetter } from "../types.js";
 import { useToggle } from "../useToggle.js";
 import { loop } from "../utils/loop.js";

package/src/transition/useCollapseTransition.ts

@@ -1,16 +1,17 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import type { CSSProperties } from "react";
-import { useState } from "react";
+import { type CSSProperties, useState } from "react";
+
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 import { collapse } from "./collapseStyles.js";
-import type {
-  CSSTransitionElementProps,
-  CSSTransitionHookReturnValue,
-  PreconfiguredCSSTransitionOptions,
-  TransitionTimeout,
-  TransitionTimeoutObject,
+import {
+  type CSSTransitionElementProps,
+  type CSSTransitionHookReturnValue,
+  type PreconfiguredCSSTransitionOptions,
+  type TransitionTimeout,
+  type TransitionTimeoutObject,
 } from "./types.js";
 import { useTransition } from "./useTransition.js";
 import { getElementSizing, getTransitionTimeout } from "./utils.js";
@@ -194,8 +195,10 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement>
  *
  * @example Simple Example
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, Typography, useCollapseTransition } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * function Example(): ReactElement {
  *   const [collapsed, setCollapsed] = useState(true);
@@ -225,9 +228,12 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement>
  *
  * @example See More Example
  * ```tsx
- * import { ReactElement, useState } from "react";
- * import { Button, IconRotator, Typography, useCollapseTransition } from "@react-md/core";
- * import { KeyboardArrowDownSVGIcon } from "@react-md/material-icons";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { IconRotator } from "@react-md/core/icon/IconRotator";
+ * import KeyboardArrowDownIcon from "@react-md/material-icons/KeyboardArrowDownIcon"
+ * import { useCollapseTransition } from "@react-md/core/transition/useCollapseTransition";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { type ReactElement, useState } from "react";
  *
  * import styles from "./Example.module.scss";
  * // pretend styles:
@@ -264,7 +270,7 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement>
  *         className={styles.button}
  *       >
  *         <IconRotator rotated={!collapsed}>
- *           <KeyboardArrowDownSVGIcon />
+ *           <KeyboardArrowDownIcon />
  *         </IconRotator>
  *       </Button>
  *       <SomeComponentWithALotOfContent />

package/src/transition/useCrossFadeTransition.ts

@@ -1,4 +1,5 @@
 "use client";
+
 import type {
   CSSTransitionClassNames,
   CSSTransitionClassNamesObject,

package/src/transition/useMaxWidthTransition.ts

@@ -1,7 +1,9 @@
 "use client";
+
 import { cnb } from "cnbuilder";
 import type { ReactNode } from "react";
 import { Children, cloneElement, isValidElement } from "react";
+
 import { maxWidthTransition } from "./maxWidthTransition.js";
 
 /**
@@ -17,6 +19,15 @@ export interface MaxWidthTransitionOptions {
 }
 
 /**
+ * The `useMaxWidthTransition` hook is used to animate the `max-width` using
+ * the {@link maxWidthTransition} utility classes.
+ *
+ * NOTE: This hook clones the className into the child element using the
+ * `cloneElement` API. The child **must** accept and pass the `className` forward
+ * to work correctly.
+ *
+ * @see {@link maxWidthTransition}
+ *
  * @since 6.0.0
  */
 export function useMaxWidthTransition(

package/src/transition/useScaleTransition.ts

@@ -1,10 +1,10 @@
 "use client";
+
 import type {
   CSSTransitionClassNames,
-  CSSTransitionClassNamesObject,
   CSSTransitionHookReturnValue,
   PreconfiguredCSSTransitionOptions,
-  TransitionTimeoutObject,
+  TransitionTimeout,
 } from "./types.js";
 import { useCSSTransition } from "./useCSSTransition.js";
 
@@ -16,7 +16,7 @@ import { useCSSTransition } from "./useCSSTransition.js";
  * @since 6.0.0 The class names were updated to be prefixed with
  * `rmd-scale-transition`
  */
-export const SCALE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {
+export const SCALE_CLASSNAMES = {
   appear: "rmd-scale-transition--enter",
   appearActive: "rmd-scale-transition--enter-active",
   enter: "rmd-scale-transition--enter",
@@ -24,7 +24,7 @@ export const SCALE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {
   enterDone: "",
   exit: "rmd-scale-transition--exit",
   exitActive: "rmd-scale-transition--exit-active",
-};
+} as const satisfies CSSTransitionClassNames;
 
 /**
  * The default {@link CSSTransitionClassNames} for a vertical scale transition.
@@ -33,7 +33,7 @@ export const SCALE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {
  * @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: Readonly<CSSTransitionClassNamesObject> = {
+export const 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",
@@ -44,7 +44,7 @@ export const SCALE_Y_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {
   exit: "rmd-scale-transition--exit rmd-scale-transition--y-exit",
   exitActive:
     "rmd-scale-transition--exit-active rmd-scale-transition--y-exit-active",
-};
+} as const satisfies CSSTransitionClassNames;
 
 /**
  * The default {@link TransitionTimeout} to use for horizontal and vertical
@@ -52,10 +52,10 @@ export const SCALE_Y_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {
  *
  * @since 2.0.0
  */
-export const SCALE_TIMEOUT: Readonly<TransitionTimeoutObject> = {
+export const SCALE_TIMEOUT = {
   enter: 200,
   exit: 150,
-};
+} as const satisfies TransitionTimeout;
 
 /**
  * @typeParam E - The HTMLElement type used or the ref required for the
@@ -93,8 +93,10 @@ export interface ScaleTransitionHookOptions<E extends HTMLElement>
  *
  * @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);

package/src/transition/useSkeletonPlaceholder.ts

@@ -1,11 +1,13 @@
 "use client";
+
 import { cnb } from "cnbuilder";
-import { useEffect, useState, type CSSProperties } from "react";
+import { type CSSProperties, useEffect, useState } from "react";
+
 import { useSsr } from "../SsrProvider.js";
 import {
+  type SkeletonPlaceholderRandomOptions,
   randomSkeletonPlaceholder,
   skeletonPlaceholder,
-  type SkeletonPlaceholderRandomOptions,
 } from "./skeletonPlaceholderUtils.js";
 
 /** @since 6.0.0 */
@@ -196,11 +198,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} />;
+ * }
+ * ```
+ * @since 6.0.0
+ */
 export function useSkeletonPlaceholder(
   options: SkeletonPlaceholderOptions = {}
 ): SkeletonPlaceholderStylingProps {

package/src/transition/useSlideTransition.ts

@@ -1,5 +1,7 @@
 "use client";
+
 import { cnb } from "cnbuilder";
+
 import type {
   CSSTransitionClassNames,
   CSSTransitionHookReturnValue,
@@ -27,10 +29,12 @@ export type SlideTransitionOptions<E extends HTMLElement> =
 /**
  * @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;
@@ -39,7 +43,7 @@ export type SlideTransitionOptions<E extends HTMLElement> =
  *
  * function Slide({ active, children }: SlideProps): ReactElement | null {
  *   const { rendered, elementProps } = useSlideTransition({
- *     transition: active,
+ *     transitionIn: active,
  *   });
  *
  *   if (!rendered) {
@@ -59,7 +63,7 @@ export type SlideTransitionOptions<E extends HTMLElement> =
  *     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
@@ -71,16 +75,10 @@ export type SlideTransitionOptions<E extends HTMLElement> =
  *   // }))
  *
  *   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>
  *   );
  * }

package/src/transition/useTransition.ts

@@ -1,8 +1,11 @@
 "use client";
+
 import { useEffect, useReducer, useRef, useState } from "react";
+
 import { useSsr } from "../SsrProvider.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
+import { TRANSITION_CONFIG } from "./config.js";
 import type {
   TransitionHookOptions,
   TransitionHookReturnValue,
@@ -10,7 +13,6 @@ import type {
   TransitionState,
 } from "./types.js";
 import { getTransitionTimeout } from "./utils.js";
-import { TRANSITION_CONFIG } from "./config.js";
 
 const INITIAL_STATE: TransitionState = {
   appearing: false,

package/src/tree/DefaultTreeItemRenderer.tsx

@@ -1,4 +1,5 @@
 import { type ReactElement } from "react";
+
 import { TreeItem } from "./TreeItem.js";
 import {
   type DefaultTreeItemNode,

package/src/tree/Tree.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import {
   type ComponentType,
   type HTMLAttributes,
@@ -6,6 +7,7 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
+
 import { type CustomLinkComponent } from "../link/Link.js";
 import { List } from "../list/List.js";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
@@ -14,7 +16,7 @@ import { useEnsuredId } from "../useEnsuredId.js";
 import { RenderRecursively } from "../utils/RenderRecursively.js";
 import { identity } from "../utils/identity.js";
 import { DefaultTreeItemRenderer } from "./DefaultTreeItemRenderer.js";
-import { TreeProvider, type TreeExpansionMode } from "./TreeProvider.js";
+import { type TreeExpansionMode, TreeProvider } from "./TreeProvider.js";
 import { tree } from "./styles.js";
 import {
   type TreeData,

package/src/tree/TreeGroup.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { forwardRef, type CSSProperties, type ReactNode } from "react";
+
+import { type CSSProperties, type ReactNode, forwardRef } from "react";
+
 import { List, type ListProps } from "../list/List.js";
 import { useCollapseTransition } from "../transition/useCollapseTransition.js";
 import { useTreeContext } from "./TreeProvider.js";