CHANGED: Types

src/primitive-components/icon-button/icon-button.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import { Icon } from '../material-you-components';
-import { toggleIconType } from './icon-button.types';
-import { IRippleProps } from '../ripple/ripple.types';
+import { Icon } from '../components';
 import { ButtonLayout } from '../button-layout/button-layout';
-import { IconButtonMainProps } from '../button-layout/button.types';
+import { IconButtonProps, StateToggleIconType } from './icon-button.types';
 import {
     forwardRef,
     useCallback,
@@ -18,10 +16,7 @@ import {
  ** description
  */
 
-export const IconButton = forwardRef<
-    HTMLButtonElement,
-    IconButtonMainProps & IRippleProps
->(
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     (
         {
             icon,
@@ -34,32 +29,35 @@ export const IconButton = forwardRef<
         },
         ref,
     ) => {
-        const [toggleIcon, setToggleIcon] = useState<toggleIconType>({
+        const [toggleIcon, setToggleIcon] = useState<StateToggleIconType>({
             state: selected == true ? 'selected' : 'unselected',
             icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
         });
 
         const toggle = (classes: string, icon: string) => {
-            setToggleIcon(() => ({
+            setToggleIcon({
                 state: classes,
                 icon: icon,
-            }));
+            });
         };
 
         const buttonRef = useRef<HTMLButtonElement>(null);
 
-        const callback = useCallback(() => {
-            if (toggled) {
-                if (toggleIcon.state === 'selected') {
-                    toggle('', toggled.unselected ?? 'add_circle');
-                } else {
-                    toggle('selected', toggled.selected ?? 'add_circle');
+        const callback = useCallback(
+            (e: MouseEvent) => {
+                if (toggled) {
+                    if (toggleIcon.state === 'selected') {
+                        toggle('', toggled.unselected ?? 'add_circle');
+                    } else {
+                        toggle('selected', toggled.selected ?? 'add_circle');
+                    }
                 }
-            }
-            if (props.onClick) {
-                props.onClick();
-            }
-        }, [toggleIcon]);
+                if (props.onClick) {
+                    props.onClick.apply(null, e);
+                }
+            },
+            [toggleIcon],
+        );
 
         useImperativeHandle(ref, () => buttonRef.current);