@react-md/core 6.5.1 → 7.0.0

package/src/form/Fieldset.tsx

@@ -1,4 +1,8 @@
-import { type FieldsetHTMLAttributes, forwardRef } from "react";
+import {
+  type FieldsetHTMLAttributes,
+  type ReactElement,
+  type Ref,
+} from "react";
 
 import { type FieldsetClassNameOptions, fieldset } from "./fieldsetStyles.js";
 
@@ -10,7 +14,9 @@ import { type FieldsetClassNameOptions, fieldset } from "./fieldsetStyles.js";
 export interface FieldsetProps
   extends
     FieldsetHTMLAttributes<HTMLFieldSetElement>,
-    FieldsetClassNameOptions {}
+    FieldsetClassNameOptions {
+  ref?: Ref<HTMLFieldSetElement>;
+}
 
 /**
  * @example Simple Example
@@ -52,30 +58,29 @@ export interface FieldsetProps
  *
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
  */
-export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
-  function Fieldset(props, ref) {
-    const {
-      className,
-      fullWidth,
-      browserStyles,
-      floatingLegend,
-      children,
-      ...remaining
-    } = props;
+export function Fieldset(props: FieldsetProps): ReactElement {
+  const {
+    ref,
+    className,
+    fullWidth,
+    browserStyles,
+    floatingLegend,
+    children,
+    ...remaining
+  } = props;
 
-    return (
-      <fieldset
-        {...remaining}
-        ref={ref}
-        className={fieldset({
-          className,
-          fullWidth,
-          browserStyles,
-          floatingLegend,
-        })}
-      >
-        {children}
-      </fieldset>
-    );
-  }
-);
+  return (
+    <fieldset
+      {...remaining}
+      ref={ref}
+      className={fieldset({
+        className,
+        fullWidth,
+        browserStyles,
+        floatingLegend,
+      })}
+    >
+      {children}
+    </fieldset>
+  );
+}

package/src/form/Form.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-import { type FormHTMLAttributes, forwardRef } from "react";
+import { type FormHTMLAttributes, type ReactElement, type Ref } from "react";
 
 const noop = (): void => {
   // do nothing
 };
 
 export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  ref?: Ref<HTMLFormElement>;
+
   /**
    * Boolean if the form should no longer prevent default submit behavior. If
    * you enable this prop you should honestly just use a `<form>` element
@@ -26,29 +28,28 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
  *
  * @see {@link https://react-md.dev/components/form | Form Demos}
  */
-export const Form = forwardRef<HTMLFormElement, FormProps>(
-  function Form(props, ref) {
-    const {
-      children,
-      onSubmit = noop,
-      disablePreventDefault = false,
-      ...remaining
-    } = props;
+export function Form(props: FormProps): ReactElement {
+  const {
+    ref,
+    children,
+    onSubmit = noop,
+    disablePreventDefault = false,
+    ...remaining
+  } = props;
 
-    return (
-      <form
-        {...remaining}
-        onSubmit={(event) => {
-          if (!disablePreventDefault) {
-            event.preventDefault();
-          }
+  return (
+    <form
+      {...remaining}
+      onSubmit={(event) => {
+        if (!disablePreventDefault) {
+          event.preventDefault();
+        }
 
-          onSubmit(event);
-        }}
-        ref={ref}
-      >
-        {children}
-      </form>
-    );
-  }
-);
+        onSubmit(event);
+      }}
+      ref={ref}
+    >
+      {children}
+    </form>
+  );
+}

package/src/form/FormMessage.tsx

@@ -1,14 +1,22 @@
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { useEnsuredId } from "../useEnsuredId.js";
 import { FormMessageCounter } from "./FormMessageCounter.js";
 import { getFormConfig } from "./formConfig.js";
 import { formMessage, formMessageText } from "./formMessageStyles.js";
 import {
+  type ConfigurableFormMessageProps,
   type FormMessageInputLengthCounterProps,
-  type FormMessageProps,
 } from "./types.js";
 
