@react-md/core 6.5.1 → 7.0.0

package/src/form/Switch.tsx

@@ -3,8 +3,9 @@ import {
   type CSSProperties,
   type HTMLAttributes,
   type InputHTMLAttributes,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import { type PropsWithRef } from "../types.js";
@@ -38,6 +39,7 @@ export interface SwitchProps
     InputToggleLabelProps,
     FormMessageContainerExtension,
     FormComponentStates {
+  ref?: Ref<HTMLInputElement>;
   containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
   trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
   trackStyle?: CSSProperties;
@@ -75,86 +77,85 @@ export interface SwitchProps
  * @see {@link https://react-md.dev/components/switch | Switch Demos}
  * @since 6.0.0 Added support for `FormMessage` behavior.
  */
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  function Switch(props, ref) {
-    const {
-      id: propId,
-      label,
-      labelProps,
-      style,
-      className,
-      containerProps,
-      ballProps,
-      ballStyle,
-      ballClassName,
-      ballAddon,
-      trackProps,
-      trackStyle,
-      trackClassName,
-      messageProps,
-      messageContainerProps,
-      disableLabelGap = false,
-      error = false,
-      active = false,
-      stacked = false,
-      iconAfter = false,
-      disabled = false,
-      readOnly = false,
-      ...remaining
-    } = props;
-    const id = useEnsuredId(propId, "switch");
+export function Switch(props: SwitchProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    label,
+    labelProps,
+    style,
+    className,
+    containerProps,
+    ballProps,
+    ballStyle,
+    ballClassName,
+    ballAddon,
+    trackProps,
+    trackStyle,
+    trackClassName,
+    messageProps,
+    messageContainerProps,
+    disableLabelGap = false,
+    error = false,
+    active = false,
+    stacked = false,
+    iconAfter = false,
+    disabled = false,
+    readOnly = false,
+    ...remaining
+  } = props;
+  const id = useEnsuredId(propId, "switch");
 
-    return (
-      <FormMessageContainer
-        {...messageContainerProps}
-        messageProps={messageProps}
+  return (
+    <FormMessageContainer
+      {...messageContainerProps}
+      messageProps={messageProps}
+    >
+      <Label
+        style={style}
+        {...labelProps}
+        className={cnb(className, labelProps?.className)}
+        gap={!disableLabelGap}
+        stacked={stacked}
+        reversed={!iconAfter}
+        active={active}
+        error={error}
+        disabled={disabled}
       >
-        <Label
-          style={style}
-          {...labelProps}
-          className={cnb(className, labelProps?.className)}
-          gap={!disableLabelGap}
-          stacked={stacked}
-          reversed={!iconAfter}
-          active={active}
-          error={error}
-          disabled={disabled}
+        {label}
+        <div
+          {...containerProps}
+          className={switchStyles({
+            clickable: !disabled && !readOnly,
+            className: containerProps?.className,
+            currentColor: active || error,
+          })}
         >
-          {label}
-          <div
-            {...containerProps}
-            className={switchStyles({
-              clickable: !disabled && !readOnly,
-              className: containerProps?.className,
-              currentColor: active || error,
-            })}
+          <SwitchTrack
+            style={trackStyle}
+            {...trackProps}
+            className={cnb(trackClassName, trackProps?.className)}
+            disabled={disabled}
+            ballAddon={ballAddon}
+            ballProps={ballProps}
+            ballStyle={ballStyle}
+            ballClassName={ballClassName}
           >
-            <SwitchTrack
-              style={trackStyle}
-              {...trackProps}
-              className={cnb(trackClassName, trackProps?.className)}
+            <input
+              {...remaining}
+              id={id}
+              ref={ref}
+              role="switch"
+              type="checkbox"
+              className={cnb(
+                "rmd-switch__input rmd-hidden-input",
+                disabled && "rmd-hidden-input--disabled"
+              )}
               disabled={disabled}
-              ballAddon={ballAddon}
-              ballProps={ballProps}
-              ballStyle={ballStyle}
-              ballClassName={ballClassName}
-            >
-              <input
-                {...remaining}
-                id={id}
-                ref={ref}
-                role="switch"
-                type="checkbox"
-                className={cnb(
-                  "rmd-switch__input rmd-hidden-input",
-                  disabled && "rmd-hidden-input--disabled"
-                )}
-                disabled={disabled}
-              />
-            </SwitchTrack>
-          </div>
-        </Label>
-      </FormMessageContainer>
-    );
-  }
-);
+            />
+          </SwitchTrack>
+        </div>
+      </Label>
+    </FormMessageContainer>
+  );
+}

package/src/form/SwitchTrack.tsx

@@ -1,14 +1,16 @@
 import {
   type CSSProperties,
   type HTMLAttributes,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
 } from "react";
 
 import { type PropsWithRef } from "../types.js";
 import { switchBall, switchTrack } from "./switchStyles.js";
 
 export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
   active?: boolean;
   disabled?: boolean;
   ballAddon?: ReactNode;
@@ -21,38 +23,37 @@ export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
  * Used to create the switch track styles
  * @internal
  */
-export const SwitchTrack = forwardRef<HTMLDivElement, SwitchTrackProps>(
-  function SwitchTrack(props, ref) {
-    const {
-      style,
-      className,
-      ballAddon,
-      ballProps,
-      ballStyle,
-      ballClassName,
-      active,
-      children,
-      disabled = false,
-      ...remaining
-    } = props;
+export function SwitchTrack(props: SwitchTrackProps): ReactElement {
+  const {
+    ref,
+    style,
+    className,
+    ballAddon,
+    ballProps,
+    ballStyle,
+    ballClassName,
+    active,
+    children,
+    disabled = false,
+    ...remaining
+  } = props;
 
-    return (
-      <div
-        {...remaining}
-        ref={ref}
-        style={style}
-        className={switchTrack({ disabled, className })}
+  return (
+    <div
+      {...remaining}
+      ref={ref}
+      style={style}
+      className={switchTrack({ disabled, className })}
+    >
+      {children}
+      <span
+        style={ballStyle}
+        {...ballProps}
+        className={switchBall({ className: ballClassName, active })}
       >
-        {children}
-        <span
-          style={ballStyle}
-          {...ballProps}
-          className={switchBall({ className: ballClassName, active })}
-        >
-          {ballAddon}
-          {ballProps?.children}
-        </span>
-      </div>
-    );
-  }
-);
+        {ballAddon}
+        {ballProps?.children}
+      </span>
+    </div>
+  );
+}

package/src/form/TextArea.tsx

@@ -3,8 +3,9 @@
 import {
   type CSSProperties,
   type HTMLAttributes,
+  type ReactElement,
+  type Ref,
   type TextareaHTMLAttributes,
-  forwardRef,
 } from "react";
 
 import { type PropsWithRef } from "../types.js";
@@ -36,6 +37,8 @@ declare module "react" {
  */
 export interface TextAreaProps
   extends FormFieldOptions, TextareaHTMLAttributes<HTMLTextAreaElement> {
+  ref?: Ref<HTMLTextAreaElement>;
+
   /** @defaultValue `"text-area-" + useId()` */
   id?: string;
 
@@ -123,178 +126,177 @@ export interface TextAreaProps
  *
  * @see {@link https://react-md.dev/components/text-field#simple-textarea | TextArea Demos}
  */
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  function TextArea(props, ref) {
-    const {
-      id: propId,
-      style,
-      className,
-      label,
-      labelProps,
-      labelStyle,
-      labelClassName,
-      areaStyle,
-      areaClassName,
-      resizeContainerProps,
-      resize = "auto",
-      dense,
-      error,
-      active,
-      inline: propInline,
-      leftAddon,
-      rightAddon,
-      disableLeftAddonStyles,
-      disableRightAddonStyles,
-      theme: propTheme,
-      underlineDirection: propUnderlineDirection,
-      messageProps,
-      messageContainerProps,
-      containerProps,
-      rows = 2,
-      maxRows = -1,
-      onChange: propOnChange,
-      disableTransition: propDisableTransition,
-      ...remaining
-    } = props;
-    const { disabled = false, readOnly = false, value, defaultValue } = props;
-    const id = useEnsuredId(propId, "text-area");
-    const theme = getFormConfig("theme", propTheme);
-    const underlineDirection = getFormConfig(
-      "underlineDirection",
-      propUnderlineDirection
-    );
-    const [areaRef, areaRefCallback] = useEnsuredRef(ref);
+export function TextArea(props: TextAreaProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    style,
+    className,
+    label,
+    labelProps,
+    labelStyle,
+    labelClassName,
+    areaStyle,
+    areaClassName,
+    resizeContainerProps,
+    resize = "auto",
+    dense,
+    error,
+    active,
+    inline: propInline,
+    leftAddon,
+    rightAddon,
+    disableLeftAddonStyles,
+    disableRightAddonStyles,
+    theme: propTheme,
+    underlineDirection: propUnderlineDirection,
+    messageProps,
+    messageContainerProps,
+    containerProps,
+    rows = 2,
+    maxRows = -1,
+    onChange: propOnChange,
+    disableTransition: propDisableTransition,
+    ...remaining
+  } = props;
+  const { disabled = false, readOnly = false, value, defaultValue } = props;
+  const id = useEnsuredId(propId, "text-area");
+  const theme = getFormConfig("theme", propTheme);
+  const underlineDirection = getFormConfig(
+    "underlineDirection",
+    propUnderlineDirection
+  );
+  const [areaRef, areaRefCallback] = useEnsuredRef(ref);
+
+  const {
+    maskRef,
+    containerRef,
+    height,
+    onChange,
+    scrollable,
+    disableTransition,
+  } = useResizingTextArea({
+    maxRows,
+    resize,
+    onChange: propOnChange,
+    containerRef: containerProps?.ref,
+    disableTransition: propDisableTransition,
+  });
+
+  let { placeholder = "" } = props;
+  if (label && !placeholder) {
+    // See the placeholder type definition comments for information
+    placeholder = " ";
+  }
+
+  // have to force it inline or else you won't be able to resize
+  // it horizontally.
+  const inline = resize === "horizontal" || resize === "both" || propInline;
 
-    const {
-      maskRef,
-      containerRef,
-      height,
-      onChange,
-      scrollable,
-      disableTransition,
-    } = useResizingTextArea({
-      maxRows,
-      resize,
-      onChange: propOnChange,
-      containerRef: containerProps?.ref,
-      disableTransition: propDisableTransition,
-    });
+  const area = (
+    <textarea
+      {...remaining}
+      id={id}
+      ref={areaRefCallback}
+      rows={rows}
+      disabled={disabled}
+      onChange={onChange}
+      placeholder={placeholder}
+      style={areaStyle}
+      className={textArea({
+        resize,
+        scrollable,
+        className: areaClassName,
+        placeholderHidden: !!label && !active,
+      })}
+    />
+  );
 
-    let { placeholder = "" } = props;
-    if (label && !placeholder) {
-      // See the placeholder type definition comments for information
-      placeholder = " ";
-    }
+  const labelNode = label && (
+    <Label
+      {...labelProps}
+      htmlFor={id}
+      style={labelProps?.style ?? labelStyle}
+      className={labelProps?.className ?? labelClassName}
+      floating
+      dense={dense}
+      error={error}
+      active={active}
+      disabled={disabled}
+    >
+      {label}
+    </Label>
+  );
 
-    // have to force it inline or else you won't be able to resize
-    // it horizontally.
-    const inline = resize === "horizontal" || resize === "both" || propInline;
+  let children = (
+    <>
+      {area}
+      {labelNode}
+    </>
+  );
 
-    const area = (
-      <textarea
-        {...remaining}
-        id={id}
-        ref={areaRefCallback}
+  if (resize === "auto") {
+    children = (
+      <ResizingTextAreaWrapper
+        {...resizeContainerProps}
+        maskId={`${id}-mask`}
+        maskRef={maskRef}
         rows={rows}
-        disabled={disabled}
-        onChange={onChange}
-        placeholder={placeholder}
-        style={areaStyle}
-        className={textArea({
-          resize,
-          scrollable,
-          className: areaClassName,
-          placeholderHidden: !!label && !active,
-        })}
-      />
+        areaStyle={areaStyle}
+        areaClassName={areaClassName}
+        defaultValue={value ?? defaultValue}
+        disableTransition={disableTransition}
+      >
+        {children}
+      </ResizingTextAreaWrapper>
     );
+  }
 
-    const labelNode = label && (
-      <Label
-        {...labelProps}
-        htmlFor={id}
-        style={labelProps?.style ?? labelStyle}
-        className={labelProps?.className ?? labelClassName}
-        floating
-        dense={dense}
+  return (
+    <FormMessageContainer
+      inline={inline}
+      {...messageContainerProps}
+      messageProps={messageProps}
+    >
+      <TextFieldContainer
+        {...containerProps}
+        ref={containerRef}
+        style={{
+          ...style,
+          "--rmd-text-area-height": height,
+        }}
+        className={textAreaContainer({
+          animate: !disableTransition && resize === "auto",
+          disabled,
+          height: !!height,
+          underlineLabelled:
+            !!label && (theme === "underline" || theme === "filled"),
+          className,
+        })}
+        theme={theme}
+        label={!!label}
         error={error}
+        dense={dense}
+        inline={inline}
         active={active}
+        readOnly={readOnly}
         disabled={disabled}
+        leftAddon={leftAddon}
+        rightAddon={rightAddon}
+        underlineDirection={underlineDirection}
+        disableLeftAddonStyles={disableLeftAddonStyles}
+        disableRightAddonStyles={disableRightAddonStyles}
+        onClick={(event) => {
+          // The textarea container adds padding-top when there is a label so
+          // that the label does not cover the text so this makes it so you
+          // can still click anywhere in the "box" to focus the textarea.
+          if (!disabled && event.target === event.currentTarget) {
+            areaRef.current?.focus();
+          }
+        }}
       >
-        {label}
-      </Label>
-    );
-
-    let children = (
-      <>
-        {area}
-        {labelNode}
-      </>
-    );
-
-    if (resize === "auto") {
-      children = (
-        <ResizingTextAreaWrapper
-          {...resizeContainerProps}
-          maskId={`${id}-mask`}
-          maskRef={maskRef}
-          rows={rows}
-          areaStyle={areaStyle}
-          areaClassName={areaClassName}
-          defaultValue={value ?? defaultValue}
-          disableTransition={disableTransition}
-        >
-          {children}
-        </ResizingTextAreaWrapper>
-      );
-    }
-
-    return (
-      <FormMessageContainer
-        inline={inline}
-        {...messageContainerProps}
-        messageProps={messageProps}
-      >
-        <TextFieldContainer
-          {...containerProps}
-          ref={containerRef}
-          style={{
-            ...style,
-            "--rmd-text-area-height": height,
-          }}
-          className={textAreaContainer({
-            animate: !disableTransition && resize === "auto",
-            disabled,
-            height: !!height,
-            underlineLabelled:
-              !!label && (theme === "underline" || theme === "filled"),
-            className,
-          })}
-          theme={theme}
-          label={!!label}
-          error={error}
-          dense={dense}
-          inline={inline}
-          active={active}
-          readOnly={readOnly}
-          disabled={disabled}
-          leftAddon={leftAddon}
-          rightAddon={rightAddon}
-          underlineDirection={underlineDirection}
-          disableLeftAddonStyles={disableLeftAddonStyles}
-          disableRightAddonStyles={disableRightAddonStyles}
-          onClick={(event) => {
-            // The textarea container adds padding-top when there is a label so
-            // that the label does not cover the text so this makes it so you
-            // can still click anywhere in the "box" to focus the textarea.
-            if (!disabled && event.target === event.currentTarget) {
-              areaRef.current?.focus();
-            }
-          }}
-        >
-          {children}
-        </TextFieldContainer>
-      </FormMessageContainer>
-    );
-  }
-);
+        {children}
+      </TextFieldContainer>
+    </FormMessageContainer>
+  );
+}