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

package/src/transition/useCarousel.ts

@@ -78,7 +78,10 @@ export interface CarouselOptions {
 /**
  * @example Accessible Carousel Example
  * ```tsx
- * import { Button, SlideContainer, Slide, useCarousel } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Slide } from "@react-md/core/transition/Slide";
+ * import { SlideContainer } from "@react-md/core/transition/SlideContainer";
+ * import { useCarousel } from "@react-md/core/transition/useCarousel";
  * import ChevronLeftIcon from "@react-md/material-icons/ChevronLeftIcon";
  * import ChevronRightIcon from "@react-md/material-icons/ChevronRightIcon";
  * import PauseIcon from "@react-md/material-icons/PauseIcon";
@@ -167,16 +170,17 @@ export interface CarouselOptions {
  * }
  * ```
  *
- * @since 6.0.0
+ * @see {@link https://next.react-md.dev/components/carousel | Carousel Demos}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/carousel/}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/example-index/carousel/carousel-2-tablist.html}
+ * @since 6.0.0
  */
 export function useCarousel(options: CarouselOptions): CarouselImplementation {
   const { duration = 8000, totalSlides } = options;
   const total = totalSlides - 1;
 
   const [state, setCarouselSlideState] = useState<CarouselSlideState>({
-    direction: "left",
+    direction: "forward",
     activeIndex: 0,
   });
   const {
@@ -194,7 +198,7 @@ export function useCarousel(options: CarouselOptions): CarouselImplementation {
             : activeIndexOrGetter;
 
         return {
-          direction: prevActiveIndex < nextActiveIndex ? "left" : "right",
+          direction: prevActiveIndex < nextActiveIndex ? "forward" : "backward",
           activeIndex: nextActiveIndex,
         };
       });
@@ -203,13 +207,13 @@ export function useCarousel(options: CarouselOptions): CarouselImplementation {
   );
   const increment = useCallback(() => {
     setCarouselSlideState((prevState) => ({
-      direction: "left",
+      direction: "forward",
       activeIndex: Math.min(total, prevState.activeIndex + 1),
     }));
   }, [total]);
   const decrement = useCallback(() => {
     setCarouselSlideState((prevState) => ({
-      direction: "right",
+      direction: "backward",
       activeIndex: Math.max(0, prevState.activeIndex - 1),
     }));
   }, []);
@@ -228,7 +232,7 @@ export function useCarousel(options: CarouselOptions): CarouselImplementation {
         increment: true,
       });
       setCarouselSlideState({
-        direction: activeIndex < nextActiveIndex ? "left" : "right",
+        direction: activeIndex < nextActiveIndex ? "forward" : "backward",
         activeIndex: nextActiveIndex,
       });
     }, duration);

package/src/transition/useCollapseTransition.ts

@@ -11,7 +11,6 @@ import {
   type CSSTransitionHookReturnValue,
   type PreconfiguredCSSTransitionOptions,
   type TransitionTimeout,
-  type TransitionTimeoutObject,
 } from "./types.js";
 import { useTransition } from "./useTransition.js";
 import { getElementSizing, getTransitionTimeout } from "./utils.js";
