refactor: use mergeProps in toggle

daangn · Jan 4, 2025 · 14bc878 · 14bc878
1 parent 485d73a
commit 14bc878
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/packages/react-headless/toggle/src/Toggle.tsx b/packages/react-headless/toggle/src/Toggle.tsx
@@ -1,3 +1,4 @@
+import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { forwardRef } from "react";
@@ -10,10 +11,17 @@ export interface ToggleRootProps
     React.HTMLAttributes<HTMLButtonElement> {}
 
 export const ToggleRoot = forwardRef<HTMLButtonElement, ToggleRootProps>((props, ref) => {
-  const api = useToggle(props);
+  const { pressed, defaultPressed, onPressedChange, disabled, ...otherProps } = props;
+  const api = useToggle({
+    pressed,
+    defaultPressed,
+    onPressedChange,
+    disabled,
+  });
+  const mergedProps = mergeProps(api.rootProps, otherProps);
   return (
     <ToggleProvider value={api}>
-      <Primitive.button ref={ref} {...api.rootProps} {...api.restProps} />
+      <Primitive.button ref={ref} {...mergedProps} />
     </ToggleProvider>
   );
 });

diff --git a/packages/react-headless/toggle/src/useToggle.ts b/packages/react-headless/toggle/src/useToggle.ts
@@ -33,14 +33,11 @@ export function useToggleState(props: UseToggleStateProps) {
 
 export interface UseToggleProps extends UseToggleStateProps {
   disabled?: boolean;
-
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
 export type UseToggleReturn = ReturnType<typeof useToggle>;
 
 export function useToggle(props: UseToggleProps) {
-  const { pressed, defaultPressed, disabled, onPressedChange, onClick, ...restProps } = props;
   const { toggle, isPressed } = useToggleState(props);
 
   const stateProps = elementProps({
@@ -52,16 +49,13 @@ export function useToggle(props: UseToggleProps) {
     isPressed,
     toggle,
 
-    restProps,
     stateProps,
     rootProps: buttonProps({
       ...stateProps,
       "aria-pressed": isPressed,
-      onClick(event) {
+      onClick() {
         if (props.disabled) return;
         toggle();
-        // FIXME: temporal workaround, should be replaced with `mergeProps()` or getRootProps() pattern.
-        onClick?.(event);
       },
     }),
   };