From e3c982227ad4b6a64052374261e04db1ad136602 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 23 Dec 2024 09:47:25 +0200
Subject: [PATCH 1/8] Picker types - customTopElement, onItemSelection

---
 src/components/picker/types.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index d768c450a5..59b4da116b 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -5,6 +5,17 @@ import {ModalTopBarProps} from '../modal/TopBar';
 import {TextFieldMethods, TextFieldProps} from '../textField';
 import {TouchableOpacityProps} from '../touchableOpacity';
 
+export interface CustomTopElementProps {
+  /**
+   * The current multi draft value
+   */
+  value: PickerMultiValue;
+  /*
+   * Set the new multi draft value
+   */
+  setValue: (value: PickerMultiValue) => void;
+}
+
 // Note: enum values are uppercase due to legacy
 export enum PickerModes {
   SINGLE = 'SINGLE',
@@ -180,6 +191,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      * Callback for when picker value change
      */
     onChange?: (value: PickerValue) => void;
+    /**
+     * Callback for when picker item is selected (only for multi mode)
+     */
+    onItemSelection?: (value: PickerMultiValue) => void;
     /**
      * SINGLE or MULTI selection mode
      */
@@ -237,12 +252,20 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
   };
 
 export type PickerPropsWithSingle = PickerBaseProps & {
+  /**
+   * Custom top element
+   */
+  customTopElement?: () => React.ReactElement;
   mode?: PickerModes.SINGLE;
   value?: PickerSingleValue;
   onChange?: (value: PickerSingleValue) => void;
 };
 
 export type PickerPropsWithMulti = PickerBaseProps & {
+  /**
+   * Custom top element, props (vale, setValue) are for multi picker only
+   */
+  customTopElement?: (props: CustomTopElementProps) => React.ReactElement;
   mode?: PickerModes.MULTI;
   value?: PickerMultiValue;
   onChange?: (value: PickerMultiValue) => void;
@@ -305,6 +328,7 @@ export interface PickerContextProps
   isMultiMode: boolean;
   onSelectedLayout: (event: any) => any;
   selectionLimit: PickerProps['selectionLimit'];
+  setValue?: React.Dispatch<React.SetStateAction<PickerMultiValue>> | undefined;
 }
 
 export type PickerItemsListProps = Pick<
@@ -315,6 +339,7 @@ export type PickerItemsListProps = Pick<
   | 'useSafeArea'
   | 'showLoader'
   | 'customLoaderElement'
+  | 'customTopElement'
   | 'showSearch'
   | 'searchStyle'
   | 'searchPlaceholder'

From 9a3d3ddedad32869fe3176920f4312eee7c4d820 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 23 Dec 2024 09:51:16 +0200
Subject: [PATCH 2/8] add customTopElement support in Picker component

---
 src/components/picker/PickerItemsList.tsx     | 17 ++++++++++++-
 .../picker/helpers/usePickerSelection.tsx     | 24 +++++++++++++++++--
 src/components/picker/index.tsx               |  7 +++++-
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index d798445867..4d045a7b77 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -34,7 +34,8 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     mode,
     testID,
     showLoader,
-    customLoaderElement
+    customLoaderElement,
+    customTopElement
   } = props;
   const context = useContext(PickerContext);
 
