@react-md/core 6.2.1 → 6.3.1

package/src/tooltip/Tooltip.tsx

@@ -2,9 +2,7 @@
 
 import { type HTMLAttributes, forwardRef } from "react";
 
-import { type TextOverflow } from "../cssUtils.js";
 import { Portal } from "../portal/Portal.js";
-import { type SimplePosition } from "../positioning/types.js";
 import {
   type CSSTransitionClassNames,
   type CSSTransitionComponentProps,
@@ -19,15 +17,7 @@ import {
   DEFAULT_TOOLTIP_POSITION,
   DEFAULT_TOOLTIP_TIMEOUT,
 } from "./constants.js";
-import { tooltip } from "./styles.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-tooltip-background-color"?: string;
-    "--rmd-tooltip-color"?: string;
-    "--rmd-tooltip-spacing"?: string | number;
-  }
-}
+import { type TooltipClassNameOptions, tooltip } from "./styles.js";
 
 /**
  * The base props for the `Tooltip` component. This can be extended when
@@ -38,45 +28,23 @@ declare module "react" {
  * @since 6.0.0 Removed `lineWrap` for `textOverflow`
  * @since 6.0.0 No longer supports the `RenderConditionalPortalProps` other than
  * `portal` with the `disablePortal` prop.
+ * @since 6.3.1 Extends TooltipClassNameOptions for CSSProperties module
+ * augmentation.
  */
 export interface TooltipProps
   extends HTMLAttributes<HTMLSpanElement>,
+    TooltipClassNameOptions,
     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 `"below"`
-   */
-  position?: SimplePosition;
-
   /**
    * @see {@link CSSTransitionComponentProps.temporary}
    * @defaultValue `true`
    */
   temporary?: 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
-   * tooltip no longer aligns to the center of the tooltipped element.
-   *
-   * Set this to `"ellipsis"` if the tooltip should only show a single line of
-   * text and ellipsis once it has reached the max tooltip width.
-   *
-   * @defaultValue `"allow"`
-   */
-  textOverflow?: TextOverflow;
-
   /**
    * @see {@link CSSTransitionComponentProps.timeout}
    * @defaultValue `DEFAULT_TOOLTIP_TIMEOUT`

package/src/tooltip/styles.ts

@@ -6,13 +6,54 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-tooltip");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-tooltip-background-color"?: string;
+    "--rmd-tooltip-border-radius"?: string | number;
+    "--rmd-tooltip-color"?: string;
+    "--rmd-tooltip-spacing"?: string | number;
+    "--rmd-tooltip-z-index"?: string | number;
+    "--rmd-tooltip-horizontal-padding"?: string | number;
+    "--rmd-tooltip-vertical-padding"?: string | number;
+    "--rmd-tooltip-min-height"?: string | number;
+    "--rmd-tooltip-max-width"?: string | number;
+    "--rmd-tooltip-dense-horizontal-padding"?: string | number;
+    "--rmd-tooltip-dense-vertical-padding"?: string | number;
+    "--rmd-tooltip-dense-min-height"?: string | number;
+    "--rmd-tooltip-transition-distance"?: string | number;
+  }
+}
+
 /**
  * @since 6.0.0
+ * @since 6.3.1 Allow `position` to be optional
  */
 export interface TooltipClassNameOptions {
   className?: string;
+
+  /**
+   * 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;
-  position: SimplePosition;
+
+  /**
+   * @defaultValue `"below"`
+   */
+  position?: SimplePosition;
+
+  /**
+   * 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
+   * tooltip no longer aligns to the center of the tooltipped element.
+   *
+   * Set this to `"ellipsis"` if the tooltip should only show a single line of
+   * text and ellipsis once it has reached the max tooltip width.
+   *
+   * @defaultValue `"allow"`
+   */
   textOverflow?: TextOverflow;
 }
 
