@react-md/core 1.0.0-next.13 → 1.0.0-next.15

package/src/form/_form.scss

@@ -3,6 +3,7 @@
 @use "sass:color";
 @use "../utils";
 @use "../box-shadows";
+@use "../box/box";
 @use "../button/button";
 @use "../progress/progress";
 @use "../theme/colors";
@@ -106,7 +107,6 @@ $text-field-height: 3rem !default;
 $text-field-dense-height: 2.5rem !default;
 $text-field-label-height: 3.5rem !default;
 $text-field-label-dense-height: 3.25rem !default;
-$text-field-spacing: icon.$spacing !default;
 $text-field-border-radius: 0.25rem !default;
 $text-field-border-width: 1px !default;
 $text-field-border-width-active: 2px !default;
@@ -122,7 +122,9 @@ $text-field-underlined-label-padding-top: 1.5rem !default;
 $text-field-underlined-label-left-offset: icon.$spacing !default;
 $text-field-color-min-width: 5rem !default;
 
+$text-field-addon-gap: 0.25rem !default;
 $text-field-addon-margin: icon.$spacing !default;
+$text-field-addon-spacing: icon.get-var(spacing) !default;
 
 $text-field-light-border-color: rgba(#000, 0.12) !default;
 $text-field-dark-border-color: rgba(#fff, 0.5) !default;
@@ -270,6 +272,7 @@ $variables: (
   active-color,
   focus-color,
   addon-top,
+  addon-spacing,
   addon-margin-top,
   addon-left-offset,
   label-floating-top,
@@ -284,6 +287,9 @@ $variables: (
   text-field-border-color,
   text-field-hover-border-color,
   text-field-filled-color,
+  text-field-filled-padding,
+  text-field-outlined-padding,
+  text-field-underlined-padding,
   textarea-height,
   textarea-padding,
   switch-track-background-color,
@@ -459,30 +465,24 @@ $variables: (
       margin: $message-margin-top 0 $message-margin-bottom;
       min-height: $message-min-height;
 
-      @if not $disable-text-field-filled-theme and $text-field-filled-padding {
+      @if not $disable-text-field-filled-theme {
         &--filled {
-          padding-left: $text-field-filled-padding;
-          padding-right: $text-field-filled-padding;
+          @include use-var(padding-left, text-field-filled-padding);
+          @include use-var(padding-right, text-field-filled-padding);
         }
       }
 
-      @if not
-        $disable-text-field-outlined-theme and
-        $text-field-outlined-padding
-      {
+      @if not $disable-text-field-outlined-theme {
         &--outline {
-          padding-left: $text-field-outlined-padding;
-          padding-right: $text-field-outlined-padding;
+          @include use-var(padding-left, text-field-outlined-padding);
+          @include use-var(padding-right, text-field-outlined-padding);
         }
       }
 
-      @if not
-        $disable-text-field-underlined-theme and
-        $text-field-underlined-padding
-      {
+      @if not $disable-text-field-underlined-theme {
         &--underline {
-          padding-left: $text-field-underlined-padding;
-          padding-right: $text-field-underlined-padding;
+          @include use-var(padding-left, text-field-underlined-padding);
+          @include use-var(padding-right, text-field-underlined-padding);
         }
       }
 
@@ -678,19 +678,25 @@ $variables: (
         &--outline {
           @include set-var(
             text-field-padding-left,
-            $text-field-outlined-padding
+            get-var(text-field-outlined-padding)
           );
           @include set-var(
             text-field-padding-right,
-            $text-field-outlined-padding
+            get-var(text-field-outlined-padding)
           );
           @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);
+            @include set-var(
+              addon-left-offset,
+              get-var(text-field-outlined-padding)
+            );
           }
 
           @if not $disable-floating-label {
-            @include set-var(label-left-offset, $text-field-outlined-padding);
+            @include set-var(
+              label-left-offset,
+              get-var(text-field-outlined-padding)
+            );
             @include set-var(label-top-offset, -50%);
             @include set-var(label-active-padding, 0 $label-floating-padding);
             @include set-var(
@@ -721,20 +727,24 @@ $variables: (
           opacity: 1;
         }
 
-        &--outline-left {
-          $distance: calc(
-            #{icon.get-var(size)} +
-              #{$text-field-outlined-padding +
-              $text-field-spacing}
-          );
+        @if not $disable-text-field-addon {
+          &--outline-left {
+            $distance: calc(
+              icon.get-var(size) +
+                get-var(text-field-outlined-padding) +
+                get-var(addon-spacing)
+            );
 
-          @include set-var(text-field-padding-left, $distance);
-        }
+            @include set-var(text-field-padding-left, $distance);
+          }
 
-        &--outline-right {
-          $distance: calc(#{icon.get-var(size)} + #{$text-field-spacing * 2});
+          &--outline-right {
+            $distance: calc(
+              icon.get-var(size) + calc(get-var(addon-spacing) * 2)
+            );
 
-          @include set-var(text-field-padding-right, $distance);
+            @include set-var(text-field-padding-right, $distance);
+          }
         }
       }
 
@@ -1095,25 +1105,22 @@ $variables: (
 
       @if not $disable-text-field-outlined-theme {
         &--outline {
+          @include use-var(padding-right, text-field-outlined-padding);
           @include utils.rtl {
+            @include use-var(padding-left, text-field-outlined-padding);
             @include use-var(padding-right, text-field-padding-left);
-
-            padding-left: $text-field-outlined-padding;
           }
-
-          padding-right: $text-field-outlined-padding;
         }
       }
 
       @if not $disable-text-field-filled-theme {
         &--filled {
+          @include use-var(padding-right, text-field-filled-padding);
           @include utils.rtl {
             @include use-var(padding-right, text-field-padding-left);
 
-            padding-left: $text-field-filled-padding;
+            @include use-var(padding-left, text-field-filled-padding);
           }
-
-          padding-right: $text-field-filled-padding;
         }
       }
     }
@@ -1191,6 +1198,9 @@ $variables: (
 @mixin text-field-addon-styles($disable-layer: false) {
   @include utils.optional-layer(form, $disable-layer) {
     .rmd-text-field-addon {
+      @if $text-field-addon-gap {
+        @include box.set-var(gap, $text-field-addon-gap);
+      }
       @if not
         $disable-text-field-filled-theme or not
         $disable-text-field-underlined-theme
@@ -1201,7 +1211,6 @@ $variables: (
       // this makes it so that this container element is the same size as the
       // child (normally icons). without this, icons would have a height of 30.5px
       // and no longer be centered
-      display: inline-flex;
       position: absolute;
 
       // Note: Can't use `:first-child` and `:last-child` since
@@ -1213,7 +1222,7 @@ $variables: (
       }
 
       &--after {
-        @include utils.auto-rtl(right, $text-field-spacing);
+        @include utils.auto-rtl(right, get-var(addon-spacing));
       }
 
       &--presentational {
@@ -1977,6 +1986,37 @@ $variables: (
       @include set-var(label-active-background-color, transparent);
     }
 
+    @if not
+      $disable-text-field or not
+      $disable-textarea or not
+      $disable-select or not
+      $disable-native-select
+    {
+      @if not $disable-text-field-filled-theme and $text-field-filled-padding {
+        @include set-var(text-field-filled-padding, $text-field-filled-padding);
+      }
+
+      @if not
+        $disable-text-field-outlined-theme and
+        $text-field-outlined-padding
+      {
+        @include set-var(
+          text-field-outlined-padding,
+          $text-field-outlined-padding
+        );
+      }
+
+      @if not
+        $disable-text-field-underlined-theme and
+        $text-field-underlined-padding
+      {
+        @include set-var(
+          text-field-underlined-padding,
+          $text-field-underlined-padding
+        );
+      }
+    }
+
     @if not $disable-text-field {
       @include set-var(text-field-height, $text-field-height);
       @include set-var(text-field-padding-left, 0px);
@@ -2003,6 +2043,7 @@ $variables: (
       @include set-var(addon-top, auto);
       @include set-var(addon-margin-top, 0px);
       @include set-var(addon-left-offset, 0px);
+      @include set-var(addon-spacing, $text-field-addon-spacing);
     }
 
     @if not $disable-switch {

package/src/form/useCombobox.ts

@@ -204,17 +204,13 @@ export interface ComboboxTransitionOptions extends ComboboxTransitionCallbacks {
  * @since 6.0.0
  */
 export type ConfigurableComboboxMenuProps = Partial<
-  Omit<
-    MenuProps,
-    "fixedTo" | "visible" | "onRequestClose" | keyof ComboboxWidgetPopupProps
-  >
+  Omit<MenuProps, "visible" | "onRequestClose" | keyof ComboboxWidgetPopupProps>
 >;
 
 /**
  * @since 6.0.0
  */
 export interface ProvidedComboboxMenuProps<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLDivElement,
 > extends Required<ComboboxTransitionCallbacks>,
     ComboboxWidgetPopupProps<PopupEl> {
@@ -227,7 +223,7 @@ export interface ProvidedComboboxMenuProps<
   /** @defaultValue `BELOW_CENTER_ANCHOR` */
   anchor: PositionAnchor;
 
-  fixedTo: RefObject<ComboboxEl>;
+  fixedTo: RefObject<HTMLElement>;
 
   sheetProps: MenuSheetConfigurableProps &
     Required<ComboboxTransitionCallbacks>;
@@ -236,23 +232,17 @@ export interface ProvidedComboboxMenuProps<
 /**
  * @since 6.0.0
  */
-export interface ComboboxMenuProps<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
-  PopupEl extends HTMLElement = HTMLDivElement,
-> extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,
-    ProvidedComboboxMenuProps<ComboboxEl, PopupEl> {}
+export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>
+  extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,
+    ProvidedComboboxMenuProps<PopupEl> {}
 
 /**
  * Since the combobox usually uses the `Menu` as a popup element, this is a
  * helper util to create the required props and merge any additional props
  * with reasonable defaults.
  */
-export type ComboboxGetMenuProps<
-  ComboboxEl extends HTMLElement = HTMLInputElement,
-  PopupEl extends HTMLElement = HTMLDivElement,
-> = (
-  props?: ConfigurableComboboxMenuProps
-) => ComboboxMenuProps<ComboboxEl, PopupEl>;
+export type ComboboxGetMenuProps<PopupEl extends HTMLElement = HTMLDivElement> =
+  (props?: ConfigurableComboboxMenuProps) => ComboboxMenuProps<PopupEl>;
 
 /**
  * @since 6.0.0
@@ -271,7 +261,7 @@ export interface ComboboxImplementation<
   comboboxRef: RefObject<ComboboxEl>;
   comboboxProps: ComboboxWidgetProps<ComboboxEl>;
 
-  getMenuProps: ComboboxGetMenuProps<ComboboxEl, PopupEl>;
+  getMenuProps: ComboboxGetMenuProps<PopupEl>;
   getTransitionCallbacks(
     options: ComboboxTransitionOptions
   ): Required<ComboboxTransitionCallbacks>;
@@ -505,9 +495,9 @@ export function useCombobox<
       return {
         anchor: BELOW_CENTER_ANCHOR,
         width: "min",
+        fixedTo: comboboxRef,
         ...props,
         ...popupProps,
-        fixedTo: comboboxRef,
         visible,
         onRequestClose: hide,
         ...getTransitionCallbacks(props),

package/src/form/useEditableCombobox.ts

@@ -131,6 +131,9 @@ export function useEditableCombobox<
     ...combobox,
     getMenuProps(props) {
       return {
+        // override the inherited renderAsSheet context since the sheet makes it
+        // so the user can't actually type in the combobox
+        renderAsSheet: false,
         preventOverlap: true,
         ...getMenuProps(props),
       };

package/src/form/useTextFieldContainerAddons.ts

@@ -0,0 +1,195 @@
+"use client";
+import {
+  useCallback,
+  useState,
+  type CSSProperties,
+  type Ref,
+  type RefCallback,
+} from "react";
+import { useResizeObserver } from "../useResizeObserver.js";
+import { getFormConfig } from "./formConfig.js";
+import { type FormTheme } from "./types.js";
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+interface AddonPaddingOptions {
+  ref?: Ref<HTMLSpanElement>;
+  addon: boolean;
+  theme: FormTheme;
+  extra: string;
+}
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+function useAddonPadding(
+  options: AddonPaddingOptions
+): [padding: string | undefined, addonRef: RefCallback<HTMLSpanElement>] {
+  const { ref, addon, theme, extra } = options;
+  const [padding, setPadding] = useState<string | undefined>();
+  const addonRef = useResizeObserver({
+    ref,
+    onUpdate: useCallback(
+      (entry) => {
+        const inlineSize = entry.borderBoxSize[0]?.inlineSize;
+        if (typeof inlineSize !== "number") {
+          return;
+        }
+
+        // the leading space for the extra calc is required
+        setPadding(
+          `calc(var(--rmd-text-field-${theme}d-padding) + ${inlineSize}px${extra ? ` ${extra}` : ""})`
+        );
+      },
+      [extra, theme]
+    ),
+    disabled: !addon,
+    disableHeight: true,
+  });
+
+  return [padding, addonRef];
+}
+
+/**
+ * @since 6.0.0
+ */
+export interface TextFieldContainerAddonsOptions {
+  /**
+   * This style will automatically be merged with the returned `style`.
+   */
+  style?: CSSProperties;
+
+  /** @defaultValue `getFormConfig("theme")` */
+  theme?: FormTheme;
+
+  /**
+   * Set this to `true` if the `leftAddon` should be watched for size changes.
+   */
+  leftAddon: boolean;
+
+  /**
+   * An optional ref that will be merged with the returned
+   * {@link TextFieldContainerAddonsImplementation.leftAddonRef}.
+   */
+  leftAddonRef?: Ref<HTMLSpanElement>;
+
+  /**
+   * This can be used to update the CSS `calc()` expression to change the
+   * padding.
+   *
+   * @example Add an additional 0.25rem padding
+   * ```
+   * leftAddonExtraCalc="+ 0.25rem"
+   * ```
+   *
+   * @defaultValue `""`
+   */
+  leftAddonExtraCalc?: string;
+
+  /**
+   * Set this to `true` if the `rightAddon` should be watched for size changes.
+   */
+  rightAddon: boolean;
+
+  /**
+   * An optional ref that will be merged with the returned
+   * {@link TextFieldContainerAddonsImplementation.rightAddonRef}.
+   */
+  rightAddonRef?: Ref<HTMLSpanElement>;
+
+  /**
+   * This can be used to update the CSS `calc()` expression to change the
+   * padding.
+   *
+   * @example Add an additional 0.25rem padding
+   * ```
+   * leftAddonExtraCalc="+ 0.25rem"
+   * ```
+   *
+   * @defaultValue `""`
+   */
+  rightAddonExtraCalc?: string;
+}
+
+/**
+ * @since 6.0.0
+ */
+export interface TextFieldContainerAddonsImplementation {
+  style?: CSSProperties;
+  leftAddonRef: RefCallback<HTMLSpanElement>;
+  rightAddonRef: RefCallback<HTMLSpanElement>;
+}
+
+/**
+ * This hook can be used to automatically update the padding on the
+ * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.
+ *
+ * @example Simple Example
+ * ```tsx
+ * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({
+ *   leftAddon: true,
+ *   rightAddon: true,
+ * });
+ *
+ * return (
+ *   <TextField
+ *     style={style}
+ *     leftAddon={<SomeDynamicAddon />}
+ *     leftAddonProps={{ ref: leftAddonRef }}
+ *     rightAddon={<SomeDynamicAddon />}
+ *     rightAddonProps={{ ref: rightAddonRef }}
+ *   />
+ * );
+ * ```
+ *
+ * @since 6.0.0
+ */
+export function useTextFieldContainerAddons(
+  options: TextFieldContainerAddonsOptions
+): TextFieldContainerAddonsImplementation {
+  const {
+    style: propStyle,
+    theme: propTheme,
+    leftAddon,
+    rightAddon,
+    leftAddonRef: propLeftAddonRef,
+    rightAddonRef: propRightAddonRef,
+    leftAddonExtraCalc = "",
+    rightAddonExtraCalc = "",
+  } = options;
+  const theme = getFormConfig("theme", propTheme);
+
+  const [paddingLeft, leftAddonRef] = useAddonPadding({
+    ref: propLeftAddonRef,
+    theme,
+    addon: leftAddon,
+    extra: `+ var(--rmd-addon-spacing)${leftAddonExtraCalc ? ` ${leftAddonExtraCalc}` : ""}`,
+  });
+
+  const [paddingRight, rightAddonRef] = useAddonPadding({
+    ref: propRightAddonRef,
+    theme,
+    addon: rightAddon,
+    extra: rightAddonExtraCalc,
+  });
+
+  let style = propStyle;
+  if (typeof paddingLeft === "string" || typeof paddingRight === "string") {
+    style = {
+      ...propStyle,
+      "--rmd-text-field-padding-left":
+        paddingLeft ?? propStyle?.["--rmd-text-field-padding-left"],
+      "--rmd-text-field-padding-right":
+        paddingRight ?? propStyle?.["--rmd-text-field-padding-right"],
+    };
+  }
+
+  return {
+    style,
+    leftAddonRef,
+    rightAddonRef,
+  };
+}

package/src/icon/FontIcon.tsx

@@ -1,12 +1,26 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import {
+  forwardRef,
+  type AriaAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
 import { icon, type FontIconClassNameOptions } from "./styles.js";
 
+/**
+ * @since 6.0.0 Removed the `forceSize`/`forceFontSize` props and added the
+ * `inline` and `theme` props.
+ */
 export interface FontIconProps
-  extends HTMLAttributes<HTMLElement>,
+  extends HTMLAttributes<HTMLSpanElement>,
     FontIconClassNameOptions {
+  /** @defaultValue `true` */
+  "aria-hidden"?: AriaAttributes["aria-hidden"];
+
   /**
    * Any children to render to create the font icon. This is required for
    * material-icons.
+   *
+   * @example `<FontIcon>clear</FontIcon>`
    */
   children?: ReactNode;
 }
@@ -18,22 +32,18 @@ export interface FontIconProps
  * The default is to use the `material-icons` library, but others can be used as
  * well.
  *
- * If you are using another font icon library that does not always create icons
- * with a perfect 1:1 scale (such as font awesome), it is recommended to use the
- * `forceSize` and `forceFontSize` props to fix the sizing issues.
- *
  * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */
 export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
   function FontIcon(props, ref) {
     const {
-      className,
-      children,
       "aria-hidden": ariaHidden = true,
+      iconClassName = "material-icons",
       dense = false,
       theme,
-      iconClassName = "material-icons",
+      className,
+      children,
       ...remaining
     } = props;
 

package/src/icon/MaterialIcon.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, type AriaAttributes, type HTMLAttributes } from "react";
-import { type MaterialIconName } from "./material.js";
+import { type MaterialIconFamily, type MaterialIconName } from "./material.js";
 import { MATERIAL_CONFIG } from "./materialConfig.js";
 import { icon, type MaterialIconClassNameOptions } from "./styles.js";
 
@@ -7,15 +7,34 @@ import { icon, type MaterialIconClassNameOptions } from "./styles.js";
 export interface MaterialIconProps
   extends HTMLAttributes<HTMLSpanElement>,
     Partial<MaterialIconClassNameOptions> {
+  /**
+   * The icon name to use
+   */
+  name: MaterialIconName;
+
   /** @defaultValue `true` */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
-  name: MaterialIconName;
+
+  /** @defaultValue `MATERIAL_CONFIG.iconFamily` */
+  family?: MaterialIconFamily;
   children?: never;
 }
 
 /**
  * **Server Component**
  *
+ * The `MaterialIcon` component is used for rendering a material icon using the
+ * Google Fonts stylesheet (handled separately). This is mostly a convenience
+ * wrapper around the `FontIcon` that will catch typos for the supported icon
+ * names.
+ *
+ * @example Simple Example
+ * ```tsx
+ * <MaterialIcon name="3k" />
+ * <MaterialIcon name="favorite" theme="primary" />
+ * <MaterialIcon name="wifi" family="two-tone" dense theme="warning" />
+ * ```
+ *
  * @since 6.0.0
  */
 export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
@@ -32,9 +51,9 @@ export const MaterialIcon = forwardRef<HTMLSpanElement, MaterialIconProps>(
 
     return (
       <span
-        ref={ref}
-        aria-hidden={ariaHidden}
         {...remaining}
+        aria-hidden={ariaHidden}
+        ref={ref}
         className={icon({
           type: "material",
           family,

package/src/icon/SVGIcon.tsx

@@ -1,6 +1,9 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import { icon, type SVGIconClassNameOptions } from "./styles.js";
 
+/**
+ * @since 6.0.0 Added the `inline` and `theme` props.
+ */
 export interface SVGIconProps
   extends HTMLAttributes<SVGSVGElement>,
     SVGIconClassNameOptions {

package/src/icon/iconConfig.tsx

@@ -12,6 +12,14 @@ export interface ConfigurableIcons {
    */
   back?: ReactNode;
 
+  /**
+   * The icon to use when clearing content from a text field.
+   *
+   * @defaultValue `<FontIcon>clear</FontIcon>`
+   * @since 6.0.0
+   */
+  clear?: ReactNode;
+
   /**
    * @defaultValue `<FontIcon>close</FontIcon>`
    *
@@ -200,6 +208,7 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  */
 export const ICON_CONFIG: ConfiguredIcons = {
   back: <FontIcon>keyboard_arrow_left</FontIcon>,
+  clear: <FontIcon>clear</FontIcon>,
   close: <FontIcon>close</FontIcon>,
   checkbox: <FontIcon>check_box_outline_blank</FontIcon>,
   checkboxChecked: <FontIcon>check_box</FontIcon>,
@@ -223,6 +232,7 @@ export const ICON_CONFIG: ConfiguredIcons = {
  *
  * @example Using SVG Material Icons
  * ```tsx
+ * "use client";
  * import { configureIcons } from "@react-md/core";
  * import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
  * import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";