@@ -161,12 +162,26 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
+  const renderCustomTopElement = () => {
+    const {isMultiMode, value, setValue} = context;
+    if (customTopElement) {
+      if (isMultiMode) {
+        console.log(`renderCustomTopElement, isMultiMode!, value:`, value);
+        //@ts-expect-error - PickerWithMultiValue props need to pass the correct props
+        return customTopElement({value, setValue});
+      }
+      //@ts-expect-error - PickerWithSingleValue props
+      return customTopElement();
+    }
+  };
+
   const renderContent = () => {
     return useWheelPicker ? (
       renderWheel()
     ) : (
       <>
         {renderSearchInput()}
+        {renderCustomTopElement()}
         {renderList()}
       </>
     );
diff --git a/src/components/picker/helpers/usePickerSelection.tsx b/src/components/picker/helpers/usePickerSelection.tsx
index 7ab850c086..98f79169ce 100644
--- a/src/components/picker/helpers/usePickerSelection.tsx
+++ b/src/components/picker/helpers/usePickerSelection.tsx
@@ -3,16 +3,35 @@ import _ from 'lodash';
 import {PickerProps, PickerValue, PickerSingleValue, PickerMultiValue, PickerModes} from '../types';
 
 interface UsePickerSelectionProps
-  extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
+  extends Pick<
+    PickerProps,
+    'migrate' | 'value' | 'onChange' | 'onItemSelection' | 'getItemValue' | 'topBarProps' | 'mode'
+  > {
   pickerExpandableRef: RefObject<any>;
   setSearchValue: (searchValue: string) => void;
 }
 
 const usePickerSelection = (props: UsePickerSelectionProps) => {
-  const {migrate, value, onChange, topBarProps, pickerExpandableRef, getItemValue, setSearchValue, mode} = props;
+  const {
+    migrate,
+    value,
+    onChange,
+    onItemSelection,
+    topBarProps,
+    pickerExpandableRef,
+    getItemValue,
+    setSearchValue,
+    mode
+  } = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value as PickerMultiValue);
   const [multiFinalValue, setMultiFinalValue] = useState(value as PickerMultiValue);
 
+  useEffect(() => {
+    if (mode === PickerModes.MULTI && multiFinalValue !== multiDraftValue) {
+      onItemSelection?.(multiDraftValue);
+    }
+  }, [multiDraftValue]);
+
   useEffect(() => {
     if (mode === PickerModes.MULTI && multiFinalValue !== value) {
       setMultiDraftValue(value as PickerMultiValue);
@@ -50,6 +69,7 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
 
   return {
     multiDraftValue,
+    setMultiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
     cancelSelect
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index 5feeb57783..51792a2db6 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -60,6 +60,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     labelStyle,
     testID,
     onChange,
+    onItemSelection,
     onPress,
     onSearchChange,
     topBarProps,
@@ -78,6 +79,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items: propItems,
     showLoader,
     customLoaderElement,
+    customTopElement,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -101,10 +103,11 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     setSearchValue,
     onSearchChange: _onSearchChange
   } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children, items});
-  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
+  const {multiDraftValue, setMultiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
     migrate,
     value,
     onChange,
+    onItemSelection,
     pickerExpandableRef: pickerExpandable,
     getItemValue,
     topBarProps,
@@ -145,6 +148,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     return {
       migrate,
       value: mode === PickerModes.MULTI ? multiDraftValue : pickerValue,
+      setValue: mode === PickerModes.MULTI ? setMultiDraftValue : undefined,
       onPress: mode === PickerModes.MULTI ? toggleItemSelection : onDoneSelecting,
       isMultiMode: mode === PickerModes.MULTI,
       getItemValue,
@@ -245,6 +249,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         useSafeArea={useSafeArea}
         showLoader={showLoader}
         customLoaderElement={customLoaderElement}
+        customTopElement={customTopElement}
       >
         {filteredItems}
       </PickerItemsList>

From e1b31371c4daf9e7861b09e8222259f7440d3ab7 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 23 Dec 2024 10:32:13 +0200
Subject: [PATCH 3/8] PickerScreen example

---
 .../screens/componentScreens/PickerScreen.tsx | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index 4a2c20fa0d..c2c828bf11 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -83,6 +83,15 @@ const dialogOptions = [
   {label: 'Option 8', value: 6}
 ];
 
+const statusOptions = [
+  {label: 'Overview', value: 'overview'},
+  {label: 'In Progress', value: 'inProgress'},
+  {label: 'Completed', value: 'completed'},
+  {label: 'Pending Review', value: 'pendingReview'},
+  {label: 'Approved', value: 'approved'},
+  {label: 'Rejected', value: 'rejected'}
+];
+
 export default class PickerScreen extends Component {
   picker = React.createRef<PickerMethods>();
   state = {
@@ -96,6 +105,7 @@ export default class PickerScreen extends Component {
     dialogPickerValue: 'java',
     customModalValues: [],
     filter: undefined,
+    statOption: [],
     scheme: undefined,
     contact: 0
   };
@@ -122,6 +132,15 @@ export default class PickerScreen extends Component {
     );
   };
 
+  handleTopElementPress = (allOptionsSelected: boolean, setValue: any) => {
+    if (allOptionsSelected) {
+      setValue([]);
+    } else {
+      const allValues = statusOptions.map(option => option.value);
+      setValue(allValues);
+    }
+  };
+
   render() {
     return (
       <ScrollView keyboardShouldPersistTaps="always">
@@ -195,7 +214,32 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             items={dialogOptions}
           />
-          
+
+          <Text text70 $textDefault>
+            Custom Top Element:
+          </Text>
+          <Picker
+            placeholder="Status"
+            floatingPlaceholder
+            value={this.state.statOption}
+            onChange={items => this.setState({statOption: items})}
+            topBarProps={{title: 'Status'}}
+            mode={Picker.modes.MULTI}
+            items={statusOptions}
+            customTopElement={({value, setValue}) => {
+              const allOptionsSelected = Array.isArray(value) && value.length === statusOptions.length;
+              return (
+                <View margin-s3>
+                  <Button
+                    label={allOptionsSelected ? 'Unselect All' : 'Select All'}
+                    onPress={() => this.handleTopElementPress(allOptionsSelected, setValue)}
+                    size="small"
+                  />
+                </View>
+              );
+            }}
+          />
+
           <Text marginB-10 text70 $textDefault>
             Custom Picker:
           </Text>

From b6303cdc77ecec581c8ff8b853add61a4b7a3070 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 9 Jan 2025 10:25:59 +0200
Subject: [PATCH 4/8] refactor: rename customTopElement, types fix

---
 .../screens/componentScreens/PickerScreen.tsx | 10 ++++----
 src/components/picker/PickerItemsList.tsx     | 17 ++-----------
 src/components/picker/index.tsx               |  4 +--
 src/components/picker/types.ts                | 25 ++++---------------
 4 files changed, 14 insertions(+), 42 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index c2c828bf11..fa7459bffa 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -132,12 +132,12 @@ export default class PickerScreen extends Component {
     );
   };
 
-  handleTopElementPress = (allOptionsSelected: boolean, setValue: any) => {
+  onTopElementPress = (allOptionsSelected: boolean) => {
     if (allOptionsSelected) {
-      setValue([]);
+      this.setState({statOption: []});
     } else {
       const allValues = statusOptions.map(option => option.value);
-      setValue(allValues);
+      this.setState({statOption: allValues});
     }
   };
 
@@ -226,13 +226,13 @@ export default class PickerScreen extends Component {
             topBarProps={{title: 'Status'}}
             mode={Picker.modes.MULTI}
             items={statusOptions}
-            customTopElement={({value, setValue}) => {
+            renderCustomTopElement={value => {
               const allOptionsSelected = Array.isArray(value) && value.length === statusOptions.length;
               return (
                 <View margin-s3>
                   <Button
                     label={allOptionsSelected ? 'Unselect All' : 'Select All'}
-                    onPress={() => this.handleTopElementPress(allOptionsSelected, setValue)}
+                    onPress={() => this.onTopElementPress(allOptionsSelected)}
                     size="small"
                   />
                 </View>
diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index 4d045a7b77..62e7b0430a 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -35,7 +35,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     testID,
     showLoader,
     customLoaderElement,
-    customTopElement
+    renderCustomTopElement
   } = props;
   const context = useContext(PickerContext);
 
@@ -162,26 +162,13 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
-  const renderCustomTopElement = () => {
-    const {isMultiMode, value, setValue} = context;
-    if (customTopElement) {
-      if (isMultiMode) {
-        console.log(`renderCustomTopElement, isMultiMode!, value:`, value);
-        //@ts-expect-error - PickerWithMultiValue props need to pass the correct props
-        return customTopElement({value, setValue});
-      }
-      //@ts-expect-error - PickerWithSingleValue props
-      return customTopElement();
-    }
-  };
-
   const renderContent = () => {
     return useWheelPicker ? (
       renderWheel()
     ) : (
       <>
         {renderSearchInput()}
-        {renderCustomTopElement()}
+        {!!renderCustomTopElement && renderCustomTopElement(context.value)}
         {renderList()}
       </>
     );
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index 51792a2db6..db1164b166 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -79,7 +79,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items: propItems,
     showLoader,
     customLoaderElement,
-    customTopElement,
+    renderCustomTopElement,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -249,7 +249,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         useSafeArea={useSafeArea}
         showLoader={showLoader}
         customLoaderElement={customLoaderElement}
-        customTopElement={customTopElement}
+        renderCustomTopElement={renderCustomTopElement}
       >
         {filteredItems}
       </PickerItemsList>
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 59b4da116b..a78d464e6a 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -5,17 +5,6 @@ import {ModalTopBarProps} from '../modal/TopBar';
 import {TextFieldMethods, TextFieldProps} from '../textField';
 import {TouchableOpacityProps} from '../touchableOpacity';
 
-export interface CustomTopElementProps {
-  /**
-   * The current multi draft value
-   */
-  value: PickerMultiValue;
-  /*
-   * Set the new multi draft value
-   */
-  setValue: (value: PickerMultiValue) => void;
-}
-
 // Note: enum values are uppercase due to legacy
 export enum PickerModes {
   SINGLE = 'SINGLE',
@@ -221,6 +210,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
       itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
       label?: string
     ) => React.ReactElement;
+    /**
+     * Custom top element, value prop is relevant for multi picker use cases
+     */
+    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -252,20 +245,12 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
   };
 
 export type PickerPropsWithSingle = PickerBaseProps & {
-  /**
-   * Custom top element
-   */
-  customTopElement?: () => React.ReactElement;
   mode?: PickerModes.SINGLE;
   value?: PickerSingleValue;
   onChange?: (value: PickerSingleValue) => void;
 };
 
 export type PickerPropsWithMulti = PickerBaseProps & {
-  /**
-   * Custom top element, props (vale, setValue) are for multi picker only
-   */
-  customTopElement?: (props: CustomTopElementProps) => React.ReactElement;
   mode?: PickerModes.MULTI;
   value?: PickerMultiValue;
   onChange?: (value: PickerMultiValue) => void;
@@ -339,7 +324,7 @@ export type PickerItemsListProps = Pick<
   | 'useSafeArea'
   | 'showLoader'
   | 'customLoaderElement'
-  | 'customTopElement'
+  | 'renderCustomTopElement'
   | 'showSearch'
   | 'searchStyle'
   | 'searchPlaceholder'

From 9542bde0156bf0d3daabe00a725e6f79f8a7a792 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 13 Jan 2025 11:41:46 +0200
Subject: [PATCH 5/8] remove onItemSelection prop

---
 .../picker/helpers/usePickerSelection.tsx     | 23 ++-----------------
 src/components/picker/index.tsx               |  2 --
 src/components/picker/types.ts                |  4 ----
 3 files changed, 2 insertions(+), 27 deletions(-)

diff --git a/src/components/picker/helpers/usePickerSelection.tsx b/src/components/picker/helpers/usePickerSelection.tsx
index 98f79169ce..64b22a1689 100644
--- a/src/components/picker/helpers/usePickerSelection.tsx
+++ b/src/components/picker/helpers/usePickerSelection.tsx
@@ -3,35 +3,16 @@ import _ from 'lodash';
 import {PickerProps, PickerValue, PickerSingleValue, PickerMultiValue, PickerModes} from '../types';
 
 interface UsePickerSelectionProps
-  extends Pick<
-    PickerProps,
-    'migrate' | 'value' | 'onChange' | 'onItemSelection' | 'getItemValue' | 'topBarProps' | 'mode'
-  > {
+  extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
   pickerExpandableRef: RefObject<any>;
   setSearchValue: (searchValue: string) => void;
 }
 
 const usePickerSelection = (props: UsePickerSelectionProps) => {
-  const {
-    migrate,
-    value,
-    onChange,
-    onItemSelection,
-    topBarProps,
-    pickerExpandableRef,
-    getItemValue,
-    setSearchValue,
-    mode
-  } = props;
+  const {migrate, value, onChange, topBarProps, pickerExpandableRef, getItemValue, setSearchValue, mode} = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value as PickerMultiValue);
   const [multiFinalValue, setMultiFinalValue] = useState(value as PickerMultiValue);
 
-  useEffect(() => {
-    if (mode === PickerModes.MULTI && multiFinalValue !== multiDraftValue) {
-      onItemSelection?.(multiDraftValue);
-    }
-  }, [multiDraftValue]);
-
   useEffect(() => {
     if (mode === PickerModes.MULTI && multiFinalValue !== value) {
       setMultiDraftValue(value as PickerMultiValue);
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index 8b8cec0f28..ef8bf1e443 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -60,7 +60,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     labelStyle,
     testID,
     onChange,
-    onItemSelection,
     onPress,
     onSearchChange,
     topBarProps,
@@ -107,7 +106,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     migrate,
     value,
     onChange,
-    onItemSelection,
     pickerExpandableRef: pickerExpandable,
     getItemValue,
     topBarProps,
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index a78d464e6a..9884254ef5 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -180,10 +180,6 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      * Callback for when picker value change
      */
     onChange?: (value: PickerValue) => void;
-    /**
-     * Callback for when picker item is selected (only for multi mode)
-     */
-    onItemSelection?: (value: PickerMultiValue) => void;
     /**
      * SINGLE or MULTI selection mode
      */

From a7048dbf301cbe4763087c1ebda15cfc8964cf9e Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 13 Jan 2025 11:45:20 +0200
Subject: [PATCH 6/8]  remove unused setValue from Picker context

---
 src/components/picker/helpers/usePickerSelection.tsx | 1 -
 src/components/picker/index.tsx                      | 3 +--
 src/components/picker/types.ts                       | 3 +--
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/picker/helpers/usePickerSelection.tsx b/src/components/picker/helpers/usePickerSelection.tsx
index 64b22a1689..7ab850c086 100644
--- a/src/components/picker/helpers/usePickerSelection.tsx
+++ b/src/components/picker/helpers/usePickerSelection.tsx
@@ -50,7 +50,6 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
 
   return {
     multiDraftValue,
-    setMultiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
     cancelSelect
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index ef8bf1e443..cec10a0b74 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -102,7 +102,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     setSearchValue,
     onSearchChange: _onSearchChange
   } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children, items});
-  const {multiDraftValue, setMultiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
+  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
     migrate,
     value,
     onChange,
@@ -146,7 +146,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     return {
       migrate,
       value: mode === PickerModes.MULTI ? multiDraftValue : pickerValue,
-      setValue: mode === PickerModes.MULTI ? setMultiDraftValue : undefined,
       onPress: mode === PickerModes.MULTI ? toggleItemSelection : onDoneSelecting,
       isMultiMode: mode === PickerModes.MULTI,
       getItemValue,
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 9884254ef5..4942534ee5 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -207,7 +207,7 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
       label?: string
     ) => React.ReactElement;
     /**
-     * Custom top element, value prop is relevant for multi picker use cases
+     * Custom top element
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**
@@ -309,7 +309,6 @@ export interface PickerContextProps
   isMultiMode: boolean;
   onSelectedLayout: (event: any) => any;
   selectionLimit: PickerProps['selectionLimit'];
-  setValue?: React.Dispatch<React.SetStateAction<PickerMultiValue>> | undefined;
 }
 
 export type PickerItemsListProps = Pick<

From 615a7330547299763f16db9b6c3fc5df03d57aaf Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 13 Jan 2025 11:48:48 +0200
Subject: [PATCH 7/8] use optional chaining for renderCustomTopElement

---
 src/components/picker/PickerItemsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index 62e7b0430a..6597e6a10b 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -168,7 +168,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     ) : (
       <>
         {renderSearchInput()}
-        {!!renderCustomTopElement && renderCustomTopElement(context.value)}
+        {renderCustomTopElement?.(context.value)}
         {renderList()}
       </>
     );

From 45bd9acd5c19223e709cb4121fb8db9b7ea6b2d8 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sun, 19 Jan 2025 16:52:02 +0200
Subject: [PATCH 8/8] renderCustomTopElement added to api.json

---
 src/components/picker/api/picker.api.json | 5 +++++
 src/components/picker/types.ts            | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/picker/api/picker.api.json b/src/components/picker/api/picker.api.json
index 0cb3846c59..60994bd1fb 100644
--- a/src/components/picker/api/picker.api.json
+++ b/src/components/picker/api/picker.api.json
@@ -47,6 +47,11 @@
       "type": "(value, {{...props, isSelected}}, itemLabel) => void",
       "description": "Render custom picker item"
     },
+    {
+      "name": "renderCustomTopElement",
+      "type": "(value?: PickerValue) => React.ReactElement",
+      "description": "Render custom top element"
+    },
     {
       "name": "renderCustomModal",
       "type": "({visible, children, toggleModal}) => void)",
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 4942534ee5..a941527c2d 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -207,7 +207,7 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
       label?: string
     ) => React.ReactElement;
     /**
-     * Custom top element
+     * Render custom top element
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**