From de810eea26cdf076fda2b1c49536bff820c75730 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikael=20J=C3=A4rvinen?= <mikael.jarvinen@lyyti.com>
Date: Mon, 21 Aug 2023 09:14:15 +0300
Subject: [PATCH] feat: Add checkbox to multi select

---
 src/components/Autocomplete.tsx   | 4 ++++
 src/components/Select.tsx         | 3 +++
 stories/Inputs/Select.stories.tsx | 8 ++++++++
 3 files changed, 15 insertions(+)

diff --git a/src/components/Autocomplete.tsx b/src/components/Autocomplete.tsx
index 2aba886c1..50687790f 100644
--- a/src/components/Autocomplete.tsx
+++ b/src/components/Autocomplete.tsx
@@ -10,6 +10,7 @@ import Chip from './Chip';
 import { forwardRef, Ref } from 'react';
 import MenuItem from './MenuItem';
 import Typography from './Typography';
+import Checkbox from './Checkbox';
 
 declare module '@mui/material' {
   interface AutocompleteProps<
@@ -47,6 +48,7 @@ export interface AutocompleteProps<T = OptionsType>
   'data-testid'?: string;
   ref?: Ref<HTMLDivElement>;
   name?: string;
+  checkbox?: boolean;
 }
 
 const Autocomplete = (
@@ -67,6 +69,7 @@ const Autocomplete = (
     'data-testid': testid,
     sx = {},
     name,
+    checkbox,
     ...props
   }: AutocompleteProps,
   ref: Ref<HTMLDivElement>
@@ -128,6 +131,7 @@ const Autocomplete = (
               }),
             }}
           >
+            {checkbox && (<Checkbox checked={state.selected} />)}
             {label}
             {description && (
               <Typography variant="caption" color="grey.400">
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index e4da5d599..b3e0cae7e 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -9,6 +9,7 @@ type CommonProps = {
   optionDivider?: boolean;
   adornment?: AutocompleteProps<OptionsType>['adornment'];
   multiple?: boolean;
+  checkbox?: boolean;
   'data-testid'?: string;
   ref?: Ref<HTMLDivElement>;
 };
@@ -29,6 +30,7 @@ const Select = (
     multiple = false,
     'data-testid': testid,
     optionDivider,
+    checkbox,
     ...props
   }: SelectProps,
   ref: Ref<HTMLDivElement>
@@ -37,6 +39,7 @@ const Select = (
     return (
       <Autocomplete
         multiple={multiple}
+        checkbox={checkbox}
         options={options}
         disableClearable
         data-testid={testid}
diff --git a/stories/Inputs/Select.stories.tsx b/stories/Inputs/Select.stories.tsx
index 0462953d0..de3d2b04b 100644
--- a/stories/Inputs/Select.stories.tsx
+++ b/stories/Inputs/Select.stories.tsx
@@ -126,6 +126,14 @@ MultipleSelect.args = {
   fullWidth: true,
 };
 
+export const MultipleSelectCheckbox = MultiSelectTemplate.bind({});
+MultipleSelectCheckbox.args = {
+  multiple: true,
+  placeholder: 'Select',
+  fullWidth: true,
+  checkbox: true,
+};
+
 export const MultipleSelectOptionDivider = MultiSelectTemplate.bind({});
 MultipleSelectOptionDivider.args = {
   multiple: true,