react-native-ui-lib 7.39.0-snapshot.6682 → 7.39.0-snapshot.6685

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.0-snapshot.6682",
+  "version": "7.39.0-snapshot.6685",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/picker/PickerItemsList.js

@@ -15,6 +15,7 @@ import { PickerModes } from "./types";
 import PickerContext from "./PickerContext";
 import PickerItem from "./PickerItem";
 import { Constants } from "../../commons/new";
+import PickerSelectionStatusBar from "./PickerSelectionStatusBar";
 const keyExtractor = (_item, index) => index.toString();
 const PickerItemsList = props => {
   const {
@@ -35,7 +36,8 @@ const PickerItemsList = props => {
     testID,
     showLoader,
     customLoaderElement,
-    renderCustomTopElement
+    renderCustomTopElement,
+    selectionStatus: selectionStatusProps
   } = props;
   const context = useContext(PickerContext);
   const [wheelPickerValue, setWheelPickerValue] = useState(context.value ?? items?.[0]?.value);
@@ -130,10 +132,12 @@ const PickerItemsList = props => {
           <ActivityIndicator />
         </View>;
   };
+  const selectionStatus = useMemo(() => mode === PickerModes.MULTI && selectionStatusProps && <PickerSelectionStatusBar {...selectionStatusProps} />, [selectionStatusProps, mode]);
   const renderContent = () => {
     return useWheelPicker ? renderWheel() : <>
         {renderSearchInput()}
         {renderCustomTopElement?.(context.value)}
+        {selectionStatus}
         {renderList()}
       </>;
   };

package/src/components/picker/PickerSelectionStatusBar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PickerSelectionStatusProps } from './types';
+export default function PickerSelectionStatusBar(props: PickerSelectionStatusProps): React.JSX.Element;

package/src/components/picker/PickerSelectionStatusBar.js

@@ -0,0 +1,60 @@
+import React, { useCallback, useContext } from 'react';
+import { StyleSheet } from 'react-native';
+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";
+export default function PickerSelectionStatusBar(props) {
+  const {
+    containerStyle,
+    getLabel,
+    showLabel = true
+  } = props;
+  const context = useContext(PickerContext);
+  const {
+    toggleAllItemsSelection,
+    selectedCount,
+    areAllItemsSelected
+  } = context;
+  const checkboxIndeterminate = selectedCount > 0 && !areAllItemsSelected;
+  const label = getLabel?.({
+    selectedCount,
+    areAllItemsSelected
+  }) ?? `${selectedCount} Selected ${areAllItemsSelected ? '(All)' : ''}`;
+  const handlePress = useCallback(() => {
+    const newSelectionState = !areAllItemsSelected;
+    toggleAllItemsSelection?.(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 = () => {
+    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={selectedCount > 0} indeterminate={checkboxIndeterminate} onValueChange={handlePress} />}
+      </View>;
+  };
+  const renderLabel = () => {
+    if (showLabel) {
+      return <Text>{label}</Text>;
+    }
+  };
+  return <View>
+      <View row spread paddingH-page marginV-s4 style={containerStyle}>
+        {renderLabel()}
+        {renderSelectionStatus()}
+      </View>
+      <View style={Dividers.d20} />
+    </View>;
+}
+const styles = StyleSheet.create({
+  componentContainer: {
+    alignItems: 'flex-end'
+  }
+});

package/src/components/picker/api/picker.api.json

@@ -108,13 +108,395 @@
   ],
   "snippet": [
     "<Picker",
-    "  value={currentValue$1}",
+    "  value={2$1}",
     "  placeholder={'Placeholder'$2}",
     "  onChange={() => console.log('changed')$3}",
+    "  trailingAccessory={<Icon source={Assets.icons.demo.chevronDown}/>}",
+    " items={[{label: 'Item 1', value: 1}, {label: 'Item 2', value: 2},{label: 'Item 3', value: 3}]}",
     ">",
-    "  {_.map(items, item => (",
-    "   return renderItem(item, index);",
-    "  ))$4}",
     "</Picker>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "Picker",
+      "description": "Picker allows the user to select an option from a variety of choices available.Pressing the Picker Field, will open a dialog or modal displaying a list of available options for selection.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Usage Example",
+            "description": "Pickers allow selection of an option or multiple options from a list usually displayed using an actionSheet. Pickers can be used in forms, settings screens or as part of an interactive flow.",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4415-185562&embed-host=share"
+              }
+            ]
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Form Field (default)",
+                "description": "Mainly used as part of a form, works cohesively with the text field component and other form related components.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_types_form.png"
+                  }
+                ]
+              },
+              {
+                "title": "Filter Field",
+                "description": "Used mostly for filtering a screen or part of it. Can be combined with search functionality.\nThe colon symbol in the Label is not part of the component itself and should be included as part of the text string.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_types_filter.png"
+                  }
+                ]
+              },
+              {
+                "title": "Settings Field",
+                "description": "Based on ListItem component.\nUsed mostly when the picker is part of a settings screen.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_types_settings.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Picker Types",
+            "description": "Various types of pickers are available to accommodate different needs and use cases. "
+          },
+          {
+            "type": "section",
+            "title": "Picker Types Examples",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4415-185650&embed-host=share"
+              }
+            ]
+          },
+          {
+            "type": "table",
+            "columns": ["State/Type/Preset", "Preview"],
+            "items": [
+              {
+                "title": "Default",
+                "content": [
+                  {
+                    "flexed": true,
+                    "snippet": "<Picker preset='outline' placeholder='select' items={[{label: 'Selected Value', value: 1}]} value={1} trailingAccessory={<Icon source={Assets.icons.demo.chevronDown}/>}/>",
+                    "props": {
+                      "preset": "outline",
+                      "label": "Label",
+                      "placeholder": "Select"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Value selected + icon prefix ",
+                "content": [
+                  {
+                    "flexed": true,
+                    "snippet": "<Picker preset='outline' placeholder='select' leadingAccessory={<Icon source={Assets.icons.demo.star} marginR-s2/>} trailingAccessory={<Icon source={Assets.icons.demo.chevronDown}/>} items={[{label: 'Selected Value', value: 1}]} value={1}/>"
+                  }
+                ]
+              },
+              {
+                "title": "Disabled",
+                "content": [
+                  {
+                    "flexed": true,
+                    "snippet": "<Picker preset='outline' label='Label' placeholder='Select' editable={false} trailingAccessory={<Icon source={Assets.icons.demo.chevronDown}/>} />"
+                  }
+                ]
+              },
+              {
+                "title": "Validation error (value not selected)",
+                "content": [
+                  {
+                    "flexed": true,
+                    "snippet": "<Picker preset='outline' label='Label' placeholder='Select' validationMessage='Validation Message' trailingAccessory={<Icon source={Assets.icons.demo.chevronDown}/>} />"
+                  }
+                ]
+              }
+            ],
+            "title": "Form Field"
+          },
+          {
+            "type": "table",
+            "columns": ["State/Type/Preset", "Preview"],
+            "items": [
+              {
+                "title": "Default",
+                "content": [
+                  {
+                    "props": {
+                      "items": [
+                        {
+                          "label": "Selected Value",
+                          "value": 1
+                        }
+                      ],
+                      "value": 1,
+                      "fieldType": "filter"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "With label",
+                "content": [
+                  {
+                    "props": {
+                      "label": "Label: ",
+                      "items": [
+                        {
+                          "label": "Selected Value",
+                          "value": 1
+                        }
+                      ],
+                      "value": 1,
+                      "fieldType": "filter"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Multiple values selected",
+                "content": [
+                  {
+                    "props": {
+                      "mode": "MULTI",
+                      "items": [
+                        {
+                          "label": "Value 1",
+                          "value": 1
+                        },
+                        {
+                          "label": "Value 2",
+                          "value": 2
+                        }
+                      ],
+                      "value": [1, 2],
+                      "fieldType": "filter"
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Filter Field"
+          },
+          {
+            "type": "table",
+            "columns": ["State/Type/Preset", "Preview"],
+            "items": [
+              {
+                "title": "Default",
+                "content": [
+                  {
+                    "background": "#E8ECF0",
+                    "flexed": true,
+                    "snippet": "<Picker label='Label' placeholder='Select' fieldType='settings' containerStyle={{padding: 20, backgroundColor: Colors.$backgroundDefault}}/>"
+                  }
+                ]
+              },
+              {
+                "title": "Value selected + icon prefix ",
+                "content": [
+                  {
+                    "background": "#E8ECF0",
+                    "flexed": true,
+                    "snippet": "<Picker label='Label' placeholder='Select' value={1} fieldType='settings' items={[{label: 'Selected value', value: 1}]} containerStyle={{padding: 20, backgroundColor: Colors.$backgroundDefault}}/>",
+                    "props": {
+                      "label": "Label",
+                      "placeholder": "Select",
+                      "fieldType": "settings",
+                      "items": [
+                        {
+                          "label": "Selected Value",
+                          "value": 1
+                        }
+                      ],
+                      "value": 1
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Settings Field"
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Dialog",
+                "description": "Recommended for short value lists.",
+                "content": [
+                  {
+                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4415-185705&embed-host=share"
+                  }
+                ]
+              },
+              {
+                "title": "Modal",
+                "description": "Used for longer lists like country selection, currency selection or a language picker.",
+                "content": [
+                  {
+                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4415-185740&embed-host=share"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Picker Values display options",
+            "description": "The Picker component serves as an entry point to a list of selectable values, usually displayed in a modal or a dialog."
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Single selection",
+                "description": "Tapping on an item will select it and close the dialog. In scrollable long lists, the selected item will be displayed at the top of the list to stay visible. ",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_values_dialog_single.png"
+                  }
+                ]
+              },
+              {
+                "title": "Multi-select",
+                "description": "In multi-select dialogs, a clear CTA for “Done” or “Save” is required to confirm the selection and dismiss the dialog.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_values_dialog_multiple.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Values displayed in Dialog",
+            "description": "The Picker component serves as an entry point to a list of selectable values, usually displayed in a modal or a dialog."
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Maximum Selected",
+                "description": "When the user reaches the limited amount of options allowed to select, the non-selected options will become disabled to restrict the user from selecting more options.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_dialog_states_max.png"
+                  }
+                ]
+              },
+              {
+                "title": "Validation Error",
+                "description": "markdown:Product can set the minimum amount for the selected options. If the user selects less options than the minimum:  \n- Display a validation error in the picker header. The error text should explain the user should select at least one option.\n- The dialog CTA will become disabled.\n- If the user will close the dialog, the changes won’t be saved.\n- When the user selects the minimum required options, the validation error will disappear and the CTA will become active.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_dialog_states_validation.png"
+                  }
+                ]
+              },
+              {
+                "title": "Loading Data",
+                "description": "If the data can't be loaded before opening the dialog, a Loader should be shown to let the user know that content is being fetched.\nThe search input is hidden while loading.\nSince the number of items to be loaded is unpredictable, a fixed spacing of 120px below and above the loader has been set.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_dialog_states_loading.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Dialog States",
+            "layout": "horizontal"
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Single selection",
+                "description": "Tapping on one of the list items will select it and close the modal. The CTA is optional and disabled by default. It can be added in cases where users might not expect or want the modal to auto-dismiss upon selection.\nThe selected Item is hoisted on top of long lists by default (placed above other values). This can also be set for short lists.\nA search bar can be added on top of the values list.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_modal_single.png"
+                  }
+                ]
+              },
+              {
+                "title": "Multi-select",
+                "description": "In multi-selection dialogs, a CTA for “Done” or “Save” is required to confirm the selection and dismiss the modal.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_modal_multiple.png"
+                  }
+                ]
+              },
+              {
+                "title": "Select all",
+                "description": "Providing a clear “select all” action is a good practice. In case all items are selected, display a “clear all” action. Make sure items number is clearly displayed according to the selection.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_modal_selectAll.png"
+                  }
+                ]
+              },
+              {
+                "title": "Select all checkbox",
+                "description": "In some cases, using checkbox for the “select all” action will be more appropriate. Note that “select all” checkbox can use an “indeterminate” state, if needed. \nMake sure that selected items number is clearly displayed. ",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_modal_selectAll_checkbox.png"
+                  }
+                ]
+              },
+              {
+                "title": "Loading Data",
+                "description": "If the data can't be loaded prior to opening the modal, a Loader should be shown, indicating that content is being fetched.\nSearch input is hidden while loading, and the loader is aligned to the center of the screen.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_modal_loading.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Values displayed in Modal",
+            "description": "This type of selection list is used for long lists, e.g. contacts, countries and currencies."
+          },
+          {
+            "type": "section",
+            "title": "Picker Presets",
+            "description": "Pickers allow selection of an option/value or multiple options/values from a list. Pickers can be used in forms, settings screens or as part of an interactive flow. ",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4418-192956&embed-host=share"
+              }
+            ]
+          },
+          {
+            "type": "section",
+            "title": "Spec",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Picker/picker_spec.png"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/picker/helpers/usePickerSelection.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { PickerProps, PickerValue, PickerSingleValue, PickerMultiValue } from '../types';
-interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
+interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode' | 'items'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }
@@ -9,5 +9,8 @@ declare const usePickerSelection: (props: UsePickerSelectionProps) => {
     onDoneSelecting: (item: PickerValue) => void;
     toggleItemSelection: (item: PickerSingleValue) => void;
     cancelSelect: () => void;
+    areAllItemsSelected: boolean;
+    selectedCount: number;
+    toggleAllItemsSelection: (selectAll: boolean) => void;
 };
 export default usePickerSelection;

package/src/components/picker/helpers/usePickerSelection.js

@@ -1,6 +1,6 @@
 import _xor from "lodash/xor";
 import _xorBy from "lodash/xorBy";
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useMemo } from 'react';
 import { PickerModes } from "../types";
 const usePickerSelection = props => {
   const {
@@ -11,7 +11,8 @@ const usePickerSelection = props => {
     pickerExpandableRef,
     getItemValue,
     setSearchValue,
-    mode
+    mode,
+    items
   } = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value);
   const [multiFinalValue, setMultiFinalValue] = useState(value);
@@ -43,11 +44,26 @@ const usePickerSelection = props => {
     pickerExpandableRef.current?.closeExpandable?.();
     topBarProps?.onCancel?.();
   }, [multiFinalValue, topBarProps]);
+  const availableItems = useMemo(() => {
+    return items?.filter(item => !item.disabled).map(item => item.value) || [];
+  }, [items]);
+  const areAllItemsSelected = useMemo(() => {
+    return multiDraftValue?.length === availableItems.length;
+  }, [multiDraftValue, availableItems]);
+  const selectedCount = useMemo(() => {
+    return multiDraftValue?.length;
+  }, [multiDraftValue]);
+  const toggleAllItemsSelection = useCallback(selectAll => {
+    setMultiDraftValue(selectAll ? availableItems : []);
+  }, [availableItems]);
   return {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   };
 };
 export default usePickerSelection;

package/src/components/picker/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PickerItem from './PickerItem';
 import { extractPickerItems } from './PickerPresenter';
-import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from './types';
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps } from './types';
 type PickerStatics = {
     Item: typeof PickerItem;
     modes: typeof PickerModes;
@@ -9,7 +9,7 @@ type PickerStatics = {
     extractPickerItems: typeof extractPickerItems;
 };
 declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>>;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps };
 export { Picker };
 declare const _default: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>> & PickerStatics;
 export default _default;

package/src/components/picker/index.js

@@ -18,7 +18,7 @@ import useFieldType from "./helpers/useFieldType";
 import useNewPickerProps from "./helpers/useNewPickerProps";
 // import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
 import { extractPickerItems } from "./PickerPresenter";
-import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from "./types";
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps } from "./types";
 const DEFAULT_DIALOG_PROPS = {
   bottom: true,
   width: '100%'
@@ -58,6 +58,7 @@ const Picker = React.forwardRef((props, ref) => {
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
+    selectionStatus,
     ...others
   } = themeProps;
   const {
@@ -101,7 +102,10 @@ const Picker = React.forwardRef((props, ref) => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   } = usePickerSelection({
     migrate,
     value,
@@ -110,7 +114,8 @@ const Picker = React.forwardRef((props, ref) => {
     getItemValue,
     topBarProps,
     setSearchValue,
-    mode
+    mode,
+    items
   });
   const {
     label,
@@ -154,9 +159,12 @@ const Picker = React.forwardRef((props, ref) => {
       getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
-      selectionLimit
+      selectionLimit,
+      areAllItemsSelected,
+      selectedCount,
+      toggleAllItemsSelection
     };
-  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting]);
+  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, areAllItemsSelected, selectedCount, toggleAllItemsSelection]);
   const renderPickerItem = useCallback((item, index) => {
     return <PickerItem key={`${index}-${item.value}`} {...item} />;
   }, []);
@@ -201,7 +209,7 @@ const Picker = React.forwardRef((props, ref) => {
       ...topBarProps,
       onCancel: cancelSelect,
       onDone: mode === PickerModes.MULTI ? () => onDoneSelecting(multiDraftValue) : undefined
-    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement}>
+    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement} selectionStatus={selectionStatus}>
         {filteredItems}
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, filteredItems, useSafeArea, useWheelPicker, items, showLoader]);
@@ -221,6 +229,6 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps };
 export { Picker }; // For tests
 export default Picker;

package/src/components/picker/types.d.ts

@@ -4,6 +4,8 @@ import { ExpandableOverlayProps, ExpandableOverlayMethods } from '../../incubato
 import { ModalTopBarProps } from '../modal/TopBar';
 import { TextFieldMethods, TextFieldProps } from '../textField';
 import { TouchableOpacityProps } from '../touchableOpacity';
+import { ButtonProps } from '../button';
+import { CheckboxProps } from '../checkbox';
 export declare enum PickerModes {
     SINGLE = "SINGLE",
     MULTI = "MULTI"
@@ -147,6 +149,44 @@ type PickerExpandableOverlayProps = {
      */
     enableModalBlur?: boolean;
 };
+interface PickerSelectionStatusLabelData {
+    selectedCount: number;
+    areAllItemsSelected: boolean;
+}
+export type ButtonSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'button';
+    /**
+     * Button props
+     */
+    buttonProps?: ButtonProps;
+};
+export type CheckboxSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'checkbox';
+    /**
+     * Checkbox props
+     */
+    checkboxProps?: CheckboxProps;
+};
+export type PickerSelectionStatusProps = {
+    /**
+     * A function that generates a label based on the selected items' count and status
+     */
+    getLabel?: (data: PickerSelectionStatusLabelData) => string;
+    /**
+     * Custom container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Control weather to show the label or not
+     */
+    showLabel?: boolean;
+} & (ButtonSelectionStatus | CheckboxSelectionStatus);
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
     /**
      * Use dialog instead of modal picker
@@ -193,6 +233,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & Picke
      * Render custom top element
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
+    /**
+     * Selection status bar props
+     */
+    selectionStatus?: PickerSelectionStatusProps;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -286,8 +330,11 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     isMultiMode: boolean;
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
+    areAllItemsSelected: boolean;
+    selectedCount: number;
+    toggleAllItemsSelection?: (selectAll: boolean) => void;
 }
