@purpurds/toggle 7.6.1 → 7.8.0

package/src/toggle.tsx

@@ -1,16 +1,17 @@
-import React, { type ForwardedRef, forwardRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
+import type { BaseProps } from "@purpurds/common-types";
 import { Icon } from "@purpurds/icon";
 import { checkmarkBold } from "@purpurds/icon/assets/checkmark-bold";
 import { Label } from "@purpurds/label";
 import { Paragraph } from "@purpurds/paragraph";
 import * as Switch from "@radix-ui/react-switch";
-import c from "classnames";
+import c from "classnames/bind";
 
 import { DraggableX } from "./DraggableX";
 import { useToggleDrag } from "./hooks/useToggleDrag";
 import styles from "./toggle.module.scss";
 
-export type ToggleProps = Omit<React.HTMLAttributes<HTMLElement>, "onChange"> & {
+export type ToggleProps = Omit<BaseProps<"button">, "onChange" | "children" | "id"> & {
   /**
    * To use when no label is given.
    * */
@@ -19,7 +20,6 @@ export type ToggleProps = Omit<React.HTMLAttributes<HTMLElement>, "onChange"> &
    * To use with custom label (not recommended).
    * */
   ["aria-labelledby"]?: string;
-  ["data-testid"]?: string;
   /**
    * The controlled state of the toggle. Must be used in conjunction with `onChange`.
    * */
@@ -66,88 +66,80 @@ export type ToggleProps = Omit<React.HTMLAttributes<HTMLElement>, "onChange"> &
   value?: string;
 };
 
+const cx = c.bind(styles);
 const rootClassName = "purpur-toggle";
 
-const ToggleComponent = (
-  {
-    ["data-testid"]: dataTestId,
-    className,
-    label,
-    onChange,
-    labelPosition = "right",
-    checked,
-    disableDrag,
-    defaultChecked,
-    ...props
-  }: ToggleProps,
-  ref: ForwardedRef<HTMLButtonElement>
-) => {
-  const [internalChecked, setInternalChecked] = useState(
-    typeof checked === "boolean" ? checked : !!defaultChecked
-  );
-  const isChecked = Boolean(typeof checked === "boolean" ? checked : internalChecked);
-  const { thumbRef, trackRef, isDragging, onChangeWithDrag, ...draggableXProps } = useToggleDrag({
-    checked: isChecked,
-    onChange: (value) => {
-      if (!props.disabled) {
-        onChange?.(value);
-        setInternalChecked(value);
-      }
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  (
+    {
+      ["data-testid"]: dataTestId,
+      className,
+      label,
+      onChange,
+      labelPosition = "right",
+      checked,
+      disableDrag,
+      defaultChecked,
+      ...props
     },
-  });
+    ref
+  ) => {
+    const [internalChecked, setInternalChecked] = useState(
+      typeof checked === "boolean" ? checked : !!defaultChecked
+    );
+    const isChecked = Boolean(typeof checked === "boolean" ? checked : internalChecked);
+    const { thumbRef, trackRef, isDragging, onChangeWithDrag, ...draggableXProps } = useToggleDrag({
+      checked: isChecked,
+      onChange: (value) => {
+        if (!props.disabled) {
+          onChange?.(value);
+          setInternalChecked(value);
+        }
+      },
+    });
 
-  const renderLabel = () => (
-    <Label
-      htmlFor={props.id}
-      data-testid={dataTestId && `${dataTestId}-label`}
-      disabled={props.disabled}
-      className={c(
-        styles[`${rootClassName}__label`],
-        styles[`${rootClassName}__label--${labelPosition}`]
-      )}
-    >
-      <Paragraph disabled={props.disabled}>{label}</Paragraph>
-    </Label>
-  );
-
-  return (
-    <div className={c([className, styles[`${rootClassName}__container`]])}>
-      {label && labelPosition === "left" && renderLabel()}
-      <Switch.Root
-        {...props}
-        ref={ref}
-        id={props.id}
-        data-testid={dataTestId}
-        className={styles[rootClassName]}
-        onCheckedChange={onChangeWithDrag}
-        checked={isChecked}
+    const renderLabel = () => (
+      <Label
+        htmlFor={props.id}
+        data-testid={dataTestId && `${dataTestId}-label`}
+        disabled={props.disabled}
+        className={cx(`${rootClassName}__label`, `${rootClassName}__label--${labelPosition}`)}
       >
-        <span ref={trackRef} className={styles[`${rootClassName}__track`]}>
-          <span className={styles[`${rootClassName}__checkmark-container`]}>
-            <Icon
-              className={styles[`${rootClassName}__checkmark`]}
-              svg={checkmarkBold}
-              size="xxs"
-            />
+        <Paragraph disabled={props.disabled}>{label}</Paragraph>
+      </Label>
+    );
+
+    return (
+      <div className={cx(className, `${rootClassName}__container`)}>
+        {label && labelPosition === "left" && renderLabel()}
+        <Switch.Root
+          {...props}
+          ref={ref}
+          id={props.id}
+          data-testid={dataTestId}
+          className={cx(rootClassName)}
+          onCheckedChange={onChangeWithDrag}
+          checked={isChecked}
+        >
+          <span ref={trackRef} className={cx(`${rootClassName}__track`)}>
+            <span className={cx(`${rootClassName}__checkmark-container`)}>
+              <Icon className={cx(`${rootClassName}__checkmark`)} svg={checkmarkBold} size="xxs" />
+            </span>
+            <DraggableX disabled={disableDrag} {...draggableXProps}>
+              <Switch.Thumb
+                ref={thumbRef}
+                data-testid={dataTestId && `${dataTestId}-thumb`}
+                className={cx(`${rootClassName}__thumb`, {
+                  [`${rootClassName}__thumb--dragging`]: isDragging,
+                })}
+              />
+            </DraggableX>
           </span>
-          <DraggableX disabled={disableDrag} {...draggableXProps}>
-            <Switch.Thumb
-              ref={thumbRef}
-              data-testid={dataTestId && `${dataTestId}-thumb`}
-              className={c([
-                styles[`${rootClassName}__thumb`],
-                {
-                  [styles[`${rootClassName}__thumb--dragging`]]: isDragging,
-                },
-              ])}
-            />
-          </DraggableX>
-        </span>
-      </Switch.Root>
-      {label && labelPosition === "right" && renderLabel()}
-    </div>
-  );
-};
+        </Switch.Root>
+        {label && labelPosition === "right" && renderLabel()}
+      </div>
+    );
+  }
+);
 
-export const Toggle = forwardRef(ToggleComponent);
 Toggle.displayName = "Toggle";