From 6added7e374278631df8f35a32afeebd4ee756ec Mon Sep 17 00:00:00 2001
From: Benji <64439681+benjitrosch@users.noreply.github.com>
Date: Fri, 15 Apr 2022 13:54:05 -0400
Subject: [PATCH] chore(Checkbox): added indeterminate state (#93)

---
 src/Checkbox/Checkbox.stories.tsx |  7 ++++++-
 src/Checkbox/Checkbox.tsx         | 26 ++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx
index c795444f..368923dc 100644
--- a/src/Checkbox/Checkbox.stories.tsx
+++ b/src/Checkbox/Checkbox.stories.tsx
@@ -9,13 +9,18 @@ export default {
   component: Checkbox,
 } as Meta
 
-export const Template: Story<CheckboxProps> = (args) => {
+const Template: Story<CheckboxProps> = (args) => {
   return <Checkbox {...args} />
 }
 
 export const Default = Template.bind({})
 Default.args = {}
 
+export const Indeterminate = Template.bind({})
+Indeterminate.args = {
+  indeterminate: true
+}
+
 const FormTemplate: Story<CheckboxProps> = (args) => {
   return (
     <Form className="shadow bg-base-200 w-64 rounded-lg p-4">
diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx
index 94dd052f..be2de290 100644
--- a/src/Checkbox/Checkbox.tsx
+++ b/src/Checkbox/Checkbox.tsx
@@ -1,4 +1,9 @@
-import React, { forwardRef } from 'react'
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
@@ -15,6 +20,7 @@ export type CheckboxProps = Omit<
   IComponentBaseProps & {
     color?: ComponentBrandColors
     size?: ComponentSize
+    indeterminate?: boolean
   }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
@@ -24,6 +30,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       defaultChecked = false,
       color,
       size,
+      indeterminate,
       dataTheme,
       className,
       ...props
@@ -39,10 +46,25 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       })
     )
 
+    const checkboxRef = useRef<HTMLInputElement>(null)
+    useImperativeHandle(ref, () => checkboxRef.current as HTMLInputElement)
+
+    useEffect(() => {
+      if (!checkboxRef.current) {
+        return
+      }
+
+      if (indeterminate) {
+        checkboxRef.current.indeterminate = true
+      } else {
+        checkboxRef.current.indeterminate = false
+      }
+    }, [indeterminate])
+
     return (
       <input
         {...props}
-        ref={ref}
+        ref={checkboxRef}
         type="checkbox"
         checked={checked}
         defaultChecked={defaultChecked}