@react-md/core 6.3.0 → 6.3.2

package/src/list/ListItem.tsx

@@ -7,33 +7,21 @@ import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
 import { ListItemChildren } from "./ListItemChildren.js";
 import { getListItemHeight } from "./getListItemHeight.js";
-import { listItem } from "./listItemStyles.js";
-import { type ListItemChildrenProps, type ListItemHeight } from "./types.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-item-keyline"?: string | number;
-    "--rmd-list-item-padding-h"?: string | number;
-    "--rmd-list-item-padding-v"?: string | number;
-    "--rmd-list-item-height"?: string | number;
-    "--rmd-list-item-medium-height"?: string | number;
-    "--rmd-list-item-large-height"?: string | number;
-    "--rmd-list-item-extra-large-height"?: string | number;
-    "--rmd-list-item-multiline-clamp"?: string | number;
-    "--rmd-list-item-multiline-height"?: string | number;
-    "--rmd-list-item-media-size"?: string | number;
-    "--rmd-list-item-media-spacing"?: string | number;
-    "--rmd-list-item-text-multiline-height"?: string | number;
-  }
-}
+import {
+  type BaseListItemClassNameOptions,
+  listItem,
+} from "./listItemStyles.js";
+import { type ListItemChildrenProps } from "./types.js";
 
 /**
  * @since 6.0.0 Renamed `threeLines` to `multiline` since it can
  * support more than three lines of text.
+ * @since 6.3.1 Extends the BaseListItemClassNameOptions
  */
 export interface ListItemProps
   extends HTMLAttributes<HTMLLIElement>,
     ListItemChildrenProps,
