@react-md/core 6.5.2 → 7.0.0

package/src/form/Legend.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { type ReactElement, type Ref } from "react";
 
 import { Typography, type TypographyProps } from "../typography/Typography.js";
 import { type LegendClassNameOptions, legend } from "./legendStyles.js";
@@ -7,7 +7,9 @@ import { type LegendClassNameOptions, legend } from "./legendStyles.js";
  * @since 6.0.0
  * @since 6.4.0 Extends the `LegendClassNameOptions`
  */
-export interface LegendProps extends TypographyProps, LegendClassNameOptions {}
+export interface LegendProps extends TypographyProps, LegendClassNameOptions {
+  ref?: Ref<HTMLLegendElement>;
+}
 
 /**
  * This should be used within a `Fieldset` to apply a label.
@@ -39,45 +41,44 @@ export interface LegendProps extends TypographyProps, LegendClassNameOptions {}
  * @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,
-      floating,
-      theme,
-      gap,
-      dense,
-      active,
-      error,
-      disabled,
-      stacked,
-      reversed,
-      className,
-      children,
-      ...remaining
-    } = props;
+export function Legend(props: LegendProps): ReactElement {
+  const {
+    ref,
+    srOnly,
+    floating,
+    theme,
+    gap,
+    dense,
+    active,
+    error,
+    disabled,
+    stacked,
+    reversed,
+    className,
+    children,
+    ...remaining
+  } = props;
 
-    return (
-      <Typography
-        {...remaining}
-        as="legend"
-        ref={ref}
-        className={legend({
-          srOnly,
-          floating,
-          theme,
-          gap,
-          dense,
-          active,
-          error,
-          disabled,
-          stacked,
-          reversed,
-          className,
-        })}
-      >
-        {children}
-      </Typography>
-    );
-  }
-);
+  return (
+    <Typography
+      {...remaining}
+      as="legend"
+      ref={ref}
+      className={legend({
+        srOnly,
+        floating,
+        theme,
+        gap,
+        dense,
+        active,
+        error,
+        disabled,
+        stacked,
+        reversed,
+        className,
+      })}
+    >
+      {children}
+    </Typography>
+  );
+}

package/src/form/NativeSelect.tsx

@@ -1,9 +1,10 @@
 import {
   type CSSProperties,
   type HTMLAttributes,
+  type ReactElement,
   type ReactNode,
+  type Ref,
   type SelectHTMLAttributes,
-  forwardRef,
 } from "react";
 
 import { getIcon } from "../icon/config.js";
@@ -27,6 +28,8 @@ export interface NativeSelectProps
     Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">,
     UserAgentAutocompleteProps,
     FormFieldOptions {
+  ref?: Ref<HTMLSelectElement>;
+
   /**
    * A custom dropdown icon to use instead of the browser's default select
    * dropdown icon.
@@ -111,124 +114,123 @@ export interface NativeSelectProps
  *
  * @see {@link https://react-md.dev/components/native-select | NativeSelect Demos}
  */
