@react-md/core 6.3.0 → 6.3.1

package/src/tabs/Tab.tsx

@@ -13,36 +13,16 @@ import { useHigherContrastChildren } from "../interaction/useHigherContrastChild
 import { type CustomLinkComponent } from "../link/Link.js";
 import { useKeyboardMovementContext } from "../movement/useKeyboardMovementProvider.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { type TabListProps } from "./TabList.js";
-import { tab } from "./tabStyles.js";
+import { type BaseTabClassNameOptions, tab } from "./tabStyles.js";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { type useTabs } from "./useTabs.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-tab-color"?: string;
-    "--rmd-tab-active-color"?: string;
-    "--rmd-tab-inactive-color"?: string;
-    "--rmd-tab-disabled-color"?: string;
-
-    "--rmd-tab-size"?: string;
-    "--rmd-tab-offset"?: string | number;
-    "--rmd-tab-min-width"?: string;
-    "--rmd-tab-max-width"?: string;
-    "--rmd-tab-min-height"?: string;
-    "--rmd-tab-stacked-height"?: string;
-    "--rmd-tab-stacked-width"?: string;
-    "--rmd-tab-padding"?: string | number;
-    "--rmd-tab-stacked-padding"?: string | number;
-    "--rmd-tab-indicator-background"?: string;
-  }
-}
-
 /**
  * @since 6.0.0
  */
-export interface BaseTabProps extends ComponentWithRippleProps {
+export interface BaseTabProps
+  extends ComponentWithRippleProps,
+    BaseTabClassNameOptions {
   /**
    * Set this to `true` if the tab is currently active.
    *
@@ -50,23 +30,6 @@ export interface BaseTabProps extends ComponentWithRippleProps {
    */
   active: boolean;
 
-  /**
-   * Set this to `true` if the {@link TabListProps.disableTransition} prop has
-   * also been set to `true` to disable an active indicator below the tab when
-   * {@link active} is `true`.
-   *
-   * @defaultValue `false`
-   */
-  activeIndicator?: boolean;
-
-  /**
-   * Set this to `true` when rendering the tabs vertically and
-   * {@link activeIndicator} has been enabled.
-   *
-   * @defaultValue !false
-   */
-  verticalActiveIndicator?: boolean;
-
   /**
    * An optional icon to render with the with the {@link children}. The default
    * behavior will render this icon before the children.
@@ -82,14 +45,6 @@ export interface BaseTabProps extends ComponentWithRippleProps {
    * @defaultValue `false`
    */
   iconAfter?: boolean;
-
-  /**
-   * Set this to `true` to render the {@link icon} and {@link children} stacked
-   * instead of horizontally.
-   *
-   * @defaultValue `false`
-   */
-  stacked?: boolean;
 }
 
 /**

package/src/tabs/tabStyles.ts

@@ -2,20 +2,68 @@ import { cnb } from "cnbuilder";
 
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type TabListProps } from "./TabList.js";
 import { tabIndicator } from "./tabIndicatorStyles.js";
 
 const styles = bem("rmd-tab");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-tab-color"?: string;
+    "--rmd-tab-active-color"?: string;
+    "--rmd-tab-inactive-color"?: string;
+    "--rmd-tab-disabled-color"?: string;
+    "--rmd-tab-indicator-background"?: string;
+    "--rmd-tab-min-height"?: string;
+    "--rmd-tab-min-width"?: string;
+    "--rmd-tab-max-width"?: string;
+    "--rmd-tab-stacked-height"?: string;
+    "--rmd-tab-stacked-width"?: string;
+    "--rmd-tab-padding"?: string | number;
+    "--rmd-tab-stacked-padding"?: string | number;
+  }
+}
+
 /**
- * @since 6.0.0
+ * @since 6.3.1
  */
-export interface TabClassNameOptions {
+export interface BaseTabClassNameOptions {
   className?: string;
-  active?: boolean;
-  isLink?: boolean;
+
+  /**
+   * Set this to `true` if the {@link TabListProps.disableTransition} prop has
+   * also been set to `true` to disable an active indicator below the tab when
+   * {@link active} is `true`.
+   *
+   * @defaultValue `false`
+   */
   activeIndicator?: boolean;
+
+  /**
+   * Set this to `true` when rendering the tabs vertically and
+   * {@link activeIndicator} has been enabled.
+   *
+   * @defaultValue !false
+   */
   verticalActiveIndicator?: boolean;
+
+  /**
+   * Set this to `true` to render the {@link icon} and {@link children} stacked
+   * instead of horizontally.
+   *
+   * @defaultValue `false`
+   */
   stacked?: boolean;
+}
+
+/**
+ * @since 6.0.0
+ * @since 6.3.1 Extends BaseTabClassNameOptions
+ */
+export interface TabClassNameOptions extends BaseTabClassNameOptions {
+  active?: boolean;
+  isLink?: boolean;
   reversed?: boolean;
   disabled?: boolean;
 }

package/src/theme/getDerivedTheme.ts

@@ -17,32 +17,6 @@ import {
 } from "./cssVars.js";
 import { type ConfigurableThemeColors } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-background-color"?: string;
-    "--rmd-on-background-color"?: string;
-    "--rmd-surface-color"?: string;
-    "--rmd-primary-color"?: string;
-    "--rmd-on-primary-color"?: string;
-    "--rmd-secondary-color"?: string;
-    "--rmd-on-secondary-color"?: string;
-    "--rmd-warning-color"?: string;
-    "--rmd-on-warning-color"?: string;
-    "--rmd-error-color"?: string;
-    "--rmd-on-error-color"?: string;
-    "--rmd-success-color"?: string;
-    "--rmd-on-success-color"?: string;
-    "--rmd-text-primary-color"?: string;
-    "--rmd-text-secondary-color"?: string;
-    "--rmd-text-hint-color"?: string;
-    "--rmd-text-disabled-color"?: string;
-
-    "--rmd-outline-width"?: string | number;
-    "--rmd-outline-color"?: string;
-    "--rmd-outline-grey-color"?: string;
-  }
-}
-
 /** @since 6.0.0 */
 export const getDerivedTheme = (
   container: Element = document.documentElement

package/src/theme/types.ts

@@ -2,6 +2,32 @@ import { type CSSProperties } from "react";
 
 import { type UseStateSetter } from "../types.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-background-color"?: string;
+    "--rmd-on-background-color"?: string;
+    "--rmd-surface-color"?: string;
+    "--rmd-primary-color"?: string;
+    "--rmd-on-primary-color"?: string;
+    "--rmd-secondary-color"?: string;
+    "--rmd-on-secondary-color"?: string;
+    "--rmd-success-color"?: string;
+    "--rmd-on-success-color"?: string;
+    "--rmd-warning-color"?: string;
+    "--rmd-on-warning-color"?: string;
+    "--rmd-error-color"?: string;
+    "--rmd-on-error-color"?: string;
+    "--rmd-text-primary-color"?: string;
+    "--rmd-text-secondary-color"?: string;
+    "--rmd-text-hint-color"?: string;
+    "--rmd-text-disabled-color"?: string;
+    "--rmd-outline-width"?: string | number;
+    "--rmd-outline-color"?: string;
+    "--rmd-outline-grey-color"?: string;
+    "--rmd-inverse-color"?: string;
+  }
+}
+
 /**
  * @since 6.0.0
  */

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/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} */

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/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/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;
 }
 
 /**