+/**
+ * @since 7.0.0 This was defined inline
+ */
+export interface FormMessageProps
+  extends
+    ConfigurableFormMessageProps,
+    Partial<FormMessageInputLengthCounterProps> {}
+
 /**
  * The `FormMessage` component is used to create additional helper messages or
  * error messages and generally placed below the related `TextField`. If a
@@ -20,11 +28,9 @@ import {
  *
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  */
-export const FormMessage = forwardRef<
-  HTMLDivElement,
-  FormMessageProps & Partial<FormMessageInputLengthCounterProps>
->(function FormMessage(props, ref) {
+export function FormMessage(props: FormMessageProps): ReactElement {
   const {
+    ref,
     id: propId,
     role,
     className,
@@ -81,4 +87,4 @@ export const FormMessage = forwardRef<
       )}
     </div>
   );
-});
+}

package/src/form/FormMessageContainer.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { type PropsWithRef } from "../types.js";
 import { FormMessage } from "./FormMessage.js";
@@ -6,19 +6,21 @@ import {
   type FormMessageContainerClassNameOptions,
   formMessageContainer,
 } from "./formMessageContainerStyles.js";
-import { type FormMessageProps } from "./types.js";
+import { type ConfigurableFormMessageProps } from "./types.js";
 
 /**
  * @since 2.5.0
  */
 export interface FormMessageContainerProps
   extends HTMLAttributes<HTMLDivElement>, FormMessageContainerClassNameOptions {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * If the extension doesn't actually want to render the `FormMessage`
    * component, these props are optional. It kind of eliminates the whole
    * purpose of this component though.
    */
-  messageProps?: PropsWithRef<FormMessageProps>;
+  messageProps?: PropsWithRef<ConfigurableFormMessageProps>;
 }
 
 /**
@@ -28,11 +30,12 @@ export interface FormMessageContainerProps
  * @see {@link https://react-md.dev/components/form-message | FormMessage Demos}
  * @since 2.5.0
  */
-export const FormMessageContainer = forwardRef<
-  HTMLDivElement,
-  FormMessageContainerProps
->(function FormMessageContainer(props, ref) {
-  const { className, children, inline, messageProps, ...remaining } = props;
+export function FormMessageContainer(
+  props: FormMessageContainerProps
+): ReactElement {
+  const { ref, className, children, inline, messageProps, ...remaining } =
+    props;
+
   if (!messageProps) {
     return <>{children}</>;
   }
@@ -47,4 +50,4 @@ export const FormMessageContainer = forwardRef<
       <FormMessage {...messageProps} />
     </div>
   );
-});
+}

package/src/form/FormMessageCounter.tsx