-export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
-  function NativeSelect(props, ref) {
-    const {
-      id: propId,
-      style,
-      className,
-      icon: propIcon,
-      label,
-      labelProps,
-      labelStyle,
-      labelClassName,
-      selectStyle,
-      selectClassName,
-      autoCompleteValue,
-      autoComplete = autoCompleteValue,
-      name = autoCompleteValue,
-      dense,
-      error,
-      active,
-      inline,
-      leftAddon,
-      rightAddon: propRightAddon,
-      leftAddonProps,
-      rightAddonProps,
-      disableLeftAddonStyles,
-      disableRightAddonStyles,
-      theme: propTheme,
-      underlineDirection: propUnderlineDirection,
-      messageProps,
-      messageContainerProps,
-      containerProps,
-      children,
-      ...remaining
-    } = props;
-    const { disabled, readOnly, multiple } = props;
-    const id = useEnsuredId(propId, "select");
-    const theme = getFormConfig("theme", propTheme);
-    const underlineDirection = getFormConfig(
-      "underlineDirection",
-      propUnderlineDirection
-    );
-    const icon = getIcon("dropdown", propIcon);
-    const underlined = theme === "underline" || theme === "filled";
+export function NativeSelect(props: NativeSelectProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    style,
+    className,
+    icon: propIcon,
+    label,
+    labelProps,
+    labelStyle,
+    labelClassName,
+    selectStyle,
+    selectClassName,
+    autoCompleteValue,
+    autoComplete = autoCompleteValue,
+    name = autoCompleteValue,
+    dense,
+    error,
+    active,
+    inline,
+    leftAddon,
+    rightAddon: propRightAddon,
+    leftAddonProps,
+    rightAddonProps,
+    disableLeftAddonStyles,
+    disableRightAddonStyles,
+    theme: propTheme,
+    underlineDirection: propUnderlineDirection,
+    messageProps,
+    messageContainerProps,
+    containerProps,
+    children,
+    ...remaining
+  } = props;
+  const { disabled, readOnly, multiple } = props;
+  const id = useEnsuredId(propId, "select");
+  const theme = getFormConfig("theme", propTheme);
+  const underlineDirection = getFormConfig(
+    "underlineDirection",
+    propUnderlineDirection
+  );
+  const icon = getIcon("dropdown", propIcon);
+  const underlined = theme === "underline" || theme === "filled";
 
-    let rightAddon = propRightAddon;
-    if (propRightAddon === undefined && !multiple) {
-      rightAddon = icon;
-    }
+  let rightAddon = propRightAddon;
+  if (propRightAddon === undefined && !multiple) {
+    rightAddon = icon;
+  }
 
-    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={nativeSelectContainer({
+          label: !!label,
+          multiple,
+          underlined,
+          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={nativeSelectContainer({
-            label: !!label,
-            multiple,
-            underlined,
-            className,
-          })}
-          theme={theme}
-          label={!!label}
-          error={error}
-          dense={dense}
-          inline={inline}
-          active={active}
-          readOnly={readOnly}
+        <select
+          {...remaining}
+          id={id}
+          ref={ref}
+          autoComplete={autoComplete}
+          name={name}
           disabled={disabled}
-          leftAddon={leftAddon}
-          leftAddonProps={leftAddonProps}
-          rightAddon={rightAddon}
-          rightAddonProps={rightAddonProps}
-          underlineDirection={underlineDirection}
-          disableLeftAddonStyles={disableLeftAddonStyles}
-          disableRightAddonStyles={disableRightAddonStyles}
+          style={selectStyle}
+          className={nativeSelect({
+            icon: !!icon,
+            className: selectClassName,
+          })}
         >
-          <select
-            {...remaining}
-            id={id}
-            ref={ref}
-            autoComplete={autoComplete}
-            name={name}
+          {children}
+        </select>
+        {label && (
+          <Label
+            {...labelProps}
+            htmlFor={id}
+            style={labelProps?.style ?? labelStyle}
+            className={labelProps?.className ?? labelClassName}
+            floating
+            dense={dense}
+            error={error}
+            active={active}
             disabled={disabled}
-            style={selectStyle}
-            className={nativeSelect({
-              icon: !!icon,
-              className: selectClassName,
-            })}
           >
-            {children}
-          </select>
-          {label && (
-            <Label
-              {...labelProps}
-              htmlFor={id}
-              style={labelProps?.style ?? labelStyle}
-              className={labelProps?.className ?? labelClassName}
-              floating
-              dense={dense}
-              error={error}
-              active={active}
-              disabled={disabled}
-            >
-              {label}
-            </Label>
-          )}
-        </TextFieldContainer>
-      </FormMessageContainer>
-    );
-  }
-);
+            {label}
+          </Label>
+        )}
+      </TextFieldContainer>
+    </FormMessageContainer>
+  );
+}