@@ -20,7 +61,7 @@ export interface TooltipClassNameOptions {
  * @since 6.0.0
  */
 export function tooltip(options: TooltipClassNameOptions): string {
-  const { dense, position, className, textOverflow } = options;
+  const { dense, position = "below", className, textOverflow } = options;
 
   return cnb(
     styles({

package/src/transition/SkeletonPlaceholder.tsx

@@ -12,14 +12,6 @@ import {
   useSkeletonPlaceholder,
 } from "./useSkeletonPlaceholder.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-skeleton-placeholder-background-color"?: string;
-    "--rmd-skeleton-placeholder-height"?: string | number;
-    "--rmd-skeleton-placeholder-width"?: string | number;
-  }
-}
-
 /** @since 6.0.0 */
 export interface SkeletonPlaceholderProps
   extends HTMLAttributes<HTMLDivElement>,

package/src/transition/Slide.tsx

@@ -12,6 +12,8 @@ import {
   useSlideTransition,
 } from "./useSlideTransition.js";
 
+// NOTE: Tis is in both `useSlideTransition` and `Slide` since there are no
+// reusable types between these two files.
 declare module "react" {
   interface CSSProperties {
     "--rmd-slide-duration"?: string | number;

package/src/transition/skeletonPlaceholderUtils.ts

@@ -3,6 +3,14 @@ import { type CSSProperties } from "react";
 import { bem } from "../utils/bem.js";
 import { randomInt } from "../utils/randomInt.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-skeleton-placeholder-background-color"?: string;
+    "--rmd-skeleton-placeholder-height"?: string | number;
+    "--rmd-skeleton-placeholder-width"?: string | number;
+  }
+}
+
 /**
  * @since 6.0.0
  */

package/src/transition/useCarousel.ts

@@ -2,10 +2,10 @@
 
 import { useCallback, useEffect, useState } from "react";
 
-import type { UseStateSetter } from "../types.js";
+import { type UseStateSetter } from "../types.js";
 import { useToggle } from "../useToggle.js";
 import { loop } from "../utils/loop.js";
-import type { SlideDirection } from "./SlideContainer.js";
+import { type SlideDirection } from "./SlideContainer.js";
 
 /** @since 6.0.0 */
 export interface CarouselSlideState {

package/src/transition/useMaxWidthTransition.ts

@@ -6,14 +6,29 @@ import { Children, cloneElement, isValidElement } from "react";
 
 import { maxWidthTransition } from "./maxWidthTransition.js";
 
+declare module "react" {
+  interface CSSProperites {
+    "--rmd-max-width"?: string | number;
+    "--rmd-max-width-gap"?: string | number;
+  }
+}
+
+/**
+ * @since 6.3.1
+ */
+export interface BaseMaxWidthTransitionOptions {
+  className?: string;
+}
+
 /**
  * @since 6.0.0
+ * @since 6.3.1 Extends BaseMaxWidthTransitionOptions
  */
-export interface MaxWidthTransitionOptions {
+export interface MaxWidthTransitionOptions
+  extends BaseMaxWidthTransitionOptions {
   element: ReactNode;
   transitionIn: boolean;
 
-  className?: string;
   disabled?: boolean;
   disableTransition?: boolean;
 }

package/src/transition/useSlideTransition.ts

@@ -10,6 +10,14 @@ import {
 } from "./types.js";
 import { useCSSTransition } from "./useCSSTransition.js";
 
+// NOTE: Tis is in both `useSlideTransition` and `Slide` since there are no
+// reusable types between these two files.
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-slide-duration"?: string | number;
+  }
+}
+
 /** @since 6.0.0 */
 export const DEFAULT_SLIDE_TRANSITION_TIMEOUT =
   150 as const satisfies TransitionTimeout;

package/src/tree/Tree.tsx

@@ -17,7 +17,7 @@ import { RenderRecursively } from "../utils/RenderRecursively.js";
 import { identity } from "../utils/identity.js";
 import { DefaultTreeItemRenderer } from "./DefaultTreeItemRenderer.js";
 import { type TreeExpansionMode, TreeProvider } from "./TreeProvider.js";
-import { tree } from "./styles.js";
+import { type TreeClassNameOptions, tree } from "./styles.js";
 import {
   type TreeData,
   type TreeItemNode,
@@ -29,15 +29,6 @@ import { useTreeItems } from "./useTreeItems.js";
 import { useTreeMovement } from "./useTreeMovement.js";
 import { type TreeSelection } from "./useTreeSelection.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-tree-depth"?: number;
-    "--rmd-tree-item-padding"?: string | number;
-    "--rmd-tree-item-padding-base"?: string | number;
-    "--rmd-tree-item-padding-incrementor"?: string | number;
-  }
-}
-
 /**
  * @since 6.0.0
  */
@@ -55,9 +46,13 @@ export type TreeHTMLAttributes = Omit<
  * - `getItemLabel`
  * - `getItemValue`
  * - `getItemProps`
+ *
+ * @since 6.3.1 Extends TreeClassNameOptions for CSSProperties module
+ * augmentation.
  */
 export interface TreeProps<T extends TreeItemNode>
   extends TreeHTMLAttributes,
+    TreeClassNameOptions,
     TreeExpansion,
     TreeSelection {
   /** @see {@link TreeData} */
@@ -270,6 +265,7 @@ export function Tree<T extends TreeItemNode>(
   });
 
   const { metadataLookup, movementContext, movementProps } = useTreeMovement({
+    ref: treeRef,
     onClick,
     onFocus,
     onKeyDown,
@@ -305,7 +301,6 @@ export function Tree<T extends TreeItemNode>(
           {...remaining}
           {...movementProps}
           id={treeId}
-          ref={treeRef}
           role="tree"
           tabIndex={0}
           className={tree({ className })}

package/src/tree/styles.ts

@@ -1,6 +1,6 @@
 import { cnb } from "cnbuilder";
 
-import type { InternalListItemClassNameOptions } from "../list/listItemStyles.js";
+import { type InternalListItemClassNameOptions } from "../list/listItemStyles.js";
 import { listItem } from "../list/listItemStyles.js";
 import { bem } from "../utils/bem.js";
 
@@ -8,6 +8,15 @@ const treeStyles = bem("rmd-tree");
 const treeItemStyles = bem("rmd-tree-item");
 const treeGroupStyles = bem("rmd-tree-group");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-tree-depth"?: number;
+    "--rmd-tree-item-padding"?: string | number;
+    "--rmd-tree-item-padding-base"?: string | number;
+    "--rmd-tree-item-padding-incrementor"?: string | number;
+  }
+}
+
 /** @since 6.0.0 */
 export interface TreeClassNameOptions {
   className?: string;

package/src/tree/useTreeMovement.ts

@@ -4,6 +4,7 @@ import type {
   FocusEventHandler,
   KeyboardEventHandler,
   MouseEventHandler,
+  Ref,
 } from "react";
 import { useRef } from "react";
 
@@ -59,6 +60,7 @@ const getVisibleTreeItems = (
  * @internal
  */
 interface TreeMovementOptions<T extends TreeItemNode> extends TreeExpansion {
+  ref?: Ref<HTMLUListElement>;
   data: TreeData<T>;
   onClick: MouseEventHandler<HTMLUListElement> | undefined;
   onFocus: FocusEventHandler<HTMLUListElement> | undefined;
@@ -88,6 +90,7 @@ export function useTreeMovement<T extends TreeItemNode>(
   options: TreeMovementOptions<T>
 ): TreeMovement {
   const {
+    ref,
     onClick,
     onFocus,
     onKeyDown,
@@ -106,6 +109,7 @@ export function useTreeMovement<T extends TreeItemNode>(
     itemToElement: {},
   });
   const movement = useKeyboardMovementProvider({
+    ref,
     onClick,
     onFocus,
     onKeyDown,

package/src/types.ts

@@ -227,6 +227,22 @@ export interface ElementSize {
   width: number;
 }
 
+/**
+ * @since 6.3.0
+ */
+export interface Point {
+  x: number;
+  y: number;
+}
+
+/**
+ * @since 6.3.0
+ */
+export interface MinMaxRange {
+  min: number;
+  max: number;
+}
+
 /**
  * @since 6.2.0
  */

package/src/typography/Mark.tsx

@@ -1,11 +1,15 @@
 import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
 
-import { mark } from "./markStyles.js";
+import { type MarkClassNameOptions, mark } from "./markStyles.js";
 
 /**
  * @since 6.0.0
+ * @since 6.3.1 Extends MarkClassNameOptions for CSSProperties module
+ * augmentation.
  */
-export interface MarkProps extends HTMLAttributes<HTMLElement> {
+export interface MarkProps
+  extends HTMLAttributes<HTMLElement>,
+    MarkClassNameOptions {
   children: ReactNode;
 }
 

package/src/typography/TextContainer.tsx

@@ -5,13 +5,6 @@ import {
   textContainer,
 } from "./textContainerStyles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-line-length"?: string | number;
-    "--rmd-text-container-padding"?: string | number;
-  }
-}
-
 /**
  * @since 6.0.0 Removed the `size` option since there is no longer a
  * different line-length for mobile and desktop.

package/src/typography/markStyles.ts

@@ -4,6 +4,12 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-mark");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-mark-color"?: string;
+  }
+}
+
 /**
  * @since 6.0.0
  */

package/src/typography/textContainerStyles.ts

@@ -4,6 +4,13 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-text-container");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-line-length"?: string | number;
+    "--rmd-text-container-padding"?: string | number;
+  }
+}
+
 /**
  * @since 6.0.0
  */

package/src/typography/typographyStyles.ts

@@ -2,6 +2,16 @@ import { cnb } from "cnbuilder";
 
 import { type TextCssUtilsOptions, cssUtils } from "../cssUtils.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-font-size"?: string;
+    "--rmd-font-family"?: string;
+    "--rmd-font-weight"?: string | number;
+    "--rmd-font-height"?: string | number;
+    "--rmd-font-line-height"?: string | number;
+  }
+}
+
 /**
  * A union of all the material design provided typography styles. When used with
  * the Typography component, this will generate the correct typography className

package/src/utils/getMiddleOfRange.ts

@@ -1,12 +1,11 @@
+import { type MinMaxRange } from "../types.js";
 import { getRangeSteps } from "./getRangeSteps.js";
 import { nearest } from "./nearest.js";
 
 /**
  * @since 6.0.0
  */
-export interface GetMiddleOfRangeOptions {
-  min: number;
-  max: number;
+export interface GetMiddleOfRangeOptions extends MinMaxRange {
   step: number;
 }
 

package/src/utils/getPercentage.ts

@@ -1,15 +1,7 @@
-/** @since 4.0.1 */
-export interface GetPercentageOptions {
-  /**
-   * The min value allowed.
-   */
-  min: number;
-
-  /**
-   * The max value allowed.
-   */
-  max: number;
+import { type MinMaxRange } from "../types.js";
 
+/** @since 4.0.1 */
+export interface GetPercentageOptions extends MinMaxRange {
   /**
    * The current value
    */

package/src/utils/getRangeSteps.ts

@@ -1,10 +1,10 @@
+import { type MinMaxRange } from "../types.js";
+
 /**
  * @internal
  * @since 6.0.0
  */
-export interface RangeStepsOptions {
-  min: number;
-  max: number;
+export interface RangeStepsOptions extends MinMaxRange {
   step: number;
 }
 

package/src/utils/nearest.ts

@@ -1,10 +1,10 @@
+import { type MinMaxRange } from "../types.js";
+
 /**
  * @internal
  * @since 6.0.0
  */
-export interface NearestOptions {
-  min: number;
-  max: number;
+export interface NearestOptions extends MinMaxRange {
   steps: number;
   value: number;
 

package/src/utils/trigonometry.ts

@@ -0,0 +1,46 @@
+import { type Point } from "../types.js";
+
+/**
+ * @since 6.3.0
+ * @internal
+ */
+export const radiansToDegrees = (radians: number): number =>
+  (radians * 180) / Math.PI;
+
+/**
+ * @since 6.3.0
+ * @internal
+ */
+export const degreesToRadians = (degrees: number): number =>
+  (degrees * Math.PI) / 180;
+
+/**
+ * @since 6.3.0
+ * @internal
+ */
+interface IsPointInCircleOptions {
+  point: Point;
+  center: Point;
+  radius: number;
+}
+
+/**
+ * @since 6.3.0
+ * @internal
+ */
+export function isPointInCircle(options: IsPointInCircleOptions): boolean {
+  const { point, center, radius } = options;
+
+  const distance = (center.x - point.x) ** 2 + (center.y - point.y) ** 2;
+  return distance <= radius ** 2;
+}
+
+/**
+ * @internal
+ * @since 6.3.0
+ */
+export function calcHypotenuse(point: Point): number {
+  const { x, y } = point;
+
+  return Math.sqrt(x * x + y * y);
+}

package/src/window-splitter/WindowSplitter.tsx

@@ -1,27 +1,22 @@
 import { type ButtonHTMLAttributes, forwardRef } from "react";
 
 import { type LabelRequiredForA11y } from "../types.js";
-import { windowSplitter } from "./styles.js";
+import {
+  type BaseWindowSplitterClassNameOptions,
+  windowSplitter,
+} from "./styles.js";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type useWindowSplitter } from "./useWindowSplitter.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-window-splitter-top"?: number | string;
-    "--rmd-window-splitter-right"?: number | string;
-    "--rmd-window-splitter-bottom"?: number | string;
-    "--rmd-window-splitter-left"?: number | string;
-    "--rmd-window-splitter-opacity"?: number | string;
-    "--rmd-window-splitter-position"?: number | string;
-  }
-}
-
 /**
- * @since 6.0.0
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}
+ * @since 6.0.0
+ * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions for CSSProperties
+ * module augmentation.
  */
 export interface BaseWindowSplitterProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> {
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children">,
+    BaseWindowSplitterClassNameOptions {
   /**
    * This will be provided by the {@link useWindowSplitter} hook.
    */
@@ -36,14 +31,6 @@ export interface BaseWindowSplitterProps
    * This will be provided by the {@link useWindowSplitter} hook.
    */
   reversed: boolean;
-
-  /**
-   * Set this to `true` if the window splitter should use `position: absolute`
-   * instead of `position: fixed`.
-   *
-   * @defaultValue `false`
-   */
-  disableFixed?: boolean;
 }
 
 /**

package/src/window-splitter/styles.ts

@@ -4,15 +4,43 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-window-splitter");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-window-splitter-size"?: string | number;
+    "--rmd-window-splitter-background-size"?: string | number;
+    "--rmd-window-splitter-x"?: string | number;
+    "--rmd-window-splitter-y"?: string | number;
+    "--rmd-window-splitter-z"?: string | number;
+    "--rmd-window-splitter-position"?: string | number;
+    "--rmd-window-splitter-backgrond-color"?: string;
+    "--rmd-window-splitter-opacity"?: string | number;
+  }
+}
+
 /**
- * @since 6.0.0
+ * @since 6.3.1
  */
-export interface WindowSplitterClassNameOptions {
+export interface BaseWindowSplitterClassNameOptions {
   className?: string;
+
+  /**
+   * Set this to `true` if the window splitter should use `position: absolute`
+   * instead of `position: fixed`.
+   *
+   * @defaultValue `false`
+   */
+  disableFixed?: boolean;
+}
+
+/**
+ * @since 6.0.0
+ * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions
+ */
+export interface WindowSplitterClassNameOptions
+  extends BaseWindowSplitterClassNameOptions {
   dragging?: boolean;
   reversed?: boolean;
   vertical?: boolean;
-  disableFixed?: boolean;
 }
 
 /**

package/src/window-splitter/useWindowSplitter.ts

@@ -42,8 +42,9 @@ export type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =
 /**
  * @since 6.0.0
  */
-export interface WindowSplitterWidgetProps<E extends HTMLElement>
-  extends Required<DraggableMouseEventHandlers<E>>,
+export interface WindowSplitterWidgetProps<
+  E extends HTMLElement = HTMLButtonElement,
+> extends Required<DraggableMouseEventHandlers<E>>,
     Required<DraggableKeyboardEventHandlers<E>> {
   "aria-orientation": "vertical" | undefined;
   "aria-valuenow": number;