@react-md/core 6.3.3 → 6.4.0

package/src/divider/Divider.tsx

@@ -8,8 +8,7 @@ export type DividerElement = HTMLHRElement | HTMLDivElement;
  * @since 6.0.0 Extends the {@link DividerClassNameOptions}
  */
 export interface DividerProps
-  extends HTMLAttributes<DividerElement>,
-    DividerClassNameOptions {}
+  extends HTMLAttributes<DividerElement>, DividerClassNameOptions {}
 
 /**
  * @example Simple Example

package/src/draggable/useDraggable.ts

@@ -84,8 +84,7 @@ export interface ControllableDraggableStateOptions {
  * @since 6.0.0
  */
 export interface BaseDraggableOptions<E extends HTMLElement>
-  extends DraggableEventHandlers<E>,
-    ControllableDraggableStateOptions {
+  extends DraggableEventHandlers<E>, ControllableDraggableStateOptions {
   /**
    * An optional ref to merge with the returned
    * {@link DraggableImplementation.draggableRef}.
@@ -275,8 +274,9 @@ export type DraggableOptions<E extends HTMLElement = HTMLElement> =
 /**
  * @since 6.0.0
  */
-export interface DraggableImplementation<E extends HTMLElement = HTMLElement>
-  extends Required<DraggableEventHandlers<E>> {
+export interface DraggableImplementation<
+  E extends HTMLElement = HTMLElement,
+> extends Required<DraggableEventHandlers<E>> {
   mouseEventHandlers: Required<DraggableMouseEventHandlers<E>>;
   touchEventHandlers: Required<DraggableTouchEventHandlers<E>>;
   keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>>;

package/src/draggable/utils.ts

@@ -120,8 +120,10 @@ export const getRelativeDragPosition = (
 /**
  * @internal
  */
-interface UpdateDragPositionOptions
-  extends Omit<RelativeDragPositionOptions, "container"> {
+interface UpdateDragPositionOptions extends Omit<
+  RelativeDragPositionOptions,
+  "container"
+> {
   event: ClientPositionEvent;
   nodeRef: RefObject<HTMLElement>;
   focus?: boolean;

package/src/expansion-panel/ExpansionPanelHeader.tsx

@@ -17,8 +17,7 @@ import { expansionPanelButton, expansionPanelHeading } from "./styles.js";
  * @since 6.0.0 Updated to include additional heading/Typography
  * props.
  */
-export interface ExpansionPanelHeaderProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ExpansionPanelHeaderProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   id: string;
 
   /**

package/src/files/FileInput.tsx

@@ -27,7 +27,8 @@ export type FileInputHTMLAttributes = Omit<
  * longer required.
  */
 export interface FileInputProps
-  extends ButtonClassNameThemeOptions,
+  extends
+    ButtonClassNameThemeOptions,
     FileInputHTMLAttributes,
     ComponentWithRippleProps {
   /**

package/src/files/useFileUpload.ts

@@ -67,8 +67,9 @@ export interface FileUploadState<CustomError = never> {
  * @since 2.9.0
  * @internal
  */
-export interface FileUploadHookState<CustomError = never>
-  extends FileUploadState<CustomError> {
+export interface FileUploadHookState<
+  CustomError = never,
+> extends FileUploadState<CustomError> {
   /**
    * All the current readers used for uploading files to the browser.
    *
@@ -86,8 +87,7 @@ export interface FileUploadHookState<CustomError = never>
  * @since 2.9.0
  */
 export interface FileUploadOptions<E extends HTMLElement, CustomError = never>
-  extends FileUploadHandlers<E>,
-    FileValidationOptions {
+  extends FileUploadHandlers<E>, FileValidationOptions {
   /**
    * Setting this value to a number greater than `0` will update the browser
    * upload process to queue the uploads in chunks instead of all at once. This
@@ -153,8 +153,8 @@ export interface FileUploadActions {
 export interface FileUploadHookReturnValue<
   E extends HTMLElement = HTMLElement,
   CustomError = never,
-> extends FileUploadActions,
-    Required<FileUploadHandlers<E>> {
+>
+  extends FileUploadActions, Required<FileUploadHandlers<E>> {
   /** {@inheritDoc FileUploadState.errors} */
   errors: readonly FileValidationError<CustomError>[];
 

package/src/files/validation.ts

@@ -283,8 +283,7 @@ export interface FileValidationOptions {
 }
 
 /** @since 2.9.0 */
-export interface FilesValidationOptions
-  extends Required<FileValidationOptions> {
+export interface FilesValidationOptions extends Required<FileValidationOptions> {
   /**
    * The total number of bytes in the {@link FileUploadHookReturnValue.stats}
    * list. This is really just:

package/src/focus/useFocusContainer.ts

@@ -50,8 +50,9 @@ export type FocusContainerTransitionCallbacks = TransitionCallbacks;
  * @since 6.3.2 Fixed by extending `TransitionCallbacks` after the
  * `onEnteredOnce` and `onExitedOnce` support was added to CSS transitions.
  */
-export interface FocusContainerTransitionOptions<E extends HTMLElement>
-  extends TransitionCallbacks {
+export interface FocusContainerTransitionOptions<
+  E extends HTMLElement,
+> extends TransitionCallbacks {
   /**
    * An optional ref that will be merged with the
    * {@link FocusContainerImplementation.nodeRef}
@@ -83,8 +84,7 @@ export interface FocusContainerComponentProps {
 
 /** @since 6.0.0 */
 export interface FocusContainerOptions<E extends HTMLElement>
-  extends FocusContainerTransitionOptions<E>,
-    FocusContainerComponentProps {
+  extends FocusContainerTransitionOptions<E>, FocusContainerComponentProps {
   onKeyDown?: KeyboardEventHandler<E>;
   /**
    * This to `true` will capture the current focused element as a focus target

package/src/form/Fieldset.tsx

@@ -8,7 +8,8 @@ import { type FieldsetClassNameOptions, fieldset } from "./fieldsetStyles.js";
  * yourself manually instead of using a prop.
  */
 export interface FieldsetProps
-  extends FieldsetHTMLAttributes<HTMLFieldSetElement>,
+  extends
+    FieldsetHTMLAttributes<HTMLFieldSetElement>,
     FieldsetClassNameOptions {}
 
 /**
@@ -30,14 +31,34 @@ export interface FieldsetProps
  * }
  * ```
  *
+ * @example Floating Legend Example
+ * ```tsx
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Fieldset } from "@react-md/core/form/Fieldset";
+ * import { Legend } from "@react-md/core/form/Legend";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Form>
+ *       <Fieldset floatingLegend>
+ *         <Legend floating>Some Title</Legend>
+ *         // form components
+ *       </Fieldset>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ * ```
+ *
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
  */
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   function Fieldset(props, ref) {
     const {
       className,
-      fullWidth = false,
-      browserStyles = false,
+      fullWidth,
+      browserStyles,
+      floatingLegend,
       children,
       ...remaining
     } = props;
@@ -50,6 +71,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           className,
           fullWidth,
           browserStyles,
+          floatingLegend,
         })}
       >
         {children}

package/src/form/FormMessageContainer.tsx

@@ -12,8 +12,7 @@ import { type FormMessageProps } from "./types.js";
  * @since 2.5.0
  */
 export interface FormMessageContainerProps
-  extends HTMLAttributes<HTMLDivElement>,
-    FormMessageContainerClassNameOptions {
+  extends HTMLAttributes<HTMLDivElement>, FormMessageContainerClassNameOptions {
   /**
    * If the extension doesn't actually want to render the `FormMessage`
    * component, these props are optional. It kind of eliminates the whole

package/src/form/FormMessageCounter.tsx

@@ -8,8 +8,7 @@ import {
 import { formMessageCounter } from "./formMessageStyles.js";
 
 /** @since 2.9.0 */
-export interface FormMessageCounterProps
-  extends HTMLAttributes<HTMLSpanElement> {
+export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {
   /**
    * The children to display in the counter. This is normally a string like:
    *

package/src/form/InputToggle.tsx

@@ -149,7 +149,8 @@ export interface InputToggleLabelProps {
  * @since 6.0.0
  */
 export interface BaseInputToggleProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
+  extends
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
     FormMessageContainerExtension,
     FormComponentStates,
     ConfigurableInputToggleIconProps,
@@ -194,8 +195,7 @@ export interface IndeterminateCheckboxProps {
 }
 
 export interface CheckboxProps
-  extends BaseInputToggleProps,
-    IndeterminateCheckboxProps {}
+  extends BaseInputToggleProps, IndeterminateCheckboxProps {}
 
 /** @since 6.0.0 */
 export interface CheckboxInputToggleProps extends CheckboxProps {

package/src/form/Legend.tsx

@@ -1,35 +1,80 @@
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 
-import { cssUtils } from "../cssUtils.js";
 import { Typography, type TypographyProps } from "../typography/Typography.js";
+import { type LegendClassNameOptions, legend } from "./legendStyles.js";
 
 /**
  * @since 6.0.0
+ * @since 6.4.0 Extends the `LegendClassNameOptions`
  */
-export interface LegendProps extends TypographyProps {
-  /**
-   * @defaultValue `false`
-   */
-  srOnly?: boolean;
-}
+export interface LegendProps extends TypographyProps, LegendClassNameOptions {}
 
 /**
  * This should be used within a `Fieldset` to apply a label.
  *
+ * @example Simple Example
+ * ```tsx
+ * <Fieldset>
+ *   <Legend>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
+ * @example Visible to Screen readers only
+ * ```tsx
+ * <Fieldset>
+ *   <Legend srOnly>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
+ * @example Acting as a floating label
+ * ```tsx
+ * <Fieldset floatingLegend>
+ *   <Legend floating>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
  * @since 6.0.0
  */
 export const Legend = forwardRef<HTMLLegendElement, LegendProps>(
   function Legend(props, ref) {
-    const { srOnly = false, className, children, ...remaining } = props;
+    const {
+      srOnly,
+      floating,
+      theme,
+      gap,
+      dense,
+      active,
+      error,
+      disabled,
+      stacked,
+      reversed,
+      className,
+      children,
+      ...remaining
+    } = props;
 
     return (
       <Typography
         {...remaining}
         as="legend"
         ref={ref}
-        className={cnb("rmd-legend", cssUtils({ srOnly }), className)}
+        className={legend({
+          srOnly,
+          floating,
+          theme,
+          gap,
+          dense,
+          active,
+          error,
+          disabled,
+          stacked,
+          reversed,
+          className,
+        })}
       >
         {children}
       </Typography>

package/src/form/Listbox.tsx

@@ -16,8 +16,7 @@ import {
  * @internal
  */
 export interface ListboxProps<Value extends ListboxValue>
-  extends MenuProps,
-    ListboxProviderOptions<Value> {
+  extends MenuProps, ListboxProviderOptions<Value> {
   nodeRef?: Ref<HTMLDivElement>;
   children: ReactNode;
 }

package/src/form/ListboxProvider.ts

@@ -47,8 +47,9 @@ export type ListboxValue = string | number | null | object;
 /**
  * @since 6.3.0
  */
-export interface ListboxProviderOptions<Value extends ListboxValue>
-  extends OptionSelectedIconProps {
+export interface ListboxProviderOptions<
+  Value extends ListboxValue,
+> extends OptionSelectedIconProps {
   value: ListboxValue | readonly NonNullable<ListboxValue>[];
   setValue: Dispatch<NonNullable<Value>>;
 }

package/src/form/NativeSelect.tsx

@@ -23,7 +23,8 @@ import {
  * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
  */
 export interface NativeSelectProps
-  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">,
+  extends
+    Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">,
     UserAgentAutocompleteProps,
     FormFieldOptions {
   /**

package/src/form/Password.tsx

@@ -64,8 +64,10 @@ export interface ConfigurableVisibilityIcon {
  * @since 6.0.0 Merged the `getVisibilityIcon` prop behavior into the
  * `visibilityIcon` prop.
  */
-export interface PasswordProps
-  extends Omit<TextFieldProps, "type" | "rightAddon"> {
+export interface PasswordProps extends Omit<
+  TextFieldProps,
+  "type" | "rightAddon"
+> {
   /**
    * @defaultValue `"password"`
    * @since 6.0.0 Defaults to `"password"`

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,