@react-md/core 6.5.2 → 7.0.0

package/src/form/Password.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode, forwardRef } from "react";
+import { type ReactElement, type ReactNode } from "react";
 
 import { Button, type ButtonProps } from "../button/Button.js";
 import { getIcon } from "../icon/config.js";
@@ -145,73 +145,72 @@ export interface PasswordProps extends Omit<
  *
  * @see {@link https://react-md.dev/components/password | Password Demos}
  */
-export const Password = forwardRef<HTMLInputElement, PasswordProps>(
-  function Password(props, ref) {
-    const {
-      id: propId,
-      name = "password",
-      className,
-      inputClassName,
-      visibilityIcon: propVisibilityIcon,
-      visibilityLabel = "Show password",
-      visibilityProps,
-      ...remaining
-    } = props;
-    const { toggled: isPasswordVisible, toggle } = useToggle(false);
+export function Password(props: PasswordProps): ReactElement {
+  const {
+    ref,
+    id: propId,
+    name = "password",
+    className,
+    inputClassName,
+    visibilityIcon: propVisibilityIcon,
+    visibilityLabel = "Show password",
+    visibilityProps,
+    ...remaining
+  } = props;
+  const { toggled: isPasswordVisible, toggle } = useToggle(false);
 
-    let currentVisibilityIcon: ReactNode;
-    if (
-      propVisibilityIcon &&
-      typeof propVisibilityIcon === "object" &&
-      "visible" in propVisibilityIcon
-    ) {
-      currentVisibilityIcon = isPasswordVisible
-        ? propVisibilityIcon.visible
-        : propVisibilityIcon.invisible;
-    } else if (typeof propVisibilityIcon === "function") {
-      currentVisibilityIcon = propVisibilityIcon(isPasswordVisible);
-    } else {
-      currentVisibilityIcon = propVisibilityIcon;
-    }
+  let currentVisibilityIcon: ReactNode;
+  if (
+    propVisibilityIcon &&
+    typeof propVisibilityIcon === "object" &&
+    "visible" in propVisibilityIcon
+  ) {
+    currentVisibilityIcon = isPasswordVisible
+      ? propVisibilityIcon.visible
+      : propVisibilityIcon.invisible;
+  } else if (typeof propVisibilityIcon === "function") {
+    currentVisibilityIcon = propVisibilityIcon(isPasswordVisible);
+  } else {
+    currentVisibilityIcon = propVisibilityIcon;
+  }
 
-    const id = useEnsuredId(propId, "password");
-    const visibilityIcon = getIcon("password", currentVisibilityIcon);
+  const id = useEnsuredId(propId, "password");
+  const visibilityIcon = getIcon("password", currentVisibilityIcon);
 
-    return (
-      <TextField
-        {...remaining}
-        ref={ref}
-        name={name}
-        type={isPasswordVisible ? "text" : "password"}
-        className={password({ className })}
-        inputClassName={passwordInput({ className: inputClassName })}
-        rightAddon={
-          <Button
-            id={`${id}-toggle`}
-            buttonType="icon"
-            aria-label={visibilityLabel}
-            aria-pressed={isPasswordVisible}
-            // allow all props except the onClick, className, and aria-pressed to
-            // be overridden. onClick can only stop default behavior with
-            // `event.stopPropagation()`
-            {...visibilityProps}
-            className={passwordInputToggle({
-              className: visibilityProps?.className,
-            })}
-            onClick={(event) => {
-              visibilityProps?.onClick?.(event);
-              if (event.isPropagationStopped()) {
-                return;
-              }
+  return (
+    <TextField
+      {...remaining}
+      ref={ref}
+      name={name}
+      type={isPasswordVisible ? "text" : "password"}
+      className={password({ className })}
+      inputClassName={passwordInput({ className: inputClassName })}
+      rightAddon={
+        <Button
+          id={`${id}-toggle`}
+          buttonType="icon"
+          aria-label={visibilityLabel}
+          aria-pressed={isPasswordVisible}
+          // allow all props except the onClick, className, and aria-pressed to
+          // be overridden. onClick can only stop default behavior with
+          // `event.stopPropagation()`
+          {...visibilityProps}
+          className={passwordInputToggle({
+            className: visibilityProps?.className,
+          })}
+          onClick={(event) => {
+            visibilityProps?.onClick?.(event);
+            if (event.isPropagationStopped()) {
+              return;
+            }
 
-              toggle();
-            }}
-          >
-            {visibilityProps?.children ?? visibilityIcon}
-          </Button>
-        }
-        disableRightAddonStyles
-      />
-    );
-  }
-);
+            toggle();
+          }}
+        >
+          {visibilityProps?.children ?? visibilityIcon}
+        </Button>
+      }
+      disableRightAddonStyles
+    />
+  );
+}

package/src/form/Radio.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import { type ReactElement } from "react";
 
 import { InputToggle, type RadioProps } from "./InputToggle.js";
 
@@ -25,8 +25,8 @@ import { InputToggle, type RadioProps } from "./InputToggle.js";
  *
  * @see {@link https://react-md.dev/components/radio | Radio Demos}
  */
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  function Radio(props, ref) {
-    return <InputToggle {...props} ref={ref} type="radio" />;
-  }
-);
+export function Radio(props: RadioProps): ReactElement {
+  const { ref, ...remaininig } = props;
+
+  return <InputToggle {...remaininig} ref={ref} type="radio" />;
+}

package/src/form/ResizingTextAreaWrapper.tsx

@@ -2,9 +2,9 @@ import { cnb } from "cnbuilder";
 import {
   type CSSProperties,
   type HTMLAttributes,
+  type ReactElement,
   type Ref,
   type TextareaHTMLAttributes,
-  forwardRef,
 } from "react";
 
 import { textArea } from "./textAreaStyles.js";
@@ -14,6 +14,7 @@ import { textArea } from "./textAreaStyles.js";
  * @internal
  */
 export interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>;
   maskId: string;
   maskRef: Ref<HTMLTextAreaElement>;
   defaultValue?: TextareaHTMLAttributes<HTMLTextAreaElement>["defaultValue"];
@@ -27,11 +28,11 @@ export interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElem
  * @since 6.0.0
  * @internal
  */
-export const ResizingTextAreaWrapper = forwardRef<
-  HTMLDivElement,
-  ResizingTextAreaWrapperProps
->(function ResizingTextAreaWrapper(props, ref) {
+export const ResizingTextAreaWrapper = function ResizingTextAreaWrapper(
+  props: ResizingTextAreaWrapperProps
+): ReactElement {
   const {
+    ref,
     className,
     rows,
     maskId,
@@ -72,4 +73,4 @@ export const ResizingTextAreaWrapper = forwardRef<
       />
     </div>
   );
-});
+};

package/src/form/SliderContainer.tsx

@@ -1,4 +1,9 @@
-import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
+import {
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
 
 import { sliderContainer } from "./sliderStyles.js";
 
@@ -33,6 +38,8 @@ export interface SliderAddonProps {
  */
 export interface SliderContainerProps
   extends HTMLAttributes<HTMLDivElement>, SliderAddonProps {
+  ref?: Ref<HTMLDivElement>;
+
   vertical: boolean;
 }
 
@@ -47,32 +54,31 @@ export interface SliderContainerProps
  * @since 6.0.0 Removed the `label` support since you'll generally want to use
  * a `Fieldset` instead.
  */
-export const SliderContainer = forwardRef<HTMLDivElement, SliderContainerProps>(
-  function SliderContainer(props, ref) {
-    const {
-      className,
-      children,
-      beforeAddon,
-      afterAddon,
-      vertical,
-      ...remaining
-    } = props;
+export function SliderContainer(props: SliderContainerProps): ReactElement {
+  const {
+    ref,
+    className,
+    children,
+    beforeAddon,
+    afterAddon,
+    vertical,
+    ...remaining
+  } = props;
 
-    return (
-      <div
-        {...remaining}
-        ref={ref}
-        className={sliderContainer({
-          className,
-          vertical,
-          beforeAddon: !!beforeAddon,
-          afterAddon: !!afterAddon,
-        })}
-      >
-        {beforeAddon}
-        {children}
-        {afterAddon}
-      </div>
-    );
-  }
-);
+  return (
+    <div
+      {...remaining}
+      ref={ref}
+      className={sliderContainer({
+        className,
+        vertical,
+        beforeAddon: !!beforeAddon,
+        afterAddon: !!afterAddon,
+      })}
+    >
+      {beforeAddon}
+      {children}
+      {afterAddon}
+    </div>
+  );
+}

package/src/form/SliderThumb.tsx

@@ -3,8 +3,9 @@
 import {
   type ChangeEventHandler,
   type HTMLAttributes,
+  type ReactElement,
   type ReactNode,
-  forwardRef,
+  type Ref,
   useEffect,
   useState,
 } from "react";
@@ -100,6 +101,7 @@ export interface SliderThumbProps
     ConfigurableSliderThumbProps,
     Required<SliderValueOptions>,
     Required<SliderThumbPresentation> {
+  ref?: Ref<HTMLSpanElement>;
   id: string;
   value: number;
   index: 1 | 2;
@@ -123,11 +125,11 @@ export interface SliderThumbProps
  * @since 2.5.0
  * @since 6.0.0 Internal only component.
  */
-export const SliderThumb = forwardRef<
-  HTMLSpanElement,
-  LabelRequiredForA11y<SliderThumbProps>
->(function SliderThumb(props, ref) {
+export function SliderThumb(
+  props: LabelRequiredForA11y<SliderThumbProps>
+): ReactElement {
   const {
+    ref,
     id,
     min,
     max,
@@ -293,4 +295,4 @@ export const SliderThumb = forwardRef<
       )}
     </>
   );
-});
+}

package/src/form/SliderTrack.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 
 import { sliderTrack } from "./sliderStyles.js";
 import {
@@ -18,6 +18,7 @@ export interface SliderTrackProps
     HTMLAttributes<HTMLSpanElement>,
     ClosestThumbEventHandlersOptions,
     ThumbOffsetsOptions {
+  ref?: Ref<HTMLSpanElement>;
   animate: boolean;
   disabled: boolean;
 }
@@ -27,85 +28,84 @@ export interface SliderTrackProps
  * @since 2.5.0
  * @since 6.0.0 Updated to be internal only.
  */
-export const SliderTrack = forwardRef<HTMLSpanElement, SliderTrackProps>(
-  function SliderTrack(props, ref) {
-    const {
-      style,
-      className,
-      animate,
-      vertical,
-      disabled,
-      min,
-      max,
-      thumb1Ref,
-      thumb1Value,
-      thumb1Dragging,
-      thumb1DragPercentage,
-      thumb1OnMouseUp,
-      thumb1OnMouseDown,
-      thumb1OnMouseMove,
-      thumb1OnTouchStart,
-      thumb1OnTouchMove,
-      thumb2Ref,
-      thumb2Value,
-      thumb2Dragging,
-      thumb2DragPercentage,
-      thumb2OnMouseUp,
-      thumb2OnMouseDown,
-      thumb2OnMouseMove,
-      thumb2OnTouchStart,
-      thumb2OnTouchMove,
-      isRangeSlider,
-      children,
-      ...remaining
-    } = props;
+export function SliderTrack(props: SliderTrackProps): ReactElement {
+  const {
+    ref,
+    style,
+    className,
+    animate,
+    vertical,
+    disabled,
+    min,
+    max,
+    thumb1Ref,
+    thumb1Value,
+    thumb1Dragging,
+    thumb1DragPercentage,
+    thumb1OnMouseUp,
+    thumb1OnMouseDown,
+    thumb1OnMouseMove,
+    thumb1OnTouchStart,
+    thumb1OnTouchMove,
+    thumb2Ref,
+    thumb2Value,
+    thumb2Dragging,
+    thumb2DragPercentage,
+    thumb2OnMouseUp,
+    thumb2OnMouseDown,
+    thumb2OnMouseMove,
+    thumb2OnTouchStart,
+    thumb2OnTouchMove,
+    isRangeSlider,
+    children,
+    ...remaining
+  } = props;
 
-    return (
-      <span
-        {...remaining}
-        ref={ref}
-        style={{
-          ...style,
-          ...getThumbOffsets({
-            min,
-            max,
-            thumb1Value,
-            thumb1Dragging,
-            thumb1DragPercentage,
-            thumb2Value,
-            thumb2Dragging,
-            thumb2DragPercentage,
-            isRangeSlider,
-          }),
-        }}
-        className={sliderTrack({
-          className,
-          animate,
-          disabled,
-          vertical,
-          isRangeSlider,
-        })}
-        {...getClosestThumbEventHandlers({
-          vertical,
-          isRangeSlider,
-          thumb1Ref,
+  return (
+    <span
+      {...remaining}
+      ref={ref}
+      style={{
+        ...style,
+        ...getThumbOffsets({
+          min,
+          max,
+          thumb1Value,
           thumb1Dragging,
-          thumb1OnMouseUp,
-          thumb1OnMouseDown,
-          thumb1OnMouseMove,
-          thumb1OnTouchStart,
-          thumb1OnTouchMove,
-          thumb2Ref,
+          thumb1DragPercentage,
+          thumb2Value,
           thumb2Dragging,
-          thumb2OnMouseUp,
-          thumb2OnMouseDown,
-          thumb2OnMouseMove,
-          thumb2OnTouchStart,
-          thumb2OnTouchMove,
-        })}
-      >
-        {children}
-      </span>
-    );
-  }
-);
+          thumb2DragPercentage,
+          isRangeSlider,
+        }),
+      }}
+      className={sliderTrack({
+        className,
+        animate,
+        disabled,
+        vertical,
+        isRangeSlider,
+      })}
+      {...getClosestThumbEventHandlers({
+        vertical,
+        isRangeSlider,
+        thumb1Ref,
+        thumb1Dragging,
+        thumb1OnMouseUp,
+        thumb1OnMouseDown,
+        thumb1OnMouseMove,
+        thumb1OnTouchStart,
+        thumb1OnTouchMove,
+        thumb2Ref,
+        thumb2Dragging,
+        thumb2OnMouseUp,
+        thumb2OnMouseDown,
+        thumb2OnMouseMove,
+        thumb2OnTouchStart,
+        thumb2OnTouchMove,
+      })}
+    >
+      {children}
+    </span>
+  );
+}