@react-md/core 1.0.0-next.7 → 1.0.0-next.9

package/src/_core.scss

@@ -13,6 +13,7 @@
 @forward "icon/icon" as icon-*;
 @forward "divider/divider" as divider-*;
 @forward "progress/progress" as progress-*;
+@forward "overlay/overlay" as overlay-*;
 @forward "button/button" as button-*;
 @forward "badge/badge" as badge-*;
 @forward "tabs/tabs" as tabs-*;
@@ -21,7 +22,6 @@
 @forward "table/table" as table-*;
 @forward "app-bar/app-bar" as app-bar-*;
 @forward "responsive-item/responsive-item" as responsive-item-*;
-@forward "overlay/overlay" as overlay-*;
 @forward "card/card" as card-*;
 @forward "link/link" as link-*;
 @forward "list/list" as list-*;
@@ -361,53 +361,59 @@ $_layer-order: (
   @include typography.typography-variables;
 }
 
-@mixin styles {
-  @include css-reset;
-
-  @layer #{$_layer-order};
-  @include css-utils;
-
-  @include app-bar.styles;
-  @include avatar.styles;
-  @include badge.styles;
-  @include box.styles;
-  @include button.styles;
-  @include card.styles;
-  @include chip.styles;
-  @include dialog.styles;
-  @include divider.styles;
-  @include draggable.styles;
-  @include expansion-panel.styles;
-  @include form.styles;
-  @include icon.styles;
-  @include interaction.styles;
-  @include layout.styles;
-  @include link.styles;
-  @include list.styles;
-  @include menu.styles;
-  @include overlay.styles;
-  @include progress.styles;
-  @include responsive-item.styles;
-  @include segmented-button.styles;
-  @include sheet.styles;
-  @include snackbar.styles;
-  @include table.styles;
-  @include tabs.styles;
-  @include tooltip.styles;
-  @include transition.transition-styles;
-  @include tree.styles;
-  @include typography.typography-styles;
-  @include window-splitter.styles;
+@mixin styles(
+  $disable-layer: false,
+  $disable-layer-order: $disable-layer,
+  $disable-reset: false,
+  $disable-css-utils: false
+) {
+  @if not $disable-layer-order {
+    @layer #{$_layer-order};
+  }
+  @if not $disable-reset {
+    @include css-reset;
+  }
+  @if not $disable-css-utils {
+    @include css-utils($disable-layer);
+  }
+
+  @include app-bar.styles($disable-layer);
+  @include avatar.styles($disable-layer);
+  @include badge.styles($disable-layer);
+  @include box.styles($disable-layer);
+  @include button.styles($disable-layer);
+  @include card.styles($disable-layer);
+  @include chip.styles($disable-layer);
+  @include dialog.styles($disable-layer);
+  @include divider.styles($disable-layer);
+  @include draggable.styles($disable-layer);
+  @include expansion-panel.styles($disable-layer);
+  @include form.styles($disable-layer);
+  @include icon.styles($disable-layer);
+  @include interaction.styles($disable-layer);
+  @include layout.styles($disable-layer);
+  @include link.styles($disable-layer);
+  @include list.styles($disable-layer);
+  @include menu.styles($disable-layer);
+  @include overlay.styles($disable-layer);
+  @include progress.styles($disable-layer);
+  @include responsive-item.styles($disable-layer);
+  @include segmented-button.styles($disable-layer);
+  @include sheet.styles($disable-layer);
+  @include snackbar.styles($disable-layer);
+  @include table.styles($disable-layer);
+  @include tabs.styles($disable-layer);
+  @include tooltip.styles($disable-layer);
+  @include transition.transition-styles($disable-layer);
+  @include tree.styles($disable-layer);
+  @include typography.typography-styles($disable-layer);
+  @include window-splitter.styles($disable-layer);
 
   @if not theme.$disable-default-root-theme {
     :root {
       @include variables;
 
-      @if not
-        theme.$disable-default-system-theme and
-        theme.$color-scheme ==
-        system
-      {
+      @if theme.$color-scheme == system {
         @media (prefers-color-scheme: dark) {
           @include use-dark-theme;
         }

package/src/avatar/Avatar.tsx

@@ -1,4 +1,9 @@
-import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from "react";
+import {
+  forwardRef,
+  type HTMLAttributes,
+  type ImgHTMLAttributes,
+  type ReactNode,
+} from "react";
 import { type PropsWithRef } from "../types.js";
 import { avatar, avatarImage, type AvatarClassNameOptions } from "./styles.js";
 
@@ -15,9 +20,21 @@ declare module "react" {
 
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
 
+/**
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
+ */
 export interface AvatarProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
     AvatarClassNameOptions {
+  /**
+   * Since avatars are normally presentational data, they are hidden from screen
+   * readers by default.
+   *
+   * @defaultValue `true`
+   */
+  "aria-hidden"?: HTMLAttributes<HTMLSpanElement>["aria-hidden"];
+
   /**
    * This should be an image `src` attribute to create an avatar from. When this
    * prop is defined, you should not add any children to the avatar as the
@@ -80,10 +97,14 @@ export interface AvatarProps
  *   return <Avatar src="/path-to-img.png" />;
  * }
  * ```
+ *
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
  */
 export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
   function Avatar(props, ref) {
     const {
+      "aria-hidden": ariaHidden = true,
       className,
       children,
       src,
@@ -96,7 +117,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
       ...remaining
     } = props;
 
-    let img;
+    let img: ReactNode;
     if (src || imgProps) {
       img = (
         <img
@@ -112,8 +133,8 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
     return (
       <span
         {...remaining}
+        aria-hidden={ariaHidden}
         ref={ref}
-        role="presentation"
         className={avatar({
           size,
           color,

package/src/avatar/__tests__/Avatar.tsx

@@ -40,7 +40,7 @@ describe("Avatar", () => {
     const { rerender } = render(<Avatar {...props} />);
 
     const avatar = screen.getByTestId("avatar");
-    const img = screen.getByRole("img");
+    const img = screen.getByRole("img", { hidden: true });
     expect(img).toHaveAttribute("src", props.src);
     expect(img).toHaveAttribute("alt", "");
     expect(avatar).toMatchSnapshot();

package/src/avatar/__tests__/__snapshots__/Avatar.tsx.snap

@@ -2,35 +2,35 @@
 
 exports[`Avatar should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar"
   data-testid="avatar"
-  role="presentation"
 />
 `;
 
 exports[`Avatar should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar custom-class-name"
   data-testid="avatar"
-  role="presentation"
   style="color: red;"
 />
 `;
 
 exports[`Avatar should apply the correct styling, HTML attributes, and allow a ref 3`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar rmd-avatar--primary"
   data-testid="avatar"
-  role="presentation"
   style=""
 />
 `;
 
 exports[`Avatar should render an img if a src or imgProps are provided 1`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar"
   data-testid="avatar"
-  role="presentation"
 >
   <img
     alt=""
@@ -42,9 +42,9 @@ exports[`Avatar should render an img if a src or imgProps are provided 1`] = `
 
 exports[`Avatar should render an img if a src or imgProps are provided 2`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar"
   data-testid="avatar"
-  role="presentation"
 >
   <img
     alt=""
@@ -57,9 +57,9 @@ exports[`Avatar should render an img if a src or imgProps are provided 2`] = `
 
 exports[`Avatar should render an img if a src or imgProps are provided 3`] = `
 <span
+  aria-hidden="true"
   class="rmd-avatar"
   data-testid="avatar"
-  role="presentation"
 >
   <img
     alt=""

package/src/badge/_badge.scss

@@ -69,31 +69,35 @@ $variables: (
 }
 
 @mixin use-light-theme {
-  @if $light-theme-greyscale-background-color !=
-    $dark-theme-greyscale-background-color
-  {
-    @include set-var(
-      greyscale-background-color,
-      $light-theme-greyscale-background-color
-    );
-  }
-  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
-    @include set-var(greyscale-color, $light-theme-greyscale-color);
+  @if not $disable-everything {
+    @if $light-theme-greyscale-background-color !=
+      $dark-theme-greyscale-background-color
+    {
+      @include set-var(
+        greyscale-background-color,
+        $light-theme-greyscale-background-color
+      );
+    }
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $light-theme-greyscale-color);
+    }
   }
 }
 
 @mixin use-dark-theme {
-  @if $light-theme-greyscale-background-color !=
-    $dark-theme-greyscale-background-color
-  {
-    @include set-var(
-      greyscale-background-color,
+  @if not $disable-everything {
+    @if $light-theme-greyscale-background-color !=
       $dark-theme-greyscale-background-color
-    );
-  }
+    {
+      @include set-var(
+        greyscale-background-color,
+        $dark-theme-greyscale-background-color
+      );
+    }
 
-  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
-    @include set-var(greyscale-color, $dark-theme-greyscale-color);
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $dark-theme-greyscale-color);
+    }
   }
 }
 

package/src/button/__tests__/__snapshots__/Button.tsx.snap

@@ -25,7 +25,7 @@ exports[`Button floating action buttons should allow for responsive icon with la
     favorite
   </span>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-phone-sr-only"
+    class="rmd-phone-sr-only"
   >
     Label
   </span>

package/src/dialog/FixedDialog.tsx

@@ -59,8 +59,7 @@ export const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNamesOb
  *   Typography,
  *   useToggle,
  * } from "@react-md/core";
- * import { useRef } from "react";
- * import type { ReactElement } from "react";
+ * import { useId, useRef, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const {
@@ -68,18 +67,20 @@ export const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNamesOb
  *     disable: onRequestClose,
  *     toggled: visible,
  *   } = useToggle(false);
+ *   const titleId = useId();
  *   const fixedTo = useRef<HTMLButtonElement>(null)
  *
  *   return (
  *     <>
  *       <Button ref={fixedTo} onClick={toggle}>Toggle</Button>
  *       <FixedDialog
- *         aria-labelledby="dialog-title"
+ *         aria-labelledby={titleId}
+ *         fixedTo={fixedTo}
  *         visible={visible}
  *         onRequestClose={onRequestClose}
  *       >
  *         <DialogHeader>
- *           <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
+ *           <DialogTitle id={titleId}>Simple Dialog</DialogTitle>
  *         </DialogHeader>
  *         <DialogContent>
  *           <Typography margin="none">This is some text in a dialog.</Typography>

package/src/form/MenuItemInputToggle.tsx

@@ -11,11 +11,11 @@ import { ListItem } from "../list/ListItem.js";
 import {
   type ListItemAddonPosition,
   type ListItemAddonType,
+  type ListItemChildrenTextProps,
   type ListItemHeight,
 } from "../list/types.js";
 import { type PropsWithRef } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
-import { bem } from "../utils/bem.js";
 import {
   type IndeterminateCheckboxProps,
   type InputToggleIconProps,
@@ -23,31 +23,16 @@ import {
 import { InputToggleIcon } from "./InputToggleIcon.js";
 import { SwitchTrack } from "./SwitchTrack.js";
 import { type InputToggleSize } from "./inputToggleStyles.js";
+import {
+  menuItemInputToggle,
+  menuItemInputToggleBall,
+  menuItemInputToggleIcon,
+  menuItemInputToggleTrack,
+} from "./menuItemInputToggleStyles.js";
 
 const noop = (): void => {
   // do nothing
 };
-const styles = bem("rmd-menu-item-input-toggle");
-
-/** @remarks \@since 6.0.0 */
-export interface MenuItemInputToggleClassNameOptions {
-  className?: string;
-  type: "radio" | "checkbox" | "switch";
-}
-
-/**
- * @remarks \@since 6.0.0
- */
-export function menuItemInputToggle(
-  options: MenuItemInputToggleClassNameOptions
-): string {
-  const { className, type } = options;
-  return cnb(
-    `rmd-${type}-menu-item`,
-    styles({ switch: type === "switch" }),
-    className
-  );
-}
 
 /**
  * @remarks \@since 6.0.0
@@ -60,7 +45,8 @@ export type MenuItemInputToggleCheckedCallback = (
 /** @remarks \@since 2.8.0 */
 export interface BaseMenuItemInputToggleProps
   extends HTMLAttributes<HTMLLIElement>,
-    InputToggleIconProps {
+    InputToggleIconProps,
+    ListItemChildrenTextProps {
   checked: boolean;
   onCheckedChange: MenuItemInputToggleCheckedCallback;
 
@@ -95,12 +81,6 @@ export interface BaseMenuItemInputToggleProps
   /** @defaultValue `"auto"` */
   height?: ListItemHeight;
 
-  /** @defaultValue `false` */
-  multiline?: boolean;
-
-  /** @defaultValue `false` */
-  disableTextChildren?: boolean;
-
   /** @defaultValue `false` */
   iconAfter?: boolean;
 
@@ -199,41 +179,43 @@ export const MenuItemInputToggle = forwardRef<
   const id = useEnsuredId(propId, "menu-item");
 
   let icon = propIcon;
-  if (typeof propIcon === "undefined") {
-    if (type === "switch") {
-      icon = (
-        <SwitchTrack
-          style={trackStyle}
-          {...trackProps}
-          className={cnb(
-            styles("track"),
-            trackClassName,
-            trackProps?.className
-          )}
-          active={checked}
-          ballProps={ballProps}
-          ballStyle={ballStyle}
-          ballClassName={cnb(styles("ball"), ballClassName)}
-        />
-      );
-    } else {
-      icon = (
-        <InputToggleIcon
-          style={iconStyle}
-          disableEm
-          {...iconProps}
-          className={cnb(styles("icon"), iconClassName, iconProps?.className)}
-          size={size}
-          type={type}
-          checked={checked}
-          disabled={disabled}
-          icon={propIcon}
-          checkedIcon={checkedIcon}
-          indeterminate={indeterminate}
-          indeterminateIcon={indeterminateIcon}
-        />
-      );
-    }
+  if (type === "switch") {
+    icon = (
+      <SwitchTrack
+        style={trackStyle}
+        {...trackProps}
+        className={cnb(
+          menuItemInputToggleTrack(),
+          trackClassName,
+          trackProps?.className
+        )}
+        active={checked}
+        ballProps={ballProps}
+        ballStyle={ballStyle}
+        ballClassName={cnb(menuItemInputToggleBall(), ballClassName)}
+      />
+    );
+  } else {
+    icon = (
+      <InputToggleIcon
+        style={iconStyle}
+        disableEm
+        {...iconProps}
+        className={cnb(
+          menuItemInputToggleIcon(),
+          iconClassName,
+          iconProps?.className
+        )}
+        size={size}
+        type={type}
+        checked={checked}
+        disabled={disabled}
+        icon={propIcon}
+        checkedIcon={checkedIcon}
+        indeterminate={indeterminate}
+        indeterminateIcon={indeterminateIcon}
+      />
+    );
   }
 
   let leftAddon: ReactNode;

package/src/form/NativeSelect.tsx

@@ -15,12 +15,15 @@ import { getFormConfig } from "./formConfig.js";
 import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
 import {
   type FormFieldOptions,
-  type UserAgentAutoCompleteProps,
+  type UserAgentAutocompleteProps,
 } from "./types.js";
 
+/**
+ * @remarks \@since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
+ */
 export interface NativeSelectProps
-  extends SelectHTMLAttributes<HTMLSelectElement>,
-    UserAgentAutoCompleteProps,
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">,
+    UserAgentAutocompleteProps,
     FormFieldOptions {
   /**
    * A custom dropdown icon to use instead of the browser's default select

package/src/form/Option.tsx

@@ -108,7 +108,7 @@ export const Option = forwardRef<HTMLLIElement, OptionProps>(
       className,
       selectedIcon: propSelectedIcon,
       unselectedIcon: propUnselectedIcon,
-      selectedIconAfter = false,
+      selectedIconAfter: propSelectedIconAfter,
       textIconSpacingProps,
       leftAddon: propLeftAddon,
       leftAddonType,
@@ -123,7 +123,13 @@ export const Option = forwardRef<HTMLLIElement, OptionProps>(
     } = props;
 
     const id = useEnsuredId(propId, "option");
-    const { inputRef, currentValue, disableSelectedIcon } = useListboxContext();
+    const {
+      inputRef,
+      currentValue,
+      disableSelectedIcon,
+      selectedIconAfter: contextSelectedIconAfter,
+    } = useListboxContext();
+    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;
     const selected = value === currentValue;
     const selectedIcon = getIcon(
       "selected",