@react-md/core 6.3.4 → 6.4.0

package/src/form/ResizingTextAreaWrapper.tsx

@@ -13,8 +13,7 @@ import { textArea } from "./textAreaStyles.js";
  * @since 6.0.0
  * @internal
  */
-export interface ResizingTextAreaWrapperProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElement> {
   maskId: string;
   maskRef: Ref<HTMLTextAreaElement>;
   defaultValue?: TextareaHTMLAttributes<HTMLTextAreaElement>["defaultValue"];

package/src/form/Select.tsx

@@ -95,7 +95,8 @@ export type SelectChangeEvent<Value extends string> =
  * @since 6.0.0 Rewritten with a new API.
  */
 export interface SelectProps<Value extends string>
-  extends Omit<TextFieldContainerProps, "label">,
+  extends
+    Omit<TextFieldContainerProps, "label">,
     Pick<InputHTMLAttributes<HTMLInputElement>, "form" | "required">,
     UserAgentAutocompleteProps {
   /**

package/src/form/Slider.tsx

@@ -65,7 +65,8 @@ const noop = (): undefined => {
  * @since 2.5.0
  */
 export interface BaseSliderProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     SliderThumbPresentation,
     SliderValueOptions,
     SliderAddonProps,

package/src/form/SliderContainer.tsx

@@ -32,8 +32,7 @@ export interface SliderAddonProps {
  * a `Fieldset` instead.
  */
 export interface SliderContainerProps
-  extends HTMLAttributes<HTMLDivElement>,
-    SliderAddonProps {
+  extends HTMLAttributes<HTMLDivElement>, SliderAddonProps {
   vertical: boolean;
 }
 

package/src/form/SliderThumb.tsx

@@ -83,8 +83,10 @@ export interface SliderThumbPresentation {
 /**
  * @since 6.0.0
  */
-export interface ConfigurableSliderThumbProps
-  extends Omit<HTMLAttributes<HTMLSpanElement>, "onChange"> {
+export interface ConfigurableSliderThumbProps extends Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  "onChange"
+> {
   name?: string;
 }
 
@@ -94,7 +96,8 @@ export interface ConfigurableSliderThumbProps
  * @since 6.0.0 Internal only component.
  */
 export interface SliderThumbProps
-  extends ConfigurableSliderThumbProps,
+  extends
+    ConfigurableSliderThumbProps,
     Required<SliderValueOptions>,
     Required<SliderThumbPresentation> {
   id: string;

package/src/form/SliderTrack.tsx

@@ -14,7 +14,8 @@ import {
  * @since 6.0.0 Updated to be internal only.
  */
 export interface SliderTrackProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     ClosestThumbEventHandlersOptions,
     ThumbOffsetsOptions {
   animate: boolean;

package/src/form/SliderValueMarks.tsx

@@ -127,8 +127,7 @@ export interface SliderMarksOptions {
  * @since 6.0.0
  */
 export interface SliderValueMarksProps
-  extends RangeStepsOptions,
-    Required<SliderMarksOptions> {
+  extends RangeStepsOptions, Required<SliderMarksOptions> {
   vertical: boolean;
   thumb1Value: number;
   thumb2Value: number;

package/src/form/Switch.tsx

@@ -33,7 +33,8 @@ declare module "react" {
  * `FormMessage` behavior.
  */
 export interface SwitchProps
-  extends InputHTMLAttributes<HTMLInputElement>,
+  extends
+    InputHTMLAttributes<HTMLInputElement>,
     InputToggleLabelProps,
     FormMessageContainerExtension,
     FormComponentStates {

package/src/form/TextArea.tsx

@@ -35,8 +35,7 @@ declare module "react" {
  * @since 6.0.0 Added `containerProps`.
  */
 export interface TextAreaProps
-  extends FormFieldOptions,
-    TextareaHTMLAttributes<HTMLTextAreaElement> {
+  extends FormFieldOptions, TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** @defaultValue `"text-area-" + useId()` */
   id?: string;
 

package/src/form/TextField.tsx

@@ -51,7 +51,8 @@ export type TextFieldInputAttributes = Omit<
  * @since 6.0.0 Removed the `containerRef` prop.
  */
 export interface TextFieldProps
-  extends TextFieldInputAttributes,
+  extends
+    TextFieldInputAttributes,
     UserAgentAutocompleteProps,
     FormFieldOptions {
   /**

package/src/form/TextFieldContainer.tsx

@@ -8,8 +8,7 @@ import { textFieldContainer } from "./textFieldContainerStyles.js";
 import { type TextFieldContainerOptions } from "./types.js";
 
 export interface TextFieldContainerProps
-  extends HTMLAttributes<HTMLDivElement>,
-    TextFieldContainerOptions {
+  extends HTMLAttributes<HTMLDivElement>, TextFieldContainerOptions {
   /**
    * Set this to `true` if there is a floating label with the `TextField` or
    * `TextArea`.

package/src/form/fieldsetStyles.ts

@@ -8,6 +8,11 @@ const styles = bem("rmd-fieldset");
 export interface FieldsetClassNameOptions {
   className?: string;
 
+  /**
+   * @defaultValue `false`
+   */
+  fullWidth?: boolean;
+
   /**
    * Set this to `true` to enable the default browser styles for a fieldset.
    *
@@ -17,19 +22,29 @@ export interface FieldsetClassNameOptions {
   browserStyles?: boolean;
 
   /**
+   * @since 6.4.0
    * @defaultValue `false`
    */
-  fullWidth?: boolean;
+  floatingLegend?: boolean;
 }
 
 /**
  * @since 6.0.0
  */
 export function fieldset(options: FieldsetClassNameOptions = {}): string {
-  const { className, fullWidth, browserStyles = false } = options;
+  const {
+    className,
+    fullWidth,
+    browserStyles = false,
+    floatingLegend,
+  } = options;
 
   return cnb(
-    styles({ unstyled: !browserStyles, "full-width": fullWidth }),
+    styles({
+      unstyled: !browserStyles,
+      "full-width": fullWidth,
+      "floating-legend": floatingLegend,
+    }),
     className
   );
 }

package/src/form/inputToggleStyles.ts

@@ -22,8 +22,10 @@ const styles = bem("rmd-input-toggle");
 export type InputToggleSize = "auto" | "small" | "dense" | "normal" | "large";
 
 /** @since 6.0.0 */
-export interface InputToggleClassNameOptions
-  extends Omit<FormComponentStates, "readOnly"> {
+export interface InputToggleClassNameOptions extends Omit<
+  FormComponentStates,
+  "readOnly"
+> {
   className?: string;
   type: "checkbox" | "radio";
 

package/src/form/labelStyles.ts

@@ -9,7 +9,7 @@ const styles = bem("rmd-label");
 /**
  * @since 6.0.0
  */
-export function label(options: LabelClassNameOptions): string {
+export function label(options: LabelClassNameOptions = {}): string {
   const {
     className,
     gap,

package/src/form/legendStyles.ts

@@ -0,0 +1,132 @@
+import { cnb } from "cnbuilder";
+
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+import { getFormConfig } from "./formConfig.js";
+import { label } from "./labelStyles.js";
+import { type FormTheme, type LabelClassNameOptions } from "./types.js";
+
+const styles = bem("rmd-legend");
+
+/**
+ * @since 6.4.0
+ */
+export type LegendLabelClassNameOptions = Pick<
+  LabelClassNameOptions,
+  "active" | "gap" | "dense" | "error" | "stacked" | "disabled" | "reversed"
+>;
+
+/**
+ * @since 6.4.0
+ */
+export interface LegendClassNameOptions extends LegendLabelClassNameOptions {
+  className?: string;
+
+  /**
+   * @defaultValue `false`
+   */
+  srOnly?: boolean;
+
+  /**
+   * Set this to `true` to make the `<legend>` have the styles of a floating label.
+   * This requires the parent `<fieldset>` to have the `floatingLegend` flag
+   * enabled.
+   *
+   * @defaultValue `false`
+   */
+  floating?: boolean;
+
+  /**
+   * This will only apply if {@link floating} is `true`.
+   *
+   * @see {@link FormTheme}
+   * @defaultValue `getFormConfig("theme")`
+   */
+  theme?: FormTheme;
+
+  /**
+   * This will only apply if {@link floating} is `true`.
+   *
+   * @see {@link LabelClassNameOptions.active}
+   * @defaultValue `false`
+   */
+  active?: boolean;
+
+  /**
+   * This will only apply if {@link floating} is `true`.
+   *
+   * @see {@link LabelClassNameOptions.gap}
+   * @defaultValue `false`
+   */
+  gap?: boolean;
+
+  /**
+   * This will only apply if {@link floating} is `true`.
+   *
+   * @see {@link LabelClassNameOptions.disabled}
+   * @defaultValue `false`
+   */
+  disabled?: boolean;
+
+  /**
+   * This will only apply if {@link floating} is `true`.
+   *
+   * @see {@link LabelClassNameOptions.dense}
+   * @defaultValue `false`
+   */
+  dense?: boolean;
+
+  /**
+   * This will only apply if {@link floating} is `true`.
+   *
+   * @see {@link LabelClassNameOptions.error}
+   * @defaultValue `false`
+   */
+  error?: boolean;
+
+  /**
+   * This will only apply if {@link floating} is `true`.
+   *
+   * @see {@link LabelClassNameOptions.stacked}
+   * @defaultValue `false`
+   */
+  stacked?: boolean;
+
+  /**
+   * This will only apply if {@link floating} is `true`.
+   *
+   * @see {@link LabelClassNameOptions.reversed}
+   * @defaultValue `false`
+   */
+  reversed?: boolean;
+}
+
+/**
+ * @since 6.4.0
+ */
+export function legend(options: LegendClassNameOptions = {}): string {
+  const {
+    className,
+    srOnly,
+    floating,
+    theme = getFormConfig("theme"),
+    ...labelOptions
+  } = options;
+
+  return cnb(
+    styles({
+      floating,
+      "floating-filled": floating && theme === "filled",
+      "floating-underline": floating && theme === "underline",
+      "floating-outline": floating && theme === "outline",
+    }),
+    floating &&
+      label({
+        ...labelOptions,
+        floating: true,
+        floatingActive: true,
+      }),
+    cssUtils({ srOnly }),
+    className
+  );
+}

package/src/form/selectUtils.ts

@@ -6,8 +6,9 @@ import { type MenuItemProps } from "../menu/MenuItem.js";
  * @internal
  * @since 6.0.0
  */
-export interface SelectOption<Value extends string | number = string>
-  extends MenuItemProps {
+export interface SelectOption<
+  Value extends string | number = string,
+> extends MenuItemProps {
   value: Value;
 }
 

package/src/form/textFieldContainerStyles.ts

@@ -8,8 +8,7 @@ const styles = bem("rmd-text-field-container");
 
 /** @since 6.0.0 */
 export interface TextFieldContainerClassNameOptions
-  extends FormThemeOptions,
-    FormComponentStates {
+  extends FormThemeOptions, FormComponentStates {
   className?: string;
 
   /** @defaultValue `false` */

package/src/form/types.ts

@@ -31,15 +31,27 @@ declare module "react" {
     "--rmd-text-field-addon-spacing"?: string | number;
     "--rmd-text-field-addon-margin-top"?: string | number;
     "--rmd-text-field-addon-left-offset"?: string | number;
+    /** @since 6.4.0 */
+    "--rmd-text-field-base-height"?: string | number;
     "--rmd-text-field-height"?: string | number;
+    /** @since 6.4.0 */
+    "--rmd-text-field-dense-height"?: string | number;
+    /** @since 6.4.0 */
+    "--rmd-text-field-label-height"?: string | number;
+    /** @since 6.4.0 */
+    "--rmd-text-field-dense-label-height"?: string | number;
     "--rmd-text-field-padding-left"?: string | number;
     "--rmd-text-field-padding-right"?: string | number;
     "--rmd-text-field-padding-top"?: string | number;
     "--rmd-text-field-border-color"?: string;
+    /** @since 6.4.0 */
+    "--rmd-text-field-border-radius"?: string | number;
     "--rmd-text-field-hover-border-color"?: string;
     "--rmd-text-field-filled-color"?: string;
     "--rmd-text-field-filled-padding"?: string | number;
     "--rmd-text-field-outlined-padding"?: string | number;
+    /** @since 6.4.0 */
+    "--rmd-text-field-outlined-border-radius"?: string | number;
     "--rmd-text-field-underlined-padding"?: string | number;
   }
 }
@@ -102,20 +114,30 @@ export interface FormConfiguration extends Required<FormThemeOptions> {
 }
 
 /**
- * @since 6.0.0
+ * @since 6.4.0
  */
-export interface FormComponentStates {
+export interface InteractableFormComponentStates {
   /** @defaultValue `false` */
-  error?: boolean;
+  disabled?: boolean;
 
   /** @defaultValue `false` */
-  active?: boolean;
+  readOnly?: boolean;
+}
 
+/**
+ * @since 6.4.0
+ */
+export interface EditableFormComponentStates extends InteractableFormComponentStates {
   /** @defaultValue `false` */
-  disabled?: boolean;
+  error?: boolean;
+}
 
+/**
+ * @since 6.0.0
+ */
+export interface FormComponentStates extends EditableFormComponentStates {
   /** @defaultValue `false` */
-  readOnly?: boolean;
+  active?: boolean;
 }
 
 /**
@@ -255,7 +277,8 @@ export interface FormMessageClassNameOptions {
 }
 
 export interface FormMessageProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "minLength" | "maxLength">,
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, "minLength" | "maxLength">,
     FormMessageClassNameOptions {
   /**
    * If this component is acting as a form-level error message handler, the role
@@ -359,8 +382,7 @@ export interface FormMessageInputLengthCounterProps {
 }
 
 export interface FormMessageWithCounterProps
-  extends FormMessageProps,
-    FormMessageInputLengthCounterProps {}
+  extends FormMessageProps, FormMessageInputLengthCounterProps {}
 
 /**
  * @since 6.0.0
@@ -477,14 +499,12 @@ export interface LabelClassNameOptions {
 }
 
 export interface LabelProps
-  extends LabelHTMLAttributes<HTMLLabelElement>,
-    LabelClassNameOptions {}
+  extends LabelHTMLAttributes<HTMLLabelElement>, LabelClassNameOptions {}
 
 /**
  * @since 6.0.0
  */
-export interface ConfigurableTextFieldAddonProps
-  extends HTMLAttributes<HTMLSpanElement> {
+export interface ConfigurableTextFieldAddonProps extends HTMLAttributes<HTMLSpanElement> {
   /**
    * Boolean if the addon should be presentational only and prevent pointer
    * events.
@@ -519,8 +539,7 @@ export interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {
  * `leftAddonProps` / `rightAddonProps`. Removed `stretch`
  */
 export interface TextFieldContainerOptions
-  extends FormThemeOptions,
-    FormComponentStates {
+  extends FormThemeOptions, FormComponentStates {
   /**
    * Set this to `true` to enable the dense spec which reduces the height.
    *
@@ -578,8 +597,7 @@ export interface TextFieldContainerOptions
 }
 
 export interface FormFieldOptions
-  extends TextFieldContainerOptions,
-    FormMessageContainerExtension {
+  extends TextFieldContainerOptions, FormMessageContainerExtension {
   /**
    * An optional floating label to use with the text field. A label is generally
    * recommended for accessibility, but can be omitted if an `aria-label` or

package/src/form/useCheckboxGroup.ts

@@ -70,8 +70,9 @@ export interface CheckboxGroupImplementation<V extends string> {
 }
 
 /** @since 6.0.0 */
-export interface IndeterminateCheckboxGroupImplementation<V extends string>
-  extends CheckboxGroupImplementation<V> {
+export interface IndeterminateCheckboxGroupImplementation<
+  V extends string,
+> extends CheckboxGroupImplementation<V> {
   getIndeterminateProps: () => {
     "aria-checked": "mixed" | undefined;
     name: string;

package/src/form/useCombobox.ts

@@ -141,7 +141,9 @@ export interface ComboboxVisibilityOptions {
 export interface ConfigurableComboboxOptions<
   ComboboxEl extends HTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends ComboboxKeyboardMovementOptions<ComboboxEl>,
+>
+  extends
+    ComboboxKeyboardMovementOptions<ComboboxEl>,
     ComboboxVisibilityOptions {
   /**
    * This is the {@link InputHTMLAttributes.form} attribute and is used to
@@ -259,7 +261,9 @@ export type ConfigurableComboboxMenuProps = Partial<
  */
 export interface ProvidedComboboxMenuProps<
   PopupEl extends HTMLElement = HTMLDivElement,
-> extends Required<ComboboxTransitionCallbacks>,
+>
+  extends
+    Required<ComboboxTransitionCallbacks>,
     ComboboxWidgetPopupProps<PopupEl> {
   visible: boolean;
   onRequestClose: () => void;
@@ -276,7 +280,8 @@ export interface ProvidedComboboxMenuProps<
  * @since 6.0.0
  */
 export interface ComboboxMenuProps<PopupEl extends HTMLElement = HTMLDivElement>
-  extends Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,
+  extends
+    Omit<ConfigurableComboboxMenuProps, keyof ProvidedComboboxMenuProps>,
     ProvidedComboboxMenuProps<PopupEl> {}
 
 /**

package/src/form/useNumberField.ts

@@ -3,6 +3,7 @@
 import { useCallback, useRef, useState } from "react";
 
 import { type UseStateInitializer, type UseStateSetter } from "../types.js";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
 import { withinRange } from "../utils/withinRange.js";
 import { useFormReset } from "./useFormReset.js";
 import {
@@ -47,7 +48,8 @@ export interface NumberFieldConstraints {
  * - Renamed `fixOnBlur` to `updateValueOnBlur`
  */
 export interface NumberFieldHookOptions
-  extends Omit<TextFieldHookOptions, "defaultValue" | "isNumber">,
+  extends
+    Omit<TextFieldHookOptions, "defaultValue" | "isNumber">,
     NumberFieldConstraints {
   /**
    * @defaultValue `undefined`
@@ -112,42 +114,45 @@ export interface NumberFieldHookOptions
 }
 
 /** @since 6.0.0 */
-export interface NumberFieldHookState
-  extends Omit<TextFieldHookState, "value"> {
+export interface NumberFieldHookState extends Omit<
+  TextFieldHookState,
+  "value"
+> {
   value: number | undefined;
 }
 
 /** @since 2.5.6 */
 export interface ProvidedNumberFieldProps
-  extends ProvidedTextFieldProps,
-    NumberFieldConstraints {
+  extends ProvidedTextFieldProps, NumberFieldConstraints {
   type: "number";
 }
 
 /** @since 2.5.6 */
 export interface ProvidedNumberFieldMessageProps
-  extends ProvidedTextFieldMessageProps,
-    NumberFieldConstraints {
+  extends ProvidedTextFieldMessageProps, NumberFieldConstraints {
   type: "number";
 }
 
 /** @since 6.0.0 */
-export interface NumberFieldImplementation
-  extends Omit<TextFieldImplementation, "value" | "setState"> {
+export interface NumberFieldImplementation extends Omit<
+  TextFieldImplementation,
+  "value" | "setState"
+> {
   value: number | undefined;
   setState: UseStateSetter<NumberFieldHookState>;
   fieldProps: ProvidedNumberFieldProps;
 }
 
 /** @since 6.0.0 */
-export interface NumberFieldWithMessageImplementation
-  extends NumberFieldImplementation {
+export interface NumberFieldWithMessageImplementation extends NumberFieldImplementation {
   fieldProps: ProvidedNumberFieldMessageProps;
 }
 
 /** @since 6.0.0 */
-export interface ValidatedNumberFieldImplementation
-  extends Omit<ValidatedTextFieldImplementation, "value" | "setState"> {
+export interface ValidatedNumberFieldImplementation extends Omit<
+  ValidatedTextFieldImplementation,
+  "value" | "setState"
+> {
   value: number | undefined;
   setState: UseStateSetter<NumberFieldHookState>;
   fieldProps: ProvidedNumberFieldProps | ProvidedNumberFieldMessageProps;
@@ -439,35 +444,31 @@ export function useNumberField(
     },
   });
 
+  const { error, errorMessage } = remaining;
+  const prevState = useRef({
+    error,
+    errorMessage,
+    value: number,
+  } satisfies NumberFieldHookState);
+  useIsomorphicLayoutEffect(() => {
+    prevState.current = {
+      error,
+      errorMessage,
+      value: number,
+    };
+  });
   const reset = useCallback(() => {
     resetTextField();
     setNumber(initial.current);
   }, [resetTextField]);
   const setState = useCallback<UseStateSetter<NumberFieldHookState>>(
     (nextState) => {
-      if (typeof nextState === "function") {
-        setNumber((prevNumber) => {
-          let nextNumber: number | undefined = prevNumber;
-          setTextFieldState((prevState) => {
-            const updated = nextState({
-              ...prevState,
-              value: prevNumber,
-            });
-
-            nextNumber = updated.value;
-
-            return {
-              ...updated,
-              value: `${nextNumber ?? ""}`,
-            };
-          });
-
-          return nextNumber;
-        });
-        return;
-      }
+      const resolvedNextState =
+        typeof nextState === "function"
+          ? nextState(prevState.current)
+          : nextState;
 
-      const { value, error, errorMessage } = nextState;
+      const { value, error, errorMessage } = resolvedNextState;
       setNumber(value);
       setTextFieldState({
         value: `${value ?? ""}`,

package/src/form/useRangeSlider.ts

@@ -31,8 +31,7 @@ export interface RangeSliderOptions extends SliderValueOptions {
  * @since 6.0.0
  */
 export interface RangeSliderImplementation
-  extends Required<SliderValueOptions>,
-    RangeSliderState {}
+  extends Required<SliderValueOptions>, RangeSliderState {}
 
 /**
  * @example Range Slider Example

package/src/form/useSlider.ts

@@ -45,8 +45,7 @@ export interface SliderState {
  * @since 6.0.0
  */
 export interface SliderImplementation
-  extends Required<SliderValueOptions>,
-    SliderState {}
+  extends Required<SliderValueOptions>, SliderState {}
 
 /**
  * @since 6.0.0