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

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/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>,

package/src/menu/MenuItemCircularProgress.tsx

@@ -39,11 +39,11 @@ export interface MenuItemCircularProgressProps extends CircularProgressProps {
  *   DropdownMenu,
  *   MenuItem,
  *   MenuItemCircularProgress,
- *   useAsyncAction,
+ *   useAsyncFunction,
  * } from "@react-md/core";
  *
  * function Example() {
- *   const { handleAsync, pending } = useAsyncAction();
+ *   const { handleAsync, pending } = useAsyncFunction();
  *   const [visible, setVisible] = useState(false);
  *
  *   return (

package/src/positioning/__tests__/createHorizontalPosition.ts

@@ -1,8 +1,4 @@
 import { describe, expect, it } from "@jest/globals";
-import type {
-  EqualWidthOptions,
-  FixConfig,
-} from "../createHorizontalPosition.js";
 import {
   createAnchoredCenter,
   createAnchoredInnerLeft,
@@ -11,6 +7,8 @@ import {
   createAnchoredRight,
   createEqualWidth,
   createHorizontalPosition,
+  type EqualWidthOptions,
+  type FixConfig,
 } from "../createHorizontalPosition.js";
 
 import {

package/src/positioning/constants.ts

@@ -1,4 +1,4 @@
-import type { PositionAnchor } from "./types.js";
+import { type PositionAnchor } from "./types.js";
 
 export const ABOVE_LEFT_ANCHOR: PositionAnchor = {
   x: "left",

package/src/positioning/createHorizontalPosition.ts

@@ -1,12 +1,12 @@
-import type { XCoordConfig } from "./utils.js";
+import { type FixedPositionOptions, type HorizontalPosition } from "./types.js";
 import {
   getCenterXCoord,
   getInnerLeftCoord,
   getInnerRightCoord,
   getLeftCoord,
   getRightCoord,
+  type XCoordConfig,
 } from "./utils.js";
-import type { FixedPositionOptions, HorizontalPosition } from "./types.js";
 
 /**
  * @internal

package/src/positioning/createVerticalPosition.ts

@@ -1,19 +1,19 @@
-import type { YCoordConfig } from "./utils.js";
+import { type FixedPositionOptions, type VerticalPosition } from "./types.js";
 import {
   getAboveCoord,
   getBelowCoord,
   getBottomCoord,
   getCenterYCoord,
   getTopCoord,
+  type YCoordConfig,
 } from "./utils.js";
-import type { FixedPositionOptions, VerticalPosition } from "./types.js";
 
 /** @internal */
 interface YPosition {
   top: number;
   bottom?: number;
   actualY: VerticalPosition;
-  /** @since 6.0.0 */
+  /** @since 5.1.6 */
   transformOriginY?: number;
 }
 

package/src/positioning/getFixedPosition.ts

@@ -2,7 +2,7 @@ import { getScrollbarWidth } from "../scroll/getScrollbarWidth.js";
 import { BELOW_CENTER_ANCHOR } from "./constants.js";
 import { createHorizontalPosition } from "./createHorizontalPosition.js";
 import { createVerticalPosition } from "./createVerticalPosition.js";
-import type { FixedPosition, FixedPositionOptions } from "./types.js";
+import { type FixedPosition, type FixedPositionOptions } from "./types.js";
 import {
   findSizingContainer,
   getElementRect,

package/src/positioning/types.ts

@@ -160,7 +160,7 @@ export interface CalculateFixedPositionOptions extends InitialCoords {
    * @defaultValue `false`
    * @since 5.0.0 This will always be `true` if the
    * {@link FixedPositionOptions.container} is `null`.
-   * @since 6.0.0 Allow this to be `false` while the `container` is
+   * @since 5.1.6 Allow this to be `false` while the `container` is
    * null. I can't figure out why I prevented that.
    */
   disableSwapping?: boolean;

package/src/positioning/useFixedPositioning.ts

@@ -1,13 +1,21 @@
 "use client";
-import type { CSSProperties, Ref, RefCallback, RefObject } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type Ref,
+  type RefCallback,
+  type RefObject,
+} from "react";
 import { delegateEvent } from "../delegateEvent.js";
-import type { TransitionCallbacks } from "../transition/types.js";
+import { type TransitionCallbacks } from "../transition/types.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
 import { BELOW_CENTER_ANCHOR } from "./constants.js";
 import { getFixedPosition } from "./getFixedPosition.js";
-import type { CalculateFixedPositionOptions } from "./types.js";
+import { type CalculateFixedPositionOptions } from "./types.js";
 import { isWithinViewport } from "./utils.js";
 
 const noop = (): undefined => undefined;

package/src/positioning/utils.ts

@@ -1,4 +1,4 @@
-import type { PositionAnchor } from "./types.js";
+import { type PositionAnchor } from "./types.js";
 
 /** @internal */
 export interface XCoordConfig {