@react-md/core 1.0.0-next.8 → 1.0.0-next.9

package/dist/test-utils/polyfills/TextDecoder.js

@@ -0,0 +1,8 @@
+import { TextDecoder } from "node:util";
+if (typeof global.TextDecoder === "undefined") {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error browser TextDecoder does not support `null` while `node:util` does
+    global.TextDecoder = TextDecoder;
+}
+
+//# sourceMappingURL=TextDecoder.js.map

package/dist/test-utils/polyfills/TextDecoder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/polyfills/TextDecoder.ts"],"sourcesContent":["import { TextDecoder } from \"node:util\";\n\nif (typeof global.TextDecoder === \"undefined\") {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error browser TextDecoder does not support `null` while `node:util` does\n  global.TextDecoder = TextDecoder;\n}\n"],"names":["TextDecoder","global"],"mappings":"AAAA,SAASA,WAAW,QAAQ,YAAY;AAExC,IAAI,OAAOC,OAAOD,WAAW,KAAK,aAAa;IAC7C,6DAA6D;IAC7D,sFAAsF;IACtFC,OAAOD,WAAW,GAAGA;AACvB"}

package/dist/test-utils/polyfills/TextEncoder.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-utils/polyfills/TextEncoder.js

@@ -0,0 +1,6 @@
+import { TextEncoder } from "node:util";
+if (typeof global.TextEncoder === "undefined") {
+    global.TextEncoder = TextEncoder;
+}
+
+//# sourceMappingURL=TextEncoder.js.map

package/dist/test-utils/polyfills/TextEncoder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/polyfills/TextEncoder.ts"],"sourcesContent":["import { TextEncoder } from \"node:util\";\n\nif (typeof global.TextEncoder === \"undefined\") {\n  global.TextEncoder = TextEncoder;\n}\n"],"names":["TextEncoder","global"],"mappings":"AAAA,SAASA,WAAW,QAAQ,YAAY;AAExC,IAAI,OAAOC,OAAOD,WAAW,KAAK,aAAa;IAC7CC,OAAOD,WAAW,GAAGA;AACvB"}

package/dist/test-utils/polyfills/index.d.ts

@@ -0,0 +1,7 @@
+import "./IntersectionObserver.js";
+import "./ResizeObserver.js";
+import "./TextDecoder.js";
+import "./TextEncoder.js";
+import "./matchMedia.js";
+import "./offsetParent.js";
+import "./scrollIntoView.js";

package/dist/test-utils/polyfills/index.js

@@ -1,5 +1,7 @@
 import "./IntersectionObserver.js";
 import "./ResizeObserver.js";
+import "./TextDecoder.js";
+import "./TextEncoder.js";
 import "./matchMedia.js";
 import "./offsetParent.js";
 import "./scrollIntoView.js";

package/dist/test-utils/polyfills/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/polyfills/index.ts"],"sourcesContent":["import \"./IntersectionObserver.js\";\nimport \"./ResizeObserver.js\";\nimport \"./matchMedia.js\";\nimport \"./offsetParent.js\";\nimport \"./scrollIntoView.js\";\n"],"names":[],"mappings":"AAAA,OAAO,4BAA4B;AACnC,OAAO,sBAAsB;AAC7B,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,sBAAsB"}
+{"version":3,"sources":["../../../src/test-utils/polyfills/index.ts"],"sourcesContent":["import \"./IntersectionObserver.js\";\nimport \"./ResizeObserver.js\";\nimport \"./TextDecoder.js\";\nimport \"./TextEncoder.js\";\nimport \"./matchMedia.js\";\nimport \"./offsetParent.js\";\nimport \"./scrollIntoView.js\";\n"],"names":[],"mappings":"AAAA,OAAO,4BAA4B;AACnC,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAC3B,OAAO,sBAAsB"}

package/dist/test-utils/polyfills/matchMedia.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-utils/polyfills/offsetParent.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-utils/polyfills/scrollIntoView.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test-utils/render.d.ts

@@ -0,0 +1,13 @@
+import { type Queries, type RenderOptions, type RenderResult, type queries } from "@testing-library/react";
+import { type ReactElement } from "react";
+import { type CoreProvidersProps } from "../CoreProviders.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ReactMDRenderOptions<Q extends Queries = typeof queries, Container extends Element | DocumentFragment = HTMLElement, BaseElement extends Element | DocumentFragment = Container> extends RenderOptions<Q, Container, BaseElement> {
+    rmdConfig?: Omit<CoreProvidersProps, "children">;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function rmdRender<Q extends Queries = typeof queries, Container extends Element | DocumentFragment = HTMLElement, BaseElement extends Element | DocumentFragment = Container>(ui: ReactElement, options?: ReactMDRenderOptions<Q, Container, BaseElement>): RenderResult<Q, Container, BaseElement>;

package/dist/test-utils/timers.d.ts

@@ -0,0 +1,39 @@
+import { jest } from "@jest/globals";
+/**
+ * @example
+ * ```ts
+ * import { useImmediateRaf } from "@react-md/core/test-utils";
+ *
+ * describe("some test suite", () => {
+ *   it("should test something with requestAnimationFrame", () => {
+ *     const raf = useImmediateRaf();
+ *
+ *     // do some testing with requestAnimationFrame
+ *
+ *     // reset to original at the end of the test
+ *     raf.mockRestore()
+ *   });
+ * });
+ * ```
+ *
+ * @example
+ * Automatic Cleanup
+ * ```ts
+ * import { useImmediateRaf } from "@react-md/core/test-utils";
+ *
+ * afterEach(() => {
+ *   jest.restoreAllMocks();
+ * });
+ *
+ * describe("some test suite", () => {
+ *   it("should test something with requestAnimationFrame", () => {
+ *     const raf = useImmediateRaf();
+ *
+ *     // do some testing with requestAnimationFrame
+ *   });
+ * });
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const useImmediateRaf: () => jest.SpiedFunction<typeof requestAnimationFrame>;

package/dist/transition/useCollapseTransition.d.ts

@@ -1,17 +1,5 @@
 import type { CSSProperties } from "react";
 import type { CSSTransitionElementProps, CSSTransitionHookReturnValue, PreconfiguredCSSTransitionOptions, TransitionTimeout, TransitionTimeoutObject } from "./types.js";
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_HEIGHT = 0;
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_PADDING_TOP = 0;
-/**
- * @remarks \@since 2.0.0
- */
-export declare const DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM = 0;
 /**
  * @remarks \@since 2.0.0
  */
