@react-md/core 6.2.1 → 6.3.1

package/src/overlay/styles.ts

@@ -13,26 +13,45 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-overlay");
 
-/** @since 6.0.0 */
-export interface OverlayClassNameOptions {
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-overlay-background-color"?: string;
+    "--rmd-overlay-z-index"?: number;
+  }
+}
+
+export interface BaseOverlayClassNameOptions {
   className?: string;
 
+  /**
+   * Set this to `true` for when the overlay should be visible. Toggling this
+   * value will trigger the enter/exit animation.
+   */
   visible: boolean;
 
-  /** @defaultValue `false` */
-  active?: boolean;
+  /**
+   * @defaultValue `"center"`
+   * @since 6.0.0
+   */
+  align?: BoxAlignItems;
+
+  /**
+   * @defaultValue `"center"`
+   * @since 6.0.0
+   */
+  justify?: BoxJustifyContent;
 
   /** @defaultValue `false` */
   clickable?: boolean;
+}
 
+/** @since 6.0.0 */
+export interface OverlayClassNameOptions extends BaseOverlayClassNameOptions {
   /** @defaultValue `false` */
-  absolute?: boolean;
-
-  /** @defaultValue `"center"` */
-  align?: BoxAlignItems;
+  active?: boolean;
 
-  /** @defaultValue `"center"` */
-  justify?: BoxJustifyContent;
+  /** @defaultValue `false` */
+  absolute?: boolean;
 }
 
 /**

package/src/progress/LinearProgress.tsx

@@ -8,14 +8,21 @@ import {
 import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { getPercentage } from "../utils/getPercentage.js";
-import { linearProgress, linearProgressBar } from "./linearProgressStyles.js";
+import {
+  type BaseLinearProgressClassNameOptions,
+  linearProgress,
+  linearProgressBar,
+} from "./linearProgressStyles.js";
 import { type ProgressProps } from "./types.js";
 
 /**
  * @since 6.0.0 Added the `theme` prop
+ * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties
+ * module augmentation.
  */
 export interface LinearProgressProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">,
+    BaseLinearProgressClassNameOptions,
     ProgressProps {
   /**
    * An optional style to apply to the progress bar. This will be merged with
@@ -44,15 +51,6 @@ export interface LinearProgressProps
    */
   reverse?: boolean;
 
-  /**
-   * Boolean if the progress should be vertical instead of horizontal.  When
-   * this prop is set, you should also set the `verticalHeight` prop to a height
-   * value you want for your progress bar.
-   *
-   * @defaultValue `false`
-   */
-  vertical?: boolean;
-
   /**
    * Since there isn't really a good way to have "auto height", you'll need to
    * manually set the progress bar's height with this prop to some pixel value.

package/src/progress/circularProgressStyles.ts

@@ -6,6 +6,13 @@ import { type ProgressTheme } from "./types.js";
 
 const styles = bem("rmd-circular-progress");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-progress-circular-size"?: string | number;
+    "--rmd-progress-circular-stroke-width"?: string | number;
+  }
+}
+
 /**
  * @since 6.2.0
  */

package/src/progress/linearProgressStyles.ts

@@ -6,10 +6,15 @@ import { type ProgressTheme } from "./types.js";
 
 const styles = bem("rmd-linear-progress");
 
-/**
- * @since 6.2.0
- */
-export interface LinearProgressClassNameOptions {
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-progress-background-color"?: string;
+    "--rmd-progress-color"?: string;
+    "--rmd-progress-linear-size"?: string | number;
+  }
+}
+
+export interface BaseLinearProgressClassNameOptions {
   className?: string;
 
   /**
@@ -18,9 +23,21 @@ export interface LinearProgressClassNameOptions {
    */
   theme?: ProgressTheme;
 
-  /** @defaultValue `false` */
+  /**
+   * Boolean if the progress should be vertical instead of horizontal.  When
+   * this prop is set, you should also set the `verticalHeight` prop to a height
+   * value you want for your progress bar.
+   *
+   * @defaultValue `false`
+   */
   vertical?: boolean;
+}
 
+/**
+ * @since 6.2.0
+ */
+export interface LinearProgressClassNameOptions
+  extends BaseLinearProgressClassNameOptions {
   /** @defaultValue `false` */
   indeterminate?: boolean;
 }

package/src/progress/types.ts

@@ -1,15 +1,5 @@
 import { type ThemeColor } from "../cssUtils.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-progress-background-color"?: string;
-    "--rmd-progress-color"?: string;
-    "--rmd-progress-circular-size"?: string | number;
-    "--rmd-progress-circular-stroke-width"?: number;
-    "--rmd-progress-linear-size"?: string | number;
-  }
-}
-
 /**
  * @since 6.0.0
  */

