@react-md/core 1.0.0-next.13 → 1.0.0-next.15

package/src/table/useTableSectionConfig.ts

@@ -0,0 +1,45 @@
+"use client";
+import { useMemo } from "react";
+import { useTableConfig } from "./TableConfigurationProvider.js";
+import {
+  type TableConfigContext,
+  type TableSectionConfiguration,
+} from "./types.js";
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface TableSectionConfigOptions extends TableSectionConfiguration {
+  type: "header" | "footer";
+}
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export function useTableSectionConfig(
+  options: TableSectionConfigOptions
+): Readonly<TableConfigContext> {
+  const { type, lineWrap: propLineWrap, hoverable } = options;
+
+  // update the table configuration with the custom overrides for the `<thead>/<tfoot>`
+  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =
+    useTableConfig({
+      lineWrap: propLineWrap,
+      disableHover: !hoverable,
+    });
+
+  return useMemo<TableConfigContext>(
+    () => ({
+      dense,
+      header: type === "header",
+      hAlign,
+      vAlign,
+      lineWrap,
+      disableBorders,
+      disableHover,
+    }),
+    [dense, type, hAlign, vAlign, lineWrap, disableBorders, disableHover]
+  );
+}

package/src/theme/_theme.scss

@@ -1,8 +1,8 @@
 @use "sass:color";
 @use "sass:list";
 @use "sass:map";
-@use "sass:string";
 @use "sass:meta";
+@use "sass:string";
 @use "colors";
 @use "a11y";
 