@@ -32,8 +20,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;
     /**
@@ -45,8 +32,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;
     /**
@@ -58,8 +44,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;
 }

package/dist/transition/useCollapseTransition.js

@@ -9,15 +9,6 @@ import { getElementSizing, getTransitionTimeout } from "./utils.js";
 const noop = ()=>{
 // 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
  */ export const DEFAULT_COLLAPSE_TIMEOUT = {
@@ -119,7 +110,7 @@ const noop = ()=>{
  * transition.
  * @remarks \@since 4.0.0
  */ export function useCollapseTransition(options) {
-    const { nodeRef: propNodeRef, style: propStyle, className, transitionIn, timeout = DEFAULT_COLLAPSE_TIMEOUT, minHeight = DEFAULT_COLLAPSE_MIN_HEIGHT, minPaddingTop = DEFAULT_COLLAPSE_MIN_PADDING_TOP, minPaddingBottom = DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM, temporary = minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0, appear = false, enter = true, exit = true, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop } = options;
+    const { nodeRef: propNodeRef, style: propStyle, className, transitionIn, timeout = DEFAULT_COLLAPSE_TIMEOUT, minHeight = 0, minPaddingTop = 0, minPaddingBottom = 0, temporary = minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0, appear = false, enter = true, exit = true, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop } = options;
     const [nodeRef, refCallback] = useEnsuredRef(propNodeRef);
     const [style, setStyle] = useState(()=>{
         if (transitionIn) {

package/dist/transition/useCollapseTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useCollapseTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type { CSSProperties } from \"react\";\nimport { useState } from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { collapse } from \"./collapseStyles.js\";\nimport type {\n  CSSTransitionElementProps,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n  TransitionTimeoutObject,\n} from \"./types.js\";\nimport { useTransition } from \"./useTransition.js\";\nimport { getElementSizing, getTransitionTimeout } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 2.0.0\n */\nexport const DEFAULT_COLLAPSE_MIN_HEIGHT = 0;\n\n/**\n * @remarks \\@since 2.0.0\n */\nexport const DEFAULT_COLLAPSE_MIN_PADDING_TOP = 0;\n\n/**\n * @remarks \\@since 2.0.0\n */\nexport const DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM = 0;\n\n/**\n * @remarks \\@since 2.0.0\n */\nexport const DEFAULT_COLLAPSE_TIMEOUT: Readonly<TransitionTimeoutObject> = {\n  enter: 250,\n  exit: 200,\n};\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseConfigurationStyle {\n  /**\n   * The minimum height that the collapsed element can be which defaults to `0`.\n   * This can either be a number of pixels or a string CSS height value.\n   *\n   * Setting this value to any non-zero value will allow for the element to\n   * shrink to the defined min-height, and then expand to the full height once\n   * no longer collapsed.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @see {@link DEFAULT_COLLAPSE_MIN_HEIGHT}\n   * @defaultValue `DEFAULT_COLLAPSE_MIN_HEIGHT`\n   */\n  minHeight?: number | string;\n\n  /**\n   * The minimum padding-top that the collapsed element can be which defaults to\n   * `0`. This can either be a number of pixels or a string CSS `padding-top`\n   * value.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_TOP}\n   * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_TOP`\n   */\n  minPaddingTop?: number | string;\n\n  /**\n   * The minimum padding-bottom that the collapsed element can be which defaults\n   * to `0`. This can either be a number of pixels or a string CSS\n   * `padding-bottom` value.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @see {@link DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM}\n   * @defaultValue `DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM`\n   */\n  minPaddingBottom?: number | string;\n}\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseStyle extends CollapseConfigurationStyle {\n  /**\n   * This will only be set when the {@link TransitionStage} is `\"entering\"` or\n   * `\"exiting\"` as `\"${timeout}ms\"`.\n   */\n  transitionDuration?: string;\n}\n\n/**\n * These props (and `ref`) **must** be passed to a DOM element for the collapse\n * transition to work.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseElementProps<E extends HTMLElement>\n  extends CSSTransitionElementProps<E> {\n  /**\n   * A merged styled object required for the collapse transition to work.\n   *\n   * @see {@link CollapseStyle}\n   * @see {@link CollapseTransitionHookOptions.style}\n   */\n  style: CSSProperties;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseTransitionHookOptions<E extends HTMLElement>\n  extends Omit<PreconfiguredCSSTransitionOptions<E>, \"exitedHidden\">,\n    CollapseConfigurationStyle {\n  /**\n   * An optional style to merge with the required collapse transition styles.\n   *\n   * If any keys from the {@link CollapseStyle} are included in this object,\n   * these styles will override and possibly break the collapse transition.\n   */\n  style?: CSSProperties;\n\n  /**\n   *\n   * @see {@link DEFAULT_COLLAPSE_TIMEOUT}\n   * @defaultValue `DEFAULT_COLLAPSE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   *\n   * @defaultValue `minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0`\n   */\n  temporary?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseTransitionHookReturnValue<E extends HTMLElement>\n  extends CSSTransitionHookReturnValue<E>,\n    CollapseElementProps<E> {\n  /**\n   * This is just a convenience object so that you don't need to destructure as\n   * many variables to pass to an element.\n   *\n   * @example\n   * Simple Usage\n   * ```tsx\n   * const { elementProps, rendered } = useCollapseTransition({\n   *   // ...options\n   *   transitionIn,\n   * });\n   *\n   * if (!rendered) {\n   *   return null\n   * }\n   *\n   * return <div {...elementProps}>{children}</div>;\n   *\n   * // This is the long-hand version\n   * const { ref, style, className, hidden, rendered } = useCollapseTransition({\n   *   // ...options\n   *   transitionIn,\n   * });\n   *\n   * if (!rendered) {\n   *   return null\n   * }\n   *\n   * return (\n   *   <div\n   *     ref={ref}\n   *     style={style}\n   *     className={className}\n   *     hidden={hidden}\n   *   >\n   *     {children}\n   *   </div>\n   * );\n   * ```\n   */\n  elementProps: Readonly<CollapseElementProps<E>>;\n}\n\n/**\n * This hook is used to create a transition to collapse and expand an element\n * **inline** with other content like an accordion by animating the\n * `max-height`, `padding-top`, and `padding-bottom` CSS properties. The default\n * behavior is to hide the element completely while collapsed, but providing the\n * `minHeight`, `minPaddingTop`, and `minPaddingBottom` options can make this\n * work like a \"See More\"/\"Preview\" type of element\n *\n * @example\n * Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, Typography, useCollapseTransition } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *   const { elementProps, rendered } =\n *     useCollapseTransition({\n *       transitionIn: !collapsed,\n *       // If the collapsible element should maintain state by not unmounting\n *       // while collapsed, uncomment this next line\n *       // temporary: false,\n *     });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setCollapsed(!collapsed)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps}>\n *           <Typography>Stuff that should be collapsed</Typography>\n *           <div>Whatever content...</div>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * See More Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, IconRotator, Typography, useCollapseTransition } from \"@react-md/core\";\n * import { KeyboardArrowDownSVGIcon } from \"@react-md/material-icons\";\n *\n * import styles from \"./Example.module.scss\";\n * // pretend styles:\n * //\n * // .container {\n * //   padding: 1rem;\n * //   position: relative;\n * // }\n * //\n * // .button {\n * //   position: absolute;\n * //   right: 0;\n * //   top: 0;\n * // }\n *\n *\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *   const { elementProps } =\n *     useCollapseTransition({\n *       transitionIn: !collapsed,\n *       minHeight: 120,\n *       minPaddingTop: 16,\n *       className: styles.container,\n *     });\n *\n *   return (\n *     <div {...elementProps}>\n *       <Button\n *         aria-expanded={!collapsed}\n *         aria-label=\"Expand\"\n *         onClick={() => setCollapsed(!collapsed)}\n *         buttonType=\"icon\"\n *         className={styles.button}\n *       >\n *         <IconRotator rotated={!collapsed}>\n *           <KeyboardArrowDownSVGIcon />\n *         </IconRotator>\n *       </Button>\n *       <SomeComponentWithALotOfContent />\n *     </div>\n *   );\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport function useCollapseTransition<E extends HTMLElement>(\n  options: CollapseTransitionHookOptions<E>\n): CollapseTransitionHookReturnValue<E> {\n  const {\n    nodeRef: propNodeRef,\n    style: propStyle,\n    className,\n    transitionIn,\n    timeout = DEFAULT_COLLAPSE_TIMEOUT,\n    minHeight = DEFAULT_COLLAPSE_MIN_HEIGHT,\n    minPaddingTop = DEFAULT_COLLAPSE_MIN_PADDING_TOP,\n    minPaddingBottom = DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM,\n    temporary = minHeight === 0 &&\n      minPaddingTop === 0 &&\n      minPaddingBottom === 0,\n    appear = false,\n    enter = true,\n    exit = true,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExit = noop,\n    onExiting = noop,\n    onExited = noop,\n  } = options;\n\n  const [nodeRef, refCallback] = useEnsuredRef(propNodeRef);\n  const [style, setStyle] = useState<CSSProperties | undefined>(() => {\n    if (transitionIn) {\n      return undefined;\n    }\n\n    return {\n      maxHeight: minHeight,\n      paddingTop: minPaddingTop,\n      paddingBottom: minPaddingBottom,\n    };\n  });\n\n  const transitionTimeout = getTransitionTimeout({\n    timeout,\n    appear,\n    enter,\n    exit,\n  });\n\n  const { appearing, rendered, ref, stage, transitionTo, disablePortal } =\n    useTransition({\n      nodeRef: refCallback,\n      timeout,\n      transitionIn,\n      reflow: true,\n      appear,\n      enter,\n      exit,\n      temporary,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n        });\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        const { maxHeight, paddingTop, paddingBottom } = getElementSizing(\n          nodeRef.current\n        );\n\n        const duration = appearing\n          ? transitionTimeout.appear\n          : transitionTimeout.enter;\n\n        setStyle({\n          maxHeight,\n          paddingTop,\n          paddingBottom,\n          transitionDuration: `${duration}ms`,\n        });\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        setStyle(undefined);\n      },\n      onExit() {\n        onExit();\n        const { maxHeight, paddingTop, paddingBottom } = getElementSizing(\n          nodeRef.current\n        );\n\n        setStyle({\n          maxHeight,\n          paddingTop,\n          paddingBottom,\n          transitionDuration: `${transitionTimeout.exit}ms`,\n        });\n      },\n      onExiting() {\n        onExiting();\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n          transitionDuration: `${transitionTimeout.exit}ms`,\n        });\n      },\n      onExited() {\n        onExited();\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n        });\n      },\n    });\n  const entering = stage === \"enter\" || stage === \"entering\";\n  const exiting = stage === \"exit\" || stage === \"exiting\";\n  const collapsible =\n    transitionTimeout.enter !== 0 || transitionTimeout.exit !== 0;\n\n  const elementProps: CollapseElementProps<E> = {\n    ref,\n    style: { ...style, ...propStyle },\n    className:\n      cnb(\n        className,\n        collapsible &&\n          collapse({\n            enter: entering,\n            leave: exiting,\n            disableOverflow: !transitionIn || !!style,\n          }),\n        stage === \"exited\" &&\n          minHeight === 0 &&\n          minPaddingTop === 0 &&\n          minPaddingBottom === 0 &&\n          DISPLAY_NONE_CLASS\n      ) || undefined,\n  };\n\n  return {\n    ...elementProps,\n    stage,\n    rendered,\n    appearing,\n    elementProps,\n    transitionTo,\n    disablePortal,\n  };\n}\n"],"names":["cnb","useState","useEnsuredRef","DISPLAY_NONE_CLASS","collapse","useTransition","getElementSizing","getTransitionTimeout","noop","DEFAULT_COLLAPSE_MIN_HEIGHT","DEFAULT_COLLAPSE_MIN_PADDING_TOP","DEFAULT_COLLAPSE_MIN_PADDING_BOTTOM","DEFAULT_COLLAPSE_TIMEOUT","enter","exit","useCollapseTransition","options","nodeRef","propNodeRef","style","propStyle","className","transitionIn","timeout","minHeight","minPaddingTop","minPaddingBottom","temporary","appear","onEnter","onEntering","onEntered","onExit","onExiting","onExited","refCallback","setStyle","undefined","maxHeight","paddingTop","paddingBottom","transitionTimeout","appearing","rendered","ref","stage","transitionTo","disablePortal","reflow","current","duration","transitionDuration","entering","exiting","collapsible","elementProps","leave","disableOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../src/transition/useCollapseTransition.ts"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport type { CSSProperties } from \"react\";\nimport { useState } from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { collapse } from \"./collapseStyles.js\";\nimport type {\n  CSSTransitionElementProps,\n  CSSTransitionHookReturnValue,\n  PreconfiguredCSSTransitionOptions,\n  TransitionTimeout,\n  TransitionTimeoutObject,\n} from \"./types.js\";\nimport { useTransition } from \"./useTransition.js\";\nimport { getElementSizing, getTransitionTimeout } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 2.0.0\n */\nexport const DEFAULT_COLLAPSE_TIMEOUT: Readonly<TransitionTimeoutObject> = {\n  enter: 250,\n  exit: 200,\n};\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseConfigurationStyle {\n  /**\n   * The minimum height that the collapsed element can be which defaults to `0`.\n   * This can either be a number of pixels or a string CSS height value.\n   *\n   * Setting this value to any non-zero value will allow for the element to\n   * shrink to the defined min-height, and then expand to the full height once\n   * no longer collapsed.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @defaultValue `0`\n   */\n  minHeight?: number | string;\n\n  /**\n   * The minimum padding-top that the collapsed element can be which defaults to\n   * `0`. This can either be a number of pixels or a string CSS `padding-top`\n   * value.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @defaultValue `0`\n   */\n  minPaddingTop?: number | string;\n\n  /**\n   * The minimum padding-bottom that the collapsed element can be which defaults\n   * to `0`. This can either be a number of pixels or a string CSS\n   * `padding-bottom` value.\n   *\n   * Note: If the `minHeight`, `minPaddingTop`, and `minPaddingBottom` options\n   * are all set to `0` (default), the child will be removed from the DOM while\n   * collapsed.\n   *\n   * @defaultValue `0`\n   */\n  minPaddingBottom?: number | string;\n}\n\n/**\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseStyle extends CollapseConfigurationStyle {\n  /**\n   * This will only be set when the {@link TransitionStage} is `\"entering\"` or\n   * `\"exiting\"` as `\"${timeout}ms\"`.\n   */\n  transitionDuration?: string;\n}\n\n/**\n * These props (and `ref`) **must** be passed to a DOM element for the collapse\n * transition to work.\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseElementProps<E extends HTMLElement>\n  extends CSSTransitionElementProps<E> {\n  /**\n   * A merged styled object required for the collapse transition to work.\n   *\n   * @see {@link CollapseStyle}\n   * @see {@link CollapseTransitionHookOptions.style}\n   */\n  style: CSSProperties;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseTransitionHookOptions<E extends HTMLElement>\n  extends Omit<PreconfiguredCSSTransitionOptions<E>, \"exitedHidden\">,\n    CollapseConfigurationStyle {\n  /**\n   * An optional style to merge with the required collapse transition styles.\n   *\n   * If any keys from the {@link CollapseStyle} are included in this object,\n   * these styles will override and possibly break the collapse transition.\n   */\n  style?: CSSProperties;\n\n  /**\n   *\n   * @see {@link DEFAULT_COLLAPSE_TIMEOUT}\n   * @defaultValue `DEFAULT_COLLAPSE_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   *\n   * @defaultValue `minHeight === 0 && minPaddingTop === 0 && minPaddingBottom === 0`\n   */\n  temporary?: boolean;\n}\n\n/**\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport interface CollapseTransitionHookReturnValue<E extends HTMLElement>\n  extends CSSTransitionHookReturnValue<E>,\n    CollapseElementProps<E> {\n  /**\n   * This is just a convenience object so that you don't need to destructure as\n   * many variables to pass to an element.\n   *\n   * @example\n   * Simple Usage\n   * ```tsx\n   * const { elementProps, rendered } = useCollapseTransition({\n   *   // ...options\n   *   transitionIn,\n   * });\n   *\n   * if (!rendered) {\n   *   return null\n   * }\n   *\n   * return <div {...elementProps}>{children}</div>;\n   *\n   * // This is the long-hand version\n   * const { ref, style, className, hidden, rendered } = useCollapseTransition({\n   *   // ...options\n   *   transitionIn,\n   * });\n   *\n   * if (!rendered) {\n   *   return null\n   * }\n   *\n   * return (\n   *   <div\n   *     ref={ref}\n   *     style={style}\n   *     className={className}\n   *     hidden={hidden}\n   *   >\n   *     {children}\n   *   </div>\n   * );\n   * ```\n   */\n  elementProps: Readonly<CollapseElementProps<E>>;\n}\n\n/**\n * This hook is used to create a transition to collapse and expand an element\n * **inline** with other content like an accordion by animating the\n * `max-height`, `padding-top`, and `padding-bottom` CSS properties. The default\n * behavior is to hide the element completely while collapsed, but providing the\n * `minHeight`, `minPaddingTop`, and `minPaddingBottom` options can make this\n * work like a \"See More\"/\"Preview\" type of element\n *\n * @example\n * Simple Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, Typography, useCollapseTransition } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *   const { elementProps, rendered } =\n *     useCollapseTransition({\n *       transitionIn: !collapsed,\n *       // If the collapsible element should maintain state by not unmounting\n *       // while collapsed, uncomment this next line\n *       // temporary: false,\n *     });\n *\n *   return (\n *     <>\n *       <Button onClick={() => setCollapsed(!collapsed)}>\n *         Toggle\n *       </Button>\n *       {rendered && (\n *         <div {...elementProps}>\n *           <Typography>Stuff that should be collapsed</Typography>\n *           <div>Whatever content...</div>\n *         </div>\n *       )}\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * See More Example\n * ```tsx\n * import { ReactElement, useState } from \"react\";\n * import { Button, IconRotator, Typography, useCollapseTransition } from \"@react-md/core\";\n * import { KeyboardArrowDownSVGIcon } from \"@react-md/material-icons\";\n *\n * import styles from \"./Example.module.scss\";\n * // pretend styles:\n * //\n * // .container {\n * //   padding: 1rem;\n * //   position: relative;\n * // }\n * //\n * // .button {\n * //   position: absolute;\n * //   right: 0;\n * //   top: 0;\n * // }\n *\n *\n * function Example(): ReactElement {\n *   const [collapsed, setCollapsed] = useState(true);\n *   const { elementProps } =\n *     useCollapseTransition({\n *       transitionIn: !collapsed,\n *       minHeight: 120,\n *       minPaddingTop: 16,\n *       className: styles.container,\n *     });\n *\n *   return (\n *     <div {...elementProps}>\n *       <Button\n *         aria-expanded={!collapsed}\n *         aria-label=\"Expand\"\n *         onClick={() => setCollapsed(!collapsed)}\n *         buttonType=\"icon\"\n *         className={styles.button}\n *       >\n *         <IconRotator rotated={!collapsed}>\n *           <KeyboardArrowDownSVGIcon />\n *         </IconRotator>\n *       </Button>\n *       <SomeComponentWithALotOfContent />\n *     </div>\n *   );\n * }\n * ```\n *\n * @typeParam E - An HTMLElement type used for the ref required for the\n * transition.\n * @remarks \\@since 4.0.0\n */\nexport function useCollapseTransition<E extends HTMLElement>(\n  options: CollapseTransitionHookOptions<E>\n): CollapseTransitionHookReturnValue<E> {\n  const {\n    nodeRef: propNodeRef,\n    style: propStyle,\n    className,\n    transitionIn,\n    timeout = DEFAULT_COLLAPSE_TIMEOUT,\n    minHeight = 0,\n    minPaddingTop = 0,\n    minPaddingBottom = 0,\n    temporary = minHeight === 0 &&\n      minPaddingTop === 0 &&\n      minPaddingBottom === 0,\n    appear = false,\n    enter = true,\n    exit = true,\n    onEnter = noop,\n    onEntering = noop,\n    onEntered = noop,\n    onExit = noop,\n    onExiting = noop,\n    onExited = noop,\n  } = options;\n\n  const [nodeRef, refCallback] = useEnsuredRef(propNodeRef);\n  const [style, setStyle] = useState<CSSProperties | undefined>(() => {\n    if (transitionIn) {\n      return undefined;\n    }\n\n    return {\n      maxHeight: minHeight,\n      paddingTop: minPaddingTop,\n      paddingBottom: minPaddingBottom,\n    };\n  });\n\n  const transitionTimeout = getTransitionTimeout({\n    timeout,\n    appear,\n    enter,\n    exit,\n  });\n\n  const { appearing, rendered, ref, stage, transitionTo, disablePortal } =\n    useTransition({\n      nodeRef: refCallback,\n      timeout,\n      transitionIn,\n      reflow: true,\n      appear,\n      enter,\n      exit,\n      temporary,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n        });\n      },\n      onEntering(appearing) {\n        onEntering(appearing);\n        const { maxHeight, paddingTop, paddingBottom } = getElementSizing(\n          nodeRef.current\n        );\n\n        const duration = appearing\n          ? transitionTimeout.appear\n          : transitionTimeout.enter;\n\n        setStyle({\n          maxHeight,\n          paddingTop,\n          paddingBottom,\n          transitionDuration: `${duration}ms`,\n        });\n      },\n      onEntered(appearing) {\n        onEntered(appearing);\n        setStyle(undefined);\n      },\n      onExit() {\n        onExit();\n        const { maxHeight, paddingTop, paddingBottom } = getElementSizing(\n          nodeRef.current\n        );\n\n        setStyle({\n          maxHeight,\n          paddingTop,\n          paddingBottom,\n          transitionDuration: `${transitionTimeout.exit}ms`,\n        });\n      },\n      onExiting() {\n        onExiting();\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n          transitionDuration: `${transitionTimeout.exit}ms`,\n        });\n      },\n      onExited() {\n        onExited();\n        setStyle({\n          maxHeight: minHeight,\n          paddingTop: minPaddingTop,\n          paddingBottom: minPaddingBottom,\n        });\n      },\n    });\n  const entering = stage === \"enter\" || stage === \"entering\";\n  const exiting = stage === \"exit\" || stage === \"exiting\";\n  const collapsible =\n    transitionTimeout.enter !== 0 || transitionTimeout.exit !== 0;\n\n  const elementProps: CollapseElementProps<E> = {\n    ref,\n    style: { ...style, ...propStyle },\n    className:\n      cnb(\n        className,\n        collapsible &&\n          collapse({\n            enter: entering,\n            leave: exiting,\n            disableOverflow: !transitionIn || !!style,\n          }),\n        stage === \"exited\" &&\n          minHeight === 0 &&\n          minPaddingTop === 0 &&\n          minPaddingBottom === 0 &&\n          DISPLAY_NONE_CLASS\n      ) || undefined,\n  };\n\n  return {\n    ...elementProps,\n    stage,\n    rendered,\n    appearing,\n    elementProps,\n    transitionTo,\n    disablePortal,\n  };\n}\n"],"names":["cnb","useState","useEnsuredRef","DISPLAY_NONE_CLASS","collapse","useTransition","getElementSizing","getTransitionTimeout","noop","DEFAULT_COLLAPSE_TIMEOUT","enter","exit","useCollapseTransition","options","nodeRef","propNodeRef","style","propStyle","className","transitionIn","timeout","minHeight","minPaddingTop","minPaddingBottom","temporary","appear","onEnter","onEntering","onEntered","onExit","onExiting","onExited","refCallback","setStyle","undefined","maxHeight","paddingTop","paddingBottom","transitionTimeout","appearing","rendered","ref","stage","transitionTo","disablePortal","reflow","current","duration","transitionDuration","entering","exiting","collapsible","elementProps","leave","disableOverflow"],"mappings":"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"}

package/dist/transition/utils.js

@@ -41,13 +41,18 @@
         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/dist/transition/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/utils.ts"],"sourcesContent":["import type {\n  CSSTransitionClassNames,\n  CSSTransitionClassNamesObject,\n  TransitionActions,\n  TransitionTimeout,\n  TransitionTimeoutObject,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport interface TransitionTimeoutOptions extends Required<TransitionActions> {\n  timeout: TransitionTimeout;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function getTransitionTimeout(\n  options: Readonly<TransitionTimeoutOptions>\n): Readonly<Required<TransitionTimeoutObject>> {\n  const { timeout, appear, enter, exit } = options;\n  if (typeof timeout === \"number\") {\n    return {\n      appear: appear ? timeout : 0,\n      enter: enter ? timeout : 0,\n      exit: exit ? timeout : 0,\n    };\n  }\n\n  return {\n    appear: (appear && (timeout.appear ?? timeout.enter)) || 0,\n    enter: (enter && timeout.enter) || 0,\n    exit: (exit && timeout.exit) || 0,\n  };\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport interface CollapseSizing {\n  maxHeight?: number;\n  paddingTop?: number;\n  paddingBottom?: number;\n}\n\n/**\n * A small util that will find the max-height, padding-top, and padding-bottom\n * for the provided element. This is really used to be able to transition the\n * max-height value since `max-height: auto` does not transition. The only way\n * to get transition is to change max-height values manually.\n *\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function getElementSizing(element: HTMLElement | null): CollapseSizing {\n  let maxHeight;\n  let paddingTop;\n  let paddingBottom;\n  if (element) {\n    // clone the element so that the total height and padding can be calculated\n    // without being affected by the collapse transition inline styles\n    const cloned = element.cloneNode(true) as HTMLElement;\n    cloned.style.maxHeight = \"\";\n    cloned.style.padding = \"\";\n    cloned.style.paddingLeft = element.style.paddingLeft;\n    cloned.style.paddingRight = element.style.paddingRight;\n    cloned.style.visibility = \"hidden\";\n\n    const container = element.parentElement || document.body;\n    container.appendChild(cloned);\n    maxHeight = cloned.scrollHeight;\n    const style = window.getComputedStyle(cloned);\n    if (style.paddingTop) {\n      paddingTop = parseFloat(style.paddingTop);\n      maxHeight + paddingTop;\n    }\n\n    if (style.paddingBottom) {\n      paddingBottom = parseFloat(style.paddingBottom);\n      maxHeight + paddingBottom;\n    }\n    container.removeChild(cloned);\n  }\n\n  return { maxHeight, paddingTop, paddingBottom };\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport interface TransitionClassNamesOptions extends TransitionTimeoutOptions {\n  classNames: CSSTransitionClassNames;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function getTransitionClassNames(\n  options: TransitionClassNamesOptions\n): Readonly<Required<CSSTransitionClassNamesObject>> {\n  const { classNames, ...timeoutOptions } = options;\n  const timeout = getTransitionTimeout(timeoutOptions);\n\n  if (typeof classNames === \"string\") {\n    const { appear, enter, exit } = timeout;\n    return {\n      appear: appear ? `${classNames}--appear` : \"\",\n      appearActive: appear ? `${classNames}--appear-active` : \"\",\n      appearDone: \"\",\n      enter: enter ? `${classNames}--enter` : \"\",\n      enterActive: enter ? `${classNames}--enter-active` : \"\",\n      enterDone: \"\",\n      exit: exit ? `${classNames}--exit` : \"\",\n      exitActive: exit ? `${classNames}--exit-active` : \"\",\n      exitDone: \"\",\n    };\n  }\n\n  const {\n    enter = \"\",\n    enterActive = \"\",\n    enterDone = \"\",\n    exit = \"\",\n    exitActive = \"\",\n    exitDone = \"\",\n    appear = (timeout.appear && enter) || \"\",\n    appearActive = (timeout.appear && enterActive) || \"\",\n    appearDone = (timeout.appear && enterDone) || \"\",\n  } = classNames;\n\n  return {\n    appear,\n    appearActive,\n    appearDone,\n    enter,\n    enterActive,\n    enterDone,\n    exit,\n    exitActive,\n    exitDone,\n  };\n}\n"],"names":["getTransitionTimeout","options","timeout","appear","enter","exit","getElementSizing","element","maxHeight","paddingTop","paddingBottom","cloned","cloneNode","style","padding","paddingLeft","paddingRight","visibility","container","parentElement","document","body","appendChild","scrollHeight","window","getComputedStyle","parseFloat","removeChild","getTransitionClassNames","classNames","timeoutOptions","appearActive","appearDone","enterActive","enterDone","exitActive","exitDone"],"mappings":"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"}
+{"version":3,"sources":["../../src/transition/utils.ts"],"sourcesContent":["import type {\n  CSSTransitionClassNames,\n  CSSTransitionClassNamesObject,\n  TransitionActions,\n  TransitionTimeout,\n  TransitionTimeoutObject,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport interface TransitionTimeoutOptions extends Required<TransitionActions> {\n  timeout: TransitionTimeout;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function getTransitionTimeout(\n  options: Readonly<TransitionTimeoutOptions>\n): Readonly<Required<TransitionTimeoutObject>> {\n  const { timeout, appear, enter, exit } = options;\n  if (typeof timeout === \"number\") {\n    return {\n      appear: appear ? timeout : 0,\n      enter: enter ? timeout : 0,\n      exit: exit ? timeout : 0,\n    };\n  }\n\n  return {\n    appear: (appear && (timeout.appear ?? timeout.enter)) || 0,\n    enter: (enter && timeout.enter) || 0,\n    exit: (exit && timeout.exit) || 0,\n  };\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport interface CollapseSizing {\n  maxHeight?: number;\n  paddingTop?: number;\n  paddingBottom?: number;\n}\n\n/**\n * A small util that will find the max-height, padding-top, and padding-bottom\n * for the provided element. This is really used to be able to transition the\n * max-height value since `max-height: auto` does not transition. The only way\n * to get transition is to change max-height values manually.\n *\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function getElementSizing(element: HTMLElement | null): CollapseSizing {\n  let maxHeight: number | undefined;\n  let paddingTop: number | undefined;\n  let paddingBottom: number | undefined;\n  if (element) {\n    // clone the element so that the total height and padding can be calculated\n    // without being affected by the collapse transition inline styles\n    const cloned = element.cloneNode(true) as HTMLElement;\n    cloned.style.maxHeight = \"\";\n    cloned.style.padding = \"\";\n    cloned.style.paddingLeft = element.style.paddingLeft;\n    cloned.style.paddingRight = element.style.paddingRight;\n    cloned.style.visibility = \"hidden\";\n\n    const container = element.parentElement || document.body;\n    container.appendChild(cloned);\n    maxHeight = cloned.scrollHeight;\n    const style = window.getComputedStyle(cloned);\n    const isContentBox = style.boxSizing === \"content-box\";\n    if (style.paddingTop) {\n      paddingTop = parseFloat(style.paddingTop);\n      if (isContentBox) {\n        maxHeight += paddingTop;\n      }\n    }\n\n    if (style.paddingBottom) {\n      paddingBottom = parseFloat(style.paddingBottom);\n      if (isContentBox) {\n        maxHeight += paddingBottom;\n      }\n    }\n    container.removeChild(cloned);\n  }\n\n  return { maxHeight, paddingTop, paddingBottom };\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport interface TransitionClassNamesOptions extends TransitionTimeoutOptions {\n  classNames: CSSTransitionClassNames;\n}\n\n/**\n * @remarks \\@since 4.0.0\n * @internal\n */\nexport function getTransitionClassNames(\n  options: TransitionClassNamesOptions\n): Readonly<Required<CSSTransitionClassNamesObject>> {\n  const { classNames, ...timeoutOptions } = options;\n  const timeout = getTransitionTimeout(timeoutOptions);\n\n  if (typeof classNames === \"string\") {\n    const { appear, enter, exit } = timeout;\n    return {\n      appear: appear ? `${classNames}--appear` : \"\",\n      appearActive: appear ? `${classNames}--appear-active` : \"\",\n      appearDone: \"\",\n      enter: enter ? `${classNames}--enter` : \"\",\n      enterActive: enter ? `${classNames}--enter-active` : \"\",\n      enterDone: \"\",\n      exit: exit ? `${classNames}--exit` : \"\",\n      exitActive: exit ? `${classNames}--exit-active` : \"\",\n      exitDone: \"\",\n    };\n  }\n\n  const {\n    enter = \"\",\n    enterActive = \"\",\n    enterDone = \"\",\n    exit = \"\",\n    exitActive = \"\",\n    exitDone = \"\",\n    appear = (timeout.appear && enter) || \"\",\n    appearActive = (timeout.appear && enterActive) || \"\",\n    appearDone = (timeout.appear && enterDone) || \"\",\n  } = classNames;\n\n  return {\n    appear,\n    appearActive,\n    appearDone,\n    enter,\n    enterActive,\n    enterDone,\n    exit,\n    exitActive,\n    exitDone,\n  };\n}\n"],"names":["getTransitionTimeout","options","timeout","appear","enter","exit","getElementSizing","element","maxHeight","paddingTop","paddingBottom","cloned","cloneNode","style","padding","paddingLeft","paddingRight","visibility","container","parentElement","document","body","appendChild","scrollHeight","window","getComputedStyle","isContentBox","boxSizing","parseFloat","removeChild","getTransitionClassNames","classNames","timeoutOptions","appearActive","appearDone","enterActive","enterDone","exitActive","exitDone"],"mappings":"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"}

package/dist/useEnsuredState.d.ts

@@ -4,7 +4,7 @@ import type { UseStateInitializer, UseStateSetter } from "./types.js";
  * @internal
  * @remarks \@since 6.0.0
  */
-export interface EnsuredStateOptions<V, Setter extends Dispatch<V> | UseStateSetter<V>> {
+export interface EnsuredStateOptions<V, Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>> {
     value?: V;
     setValue?: Setter;
     defaultValue?: UseStateInitializer<V>;

package/dist/useEnsuredState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n> {\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { value, setValue, defaultValue } = options;\n  if (typeof value !== \"undefined\" && typeof setValue !== \"undefined\") {\n    return [value, setValue];\n  }\n\n  if (typeof value !== \"undefined\" || typeof setValue !== \"undefined\") {\n    throw new Error(\n      \"Both a `value` and `setValue` must be defined for controlled components.\"\n    );\n  }\n\n  if (typeof defaultValue === \"undefined\") {\n    throw new Error(\n      \"A `defaultValue` must be defined for uncontrolled components.\"\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","value","setValue","defaultValue","Error"],"mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAgBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAC1C,IAAI,OAAOC,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,OAAO;YAACD;YAAOC;SAAS;IAC1B;IAEA,IAAI,OAAOD,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,MAAM,IAAIE,MACR;IAEJ;IAEA,IAAI,OAAOD,iBAAiB,aAAa;QACvC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAON,SAASK;AAClB"}
+{"version":3,"sources":["../src/useEnsuredState.ts"],"sourcesContent":["/* eslint-disable react-hooks/rules-of-hooks */\nimport type { Dispatch } from \"react\";\nimport { useState } from \"react\";\nimport type { UseStateInitializer, UseStateSetter } from \"./types.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface EnsuredStateOptions<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V> = UseStateSetter<V>,\n> {\n  value?: V;\n  setValue?: Setter;\n  defaultValue?: UseStateInitializer<V>;\n}\n\n/**\n * This is used to dynamically allow controlling hooks by providing a `value` +\n * `setValue` or defaulting to uncontrolled behavior with local state.\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport function useEnsuredState<\n  V,\n  Setter extends Dispatch<V> | UseStateSetter<V>,\n>(\n  options: EnsuredStateOptions<V, Setter>\n): readonly [value: V, setValue: Setter] {\n  const { value, setValue, defaultValue } = options;\n  if (typeof value !== \"undefined\" && typeof setValue !== \"undefined\") {\n    return [value, setValue];\n  }\n\n  if (typeof value !== \"undefined\" || typeof setValue !== \"undefined\") {\n    throw new Error(\n      \"Both a `value` and `setValue` must be defined for controlled components.\"\n    );\n  }\n\n  if (typeof defaultValue === \"undefined\") {\n    throw new Error(\n      \"A `defaultValue` must be defined for uncontrolled components.\"\n    );\n  }\n\n  return useState(defaultValue) as [value: V, setValue: Setter];\n}\n"],"names":["useState","useEnsuredState","options","value","setValue","defaultValue","Error"],"mappings":"AAAA,6CAA6C,GAE7C,SAASA,QAAQ,QAAQ,QAAQ;AAgBjC;;;;;;CAMC,GACD,OAAO,SAASC,gBAIdC,OAAuC;IAEvC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGH;IAC1C,IAAI,OAAOC,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,OAAO;YAACD;YAAOC;SAAS;IAC1B;IAEA,IAAI,OAAOD,UAAU,eAAe,OAAOC,aAAa,aAAa;QACnE,MAAM,IAAIE,MACR;IAEJ;IAEA,IAAI,OAAOD,iBAAiB,aAAa;QACvC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAON,SAASK;AAClB"}

package/dist/utils/alphaNumericSort.d.ts

@@ -1,4 +1,4 @@
-import type { TextExtractor } from "../types.js";
+import { type TextExtractor } from "../types.js";
 /**
  * The default `Intl.Collator` that should be used for sorting large lists.
  *

package/dist/utils/alphaNumericSort.js

@@ -1,12 +1,4 @@
-const identity = (item)=>{
-    if (typeof item === "string") {
-        return item;
-    }
-    if (process.env.NODE_ENV !== "production") {
-        throw new Error("A `TextExtractor` must be provided to `alphaNumericSort` for lists that do not contain strings");
-    }
-    return "";
-};
+import { defaultExtractor } from "../searching/utils.js";
 /**
  * The default `Intl.Collator` that should be used for sorting large lists.
  *
@@ -17,7 +9,7 @@ const identity = (item)=>{
     caseFirst: "upper"
 });
 export function alphaNumericSort(list, options = {}) {
-    const { compare = DEFAULT_COLLATOR.compare, extractor = identity, descending = false } = options;
+    const { compare = DEFAULT_COLLATOR.compare, extractor = defaultExtractor("alphaNumericSort"), descending = false } = options;
     const sorted = list.slice();
     sorted.sort((a, b)=>{
         const aValue = extractor(a);

package/dist/utils/alphaNumericSort.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/alphaNumericSort.ts"],"sourcesContent":["import type { TextExtractor } from \"../types.js\";\n\nconst identity = <T>(item: T): string => {\n  if (typeof item === \"string\") {\n    return item;\n  }\n\n  if (process.env.NODE_ENV !== \"production\") {\n    throw new Error(\n      \"A `TextExtractor` must be provided to `alphaNumericSort` for lists that do not contain strings\"\n    );\n  }\n\n  return \"\";\n};\n\n/**\n * The default `Intl.Collator` that should be used for sorting large lists.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#performance\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_COLLATOR = new Intl.Collator(\"en-US\", {\n  numeric: true,\n  caseFirst: \"upper\",\n});\n\n/** @remarks \\@since 6.0.0 */\nexport interface AlphaNumericSortOptions<T> {\n  /**\n   * The extractor is only required when the list of items are not strings.\n   *\n   * @example\n   * Simple Example\n   * ```ts\n   * interface Item {\n   *   name: string;\n   * }\n   *\n   * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n   *\n   * `alphaNumericSort(items, {\n   *   extractor: item => item.name,\n   * })`\n   * ```\n   *\n   * @remarks\n   * For javascript developers, this will throw an error in dev mode if an\n   * extractor is not provided for non-string lists.\n   *\n   * @defaultValue `typeof item === \"string\" ? item : \"\"`\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * A custom compare function for sorting the list. This should really only be\n   * provided if the language for your app is not `\"en-US\"` or you'd like to\n   * provide some custom sorting options.\n   *\n   * @example\n   * Custom Compare using Intl.Collator\n   * ```ts\n   * const collator = new Intl.Collator(\"en-US\", {\n   *   numeric: false,\n   *   caseFirst: \"lower\",\n   *   usage: \"search\",\n   * });\n   *\n   * alphaNumericSort(items, {\n   *   compare: collator.compare,\n   * })\n   * ```\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator\n   * @defaultValue `new Intl.Collator(\"en-US\", { numeric: true, caseFirst: \"upper\" }).compare`\n   */\n  compare?(a: string, b: string): number;\n\n  /**\n   * Setting this to `true` will return the list in descending order instead of\n   * ascending.\n   *\n   * @defaultValue `false`\n   */\n  descending?: boolean;\n}\n\n/**\n * @example\n * Simple Example\n * ```ts\n * const items = [\"World\", \"Hello\"];\n *\n * const sorted = alphaNumericSort(items);\n * // sorted == [\"Hello\", \"World\"]\n * ```\n *\n * @param list - The list of strings to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T extends string>(\n  list: readonly T[],\n  options?: Omit<AlphaNumericSortOptions<T>, \"extractor\">\n): readonly T[];\n/**\n * @example\n * Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: \"World\" }, { name: \"Hello\" }];\n *\n * const sorted = alphaNumericSort(items, {\n *   extractor: item => item.name,\n * });\n * // sorted == [{ name: \"Hello\" }, { name: \"World\" }]\n * ```\n *\n * @param list - The list of items to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> & { extractor: TextExtractor<T> }\n): readonly T[];\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> = {}\n): readonly T[] {\n  const {\n    compare = DEFAULT_COLLATOR.compare,\n    extractor = identity,\n    descending = false,\n  } = options;\n\n  const sorted = list.slice();\n  sorted.sort((a, b) => {\n    const aValue = extractor(a);\n    const bValue = extractor(b);\n\n    const value1 = descending ? bValue : aValue;\n    const value2 = descending ? aValue : bValue;\n\n    return compare(value1, value2);\n  });\n\n  return sorted;\n}\n"],"names":["identity","item","process","env","NODE_ENV","Error","DEFAULT_COLLATOR","Intl","Collator","numeric","caseFirst","alphaNumericSort","list","options","compare","extractor","descending","sorted","slice","sort","a","b","aValue","bValue","value1","value2"],"mappings":"AAEA,MAAMA,WAAW,CAAIC;IACnB,IAAI,OAAOA,SAAS,UAAU;QAC5B,OAAOA;IACT;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAM,IAAIC,MACR;IAEJ;IAEA,OAAO;AACT;AAEA;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,IAAIC,KAAKC,QAAQ,CAAC,SAAS;IACzDC,SAAS;IACTC,WAAW;AACb,GAAG;AAsGH,OAAO,SAASC,iBACdC,IAAkB,EAClBC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,UAAUR,iBAAiBQ,OAAO,EAClCC,YAAYf,QAAQ,EACpBgB,aAAa,KAAK,EACnB,GAAGH;IAEJ,MAAMI,SAASL,KAAKM,KAAK;IACzBD,OAAOE,IAAI,CAAC,CAACC,GAAGC;QACd,MAAMC,SAASP,UAAUK;QACzB,MAAMG,SAASR,UAAUM;QAEzB,MAAMG,SAASR,aAAaO,SAASD;QACrC,MAAMG,SAAST,aAAaM,SAASC;QAErC,OAAOT,QAAQU,QAAQC;IACzB;IAEA,OAAOR;AACT"}
+{"version":3,"sources":["../../src/utils/alphaNumericSort.ts"],"sourcesContent":["import { defaultExtractor } from \"../searching/utils.js\";\nimport { type TextExtractor } from \"../types.js\";\n\n/**\n * The default `Intl.Collator` that should be used for sorting large lists.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#performance\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_COLLATOR = new Intl.Collator(\"en-US\", {\n  numeric: true,\n  caseFirst: \"upper\",\n});\n\n/** @remarks \\@since 6.0.0 */\nexport interface AlphaNumericSortOptions<T> {\n  /**\n   * The extractor is only required when the list of items are not strings.\n   *\n   * @example\n   * Simple Example\n   * ```ts\n   * interface Item {\n   *   name: string;\n   * }\n   *\n   * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n   *\n   * `alphaNumericSort(items, {\n   *   extractor: item => item.name,\n   * })`\n   * ```\n   *\n   * @remarks\n   * For javascript developers, this will throw an error in dev mode if an\n   * extractor is not provided for non-string lists.\n   *\n   * @defaultValue `typeof item === \"string\" ? item : \"\"`\n   */\n  extractor?: TextExtractor<T>;\n\n  /**\n   * A custom compare function for sorting the list. This should really only be\n   * provided if the language for your app is not `\"en-US\"` or you'd like to\n   * provide some custom sorting options.\n   *\n   * @example\n   * Custom Compare using Intl.Collator\n   * ```ts\n   * const collator = new Intl.Collator(\"en-US\", {\n   *   numeric: false,\n   *   caseFirst: \"lower\",\n   *   usage: \"search\",\n   * });\n   *\n   * alphaNumericSort(items, {\n   *   compare: collator.compare,\n   * })\n   * ```\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator\n   * @defaultValue `new Intl.Collator(\"en-US\", { numeric: true, caseFirst: \"upper\" }).compare`\n   */\n  compare?(a: string, b: string): number;\n\n  /**\n   * Setting this to `true` will return the list in descending order instead of\n   * ascending.\n   *\n   * @defaultValue `false`\n   */\n  descending?: boolean;\n}\n\n/**\n * @example\n * Simple Example\n * ```ts\n * const items = [\"World\", \"Hello\"];\n *\n * const sorted = alphaNumericSort(items);\n * // sorted == [\"Hello\", \"World\"]\n * ```\n *\n * @param list - The list of strings to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T extends string>(\n  list: readonly T[],\n  options?: Omit<AlphaNumericSortOptions<T>, \"extractor\">\n): readonly T[];\n/**\n * @example\n * Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: \"World\" }, { name: \"Hello\" }];\n *\n * const sorted = alphaNumericSort(items, {\n *   extractor: item => item.name,\n * });\n * // sorted == [{ name: \"Hello\" }, { name: \"World\" }]\n * ```\n *\n * @param list - The list of items to sort\n * @returns a new sorted list\n */\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> & { extractor: TextExtractor<T> }\n): readonly T[];\nexport function alphaNumericSort<T>(\n  list: readonly T[],\n  options: AlphaNumericSortOptions<T> = {}\n): readonly T[] {\n  const {\n    compare = DEFAULT_COLLATOR.compare,\n    extractor = defaultExtractor(\"alphaNumericSort\"),\n    descending = false,\n  } = options;\n\n  const sorted = list.slice();\n  sorted.sort((a, b) => {\n    const aValue = extractor(a);\n    const bValue = extractor(b);\n\n    const value1 = descending ? bValue : aValue;\n    const value2 = descending ? aValue : bValue;\n\n    return compare(value1, value2);\n  });\n\n  return sorted;\n}\n"],"names":["defaultExtractor","DEFAULT_COLLATOR","Intl","Collator","numeric","caseFirst","alphaNumericSort","list","options","compare","extractor","descending","sorted","slice","sort","a","b","aValue","bValue","value1","value2"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,wBAAwB;AAGzD;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,IAAIC,KAAKC,QAAQ,CAAC,SAAS;IACzDC,SAAS;IACTC,WAAW;AACb,GAAG;AAsGH,OAAO,SAASC,iBACdC,IAAkB,EAClBC,UAAsC,CAAC,CAAC;IAExC,MAAM,EACJC,UAAUR,iBAAiBQ,OAAO,EAClCC,YAAYV,iBAAiB,mBAAmB,EAChDW,aAAa,KAAK,EACnB,GAAGH;IAEJ,MAAMI,SAASL,KAAKM,KAAK;IACzBD,OAAOE,IAAI,CAAC,CAACC,GAAGC;QACd,MAAMC,SAASP,UAAUK;QACzB,MAAMG,SAASR,UAAUM;QAEzB,MAAMG,SAASR,aAAaO,SAASD;QACrC,MAAMG,SAAST,aAAaM,SAASC;QAErC,OAAOT,QAAQU,QAAQC;IACzB;IAEA,OAAOR;AACT"}

package/jest.config.ts

@@ -56,6 +56,10 @@ const config: Config = {
     // able to remove this one I start testing the documentation site
     "!<rootDir>/src/**/index.ts",
     "!<rootDir>/src/**/types.ts",
+    // it's hard to verify these since they probably only occur when trying to
+    // use react-dom/server in jsdom?
+    "!<rootDir>/src/test-utils/polyfills/TextEncoder.ts",
+    "!<rootDir>/src/test-utils/polyfills/TextDecoder.ts",
   ],
 
   extensionsToTreatAsEsm: [".ts", ".tsx"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.8",
+  "version": "1.0.0-next.9",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -55,23 +55,23 @@
   "license": "MIT",
   "dependencies": {
     "cnbuilder": "^3.1.0",
-    "nanoid": "^5.0.4"
+    "nanoid": "^5.0.6"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@swc/cli": "^0.3.2",
-    "@swc/core": "1.3.106",
-    "@swc/jest": "^0.2.31",
+    "@swc/cli": "^0.3.10",
+    "@swc/core": "1.4.2",
+    "@swc/jest": "^0.2.36",
     "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.7",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "chokidar": "^3.5.3",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.62",
+    "@types/react-dom": "^18.2.19",
+    "chokidar": "^3.6.0",
     "filesize": "^10.1.0",
     "glob": "10.3.10",
     "jest": "^29.7.0",
@@ -80,12 +80,13 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-scss": "^4.0.9",
-    "stylelint": "^16.2.0",
+    "stylelint": "^16.2.1",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.2.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },

package/src/RootHtml.tsx

@@ -0,0 +1,95 @@
+import {
+  type HTMLAttributes,
+  type HtmlHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { type PropsWithRef } from "./types.js";
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
+  /** @defaultValue `"ltr"` */
+  dir?: string;
+
+  /** @defaultValue `"en"` */
+  lang?: string;
+
+  /**
+   * Any additional props to provide to the `<body>` element and also supports a
+   * `ref` if that is required for some reason. Using a `ref` would make your
+   * root layout a client component though.
+   */
+  bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
+
+  /**
+   * Convenience prop to replace `bodyProps={{ className: "custom-class-name" }}`.
+   */
+  bodyClassName?: string;
+
+  /**
+   * Any content to render before the `<body>` tag. This can be useful if you
+   * need to render a custom `<head>` element.
+   */
+  beforeBodyChildren?: ReactNode;
+
+  /**
+   * Any content to render after the `<body>` tag. This can be useful to insert
+   * `<script>` tags for analytics or other external libraries.
+   */
+  afterBodyChildren?: ReactNode;
+}
+
+/**
+ * **Server Component**
+ *
+ * This is mostly for creating the root html for next.js applications that
+ * defaults to setting the `dir="ltr"` and `lang="en"`. Additional props can be
+ * passed to the root `<html>` and `<body>` elements and children can be
+ * rendered before and after the `<body>` if needed.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * // src/app/layout.tsx
+ * import { RootHtml } from "@react-md/core";
+ * import { type ReactElement, type PropsWithChildren } from "react";
+ * import { Roboto_Flex } from "next/font/google";
+ *
+ * const roboto = Roboto_Flex({
+ *   subsets: ["latin"],
+ *   variable: "--roboto",
+ * });
+ *
+ * export default function RootLayout(props: PropsWithChildren): ReactElement {
+ *   const { children } = props;
+ *
+ *   return <RootHtml className={roboto.variable}>{children}</RootHtml>;
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export function RootHtml(props: RootHtmlProps): ReactElement {
+  const {
+    dir = "ltr",
+    lang = "en",
+    children,
+    bodyProps,
+    bodyClassName,
+    beforeBodyChildren,
+    afterBodyChildren,
+    ...remaining
+  } = props;
+
+  return (
+    <html dir={dir} lang={lang} {...remaining}>
+      {beforeBodyChildren}
+      <body {...bodyProps} className={bodyClassName || bodyProps?.className}>
+        {children}
+      </body>
+      {afterBodyChildren}
+    </html>
+  );
+}

package/src/__tests__/RootHtml.node.tsx

@@ -0,0 +1,46 @@
+/** @jest-environment node */
+/* eslint-disable testing-library/render-result-naming-convention */
+
+import { describe, expect, it } from "@jest/globals";
+import { renderToString } from "react-dom/server";
+import { RootHtml } from "../RootHtml.js";
+
+describe("RootHtml", () => {
+  it("should render the html and body elements with the default props", () => {
+    expect(renderToString(<RootHtml />)).toMatchSnapshot();
+  });
+
+  it("should allow a custom bodyClassName", () => {
+    expect(<RootHtml bodyClassName="body-class-name" />).toMatchSnapshot();
+  });
+
+  it("should allow the body className to be set through bodyProps when the bodyClassName prop is not provided", () => {
+    const html1 = renderToString(
+      <RootHtml bodyProps={{ className: "custom-body-class" }} />
+    );
+    const html2 = renderToString(
+      <RootHtml
+        bodyProps={{ className: "custom-body-name" }}
+        bodyClassName="body-class"
+      />
+    );
+
+    expect(html1).toContain("custom-body-class");
+    expect(html1).toMatchSnapshot();
+
+    expect(html2).not.toContain("custom-body-class");
+    expect(html2).toMatchSnapshot();
+  });
+
+  it("should allow the lang to be overwritten", () => {
+    expect(renderToString(<RootHtml lang="da" />)).toMatchSnapshot();
+  });
+
+  it("should allow the dir to be overwritten", () => {
+    expect(renderToString(<RootHtml dir="rtl" />)).toMatchSnapshot();
+  });
+
+  it("should allow the dir and lang to be overwritten", () => {
+    expect(renderToString(<RootHtml lang="ar" dir="rtl" />)).toMatchSnapshot();
+  });
+});