package/src/segmented-button/SegmentedButton.tsx

@@ -6,31 +6,30 @@ import { getIcon } from "../icon/config.js";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
-import { useMaxWidthTransition } from "../transition/useMaxWidthTransition.js";
-import { segmentedButton } from "./segmentedButtonStyles.js";
+import {
+  type BaseMaxWidthTransitionOptions,
+  useMaxWidthTransition,
+} from "../transition/useMaxWidthTransition.js";
+import {
+  type BaseSegmentedButtonClassNameOptions,
+  segmentedButton,
+} from "./segmentedButtonStyles.js";
 
 /**
  * @since 6.0.0
+ * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSS module
+ * augmentation.
+ * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions for CSSProperties
+ * module augmentation.
  */
 export interface SegmentedButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
+    BaseMaxWidthTransitionOptions,
+    BaseSegmentedButtonClassNameOptions,
     ComponentWithRippleProps {
-  /**
-   * Set this to `true` to apply selected styles and an optional
-   * {@link selectedIcon}
-   *
-   * @defaultValue `false`
-   */
-  selected?: boolean;
-
   /** @defaultValue `getIcon("selected")` */
   selectedIcon?: ReactNode;
 
-  /**
-   * An optional className to apply when {@link selected} is `true`.
-   */
-  selectedClassName?: string;
-
   /**
    * Set this to `true` to not render the {@link selectedIcon} when
    * {@link selected} is `true`.

package/src/segmented-button/segmentedButtonStyles.ts

@@ -5,20 +5,45 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-segmented-button");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-segmented-button-border-radius"?: string | number;
+    "--rmd-segmented-button-min-height"?: string | number;
+    "--rmd-segmented-button-min-width"?: string | number;
+    "--rmd-segmented-button-outline-width"?: string | number;
+    "--rmd-segmented-button-outline-color"?: string | number;
+    "--rmd-segmented-button-color"?: string | number;
+    "--rmd-segmented-button-selected-background-color"?: string | number;
+    "--rmd-segmented-button-selected-color"?: string | number;
+  }
+}
+
 /**
- * @since 6.0.0
+ * @since 6.3.1
  */
-export interface SegmentedButtonClassNameOptions {
+export interface BaseSegmentedButtonClassNameOptions {
   className?: string;
 
-  /** @defaultValue `false` */
+  /**
+   * Set this to `true` to apply selected styles and an optional
+   * {@link selectedIcon}
+   *
+   * @defaultValue `false`
+   */
   selected?: boolean;
 
   /**
    * An optional className to apply when {@link selected} is `true`
    */
   selectedClassName?: string;
+}
 
+/**
+ * @since 6.0.0
+ * @since 6.3.1 Extends BaseSegmentedButtonClassNameOptions
+ */
+export interface SegmentedButtonClassNameOptions
+  extends BaseSegmentedButtonClassNameOptions {
   /** @internal */
   pressedClassName?: string;
 }

package/src/sheet/Sheet.tsx

@@ -11,19 +11,6 @@ import {
   sheet,
 } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-sheet-height"?: string | number;
-    "--rmd-sheet-width"?: string | number;
-    "--rmd-sheet-max-height"?: string | number;
-    "--rmd-sheet-touch-width"?: string | number;
-    "--rmd-sheet-touch-max-height"?: string | number;
-    "--rmd-sheet-static-width"?: string | number;
-    "--rmd-sheet-transform-offscreen"?: string | number;
-    "--rmd-sheet-z-index"?: number;
-  }
-}
-
 /**
  * @since 6.0.0
  */

package/src/sheet/styles.ts

@@ -8,6 +8,19 @@ import {
 } from "../transition/types.js";
 import { bem } from "../utils/bem.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-sheet-height"?: string | number;
+    "--rmd-sheet-width"?: string | number;
+    "--rmd-sheet-max-height"?: string | number;
+    "--rmd-sheet-touch-width"?: string | number;
+    "--rmd-sheet-touch-max-height"?: string | number;
+    "--rmd-sheet-static-width"?: string | number;
+    "--rmd-sheet-transform-offscreen"?: string | number;
+    "--rmd-sheet-z-index"?: number;
+  }
+}
+
 /**
  * @since 6.0.0 Uses `as const satisfies TransitionTimeout`
  */

package/src/snackbar/Toast.tsx

@@ -10,7 +10,6 @@ import {
 } from "react";
 
 import { type ButtonProps } from "../button/Button.js";
