@react-md/core 6.5.2 → 7.0.0

package/src/form/TextField.tsx

@@ -2,7 +2,8 @@ import {
   type CSSProperties,
   type HTMLAttributes,
   type InputHTMLAttributes,
-  forwardRef,
+  type ReactElement,
+  type Ref,
 } from "react";
 
 import { type PropsWithRef } from "../types.js";
@@ -55,6 +56,8 @@ export interface TextFieldProps
     TextFieldInputAttributes,
     UserAgentAutocompleteProps,
     FormFieldOptions {
+  ref?: Ref<HTMLInputElement>;
+
   /**
    * @defaultValue `"text-field-" + useId()`
    */
@@ -122,112 +125,111 @@ export interface TextFieldProps
  *
  * @see {@link https://react-md.dev/components/textfield | TextField Demos}
  */
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  function TextField(props, ref) {
-    const {
-      id: propId,
-      style,
-      className,
-      type = "text",
-      label,
-      labelProps,
-      labelStyle,
-      labelClassName,
-      autoCompleteValue,
-      autoComplete = autoCompleteValue,
-      name = autoCompleteValue,
-      dense,
-      error,
-      active,
-      inline,
-      leftAddon,
-      leftAddonProps,
-      rightAddon,
-      rightAddonProps,
-      disableLeftAddonStyles,
-      disableRightAddonStyles,
-      inputStyle,
-      inputClassName,
-      theme,
-      underlineDirection,
-      messageProps,
-      messageContainerProps,
-      containerProps,
-      ...remaining
-    } = props;
-    const { disabled, readOnly } = props;
-    const id = useEnsuredId(propId, "text-field");
+export function TextField(props: TextFieldProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    style,
+    className,
+    type = "text",
+    label,
+    labelProps,
+    labelStyle,
+    labelClassName,
+    autoCompleteValue,
+    autoComplete = autoCompleteValue,
+    name = autoCompleteValue,
+    dense,
+    error,
+    active,
+    inline,
+    leftAddon,
+    leftAddonProps,
+    rightAddon,
+    rightAddonProps,
+    disableLeftAddonStyles,
+    disableRightAddonStyles,
+    inputStyle,
+    inputClassName,
+    theme,
+    underlineDirection,
+    messageProps,
+    messageContainerProps,
+    containerProps,
+    ...remaining
+  } = props;
+  const { disabled, readOnly } = props;
+  const id = useEnsuredId(propId, "text-field");
 
-    let { placeholder = "" } = props;
-    if (label && !placeholder) {
-      // See the placeholder type definition comments for information
-      placeholder = " ";
-    }
+  let { placeholder = "" } = props;
+  if (label && !placeholder) {
+    // See the placeholder type definition comments for information
+    placeholder = " ";
+  }
 
-    return (
-      <FormMessageContainer
-        inline={inline}
-        {...messageContainerProps}
-        messageProps={
-          messageProps && {
-            error,
-            theme,
-            ...messageProps,
-          }
+  return (
+    <FormMessageContainer
+      inline={inline}
+      {...messageContainerProps}
+      messageProps={
+        messageProps && {
+          error,
+          theme,
+          ...messageProps,
         }
+      }
+    >
+      <TextFieldContainer
+        {...containerProps}
+        style={style}
+        className={className}
+        theme={theme}
+        label={!!label}
+        error={error}
+        dense={dense}
+        inline={inline}
+        active={active}
+        readOnly={readOnly}
+        disabled={disabled}
+        leftAddon={leftAddon}
+        leftAddonProps={leftAddonProps}
+        rightAddon={rightAddon}
+        rightAddonProps={rightAddonProps}
+        underlineDirection={underlineDirection}
+        disableLeftAddonStyles={disableLeftAddonStyles}
+        disableRightAddonStyles={disableRightAddonStyles}
       >
-        <TextFieldContainer
-          {...containerProps}
-          style={style}
-          className={className}
-          theme={theme}
-          label={!!label}
-          error={error}
-          dense={dense}
-          inline={inline}
-          active={active}
-          readOnly={readOnly}
+        <input
+          {...remaining}
+          id={id}
+          ref={ref}
+          type={type}
+          name={name}
           disabled={disabled}
-          leftAddon={leftAddon}
-          leftAddonProps={leftAddonProps}
-          rightAddon={rightAddon}
-          rightAddonProps={rightAddonProps}
-          underlineDirection={underlineDirection}
-          disableLeftAddonStyles={disableLeftAddonStyles}
-          disableRightAddonStyles={disableRightAddonStyles}
-        >
-          <input
-            {...remaining}
-            id={id}
-            ref={ref}
-            type={type}
-            name={name}
+          placeholder={placeholder}
+          autoComplete={autoComplete}
+          style={inputStyle}
+          className={textField({
+            className: inputClassName,
+            placeholderHidden: !!label && !active,
+          })}
+        />
+        {label && (
+          <Label
+            floating
+            dense={dense}
+            error={error}
+            active={active}
             disabled={disabled}
-            placeholder={placeholder}
-            autoComplete={autoComplete}
-            style={inputStyle}
-            className={textField({
-              className: inputClassName,
-              placeholderHidden: !!label && !active,
-            })}
-          />
-          {label && (
-            <Label
-              floating
-              dense={dense}
-              error={error}
-              active={active}
-              disabled={disabled}
-              {...labelProps}
-              htmlFor={id}
-              style={labelProps?.style ?? labelStyle}
-              className={labelProps?.className ?? labelClassName}
-            >
-              {label}
-            </Label>
-          )}
-        </TextFieldContainer>
-      </FormMessageContainer>
-    );
-  }
-);
+            {...labelProps}
+            htmlFor={id}
+            style={labelProps?.style ?? labelStyle}
+            className={labelProps?.className ?? labelClassName}
+          >
+            {label}
+          </Label>
+        )}
+      </TextFieldContainer>
+    </FormMessageContainer>
+  );
+}

package/src/form/TextFieldAddon.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { textFieldAddon } from "./textFieldAddonStyles.js";
 import { type TextFieldAddonProps } from "./types.js";
@@ -7,37 +7,38 @@ import { type TextFieldAddonProps } from "./types.js";
  * This component is used to add an icon before or after the text field with
  * correct styling.
  */
-export const TextFieldAddon = forwardRef<HTMLSpanElement, TextFieldAddonProps>(
-  function TextFieldAddon(props, ref) {
-    const {
-      after,
-      disabled,
-      pointerEvents,
-      children,
-      className,
-      ...remaining
-    } = props;
+export function TextFieldAddon(
+  props: TextFieldAddonProps
+): ReactElement | null {
+  const {
+    ref,
+    after,
+    disabled,
+    pointerEvents,
+    children,
+    className,
+    ...remaining
+  } = props;
 
-    if (!children) {
-      return null;
-    }
-
-    if (disabled) {
-      return <>{children}</>;
-    }
+  if (!children) {
+    return null;
+  }
 
-    return (
-      <span
-        {...remaining}
-        ref={ref}
-        className={textFieldAddon({
-          after,
-          presentational: !pointerEvents,
-          className,
-        })}
-      >
-        {children}
-      </span>
-    );
+  if (disabled) {
+    return <>{children}</>;
   }
-);
+
+  return (
+    <span
+      {...remaining}
+      ref={ref}
+      className={textFieldAddon({
+        after,
+        presentational: !pointerEvents,
+        className,
+      })}
+    >
+      {children}
+    </span>
+  );
+}

package/src/form/TextFieldContainer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { TextFieldAddon } from "./TextFieldAddon.js";
 import { getFormConfig } from "./formConfig.js";
@@ -9,6 +9,8 @@ import { type TextFieldContainerOptions } from "./types.js";
 
 export interface TextFieldContainerProps
   extends HTMLAttributes<HTMLDivElement>, TextFieldContainerOptions {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * Set this to `true` if there is a floating label with the `TextField` or
    * `TextArea`.
@@ -27,11 +29,11 @@ export interface TextFieldContainerProps
  *
  * @internal
  */
-export const TextFieldContainer = forwardRef<
-  HTMLDivElement,
-  TextFieldContainerProps
->(function TextFieldContainer(props, ref) {
+export function TextFieldContainer(
+  props: TextFieldContainerProps
+): ReactElement {
   const {
+    ref,
     children,
     className,
     dense,
@@ -89,4 +91,4 @@ export const TextFieldContainer = forwardRef<
       </TextFieldAddon>
     </div>
   );
-});
+}

package/src/form/sliderUtils.ts

@@ -48,7 +48,7 @@ export type RequiredThumbProps = Pick<
   | "dragging"
   | keyof DraggableMouseEventHandlers<HTMLElement>
   | keyof DraggableTouchEventHandlers<HTMLElement>
-> & { ref: RefObject<HTMLSpanElement> };
+> & { ref: RefObject<HTMLSpanElement | null> };
 
 /**
  * @since 6.0.0

package/src/form/types.ts

@@ -4,6 +4,7 @@ import {
   type InputHTMLAttributes,
   type LabelHTMLAttributes,
   type ReactNode,
+  type Ref,
 } from "react";
 
 import { type PropsWithRef } from "../types.js";
@@ -276,10 +277,15 @@ export interface FormMessageClassNameOptions {
   theme?: FormTheme;
 }
 
-export interface FormMessageProps
+/**
+ * @since 7.0.0 Renamed from `FormMessageProps` to `ConfigurableFormMessageProps`
+ */
+export interface ConfigurableFormMessageProps
   extends
     Omit<HTMLAttributes<HTMLDivElement>, "minLength" | "maxLength">,
     FormMessageClassNameOptions {
+  ref?: Ref<HTMLDivElement>;
+
   /**
    * If this component is acting as a form-level error message handler, the role
    * should be updated to be `"alert"` for additional accessibility.
@@ -382,12 +388,12 @@ export interface FormMessageInputLengthCounterProps {
 }
 
 export interface FormMessageWithCounterProps
-  extends FormMessageProps, FormMessageInputLengthCounterProps {}
+  extends ConfigurableFormMessageProps, FormMessageInputLengthCounterProps {}
 
 /**
  * @since 6.0.0
  */
-export interface FormMessageWithoutCounterProps extends FormMessageProps {
+export interface FormMessageWithoutCounterProps extends ConfigurableFormMessageProps {
   length?: never;
   maxLength?: never;
   counterStyle?: never;
@@ -401,7 +407,7 @@ export interface FormMessageContainerExtension {
    * purpose of this component though.
    */
   messageProps?: PropsWithRef<
-    FormMessageProps & Partial<FormMessageInputLengthCounterProps>
+    ConfigurableFormMessageProps & Partial<FormMessageInputLengthCounterProps>
   >;
 
   /**
@@ -499,7 +505,9 @@ export interface LabelClassNameOptions {
 }
 
 export interface LabelProps
-  extends LabelHTMLAttributes<HTMLLabelElement>, LabelClassNameOptions {}
+  extends LabelHTMLAttributes<HTMLLabelElement>, LabelClassNameOptions {
+  ref?: Ref<HTMLLabelElement>;
+}
 
 /**
  * @since 6.0.0
@@ -518,6 +526,8 @@ export interface ConfigurableTextFieldAddonProps extends HTMLAttributes<HTMLSpan
  * @since 6.0.0 Split props into `ConfigurableTextFieldAddonProps`
  */
 export interface TextFieldAddonProps extends ConfigurableTextFieldAddonProps {
+  ref?: Ref<HTMLSpanElement>;
+
   /**
    * @defaultValue `false`
    */

package/src/form/useCombobox.ts

@@ -30,11 +30,7 @@ import {
 } from "../positioning/types.js";
 import { getTransitionCallbacks } from "../transition/getTransitionCallbacks.js";
 import { type TransitionCallbacks } from "../transition/types.js";
-import {
-  type NonNullMutableRef,
-  type UseStateInitializer,
-  type UseStateSetter,
-} from "../types.js";
+import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useEnsuredState } from "../useEnsuredState.js";
@@ -74,7 +70,7 @@ export interface ComboboxKeyboardMovementData<
    * @since 6.3.0 Renamed from `focusLast` to `focusLastRef` to support the new
    * actions.
    */
-  focusLastRef: NonNullMutableRef<boolean>;
+  focusLastRef: RefObject<boolean>;
 }
 
 /**
@@ -271,7 +267,7 @@ export interface ProvidedComboboxMenuProps<
   width: PositionWidth;
   /** @defaultValue `BELOW_CENTER_ANCHOR` */
   anchor: PositionAnchor;
-  fixedTo: RefObject<HTMLElement>;
+  fixedTo: RefObject<HTMLElement | null>;
   sheetProps: MenuSheetConfigurableProps &
     Required<ComboboxTransitionCallbacks>;
 }
@@ -295,10 +291,10 @@ export interface ComboboxImplementation<
   hide: () => void;
   visible: boolean;
   setVisible: UseStateSetter<boolean>;
-  focusLast: NonNullMutableRef<boolean>;
-  popupRef: RefObject<PopupEl>;
+  focusLast: RefObject<boolean>;
+  popupRef: RefObject<PopupEl | null>;
   popupProps: ComboboxWidgetPopupProps<PopupEl>;
-  comboboxRef: RefObject<ComboboxEl>;
+  comboboxRef: RefObject<ComboboxEl | null>;
   comboboxProps: ComboboxWidgetProps<ComboboxEl>;
   /**
    * Since the combobox usually uses the `Menu` as a popup element, this is a

package/src/form/useFormReset.ts

@@ -15,7 +15,7 @@ import {
  */
 export interface FormResetOptions {
   form?: string;
-  elementRef: RefObject<ChangeableHTMLElement>;
+  elementRef: RefObject<ChangeableHTMLElement | null>;
   onReset?: () => void;
   defaultValue?: string;
 }

package/src/form/useTextField.ts

@@ -17,8 +17,8 @@ import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { type TextFieldProps } from "./TextField.js";
 import {
+  type ConfigurableFormMessageProps,
   type FormMessageInputLengthCounterProps,
-  type FormMessageProps,
 } from "./types.js";
 import { useFormReset } from "./useFormReset.js";
 import {
@@ -53,7 +53,7 @@ export interface ErrorChangeHandlerOptions<
    * A ref containing the `TextField` or `TextArea` if you need access to that
    * DOM node for error reporting.
    */
-  ref: RefObject<E>;
+  ref: RefObject<E | null>;
 
   /**
    * The current name for the `TextField` or `TextArea`.
@@ -126,7 +126,7 @@ export interface TextFieldHookState {
  */
 export interface ProvidedFormMessageProps
   extends
-    Pick<FormMessageProps, "id" | "theme" | "children">,
+    Pick<ConfigurableFormMessageProps, "id" | "theme" | "children">,
     Required<Pick<TextFieldProps, "error">>,
     Partial<Pick<FormMessageInputLengthCounterProps, "length" | "maxLength">> {}
 
@@ -348,7 +348,7 @@ export interface TextFieldHookOptions<
 export interface TextFieldImplementation<
   E extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
 > extends TextFieldHookState {
-  fieldRef: RefObject<E>;
+  fieldRef: RefObject<E | null>;
   reset: () => void;
   setState: UseStateSetter<Readonly<TextFieldHookState>>;
   fieldProps: ProvidedTextFieldProps<E>;

package/src/hoverMode/useHoverMode.ts

@@ -172,7 +172,7 @@ export function useHoverMode(
     [visible, setVisible] = state;
   }
 
-  const visibilityTimeout = useRef<NodeJS.Timeout>();
+  const visibilityTimeout = useRef<NodeJS.Timeout>(undefined);
   const clearVisibilityTimeout = useCallback(() => {
     globalThis.clearTimeout(visibilityTimeout.current);
   }, []);

package/src/hoverMode/useHoverModeProvider.ts

@@ -1,8 +1,13 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-import { type NonNullMutableRef, type NonNullRef } from "../types.js";
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 const noop = (): void => {
   // do nothing
@@ -29,7 +34,7 @@ export interface SimpleHoverModeContext {
    * }
    * ```
    */
-  hoverTimeoutRef: NonNullRef<number | undefined>;
+  hoverTimeoutRef: RefObject<number | undefined>;
 
   /**
    * @example Main Usage
@@ -47,7 +52,7 @@ export interface SimpleHoverModeContext {
    * }
    * ```
    */
-  leaveTimeoutRef: NonNullRef<number>;
+  leaveTimeoutRef: RefObject<number>;
 
   /**
    * When this is called, the {@link hoverTimeoutRef} will be set to `0` and the
@@ -91,7 +96,7 @@ export interface HoverModeContext extends SimpleHoverModeContext {
    * hovered within the `HoverModeProvider`. This will be an empty string
    * when the hover mode is not active.
    */
-  activeIdRef: NonNullMutableRef<string>;
+  activeIdRef: RefObject<string>;
 
   /**
    * This ref can be used to disable transitions for a group of components using
@@ -103,7 +108,7 @@ export interface HoverModeContext extends SimpleHoverModeContext {
    *   disabled. This would normally be after a timeout for the `onExited`
    *   callback
    */
-  animatedOnceRef: NonNullMutableRef<boolean>;
+  animatedOnceRef: RefObject<boolean>;
 }
 
 /**
@@ -261,7 +266,7 @@ export function useHoverModeProvider(
   const hoverTimeoutRef = useRef(hoverTimeout);
   const leaveTimeoutRef = useRef(leaveTimeout);
   const animatedOnceRef = useRef(!!defaultActiveId);
-  const disableHoverModeTimeout = useRef<NodeJS.Timeout>();
+  const disableHoverModeTimeout = useRef<NodeJS.Timeout>(undefined);
   const clearDisableTimer = useCallback(() => {
     globalThis.clearTimeout(disableHoverModeTimeout.current);
   }, []);

package/src/icon/FontIcon.tsx

@@ -1,8 +1,9 @@
 import {
   type AriaAttributes,
   type HTMLAttributes,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import { type FontIconClassNameOptions, icon } from "./styles.js";
@@ -13,6 +14,8 @@ import { type FontIconClassNameOptions, icon } from "./styles.js";
  */
 export interface FontIconProps
   extends HTMLAttributes<HTMLSpanElement>, FontIconClassNameOptions {
+  ref?: Ref<HTMLElement>;
+
   /** @defaultValue `true` */
   "aria-hidden"?: AriaAttributes["aria-hidden"];
 
@@ -36,33 +39,32 @@ export interface FontIconProps
  * @since 6.0.0 Switched from `<i>` to `<span>` element and removed
  * the `forceSize`/`forceFontSize` props.
  */
-export const FontIcon = forwardRef<HTMLElement, FontIconProps>(
-  function FontIcon(props, ref) {
-    const {
-      "aria-hidden": ariaHidden = true,
-      iconClassName = "material-icons",
-      dense = false,
-      theme,
-      className,
-      children,
-      ...remaining
-    } = props;
+export function FontIcon(props: FontIconProps): ReactElement {
+  const {
+    ref,
+    "aria-hidden": ariaHidden = true,
+    iconClassName = "material-icons",
+    dense = false,
+    theme,
+    className,
+    children,
+    ...remaining
+  } = props;
 
-    return (
-      <span
-        {...remaining}
-        aria-hidden={ariaHidden}
-        ref={ref}
-        className={icon({
-          type: "font",
-          dense,
-          theme,
-          className,
-          iconClassName,
-        })}
-      >
-        {children}
-      </span>
-    );
-  }
-);
+  return (
+    <span
+      {...remaining}
+      aria-hidden={ariaHidden}
+      ref={ref}
+      className={icon({
+        type: "font",
+        dense,
+        theme,
+        className,
+        iconClassName,
+      })}
+    >
+      {children}
+    </span>
+  );
+}