+    BaseListItemClassNameOptions,
     ComponentWithRippleProps {
   /**
    * @defaultValue `"button"`
@@ -45,30 +33,6 @@ export interface ListItemProps
    */
   tabIndex?: number;
 
-  /**
-   * @see {@link ListItemHeight}
-   * @defaultValue `"auto"`
-   */
-  height?: ListItemHeight;
-
-  /**
-   * @defaultValue `false`
-   */
-  multiline?: boolean;
-
-  /**
-   * @defaultValue `false`
-   */
-  disabled?: boolean;
-
-  /**
-   * Note: This does nothing if the `disabled` prop is not enabled.
-   *
-   * @defaultValue `false`
-   * @since 2.4.3
-   */
-  disabledOpacity?: boolean;
-
   /**
    * Set this to `false` if the list item should not gain the interaction
    * states: hover, focus, press, etc. This is kind of like being disabled

package/src/list/listItemStyles.ts

@@ -10,9 +10,27 @@ import {
 
 const styles = bem("rmd-list-item");
 
-/** @since 6.0.0 */
-export interface ListItemClassNameOptions {
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-list-item-keyline"?: string | number;
+    "--rmd-list-item-padding-h"?: string | number;
+    "--rmd-list-item-padding-v"?: string | number;
+    "--rmd-list-item-height"?: string | number;
+    "--rmd-list-item-medium-height"?: string | number;
+    "--rmd-list-item-large-height"?: string | number;
+    "--rmd-list-item-extra-large-height"?: string | number;
+    "--rmd-list-item-multiline-height"?: string | number;
+    "--rmd-list-item-media-size"?: string | number;
+    "--rmd-list-item-media-spacing"?: string | number;
+    "--rmd-list-item-text-multiline-height"?: string | number;
+    "--rmd-list-item-multiline-clamp"?: string | number;
+  }
+}
+
+/** @since 6.3.1 */
+export interface BaseListItemClassNameOptions {
   className?: string;
+
   /**
    * @see {@link ListItemHeight}
    * @defaultValue `"auto"`
@@ -25,7 +43,10 @@ export interface ListItemClassNameOptions {
   multiline?: boolean;
 
   /**
+   * Note: This does nothing if the `disabled` prop is not enabled.
+   *
    * @defaultValue `false`
+   * @since 2.4.3
    */
   disabled?: boolean;
 
@@ -36,7 +57,10 @@ export interface ListItemClassNameOptions {
    * @since 2.4.3
    */
   disabledOpacity?: boolean;
+}
 
+/** @since 6.0.0 */
+export interface ListItemClassNameOptions extends BaseListItemClassNameOptions {
   /**
    * Set this to `false` if the list item should not gain the interaction
    * states: hover, focus, press, etc. This is kind of like being disabled

package/src/list/listStyles.ts

@@ -4,14 +4,30 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-list");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-list-padding-h"?: string | number;
+    "--rmd-list-padding-v"?: string | number;
+  }
+}
+
 /** @since 6.0.0 */
 export interface ListClassNameOptions {
   className?: string;
 
-  /** @defaultValue `false` */
+  /**
+   * Set to `true` to decrease the amount of padding and font size within the
+   * list.
+   *
+   * @defaultValue `false`
+   */
   dense?: boolean;
 
-  /** @defaultValue `false` */
+  /**
+   * Set this to `true` to render horizontally instead of vertically.
+   *
+   * @defaultValue `false`
+   */
   horizontal?: boolean;
 }
 

package/src/menu/Menu.tsx

@@ -40,6 +40,8 @@ import { MenuWidget } from "./MenuWidget.js";
 import { useMenuBarContext } from "./useMenuBarProvider.js";
 import { getDefaultAnchor } from "./utils.js";
 
+// NOTE: The augmentation is in this file since no types are imported from the
+// `styles` file at this time
 declare module "react" {
   interface CSSProperties {
     "--rmd-menu-background-color"?: string;
@@ -418,6 +420,7 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
             break;
         }
       },
+      onEnter,
       onEntering(appearing) {
         onEntering(appearing);
         entered.current = true;
@@ -428,11 +431,12 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
         cancelUnmountFocus.current = false;
         animatedOnceRef.current = true;
       },
+      onExit,
+      onExiting,
       onExited() {
         onExited();
         entered.current = false;
       },
-      onExiting,
       disableTransition,
       isFocusTypeDisabled(type) {
         if (role === "listbox") {
@@ -459,7 +463,6 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
     const { ref, style, callbacks, updateStyle } = useFixedPositioning({
       ...transitionOptions,
       disabled: disableFixedPositioning,
-      onEnter,
       style: isSheet ? propStyle : menuStyle,
       fixedTo,
       anchor: getDefaultAnchor({
@@ -489,7 +492,6 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
       },
     });
     const { rendered, disablePortal, elementProps } = useScaleTransition({
-      nodeRef: ref,
       className: cnb(!isSheet && menuClassName, className),
       transitionIn: visible,
       vertical: !horizontal,
@@ -499,10 +501,12 @@ export const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(
       appear,
       enter,
       exit,
-      onExit,
-      onExiting: transitionOptions.onExiting,
       exitedHidden: true,
+      // merge the transition callbacks
+      ...transitionOptions,
       ...callbacks,
+      // but prefer the latest defined ref
+      nodeRef: ref,
     });
     useScrollLock(visible && preventScroll);
 

package/src/navigation/NavItem.tsx

@@ -1,11 +1,15 @@
 import { type LiHTMLAttributes, type ReactNode, forwardRef } from "react";
 
-import { navItem } from "./navItemStyles.js";
+import { type NavItemClassNameOptions, navItem } from "./navItemStyles.js";
 
 /**
  * @since 6.0.0
+ * @since 6.3.1 Extends NavItemClassNameOptions to allow for CSS properties
+ * augmentation.
  */
-export interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {
+export interface NavItemProps
+  extends LiHTMLAttributes<HTMLLIElement>,
+    NavItemClassNameOptions {
   children: ReactNode;
 }
 

package/src/navigation/navItemStyles.ts

@@ -6,6 +6,14 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-nav-item");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-navigation-border-radius"?: string | number;
+    "--rmd-navigation-horizontal-padding"?: string | number;
+    "--rmd-navigation-padding-incrementor"?: string | number;
+  }
+}
+
 /**
  * @since 6.0.0
  */

package/src/overlay/Overlay.tsx

@@ -3,7 +3,6 @@
 import { type HTMLAttributes, forwardRef } from "react";
 
 import { useSsr } from "../SsrProvider.js";
-import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
 import { Portal } from "../portal/Portal.js";
 import {
   type CSSTransitionComponentProps,
@@ -11,44 +10,23 @@ import {
 } from "../transition/types.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
 import {
+  type BaseOverlayClassNameOptions,
   DEFAULT_OVERLAY_CLASSNAMES,
   DEFAULT_OVERLAY_TIMEOUT,
   overlay,
 } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-overlay-background-color"?: string;
-    "--rmd-overlay-z-index"?: number;
-  }
-}
-
 /**
  * @since 6.0.0 Added `align` and `justify` props.
  * @since 6.0.0 Renamed `hidden` to `noOpacity`.
+ * @since 6.3.1 Extends BaseOverlayClassNameOptions for CSSProperties module
+ * augmentation.
  */
 export interface OverlayProps
   extends HTMLAttributes<HTMLSpanElement>,
+    BaseOverlayClassNameOptions,
     CSSTransitionComponentProps,
     TransitionActions {
-  /**
-   * @defaultValue `"center"`
-   * @since 6.0.0
-   */
-  align?: BoxAlignItems;
-
-  /**
-   * @defaultValue `"center"`
-   * @since 6.0.0
-   */
-  justify?: BoxJustifyContent;
-
-  /**
-   * Set this to `true` for when the overlay should be visible. Toggling this
-   * value will trigger the enter/exit animation.
-   */
-  visible: boolean;
-
   /**
    * Set this to `true` if the overlay should be rendered with an `opacity: 0`
    * and disabling the animation. This is useful if you'd like a "close on

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.