From 3fe8e8df4768a8e5a9092c4d20b56a1fc9170ada Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 6 Mar 2025 12:03:29 +0200
Subject: [PATCH 01/33] Picker selection control bar and toggle all items
 functionality

---
 .../screens/componentScreens/PickerScreen.tsx | 58 ++++++++++-----
 src/components/picker/PickerItemsList.tsx     | 18 ++++-
 .../picker/PickerSelectionControlBar.tsx      | 72 +++++++++++++++++++
 .../picker/helpers/usePickerSelection.tsx     |  8 ++-
 src/components/picker/index.tsx               | 38 ++++++----
 src/components/picker/types.ts                | 51 +++++++++++++
 src/index.ts                                  |  3 +-
 7 files changed, 212 insertions(+), 36 deletions(-)
 create mode 100644 src/components/picker/PickerSelectionControlBar.tsx

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index fa7459bffa..b2d92b312c 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -15,7 +15,8 @@ import {
   PanningProvider,
   PickerProps,
   RenderCustomModalProps,
-  PickerMethods
+  PickerMethods,
+  SegmentedControl
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import {longOptions} from './PickerScreenLongOptions';
@@ -24,6 +25,20 @@ const tagIcon = require('../../assets/icons/tags.png');
 const dropdown = require('../../assets/icons/chevronDown.png');
 const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;
 
+const selectAllSegment = [
+  {label: Picker.selectAllType.button},
+  {label: Picker.selectAllType.checkbox},
+  {label: Picker.selectAllType.none}
+];
+
+const buttonProps = {
+  onPress: (items: any) => console.log('onPress', items)
+};
+
+const checkboxProps = {
+  onValueChange: (value: boolean) => console.log('onValueChange', value)
+};
+
 const renderContact = (contactValue: any, props: any) => {
   const contact = contacts[contactValue as number];
   return (
@@ -107,7 +122,12 @@ export default class PickerScreen extends Component {
     filter: undefined,
     statOption: [],
     scheme: undefined,
-    contact: 0
+    contact: 0,
+    selectAllType: Picker.selectAllType.button
+  };
+
+  _onSegmentChange = (index: number) => {
+    this.setState({selectAllType: Picker.selectAllType[selectAllSegment[index].label]});
   };
 
   renderDialog: PickerProps['renderOverlay'] = (modalProps: RenderCustomModalProps) => {
@@ -148,7 +168,7 @@ export default class PickerScreen extends Component {
           <Text text40 $textDefault>
             Picker
           </Text>
-          
+
           <Picker
             placeholder="Favorite Language"
             floatingPlaceholder
@@ -216,7 +236,7 @@ export default class PickerScreen extends Component {
           />
 
           <Text text70 $textDefault>
-            Custom Top Element:
+            Selection Status:
           </Text>
           <Picker
             placeholder="Status"
@@ -226,21 +246,23 @@ export default class PickerScreen extends Component {
             topBarProps={{title: 'Status'}}
             mode={Picker.modes.MULTI}
             items={statusOptions}
-            renderCustomTopElement={value => {
-              const allOptionsSelected = Array.isArray(value) && value.length === statusOptions.length;
-              return (
-                <View margin-s3>
-                  <Button
-                    label={allOptionsSelected ? 'Unselect All' : 'Select All'}
-                    onPress={() => this.onTopElementPress(allOptionsSelected)}
-                    size="small"
-                  />
-                </View>
-              );
-            }}
+            selectionStatus={{selectAllType: this.state.selectAllType, buttonProps, checkboxProps}}
+            // renderCustomTopElement={value => {
+            //   const allOptionsSelected = Array.isArray(value) && value.length === statusOptions.length;
+            //   return (
+            //     <View margin-s3>
+            //       <Button
+            //         label={allOptionsSelected ? 'Unselect All' : 'Select All'}
+            //         onPress={() => this.onTopElementPress(allOptionsSelected)}
+            //         size="small"
+            //       />
+            //     </View>
+            //   );
+            // }}
           />
+          <SegmentedControl segments={selectAllSegment} onChangeIndex={this._onSegmentChange}/>
 
-          <Text marginB-10 text70 $textDefault>
+          <Text marginV-10 text70 $textDefault>
             Custom Picker:
           </Text>
           <Picker
@@ -299,7 +321,7 @@ export default class PickerScreen extends Component {
             style={{alignSelf: 'flex-start'}}
             onPress={() => this.picker.current?.openExpandable?.()}
           />
-          
+
           <Text text60 marginT-s5>
             Different Field Types
           </Text>
diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index 5703d0db90..68a4a4562d 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -9,10 +9,11 @@ import Text from '../text';
 import Icon from '../icon';
 import Button from '../button';
 import WheelPicker from '../WheelPicker';
-import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes} from './types';
+import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes, PickerMultiValue} from './types';
 import PickerContext from './PickerContext';
 import PickerItem from './PickerItem';
 import {Constants} from '../../commons/new';
+import PickerSelectionControlBar from './PickerSelectionControlBar';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
@@ -35,7 +36,8 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     testID,
     showLoader,
     customLoaderElement,
-    renderCustomTopElement
+    renderCustomTopElement,
+    selectionStatus
   } = props;
   const context = useContext(PickerContext);
 
@@ -169,6 +171,17 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
+  const renderSelectionStatus = useMemo(() => {
+    const props = {...selectionStatus, items};
+    return (
+      <PickerSelectionControlBar
+        {...props}
+        value={context?.value as PickerMultiValue}
+        toggleAllItemsSelection={context?.toggleAllItemsSelection}
+      />
+    );
+  }, [selectionStatus, items, context?.value, context?.toggleAllItemsSelection]);
+
   const renderContent = () => {
     return useWheelPicker ? (
       renderWheel()
@@ -176,6 +189,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
       <>
         {renderSearchInput()}
         {renderCustomTopElement?.(context.value)}
+        {mode === PickerModes.MULTI && renderSelectionStatus}
         {renderList()}
       </>
     );
diff --git a/src/components/picker/PickerSelectionControlBar.tsx b/src/components/picker/PickerSelectionControlBar.tsx
new file mode 100644
index 0000000000..a0bcc7f313
--- /dev/null
+++ b/src/components/picker/PickerSelectionControlBar.tsx
@@ -0,0 +1,72 @@
+import React, {useMemo, useCallback} from 'react';
+import Button from '../button';
+import Checkbox from '../checkbox';
+import View from '../view';
+import Text from '../text';
+import {PickerItemProps, PickerProps, PickerContextProps, PickerMultiValue} from './types';
+
+export type PickerSelectionControlBarProps = PickerProps['selectionStatus'] &
+  Partial<PickerContextProps> & {
+    value?: PickerMultiValue;
+    items?: PickerItemProps[];
+  };
+
+export default function PickerSelectionControlBar(props: PickerSelectionControlBarProps) {
+  const {
+    selectAllType = 'none',
+    buttonProps = {},
+    checkboxProps = {},
+    containerStyle,
+    value = [],
+    items = [],
+    toggleAllItemsSelection,
+    showLabel = true,
+    customLabel
+  } = props;
+
+  const availableItems = useMemo(() => items.filter(item => !item.disabled).map(item => item.value), [items]);
+  const isAllSelected = value.length === availableItems.length;
+  const checkboxIndeterminate = value.length > 0 && value.length < availableItems.length;
+  const defaultLabel = `${value.length} Selected ${isAllSelected ? '(All)' : ''}`;
+
+  const handlePress = useCallback(() => {
+    const newSelectionState = !isAllSelected;
+    toggleAllItemsSelection?.(availableItems, newSelectionState);
+    if (selectAllType === 'button') {
+      buttonProps.onPress?.(availableItems);
+    } else if (selectAllType === 'checkbox') {
+      checkboxProps.onValueChange?.(newSelectionState);
+    }
+  }, [isAllSelected, toggleAllItemsSelection, availableItems, selectAllType, buttonProps, checkboxProps]);
+
+  const renderSelectionStatus = () => {
+    if (selectAllType === 'button') {
+      return (
+        <Button label={isAllSelected ? 'Deselect All' : 'Select All'} link {...buttonProps} onPress={handlePress}/>
+      );
+    } else if (selectAllType === 'checkbox') {
+      return (
+        <Checkbox
+          {...checkboxProps}
+          value={value.length > 0}
+          indeterminate={checkboxIndeterminate}
+          onValueChange={handlePress}
+        />
+      );
+    }
+  };
+
+  const renderLabel = () => {
+    if (showLabel) {
+      return <Text>{customLabel || defaultLabel}</Text>;
+    }
+    return null;
+  };
+
+  return (
+    <View row spread centerV paddingH-page style={containerStyle}>
+      {renderLabel()}
+      {renderSelectionStatus()}
+    </View>
+  );
+}
diff --git a/src/components/picker/helpers/usePickerSelection.tsx b/src/components/picker/helpers/usePickerSelection.tsx
index 7ab850c086..27ce7472bc 100644
--- a/src/components/picker/helpers/usePickerSelection.tsx
+++ b/src/components/picker/helpers/usePickerSelection.tsx
@@ -48,11 +48,17 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     topBarProps?.onCancel?.();
   }, [multiFinalValue, topBarProps]);
 
+  const toggleAllItemsSelection = useCallback((itemsToToggle: PickerMultiValue, select: boolean) => {
+    setMultiDraftValue(select ? itemsToToggle : []);
+  }, []);
+
   return {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    setMultiFinalValue,
+    toggleAllItemsSelection
   };
 };
 
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index cec10a0b74..b6806acea8 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -28,7 +28,8 @@ import {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectAllType
 } from './types';
 import {DialogProps} from '../../incubator/dialog';
 
@@ -42,6 +43,7 @@ type PickerStatics = {
   modes: typeof PickerModes;
   fieldTypes: typeof PickerFieldTypes;
   extractPickerItems: typeof extractPickerItems;
+  selectAllType: typeof PickerSelectAllType;
 };
 
 const Picker = React.forwardRef((props: PickerProps, ref) => {
@@ -79,6 +81,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
+    selectionStatus,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -102,16 +105,17 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     setSearchValue,
     onSearchChange: _onSearchChange
   } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children, items});
-  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
-    migrate,
-    value,
-    onChange,
-    pickerExpandableRef: pickerExpandable,
-    getItemValue,
-    topBarProps,
-    setSearchValue,
-    mode
-  });
+  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect, toggleAllItemsSelection} =
+    usePickerSelection({
+      migrate,
+      value,
+      onChange,
+      pickerExpandableRef: pickerExpandable,
+      getItemValue,
+      topBarProps,
+      setSearchValue,
+      mode
+    });
 
   const {label, accessibilityInfo} = usePickerLabel({
     value,
@@ -152,7 +156,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
-      selectionLimit
+      selectionLimit,
+      toggleAllItemsSelection
     };
   }, [
     migrate,
@@ -165,7 +170,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     selectionLimit,
     onSelectedItemLayout,
     toggleItemSelection,
-    onDoneSelecting
+    onDoneSelecting,
+    toggleAllItemsSelection
   ]);
 
   const renderPickerItem = useCallback((item: PickerItemProps, index: number): React.ReactElement => {
@@ -247,6 +253,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         showLoader={showLoader}
         customLoaderElement={customLoaderElement}
         renderCustomTopElement={renderCustomTopElement}
+        selectionStatus={selectionStatus}
       >
         {filteredItems}
       </PickerItemsList>
@@ -306,6 +313,8 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
+//@ts-ignore
+Picker.selectAllType = PickerSelectAllType;
 
 export {
   PickerProps,
@@ -316,7 +325,8 @@ export {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectAllType
 };
 export {Picker}; // For tests
 export default Picker as typeof Picker & PickerStatics;
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index a941527c2d..7c939e4aeb 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -4,6 +4,8 @@ import {ExpandableOverlayProps, ExpandableOverlayMethods} from '../../incubator/
 import {ModalTopBarProps} from '../modal/TopBar';
 import {TextFieldMethods, TextFieldProps} from '../textField';
 import {TouchableOpacityProps} from '../touchableOpacity';
+import {ButtonProps} from '../button';
+import {CheckboxProps} from '../checkbox';
 
 // Note: enum values are uppercase due to legacy
 export enum PickerModes {
@@ -17,6 +19,12 @@ export enum PickerFieldTypes {
   settings = 'settings'
 }
 
+export enum PickerSelectAllType {
+  none = 'none',
+  button = 'button',
+  checkbox = 'checkbox'
+}
+
 // TODO: Remove type
 // type PickerValueDeprecated = {value: string | number; label: string};
 
@@ -159,6 +167,43 @@ type PickerExpandableOverlayProps = {
   enableModalBlur?: boolean;
 };
 
+interface getLabelOptions {
+  selectedCount?: number;
+  value?: PickerItemProps[];
+  isSelectedAll?: boolean;
+}
+
+type PickerSelectionStatusProps = {
+  /**
+   * A function that returns the label to show for the selected Picker value
+   */
+  getLabel?: (options?: getLabelOptions) => string;
+  /**
+   * Select all element type
+   */
+  selectAllType?: PickerSelectAllType | `${PickerSelectAllType}`;
+  /**
+   * Button props
+   */
+  buttonProps?: ButtonProps;
+  /**
+   * Checkbox props
+   */
+  checkboxProps?: CheckboxProps;
+  /**
+   * Custom container style
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Control weather to show the label or not
+   */
+  showLabel?: boolean;
+  /**
+   * Custom label to show next to the selection element.
+   */
+  customLabel?: string;
+};
+
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
   PickerPropsDeprecation &
   PickerExpandableOverlayProps &
@@ -210,6 +255,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      * Render custom top element
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
+    /**
+     *
+     */
+    selectionStatus?: PickerSelectionStatusProps;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -309,6 +358,7 @@ export interface PickerContextProps
   isMultiMode: boolean;
   onSelectedLayout: (event: any) => any;
   selectionLimit: PickerProps['selectionLimit'];
+  toggleAllItemsSelection?: (itemsToToggle: PickerMultiValue, select: boolean) => void;
 }
 
 export type PickerItemsListProps = Pick<
@@ -320,6 +370,7 @@ export type PickerItemsListProps = Pick<
   | 'showLoader'
   | 'customLoaderElement'
   | 'renderCustomTopElement'
+  | 'selectionStatus'
   | 'showSearch'
   | 'searchStyle'
   | 'searchPlaceholder'
diff --git a/src/index.ts b/src/index.ts
index 5cbd7088d7..1950cbb829 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -121,7 +121,8 @@ export {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectAllType
 } from './components/picker';
 export {default as PieChart, type PieChartProps, PieChartSegmentProps} from './components/pieChart';
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';

From 81ee79412858460b7aeac70558e792c611e2269e Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 17 Mar 2025 10:21:42 +0200
Subject: [PATCH 02/33] Refactor PickerScreen layout

---
 .../screens/componentScreens/PickerScreen.tsx | 22 +++++--------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index b2d92b312c..64ead75b6c 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -235,9 +235,12 @@ export default class PickerScreen extends Component {
             items={dialogOptions}
           />
 
-          <Text text70 $textDefault>
-            Selection Status:
-          </Text>
+          <View row spread centerV>
+            <Text text70 $textDefault>
+              Selection Status:
+            </Text>
+            <SegmentedControl segments={selectAllSegment} onChangeIndex={this._onSegmentChange}/>
+          </View>
           <Picker
             placeholder="Status"
             floatingPlaceholder
@@ -247,20 +250,7 @@ export default class PickerScreen extends Component {
             mode={Picker.modes.MULTI}
             items={statusOptions}
             selectionStatus={{selectAllType: this.state.selectAllType, buttonProps, checkboxProps}}
-            // renderCustomTopElement={value => {
-            //   const allOptionsSelected = Array.isArray(value) && value.length === statusOptions.length;
-            //   return (
-            //     <View margin-s3>
-            //       <Button
-            //         label={allOptionsSelected ? 'Unselect All' : 'Select All'}
-            //         onPress={() => this.onTopElementPress(allOptionsSelected)}
-            //         size="small"
-            //       />
-            //     </View>
-            //   );
-            // }}
           />
-          <SegmentedControl segments={selectAllSegment} onChangeIndex={this._onSegmentChange}/>
 
           <Text marginV-10 text70 $textDefault>
             Custom Picker:

From fb6f1490b5c404cb90add0981ffa661053f2bebe Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 17 Mar 2025 10:39:17 +0200
Subject: [PATCH 03/33] Rename PickerSelectionControlBar to
 PickerSelectionStatusToolbar and update related references

---
 src/components/picker/PickerItemsList.tsx                   | 6 +++---
 ...ctionControlBar.tsx => PickerSelectionStatusToolbar.tsx} | 4 ++--
 src/components/picker/types.ts                              | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename src/components/picker/{PickerSelectionControlBar.tsx => PickerSelectionStatusToolbar.tsx} (92%)

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index 68a4a4562d..ac32462781 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -13,7 +13,7 @@ import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes, P
 import PickerContext from './PickerContext';
 import PickerItem from './PickerItem';
 import {Constants} from '../../commons/new';
-import PickerSelectionControlBar from './PickerSelectionControlBar';
+import PickerSelectionStatusToolbar from './PickerSelectionStatusToolbar';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
@@ -174,7 +174,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   const renderSelectionStatus = useMemo(() => {
     const props = {...selectionStatus, items};
     return (
-      <PickerSelectionControlBar
+      <PickerSelectionStatusToolbar
         {...props}
         value={context?.value as PickerMultiValue}
         toggleAllItemsSelection={context?.toggleAllItemsSelection}
@@ -189,7 +189,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
       <>
         {renderSearchInput()}
         {renderCustomTopElement?.(context.value)}
-        {mode === PickerModes.MULTI && renderSelectionStatus}
+        {mode === PickerModes.MULTI && selectionStatus && renderSelectionStatus}
         {renderList()}
       </>
     );
diff --git a/src/components/picker/PickerSelectionControlBar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
similarity index 92%
rename from src/components/picker/PickerSelectionControlBar.tsx
rename to src/components/picker/PickerSelectionStatusToolbar.tsx
index a0bcc7f313..73f3f9efe9 100644
--- a/src/components/picker/PickerSelectionControlBar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -5,13 +5,13 @@ import View from '../view';
 import Text from '../text';
 import {PickerItemProps, PickerProps, PickerContextProps, PickerMultiValue} from './types';
 
-export type PickerSelectionControlBarProps = PickerProps['selectionStatus'] &
+export type PickerSelectionStatusToolbarProps = PickerProps['selectionStatus'] &
   Partial<PickerContextProps> & {
     value?: PickerMultiValue;
     items?: PickerItemProps[];
   };
 
-export default function PickerSelectionControlBar(props: PickerSelectionControlBarProps) {
+export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusToolbarProps) {
   const {
     selectAllType = 'none',
     buttonProps = {},
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 7c939e4aeb..d7b984cd2b 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -167,7 +167,7 @@ type PickerExpandableOverlayProps = {
   enableModalBlur?: boolean;
 };
 
-interface getLabelOptions {
+interface PickerSelectionStatusLabelOptions {
   selectedCount?: number;
   value?: PickerItemProps[];
   isSelectedAll?: boolean;
@@ -175,9 +175,9 @@ interface getLabelOptions {
 
 type PickerSelectionStatusProps = {
   /**
-   * A function that returns the label to show for the selected Picker value
+   * A function that related data to show in the label
    */
-  getLabel?: (options?: getLabelOptions) => string;
+  getLabel?: (data?: PickerSelectionStatusLabelOptions) => string;
   /**
    * Select all element type
    */

From 557cc54a02868d2122ee895d76bfc514e71e5480 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 17 Mar 2025 10:48:18 +0200
Subject: [PATCH 04/33] Enhance selection status label functionality in
 PickerSelectionStatusToolbar

---
 demo/src/screens/componentScreens/PickerScreen.tsx | 10 +++++++++-
 .../picker/PickerSelectionStatusToolbar.tsx        | 14 ++++++++------
 src/components/picker/types.ts                     |  8 ++++----
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index 64ead75b6c..2091f3976c 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -249,7 +249,15 @@ export default class PickerScreen extends Component {
             topBarProps={{title: 'Status'}}
             mode={Picker.modes.MULTI}
             items={statusOptions}
-            selectionStatus={{selectAllType: this.state.selectAllType, buttonProps, checkboxProps}}
+            selectionStatus={{
+              selectAllType: this.state.selectAllType,
+              buttonProps,
+              checkboxProps,
+              getLabel: data => {
+                const {selectedCount, isAllSelected} = data;
+                return `${selectedCount} ${isAllSelected ? 'All Items' : ' Items Are'} Selected`;
+              }
+            }}
           />
 
           <Text marginV-10 text70 $textDefault>
diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index 73f3f9efe9..158ff9d4df 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -13,21 +13,23 @@ export type PickerSelectionStatusToolbarProps = PickerProps['selectionStatus'] &
 
 export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusToolbarProps) {
   const {
-    selectAllType = 'none',
     buttonProps = {},
     checkboxProps = {},
     containerStyle,
-    value = [],
+    getLabel,
     items = [],
-    toggleAllItemsSelection,
+    selectAllType = 'none',
     showLabel = true,
-    customLabel
+    toggleAllItemsSelection,
+    value = []
   } = props;
 
   const availableItems = useMemo(() => items.filter(item => !item.disabled).map(item => item.value), [items]);
   const isAllSelected = value.length === availableItems.length;
   const checkboxIndeterminate = value.length > 0 && value.length < availableItems.length;
-  const defaultLabel = `${value.length} Selected ${isAllSelected ? '(All)' : ''}`;
+  const label =
+    getLabel?.({selectedCount: value.length, value, isAllSelected}) ??
+    `${value.length} Selected ${isAllSelected ? '(All)' : ''}`;
 
   const handlePress = useCallback(() => {
     const newSelectionState = !isAllSelected;
@@ -58,7 +60,7 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
 
   const renderLabel = () => {
     if (showLabel) {
-      return <Text>{customLabel || defaultLabel}</Text>;
+      return <Text>{label}</Text>;
     }
     return null;
   };
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index d7b984cd2b..08d252ad8e 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -168,16 +168,16 @@ type PickerExpandableOverlayProps = {
 };
 
 interface PickerSelectionStatusLabelOptions {
-  selectedCount?: number;
-  value?: PickerItemProps[];
-  isSelectedAll?: boolean;
+  selectedCount: number;
+  value: PickerMultiValue;
+  isAllSelected: boolean;
 }
 
 type PickerSelectionStatusProps = {
   /**
    * A function that related data to show in the label
    */
-  getLabel?: (data?: PickerSelectionStatusLabelOptions) => string;
+  getLabel?: (data: PickerSelectionStatusLabelOptions) => string;
   /**
    * Select all element type
    */

From fa2640335f22eceb85493dc47515e8d13504625b Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 17 Mar 2025 11:39:31 +0200
Subject: [PATCH 05/33] Refactor PickerSelectionStatusToolbar and types for
 improved selection handling

---
 .../picker/PickerSelectionStatusToolbar.tsx   | 46 +++++++++++++------
 src/components/picker/types.ts                | 31 ++++++++++---
 2 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index 158ff9d4df..9bcf4ad044 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -3,18 +3,27 @@ import Button from '../button';
 import Checkbox from '../checkbox';
 import View from '../view';
 import Text from '../text';
-import {PickerItemProps, PickerProps, PickerContextProps, PickerMultiValue} from './types';
+import {
+  PickerItemProps,
+  PickerProps,
+  PickerContextProps,
+  PickerMultiValue,
+  PickerSelectAllType,
+  ButtonSelectionStatus,
+  CheckboxSelectionStatus
+} from './types';
 
-export type PickerSelectionStatusToolbarProps = PickerProps['selectionStatus'] &
-  Partial<PickerContextProps> & {
-    value?: PickerMultiValue;
-    items?: PickerItemProps[];
-  };
+export type PickerSelectionStatusToolbarBaseProps = PickerProps['selectionStatus'] & {
+  value?: PickerMultiValue;
+  items?: PickerItemProps[];
+};
+
+export type PickerSelectionStatusToolbarProps =
+  | (Partial<PickerContextProps> & (ButtonSelectionStatus & PickerSelectionStatusToolbarBaseProps))
+  | (Partial<PickerContextProps> & (CheckboxSelectionStatus & PickerSelectionStatusToolbarBaseProps));
 
 export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusToolbarProps) {
   const {
-    buttonProps = {},
-    checkboxProps = {},
     containerStyle,
     getLabel,
     items = [],
@@ -31,15 +40,24 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
     getLabel?.({selectedCount: value.length, value, isAllSelected}) ??
     `${value.length} Selected ${isAllSelected ? '(All)' : ''}`;
 
+  let buttonProps: ButtonSelectionStatus['buttonProps'] | undefined;
+  let checkboxProps: CheckboxSelectionStatus['checkboxProps'] | undefined;
+
+  switch (props.selectAllType) {
+    case PickerSelectAllType.button:
+      buttonProps = props.buttonProps;
+      break;
+    case PickerSelectAllType.checkbox:
+      checkboxProps = props.checkboxProps;
+      break;
+  }
+
   const handlePress = useCallback(() => {
     const newSelectionState = !isAllSelected;
     toggleAllItemsSelection?.(availableItems, newSelectionState);
-    if (selectAllType === 'button') {
-      buttonProps.onPress?.(availableItems);
-    } else if (selectAllType === 'checkbox') {
-      checkboxProps.onValueChange?.(newSelectionState);
-    }
-  }, [isAllSelected, toggleAllItemsSelection, availableItems, selectAllType, buttonProps, checkboxProps]);
+    buttonProps?.onPress?.(availableItems);
+    checkboxProps?.onValueChange?.(newSelectionState);
+  }, [isAllSelected, toggleAllItemsSelection, availableItems, buttonProps, checkboxProps]);
 
   const renderSelectionStatus = () => {
     if (selectAllType === 'button') {
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 08d252ad8e..c53f2d22dc 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -173,23 +173,40 @@ interface PickerSelectionStatusLabelOptions {
   isAllSelected: boolean;
 }
 
-type PickerSelectionStatusProps = {
-  /**
-   * A function that related data to show in the label
-   */
-  getLabel?: (data: PickerSelectionStatusLabelOptions) => string;
+export type ButtonSelectionStatus = {
   /**
    * Select all element type
    */
-  selectAllType?: PickerSelectAllType | `${PickerSelectAllType}`;
+  selectAllType: PickerSelectAllType.button | `${PickerSelectAllType.button}`;
   /**
    * Button props
    */
   buttonProps?: ButtonProps;
+};
+
+export type CheckboxSelectionStatus = {
+  /**
+   * Select all element type
+   */
+  selectAllType: PickerSelectAllType.checkbox | `${PickerSelectAllType.checkbox}`;
   /**
    * Checkbox props
    */
   checkboxProps?: CheckboxProps;
+};
+
+type NoneSelectionStatus = {
+  /**
+   * Select all element type
+   */
+  selectAllType: PickerSelectAllType.none | `${PickerSelectAllType.none}`;
+};
+
+type PickerSelectionStatusProps = {
+  /**
+   * A function that related data to show in the label
+   */
+  getLabel?: (data: PickerSelectionStatusLabelOptions) => string;
   /**
    * Custom container style
    */
@@ -202,7 +219,7 @@ type PickerSelectionStatusProps = {
    * Custom label to show next to the selection element.
    */
   customLabel?: string;
-};
+} & (ButtonSelectionStatus | CheckboxSelectionStatus | NoneSelectionStatus);
 
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
   PickerPropsDeprecation &

From ed006935e82bb81691f695cc114f11a5a38a5347 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 17 Mar 2025 11:42:05 +0200
Subject: [PATCH 06/33] Remove 'none' option from select all types in Picker
 and update related types

---
 demo/src/screens/componentScreens/PickerScreen.tsx |  6 +-----
 src/components/picker/types.ts                     | 10 +---------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index 2091f3976c..20941d038b 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -25,11 +25,7 @@ const tagIcon = require('../../assets/icons/tags.png');
 const dropdown = require('../../assets/icons/chevronDown.png');
 const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;
 
-const selectAllSegment = [
-  {label: Picker.selectAllType.button},
-  {label: Picker.selectAllType.checkbox},
-  {label: Picker.selectAllType.none}
-];
+const selectAllSegment = [{label: Picker.selectAllType.button}, {label: Picker.selectAllType.checkbox}];
 
 const buttonProps = {
   onPress: (items: any) => console.log('onPress', items)
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index c53f2d22dc..8a56472594 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -20,7 +20,6 @@ export enum PickerFieldTypes {
 }
 
 export enum PickerSelectAllType {
-  none = 'none',
   button = 'button',
   checkbox = 'checkbox'
 }
@@ -195,13 +194,6 @@ export type CheckboxSelectionStatus = {
   checkboxProps?: CheckboxProps;
 };
 
-type NoneSelectionStatus = {
-  /**
-   * Select all element type
-   */
-  selectAllType: PickerSelectAllType.none | `${PickerSelectAllType.none}`;
-};
-
 type PickerSelectionStatusProps = {
   /**
    * A function that related data to show in the label
@@ -219,7 +211,7 @@ type PickerSelectionStatusProps = {
    * Custom label to show next to the selection element.
    */
   customLabel?: string;
-} & (ButtonSelectionStatus | CheckboxSelectionStatus | NoneSelectionStatus);
+} & (ButtonSelectionStatus | CheckboxSelectionStatus);
 
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
   PickerPropsDeprecation &

From f589ba1ecfd9604d1bb167d9453d33245c701eb4 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 17 Mar 2025 11:50:14 +0200
Subject: [PATCH 07/33] Fix types issue in PickerItemsList

---
 src/components/picker/PickerItemsList.tsx | 4 ++--
 src/components/picker/types.ts            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index ac32462781..0e81659147 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -13,7 +13,7 @@ import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes, P
 import PickerContext from './PickerContext';
 import PickerItem from './PickerItem';
 import {Constants} from '../../commons/new';
-import PickerSelectionStatusToolbar from './PickerSelectionStatusToolbar';
+import PickerSelectionStatusToolbar, {PickerSelectionStatusToolbarBaseProps} from './PickerSelectionStatusToolbar';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
@@ -172,7 +172,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   };
 
   const renderSelectionStatus = useMemo(() => {
-    const props = {...selectionStatus, items};
+    const props: PickerSelectionStatusToolbarBaseProps = {...selectionStatus, items};
     return (
       <PickerSelectionStatusToolbar
         {...props}
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 8a56472594..9709fcfed5 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -176,7 +176,7 @@ export type ButtonSelectionStatus = {
   /**
    * Select all element type
    */
-  selectAllType: PickerSelectAllType.button | `${PickerSelectAllType.button}`;
+  selectAllType?: PickerSelectAllType.button | `${PickerSelectAllType.button}`;
   /**
    * Button props
    */
@@ -187,7 +187,7 @@ export type CheckboxSelectionStatus = {
   /**
    * Select all element type
    */
-  selectAllType: PickerSelectAllType.checkbox | `${PickerSelectAllType.checkbox}`;
+  selectAllType?: PickerSelectAllType.checkbox | `${PickerSelectAllType.checkbox}`;
   /**
    * Checkbox props
    */

From c612817d856d3efafdf920a6ba6f040284065132 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 17 Mar 2025 12:22:31 +0200
Subject: [PATCH 08/33] Refactor toggleAllItemsSelection and availableItems
 usage

---
 src/components/picker/PickerItemsList.tsx      |  8 ++++----
 .../picker/PickerSelectionStatusToolbar.tsx    | 10 ++++------
 .../picker/helpers/usePickerSelection.tsx      | 18 ++++++++++++------
 src/components/picker/index.tsx                |  7 +++++--
 src/components/picker/types.ts                 |  3 ++-
 5 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index 0e81659147..291a85c110 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -13,7 +13,7 @@ import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes, P
 import PickerContext from './PickerContext';
 import PickerItem from './PickerItem';
 import {Constants} from '../../commons/new';
-import PickerSelectionStatusToolbar, {PickerSelectionStatusToolbarBaseProps} from './PickerSelectionStatusToolbar';
+import PickerSelectionStatusToolbar from './PickerSelectionStatusToolbar';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
@@ -172,15 +172,15 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   };
 
   const renderSelectionStatus = useMemo(() => {
-    const props: PickerSelectionStatusToolbarBaseProps = {...selectionStatus, items};
     return (
       <PickerSelectionStatusToolbar
-        {...props}
+        {...selectionStatus}
+        availableItems={context?.availableItems}
         value={context?.value as PickerMultiValue}
         toggleAllItemsSelection={context?.toggleAllItemsSelection}
       />
     );
-  }, [selectionStatus, items, context?.value, context?.toggleAllItemsSelection]);
+  }, [selectionStatus, context?.value, context?.availableItems, context?.toggleAllItemsSelection]);
 
   const renderContent = () => {
     return useWheelPicker ? (
diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index 9bcf4ad044..346292924b 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -1,10 +1,9 @@
-import React, {useMemo, useCallback} from 'react';
+import React, {useCallback} from 'react';
 import Button from '../button';
 import Checkbox from '../checkbox';
 import View from '../view';
 import Text from '../text';
 import {
-  PickerItemProps,
   PickerProps,
   PickerContextProps,
   PickerMultiValue,
@@ -15,7 +14,7 @@ import {
 
 export type PickerSelectionStatusToolbarBaseProps = PickerProps['selectionStatus'] & {
   value?: PickerMultiValue;
-  items?: PickerItemProps[];
+  availableItems?: PickerMultiValue;
 };
 
 export type PickerSelectionStatusToolbarProps =
@@ -26,14 +25,13 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
   const {
     containerStyle,
     getLabel,
-    items = [],
+    availableItems = [],
     selectAllType = 'none',
     showLabel = true,
     toggleAllItemsSelection,
     value = []
   } = props;
 
-  const availableItems = useMemo(() => items.filter(item => !item.disabled).map(item => item.value), [items]);
   const isAllSelected = value.length === availableItems.length;
   const checkboxIndeterminate = value.length > 0 && value.length < availableItems.length;
   const label =
@@ -54,7 +52,7 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
 
   const handlePress = useCallback(() => {
     const newSelectionState = !isAllSelected;
-    toggleAllItemsSelection?.(availableItems, newSelectionState);
+    toggleAllItemsSelection?.(newSelectionState);
     buttonProps?.onPress?.(availableItems);
     checkboxProps?.onValueChange?.(newSelectionState);
   }, [isAllSelected, toggleAllItemsSelection, availableItems, buttonProps, checkboxProps]);
diff --git a/src/components/picker/helpers/usePickerSelection.tsx b/src/components/picker/helpers/usePickerSelection.tsx
index 27ce7472bc..810c42ff2a 100644
--- a/src/components/picker/helpers/usePickerSelection.tsx
+++ b/src/components/picker/helpers/usePickerSelection.tsx
@@ -1,15 +1,15 @@
-import {RefObject, useCallback, useState, useEffect} from 'react';
+import {RefObject, useCallback, useState, useEffect, useMemo} from 'react';
 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' | 'getItemValue' | 'topBarProps' | 'mode' | 'items'> {
   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, topBarProps, pickerExpandableRef, getItemValue, setSearchValue, mode, items} = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value as PickerMultiValue);
   const [multiFinalValue, setMultiFinalValue] = useState(value as PickerMultiValue);
 
@@ -48,9 +48,14 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     topBarProps?.onCancel?.();
   }, [multiFinalValue, topBarProps]);
 
-  const toggleAllItemsSelection = useCallback((itemsToToggle: PickerMultiValue, select: boolean) => {
-    setMultiDraftValue(select ? itemsToToggle : []);
-  }, []);
+  const availableItems: PickerMultiValue = useMemo(() => {
+    return items?.filter(item => !item.disabled).map(item => item.value) || [];
+  }, [items]);
+
+  const toggleAllItemsSelection = useCallback((selectAll: boolean) => {
+    setMultiDraftValue(selectAll ? availableItems : []);
+  },
+  [availableItems]);
 
   return {
     multiDraftValue,
@@ -58,6 +63,7 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     toggleItemSelection,
     cancelSelect,
     setMultiFinalValue,
+    availableItems,
     toggleAllItemsSelection
   };
 };
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index b6806acea8..f91701a6af 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -105,7 +105,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     setSearchValue,
     onSearchChange: _onSearchChange
   } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children, items});
-  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect, toggleAllItemsSelection} =
+  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect, availableItems, toggleAllItemsSelection} =
     usePickerSelection({
       migrate,
       value,
@@ -114,7 +114,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       getItemValue,
       topBarProps,
       setSearchValue,
-      mode
+      mode,
+      items
     });
 
   const {label, accessibilityInfo} = usePickerLabel({
@@ -157,6 +158,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
       selectionLimit,
+      availableItems,
       toggleAllItemsSelection
     };
   }, [
@@ -171,6 +173,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     onSelectedItemLayout,
     toggleItemSelection,
     onDoneSelecting,
+    availableItems,
     toggleAllItemsSelection
   ]);
 
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 9709fcfed5..9c6d90f3a3 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -367,7 +367,8 @@ export interface PickerContextProps
   isMultiMode: boolean;
   onSelectedLayout: (event: any) => any;
   selectionLimit: PickerProps['selectionLimit'];
-  toggleAllItemsSelection?: (itemsToToggle: PickerMultiValue, select: boolean) => void;
+  availableItems: PickerMultiValue;
+  toggleAllItemsSelection?: (selectAll: boolean) => void;
 }
 
 export type PickerItemsListProps = Pick<

From 24e15699b5fc796ef9cc9bf969676030205e2b2f Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 17 Mar 2025 13:40:44 +0200
Subject: [PATCH 09/33] Remove customLabel prop from PickerSelectionStatusProps

---
 src/components/picker/types.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 9c6d90f3a3..75f15558c0 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -207,10 +207,6 @@ type PickerSelectionStatusProps = {
    * Control weather to show the label or not
    */
   showLabel?: boolean;
-  /**
-   * Custom label to show next to the selection element.
-   */
-  customLabel?: string;
 } & (ButtonSelectionStatus | CheckboxSelectionStatus);
 
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &

From a07a980ae8b82d30b77d5d24290c699d0998978c Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 17 Mar 2025 22:54:48 +0200
Subject: [PATCH 10/33] Add renderTopCustomElement and
 renderBottomCustomElement props to PickerSelectionStatusToolbar

---
 .../picker/PickerSelectionStatusToolbar.tsx        | 14 ++++++++++----
 src/components/picker/types.ts                     |  8 ++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index 346292924b..ae0549b877 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -29,7 +29,9 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
     selectAllType = 'none',
     showLabel = true,
     toggleAllItemsSelection,
-    value = []
+    value = [],
+    renderTopCustomElement,
+    renderBottomCustomElement
   } = props;
 
   const isAllSelected = value.length === availableItems.length;
@@ -82,9 +84,13 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
   };
 
   return (
-    <View row spread centerV paddingH-page style={containerStyle}>
-      {renderLabel()}
-      {renderSelectionStatus()}
+    <View>
+      {renderTopCustomElement?.()}
+      <View row spread centerV paddingH-page style={containerStyle}>
+        {renderLabel()}
+        {renderSelectionStatus()}
+      </View>
+      {renderBottomCustomElement?.()}
     </View>
   );
 }
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 75f15558c0..d6dff8ff8d 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -207,6 +207,14 @@ type PickerSelectionStatusProps = {
    * Control weather to show the label or not
    */
   showLabel?: boolean;
+  /**
+   * Top element to render above the selection toolbar
+   */
+  renderTopCustomElement?: () => React.ReactElement;
+  /**
+   * Bottom element to render under the selection toolbar
+   */
+  renderBottomCustomElement?: () => React.ReactElement;
 } & (ButtonSelectionStatus | CheckboxSelectionStatus);
 
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &

From 2b71bbb90d17d7b1ded2058ff7d9df9d70cef9e9 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 18 Mar 2025 16:45:35 +0200
Subject: [PATCH 11/33] Rename getLabel prop to getSelectionStatusLabe and
 update related usages

---
 demo/src/screens/componentScreens/PickerScreen.tsx     | 6 +-----
 src/components/picker/PickerSelectionStatusToolbar.tsx | 4 ++--
 src/components/picker/types.ts                         | 4 ++--
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index 20941d038b..d87bf31cc8 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -248,11 +248,7 @@ export default class PickerScreen extends Component {
             selectionStatus={{
               selectAllType: this.state.selectAllType,
               buttonProps,
-              checkboxProps,
-              getLabel: data => {
-                const {selectedCount, isAllSelected} = data;
-                return `${selectedCount} ${isAllSelected ? 'All Items' : ' Items Are'} Selected`;
-              }
+              checkboxProps
             }}
           />
 
diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index ae0549b877..89fbfd4f17 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -24,7 +24,7 @@ export type PickerSelectionStatusToolbarProps =
 export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusToolbarProps) {
   const {
     containerStyle,
-    getLabel,
+    getSelectionStatusLabel,
     availableItems = [],
     selectAllType = 'none',
     showLabel = true,
@@ -37,7 +37,7 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
   const isAllSelected = value.length === availableItems.length;
   const checkboxIndeterminate = value.length > 0 && value.length < availableItems.length;
   const label =
-    getLabel?.({selectedCount: value.length, value, isAllSelected}) ??
+    getSelectionStatusLabel?.({selectedCount: value.length, value, isAllSelected}) ??
     `${value.length} Selected ${isAllSelected ? '(All)' : ''}`;
 
   let buttonProps: ButtonSelectionStatus['buttonProps'] | undefined;
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index d6dff8ff8d..0587d03d6e 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -196,9 +196,9 @@ export type CheckboxSelectionStatus = {
 
 type PickerSelectionStatusProps = {
   /**
-   * A function that related data to show in the label
+   * A function that generates a label based on the selected items' count and status
    */
-  getLabel?: (data: PickerSelectionStatusLabelOptions) => string;
+  getSelectionStatusLabel?: (data: PickerSelectionStatusLabelOptions) => string;
   /**
    * Custom container style
    */

From a87e350067459645cef46076ece658084a1bcc23 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 18 Mar 2025 16:52:33 +0200
Subject: [PATCH 12/33] Refactor selectionStatus handling in PickerItemsList

---
 src/components/picker/PickerItemsList.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index 291a85c110..b00cc76fc8 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -37,7 +37,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
-    selectionStatus
+    selectionStatus: selectionStatusProps
   } = props;
   const context = useContext(PickerContext);
 
@@ -171,16 +171,19 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
-  const renderSelectionStatus = useMemo(() => {
+  const selectionStatus = useMemo(() => {
     return (
-      <PickerSelectionStatusToolbar
-        {...selectionStatus}
-        availableItems={context?.availableItems}
-        value={context?.value as PickerMultiValue}
-        toggleAllItemsSelection={context?.toggleAllItemsSelection}
-      />
+      mode === PickerModes.MULTI &&
+      selectionStatusProps && (
+        <PickerSelectionStatusToolbar
+          {...selectionStatusProps}
+          availableItems={context?.availableItems}
+          value={context?.value as PickerMultiValue}
+          toggleAllItemsSelection={context?.toggleAllItemsSelection}
+        />
+      )
     );
-  }, [selectionStatus, context?.value, context?.availableItems, context?.toggleAllItemsSelection]);
+  }, [selectionStatusProps, mode, context?.value, context?.availableItems, context?.toggleAllItemsSelection]);
 
   const renderContent = () => {
     return useWheelPicker ? (
@@ -189,7 +192,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
       <>
         {renderSearchInput()}
         {renderCustomTopElement?.(context.value)}
-        {mode === PickerModes.MULTI && selectionStatus && renderSelectionStatus}
+        {selectionStatus}
         {renderList()}
       </>
     );

From 3c4dc791b75d4ffc3f644f88766181334f3cc1e2 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 18 Mar 2025 16:57:22 +0200
Subject: [PATCH 13/33] Remove unnecessary null return in renderLabel

---
 src/components/picker/PickerSelectionStatusToolbar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index 89fbfd4f17..a1efac0f9f 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -80,7 +80,6 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
     if (showLabel) {
       return <Text>{label}</Text>;
     }
-    return null;
   };
 
   return (

From 23f0fecde913eff8592236674f1348665343180d Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 18 Mar 2025 16:58:53 +0200
Subject: [PATCH 14/33] Remove renderTopCustomElement prop

---
 src/components/picker/PickerSelectionStatusToolbar.tsx | 2 --
 src/components/picker/types.ts                         | 6 +-----
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index a1efac0f9f..ad16616186 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -30,7 +30,6 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
     showLabel = true,
     toggleAllItemsSelection,
     value = [],
-    renderTopCustomElement,
     renderBottomCustomElement
   } = props;
 
@@ -84,7 +83,6 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
 
   return (
     <View>
-      {renderTopCustomElement?.()}
       <View row spread centerV paddingH-page style={containerStyle}>
         {renderLabel()}
         {renderSelectionStatus()}
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 0587d03d6e..c0f56ec9e0 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -207,10 +207,6 @@ type PickerSelectionStatusProps = {
    * Control weather to show the label or not
    */
   showLabel?: boolean;
-  /**
-   * Top element to render above the selection toolbar
-   */
-  renderTopCustomElement?: () => React.ReactElement;
   /**
    * Bottom element to render under the selection toolbar
    */
@@ -269,7 +265,7 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**
-     *
+     * Selection status toolbar props
      */
     selectionStatus?: PickerSelectionStatusProps;
     /**

From 59af4474bee09aa3ff9ec49884d93ff0b4b2bd2f Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 18 Mar 2025 17:00:42 +0200
Subject: [PATCH 15/33] Rename _onSegmentChange to onSegmentChange

---
 demo/src/screens/componentScreens/PickerScreen.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index d87bf31cc8..eee61eddd9 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -122,7 +122,7 @@ export default class PickerScreen extends Component {
     selectAllType: Picker.selectAllType.button
   };
 
-  _onSegmentChange = (index: number) => {
+  onSegmentChange = (index: number) => {
     this.setState({selectAllType: Picker.selectAllType[selectAllSegment[index].label]});
   };
 
@@ -235,7 +235,7 @@ export default class PickerScreen extends Component {
             <Text text70 $textDefault>
               Selection Status:
             </Text>
-            <SegmentedControl segments={selectAllSegment} onChangeIndex={this._onSegmentChange}/>
+            <SegmentedControl segments={selectAllSegment} onChangeIndex={this.onSegmentChange}/>
           </View>
           <Picker
             placeholder="Status"

From 171e20b12b43ffd6e7bd65072c1afa755b6f642d Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 18 Mar 2025 17:01:27 +0200
Subject: [PATCH 16/33] Fix TypeScript ignore directive for selectAllType in
 Picker

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

diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index f91701a6af..9e29c4fc79 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -316,7 +316,7 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
-//@ts-ignore
+//@ts-expect-error
 Picker.selectAllType = PickerSelectAllType;
 
 export {

From 2d4d7d4304474fa0c9d364673fd27c7100a44df8 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 18 Mar 2025 17:07:49 +0200
Subject: [PATCH 17/33] Update buttonProps onPress parameter to use
 selectionValue and set default selectAllType to 'button'

---
 demo/src/screens/componentScreens/PickerScreen.tsx     | 2 +-
 src/components/picker/PickerSelectionStatusToolbar.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index eee61eddd9..7fcdc2ee31 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -28,7 +28,7 @@ const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;
 const selectAllSegment = [{label: Picker.selectAllType.button}, {label: Picker.selectAllType.checkbox}];
 
 const buttonProps = {
-  onPress: (items: any) => console.log('onPress', items)
+  onPress: (selectionValue: any) => console.log('onPress', selectionValue)
 };
 
 const checkboxProps = {
diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index ad16616186..62a51565db 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -26,7 +26,7 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
     containerStyle,
     getSelectionStatusLabel,
     availableItems = [],
-    selectAllType = 'none',
+    selectAllType = 'button',
     showLabel = true,
     toggleAllItemsSelection,
     value = [],
@@ -54,7 +54,7 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
   const handlePress = useCallback(() => {
     const newSelectionState = !isAllSelected;
     toggleAllItemsSelection?.(newSelectionState);
-    buttonProps?.onPress?.(availableItems);
+    buttonProps?.onPress?.({selectionValue: newSelectionState});
     checkboxProps?.onValueChange?.(newSelectionState);
   }, [isAllSelected, toggleAllItemsSelection, availableItems, buttonProps, checkboxProps]);
 

From cdb80a247f12ac00e51789eef6a4a33f4e6afa5f Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 18 Mar 2025 17:26:13 +0200
Subject: [PATCH 18/33] Refactor Picker selection logic to use
 areAllItemsSelected and simplify selection status handling

---
 src/components/picker/PickerItemsList.tsx     | 18 +++-------
 .../picker/PickerSelectionStatusToolbar.tsx   | 29 +++++++++-------
 .../picker/helpers/usePickerSelection.tsx     |  6 +++-
 src/components/picker/index.tsx               | 34 +++++++++++--------
 src/components/picker/types.ts                |  4 +--
 5 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index b00cc76fc8..daad5a8d59 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -9,7 +9,7 @@ import Text from '../text';
 import Icon from '../icon';
 import Button from '../button';
 import WheelPicker from '../WheelPicker';
-import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes, PickerMultiValue} from './types';
+import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes} from './types';
 import PickerContext from './PickerContext';
 import PickerItem from './PickerItem';
 import {Constants} from '../../commons/new';
@@ -171,19 +171,9 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
-  const selectionStatus = useMemo(() => {
-    return (
-      mode === PickerModes.MULTI &&
-      selectionStatusProps && (
-        <PickerSelectionStatusToolbar
-          {...selectionStatusProps}
-          availableItems={context?.availableItems}
-          value={context?.value as PickerMultiValue}
-          toggleAllItemsSelection={context?.toggleAllItemsSelection}
-        />
-      )
-    );
-  }, [selectionStatusProps, mode, context?.value, context?.availableItems, context?.toggleAllItemsSelection]);
+  const selectionStatus = useMemo(() =>
+    mode === PickerModes.MULTI && selectionStatusProps && <PickerSelectionStatusToolbar {...selectionStatusProps}/>,
+  [selectionStatusProps, mode]);
 
   const renderContent = () => {
     return useWheelPicker ? (
diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index 62a51565db..250cbeacbb 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -1,8 +1,9 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useContext} from 'react';
 import Button from '../button';
 import Checkbox from '../checkbox';
 import View from '../view';
 import Text from '../text';
+import PickerContext from './PickerContext';
 import {
   PickerProps,
   PickerContextProps,
@@ -25,19 +26,18 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
   const {
     containerStyle,
     getSelectionStatusLabel,
-    availableItems = [],
     selectAllType = 'button',
     showLabel = true,
-    toggleAllItemsSelection,
-    value = [],
     renderBottomCustomElement
   } = props;
+  const context = useContext(PickerContext);
+  const {toggleAllItemsSelection, value = [], areAllItemsSelected} = context;
+  const _value: PickerMultiValue = Array.isArray(value) ? value : [];
 
-  const isAllSelected = value.length === availableItems.length;
-  const checkboxIndeterminate = value.length > 0 && value.length < availableItems.length;
+  const checkboxIndeterminate = _value.length > 0 && !areAllItemsSelected;
   const label =
-    getSelectionStatusLabel?.({selectedCount: value.length, value, isAllSelected}) ??
-    `${value.length} Selected ${isAllSelected ? '(All)' : ''}`;
+    getSelectionStatusLabel?.({selectedCount: _value.length, value: _value, areAllItemsSelected}) ??
+    `${_value.length} Selected ${areAllItemsSelected ? '(All)' : ''}`;
 
   let buttonProps: ButtonSelectionStatus['buttonProps'] | undefined;
   let checkboxProps: CheckboxSelectionStatus['checkboxProps'] | undefined;
@@ -52,22 +52,27 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
   }
 
   const handlePress = useCallback(() => {
-    const newSelectionState = !isAllSelected;
+    const newSelectionState = !areAllItemsSelected;
     toggleAllItemsSelection?.(newSelectionState);
     buttonProps?.onPress?.({selectionValue: newSelectionState});
     checkboxProps?.onValueChange?.(newSelectionState);
-  }, [isAllSelected, toggleAllItemsSelection, availableItems, buttonProps, checkboxProps]);
+  }, [areAllItemsSelected, toggleAllItemsSelection, buttonProps, checkboxProps]);
 
   const renderSelectionStatus = () => {
     if (selectAllType === 'button') {
       return (
-        <Button label={isAllSelected ? 'Deselect All' : 'Select All'} link {...buttonProps} onPress={handlePress}/>
+        <Button
+          label={areAllItemsSelected ? 'Deselect All' : 'Select All'}
+          link
+          {...buttonProps}
+          onPress={handlePress}
+        />
       );
     } else if (selectAllType === 'checkbox') {
       return (
         <Checkbox
           {...checkboxProps}
-          value={value.length > 0}
+          value={_value.length > 0}
           indeterminate={checkboxIndeterminate}
           onValueChange={handlePress}
         />
diff --git a/src/components/picker/helpers/usePickerSelection.tsx b/src/components/picker/helpers/usePickerSelection.tsx
index 810c42ff2a..7196e7c8e9 100644
--- a/src/components/picker/helpers/usePickerSelection.tsx
+++ b/src/components/picker/helpers/usePickerSelection.tsx
@@ -52,6 +52,10 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     return items?.filter(item => !item.disabled).map(item => item.value) || [];
   }, [items]);
 
+  const areAllItemsSelected = useMemo(() => {
+    return multiDraftValue?.length === availableItems.length;
+  }, [multiDraftValue, availableItems]);
+
   const toggleAllItemsSelection = useCallback((selectAll: boolean) => {
     setMultiDraftValue(selectAll ? availableItems : []);
   },
@@ -63,7 +67,7 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     toggleItemSelection,
     cancelSelect,
     setMultiFinalValue,
-    availableItems,
+    areAllItemsSelected,
     toggleAllItemsSelection
   };
 };
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index 9e29c4fc79..0017176858 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -105,18 +105,24 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     setSearchValue,
     onSearchChange: _onSearchChange
   } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children, items});
-  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect, availableItems, toggleAllItemsSelection} =
-    usePickerSelection({
-      migrate,
-      value,
-      onChange,
-      pickerExpandableRef: pickerExpandable,
-      getItemValue,
-      topBarProps,
-      setSearchValue,
-      mode,
-      items
-    });
+  const {
+    multiDraftValue,
+    onDoneSelecting,
+    toggleItemSelection,
+    cancelSelect,
+    areAllItemsSelected,
+    toggleAllItemsSelection
+  } = usePickerSelection({
+    migrate,
+    value,
+    onChange,
+    pickerExpandableRef: pickerExpandable,
+    getItemValue,
+    topBarProps,
+    setSearchValue,
+    mode,
+    items
+  });
 
   const {label, accessibilityInfo} = usePickerLabel({
     value,
@@ -158,7 +164,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
       selectionLimit,
-      availableItems,
+      areAllItemsSelected,
       toggleAllItemsSelection
     };
   }, [
@@ -173,7 +179,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     onSelectedItemLayout,
     toggleItemSelection,
     onDoneSelecting,
-    availableItems,
+    areAllItemsSelected,
     toggleAllItemsSelection
   ]);
 
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index c0f56ec9e0..586bd6753a 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -169,7 +169,7 @@ type PickerExpandableOverlayProps = {
 interface PickerSelectionStatusLabelOptions {
   selectedCount: number;
   value: PickerMultiValue;
-  isAllSelected: boolean;
+  areAllItemsSelected: boolean;
 }
 
 export type ButtonSelectionStatus = {
@@ -367,7 +367,7 @@ export interface PickerContextProps
   isMultiMode: boolean;
   onSelectedLayout: (event: any) => any;
   selectionLimit: PickerProps['selectionLimit'];
-  availableItems: PickerMultiValue;
+  areAllItemsSelected: boolean;
   toggleAllItemsSelection?: (selectAll: boolean) => void;
 }
 

From 91aa052f964fee9be92f57401bee5784c287ead9 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 10:38:27 +0200
Subject: [PATCH 19/33] Rename getSelectionStatusLabel to getLabel and update
 type definitions for clarity

---
 src/components/picker/PickerSelectionStatusToolbar.tsx | 10 ++--------
 src/components/picker/types.ts                         |  4 ++--
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index 250cbeacbb..723b17469c 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -23,20 +23,14 @@ export type PickerSelectionStatusToolbarProps =
   | (Partial<PickerContextProps> & (CheckboxSelectionStatus & PickerSelectionStatusToolbarBaseProps));
 
 export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusToolbarProps) {
-  const {
-    containerStyle,
-    getSelectionStatusLabel,
-    selectAllType = 'button',
-    showLabel = true,
-    renderBottomCustomElement
-  } = props;
+  const {containerStyle, getLabel, selectAllType = 'button', showLabel = true, renderBottomCustomElement} = props;
   const context = useContext(PickerContext);
   const {toggleAllItemsSelection, value = [], areAllItemsSelected} = context;
   const _value: PickerMultiValue = Array.isArray(value) ? value : [];
 
   const checkboxIndeterminate = _value.length > 0 && !areAllItemsSelected;
   const label =
-    getSelectionStatusLabel?.({selectedCount: _value.length, value: _value, areAllItemsSelected}) ??
+    getLabel?.({selectedCount: _value.length, value: _value, areAllItemsSelected}) ??
     `${_value.length} Selected ${areAllItemsSelected ? '(All)' : ''}`;
 
   let buttonProps: ButtonSelectionStatus['buttonProps'] | undefined;
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 586bd6753a..c52382a658 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -166,7 +166,7 @@ type PickerExpandableOverlayProps = {
   enableModalBlur?: boolean;
 };
 
-interface PickerSelectionStatusLabelOptions {
+interface PickerSelectionStatusLabelData {
   selectedCount: number;
   value: PickerMultiValue;
   areAllItemsSelected: boolean;
@@ -198,7 +198,7 @@ type PickerSelectionStatusProps = {
   /**
    * A function that generates a label based on the selected items' count and status
    */
-  getSelectionStatusLabel?: (data: PickerSelectionStatusLabelOptions) => string;
+  getLabel?: (data: PickerSelectionStatusLabelData) => string;
   /**
    * Custom container style
    */

From f76d7f80ab2b47dbfb573ee772091dc462e57d37 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 10:44:06 +0200
Subject: [PATCH 20/33] Remove renderBottomCustomElement prop and add divider
 in PickerSelectionStatusToolbar

---
 src/components/picker/PickerSelectionStatusToolbar.tsx | 7 ++++---
 src/components/picker/types.ts                         | 4 ----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index 723b17469c..e2038c22e8 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -3,6 +3,7 @@ import Button from '../button';
 import Checkbox from '../checkbox';
 import View from '../view';
 import Text from '../text';
+import Dividers from '../../style/dividers';
 import PickerContext from './PickerContext';
 import {
   PickerProps,
@@ -23,7 +24,7 @@ export type PickerSelectionStatusToolbarProps =
   | (Partial<PickerContextProps> & (CheckboxSelectionStatus & PickerSelectionStatusToolbarBaseProps));
 
 export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusToolbarProps) {
-  const {containerStyle, getLabel, selectAllType = 'button', showLabel = true, renderBottomCustomElement} = props;
+  const {containerStyle, getLabel, selectAllType = 'button', showLabel = true} = props;
   const context = useContext(PickerContext);
   const {toggleAllItemsSelection, value = [], areAllItemsSelected} = context;
   const _value: PickerMultiValue = Array.isArray(value) ? value : [];
@@ -82,11 +83,11 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
 
   return (
     <View>
-      <View row spread centerV paddingH-page style={containerStyle}>
+      <View row spread centerV paddingH-page marginV-s4 style={containerStyle}>
         {renderLabel()}
         {renderSelectionStatus()}
       </View>
-      {renderBottomCustomElement?.()}
+      <View style={Dividers.d20}/>
     </View>
   );
 }
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index c52382a658..fee83131e6 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -207,10 +207,6 @@ type PickerSelectionStatusProps = {
    * Control weather to show the label or not
    */
   showLabel?: boolean;
-  /**
-   * Bottom element to render under the selection toolbar
-   */
-  renderBottomCustomElement?: () => React.ReactElement;
 } & (ButtonSelectionStatus | CheckboxSelectionStatus);
 
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &

From a93f066cd2fd2a10d9b8c0c39402a023d03e9691 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 12:58:08 +0200
Subject: [PATCH 21/33] Refactor Picker component to remove PickerSelectAllType
 enum

---
 demo/src/screens/componentScreens/PickerScreen.tsx    |  6 +++---
 .../picker/PickerSelectionStatusToolbar.tsx           |  5 ++---
 src/components/picker/index.tsx                       |  9 ++-------
 src/components/picker/types.ts                        | 11 +++--------
 src/index.ts                                          |  3 +--
 5 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index 7fcdc2ee31..dbdfb669e8 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -25,7 +25,7 @@ const tagIcon = require('../../assets/icons/tags.png');
 const dropdown = require('../../assets/icons/chevronDown.png');
 const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;
 
-const selectAllSegment = [{label: Picker.selectAllType.button}, {label: Picker.selectAllType.checkbox}];
+const selectAllSegment = [{label: 'button'}, {label: 'checkbox'}];
 
 const buttonProps = {
   onPress: (selectionValue: any) => console.log('onPress', selectionValue)
@@ -119,11 +119,11 @@ export default class PickerScreen extends Component {
     statOption: [],
     scheme: undefined,
     contact: 0,
-    selectAllType: Picker.selectAllType.button
+    selectAllType: 'button' as 'button' | 'checkbox' | undefined
   };
 
   onSegmentChange = (index: number) => {
-    this.setState({selectAllType: Picker.selectAllType[selectAllSegment[index].label]});
+    this.setState({selectAllType: selectAllSegment[index].label});
   };
 
   renderDialog: PickerProps['renderOverlay'] = (modalProps: RenderCustomModalProps) => {
diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index e2038c22e8..529c2a8578 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -9,7 +9,6 @@ import {
   PickerProps,
   PickerContextProps,
   PickerMultiValue,
-  PickerSelectAllType,
   ButtonSelectionStatus,
   CheckboxSelectionStatus
 } from './types';
@@ -38,10 +37,10 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
   let checkboxProps: CheckboxSelectionStatus['checkboxProps'] | undefined;
 
   switch (props.selectAllType) {
-    case PickerSelectAllType.button:
+    case 'button':
       buttonProps = props.buttonProps;
       break;
-    case PickerSelectAllType.checkbox:
+    case 'checkbox':
       checkboxProps = props.checkboxProps;
       break;
   }
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index 0017176858..f637d58e27 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -28,8 +28,7 @@ import {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods,
-  PickerSelectAllType
+  PickerMethods
 } from './types';
 import {DialogProps} from '../../incubator/dialog';
 
@@ -43,7 +42,6 @@ type PickerStatics = {
   modes: typeof PickerModes;
   fieldTypes: typeof PickerFieldTypes;
   extractPickerItems: typeof extractPickerItems;
-  selectAllType: typeof PickerSelectAllType;
 };
 
 const Picker = React.forwardRef((props: PickerProps, ref) => {
@@ -322,8 +320,6 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
-//@ts-expect-error
-Picker.selectAllType = PickerSelectAllType;
 
 export {
   PickerProps,
@@ -334,8 +330,7 @@ export {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods,
-  PickerSelectAllType
+  PickerMethods
 };
 export {Picker}; // For tests
 export default Picker as typeof Picker & PickerStatics;
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index fee83131e6..8797824253 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -19,11 +19,6 @@ export enum PickerFieldTypes {
   settings = 'settings'
 }
 
-export enum PickerSelectAllType {
-  button = 'button',
-  checkbox = 'checkbox'
-}
-
 // TODO: Remove type
 // type PickerValueDeprecated = {value: string | number; label: string};
 
@@ -176,7 +171,7 @@ export type ButtonSelectionStatus = {
   /**
    * Select all element type
    */
-  selectAllType?: PickerSelectAllType.button | `${PickerSelectAllType.button}`;
+  selectAllType?: 'button';
   /**
    * Button props
    */
@@ -187,14 +182,14 @@ export type CheckboxSelectionStatus = {
   /**
    * Select all element type
    */
-  selectAllType?: PickerSelectAllType.checkbox | `${PickerSelectAllType.checkbox}`;
+  selectAllType?: 'checkbox';
   /**
    * Checkbox props
    */
   checkboxProps?: CheckboxProps;
 };
 
-type PickerSelectionStatusProps = {
+export type PickerSelectionStatusProps = {
   /**
    * A function that generates a label based on the selected items' count and status
    */
diff --git a/src/index.ts b/src/index.ts
index 1950cbb829..5cbd7088d7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -121,8 +121,7 @@ export {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods,
-  PickerSelectAllType
+  PickerMethods
 } from './components/picker';
 export {default as PieChart, type PieChartProps, PieChartSegmentProps} from './components/pieChart';
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';

From 9d75b2b5b797d25f862b2cd24878d745d8ae33bd Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 14:19:30 +0200
Subject: [PATCH 22/33] Refactor PickerSelectionStatusToolbar to simplify props
 and selection handling

---
 .../picker/PickerSelectionStatusToolbar.tsx   | 51 +++++--------------
 1 file changed, 14 insertions(+), 37 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusToolbar.tsx
index 529c2a8578..c463c7f07b 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusToolbar.tsx
@@ -5,25 +5,10 @@ import View from '../view';
 import Text from '../text';
 import Dividers from '../../style/dividers';
 import PickerContext from './PickerContext';
-import {
-  PickerProps,
-  PickerContextProps,
-  PickerMultiValue,
-  ButtonSelectionStatus,
-  CheckboxSelectionStatus
-} from './types';
+import {PickerSelectionStatusProps, PickerMultiValue} from './types';
 
-export type PickerSelectionStatusToolbarBaseProps = PickerProps['selectionStatus'] & {
-  value?: PickerMultiValue;
-  availableItems?: PickerMultiValue;
-};
-
-export type PickerSelectionStatusToolbarProps =
-  | (Partial<PickerContextProps> & (ButtonSelectionStatus & PickerSelectionStatusToolbarBaseProps))
-  | (Partial<PickerContextProps> & (CheckboxSelectionStatus & PickerSelectionStatusToolbarBaseProps));
-
-export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusToolbarProps) {
-  const {containerStyle, getLabel, selectAllType = 'button', showLabel = true} = props;
+export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusProps) {
+  const {containerStyle, getLabel, showLabel = true} = props;
   const context = useContext(PickerContext);
   const {toggleAllItemsSelection, value = [], areAllItemsSelected} = context;
   const _value: PickerMultiValue = Array.isArray(value) ? value : [];
@@ -33,39 +18,31 @@ export default function PickerSelectionStatusToolbar(props: PickerSelectionStatu
     getLabel?.({selectedCount: _value.length, value: _value, areAllItemsSelected}) ??
     `${_value.length} Selected ${areAllItemsSelected ? '(All)' : ''}`;
 
-  let buttonProps: ButtonSelectionStatus['buttonProps'] | undefined;
-  let checkboxProps: CheckboxSelectionStatus['checkboxProps'] | undefined;
-
-  switch (props.selectAllType) {
-    case 'button':
-      buttonProps = props.buttonProps;
-      break;
-    case 'checkbox':
-      checkboxProps = props.checkboxProps;
-      break;
-  }
-
   const handlePress = useCallback(() => {
     const newSelectionState = !areAllItemsSelected;
     toggleAllItemsSelection?.(newSelectionState);
-    buttonProps?.onPress?.({selectionValue: newSelectionState});
-    checkboxProps?.onValueChange?.(newSelectionState);
-  }, [areAllItemsSelected, toggleAllItemsSelection, buttonProps, checkboxProps]);
+    if (props.selectAllType === 'button') {
+      props.buttonProps?.onPress?.({selectionValue: newSelectionState});
+    } else if (props.selectAllType === 'checkbox') {
+      props.checkboxProps?.onValueChange?.(newSelectionState);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [areAllItemsSelected, toggleAllItemsSelection]);
 
   const renderSelectionStatus = () => {
-    if (selectAllType === 'button') {
+    if (props.selectAllType === 'button') {
       return (
         <Button
           label={areAllItemsSelected ? 'Deselect All' : 'Select All'}
           link
-          {...buttonProps}
+          {...props.buttonProps}
           onPress={handlePress}
         />
       );
-    } else if (selectAllType === 'checkbox') {
+    } else if (props.selectAllType === 'checkbox') {
       return (
         <Checkbox
-          {...checkboxProps}
+          {...props.checkboxProps}
           value={_value.length > 0}
           indeterminate={checkboxIndeterminate}
           onValueChange={handlePress}

From f0ef3504068e6111c8c231805e4f9f662d0ea65c Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 14:22:31 +0200
Subject: [PATCH 23/33] Rename PickerSelectionStatusToolbar to
 PickerSelectionStatusBar and update related references

---
 src/components/picker/PickerItemsList.tsx                  | 7 +++----
 ...ctionStatusToolbar.tsx => PickerSelectionStatusBar.tsx} | 2 +-
 src/components/picker/types.ts                             | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)
 rename src/components/picker/{PickerSelectionStatusToolbar.tsx => PickerSelectionStatusBar.tsx} (96%)

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index daad5a8d59..dced08e5dd 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -13,7 +13,7 @@ import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes} f
 import PickerContext from './PickerContext';
 import PickerItem from './PickerItem';
 import {Constants} from '../../commons/new';
-import PickerSelectionStatusToolbar from './PickerSelectionStatusToolbar';
+import PickerSelectionStatusBar from './PickerSelectionStatusBar';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
@@ -171,9 +171,8 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
-  const selectionStatus = useMemo(() =>
-    mode === PickerModes.MULTI && selectionStatusProps && <PickerSelectionStatusToolbar {...selectionStatusProps}/>,
-  [selectionStatusProps, mode]);
+  const selectionStatus = useMemo(() => mode === PickerModes.MULTI && selectionStatusProps && <PickerSelectionStatusBar {...selectionStatusProps}/>,
+    [selectionStatusProps, mode]);
 
   const renderContent = () => {
     return useWheelPicker ? (
diff --git a/src/components/picker/PickerSelectionStatusToolbar.tsx b/src/components/picker/PickerSelectionStatusBar.tsx
similarity index 96%
rename from src/components/picker/PickerSelectionStatusToolbar.tsx
rename to src/components/picker/PickerSelectionStatusBar.tsx
index c463c7f07b..60105b4dad 100644
--- a/src/components/picker/PickerSelectionStatusToolbar.tsx
+++ b/src/components/picker/PickerSelectionStatusBar.tsx
@@ -7,7 +7,7 @@ import Dividers from '../../style/dividers';
 import PickerContext from './PickerContext';
 import {PickerSelectionStatusProps, PickerMultiValue} from './types';
 
-export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusProps) {
+export default function PickerSelectionStatusBar(props: PickerSelectionStatusProps) {
   const {containerStyle, getLabel, showLabel = true} = props;
   const context = useContext(PickerContext);
   const {toggleAllItemsSelection, value = [], areAllItemsSelected} = context;
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 8797824253..990828eaa8 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -256,7 +256,7 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**
-     * Selection status toolbar props
+     * Selection status bar props
      */
     selectionStatus?: PickerSelectionStatusProps;
     /**

From 7d2086d8371c24d36d33c2f15a153c87d1313f69 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 14:25:43 +0200
Subject: [PATCH 24/33] Update buttonProps onPress to use customValue instead
 of selectionValue in PickerSelectionStatusBar

---
 src/components/picker/PickerSelectionStatusBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusBar.tsx b/src/components/picker/PickerSelectionStatusBar.tsx
index 60105b4dad..6ba42c287a 100644
--- a/src/components/picker/PickerSelectionStatusBar.tsx
+++ b/src/components/picker/PickerSelectionStatusBar.tsx
@@ -22,11 +22,11 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
     const newSelectionState = !areAllItemsSelected;
     toggleAllItemsSelection?.(newSelectionState);
     if (props.selectAllType === 'button') {
-      props.buttonProps?.onPress?.({selectionValue: newSelectionState});
+      props.buttonProps?.onPress?.({customValue: newSelectionState});
     } else if (props.selectAllType === 'checkbox') {
       props.checkboxProps?.onValueChange?.(newSelectionState);
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [areAllItemsSelected, toggleAllItemsSelection]);
 
   const renderSelectionStatus = () => {

From de9f42f2215281c07e0d7a63127e65346c3b1042 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 14:35:50 +0200
Subject: [PATCH 25/33] Add selectAllType prop to PickerSelectionStatusBar for
 flexible selection handling

---
 src/components/picker/PickerSelectionStatusBar.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusBar.tsx b/src/components/picker/PickerSelectionStatusBar.tsx
index 6ba42c287a..a9ada1b3c0 100644
--- a/src/components/picker/PickerSelectionStatusBar.tsx
+++ b/src/components/picker/PickerSelectionStatusBar.tsx
@@ -8,7 +8,7 @@ import PickerContext from './PickerContext';
 import {PickerSelectionStatusProps, PickerMultiValue} from './types';
 
 export default function PickerSelectionStatusBar(props: PickerSelectionStatusProps) {
-  const {containerStyle, getLabel, showLabel = true} = props;
+  const {containerStyle, getLabel, showLabel = true, selectAllType = 'button'} = props;
   const context = useContext(PickerContext);
   const {toggleAllItemsSelection, value = [], areAllItemsSelected} = context;
   const _value: PickerMultiValue = Array.isArray(value) ? value : [];
@@ -18,19 +18,22 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
     getLabel?.({selectedCount: _value.length, value: _value, areAllItemsSelected}) ??
     `${_value.length} Selected ${areAllItemsSelected ? '(All)' : ''}`;
 
+  const isButton = selectAllType === 'button' && 'buttonProps' in props;
+  const isCheckbox = selectAllType === 'checkbox' && 'checkboxProps' in props;
+
   const handlePress = useCallback(() => {
     const newSelectionState = !areAllItemsSelected;
     toggleAllItemsSelection?.(newSelectionState);
-    if (props.selectAllType === 'button') {
+    if (isButton) {
       props.buttonProps?.onPress?.({customValue: newSelectionState});
-    } else if (props.selectAllType === 'checkbox') {
+    } else if (isCheckbox) {
       props.checkboxProps?.onValueChange?.(newSelectionState);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [areAllItemsSelected, toggleAllItemsSelection]);
 
   const renderSelectionStatus = () => {
-    if (props.selectAllType === 'button') {
+    if (isButton) {
       return (
         <Button
           label={areAllItemsSelected ? 'Deselect All' : 'Select All'}
@@ -39,7 +42,7 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
           onPress={handlePress}
         />
       );
-    } else if (props.selectAllType === 'checkbox') {
+    } else if (isCheckbox) {
       return (
         <Checkbox
           {...props.checkboxProps}

From 45bca547187698498e77e125bb496e7d050476a0 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 15:02:22 +0200
Subject: [PATCH 26/33] Refactor PickerSelectionStatusBar to remove
 selectAllType prop and simplify selection handling

---
 .../picker/PickerSelectionStatusBar.tsx       | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusBar.tsx b/src/components/picker/PickerSelectionStatusBar.tsx
index a9ada1b3c0..ce39003a42 100644
--- a/src/components/picker/PickerSelectionStatusBar.tsx
+++ b/src/components/picker/PickerSelectionStatusBar.tsx
@@ -8,7 +8,7 @@ import PickerContext from './PickerContext';
 import {PickerSelectionStatusProps, PickerMultiValue} from './types';
 
 export default function PickerSelectionStatusBar(props: PickerSelectionStatusProps) {
-  const {containerStyle, getLabel, showLabel = true, selectAllType = 'button'} = props;
+  const {containerStyle, getLabel, showLabel = true} = props;
   const context = useContext(PickerContext);
   const {toggleAllItemsSelection, value = [], areAllItemsSelected} = context;
   const _value: PickerMultiValue = Array.isArray(value) ? value : [];
@@ -18,31 +18,28 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
     getLabel?.({selectedCount: _value.length, value: _value, areAllItemsSelected}) ??
     `${_value.length} Selected ${areAllItemsSelected ? '(All)' : ''}`;
 
-  const isButton = selectAllType === 'button' && 'buttonProps' in props;
-  const isCheckbox = selectAllType === 'checkbox' && 'checkboxProps' in props;
-
   const handlePress = useCallback(() => {
     const newSelectionState = !areAllItemsSelected;
     toggleAllItemsSelection?.(newSelectionState);
-    if (isButton) {
-      props.buttonProps?.onPress?.({customValue: newSelectionState});
-    } else if (isCheckbox) {
-      props.checkboxProps?.onValueChange?.(newSelectionState);
+    if (props.selectAllType === 'button') {
+      props?.buttonProps?.onPress?.({customValue: newSelectionState});
+    } else if (props.selectAllType === 'checkbox') {
+      props?.checkboxProps?.onValueChange?.(newSelectionState);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [areAllItemsSelected, toggleAllItemsSelection]);
 
   const renderSelectionStatus = () => {
-    if (isButton) {
+    if (props.selectAllType === 'button') {
       return (
         <Button
           label={areAllItemsSelected ? 'Deselect All' : 'Select All'}
           link
-          {...props.buttonProps}
+          {...props?.buttonProps}
           onPress={handlePress}
         />
       );
-    } else if (isCheckbox) {
+    } else if (props.selectAllType === 'checkbox') {
       return (
         <Checkbox
           {...props.checkboxProps}

From 0b584ff54b7d86218968f49cb5465dc93b4ba85f Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 15:35:56 +0200
Subject: [PATCH 27/33] Fix type assertion for value in
 PickerSelectionStatusBar to ensure correct handling of PickerMultiValue

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

diff --git a/src/components/picker/PickerSelectionStatusBar.tsx b/src/components/picker/PickerSelectionStatusBar.tsx
index ce39003a42..8691730a0a 100644
--- a/src/components/picker/PickerSelectionStatusBar.tsx
+++ b/src/components/picker/PickerSelectionStatusBar.tsx
@@ -11,7 +11,7 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
   const {containerStyle, getLabel, showLabel = true} = props;
   const context = useContext(PickerContext);
   const {toggleAllItemsSelection, value = [], areAllItemsSelected} = context;
-  const _value: PickerMultiValue = Array.isArray(value) ? value : [];
+  const _value: PickerMultiValue = value as PickerMultiValue;
 
   const checkboxIndeterminate = _value.length > 0 && !areAllItemsSelected;
   const label =

From dafe4f0f4322d23d94ac3c497c97cd539a8efb85 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 20 Mar 2025 15:52:32 +0200
Subject: [PATCH 28/33] Refactor renderSelectionStatus, fix when showLabel is
 false

---
 .../picker/PickerSelectionStatusBar.tsx       | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusBar.tsx b/src/components/picker/PickerSelectionStatusBar.tsx
index 8691730a0a..bd5b4a0c7e 100644
--- a/src/components/picker/PickerSelectionStatusBar.tsx
+++ b/src/components/picker/PickerSelectionStatusBar.tsx
@@ -1,4 +1,5 @@
 import React, {useCallback, useContext} from 'react';
+import {StyleSheet} from 'react-native';
 import Button from '../button';
 import Checkbox from '../checkbox';
 import View from '../view';
@@ -30,25 +31,27 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
   }, [areAllItemsSelected, toggleAllItemsSelection]);
 
   const renderSelectionStatus = () => {
-    if (props.selectAllType === 'button') {
-      return (
-        <Button
-          label={areAllItemsSelected ? 'Deselect All' : 'Select All'}
-          link
-          {...props?.buttonProps}
-          onPress={handlePress}
-        />
-      );
-    } else if (props.selectAllType === 'checkbox') {
-      return (
-        <Checkbox
-          {...props.checkboxProps}
-          value={_value.length > 0}
-          indeterminate={checkboxIndeterminate}
-          onValueChange={handlePress}
-        />
-      );
-    }
+    return (
+      <View flexG={!showLabel} style={!showLabel && styles.componentContainer}>
+        {props.selectAllType === 'button' ? (
+          <Button
+            label={areAllItemsSelected ? 'Deselect All' : 'Select All'}
+            link
+            {...props?.buttonProps}
+            onPress={handlePress}
+          />
+        ) : (
+          props.selectAllType === 'checkbox' && (
+            <Checkbox
+              {...props.checkboxProps}
+              value={_value.length > 0}
+              indeterminate={checkboxIndeterminate}
+              onValueChange={handlePress}
+            />
+          )
+        )}
+      </View>
+    );
   };
 
   const renderLabel = () => {
@@ -59,7 +62,7 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
 
   return (
     <View>
-      <View row spread centerV paddingH-page marginV-s4 style={containerStyle}>
+      <View row spread paddingH-page marginV-s4 style={containerStyle}>
         {renderLabel()}
         {renderSelectionStatus()}
       </View>
@@ -67,3 +70,9 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  componentContainer: {
+    alignItems: 'flex-end'
+  }
+});

From 34d7710d58f147dd4b4a772d70e8dbfe9ed53193 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sun, 23 Mar 2025 20:22:42 +0200
Subject: [PATCH 29/33] Add PickerSelectionStatusProps import to PickerScreen
 and index files

---
 demo/src/screens/componentScreens/PickerScreen.tsx | 5 +++--
 src/components/picker/index.tsx                    | 6 ++++--
 src/index.ts                                       | 3 ++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index dbdfb669e8..8d3b95b48a 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -16,7 +16,8 @@ import {
   PickerProps,
   RenderCustomModalProps,
   PickerMethods,
-  SegmentedControl
+  SegmentedControl,
+  PickerSelectionStatusProps
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import {longOptions} from './PickerScreenLongOptions';
@@ -119,7 +120,7 @@ export default class PickerScreen extends Component {
     statOption: [],
     scheme: undefined,
     contact: 0,
-    selectAllType: 'button' as 'button' | 'checkbox' | undefined
+    selectAllType: 'button' as PickerSelectionStatusProps['selectAllType']
   };
 
   onSegmentChange = (index: number) => {
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index f637d58e27..e51a60cf47 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -28,7 +28,8 @@ import {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectionStatusProps
 } from './types';
 import {DialogProps} from '../../incubator/dialog';
 
@@ -330,7 +331,8 @@ export {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectionStatusProps
 };
 export {Picker}; // For tests
 export default Picker as typeof Picker & PickerStatics;
diff --git a/src/index.ts b/src/index.ts
index 5cbd7088d7..b8fdcec2fe 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -121,7 +121,8 @@ export {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectionStatusProps
 } from './components/picker';
 export {default as PieChart, type PieChartProps, PieChartSegmentProps} from './components/pieChart';
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';

From 5735e7847998e2e561c7185637f7be64e4c06daa Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sun, 23 Mar 2025 20:23:58 +0200
Subject: [PATCH 30/33] Remove unused setMultiFinalValue from
 usePickerSelection hook

---
 src/components/picker/helpers/usePickerSelection.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/picker/helpers/usePickerSelection.tsx b/src/components/picker/helpers/usePickerSelection.tsx
index 7196e7c8e9..2c05397ea2 100644
--- a/src/components/picker/helpers/usePickerSelection.tsx
+++ b/src/components/picker/helpers/usePickerSelection.tsx
@@ -66,7 +66,6 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     onDoneSelecting,
     toggleItemSelection,
     cancelSelect,
-    setMultiFinalValue,
     areAllItemsSelected,
     toggleAllItemsSelection
   };

From 4abcfd7125b639321260ab279505ac47cbe7b668 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sun, 23 Mar 2025 20:28:43 +0200
Subject: [PATCH 31/33] Remove value from PickerSelectionStatusLabelData

---
 src/components/picker/PickerSelectionStatusBar.tsx | 2 +-
 src/components/picker/types.ts                     | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusBar.tsx b/src/components/picker/PickerSelectionStatusBar.tsx
index bd5b4a0c7e..e098fd259c 100644
--- a/src/components/picker/PickerSelectionStatusBar.tsx
+++ b/src/components/picker/PickerSelectionStatusBar.tsx
@@ -16,7 +16,7 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
 
   const checkboxIndeterminate = _value.length > 0 && !areAllItemsSelected;
   const label =
-    getLabel?.({selectedCount: _value.length, value: _value, areAllItemsSelected}) ??
+    getLabel?.({selectedCount: _value.length, areAllItemsSelected}) ??
     `${_value.length} Selected ${areAllItemsSelected ? '(All)' : ''}`;
 
   const handlePress = useCallback(() => {
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index 990828eaa8..b13de2b75d 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -163,7 +163,6 @@ type PickerExpandableOverlayProps = {
 
 interface PickerSelectionStatusLabelData {
   selectedCount: number;
-  value: PickerMultiValue;
   areAllItemsSelected: boolean;
 }
 

From 373e9d43820ea68094a70fa9001553c316c300b0 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 24 Mar 2025 10:32:28 +0200
Subject: [PATCH 32/33] selectedCount moved to usePickerSelection

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

diff --git a/src/components/picker/PickerSelectionStatusBar.tsx b/src/components/picker/PickerSelectionStatusBar.tsx
index e098fd259c..a145147b24 100644
--- a/src/components/picker/PickerSelectionStatusBar.tsx
+++ b/src/components/picker/PickerSelectionStatusBar.tsx
@@ -6,18 +6,17 @@ import View from '../view';
 import Text from '../text';
 import Dividers from '../../style/dividers';
 import PickerContext from './PickerContext';
-import {PickerSelectionStatusProps, PickerMultiValue} from './types';
+import {PickerSelectionStatusProps} from './types';
 
 export default function PickerSelectionStatusBar(props: PickerSelectionStatusProps) {
   const {containerStyle, getLabel, showLabel = true} = props;
   const context = useContext(PickerContext);
-  const {toggleAllItemsSelection, value = [], areAllItemsSelected} = context;
-  const _value: PickerMultiValue = value as PickerMultiValue;
+  const {toggleAllItemsSelection, selectedCount = 0, areAllItemsSelected} = context;
 
-  const checkboxIndeterminate = _value.length > 0 && !areAllItemsSelected;
+  const checkboxIndeterminate = !!selectedCount && !areAllItemsSelected;
   const label =
-    getLabel?.({selectedCount: _value.length, areAllItemsSelected}) ??
-    `${_value.length} Selected ${areAllItemsSelected ? '(All)' : ''}`;
+    getLabel?.({selectedCount, areAllItemsSelected}) ??
+    `${selectedCount} Selected ${areAllItemsSelected ? '(All)' : ''}`;
 
   const handlePress = useCallback(() => {
     const newSelectionState = !areAllItemsSelected;
@@ -44,7 +43,7 @@ export default function PickerSelectionStatusBar(props: PickerSelectionStatusPro
           props.selectAllType === 'checkbox' && (
             <Checkbox
               {...props.checkboxProps}
-              value={_value.length > 0}
+              value={selectedCount > 0}
               indeterminate={checkboxIndeterminate}
               onValueChange={handlePress}
             />
diff --git a/src/components/picker/helpers/usePickerSelection.tsx b/src/components/picker/helpers/usePickerSelection.tsx
index 2c05397ea2..f8ae064a52 100644
--- a/src/components/picker/helpers/usePickerSelection.tsx
+++ b/src/components/picker/helpers/usePickerSelection.tsx
@@ -56,6 +56,10 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     return multiDraftValue?.length === availableItems.length;
   }, [multiDraftValue, availableItems]);
 
+  const selectedCount = useMemo(() => {
+    return multiDraftValue?.length;
+  }, [multiDraftValue]);
+
   const toggleAllItemsSelection = useCallback((selectAll: boolean) => {
     setMultiDraftValue(selectAll ? availableItems : []);
   },
@@ -67,6 +71,7 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     toggleItemSelection,
     cancelSelect,
     areAllItemsSelected,
+    selectedCount,
     toggleAllItemsSelection
   };
 };
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index e51a60cf47..e4ead5d453 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -110,6 +110,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     toggleItemSelection,
     cancelSelect,
     areAllItemsSelected,
+    selectedCount,
     toggleAllItemsSelection
   } = usePickerSelection({
     migrate,
@@ -164,6 +165,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       renderItem,
       selectionLimit,
       areAllItemsSelected,
+      selectedCount,
       toggleAllItemsSelection
     };
   }, [
@@ -179,6 +181,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     toggleItemSelection,
     onDoneSelecting,
     areAllItemsSelected,
+    selectedCount,
     toggleAllItemsSelection
   ]);
 
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index b13de2b75d..f92a75a4ed 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -358,6 +358,7 @@ export interface PickerContextProps
   onSelectedLayout: (event: any) => any;
   selectionLimit: PickerProps['selectionLimit'];
   areAllItemsSelected: boolean;
+  selectedCount: number;
   toggleAllItemsSelection?: (selectAll: boolean) => void;
 }
 

From 40790cda27a789db5737b4d3ce27ab0e0b7113a1 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 24 Mar 2025 10:48:45 +0200
Subject: [PATCH 33/33] PickerSelectionStatusBar simplify selectedCount

---
 src/components/picker/PickerSelectionStatusBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/picker/PickerSelectionStatusBar.tsx b/src/components/picker/PickerSelectionStatusBar.tsx
index a145147b24..f2ee31e888 100644
--- a/src/components/picker/PickerSelectionStatusBar.tsx
+++ b/src/components/picker/PickerSelectionStatusBar.tsx
@@ -11,9 +11,9 @@ import {PickerSelectionStatusProps} from './types';
 export default function PickerSelectionStatusBar(props: PickerSelectionStatusProps) {
   const {containerStyle, getLabel, showLabel = true} = props;
   const context = useContext(PickerContext);
-  const {toggleAllItemsSelection, selectedCount = 0, areAllItemsSelected} = context;
+  const {toggleAllItemsSelection, selectedCount, areAllItemsSelected} = context;
 
-  const checkboxIndeterminate = !!selectedCount && !areAllItemsSelected;
+  const checkboxIndeterminate = selectedCount > 0 && !areAllItemsSelected;
   const label =
     getLabel?.({selectedCount, areAllItemsSelected}) ??
     `${selectedCount} Selected ${areAllItemsSelected ? '(All)' : ''}`;