@react-md/core 1.0.0-next.6 → 1.0.0-next.8

package/src/form/menuItemInputToggleStyles.ts

@@ -0,0 +1,78 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+
+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
+ */
+export interface MenuItemInputToggleTrackClassNameOptions {
+  className?: string;
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export function menuItemInputToggleTrack(
+  options: MenuItemInputToggleTrackClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb(styles("track"), className);
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MenuItemInputToggleBallClassNameOptions {
+  className?: string;
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export function menuItemInputToggleBall(
+  options: MenuItemInputToggleBallClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb(styles("ball"), className);
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface MenuItemInputToggleIconClassNameOptions {
+  className?: string;
+}
+
+/**
+ * @remarks \@since 6.0.0
+ */
+export function menuItemInputToggleIcon(
+  options: MenuItemInputToggleIconClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb(styles("icon"), className);
+}

package/src/icon/_icon.scss

@@ -58,6 +58,9 @@ $variables: (
   symbol-optical-size
 );
 
+// shouldn't really use react-md without icons though...
+$_disable-icons: $disable-font and $disable-svg and $disable-symbol;
+
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "icon");
   @if $fallback {
@@ -78,13 +81,13 @@ $variables: (
 }
 
 @mixin use-light-theme {
-  @if not $disable-font or not $disable-svg {
+  @if not $_disable-icons {
     @include set-var(color, $light-theme-color);
   }
 }
 
 @mixin use-dark-theme {
-  @if not $disable-font or not $disable-svg {
+  @if not $_disable-icons {
     @include set-var(color, $dark-theme-color);
   }
 }
@@ -96,7 +99,7 @@ $variables: (
 }
 
 @mixin variables {
-  @if not $disable-font or not $disable-svg or not $disable-symbol {
+  @if not $_disable-icons {
     @include set-var(color, $color);
     @include set-var(size, $size);
     @include set-var(spacing, $spacing);
@@ -116,8 +119,7 @@ $variables: (
 }
 
 @mixin styles($disable-layer: false) {
-  // shouldn't really use react-md without icons though...
-  @if not $disable-font or not $disable-svg or not $disable-symbol {
+  @if not $_disable-icons {
     @include utils.optional-layer(icon, $disable-layer) {
       @include theme.default-system-theme {
         @include use-dark-theme;

package/src/index.ts

@@ -86,6 +86,7 @@ export * from "./form/TextFieldContainerStyles.js";
 export * from "./form/fileUtils.js";
 export * from "./form/formConfig.js";
 export * from "./form/formMessageStyles.js";
+export * from "./form/menuItemInputToggleStyles.js";
 export * from "./form/nativeSelectStyles.js";
 export * from "./form/optionStyles.js";
 export * from "./form/passwordStyles.js";

package/src/interaction/_interaction.scss

@@ -5,19 +5,20 @@
 @use "../theme/theme";
 @use "../transition/transition";
 
-/// ripple | press | both | null
+/// ripple | press | both | none
 $mode: ripple !default;
+$disable-surface: false !default;
 $disable-outline-offset: false !default;
 $disable-focus-background: false !default;
 $disable-ripple-inset-var: false !default;
 $disable-ripple-border-radius-var: false !default;
-$disable-surface-inset-var: false !default;
-$disable-surface-border-radius-var: false !default;
+$disable-surface-inset-var: $disable-surface !default;
+$disable-surface-border-radius-var: $disable-surface !default;
 
 $_disable-ripple: not
   list.index(
     (ripple, both),
-    utils.validate((ripple, press, both, null), $mode, "interaction mode")
+    utils.validate((ripple, press, both, none), $mode, "interaction mode")
   );
 
 $pressed-class-name: "rmd-pressed";
@@ -189,22 +190,25 @@ $variables: (
 }
 
 @mixin use-light-surface {
-  @include set-var(
-    hover-background-color,
-    $light-surface-hover-background-color
-  );
-  @include set-var(
-    focus-background-color,
-    $light-surface-focus-background-color
-  );
-  @include set-var(
-    press-background-color,
-    $light-surface-press-background-color
-  );
-  @include set-var(
-    selected-background-color,
-    $light-surface-selected-background-color
-  );
+  @if not $disable-surface {
+    @include set-var(
+      hover-background-color,
+      $light-surface-hover-background-color
+    );
+    @include set-var(
+      focus-background-color,
+      $light-surface-focus-background-color
+    );
+    @include set-var(
+      press-background-color,
+      $light-surface-press-background-color
+    );
+    @include set-var(
+      selected-background-color,
+      $light-surface-selected-background-color
+    );
+  }
+
   @if not $_disable-ripple {
     @include set-var(
       ripple-background-color,
@@ -214,22 +218,25 @@ $variables: (
 }
 
 @mixin use-dark-surface {
-  @include set-var(
-    hover-background-color,
-    $dark-surface-hover-background-color
-  );
-  @include set-var(
-    focus-background-color,
-    $dark-surface-focus-background-color
-  );
-  @include set-var(
-    press-background-color,
-    $dark-surface-press-background-color
-  );
-  @include set-var(
-    selected-background-color,
-    $dark-surface-selected-background-color
-  );
+  @if not $disable-surface {
+    @include set-var(
+      hover-background-color,
+      $dark-surface-hover-background-color
+    );
+    @include set-var(
+      focus-background-color,
+      $dark-surface-focus-background-color
+    );
+    @include set-var(
+      press-background-color,
+      $dark-surface-press-background-color
+    );
+    @include set-var(
+      selected-background-color,
+      $dark-surface-selected-background-color
+    );
+  }
+
   @if not $_disable-ripple {
     @include set-var(
       ripple-background-color,
@@ -360,10 +367,13 @@ $variables: (
 @mixin variables {
   @include set-var(focus-color, $focus-color);
   @include set-var(focus-width, $focus-width);
-  @include set-var(hover-background-color, $hover-background-color);
-  @include set-var(focus-background-color, $focus-background-color);
-  @include set-var(press-background-color, $press-background-color);
-  @include set-var(selected-background-color, $selected-background-color);
+
+  @if not $disable-surface {
+    @include set-var(hover-background-color, $hover-background-color);
+    @include set-var(focus-background-color, $focus-background-color);
+    @include set-var(press-background-color, $press-background-color);
+    @include set-var(selected-background-color, $selected-background-color);
+  }
 
   @if not $_disable-ripple {
     @include set-var(ripple-background-color, $ripple-background-color);
@@ -415,10 +425,12 @@ $variables: (
       }
     }
 
-    .rmd-interaction-surface {
-      @include surface(
-        $disabled-selector: "&:disabled,&[aria-disabled='true']"
-      );
+    @if not $disable-surface {
+      .rmd-interaction-surface {
+        @include surface(
+          $disabled-selector: "&:disabled,&[aria-disabled='true']"
+        );
+      }
     }
   }
 }

package/src/list/types.ts

@@ -138,7 +138,14 @@ export interface ListItemChildrenAddonProps {
   disableRightAddonCenteredMedia?: boolean;
 }
 
-export interface ListItemChildrenProps extends ListItemChildrenAddonProps {
+/**
+ * Note: This interface was added since there are components that replace the
+ * {@link ListItemChildrenAddonProps} with renamed versions but should still
+ * support everything for rendering text.
+ *
+ * @remarks \@since 6.0.0
+ */
+export interface ListItemChildrenTextProps {
   /**
    * The main content to display. When the `textChildren` prop is enabled and
    * there is child content, it will be treated as primary text and update the
@@ -214,3 +221,7 @@ export interface ListItemChildrenProps extends ListItemChildrenAddonProps {
    */
   multiline?: boolean;
 }
+
+export interface ListItemChildrenProps
+  extends ListItemChildrenTextProps,
+    ListItemChildrenAddonProps {}

package/src/menu/_menu.scss

@@ -44,6 +44,7 @@ $variables: (background-color, color, min-width, spacing);
   .rmd-menu {
     outline: none;
     overflow: auto;
+    overflow-wrap: anywhere;
 
     &--elevated {
       @include box-shadows.box-shadow(

package/src/theme/_theme.scss

@@ -37,6 +37,25 @@ $disable-dark-elevation: $color-scheme == light !default;
 $disable-default-system-theme: false !default;
 $disable-default-root-theme: false !default;
 
+// this should only be used if your application does not use menu, dialog,
+// sheet, card, expansion-panel, select, app-bar (theme="surface")
+$disable-surface-color: false !default;
+$disable-primary-color: false !default;
+$disable-on-primary-color: $disable-primary-color !default;
+$disable-secondary-color: false !default;
+$disable-on-secondary-color: $disable-secondary-color !default;
+$disable-warning-color: false !default;
+$disable-on-warning-color: $disable-warning-color !default;
+$disable-error-color: false !default;
+$disable-on-error-color: $disable-error-color !default;
+$disable-success-color: false !default;
+$disable-on-success-color: $disable-success-color !default;
+$disable-outline-grey-color: false !default;
+$disable-text-primary-color: false !default;
+$disable-text-secondary-color: false !default;
+$disable-text-hint-color: false !default;
+$disable-text-disabled-color: false !default;
+
 $primary-color: colors.$blue-500 !default;
 $on-primary-color: a11y.contrast-color($primary-color) !default;
 $secondary-color: colors.$orange-a-400 !default;
@@ -152,7 +171,79 @@ $theme-variables: (
   outline-grey-color
 );
 
+@function _is-var-disabled($name) {
+  @if $name == surface-color {
+    @return $disable-surface-color;
+  }
+
+  @if $name == primary-color {
+    @return $disable-primary-color;
+  }
+
+  @if $name == on-primary-color {
+    @return $disable-on-primary-color;
+  }
+
+  @if $name == secondary-color {
+    @return $disable-secondary-color;
+  }
+
+  @if $name == on-secondary-color {
+    @return $disable-on-secondary-color;
+  }
+
+  @if $name == warning-color {
+    @return $disable-warning-color;
+  }
+
+  @if $name == on-warning-color {
+    @return $disable-on-warning-color;
+  }
+
+  @if $name == error-color {
+    @return $disable-error-color;
+  }
+
+  @if $name == on-error-color {
+    @return $disable-on-error-color;
+  }
+
+  @if $name == success-color {
+    @return $disable-success-color;
+  }
+
+  @if $name == on-success-color {
+    @return $disable-on-success-color;
+  }
+
+  @if $name == text-primary-color {
+    @return $disable-text-primary-color;
+  }
+
+  @if $name == text-secondary-color {
+    @return $disable-text-secondary-color;
+  }
+
+  @if $name == text-hint-color {
+    @return $disable-text-hint-color;
+  }
+
+  @if $name == text-disabled-color {
+    @return $disable-text-disabled-color;
+  }
+
+  @if $name == outline-grey-color {
+    @return $disable-outline-grey-color;
+  }
+
+  @return false;
+}
+
 @function theme-get-var($name, $fallback: null) {
+  @if _is-var-disabled($name) {
+    @return $fallback;
+  }
+
   $var: utils.get-var-name($theme-variables, $name, "theme");
 
   @if $fallback {
@@ -175,6 +266,10 @@ $theme-variables: (
 }
 
 @mixin theme-set-var($name, $value-or-theme-name) {
+  @if _is-var-disabled($name) {
+    @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
+  }
+
   $var: utils.get-var-name($theme-variables, $name, "theme");
   $value: $value-or-theme-name;
   @if list.index($theme-variables, $value-or-theme-name) {
@@ -186,6 +281,10 @@ $theme-variables: (
 }
 
 @mixin theme-use-var($property, $name: $property, $fallback: null) {
+  @if _is-var-disabled($name) {
+    @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
+  }
+
   #{$property}: theme-get-var($name, $fallback);
 }
 
@@ -203,16 +302,27 @@ $theme-variables: (
 
 @mixin use-light-theme-colors {
   @include theme-set-var(background-color, $light-theme-background-color);
-  @if $disable-dark-elevation {
+  @if $disable-dark-elevation and not $disable-surface-color {
     @include theme-set-var(surface-color, $light-theme-surface-color);
   }
-  @include theme-set-var(text-primary-color, $light-theme-text-primary-color);
-  @include theme-set-var(
-    text-secondary-color,
-    $light-theme-text-secondary-color
-  );
-  @include theme-set-var(text-hint-color, $light-theme-text-hint-color);
-  @include theme-set-var(text-disabled-color, $light-theme-text-disabled-color);
+  @if not $disable-text-primary-color {
+    @include theme-set-var(text-primary-color, $light-theme-text-primary-color);
+  }
+  @if not $disable-text-secondary-color {
+    @include theme-set-var(
+      text-secondary-color,
+      $light-theme-text-secondary-color
+    );
+  }
+  @if not $disable-text-hint-color {
+    @include theme-set-var(text-hint-color, $light-theme-text-hint-color);
+  }
+  @if not $disable-text-disabled-color {
+    @include theme-set-var(
+      text-disabled-color,
+      $light-theme-text-disabled-color
+    );
+  }
 
   @if not $disable-dark-elevation and $color-scheme != light {
     @include use-light-theme-elevation-colors;
@@ -221,16 +331,27 @@ $theme-variables: (
 
 @mixin use-dark-theme-colors {
   @include theme-set-var(background-color, $dark-theme-background-color);
-  @if $disable-dark-elevation {
+  @if $disable-dark-elevation and not $disable-surface-color {
     @include theme-set-var(surface-color, $dark-theme-surface-color);
   }
-  @include theme-set-var(text-primary-color, $dark-theme-text-primary-color);
-  @include theme-set-var(
-    text-secondary-color,
-    $dark-theme-text-secondary-color
-  );
-  @include theme-set-var(text-hint-color, $dark-theme-text-hint-color);
-  @include theme-set-var(text-disabled-color, $dark-theme-text-disabled-color);
+  @if not $disable-text-primary-color {
+    @include theme-set-var(text-primary-color, $dark-theme-text-primary-color);
+  }
+  @if not $disable-text-secondary-color {
+    @include theme-set-var(
+      text-secondary-color,
+      $dark-theme-text-secondary-color
+    );
+  }
+  @if not $disable-text-hint-color {
+    @include theme-set-var(text-hint-color, $dark-theme-text-hint-color);
+  }
+  @if not $disable-text-disabled-color {
+    @include theme-set-var(
+      text-disabled-color,
+      $dark-theme-text-disabled-color
+    );
+  }
 
   @if not $disable-dark-elevation {
     @include use-dark-theme-elevation-colors;
@@ -239,24 +360,52 @@ $theme-variables: (
 
 @mixin theme-variables {
   @include theme-set-var(background-color, $background-color);
-  @if $disable-dark-elevation {
+  @if $disable-dark-elevation and not $disable-surface-color {
     @include theme-set-var(surface-color, $surface-color);
   }
 
-  @include theme-set-var(primary-color, $primary-color);
-  @include theme-set-var(on-primary-color, $on-primary-color);
-  @include theme-set-var(secondary-color, $secondary-color);
-  @include theme-set-var(on-secondary-color, $on-secondary-color);
-  @include theme-set-var(warning-color, $warning-color);
-  @include theme-set-var(on-warning-color, $on-warning-color);
-  @include theme-set-var(error-color, $error-color);
-  @include theme-set-var(on-error-color, $on-error-color);
-  @include theme-set-var(success-color, $success-color);
-  @include theme-set-var(on-success-color, $on-success-color);
-  @include theme-set-var(text-primary-color, $text-primary-color);
-  @include theme-set-var(text-secondary-color, $text-secondary-color);
-  @include theme-set-var(text-hint-color, $text-hint-color);
-  @include theme-set-var(text-disabled-color, $text-disabled-color);
+  @if not $disable-primary-color {
+    @include theme-set-var(primary-color, $primary-color);
+  }
+  @if not $disable-on-primary-color {
+    @include theme-set-var(on-primary-color, $on-primary-color);
+  }
+  @if not $disable-secondary-color {
+    @include theme-set-var(secondary-color, $secondary-color);
+  }
+  @if not $disable-on-secondary-color {
+    @include theme-set-var(on-secondary-color, $on-secondary-color);
+  }
+  @if not $disable-warning-color {
+    @include theme-set-var(warning-color, $warning-color);
+  }
+  @if not $disable-on-warning-color {
+    @include theme-set-var(on-warning-color, $on-warning-color);
+  }
+  @if not $disable-error-color {
+    @include theme-set-var(error-color, $error-color);
+  }
+  @if not $disable-on-error-color {
+    @include theme-set-var(on-error-color, $on-error-color);
+  }
+  @if not $disable-success-color {
+    @include theme-set-var(success-color, $success-color);
+  }
+  @if not $disable-on-success-color {
+    @include theme-set-var(on-success-color, $on-success-color);
+  }
+  @if not $disable-text-primary-color {
+    @include theme-set-var(text-primary-color, $text-primary-color);
+  }
+  @if not $disable-text-secondary-color {
+    @include theme-set-var(text-secondary-color, $text-secondary-color);
+  }
+  @if not $disable-text-hint-color {
+    @include theme-set-var(text-hint-color, $text-hint-color);
+  }
+  @if not $disable-text-disabled-color {
+    @include theme-set-var(text-disabled-color, $text-disabled-color);
+  }
 
   @if not $disable-dark-elevation {
     @if $color-scheme == dark {
@@ -268,7 +417,9 @@ $theme-variables: (
 
   @include theme-set-var(outline-width, $outline-width);
   @include theme-set-var(outline-color, $outline-color);
-  @include theme-set-var(outline-grey-color, $outline-grey-color);
+  @if not $disable-outline-grey-color {
+    @include theme-set-var(outline-grey-color, $outline-grey-color);
+  }
 }
 
 @mixin create-surface($z-value, $disable-colors: $disable-dark-elevation) {
@@ -278,7 +429,9 @@ $theme-variables: (
   @if not $disable-colors {
     @include theme-set-var(background-color, theme-get-var(surface-color));
     @include theme-use-var(background-color);
-    @include theme-use-var(color, text-primary-color);
+    @if not $disable-text-primary-color {
+      @include theme-use-var(color, text-primary-color);
+    }
   }
 }
 
@@ -351,7 +504,12 @@ $theme-variables: (
 }
 
 @mixin default-system-theme {
-  @if not $disable-default-system-theme and $color-scheme == system {
+  @if not
+    $disable-default-system-theme and
+    $disable-default-root-theme and
+    $color-scheme ==
+    system
+  {
     @media (prefers-color-scheme: dark) {
       :root {
         @content;

package/src/typography/SrOnly.tsx

@@ -1,13 +1,11 @@
-import { forwardRef } from "react";
+import { forwardRef, type ElementType, type HTMLAttributes } from "react";
+import { cssUtils } from "../cssUtils.js";
 import {
-  Typography,
   type CustomTypographyComponent,
   type TypographyHTMLElement,
-  type TypographyProps,
 } from "./Typography.js";
-import { cssUtils } from "../cssUtils.js";
 
-export interface SrOnlyProps extends TypographyProps {
+export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
   /** @defaultValue `"span"` */
   as?: CustomTypographyComponent;
 
@@ -54,7 +52,7 @@ export interface SrOnlyProps extends TypographyProps {
 export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
   function SrOnly(props, ref) {
     const {
-      as = "span",
+      as: AsComponent = "span",
       className,
       phoneOnly,
       focusable,
@@ -63,10 +61,12 @@ export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
       ...remaining
     } = props;
 
+    // do some type-casting so ref works
+    const Component = AsComponent as ElementType;
+
     return (
-      <Typography
+      <Component
         {...remaining}
-        as={as}
         ref={ref}
         tabIndex={tabIndex ?? (focusable ? 0 : undefined)}
         className={cssUtils({
@@ -75,7 +75,7 @@ export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
         })}
       >
         {children}
-      </Typography>
+      </Component>
     );
   }
 );