From 19c7dfc0cffe739cb6d4fda0b508beab34694241 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Toprak=20Ko=C3=A7?= <hello@toprak.dev>
Date: Fri, 15 Mar 2024 17:48:57 +0300
Subject: [PATCH] MultiSelecet Checkbox Fix

---
 components/lib/multiselect/MultiSelectBase.js  |  4 ----
 components/lib/multiselect/MultiSelectItem.js  | 13 +++----------
 components/lib/multiselect/MultiSelectPanel.js |  2 ++
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
index 53a515f6df..ba47121fa7 100644
--- a/components/lib/multiselect/MultiSelectBase.js
+++ b/components/lib/multiselect/MultiSelectBase.js
@@ -53,10 +53,6 @@ const classes = {
         }),
     checkboxContainer: 'p-checkbox p-component',
     checkboxIcon: 'p-checkbox-icon p-c',
-    checkbox: ({ itemProps: props }) =>
-        classNames('p-checkbox-box', {
-            'p-highlight': props.selected
-        }),
     transition: 'p-connected-overlay'
 };
 
diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
index e91409ce8f..63a21dae8b 100644
--- a/components/lib/multiselect/MultiSelectItem.js
+++ b/components/lib/multiselect/MultiSelectItem.js
@@ -2,12 +2,13 @@ import * as React from 'react';
 import { useMergeProps } from '../hooks/Hooks';
 import { CheckIcon } from '../icons/check';
 import { Ripple } from '../ripple/Ripple';
+import { Checkbox } from '../checkbox/Checkbox';
 import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 
 export const MultiSelectItem = React.memo((props) => {
     const [focusedState, setFocusedState] = React.useState(false);
     const mergeProps = useMergeProps();
-    const { ptm, cx } = props;
+    const { ptm, cx, isUnstyled } = props;
 
     const getPTOptions = (key) => {
         return ptm(key, {
@@ -59,14 +60,6 @@ export const MultiSelectItem = React.memo((props) => {
         getPTOptions('checkboxContainer')
     );
 
-    const checkboxProps = mergeProps(
-        {
-            className: cx('checkbox', { itemProps: props }),
-            'data-p-highlight': props.selected
-        },
-        getPTOptions('checkbox')
-    );
-
     const itemProps = mergeProps(
         {
             className: classNames(props.className, props.option.className, cx('item', { itemProps: props })),
@@ -86,7 +79,7 @@ export const MultiSelectItem = React.memo((props) => {
     return (
         <li {...itemProps}>
             <div {...checkboxContainerProps}>
-                <div {...checkboxProps}>{checkboxIcon}</div>
+                <Checkbox checked={props.selected} icon={checkboxIcon} pt={ptm('checkbox')} unstyled={isUnstyled()} />
             </div>
             <span>{content}</span>
             <Ripple />
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index 9dd06a4e2e..f46eb9c95f 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -120,6 +120,7 @@ export const MultiSelectPanel = React.memo(
                         disabled={disabled}
                         className={props.itemClassName}
                         checkboxIcon={props.checkboxIcon}
+                        isUnstyled={isUnstyled}
                         ptm={ptm}
                         cx={cx}
                     />
@@ -197,6 +198,7 @@ export const MultiSelectPanel = React.memo(
                         disabled={disabled}
                         className={props.itemClassName}
                         checkboxIcon={props.checkboxIcon}
+                        isUnstyled={isUnstyled}
                         ptm={ptm}
                         cx={cx}
                     />