@@ -2,13 +2,15 @@ import {
   type HTMLAttributes,
   type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import { formMessageCounter } from "./formMessageStyles.js";
 
 /** @since 2.9.0 */
 export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {
+  ref?: Ref<HTMLSpanElement>;
+
   /**
    * The children to display in the counter. This is normally a string like:
    *
@@ -50,11 +52,10 @@ export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement>
  * @since 2.9.0
  * @since 6.3.0 Supports refs.
  */
-export const FormMessageCounter = forwardRef<
-  HTMLSpanElement,
-  FormMessageCounterProps
->(function FormMessageCounter(props, ref): ReactElement {
-  const { children, className, ...remaining } = props;
+export function FormMessageCounter(
+  props: FormMessageCounterProps
+): ReactElement {
+  const { ref, children, className, ...remaining } = props;
 
   return (
     <span
@@ -65,4 +66,4 @@ export const FormMessageCounter = forwardRef<
       {children}
     </span>
   );
-});
+}

package/src/form/InputToggle.tsx

@@ -6,8 +6,9 @@ import {
   type HTMLAttributes,
   type InputHTMLAttributes,
   type LabelHTMLAttributes,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import { type ComponentWithRippleProps } from "../interaction/types.js";
@@ -156,6 +157,8 @@ export interface BaseInputToggleProps
     ConfigurableInputToggleIconProps,
     InputToggleLabelProps,
     ComponentWithRippleProps {
+  ref?: Ref<HTMLInputElement>;
+
   /**
    * @see https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing
    * @defaultValue `type === "checkbox" ? "off" : undefined`
@@ -231,117 +234,112 @@ export type InputToggleProps = CheckboxInputToggleProps | RadioInputToggleProps;
  * @since 6.0.0 Now supports the `FormMessage` behavior and requires
  * different icons for each checked state.
  */
-export const InputToggle = forwardRef<HTMLInputElement, InputToggleProps>(
-  function InputToggle(props, ref) {
-    const {
-      id: propId,
-      type,
-      label,
-      labelProps,
-      style,
-      className,
-      autoComplete = type === "checkbox" ? "off" : undefined,
-      disableLabelGap = false,
-      stacked = false,
-      iconAfter = false,
-      size = "normal",
-      error = false,
-      active = false,
-      indeterminate = false,
-      messageProps,
-      messageContainerProps,
-      icon,
-      checkedIcon,
-      indeterminateIcon,
-      iconProps,
-      iconStyle,
-      iconClassName,
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseLeave,
-      onDragStart,
-      onMouseUp,
-      onTouchEnd,
-      onTouchMove,
-      onTouchStart,
-      disableRipple,
-      ...remaining
-    } = props as CheckboxInputToggleProps;
-    const { disabled = false, checked } = props;
+export function InputToggle(props: InputToggleProps): ReactElement {
+  const {
+    id: propId,
+    ref,
+    type,
+    label,
+    labelProps,
+    style,
+    className,
+    autoComplete = type === "checkbox" ? "off" : undefined,
+    disableLabelGap = false,
+    stacked = false,
+    iconAfter = false,
+    size = "normal",
+    error = false,
+    active = false,
+    indeterminate = false,
+    messageProps,
+    messageContainerProps,
+    icon,
+    checkedIcon,
+    indeterminateIcon,
+    iconProps,
+    iconStyle,
+    iconClassName,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseLeave,
+    onDragStart,
+    onMouseUp,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
+    disableRipple,
+    ...remaining
+  } = props as CheckboxInputToggleProps;
+  const { disabled = false, checked } = props;
 
-    const id = useEnsuredId(propId, type);
-    const { pressedClassName, ripples, handlers } = useElementInteraction({
-      mode: disableRipple ? "none" : undefined,
-      disabled,
-      onBlur,
-      onClick,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseLeave,
-      onDragStart,
-      onMouseUp,
-      onTouchEnd,
-      onTouchMove,
-      onTouchStart,
-    });
+  const id = useEnsuredId(propId, type);
+  const { pressedClassName, ripples, handlers } = useElementInteraction({
+    mode: disableRipple ? "none" : undefined,
+    disabled,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseLeave,
+    onDragStart,
+    onMouseUp,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
+  });
 
-    // set on the `remaining` object to bypass the eslint rule about
-    // aria-checked not being valid for textbox role
-    remaining["aria-checked"] =
-      (remaining["aria-checked"] ?? indeterminate) ? "mixed" : undefined;
+  // set on the `remaining` object to bypass the eslint rule about
+  // aria-checked not being valid for textbox role
+  remaining["aria-checked"] =
+    (remaining["aria-checked"] ?? indeterminate) ? "mixed" : undefined;
 
-    return (
-      <FormMessageContainer
-        {...messageContainerProps}
-        messageProps={messageProps}
+  return (
+    <FormMessageContainer
+      {...messageContainerProps}
+      messageProps={messageProps}
+    >
+      <Label
+        {...labelProps}
+        gap={!disableLabelGap}
+        style={style}
+        stacked={stacked}
+        reversed={!iconAfter}
+        active={active}
+        error={error}
+        disabled={disabled}
+        className={className}
       >
-        <Label
-          {...labelProps}
-          gap={!disableLabelGap}
-          style={style}
-          stacked={stacked}
-          reversed={!iconAfter}
-          active={active}
+        {label}
+        <InputToggleIcon
+          style={iconStyle}
+          {...iconProps}
+          className={cnb(pressedClassName, iconClassName, iconProps?.className)}
           error={error}
+          checked={checked}
           disabled={disabled}
-          className={className}
+          size={size}
+          type={type}
+          icon={icon}
+          checkedIcon={checkedIcon}
+          indeterminate={indeterminate}
+          indeterminateIcon={indeterminateIcon}
         >
-          {label}
-          <InputToggleIcon
-            style={iconStyle}
-            {...iconProps}
-            className={cnb(
-              pressedClassName,
-              iconClassName,
-              iconProps?.className
-            )}
-            error={error}
-            checked={checked}
-            disabled={disabled}
-            size={size}
+          <input
+            {...remaining}
+            {...handlers}
+            autoComplete={autoComplete}
+            id={id}
+            ref={ref}
             type={type}
-            icon={icon}
-            checkedIcon={checkedIcon}
-            indeterminate={indeterminate}
-            indeterminateIcon={indeterminateIcon}
-          >
-            <input
-              {...remaining}
-              {...handlers}
-              autoComplete={autoComplete}
-              id={id}
-              ref={ref}
-              type={type}
-              className="rmd-hidden-input"
-            />
-            {ripples}
-          </InputToggleIcon>
-        </Label>
-      </FormMessageContainer>
-    );
-  }
-);
+            className="rmd-hidden-input"
+          />
+          {ripples}
+        </InputToggleIcon>
+      </Label>
+    </FormMessageContainer>
+  );
+}

package/src/form/InputToggleIcon.tsx

@@ -1,5 +1,10 @@
 import { cnb } from "cnbuilder";
-import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { getIcon } from "../icon/config.js";
 import { FORM_CONFIG } from "./formConfig.js";
@@ -13,7 +18,10 @@ import { type InputToggleSize, inputToggle } from "./inputToggleStyles.js";
  * @internal
  */
 export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
+  ref?: Ref<HTMLSpanElement>;
+
   type: "checkbox" | "radio";
+
   /**
    * Note: If this is `undefined` and the {@link FORM_CONFIG.uncontrolledToggles} is `false`,
    * the icon state won't work.
@@ -59,11 +67,9 @@ export interface InputToggleIconProps extends HTMLAttributes<HTMLSpanElement> {
  * of a css overlay hack.
  * @internal
  */
-export const InputToggleIcon = forwardRef<
-  HTMLSpanElement,
-  InputToggleIconProps
->(function InputToggleIcon(props, ref) {
+export function InputToggleIcon(props: InputToggleIconProps): ReactElement {
   const {
+    ref,
     type,
     size = "normal",
     icon: propIcon,
@@ -125,4 +131,4 @@ export const InputToggleIcon = forwardRef<
       {icon}
     </span>
   );
-});
+}

package/src/form/Label.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { label } from "./labelStyles.js";
 import { type LabelProps } from "./types.js";
@@ -15,44 +15,43 @@ import { type LabelProps } from "./types.js";
  * @since 6.0.0 Updated to be usable externally and combines the
  * floating label styles instead of having separate components.
  */
-export const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  function Label(props, ref) {
-    const {
-      gap,
-      error,
-      dense,
-      active,
-      stacked,
-      reversed,
-      disabled,
-      floating,
-      inactive,
-      floatingActive = active,
-      className,
-      children,
-      ...remaining
-    } = props;
+export function Label(props: LabelProps): ReactElement {
+  const {
+    ref,
+    gap,
+    error,
+    dense,
+    active,
+    stacked,
+    reversed,
+    disabled,
+    floating,
+    inactive,
+    floatingActive = active,
+    className,
+    children,
+    ...remaining
+  } = props;
 
-    return (
-      <label
-        ref={ref}
-        {...remaining}
-        className={label({
-          gap,
-          error,
-          dense,
-          active,
-          stacked,
-          reversed,
-          disabled,
-          floating,
-          floatingActive,
-          inactive,
-          className,
-        })}
-      >
-        {children}
-      </label>
-    );
-  }
-);
+  return (
+    <label
+      ref={ref}
+      {...remaining}
+      className={label({
+        gap,
+        error,
+        dense,
+        active,
+        stacked,
+        reversed,
+        disabled,
+        floating,
+        floatingActive,
+        inactive,
+        className,
+      })}
+    >
+      {children}
+    </label>
+  );
+}