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

package/src/form/_form.scss

@@ -271,6 +271,7 @@ $variables: (
   focus-color,
   addon-top,
   addon-margin-top,
+  addon-left-offset,
   label-floating-top,
   label-left-offset,
   label-top-offset,
@@ -331,10 +332,12 @@ $variables: (
       text-field-hover-border-color,
       $text-field-light-hover-border-color
     );
-    @include set-var(
-      text-field-filled-color,
-      $text-field-light-filled-background-color
-    );
+    @if not $disable-text-field-filled-theme {
+      @include set-var(
+        text-field-filled-color,
+        $text-field-light-filled-background-color
+      );
+    }
     @if not $disable-switch {
       @include set-var(
         switch-track-background-color,
@@ -382,10 +385,12 @@ $variables: (
       text-field-hover-border-color,
       $text-field-dark-hover-border-color
     );
-    @include set-var(
-      text-field-filled-color,
-      $text-field-dark-filled-background-color
-    );
+    @if not $disable-text-field-filled-theme {
+      @include set-var(
+        text-field-filled-color,
+        $text-field-dark-filled-background-color
+      );
+    }
     @if not $disable-switch {
       @include set-var(
         switch-track-background-color,
@@ -615,7 +620,6 @@ $variables: (
 @mixin text-field-container-styles($disable-layer: false) {
   @include utils.optional-layer(form, $disable-layer) {
     .rmd-text-field-container {
-      @include set-var(label-left-offset, get-var(text-field-padding-left));
       @include use-var(height, text-field-height);
 
       align-items: center;
@@ -684,13 +688,20 @@ $variables: (
             text-field-padding-right,
             $text-field-outlined-padding
           );
-          @include set-var(label-top-offset, -50%);
-          @include set-var(label-active-padding, 0 $label-floating-padding);
-          @include set-var(
-            label-active-background-color,
-            theme.theme-get-var(background-color)
-          );
           @include use-var(border-color, text-field-border-color);
+          @if not $disable-text-field-addon {
+            @include set-var(addon-left-offset, $text-field-outlined-padding);
+          }
+
+          @if not $disable-floating-label {
+            @include set-var(label-left-offset, $text-field-outlined-padding);
+            @include set-var(label-top-offset, -50%);
+            @include set-var(label-active-padding, 0 $label-floating-padding);
+            @include set-var(
+              label-active-background-color,
+              theme.theme-get-var(background-color)
+            );
+          }
 
           border-radius: $text-field-border-radius;
           border-style: solid;
@@ -738,6 +749,17 @@ $variables: (
             text-field-padding-right,
             $text-field-filled-padding
           );
+          @if not $disable-floating-label {
+            @include set-var(
+              label-left-offset,
+              $text-field-filled-padding + $label-floating-padding
+            );
+          }
+
+          @if not $disable-text-field-addon {
+            @include set-var(addon-left-offset, $text-field-filled-padding);
+          }
+
           @include use-var(background-color, text-field-filled-color);
         }
       }
@@ -1196,7 +1218,7 @@ $variables: (
       // `.rmd-text-field-container` which would prevent these styles from being
       // applied
       &--before {
-        @include utils.auto-rtl(left, get-var(label-left-offset));
+        @include utils.auto-rtl(left, get-var(addon-left-offset));
       }
 
       &--after {
@@ -1989,6 +2011,7 @@ $variables: (
     @if not $disable-text-field-addon {
       @include set-var(addon-top, auto);
       @include set-var(addon-margin-top, 0px);
+      @include set-var(addon-left-offset, 0px);
     }
 
     @if not $disable-switch {

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(