-export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
+export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'selectionStatus' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
     items?: {
         value: any;
         label: any;

package/src/incubator/toast/toast.api.json

@@ -102,7 +102,6 @@
                 "title": "Generic",
                 "content": [
                   {
-                    "component": "Incubator.Toast",
                     "props": {
                       "visible": true,
                       "message": "Mika Or was saved to contacts.",
@@ -115,7 +114,6 @@
                 "title": "Success",
                 "content": [
                   {
-                    "component": "Incubator.Toast",
                     "props": {
                       "visible": true,
                       "message": "Post published.",
@@ -128,7 +126,6 @@
                 "title": "Validation",
                 "content": [
                   {
-                    "component": "Incubator.Toast",
                     "props": {
                       "visible": true,
                       "message": "Enter a card number.",
@@ -141,7 +138,6 @@
                 "title": "Offline Error",
                 "content": [
                   {
-                    "component": "Incubator.Toast",
                     "props": {
                       "visible": true,
                       "message": "This action is not available offline.",
@@ -161,7 +157,6 @@
                 "title": "None",
                 "content": [
                   {
-                    "component": "Incubator.Toast",
                     "props": {
                       "visible": true,
                       "message": "Action completed."
@@ -181,7 +176,6 @@
                 "title": "With loader",
                 "content": [
                   {
-                    "component": "Incubator.Toast",
                     "props": {
                       "visible": true,
                       "message": "Action completed.",

package/src/index.d.ts

@@ -67,7 +67,7 @@ export { default as PanningContext } from './components/panningViews/panningCont
 export { default as PanningProvider, PanningDirections, PanLocationProps, PanAmountsProps, PanDirectionsProps } from './components/panningViews/panningProvider';
 export { default as PanResponderView, PanResponderViewProps } from './components/panningViews/panResponderView';
 export { default as asPanViewConsumer } from './components/panningViews/asPanViewConsumer';
-export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from './components/picker';
+export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps } from './components/picker';
 export { default as PieChart, type PieChartProps, PieChartSegmentProps } from './components/pieChart';
 export { default as ProgressBar, ProgressBarProps } from './components/progressBar';
 export { default as ProgressiveImage, ProgressiveImageProps } from './components/progressiveImage';

package/src/index.js

@@ -166,6 +166,7 @@ var _exportNames = {
   RenderCustomModalProps: true,
   PickerItemsListProps: true,
   PickerMethods: true,
+  PickerSelectionStatusProps: true,
   PieChart: true,
   PieChartSegmentProps: true,
   ProgressBar: true,
@@ -1110,6 +1111,12 @@ Object.defineProperty(exports, "PickerSearchStyle", {
     return _picker().PickerSearchStyle;
   }
 });
+Object.defineProperty(exports, "PickerSelectionStatusProps", {
+  enumerable: true,
+  get: function () {
+    return _picker().PickerSelectionStatusProps;
+  }
+});
 Object.defineProperty(exports, "PickerValue", {
   enumerable: true,
   get: function () {