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

package/src/theme/LocalStorageColorSchemeProvider.tsx

@@ -46,12 +46,10 @@ export interface LocalStorageColorSchemeProviderProps {
  *
  * @example
  * ```tsx
- * import {
- *   LocalStorageColorSchemeProvider,
- *   SegmentedButtonContainer,
- *   SegmentedButton,
- *   useColorScheme,
- * } from "@react-md/core";
+ * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
+ * import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
+ * import { LocalStorageColorSchemeProvider } from "@react-md/core/theme/LocalStorageColorSchemeProvider";
+ * import { useColorScheme } from "@react-md/core/theme/useColorScheme";
  * import { createRoot } from "react-dom/client";
  *
  * function MyComponent(): ReactElement {
@@ -102,6 +100,8 @@ export interface LocalStorageColorSchemeProviderProps {
  * );
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/color-scheme-provider | ColorSchemeProvider Demos}
+ * @see {@link https://next.react-md.dev/customization/dark-mode|Dark Mode Setup}
  * @since 6.0.0
  */
 export function LocalStorageColorSchemeProvider(

package/src/theme/ThemeProvider.tsx

@@ -105,7 +105,8 @@ export interface ThemeContext extends ConfigurableThemeColors {
   /**
    * @example Simple Example
    * ```tsx
-   * import { getDerivedTheme, useHtmlClassName, useTheme } from "@react-md/core";
+   * import { getDerivedTheme, useTheme } from "@react-md/core/theme/ThemeProvider";
+   * import { useHtmlClassName } from "@react-md/core/useHtmlClassName";
    * import { useEffect } from "react";
    *
    * import styles from "./LightTheme.module.scss";
@@ -214,7 +215,7 @@ export const getDerivedTheme = (
  *
  * @example Simple Example
  * ```tsx
- * import { useTheme } from "@react-md/core";
+ * import { useTheme } from "@react-md/core/theme/useTheme";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -283,6 +284,7 @@ export interface ThemeProviderProps {
  *
  * @example
  * ```tsx
+ * import { CoreProviders } from "@react-md/core/CoreProviders";
  * import {
  *   black,
  *   blue500,
@@ -290,10 +292,8 @@ export interface ThemeProviderProps {
  *   orangeAccent200,
  *   orangeAccent400,
  *   red500,
- *   CoreProviders,
- *   ThemeProvider,
- * } from "@react-md/core";
- * import type { ConfigurableThemeColors } from "@react-md/core";
+ * } from "@react-md/core/theme/colors";
+ * import { type ConfigurableThemeColors, ThemeProvider } from "@react-md/core/theme/ThemeProvider";
  * import type { ReactElement } from "react";
  * import { createRoot } from "react-dom/client";
  *
@@ -330,11 +330,9 @@ export interface ThemeProviderProps {
  *
  * @example Automatically Deriving the Theme
  * ```tsx
- * import {
- *   CoreProviders,
- *   LocalStorageColorSchemeProvider,
- *   ThemeProvider,
- * } from "@react-md/core";
+ * import { CoreProviders } from "@react-md/core/CoreProviders";
+ * import { LocalStorageColorSchemeProvider } from "@react-md/core/theme/LocalStorageColorSchemeProvider";
+ * import { ThemeProvider } from "@react-md/core/theme/ThemeProvider";
  * import { type ReactElement } from "react";
  * import { createRoot } from "react-dom/client";
  *
@@ -353,6 +351,7 @@ export interface ThemeProviderProps {
  * );
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/theme-provider | ThemeProvider Demos}
  * @since 6.0.0
  */
 export function ThemeProvider(props: ThemeProviderProps): ReactElement {

package/src/theme/colors.ts

@@ -271,5 +271,5 @@ export const blueGrey700 = "#455a64";
 export const blueGrey800 = "#37474f";
 export const blueGrey900 = "#263238";
 
-export const white = "#fff";
-export const black = "#000";
+export const white = "#ffffff";
+export const black = "#000000";

package/src/theme/useColorScheme.ts

@@ -75,7 +75,7 @@ export const { Provider: ColorSchemeProvider } = context;
  * );
  *
  * // DarkTheme.tsx
- * import { useHtmlClassName } from "@react-md/core";
+ * import { useHtmlClassName } from "@react-md/core/useHtmlClassName";
  *
  * import styles from "./DarkTheme.module.scss";
  *

package/src/tooltip/Tooltip.tsx

@@ -19,7 +19,15 @@ import {
   DEFAULT_TOOLTIP_POSITION,
   DEFAULT_TOOLTIP_TIMEOUT,
 } from "./constants.js";
-import { tooltip } from "./tooltipStyles.js";
+import { tooltip } from "./styles.js";
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-tooltip-background-color"?: string;
+    "--rmd-tooltip-color"?: string;
+    "--rmd-tooltip-spacing"?: string | number;
+  }
+}
 
 /**
  * The base props for the `Tooltip` component. This can be extended when
@@ -92,7 +100,9 @@ export interface TooltipProps
  *
  * @example Simple Usage
  * ```tsx
- * import { Button, useTooltip, Tooltip } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Tooltip } from "@react-md/core/tooltip/Tooltip";
+ * import { useTooltip } from "@react-md/core/tooltip/useTooltip";
  *
  * function Example() {
  *   const { elementProps, tooltipProps } = useTooltip();
@@ -107,6 +117,8 @@ export interface TooltipProps
  *   );
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/components/tooltip | Tooltip Demos}
  */
 export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(
   function Tooltip(props, nodeRef) {

package/src/tooltip/TooltipHoverModeProvider.tsx

@@ -86,6 +86,7 @@ export interface TooltipHoverModeProviderProps
  * </TooltipHoverModeProvider>
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tooltip | Tooltip Demos}
  * @since 6.0.0
  */
 export function TooltipHoverModeProvider(

package/src/tooltip/constants.ts

@@ -1,10 +1,16 @@
-import type {
-  CSSTransitionClassNames,
-  TransitionTimeout,
+import {
+  type CSSTransitionClassNames,
+  type TransitionTimeout,
 } from "../transition/types.js";
 
 /** @since 2.0.0 */
-export const DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
+export const DEFAULT_TOOLTIP_TIMEOUT = {
+  enter: 200,
+  exit: 150,
+} as const satisfies TransitionTimeout;
+
+/** @since 2.0.0 */
+export const DEFAULT_TOOLTIP_CLASSNAMES = {
   appear: "rmd-tooltip--enter",
   appearActive: "rmd-tooltip--visible",
   enter: "rmd-tooltip--enter",
@@ -12,13 +18,7 @@ export const DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
   enterDone: "rmd-tooltip--visible",
   exit: "rmd-tooltip--visible rmd-tooltip--exit",
   exitActive: "rmd-tooltip--exit-active",
-};
-
-/** @since 2.0.0 */
-export const DEFAULT_TOOLTIP_TIMEOUT: Readonly<TransitionTimeout> = {
-  enter: 200,
-  exit: 150,
-};
+} as const satisfies CSSTransitionClassNames;
 
 /** @since 2.0.0 */
 export const DEFAULT_TOOLTIP_DELAY = 1000;

package/src/tooltip/{tooltipStyles.ts → styles.ts}

@@ -1,7 +1,7 @@
 import { cnb } from "cnbuilder";
 
 import { type TextOverflow, cssUtils } from "../cssUtils.js";
-import type { SimplePosition } from "../positioning/types.js";
+import { type SimplePosition } from "../positioning/types.js";
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-tooltip");

package/src/tooltip/useTooltip.ts

@@ -48,14 +48,6 @@ import {
 } from "./useTooltipPosition.js";
 import { getAnchor } from "./utils.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-tooltip-background-color"?: string;
-    "--rmd-tooltip-color"?: string;
-    "--rmd-tooltip-spacing"?: string | number;
-  }
-}
-
 const noop = (): void => {
   // do nothing
 };
@@ -314,7 +306,9 @@ export interface TooltipImplementation<
 /**
  * @example Simple Usage
  * ```tsx
- * import { Button, useTooltip, Tooltip } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Tooltip } from "@react-md/core/tooltip/Tooltip";
+ * import { useTooltip } from "@react-md/core/tooltip/useTooltip";
  *
  * function Example() {
  *   const { elementProps, tooltipProps } = useTooltip();
@@ -332,13 +326,10 @@ export interface TooltipImplementation<
  *
  * @example Overflow-only Tooltips
  * ```tsx
- * import {
- *   cssUtils,
- *   Link,
- *   Tooltip,
- *   useTooltip,
- *   type LinkProps,
- * } from "@react-md/core";
+ * import { cssUtils } from "@react-md/core/cssUtils";
+ * import { Link, type LinkProps } from "@react-md/core/link/Link";
+ * import { Tooltip } from "@react-md/core/tooltip/Tooltip";
+ * import { useTooltip } from "@react-md/core/tooltip/useTooltip";
  * import { type ReactElement } from "react";
  *
  * function NavigationLink(props: LinkProps): ReactElement {
@@ -390,6 +381,7 @@ export interface TooltipImplementation<
  * The tooltip will now remain visible allowing you to find it within the
  * "Inspector" tab in the dev tools.
  *
+ * @see {@link https://next.react-md.dev/components/tooltip | Tooltip Demos}
  * @since 2.8.0
  * @since 6.0.0 Uses a separate `TooltipHoverModeProvider`.
  *

package/src/transition/CSSTransition.tsx

@@ -29,7 +29,8 @@ export interface CSSTransitionProps<E extends HTMLElement>
  * @example Simple Example
  * ```tsx
  * import { ReactElement, useState } from "react";
- * import { Button, CSSTransition } from "@react-md/core":
+ * import { Button } from "@react-md/core/button/Button":
+ * import { CSSTransition } from "@react-md/core/transition/CSSTransition":
  *
  * // pretend global styles:
  * //
@@ -74,6 +75,7 @@ export interface CSSTransitionProps<E extends HTMLElement>
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/css-transition | CSSTransition Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  * @since 4.0.0

package/src/transition/Collapse.tsx

@@ -62,6 +62,7 @@ export interface CollapseProps<E extends HTMLElement>
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/collapse | Collapse Demos}
  * @see {@link useCollapseTransition} for additional examples
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.

package/src/transition/CrossFade.tsx

@@ -87,6 +87,7 @@ export interface CrossFadeProps<E extends HTMLElement>
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/cross-fade | CrossFade Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  * @since 2.0.0

package/src/transition/ScaleTransition.tsx

@@ -31,7 +31,9 @@ export interface ScaleTransitionProps<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";
  *
  * function Example(): ReactElement {
  *   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -59,6 +61,7 @@ export interface ScaleTransitionProps<E extends HTMLElement>
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/scale-transition | ScaleTransition Demos}
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 2.0.0

package/src/transition/SkeletonPlaceholder.tsx

@@ -40,7 +40,7 @@ export interface SkeletonPlaceholderProps
  * @example Simple Example
  * ```tsx
  * import type { ReactElement } from "@react";
- * import { SkeletonPlaceholder } from "@react-md/core";
+ * import { SkeletonPlaceholder } from "@react-md/core/transition/SkeletonPlaceholder";
  *
  * interface ExampleProps {
  *   loading: boolean;
@@ -59,7 +59,7 @@ export interface SkeletonPlaceholderProps
  * @example Pre-rendered Layout
  * ```tsx
  * import type { ReactElement } from "@react";
- * import { SkeletonPlaceholder } from "@react-md/core";
+ * import { SkeletonPlaceholder } from "@react-md/core/transition/SkeletonPlaceholder";
  *
  * interface Data {
  *   id: string;
@@ -135,6 +135,7 @@ export interface SkeletonPlaceholderProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}
  * @since 6.0.0
  */
 export const SkeletonPlaceholder = forwardRef<

package/src/transition/Slide.tsx

@@ -41,6 +41,7 @@ export interface SlideProps
  * A reasonable default for handling a slide transition using
  * {@link useSlideTransition}.
  *
+ * @see {@link https://next.react-md.dev/components/slide | Slide Demos}
  * @see {@link SlideContainer} for example usage.
  * @since 6.0.0
  */

package/src/transition/SlideContainer.tsx

@@ -6,7 +6,7 @@ import { bem } from "../utils/bem.js";
 const styles = bem("rmd-slide-container");
 
 /**
- * @example Direction "left"
+ * @example Direction "forward"
  * ```
  *           -------------
  *           |           |
@@ -25,7 +25,7 @@ const styles = bem("rmd-slide-container");
  *           -------------
  * ```
  *
- * @example Direction "right"
+ * @example Direction "backward"
  * ```
  *           -------------
  *           |           |
@@ -46,7 +46,7 @@ const styles = bem("rmd-slide-container");
  *
  * @since 6.0.0
  */
-export type SlideDirection = "left" | "right";
+export type SlideDirection = "backward" | "forward";
 
 /** @since 6.0.0 */
 export interface SlideContainerClassNameOptions {
@@ -54,6 +54,8 @@ export interface SlideContainerClassNameOptions {
 
   /** @see {@link SlideDirection} */
   direction: SlideDirection;
+
+  vertical?: boolean;
 }
 
 /**
@@ -63,9 +65,9 @@ export interface SlideContainerClassNameOptions {
 export function slideContainer(
   options: SlideContainerClassNameOptions
 ): string {
-  const { className, direction } = options;
+  const { className, direction, vertical } = options;
 
-  return cnb(styles({ [direction]: true }), className);
+  return cnb(styles({ [direction]: true, vertical }), className);
 }
 
 /** @since 6.0.0 */
@@ -79,7 +81,8 @@ export interface SlideContainerProps
  *
  * @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";
  *
@@ -90,17 +93,17 @@ export interface SlideContainerProps
  *
  * 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,
  *   // }))
  *
@@ -120,17 +123,18 @@ export interface SlideContainerProps
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slide | Slide Demos}
  * @since 6.0.0
  */
 export const SlideContainer = forwardRef<HTMLDivElement, SlideContainerProps>(
   function SlideContainer(props, ref) {
-    const { className, direction, children, ...remaining } = props;
+    const { className, direction, vertical, children, ...remaining } = props;
 
     return (
       <div
         {...remaining}
         ref={ref}
-        className={slideContainer({ className, direction })}
+        className={slideContainer({ className, direction, vertical })}
       >
         {children}
       </div>

package/src/transition/getTransitionCallbacks.ts

@@ -0,0 +1,140 @@
+import { TRANSITION_CONFIG } from "./config.js";
+import {
+  type TransitionCallbacks,
+  type TransitionEnterHandler,
+  type TransitionExitHandler,
+} from "./types.js";
+
+const noop = (): void => {
+  // do nothing
+};
+
+/**
+ * @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 function getTransitionCallbacks(
+  options: GetTransitionCallbacksOptions
+): Required<TransitionCallbacks> {
+  const {
+    disableTransition,
+    enter,
+    onEnter,
+    onEntered,
+    onEntering,
+    onEnterOnce = noop,
+    exit,
+    onExit,
+    onExited,
+    onExiting,
+    onExitOnce = noop,
+  } = options;
+
+  const handleEnter =
+    (callback: TransitionEnterHandler = noop, skipped: boolean | undefined) =>
+    (appearing: boolean): void => {
+      callback(appearing);
+      if (!skipped) {
+        onEnterOnce(appearing);
+      }
+    };
+
+  const handleExit =
+    (callback: TransitionExitHandler = noop, skipped: boolean | undefined) =>
+    (): void => {
+      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
+    ),
+  };
+}

package/src/transition/skeletonPlaceholderUtils.ts

@@ -69,7 +69,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/src/transition/types.ts

@@ -54,6 +54,16 @@ export type TransitionTimeoutObject = {
  */
 export type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;
 
+/**
+ * @since 6.0.0
+ */
+export type TransitionEnterStage = "enter" | "entering" | "entered";
+
+/**
+ * @since 6.0.0
+ */
+export type TransitionExitStage = "exit" | "exiting" | "exited";
+
 /**
  * The way the transition works is by flowing through the different stages and
  * assigning waiting for a timeout to occur. Setting the `stage` to `enter` will
@@ -61,14 +71,9 @@ export type TransitionTimeout = number | Readonly<TransitionTimeoutObject>;
  * setting the stage to `exit` will transition from `exit -> exiting -> exited`.
  *
  * @since 4.0.0
+ * @since 6.0.0 Type union between `TransitionEnterStage` and `TransitionExitStage`
  */
-export type TransitionStage =
-  | "enter"
-  | "entering"
-  | "entered"
-  | "exit"
-  | "exiting"
-  | "exited";
+export type TransitionStage = TransitionEnterStage | TransitionExitStage;
 
 /**
  * This function is called at each `"enter"` {@link TransitionStage}. If a
@@ -99,6 +104,10 @@ export interface TransitionCallbacks {
    * This function will be called once the {@link TransitionStage} has been set
    * to `"enter"`.
    *
+   * NOTE: This callback will be skipped when transitions are disabled. Use the
+   * `getTransitionCallbacks` helper if something should only be called once
+   * while entering.
+   *
    * @see {@link TransitionEnterHandler}
    */
   onEnter?: TransitionEnterHandler;
@@ -107,6 +116,10 @@ export interface TransitionCallbacks {
    * This function will be called once the {@link TransitionStage} has been set
    * to `"enter"`.
    *
+   * NOTE: This callback will be skipped when transitions are disabled. Use the
+   * `getTransitionCallbacks` helper if something should only be called once
+   * while entering.
+   *
    * @see {@link TransitionEnterHandler}
    */
   onEntering?: TransitionEnterHandler;
@@ -123,6 +136,10 @@ export interface TransitionCallbacks {
    * This function will be called once the {@link TransitionStage} has been set
    * to `"entered"`.
    *
+   * NOTE: This callback will be skipped when transitions are disabled. Use the
+   * `getTransitionCallbacks` helper if something should only be called once
+   * while exiting.
+   *
    * @see {@link TransitionEnterHandler}
    */
   onExit?: TransitionExitHandler;
@@ -131,6 +148,10 @@ export interface TransitionCallbacks {
    * This function will be called once the {@link TransitionStage} has been set
    * to `"exiting"`.
    *
+   * NOTE: This callback will be skipped when transitions are disabled. Use the
+   * `getTransitionCallbacks` helper if something should only be called once
+   * while exiting.
+   *
    * @see {@link TransitionExitHandler}
    */
   onExiting?: TransitionExitHandler;

package/src/transition/useCSSTransition.ts

@@ -155,6 +155,8 @@ import { getTransitionClassNames } from "./utils.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-css-transition | useCSSTransition Demos}
+ * @see {@link https://next.react-md.dev/components/css-transition | CSSTransition Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  * @since 4.0.0