@@ -410,7 +410,8 @@ $theme-variables: (
   @if not $disable-dark-elevation {
     @if $color-scheme == dark {
       @include use-dark-theme-elevation-colors;
-    } @else if $color-scheme == light {
+    } @else {
+      // default to light theme for system themes as well
       @include use-light-theme-elevation-colors;
     }
   }
@@ -456,7 +457,7 @@ $theme-variables: (
         "not use material design colors, set #{$fallback} instead to get a correct color for the provided swatch: " +
         "#{$swatch}.";
       @error $error-msg;
-    } @else if type-of($fallback-color) != "color" {
+    } @else if meta.type-of($fallback-color) != "color" {
       @error "Invalid fallback color: '#{$fallback-color}'. This must be a valid color.";
     } @else {
       @return $fallback-color;
@@ -482,7 +483,7 @@ $theme-variables: (
   } @else {
     $index: 1;
     $found: false;
-    @while not $found and $index < length(colors.$available-color-names) {
+    @while not $found and $index < list.length(colors.$available-color-names) {
       $suffix: list.nth(colors.$available-color-names, $index);
       $suffix-index: string.index($current-color-name, $suffix);
       @if $suffix-index {
@@ -500,7 +501,7 @@ $theme-variables: (
 
   $color-name: "#{$current-color-name}#{if($accent, "-a", "")}-#{$swatch}";
 
-  @return map-get(colors.$color-map, $color-name);
+  @return map.get(colors.$color-map, $color-name);
 }
 
 @mixin default-system-theme {

package/src/tooltip/Tooltip.tsx

@@ -4,8 +4,11 @@ import { type TextOverflow } from "../cssUtils.js";
 import { Portal } from "../portal/Portal.js";
 import { type SimplePosition } from "../positioning/types.js";
 import {
+  type CSSTransitionClassNames,
   type CSSTransitionComponentProps,
+  type SSRTransitionOptions,
   type TransitionActions,
+  type TransitionTimeout,
 } from "../transition/types.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
 import { useEnsuredId } from "../useEnsuredId.js";
@@ -21,22 +24,28 @@ import { tooltip } from "./tooltipStyles.js";
  * creating custom tooltip implementations.
  *
  * @since 2.8.0 Supports the `RenderConditionalPortalProps`
- * @since 6.0.0 No longer supports the `RenderConditionalPortalProps`.
+ * @since 6.0.0 The `id` prop is optional.
+ * @since 6.0.0 Removed `lineWrap` for `textOverflow`
+ * @since 6.0.0 No longer supports the `RenderConditionalPortalProps` other than
+ * `portal` with the `disablePortal` prop.
  */
 export interface TooltipProps
   extends HTMLAttributes<HTMLSpanElement>,
     CSSTransitionComponentProps,
+    SSRTransitionOptions,
     TransitionActions {
   visible: boolean;
 
   /**
+   * Set this to `true` to use a smaller font size and padding on the tooltip
+   * and a smaller gap between the tooltip and tooltipped element.
+   *
    * @defaultValue `false`
    */
   dense?: boolean;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_POSITION`
-   * @see {@link DEFAULT_TOOLTIP_POSITION}
+   * @defaultValue `"below"`
    */
   position?: SimplePosition;
 
@@ -46,11 +55,6 @@ export interface TooltipProps
    */
   temporary?: boolean;
 
-  /**
-   * @defaultValue `false`
-   */
-  disablePortal?: boolean;
-
   /**
    * Set this to `"nowrap"` for tooltips that are positioned near the edge of
    * the viewport that have a position of `"above"` or `"below"` so that the
@@ -62,6 +66,18 @@ export interface TooltipProps
    * @defaultValue `"allow"`
    */
   textOverflow?: TextOverflow;
+
+  /**
+   * @see {@link CSSTransitionComponentProps.timeout}
+   * @defaultValue `DEFAULT_TOOLTIP_TIMEOUT`
+   */
+  timeout?: TransitionTimeout;
+
+  /**
+   * @see {@link CSSTransitionComponentProps.classNames}
+   * @defaultValue `DEFAULT_TOOLTIP_CLASSNAMES`
+   */
+  classNames?: CSSTransitionClassNames;
 }
 
 /**

package/src/tooltip/useTooltip.ts

@@ -1,25 +1,34 @@
 "use client";
 import { cnb } from "cnbuilder";
-import type {
-  CSSProperties,
-  FocusEvent,
-  MouseEvent,
-  MutableRefObject,
-  Ref,
-  RefObject,
-  TouchEvent,
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  type CSSProperties,
+  type FocusEvent,
+  type MouseEvent,
+  type MutableRefObject,
+  type Ref,
+  type RefObject,
+  type TouchEvent,
 } from "react";
-import { useCallback, useEffect, useId, useRef } from "react";
 import {
   useHoverMode,
   type ControlledHoverModeImplementation,
 } from "../hoverMode/useHoverMode.js";
-import type { UserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
-import { useUserInteractionMode } from "../interaction/UserInteractionModeProvider.js";
-import type { SimplePosition } from "../positioning/types.js";
-import type { FixedPositioningTransitionCallbacks } from "../positioning/useFixedPositioning.js";
-import { useFixedPositioning } from "../positioning/useFixedPositioning.js";
-import type { UseStateSetter } from "../types.js";
+import {
+  useUserInteractionMode,
+  type UserInteractionMode,
+} from "../interaction/UserInteractionModeProvider.js";
+import { type SimplePosition } from "../positioning/types.js";
+import {
+  useFixedPositioning,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type FixedPositioningOptions,
+  type FixedPositioningTransitionCallbacks,
+} from "../positioning/useFixedPositioning.js";
+import { type UseStateSetter } from "../types.js";
 import { usePageInactive } from "../usePageInactive.js";
 import { parseCssLengthUnit } from "../utils/parseCssLengthUnit.js";
 import { useTooltipHoverMode } from "./TooltipHoverModeProvider.js";
@@ -31,8 +40,10 @@ import {
   DEFAULT_TOOLTIP_THRESHOLD,
   TOOLTIP_SPACING_VAR,
 } from "./constants.js";
-import type { TooltipPositionHookOptions } from "./useTooltipPosition.js";
-import { useTooltipPosition } from "./useTooltipPosition.js";
+import {
+  useTooltipPosition,
+  type TooltipPositionHookOptions,
+} from "./useTooltipPosition.js";
 import { getAnchor } from "./utils.js";
 
 declare module "react" {
@@ -52,35 +63,46 @@ export interface TooltipPositioningOptions {
   style?: CSSProperties;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_MARGIN`
-   * @see {@link DEFAULT_TOOLTIP_MARGIN}
+   * @see {@link FixedPositioningOptions.vwMargin}
+   * @defaultValue `16`
    */
   vwMargin?: number;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_MARGIN`
-   * @see {@link DEFAULT_TOOLTIP_MARGIN}
+   * @see {@link FixedPositioningOptions.vhMargin}
+   * @defaultValue `16`
    */
   vhMargin?: number;
 
   /**
+   * Set this to `true` to reduce the font size and padding on the tooltip and
+   * the amount of spacing between the tooltipped element and the tooltip.
+   *
    * @defaultValue `false`
    */
   dense?: boolean;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_SPACING`
-   * @see {@link DEFAULT_TOOLTIP_SPACING}
+   * The amount of spacing to use between the tooltipped element and the tooltip
+   * when {@link disableAutoSpacing} is `false`.
+   *
+   * @defaultValue `"1.5rem`
    */
   spacing?: number | string;
 
   /**
-   * @defaultValue `DEFAULT_TOOLTIP_DENSE_SPACING`
-   * @see {@link DEFAULT_TOOLTIP_DENSE_SPACING}
+   * The amount of spacing to use between the tooltipped element and the tooltip
+   * when {@link disableAutoSpacing} is `false` and {@link dense} is `true`.
+   *
+   * @defaultValue `"0.875rem`
    */
   denseSpacing?: number | string;
 
   /**
+   * Set this to `true` to prevent the {@link defaultPosition} to swap to the
+   * other side of the tooltipped element when it is too close to the viewport
+   * edge. This will always be `true` if a {@link position} is provided.
+   *
    * @defaultValue `false`
    */
   disableSwapping?: boolean;
@@ -109,7 +131,10 @@ export interface TooltippedElementEventHandlers<
   onContextMenu?(event: MouseEvent<E>): void;
 }
 
-/** @since 2.8.0 */
+/**
+ * @since 2.8.0
+ * @since 6.0.0 Renamed from `TooltipHookProvidedElementProps`
+ */
 export interface ProvidedTooltippedElementProps<E extends HTMLElement>
   extends Required<TooltippedElementEventHandlers<E>> {
   "aria-describedby": string | undefined;
@@ -206,7 +231,7 @@ export interface TooltipOptions<
    * The default value is really the current hover timeout from the
    * `TooltipHoverModeProvider`.
    *
-   * @defaultValue `DEFAULT_TOOLTIP_DELAY`
+   * @defaultValue `1000`
    */
   hoverTimeout?: number;
 

package/src/tooltip/useTooltipPosition.ts

@@ -30,8 +30,7 @@ export interface TooltipPositionHookOptions {
    * Vertical - `"below"` or `"above"`
    * Horizontal - `"left"` or `"right"`
    *
-   * @defaultValue `DEFAULT_TOOLTIP_POSITION`
-   * @see {@link DEFAULT_TOOLTIP_POSITION}
+   * @defaultValue `"below"`
    */
   defaultPosition?: SimplePosition;
 
@@ -42,8 +41,7 @@ export interface TooltipPositionHookOptions {
    *
    * You _probably_ won't ever really need to update this value.
    *
-   * @defaultValue `DEFAULT_TOOLTIP_THRESHOLD`
-   * @see {@link DEFAULT_TOOLTIP_THRESHOLD}
+   * @defaultValue `0.75`
    */
   threshold?: number;
 }

package/src/transition/CrossFade.tsx

@@ -94,20 +94,13 @@ export interface CrossFadeProps<E extends HTMLElement>
 export function CrossFade<E extends HTMLElement>(
   props: CrossFadeProps<E>
 ): ReactElement {
-  const {
-    appear = true,
-    transitionIn = appear,
-    children,
-    className,
-    ...options
-  } = props;
+  const { appear = true, children, className, ...options } = props;
 
   const child = Children.only(children);
   const { elementProps, rendered } = useCrossFadeTransition({
     ...options,
     appear,
     className: cnb(child.props.className, className),
-    transitionIn,
   });
 
   return <>{rendered && cloneElement(children, elementProps)}</>;

package/src/transition/types.ts

@@ -370,13 +370,31 @@ export interface PreconfiguredCSSTransitionOptions<E extends HTMLElement>
   transitionIn: boolean;
 }
 
+/**
+ * @since 6.0.0
+ */
+export interface SSRTransitionOptions {
+  /**
+   * This is mostly used internally to make it so that you can render portalled
+   * elements inline with content if SSR is enabled in your app. To enable this
+   * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.
+   *
+   * This value will be `true` if a portalled element was rendered by default
+   * from the server and remain true until it unmounts from the DOM.
+   *
+   * @defaultValue `false`
+   */
+  disablePortal?: boolean;
+}
+
 /**
  * @typeParam E - An HTMLElement type used for the ref required for the
  * transition.
  * @since 4.0.0
  */
 export interface TransitionHookOptions<E extends HTMLElement>
-  extends TransitionOptions<E> {
+  extends TransitionOptions<E>,
+    SSRTransitionOptions {
   /**
    * Boolean if the DOM should forcefully be reflow each time a transition
    * change occurs. This is generally required for any CSS transition and is
@@ -385,12 +403,6 @@ export interface TransitionHookOptions<E extends HTMLElement>
    * @defaultValue `false`
    */
   reflow?: boolean;
-
-  /**
-   * @since 6.0.0
-   * @defaultValue `false`
-   */
-  disablePortal?: boolean;
 }
 
 /**
@@ -422,7 +434,8 @@ export interface TransitionState {
  * @since 4.0.0
  */
 export interface TransitionHookReturnValue<E extends HTMLElement>
-  extends TransitionState {
+  extends TransitionState,
+    Required<SSRTransitionOptions> {
   /**
    * A ref that is required for the transition to occur and should be passed to
    * the element affected by the transition.
@@ -466,19 +479,6 @@ export interface TransitionHookReturnValue<E extends HTMLElement>
    * @param stage - The {@link TransitionStage} to set to
    */
   transitionTo(stage: TransitionStage): void;
-
-  /**
-   * This is mostly used internally to make it so that you can render portalled
-   * elements inline with content if SSR is enabled in your app. To enable this
-   * feature, the {@link CoreProvidersProps.ssr} must be set to `true`.
-   *
-   * This value will be `true` if a portalled element was rendered by default
-   * from the server and remain true until it unmounts from the DOM.
-   *
-   * @defaultValue `false`
-   * @since 6.0.0
-   */
-  disablePortal: boolean;
 }
 
 /**
@@ -487,16 +487,12 @@ export interface TransitionHookReturnValue<E extends HTMLElement>
  * @since 4.0.0
  */
 export interface CSSTransitionHookOptions<E extends HTMLElement>
-  extends PreconfiguredCSSTransitionOptions<E> {
+  extends PreconfiguredCSSTransitionOptions<E>,
+    SSRTransitionOptions {
   /** {@inheritDoc TransitionTimeout} */
   timeout: TransitionTimeout;
   /** {@inheritDoc CSSTransitionClassNames} */
   classNames: CSSTransitionClassNames;
-
-  /**
-   * @since 6.0.0
-   */
-  disablePortal?: boolean;
 }
 
 /**

package/src/transition/useCrossFadeTransition.ts

@@ -112,6 +112,7 @@ export function useCrossFadeTransition<E extends HTMLElement>(
   options: CrossFadeTransitionHookOptions<E> = {}
 ): CSSTransitionHookReturnValue<E> {
   const {
+    appear = false,
     transitionIn = true,
     timeout = CROSS_FADE_TIMEOUT,
     classNames = CROSS_FADE_CLASSNAMES,
@@ -120,6 +121,7 @@ export function useCrossFadeTransition<E extends HTMLElement>(
 
   return useCSSTransition({
     ...cssOptions,
+    appear,
     timeout,
     classNames,
     transitionIn,

package/src/transition/useScaleTransition.ts

@@ -134,6 +134,7 @@ export function useScaleTransition<E extends HTMLElement>(
     timeout = SCALE_TIMEOUT,
     vertical = false,
     temporary = true,
+    exitedHidden = true,
     classNames = vertical ? SCALE_Y_CLASSNAMES : SCALE_CLASSNAMES,
     ...transitionOptions
   } = options;
@@ -142,6 +143,7 @@ export function useScaleTransition<E extends HTMLElement>(
     ...transitionOptions,
     timeout,
     temporary,
+    exitedHidden,
     classNames,
   });
 }

package/src/transition/useTransition.ts

@@ -30,6 +30,7 @@ const noop = (): void => {
  * @typeParam E - The HTMLElement type used or the ref required for the
  * transition.
  * @since 4.0.0
+ * @since 6.0.0 Added the `disablePortal` flag to the return value for SSR.
  */
 export function useTransition<E extends HTMLElement>(
   options: TransitionHookOptions<E>

package/src/tree/useTree.ts

@@ -1,9 +1,7 @@
 "use client";
-import type { TreeItemDefaultIds } from "./types.js";
-import type { TreeExpansion } from "./useTreeExpansion.js";
-import { useTreeExpansion } from "./useTreeExpansion.js";
-import type { TreeSelection } from "./useTreeSelection.js";
-import { useTreeSelection } from "./useTreeSelection.js";
+import { type TreeItemDefaultIds } from "./types.js";
+import { useTreeExpansion, type TreeExpansion } from "./useTreeExpansion.js";
+import { useTreeSelection, type TreeSelection } from "./useTreeSelection.js";
 
 /**
  * @since 6.0.0

package/src/typography/TextContainer.tsx

@@ -7,6 +7,8 @@ import {
 /**
  * @since 6.0.0 Removed the `size` option since there is no longer a
  * different line-length for mobile and desktop.
+ * @since 6.0.0 Removed the `clone` prop and the children render function
+ * behavior. Use the `textContainer` class name utility instead.
  */
 export interface TextContainerProps
   extends HTMLAttributes<HTMLDivElement>,
@@ -42,6 +44,8 @@ export interface TextContainerProps
  * element.
  * @since 6.0.0 Removed the `size` option since there is no longer a
  * different line-length for mobile and desktop.
+ * @since 6.0.0 Removed the `clone` prop and the children render function
+ * behavior. Use the `textContainer` class name utility instead.
  */
 export const TextContainer = forwardRef<HTMLDivElement, TextContainerProps>(
   function TextContainer(props, ref) {

package/src/typography/Typography.tsx

@@ -65,6 +65,11 @@ function getComponent(
   }
 }
 
+/**
+ * @since 6.0.0 Renamed `component` to `as`.
+ * @since 6.0.0 Removed the children render function behavior. Use the
+ * `typography` class name utility instead.
+ */
 export interface TypographyProps
   extends HTMLAttributes<TypographyHTMLElement>,
     TypographyClassNameOptions {
@@ -85,6 +90,8 @@ export interface TypographyProps
    * - `"body-2"     -> <p>`
    * - `"caption"    -> <caption>`
    * - `"overline"   -> <span>`
+   *
+   * @since 6.0.0 Renamed from `component`
    */
   as?: CustomTypographyComponent;
 }
@@ -129,6 +136,9 @@ export interface TypographyProps
  *   ):
  * }
  * ```
+ *
+ * @since 6.0.0 Removed the children render function behavior . Use the
+ * `typography` class name utility instead.
  */
 export const Typography = forwardRef<TypographyHTMLElement, TypographyProps>(
   function Typography(props, ref): ReactElement {

package/src/{useAsyncAction.ts → useAsyncFunction.ts}

@@ -6,21 +6,21 @@ import { useUnmounted } from "./useUnmounted.js";
 /**
  * @since 6.0.0
  */
-export type AsyncActionFunction<Args extends unknown[]> = (
+export type AsyncFunction<Args extends unknown[]> = (
   ...args: Args
 ) => Promise<void>;
 
 /**
  * @since 6.0.0
  */
-export type HandleAsyncAction = <Args extends unknown[]>(
-  action: AsyncActionFunction<Args>
-) => AsyncActionFunction<Args>;
+export type HandleAsyncFunction = <Args extends unknown[]>(
+  action: AsyncFunction<Args>
+) => AsyncFunction<Args>;
 
 /**
  * @since 6.0.0
  */
-export interface AsyncActionOptions {
+export interface AsyncFunctionHookOptions {
   /** @defaultValue `false` */
   disabled?: boolean;
 }
@@ -28,11 +28,11 @@ export interface AsyncActionOptions {
 /**
  * @since 6.0.0
  */
-export interface AsyncActionImplementation {
+export interface AsyncFunctionHookImplementation {
   pending: boolean;
   unmounted: NonNullRef<boolean>;
   setPending: UseStateSetter<boolean>;
-  handleAsync: HandleAsyncAction;
+  handleAsync: HandleAsyncFunction;
 }
 
 /**
@@ -44,7 +44,7 @@ export interface AsyncActionImplementation {
  * @example Simple Example (Async Button)
  * ```tsx
  * import type { ButtonProps } from "@react-md/core";
- * import { box, Button, CircularProgress, useAsyncAction } from "@react-md/core";
+ * import { box, Button, CircularProgress, useAsyncFunction } from "@react-md/core";
  * import { cnb } from "cnbuilder";
  * import type { MouseEvent, ReactElement } from "react";
  *
@@ -56,7 +56,7 @@ export interface AsyncActionImplementation {
  *
  * export function AsyncButton(props: AsyncButtonProps): ReactElement {
  *   const { onClick, children, theme, className, disabled, ...remaining } = props;
- *   const { handleAsync, pending } = useAsyncAction({ disabled });
+ *   const { handleAsync, pending } = useAsyncFunction({ disabled });
  *
  *   return (
  *     <Button
@@ -107,7 +107,7 @@ export interface AsyncActionImplementation {
  *   DialogContent,
  *   DialogFooter,
  *   Form,
- *   useAsyncAction,
+ *   useAsyncFunction,
  * } from "@react-md/core";
  * import CloseIcon from "@react-md/material-icons/CloseIcon";
  * import type { ReactElement } from "react";
@@ -119,7 +119,7 @@ export interface AsyncActionImplementation {
  * }
  *
  * function Example({ hide, submit }: ExampleProps): ReactElement {
- *   const { handleAsync, pending } = useAsyncAction();
+ *   const { handleAsync, pending } = useAsyncFunction();
  *   const formId = useId();
  *
  *   return (
@@ -162,15 +162,15 @@ export interface AsyncActionImplementation {
  *
  * @since 6.0.0
  */
-export function useAsyncAction(
-  options: AsyncActionOptions = {}
-): AsyncActionImplementation {
+export function useAsyncFunction(
+  options: AsyncFunctionHookOptions = {}
+): AsyncFunctionHookImplementation {
   const { disabled } = options;
 
   const [pending, setPending] = useState(false);
   const unmounted = useUnmounted();
 
-  const handleAsync = useCallback<HandleAsyncAction>(
+  const handleAsync = useCallback<HandleAsyncFunction>(
     (action) =>
       async (...args) => {
         if (pending || disabled) {