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

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);
         }
       }
@@ -1048,25 +1070,20 @@ $variables: (
       outline-style: none;
     }
 
-    .rmd-select-value {
-      @include _text-field-base-styles;
-
-      align-items: center;
-      display: flex;
-      gap: 0.5rem;
+    .rmd-selected-option {
       position: absolute;
-      white-space: nowrap;
-
-      &__v {
-        @include typography.text-overflow;
-      }
     }
 
     .rmd-select {
+      // disable pointer events on touch devices so the soft keyboard does not
+      // appear when clicking the select
+      @media (hover: none) and (pointer: course) {
+        pointer-events: none;
+      }
+
       opacity: 0;
-      pointer-events: none;
 
-      // ALl these additional overrides are provided so that the select will have
+      // All these additional overrides are provided so that the select will have
       // the same sizing as a text field with the same props provided.
       @if not $disable-text-field-underlined-theme {
         &--underline {
@@ -1196,7 +1213,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 +2006,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/form/selectUtils.ts

@@ -53,10 +53,8 @@ function getLabelFromChildren(children: ReactNode): string {
  * @remarks \@since 6.0.0
  */
 interface ExtractedOptions<Value extends string | number> {
-  options: readonly SelectOption<Value>[];
+  options: readonly Value[];
   currentOption: SelectOption<Value> | undefined;
-  searchValues: readonly string[];
-  currentIndex: number;
 }
 
 /**
@@ -68,9 +66,8 @@ export function extractOptionsFromChildren<Value extends string | number>(
   currentValue: Value | undefined
 ): ExtractedOptions<Value> {
   let currentOption: SelectOption<Value> | undefined;
-  let currentIndex = -1;
 
-  const options: SelectOption<Value>[] = [];
+  const options: Value[] = [];
   const searchValues: string[] = [];
   Children.forEach(children, (child) => {
     if (!isValidElement<SelectOption<Value>>(child)) {
@@ -84,11 +81,10 @@ export function extractOptionsFromChildren<Value extends string | number>(
         (!currentOption && typeof currentValue === "undefined")
       ) {
         currentOption = child.props;
-        currentIndex = options.length;
       }
 
       if (!disabled) {
-        options.push(child.props);
+        options.push(child.props.value);
         searchValues.push(getLabelFromChildren(children));
       }
     } else if (children) {
@@ -97,19 +93,12 @@ export function extractOptionsFromChildren<Value extends string | number>(
         ({ currentOption } = result);
       }
 
-      if (result.currentIndex !== -1) {
-        currentIndex = options.length + result.currentIndex;
-      }
-
       options.push(...result.options);
-      searchValues.push(...result.searchValues);
     }
   });
 
   return {
     options,
-    searchValues,
     currentOption,
-    currentIndex,
   };
 }

package/src/form/types.ts

@@ -90,7 +90,7 @@ export interface FormComponentStates {
  * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
  */
-export type AutoCompleteValue =
+export type AutocompleteValue =
   | "off"
   | "on"
   | "name"
@@ -149,11 +149,11 @@ export type AutoCompleteValue =
 /**
  * @remarks \@since 6.0.0
  */
-export interface UserAgentAutoCompleteProps {
+export interface UserAgentAutocompleteProps {
   /**
    * Set this to enable additional autocompletion suggestions for a user for
    * different form fields. Using this prop will update the
-   * {@link UserAgentAutoCompleteProps.name} and {@link autoComplete} to default to
+   * {@link UserAgentAutocompleteProps.name} and {@link autoComplete} to default to
    * this value.
    *
    * @example
@@ -182,11 +182,11 @@ export interface UserAgentAutoCompleteProps {
    *
    * @see https://html.spec.whatwg.org/multipage/forms.html#autofill
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
-   * @see {@link AutoCompleteValue}
+   * @see {@link AutocompleteValue}
    * @see {@link autoComplete}
-   * @see {@link UserAgentAutoCompleteProps.name}
+   * @see {@link UserAgentAutocompleteProps.name}
    */
-  autoCompleteValue?: AutoCompleteValue;
+  autoCompleteValue?: AutocompleteValue;
 
   /**
    * @see {@link autoCompleteValue}