-import { type BackgroundColor } from "../cssUtils.js";
 import {
   type CSSTransitionClassNames,
   type TransitionCallbacks,
@@ -22,21 +21,14 @@ import { useEnsuredId } from "../useEnsuredId.js";
 import { ToastActionButton } from "./ToastActionButton.js";
 import { ToastCloseButton } from "./ToastCloseButton.js";
 import { ToastContent, type ToastContentProps } from "./ToastContent.js";
-import { toast } from "./toastStyles.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-toast-color"?: string;
-    "--rmd-toast-background-color"?: string;
-    "--rmd-toast-offset"?: string | number;
-  }
-}
+import { type BaseToastClasNameOptions, toast } from "./toastStyles.js";
 
 /**
  * @since 6.0.0
  */
 export interface ConfigurableToastProps
   extends HTMLAttributes<HTMLDivElement>,
+    BaseToastClasNameOptions,
     TransitionCallbacks {
   /**
    * Note: this default value will only be generated in the `Toast` component.
@@ -52,11 +44,6 @@ export interface ConfigurableToastProps
    */
   role?: AriaRole;
 
-  /**
-   * @defaultValue `"surface"`
-   */
-  theme?: BackgroundColor;
-
   /**
    * Set this to `true` to stack the content above the {@link action}. It is not
    * recommended to enable this prop if the {@link closeButton} is enabled.

package/src/snackbar/toastStyles.ts

@@ -5,11 +5,29 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-toast");
 
-/** @since 6.0.0 */
-export interface ToastClassNameOptions {
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-toast-color"?: string;
+    "--rmd-toast-background-color"?: string;
+    "--rmd-toast-offset"?: string | number;
+  }
+}
+
+/**
+ * @since 6.3.1
+ */
+export interface BaseToastClasNameOptions {
   className?: string;
+
   /** @defaultValue `"surface"` */
   theme?: BackgroundColor;
+}
+
+/**
+ * @since 6.0.0
+ * @since 6.3.1 Extends BaseToastClasNameOptions
+ */
+export interface ToastClassNameOptions extends BaseToastClasNameOptions {
   /** @defaultValue `false` */
   action?: boolean;
   /** @defaultValue `false` */

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/tabs/useTabList.ts

@@ -176,6 +176,7 @@ export function useTabList(
   const forwardRef = useRef<HTMLDivElement>(null);
   const backwardRef = useRef<HTMLDivElement>(null);
   const { movementProps, movementContext } = useKeyboardMovementProvider({
+    ref: tabListRef,
     onClick(event) {
       onClick(event);
       if (event.isPropagationStopped() || !(event.target instanceof Element)) {
@@ -226,7 +227,6 @@ export function useTabList(
   return {
     elementProps: {
       "aria-orientation": vertical ? "vertical" : "horizontal",
-      ref: tabListRef,
       style: {
         ...style,
         ...(disableTransition ? undefined : indicatorStyles),

package/src/test-utils/drag.ts

@@ -1,25 +1,21 @@
 import { fireEvent } from "@testing-library/dom";
 import type { MouseEvent } from "react";
 
+import { type Point } from "../types.js";
 import { wait } from "../utils/wait.js";
 
-interface XYCoords {
-  x: number;
-  y: number;
-}
-
 interface BaseDragOptions {
-  to?: XYCoords | Element;
-  from?: XYCoords;
-  delta?: XYCoords;
+  to?: Point | Element;
+  from?: Point;
+  delta?: Point;
   steps?: number;
   duration?: number;
 }
 
 type DragOptions = BaseDragOptions &
-  ({ to: XYCoords | Element; delta?: never } | { delta: XYCoords; to?: never });
+  ({ to: Point | Element; delta?: never } | { delta: Point; to?: never });
 
-const getElementClientCenter = (element: Element): XYCoords => {
+const getElementClientCenter = (element: Element): Point => {
   const { left, top, width, height } = element.getBoundingClientRect();
   return {
     x: left + width / 2,
@@ -27,7 +23,7 @@ const getElementClientCenter = (element: Element): XYCoords => {
   };
 };
 
-const getCoords = (elementOrCoords: Element | XYCoords): XYCoords =>
+const getCoords = (elementOrCoords: Element | Point): Point =>
   "x" in elementOrCoords && "y" in elementOrCoords
     ? elementOrCoords
     : getElementClientCenter(elementOrCoords);
@@ -58,7 +54,7 @@ export async function drag(
       }
     : getCoords(inTo);
 
-  const step: XYCoords = {
+  const step: Point = {
     x: (to.x - from.x) / steps,
     y: (to.y - from.y) / steps,
   };

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