@@ -23,10 +22,10 @@ const noop = (): void => {
 /**
  * @since 2.0.0
  */
-export const DEFAULT_COLLAPSE_TIMEOUT: Readonly<TransitionTimeoutObject> = {
+export const DEFAULT_COLLAPSE_TIMEOUT = {
   enter: 250,
   exit: 200,
-};
+} as const satisfies TransitionTimeout;
 
 /**
  * @since 4.0.0
@@ -279,6 +278,8 @@ export interface CollapseTransitionHookReturnValue<E extends HTMLElement>
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-collapse-transition | useCollapseTransition Demos}
+ * @see {@link https://next.react-md.dev/components/collapse | Collapse Demos}
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  * @since 4.0.0

package/src/transition/useCrossFadeTransition.ts

@@ -2,36 +2,38 @@
 
 import type {
   CSSTransitionClassNames,
-  CSSTransitionClassNamesObject,
   CSSTransitionHookReturnValue,
   PreconfiguredCSSTransitionInDefaultedOptions,
   TransitionTimeout,
-  TransitionTimeoutObject,
 } from "./types.js";
 import { useCSSTransition } from "./useCSSTransition.js";
 
 /**
- * The default cross fade transition classes to use.
+ * The default cross fade transition timeout.
  *
  * @since 2.0.0
+ * @since 6.0.0 Renamed from `CROSS_FADE_TIMEOUT` to
+ * `DEFAULT_CROSS_FADE_TIMEOUT`
  */
-export const CROSS_FADE_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> = {
-  appear: "rmd-cross-fade",
-  appearActive: "rmd-cross-fade--active",
-  enter: "rmd-cross-fade",
-  enterActive: "rmd-cross-fade--active",
-};
+export const DEFAULT_CROSS_FADE_TIMEOUT = {
+  appear: 300,
+  enter: 300,
+  exit: 0,
+} as const satisfies TransitionTimeout;
 
 /**
- * The default cross fade transition timeout.
+ * The default cross fade transition classes to use.
  *
  * @since 2.0.0
+ * @since 6.0.0 Renamed from `CROSS_FADE_CLASSNAMES` to
+ * `DEFAULT_CROSS_FADE_CLASSNAMES`.
  */
-export const CROSS_FADE_TIMEOUT: Readonly<TransitionTimeoutObject> = {
-  appear: 300,
-  enter: 300,
-  exit: 0,
-};
+export const DEFAULT_CROSS_FADE_CLASSNAMES = {
+  appear: "rmd-cross-fade",
+  appearActive: "rmd-cross-fade--active",
+  enter: "rmd-cross-fade",
+  enterActive: "rmd-cross-fade--active",
+} as const satisfies CSSTransitionClassNames;
 
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
@@ -42,14 +44,14 @@ export interface CrossFadeTransitionHookOptions<E extends HTMLElement>
   extends PreconfiguredCSSTransitionInDefaultedOptions<E> {
   /**
    * @see {@link TransitionTimeout}
-   * @see {@link CROSS_FADE_TIMEOUT}
+   * @see {@link DEFAULT_CROSS_FADE_TIMEOUT}
    * @defaultValue `CROSS_FADE_TIMEOUT`
    */
   timeout?: TransitionTimeout;
 
   /**
    * @see {@link CSSTransitionClassNames}
-   * @see {@link CROSS_FADE_CLASSNAMES}
+   * @see {@link DEFAULT_CROSS_FADE_CLASSNAMES}
    * @defaultValue `CROSS_FADE_CLASSNAMES`
    */
   classNames?: CSSTransitionClassNames;
@@ -67,44 +69,8 @@ export interface CrossFadeTransitionHookOptions<E extends HTMLElement>
  * distance. This is generally used for full page transitions when a route
  * changes.
  *
- * @example New Page Transition with the Layout component
- * ```tsx
- * import { ReactElement, ReactNode, useLayoutEffect } from "react";
- * import { useLocation } from "react-router-dom":
- * import { Layout, useCrossFadeTransition, useLayoutNavigation } from "@react-md/core";
- *
- * import { navItems } from "./navItems";
- *
- * interface ExampleProps {
- *   children: ReactNode;
- * }
- *
- * function Example({ children }: ExampleProps): ReactElement {
- *   const { pathname } = useLocation();
- *   const { elementProps, transitionTo } = useCrossFadeTransition();
- *
- *   const prevPathname = useRef(pathname);
- *   useLayoutEffect(() => {
- *     if (prevPathname.current === pathname) {
- *       return
- *     }
- *
- *     prevPathname.current = pathname;
- *     transitionTo('enter');
- *   }, [pathname, transitionTo])
- *
- *   return (
- *     <Layout
- *       {...useLayoutNavigation(navItems, pathname)}
- *       appBarTitle="My App"
- *       mainProps={elementProps}
- *     >
- *       {children}
- *     </Layout>
- *   );
- * }
- * ```
- *
+ * @see {@link https://next.react-md.dev/hooks/use-cross-fade-transition | useCrossFadeTransition Demos}
+ * @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 4.0.0
@@ -115,8 +81,8 @@ export function useCrossFadeTransition<E extends HTMLElement>(
   const {
     appear = false,
     transitionIn = true,
-    timeout = CROSS_FADE_TIMEOUT,
-    classNames = CROSS_FADE_CLASSNAMES,
+    timeout = DEFAULT_CROSS_FADE_TIMEOUT,
+    classNames = DEFAULT_CROSS_FADE_CLASSNAMES,
     ...cssOptions
   } = options;
 

package/src/transition/useScaleTransition.ts

@@ -8,15 +8,28 @@ import type {
 } from "./types.js";
 import { useCSSTransition } from "./useCSSTransition.js";
 
+/**
+ * The default {@link TransitionTimeout} to use for horizontal and vertical
+ * scale transitions.
+ *
+ * @since 2.0.0
+ * @since 6.0.0 Renamed from `SCALE_TIMEOUT` to `DEFAULT_SCALE_TIMEOUT`.
+ */
+export const DEFAULT_SCALE_TIMEOUT = {
+  enter: 200,
+  exit: 150,
+} as const satisfies TransitionTimeout;
+
 /**
  * The default {@link CSSTransitionClassNames} for a horizontal scale
  * transition.
  *
  * @since 2.0.0
  * @since 6.0.0 The class names were updated to be prefixed with
- * `rmd-scale-transition`
+ * `rmd-scale-transition` and renamed from `SCALE_CLASSNAMES` to
+ * `DEFAULT_SCALE_CLASSNAMES`.
  */
-export const SCALE_CLASSNAMES = {
+export const DEFAULT_SCALE_CLASSNAMES = {
   appear: "rmd-scale-transition--enter",
   appearActive: "rmd-scale-transition--enter-active",
   enter: "rmd-scale-transition--enter",
@@ -31,9 +44,11 @@ export const SCALE_CLASSNAMES = {
  *
  * @since 2.0.0
  * @since 6.0.0 The class names were updated to be prefixed with
- * `rmd-scale-y-transition` and merged with the {@link SCALE_CLASSNAMES}
+ * `rmd-scale-y-transition` and merged with the {@link DEFAULT_SCALE_CLASSNAMES}.
+ * It was also renamed from `SCALE_Y_CLASSNAMES` to
+ * `DEFAULT_SCALE_Y_CLASSNAMES`.
  */
-export const SCALE_Y_CLASSNAMES = {
+export const DEFAULT_SCALE_Y_CLASSNAMES = {
   appear: "rmd-scale-transition--enter rmd-scale-transition--y-enter",
   appearActive:
     "rmd-scale-transition--enter-active rmd-scale-transition--y-enter-active",
@@ -46,17 +61,6 @@ export const SCALE_Y_CLASSNAMES = {
     "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
- * scale transitions.
- *
- * @since 2.0.0
- */
-export const SCALE_TIMEOUT = {
-  enter: 200,
-  exit: 150,
-} as const satisfies TransitionTimeout;
-
 /**
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
@@ -80,8 +84,8 @@ export interface ScaleTransitionHookOptions<E extends HTMLElement>
 
   /**
    * @see {@link vertical}
-   * @see {@link SCALE_CLASSNAMES}
-   * @see {@link SCALE_Y_CLASSNAMES}
+   * @see {@link DEFAULT_SCALE_CLASSNAMES}
+   * @see {@link DEFAULT_SCALE_Y_CLASSNAMES}
    * @defaultValue `vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES`
    */
   classNames?: CSSTransitionClassNames;
@@ -125,6 +129,8 @@ export interface ScaleTransitionHookOptions<E extends HTMLElement>
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/hooks/use-scale-transition | useScaleTransition Demos}
+ * @see {@link https://next.react-md.dev/components/scale | Scale Demos}
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0
@@ -133,11 +139,13 @@ export function useScaleTransition<E extends HTMLElement>(
   options: ScaleTransitionHookOptions<E>
 ): CSSTransitionHookReturnValue<E> {
   const {
-    timeout = SCALE_TIMEOUT,
+    timeout = DEFAULT_SCALE_TIMEOUT,
     vertical = false,
     temporary = true,
     exitedHidden = true,
-    classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES,
+    classNames = vertical
+      ? DEFAULT_SCALE_Y_CLASSNAMES
+      : DEFAULT_SCALE_CLASSNAMES,
     ...transitionOptions
   } = options;
 

package/src/transition/useSkeletonPlaceholder.ts

@@ -62,7 +62,7 @@ export interface SkeletonPlaceholderOptions
    * @example No Inline Width
    * ```ts
    * import type { ReactElement } from "@react";
-   * import { useSkeletonPlaceholder } from "@react-md/core";
+   * import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
    *
    * import styles from "./MyComponent.module.scss";
    *
@@ -83,7 +83,7 @@ export interface SkeletonPlaceholderOptions
    * @example Custom Inline Width
    * ```ts
    * import type { ReactElement } from "@react";
-   * import { useSkeletonPlaceholder } from "@react-md/core";
+   * import { useSkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
    *
    * export function Example(): ReactElement {
    *   const skeletonProps = useSkeletonPlaceholder({
@@ -117,7 +117,7 @@ export interface SkeletonPlaceholderOptions
    * @example Pre-rendered Layout
    * ```tsx
    * import type { ReactElement } from "@react";
-   * import { SkeletonPlaceholder } from "@react-md/core";
+   * import { SkeletonPlaceholder } from "@react-md/core/transition/useSkeletonPlaceholder";
    *
    * interface Data {
    *   id: string;
@@ -217,6 +217,9 @@ export interface SkeletonPlaceholderStylingProps {
  *   return <div style={style} className={className} />;
  * }
  * ```
+ *
+ * @see {@link https://next.react-md.dev/hooks/use-skeleton-placeholder-transition | useSkeletonPlaceholder Demos}
+ * @see {@link https://next.react-md.dev/components/skeleton-placeholder | SkeletonPlaceholder Demos}
  * @since 6.0.0
  */
 export function useSkeletonPlaceholder(

package/src/transition/useSlideTransition.ts

@@ -2,25 +2,25 @@
 
 import { cnb } from "cnbuilder";
 
-import type {
-  CSSTransitionClassNames,
-  CSSTransitionHookReturnValue,
-  PreconfiguredCSSTransitionOptions,
-  TransitionTimeout,
+import {
+  type CSSTransitionClassNames,
+  type CSSTransitionHookReturnValue,
+  type PreconfiguredCSSTransitionOptions,
+  type TransitionTimeout,
 } from "./types.js";
 import { useCSSTransition } from "./useCSSTransition.js";
 
 /** @since 6.0.0 */
-export const DEFAULT_SLIDE_TRANSITION_TIMEOUT: Readonly<TransitionTimeout> = 150;
+export const DEFAULT_SLIDE_TRANSITION_TIMEOUT =
+  150 as const satisfies TransitionTimeout;
 
 /** @since 6.0.0 */
-export const DEFAULT_SLIDE_TRANSITION_CLASSNAMES: Readonly<CSSTransitionClassNames> =
-  {
-    enter: "rmd-slide--enter",
-    enterActive: "rmd-slide--enter-active rmd-slide--animate",
-    exit: "rmd-slide--exit",
-    exitActive: "rmd-slide--exit-active rmd-slide--animate",
-  };
+export const DEFAULT_SLIDE_TRANSITION_CLASSNAMES = {
+  enter: "rmd-slide--enter",
+  enterActive: "rmd-slide--enter-active rmd-slide--animate",
+  exit: "rmd-slide--exit",
+  exitActive: "rmd-slide--exit-active rmd-slide--animate",
+} as const satisfies CSSTransitionClassNames;
 
 /** @since 6.0.0 */
 export type SlideTransitionOptions<E extends HTMLElement> =
@@ -84,6 +84,7 @@ export type SlideTransitionOptions<E extends HTMLElement> =
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/slide | Slide Demos}
  * @see {@link SlideContainer} and {@link Slide} for convenient default
  * implementations.
  * @since 6.0.0

package/src/transition/useTransition.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useReducer, useRef, useState } from "react";
+import { useReducer, useRef, useState } from "react";
 
 import { useSsr } from "../SsrProvider.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
@@ -29,6 +29,7 @@ const noop = (): void => {
  * since this is just a low-level hook that can be used to transition using
  * timeouts.
  *
+ * @see {@link https://next.react-md.dev/hooks/use-transition | useTransition Demos}
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0
@@ -162,7 +163,7 @@ export function useTransition<E extends HTMLElement>(
   const isFirstRender = useRef(true);
   const isRehydrateAppear = useRef(ssr && !transitionIn);
   const defaultTransitionIn = useRef(transitionIn);
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const {
       timeout,
       reflow,

package/src/tree/DefaultTreeItemRenderer.tsx

@@ -17,6 +17,7 @@ import {
  * Look at the `Tree` component for an example of creating a custom
  * implementation.
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0
  */
 export function DefaultTreeItemRenderer<

package/src/tree/Tree.tsx

@@ -120,12 +120,10 @@ export interface TreeProps<T extends TreeItemNode>
   /**
    * @example Custom Tree Item Renderer
    * ```tsx
-   * import {
-   *   TreeItem,
-   *   useKeyboardMovementContext,
-   *   useTreeContext,
-   *   type TreeItemRendererProps,
-   * } from "@react-md/core";
+   * import { useTreeContext } from "@react-md/core/movement/TreeProvider"
+   * import { useKeyboardMovementContext } from "@react-md/core/movement/useKeyboardMovementProvider"
+   * import { TreeItem } from "@react-md/core/tree/TreeItem";
+   * import { type TreeItemRendererProps } from "@react-md/core/tree/types";
    * import FolderIcon from "@react-md/material-icons/FolderIcon";
    * import FolderOpenIcon from "@react-md/material-icons/FolderOpenIcon";
    * import { type ReactElement } from "react";
@@ -181,8 +179,9 @@ export interface TreeProps<T extends TreeItemNode>
  *
  * @example Simple Tree
  * ```tsx
- * import type { TreeData } from "@react-md/core";
- * import { Tree, useTree } from "@react-md/core";
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { useTree } from "@react-md/core/tree/useTree";
  * import type { ReactElement } from "react";
  *
  * const data: TreeData = {
@@ -223,8 +222,8 @@ export interface TreeProps<T extends TreeItemNode>
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @see {@link TreeProps.renderer} for a custom tree item example.
- *
  * @since 6.0.0 There was a major API change and the `id` is now `optional`.
  * In addition, the following props were removed:
  * - `itemRenderer`

package/src/tree/TreeItem.tsx

@@ -87,6 +87,7 @@ export interface TreeItemProps
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/}
  * @since 6.0.0 No longer forwards refs. The ref must be provided using
  * `contentRef` instead.

package/src/tree/types.ts

@@ -71,7 +71,7 @@ export interface DefaultTreeItemNode
 /**
  * @example Default Structure
  * ```tsx
- * import type { TreeData } from "@react-md/core";
+ * import { type TreeData } from "@react-md/core/tree/types";
  * import FolderIcon from "@react-md/material-icons/FolderIcon";
  *
  * export const MY_DATA: TreeData = {

package/src/tree/useTree.ts

@@ -35,8 +35,9 @@ export interface TreeImplementation extends TreeSelection, TreeExpansion {}
  *
  * @example Simple Example
  * ```tsx
- * import type { TreeData } from "@react-md/core";
- * import { Tree, useTree } from "@react-md/core";
+ * import { Tree } from "@react-md/core/tree/Tree";
+ * import { type TreeData } from "@react-md/core/tree/types";
+ * import { useTree } from "@react-md/core/tree/useTree";
  * import type { ReactElement } from "react";
  *
  * const data: TreeData = {
@@ -50,6 +51,7 @@ export interface TreeImplementation extends TreeSelection, TreeExpansion {}
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0
  */
 export function useTree(options: TreeHookOptions = {}): TreeImplementation {

package/src/tree/useTreeExpansion.ts

@@ -17,6 +17,7 @@ export interface TreeExpansion {
 }
 
 /**
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0 Renamed from `useTreeItemExpansion` and uses a Set
  * instead of a list to increase performance.
  */

package/src/tree/useTreeItems.ts

@@ -106,6 +106,7 @@ export interface TreeItems<T extends TreeItemNode> {
  * This is mostly an internal hook, but can be used to build tree-like
  * data structures without the need of the `Tree` component.
  *
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0 converted to use an object argument instead of
  * multiple arguments. Also logs any orphaned items that do not have a parent
  */

package/src/tree/useTreeSelection.ts

@@ -19,6 +19,7 @@ export interface TreeSelection {
 }
 
 /**
+ * @see {@link https://next.react-md.dev/components/tree | Tree Demos}
  * @since 6.0.0 Renamed from `useTreeItemSelection` and uses a Set
  * instead of a list to increase performance.
  */

package/src/types.ts

@@ -49,7 +49,7 @@ export interface LabelA11y {
  * @example Simple Example
  * ```ts
  * import type { HTMLAttributes, ReactElement } from "react";
- * import type { LabelRequiredForA11y } from "@react-md/core";
+ * import type { LabelRequiredForA11y } from "@react-md/core/types";
  *
  * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;
  *