@react-md/core 6.3.4 → 6.5.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

@@ -26,6 +26,7 @@ import {
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { Listbox } from "./Listbox.js";
+import { type OptionProps } from "./Option.js";
 import { SelectedOption } from "./SelectedOption.js";
 import {
   TextFieldContainer,
@@ -46,6 +47,41 @@ const noop = (): void => {
   // do nothing
 };
 
+/**
+ * @since 6.5.0
+ */
+export interface GetSelectedOptionChildrenOptions<
+  Value extends string = string,
+> {
+  value: "" | Value;
+
+  /**
+   * The option will be undefined if there is no value or matching option.
+   */
+  option: OptionProps | undefined;
+
+  /**
+   * This is a pass-through of the {@link SelectProps.placeholder}
+   */
+  placeholder?: ReactNode;
+
+  /**
+   * This is a pass-through of the {@link SelectProps.selectedOptionProps}
+   */
+  children?: ReactNode;
+}
+
+/**
+ * @since 6.5.0
+ */
+const defaultGetSelectedOptionChildren = (
+  options: GetSelectedOptionChildrenOptions
+): ReactNode => {
+  const { children, option, placeholder } = options;
+
+  return children ?? (option?.children || placeholder);
+};
+
 /**
  * This is a convenience type for casting the `event.currentTarget.value` of a
  * `Select`'s change event to be union of available values.
@@ -95,7 +131,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 {
   /**
@@ -205,6 +242,14 @@ export interface SelectProps<Value extends string>
    */
   disableSelectedIcon?: boolean;
 
+  /**
+   * @since 6.5.0
+   * @defaultValue `({ children, option, placeholder }) => children ?? (option?.children || placeholder)`
+   */
+  getSelectedOptionChildren?: (
+    options: GetSelectedOptionChildrenOptions<Value>
+  ) => ReactNode;
+
   /**
    * This should be the available `Option`s for the select to choose from. It
    * can also contain `OptGroup` or any other elements but only clicking on an
@@ -265,6 +310,7 @@ export function Select<Value extends string>(
     label,
     labelProps = {},
     selectedOptionProps,
+    getSelectedOptionChildren = defaultGetSelectedOptionChildren,
     icon: propIcon,
     value,
     defaultValue,
@@ -350,10 +396,16 @@ export function Select<Value extends string>(
       >
         <SelectedOption
           option={currentOption}
-          placeholder={placeholder}
           disableAddon={disableOptionAddon}
           {...selectedOptionProps}
-        />
+        >
+          {getSelectedOptionChildren({
+            value: currentValue,
+            option: currentOption,
+            placeholder,
+            children: selectedOptionProps?.children,
+          })}
+        </SelectedOption>
         <input
           aria-hidden
           id={inputId}

package/src/form/SelectedOption.tsx

@@ -1,5 +1,5 @@
 import { cnb } from "cnbuilder";
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 
 import { Box, type BoxProps } from "../box/Box.js";
 import { cssUtils } from "../cssUtils.js";
@@ -12,7 +12,6 @@ import { textField } from "./textFieldStyles.js";
  */
 export interface SelectedOptionProps extends BoxProps {
   option: OptionProps | undefined;
-  placeholder?: ReactNode;
   disableAddon: boolean;
 }
 
@@ -29,11 +28,10 @@ export function SelectedOption(props: SelectedOptionProps): ReactElement {
     className,
     disableWrap = true,
     disablePadding = true,
-    placeholder,
     ...remaining
   } = props;
 
-  let children = option?.children || placeholder;
+  let { children } = remaining;
   // when the children are a string or number, wrap it in additional span so
   // that overflow can be ellipsis-ed
   if (typeof children === "string" || typeof children === "number") {

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" | "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> {}
 
 /**