#267 Fix Checkbox in Dialog

src/form/Checkbox/Checkbox.story.tsx

@@ -1,5 +1,7 @@
 import React, { Fragment, useState } from 'react';
 import { Checkbox } from './Checkbox';
+import { Dialog, useDialog } from '@/layers/Dialog';
+import { Button } from '@/elements/Button';
 
 export default {
   title: 'Components/Form/Checkbox',
@@ -158,3 +160,32 @@ export const CustomLabel = () => {
     />
   );
 };
+
+export const WithDialog = () => {
+  const { isOpen, setOpen } = useDialog();
+  const [checked, setChecked] = useState(true);
+
+  return (
+    <main className="flex flex-col items-center gap-8 py-16 max-w-[1280px] mx-auto">
+      <div className="flex flex-row items-center gap-6">
+        <Button onClick={() => setOpen(true)}>Open</Button>
+      </div>
+      <Dialog
+        size={600}
+        open={isOpen}
+        onClose={() => setOpen(false)}
+        header="Checkbox test"
+      >
+        {() => (
+          <div>
+            <Checkbox
+              label="Test checkbox"
+              checked={checked}
+              onChange={setChecked}
+            />
+          </div>
+        )}
+      </Dialog>
+    </main>
+  );
+};

src/form/Checkbox/Checkbox.tsx

@@ -3,7 +3,8 @@ import React, {
   forwardRef,
   LegacyRef,
   ReactNode,
-  useCallback
+  useCallback,
+  useEffect
 } from 'react';
 import { motion, useMotionValue, useTransform } from 'framer-motion';
 import { twMerge } from 'tailwind-merge';
@@ -121,6 +122,12 @@ export const Checkbox: FC<CheckboxProps & CheckboxRef> = forwardRef(
     const pathLength = useMotionValue(0);
     const opacity = useTransform(pathLength, [0.05, 0.15], [0, 1]);
 
+    useEffect(() => {
+      // If the checkbox is inside a dialog, the animation will not work.
+      // This is a workaround to force the animation to work.
+      pathLength.set(checked ? 1 : 0);
+    }, [checked, pathLength]);
+
     const checkVariants = {
       pressed: (isChecked: boolean) => ({ pathLength: isChecked ? 0.85 : 0.3 }),
       checked: { pathLength: 1 },
@@ -177,7 +184,7 @@ export const Checkbox: FC<CheckboxProps & CheckboxRef> = forwardRef(
           }}
         >
           <motion.svg
-            initial={checked ? 'checked' : 'unchecked'}
+            initial={false}
             animate={checked ? 'checked' : 'unchecked'}
             whileHover={!disabled ? 'hover' : undefined}
             whileTap={!disabled ? 'pressed' : undefined}
@@ -196,16 +203,19 @@ export const Checkbox: FC<CheckboxProps & CheckboxRef> = forwardRef(
             />
             {intermediate ? (
               <motion.path
+                layoutId="checkPath"
                 d={intermediatePath}
                 fill="transparent"
                 strokeWidth="1"
                 className={theme.check.base}
                 variants={checkVariants}
+                initial={checked ? 'checked' : 'unchecked'}
                 style={{ pathLength, opacity }}
                 custom={checked}
               />
             ) : (
               <motion.path
+                layoutId="checkPath"
                 d={checkedPath}
                 fill="transparent"
                 strokeWidth="1"
@@ -215,6 +225,7 @@ export const Checkbox: FC<CheckboxProps & CheckboxRef> = forwardRef(
                   checked && theme.check.checked
                 )}
                 variants={checkVariants}
+                initial={checked ? 'checked' : 'unchecked'}
                 style={{ pathLength, opacity }}
                 custom={checked}
               />

src/form/Input/DebouncedInput/DebouncedInput.tsx

@@ -13,8 +13,7 @@ export const DebouncedInput = forwardRef<InputRef, DebouncedInputProps>(
     { debounce = 100, value, onChange, onValueChange, ...rest },
     ref: Ref<InputRef>
   ) => {
-    // eslint-disable-next-line no-undef
-    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const [internalValue, setInternalValue] = useState<
       string | number | readonly string[]
     >(value);