package/src/form/OptGroup.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode, forwardRef } from "react";
+import { type ReactElement, type ReactNode, type Ref } from "react";
 
 import { type ListElement, type ListProps } from "../list/List.js";
 import {
@@ -13,6 +13,8 @@ import { useEnsuredId } from "../useEnsuredId.js";
 
 /** @since 6.0.0 */
 export interface OptGroupProps extends Omit<ListProps, "role"> {
+  ref?: Ref<ListElement>;
+
   /**
    * This is really the `children` to display in a `ListSubheader` that
    * describes the optgroup. It was named `label` to match the native
@@ -70,18 +72,16 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
  * @see {@link https://react-md.dev/components/select | Select Demos}
  * @since 6.0.0
  */
-export const OptGroup = forwardRef<ListElement, OptGroupProps>(
-  function OptGroup(props, ref) {
-    const { children, label, labelProps, ...remaining } = props;
-    const labelId = useEnsuredId(labelProps?.id, "optgroup");
+export function OptGroup(props: OptGroupProps): ReactElement {
+  const { ref, children, label, labelProps, ...remaining } = props;
+  const labelId = useEnsuredId(labelProps?.id, "optgroup");
 
-    return (
-      <MenuItemGroup aria-labelledby={labelId} {...remaining} ref={ref}>
-        <ListSubheader {...labelProps} id={labelId}>
-          {label}
-        </ListSubheader>
-        {children}
-      </MenuItemGroup>
-    );
-  }
-);
+  return (
+    <MenuItemGroup aria-labelledby={labelId} {...remaining} ref={ref}>
+      <ListSubheader {...labelProps} id={labelId}>
+        {label}
+      </ListSubheader>
+      {children}
+    </MenuItemGroup>
+  );
+}

package/src/form/Option.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cnb } from "cnbuilder";
-import { Fragment, type ReactNode, forwardRef } from "react";
+import { Fragment, type ReactElement, type ReactNode, type Ref } from "react";
 
 import {
   TextIconSpacing,
@@ -68,6 +68,8 @@ export interface OptionSelectedIconProps {
  * `selectedIconAfter`, and `iconSpacingProps` props.
  */
 export interface OptionProps extends MenuItemProps, OptionSelectedIconProps {
+  ref?: Ref<HTMLLIElement>;
+
   /**
    * @defaultValue `"option"`
    */
@@ -137,131 +139,130 @@ export interface OptionProps extends MenuItemProps, OptionSelectedIconProps {
  * @since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, `iconSpacingProps`, and `selectedClassName` props.
  */
-export const Option = forwardRef<HTMLLIElement, OptionProps>(
-  function Option(props, ref) {
-    const {
-      id: propId,
-      role = "option",
-      value,
-      children: propChildren,
-      onClick = noop,
-      className,
-      selectedClassName,
-      selectedIcon: propSelectedIcon,
-      unselectedIcon: propUnselectedIcon,
-      selectedIconAfter: propSelectedIconAfter,
-      disableSelectedIcon: propDisableSelectedIcon,
-      textIconSpacingProps,
-      leftAddon: propLeftAddon,
-      leftAddonType,
-      leftAddonClassName,
-      rightAddon: propRightAddon,
-      rightAddonType,
-      rightAddonClassName,
-      secondaryText,
-      height: propHeight,
-      disableTextChildren: propDisableTextChildren,
-      ...remaining
-    } = props;
+export function Option(props: OptionProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    role = "option",
+    value,
+    children: propChildren,
+    onClick = noop,
+    className,
+    selectedClassName,
+    selectedIcon: propSelectedIcon,
+    unselectedIcon: propUnselectedIcon,
+    selectedIconAfter: propSelectedIconAfter,
+    disableSelectedIcon: propDisableSelectedIcon,
+    textIconSpacingProps,
+    leftAddon: propLeftAddon,
+    leftAddonType,
+    leftAddonClassName,
+    rightAddon: propRightAddon,
+    rightAddonType,
+    rightAddonClassName,
+    secondaryText,
+    height: propHeight,
+    disableTextChildren: propDisableTextChildren,
+    ...remaining
+  } = props;
 
-    const id = useEnsuredId(propId, "option");
-    const {
-      selectOption,
-      isOptionSelected,
-      disableSelectedIcon: contextDisableSelectedIcon,
-      selectedIcon: contextSelectedIcon,
-      unselectedIcon: contextUnselectedIcon,
-      selectedIconAfter: contextSelectedIconAfter,
-    } = useListboxContext();
-    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;
-    const disableSelectedIcon =
-      propDisableSelectedIcon ?? contextDisableSelectedIcon;
-    const selected = isOptionSelected(value);
-    const selectedIcon = getIcon(
-      "selected",
-      disableSelectedIcon ? null : (propSelectedIcon ?? contextSelectedIcon)
-    );
-    const unselectedIcon = disableSelectedIcon
-      ? null
-      : (propUnselectedIcon ??
-        contextUnselectedIcon ??
-        DEFAULT_OPTION_UNSELECTED_ICON);
-    const icon = selected ? selectedIcon : unselectedIcon;
+  const id = useEnsuredId(propId, "option");
+  const {
+    selectOption,
+    isOptionSelected,
+    disableSelectedIcon: contextDisableSelectedIcon,
+    selectedIcon: contextSelectedIcon,
+    unselectedIcon: contextUnselectedIcon,
+    selectedIconAfter: contextSelectedIconAfter,
+  } = useListboxContext();
+  const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;
+  const disableSelectedIcon =
+    propDisableSelectedIcon ?? contextDisableSelectedIcon;
+  const selected = isOptionSelected(value);
+  const selectedIcon = getIcon(
+    "selected",
+    disableSelectedIcon ? null : (propSelectedIcon ?? contextSelectedIcon)
+  );
+  const unselectedIcon = disableSelectedIcon
+    ? null
+    : (propUnselectedIcon ??
+      contextUnselectedIcon ??
+      DEFAULT_OPTION_UNSELECTED_ICON);
+  const icon = selected ? selectedIcon : unselectedIcon;
 
-    let leftAddon = propLeftAddon;
-    let rightAddon = propRightAddon;
-    let children = propChildren;
-    let disableTextChildren = propDisableTextChildren;
-    if (!selectedIconAfter && icon) {
-      leftAddon = icon;
-      if (propLeftAddon) {
-        disableTextChildren = true;
-        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;
+  let leftAddon = propLeftAddon;
+  let rightAddon = propRightAddon;
+  let children = propChildren;
+  let disableTextChildren = propDisableTextChildren;
+  if (!selectedIconAfter && icon) {
+    leftAddon = icon;
+    if (propLeftAddon) {
+      disableTextChildren = true;
+      const Wrapper = propDisableTextChildren ? Fragment : ListItemText;
 
-        children = (
-          <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>
-            <Wrapper>{children}</Wrapper>
-          </TextIconSpacing>
-        );
-      }
-    } else if (icon) {
-      rightAddon = icon;
-      if (propRightAddon) {
-        disableTextChildren = true;
-        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;
+      children = (
+        <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>
+          <Wrapper>{children}</Wrapper>
+        </TextIconSpacing>
+      );
+    }
+  } else if (icon) {
+    rightAddon = icon;
+    if (propRightAddon) {
+      disableTextChildren = true;
+      const Wrapper = propDisableTextChildren ? Fragment : ListItemText;
 
-        children = (
-          <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>
-            <Wrapper>{children}</Wrapper>
-          </TextIconSpacing>
-        );
-      }
+      children = (
+        <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>
+          <Wrapper>{children}</Wrapper>
+        </TextIconSpacing>
+      );
     }
+  }
 
-    const height = getListItemHeight({
-      height: propHeight,
-      leftAddon: leftAddon === icon ? null : leftAddon,
-      leftAddonType,
-      rightAddon: rightAddon === icon ? null : rightAddon,
-      rightAddonType,
-      secondaryText,
-    });
+  const height = getListItemHeight({
+    height: propHeight,
+    leftAddon: leftAddon === icon ? null : leftAddon,
+    leftAddonType,
+    rightAddon: rightAddon === icon ? null : rightAddon,
+    rightAddonType,
+    secondaryText,
+  });
 
-    return (
-      <MenuItem
-        {...remaining}
-        aria-selected={selected || undefined}
-        id={id}
-        ref={ref}
-        role={role}
-        onClick={(event) => {
-          onClick(event);
-          selectOption(value);
-        }}
-        className={option({
-          icon: !!icon,
-          selected,
-          selectedClassName,
-          className,
-        })}
-        secondaryText={secondaryText}
-        height={height}
-        leftAddon={leftAddon}
-        leftAddonType={leftAddonType}
-        leftAddonClassName={cnb(
-          leftAddon === icon && "rmd-option__icon",
-          leftAddonClassName
-        )}
-        rightAddon={rightAddon}
-        rightAddonType={rightAddonType}
-        rightAddonClassName={cnb(
-          rightAddon === icon && "rmd-option__icon",
-          rightAddonClassName
-        )}
-        disableTextChildren={disableTextChildren}
-      >
-        {children}
-      </MenuItem>
-    );
-  }
-);
+  return (
+    <MenuItem
+      {...remaining}
+      aria-selected={selected || undefined}
+      id={id}
+      ref={ref}
+      role={role}
+      onClick={(event) => {
+        onClick(event);
+        selectOption(value);
+      }}
+      className={option({
+        icon: !!icon,
+        selected,
+        selectedClassName,
+        className,
+      })}
+      secondaryText={secondaryText}
+      height={height}
+      leftAddon={leftAddon}
+      leftAddonType={leftAddonType}
+      leftAddonClassName={cnb(
+        leftAddon === icon && "rmd-option__icon",
+        leftAddonClassName
+      )}
+      rightAddon={rightAddon}
+      rightAddonType={rightAddonType}
+      rightAddonClassName={cnb(
+        rightAddon === icon && "rmd-option__icon",
+        rightAddonClassName
+      )}
+      disableTextChildren={disableTextChildren}
+    >
+      {children}
+    </MenuItem>
+  );
+}