@react-md/core 6.3.3 → 6.4.0

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

package/src/form/useTextField.ts

@@ -125,7 +125,8 @@ export interface TextFieldHookState {
  * @since 2.5.0
  */
 export interface ProvidedFormMessageProps
-  extends Pick<FormMessageProps, "id" | "theme" | "children">,
+  extends
+    Pick<FormMessageProps, "id" | "theme" | "children">,
     Required<Pick<TextFieldProps, "error">>,
     Partial<Pick<FormMessageInputLengthCounterProps, "length" | "maxLength">> {}
 
@@ -137,8 +138,10 @@ export interface ProvidedFormMessageProps
  */
 export interface ProvidedTextFieldProps<
   E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
-> extends TextFieldValidationOptions,
-    TextFieldChangeHandlers<E>,
+>
+  extends
+    TextFieldValidationOptions,
+    Required<TextFieldChangeHandlers<E>>,
     Required<Pick<TextFieldProps, "id" | "name" | "value" | "error">>,
     Pick<TextFieldProps, "aria-describedby" | "rightAddon"> {
   /**
@@ -288,7 +291,9 @@ export interface TextFieldHookComponentOptions<
 /** @since 2.5.6 */
 export interface TextFieldHookOptions<
   E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
-> extends TextFieldValidationOptions,
+>
+  extends
+    TextFieldValidationOptions,
     TextFieldHookComponentOptions<E>,
     TextFieldChangeHandlers<E> {
   /**

package/src/hoverMode/useHoverMode.ts

@@ -36,8 +36,7 @@ export interface HoverModeConfigurationOptions extends SimpleHoverModeContext {
 /**
  * @since 6.0.0
  */
-export interface ControlledHoverModeOptions
-  extends HoverModeConfigurationOptions {
+export interface ControlledHoverModeOptions extends HoverModeConfigurationOptions {
   setVisible: UseStateSetter<boolean>;
 }
 
@@ -53,16 +52,14 @@ export interface ControlledHoverModeImplementation {
 /**
  * @since 6.0.0
  */
-export interface UncontrolledHoverModeOptions
-  extends HoverModeConfigurationOptions {
+export interface UncontrolledHoverModeOptions extends HoverModeConfigurationOptions {
   defaultVisible?: UseStateInitializer<boolean>;
 }
 
 /**
  * @since 6.0.0
  */
-export interface UncontrolledHoverModeImplementation
-  extends ControlledHoverModeImplementation {
+export interface UncontrolledHoverModeImplementation extends ControlledHoverModeImplementation {
   visible: boolean;
   setVisible: UseStateSetter<boolean>;
 }
@@ -70,8 +67,7 @@ export interface UncontrolledHoverModeImplementation
 /**
  * @since 6.0.0
  */
-export interface HoverModeImplementation
-  extends ControlledHoverModeImplementation {
+export interface HoverModeImplementation extends ControlledHoverModeImplementation {
   visible?: boolean;
   setVisible?: UseStateSetter<boolean>;
 }

package/src/icon/FontIcon.tsx

@@ -12,8 +12,7 @@ import { type FontIconClassNameOptions, icon } from "./styles.js";
  * `inline` and `theme` props.
  */
 export interface FontIconProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    FontIconClassNameOptions {
+  extends HTMLAttributes<HTMLSpanElement>, FontIconClassNameOptions {
   /** @defaultValue `true` */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
 

package/src/icon/IconRotator.tsx

@@ -15,8 +15,7 @@ import { type IconRotatorClassNameOptions, iconRotator } from "./styles.js";
  * @since 6.0.0 Removed `animate` prop and added `disableTransition`
  */
 export interface IconRotatorBaseProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    IconRotatorClassNameOptions {
+  extends HTMLAttributes<HTMLSpanElement>, IconRotatorClassNameOptions {
   /**
    * An optional style to apply to the surrounding span when the `forceIconWrap`
    * prop is enabled or the children is not a single react element.

package/src/icon/MaterialIcon.tsx

@@ -6,7 +6,8 @@ import { type MaterialIconClassNameOptions, icon } from "./styles.js";
 
 /** @since 6.0.0 */
 export interface MaterialIconProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     Partial<MaterialIconClassNameOptions> {
   /**
    * The icon name to use

package/src/icon/MaterialSymbol.tsx

@@ -24,7 +24,8 @@ declare module "react" {
  * @since 6.0.0
  */
 export interface MaterialSymbolProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     MaterialSymbolCustomization,
     Partial<MaterialSymbolClassNameOptions> {
   /** @defaultValue `true` */

package/src/icon/SVGIcon.tsx

@@ -6,8 +6,7 @@ import { type SVGIconClassNameOptions, icon } from "./styles.js";
  * @since 6.0.0 Added the `inline` and `theme` props.
  */
 export interface SVGIconProps
-  extends HTMLAttributes<SVGSVGElement>,
-    SVGIconClassNameOptions {
+  extends HTMLAttributes<SVGSVGElement>, SVGIconClassNameOptions {
   /**
    * Boolean if the SVG should gain the `focusable` attribute. This is disabled
    * by default since IE11 and Edge actually default this to true and keyboard's

package/src/icon/config.tsx

@@ -213,7 +213,6 @@ export type ConfigurableIconName = keyof ConfigurableIcons;
  * ICON_CONFIG.upload = <FileUploadIcon />;
  * ```
  *
- *
  * @since 6.0.0
  */
 export const ICON_CONFIG: ConfiguredIcons = {
@@ -289,13 +288,17 @@ export const ICON_CONFIG: ConfiguredIcons = {
  * @since 6.0.0
  */
 export function configureIcons(overrides: ConfiguredIcons): void {
-  Object.entries(overrides).forEach(([name, value]) => {
-    if (process.env.NODE_ENV !== "production" && !(name in ICON_CONFIG)) {
-      throw new Error(`${name} is an invalid react-md icon name.`);
-    }
+  if (process.env.NODE_ENV !== "production") {
+    Object.entries(overrides).forEach(([name, value]) => {
+      if (!(name in ICON_CONFIG)) {
+        throw new Error(`${name} is an invalid react-md icon name.`);
+      }
 
-    ICON_CONFIG[name as keyof ConfiguredIcons] = value;
-  });
+      ICON_CONFIG[name as keyof ConfiguredIcons] = value;
+    });
+  } else {
+    Object.assign(ICON_CONFIG, overrides);
+  }
 }
 
 /**

package/src/icon/materialConfig.ts

@@ -152,8 +152,7 @@ export type MaterialSymbolConfiguration = Required<MaterialSymbolCustomization>;
  * @since 6.0.0
  */
 export interface MaterialConfiguration
-  extends MaterialIconConfiguration,
-    MaterialSymbolConfiguration {}
+  extends MaterialIconConfiguration, MaterialSymbolConfiguration {}
 
 /**
  * @since 6.0.0

package/src/icon/styles.ts

@@ -87,8 +87,7 @@ export interface MaterialIconClassNameOptions extends SVGIconClassNameOptions {
 }
 
 /** @since 6.0.0 */
-export interface MaterialSymbolClassNameOptions
-  extends SVGIconClassNameOptions {
+export interface MaterialSymbolClassNameOptions extends SVGIconClassNameOptions {
   family: MaterialSymbolFamily;
 }