react-native-ui-lib 7.39.0-snapshot.6532 → 7.39.0-snapshot.6539

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.0-snapshot.6532",
+  "version": "7.39.0-snapshot.6539",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -14,7 +14,6 @@
     "url": "https://github.com/wix/react-native-ui-lib"
   },
   "scripts": {
-    "update-web-assets": "node scripts/assets/extract-dimensions.ts",
     "start": "watchman watch-del-all && react-native start",
     "start:web": "npm --prefix webDemo run start",
     "ios": "react-native run-ios",
@@ -84,7 +83,6 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^29.2.1",
     "@types/lodash": "^4.0.0",
-    "@types/mime-types": "^2.1.4",
     "@types/prop-types": "^15.5.3",
     "@types/react": "18.3.7",
     "@types/react-native": "0.73.0",
@@ -102,11 +100,9 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.0.4",
     "eslint-plugin-react-native": "^4.0.0",
-    "image-size": "^2.0.1",
     "jest": "^29.6.3",
     "light-date": "^1.2.0",
     "metro-react-native-babel-preset": "0.73.10",
-    "mime-types": "^2.1.35",
     "moment": "^2.24.0",
     "object-hash": "^3.0.0",
     "postcss": "^8.4.21",

package/scripts/docs/buildDocsCommon.js

@@ -7,7 +7,6 @@ const fs = require('fs');
 
 const COMPONENTS_DOCS_DIR = './docs/components';
 const SERVICES_DOCS_DIR = './docs/services';
-const FOUNDATION_DOCS_DIR = './docs/foundation';
 
 const VALID_COMPONENTS_CATEGORIES = [
   'foundation',
@@ -31,9 +30,6 @@ const VALID_COMPONENTS_CATEGORIES = [
 
 function buildDocs(apiFolders, componentsPreProcess) {
   let components = readComponentsFromApiFiles(apiFolders);
-
-  logStatistics(components);
-
   components = componentsPreProcess?.(components) ?? components;
   resetDocsDir();
   processComponents(components);
@@ -96,22 +92,14 @@ function processComponents(components) {
       content += `${buildOldDocs(component)}\n`;
     }
 
+
     let dirPath;
-    switch (component.category) {
-      case 'services': {
-        dirPath = `${SERVICES_DOCS_DIR}`;
-        break;
-      }
-      case 'foundation': {
-        dirPath = `${FOUNDATION_DOCS_DIR}`;
-        break;
-      }
-      default: {
-        const componentParentDir =
-          componentParentName || isParentComponent ? `/${componentParentName || componentName}` : '';
-        dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
-        break;
-      }
+    if (component.category === 'services') {
+      dirPath = `${SERVICES_DOCS_DIR}`;
+    } else {
+      const componentParentDir =
+        componentParentName || isParentComponent ? `/${componentParentName || componentName}` : '';
+      dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
     }
 
     if (!fs.existsSync(dirPath)) {
@@ -137,22 +125,6 @@ function generateExtendsLink(extendsLink) {
   return extendsText;
 }
 
-function logStatistics(components) {
-  const groupedComponents = _.countBy(components, 'name');
-  const duplicateComponents = Object.entries(groupedComponents)
-    .filter(([_, count]) => count > 1)
-    .map(([name, count]) => `${name} (${count} times)`);
-
-  if (duplicateComponents.length > 0) {
-    console.log('Components with multiple occurrences:\n-', duplicateComponents.join('\n- '));
-  }
-
-  const componentsWithoutSnippet = components.filter(c => !c.snippet).map(c => c.name);
-  if (componentsWithoutSnippet.length > 0) {
-    console.log('Components missing snippet:\n-', componentsWithoutSnippet.join('\n- '));
-  }
-}
-
 function buildOldDocs(component) {
   let content = '';
   content += `import UILivePreview from '@site/src/components/UILivePreview';\n\n`;
@@ -212,10 +184,12 @@ function buildOldDocs(component) {
   /* Snippet */
   if (component.snippet) {
     content += `### Usage\n`;
-    content += `<UILivePreview componentName={"${component.name}"} code={\`${component.snippet
+    content += `<UILivePreview code={\`${component.snippet
       ?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), ''))
       .join('\n')
       .toString()}\`}/>\n\n`;
+  } else {
+    console.warn(`${component.name} does not have a snippet`);
   }
 
   /* Props */

package/src/assets/{internal/icons → icons}/index.js

@@ -2,17 +2,8 @@ export const icons = {
   get check() {
     return require('./check.png');
   },
-  get checkMarkSmall() {
-    return require('./checkMarkSmall.png');
-  },
   get checkSmall() {
-    return require('./checkSmall.png');
-  },
-  get chevronDown() {
-    return require('./chevronDown.png');
-  },
-  get exclamationSmall() {
-    return require('./exclamationSmall.png');
+    return require('./check-small.png');
   },
   get minusSmall() {
     return require('./minusSmall.png');
@@ -26,13 +17,10 @@ export const icons = {
   get x() {
     return require('./x.png');
   },
-  get xFlat() {
-    return require('./xFlat.png');
-  },
   get xMedium() {
     return require('./xMedium.png');
   },
-  get xSmall() {
-    return require('./xSmall.png');
+  get xFlat() {
+    return require('./xFlat.png');
   }
 };

package/src/assets/images/index.js

@@ -0,0 +1,5 @@
+export const images = {
+  get gradient() {
+    return require('./gradient.png');
+  }
+};

package/src/assets/index.js

@@ -1,9 +1,12 @@
 import { Assets } from "./Assets";
 export default new Assets().loadAssetsGroup('', {
+  get icons() {
+    return require("./icons").icons;
+  },
   get emojis() {
     return require("./emojis").emojis;
   },
-  get internal() {
-    return require("./internal").internal;
+  get images() {
+    return require("./images").images;
   }
 });

package/src/commons/Constants.d.ts

@@ -47,7 +47,6 @@ declare const constants: {
     };
     backspaceKey: string;
     enterKey: string;
-    getFontScale: () => number;
 };
 export default constants;
 export declare const _reset: () => void;

package/src/commons/Constants.js

@@ -1,4 +1,4 @@
-import { Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, StatusBar, PixelRatio } from 'react-native';
+import { Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, StatusBar } from 'react-native';
 export let orientations = /*#__PURE__*/function (orientations) {
   orientations["PORTRAIT"] = "portrait";
   orientations["LANDSCAPE"] = "landscape";
@@ -166,9 +166,7 @@ const constants = {
   },
   /* Keyboard */
   backspaceKey: 'Backspace',
-  enterKey: 'Enter',
-  /* Font scale */
-  getFontScale: PixelRatio.getFontScale
+  enterKey: 'Enter'
 };
 setStatusBarHeight();
 Dimensions.addEventListener('change', updateConstants);

package/src/components/card/index.js

@@ -22,7 +22,7 @@ const DEFAULT_SELECTION_PROPS = {
   borderWidth: 2,
   color: Colors.$backgroundPrimaryHeavy,
   indicatorSize: 20,
-  icon: Assets.internal.icons.checkSmall,
+  icon: Assets.icons.checkSmall,
   iconColor: Colors.$iconDefaultLight,
   hideIndicator: false
 };

package/src/components/checkbox/index.js

@@ -167,7 +167,7 @@ class Checkbox extends Component {
         }]}>
             <AnimatedIcon style={[this.styles.selectedIcon, {
             transform: this.animationStyle.transform
-          }]} source={indeterminate ? Assets.internal.icons.minusSmall : selectedIcon || Assets.internal.icons.checkSmall} testID={`${testID}.selected`} tintColor={this.getTintColor()} />
+          }]} source={indeterminate ? Assets.icons.minusSmall : selectedIcon || Assets.icons.checkSmall} testID={`${testID}.selected`} tintColor={this.getTintColor()} />
           </Animated.View>}
       </TouchableOpacity>
     );

package/src/components/chip/index.js

@@ -27,7 +27,7 @@ const Chip = ({
   containerStyle,
   onDismiss,
   dismissColor = Colors.$iconDefault,
-  dismissIcon = Assets.internal.icons.x,
+  dismissIcon = Assets.icons.x,
   dismissIconStyle,
   dismissContainerStyle,
   iconProps,

package/src/components/chipsInput/index.js

@@ -5,8 +5,8 @@ import { StyleSheet } from 'react-native';
 import { Constants } from "../../commons/new";
 import { useCombinedRefs, useDidUpdate } from "../../hooks";
 import TextField from "../textField";
-import Assets from "../../assets";
 import Chip from "../chip";
+const removeIcon = require("./assets/xSmall.png");
 export let ChipsInputChangeReason = /*#__PURE__*/function (ChipsInputChangeReason) {
   ChipsInputChangeReason["Added"] = "added";
   ChipsInputChangeReason["Removed"] = "removed";
@@ -85,7 +85,7 @@ const ChipsInput = forwardRef((props, refToForward) => {
     return <Chip key={index} customValue={index}
     // resetSpacings
     // paddingH-s2
-    marginR-s2 marginB-s2 dismissIcon={Assets.internal.icons.xSmall} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
+    marginR-s2 marginB-s2 dismissIcon={removeIcon} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
   };
   const chipList = useMemo(() => {
     return <>

package/src/components/colorPicker/ColorPickerDialogHeader.js

@@ -16,10 +16,10 @@ const ColorPickerDialogHeader = props => {
     onDonePressed
   } = props;
   return <View row spread bg-$backgroundDefault paddingH-20 style={styles.header}>
-      <Button link iconSource={Assets.internal.icons.x} iconStyle={{
+      <Button link iconSource={Assets.icons.x} iconStyle={{
       tintColor: Colors.$iconDefault
     }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} />
-      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.internal.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
+      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
     </View>;
 };
 export default ColorPickerDialogHeader;

package/src/components/colorPicker/ColorPickerPreview.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { StyleSheet, TextInput, I18nManager } from 'react-native';
+import { StyleSheet, TextInput, PixelRatio, I18nManager } from 'react-native';
 import { Colors, Typography } from "../../style";
 import { BORDER_RADIUS, getHexString, getTextColor } from "./ColorPickerPresenter";
 import View from "../view";
@@ -19,7 +19,7 @@ const ColorPickerPreview = props => {
   const textInput = useRef(null);
   const hex = getHexString(color);
   const textColor = getTextColor(hex);
-  const fontScale = Constants.getFontScale();
+  const fontScale = PixelRatio.getFontScale();
   const value = Colors.isTransparent(text) ? '000000' : text;
   return <View style={[styles.preview, {
     backgroundColor: hex

package/src/components/colorPicker/index.js

@@ -42,7 +42,7 @@ const ColorPicker = props => {
       <View style={[styles.buttonContainer, {
       backgroundColor
     }]}>
-        <Button color={Colors.$textDefault} outlineColor={Colors.$textDefault} style={styles.button} round outline iconSource={Assets.internal.icons.plusSmall} onPress={showDialog} testID={`${testID}-button`} accessibilityLabel={accessibilityLabels?.addButton} />
+        <Button color={Colors.$textDefault} outlineColor={Colors.$textDefault} style={styles.button} round outline iconSource={Assets.icons.plusSmall} onPress={showDialog} testID={`${testID}-button`} accessibilityLabel={accessibilityLabels?.addButton} />
       </View>
       <ColorPickerDialog {...props} key={initialColor} visible={show} onDismiss={hideDialog} accessibilityLabels={{
       dismissButton: accessibilityLabels?.dismissButton,

package/src/components/colorSwatch/index.js

@@ -6,6 +6,7 @@ import { asBaseComponent, Constants } from "../../commons/new";
 import View from "../view";
 import TouchableOpacity from "../touchableOpacity";
 import Image from "../image";
+const transparentImage = require("./assets/transparentSwatch/TransparentSwatch.png");
 const DEFAULT_SIZE = Constants.isTablet ? 44 : 36;
 export const SWATCH_MARGIN = 12;
 export const SWATCH_SIZE = DEFAULT_SIZE;
@@ -140,10 +141,10 @@ class ColorSwatch extends PureComponent {
       height: size,
       borderRadius: size / 2
     }, style]} onLayout={this.onLayout} {...this.getAccessibilityInfo()}>
-        {Colors.isTransparent(this.color) && <Image source={Assets.internal.icons.transparentSwatch} style={this.styles.transparentImage} resizeMode={'cover'} />}
+        {Colors.isTransparent(this.color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
         {unavailable ? <View style={[this.styles.unavailable, {
         backgroundColor: tintColor
-      }]} /> : <Animated.Image source={Assets.internal.icons.check} style={{
+      }]} /> : <Animated.Image source={Assets.icons.check} style={{
         tintColor,
         opacity: isSelected,
         transform: [{

package/src/components/dateTimePicker/index.js

@@ -137,10 +137,10 @@ const DateTimePicker = forwardRef((props, ref) => {
   }, [onDonePressed, toggleExpandableOverlay]);
   const renderHeader = () => {
     return <View row spread bg-$backgroundDefault backgroundColor={backgroundColor} paddingH-20 style={[styles.header, headerStyle]} testID={`${testID}.header`}>
-        <Button link iconSource={Assets.internal.icons.x} iconStyle={{
+        <Button link iconSource={Assets.icons.x} iconStyle={{
         tintColor: Colors.$iconDefault
       }} testID={`${testID}.cancel`} {...cancelButtonProps} onPress={toggleExpandableOverlay} />
-        <Button link iconSource={Assets.internal.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
+        <Button link iconSource={Assets.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
       </View>;
   };
   const renderDateTimePicker = useCallback(() => {

package/src/components/hint/index.js

@@ -6,7 +6,6 @@ import View from "../view";
 import Image from "../image";
 import Modal from "../modal";
 import TouchableOpacity from "../touchableOpacity";
-import Assets from "../../assets";
 import { HintPositions, HintProps, TargetAlignments } from "./types";
 import useHintVisibility from "./hooks/useHintVisibility";
 import useHintLayout from "./hooks/useHintLayout";
@@ -15,6 +14,8 @@ import useHintPosition from "./hooks/useHintPosition";
 import HintMockChildren from "./HintMockChildren";
 import HintAnchor from "./HintAnchor";
 import HintBubble from "./HintBubble";
+const sideTip = require("./assets/hintTipSide.png");
+const middleTip = require("./assets/hintTipMiddle.png");
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
@@ -124,7 +125,7 @@ const Hint = props => {
     }
   };
   const renderHintTip = () => {
-    const source = useSideTip ? Assets.internal.images.hintTipSide : Assets.internal.images.hintTipMiddle;
+    const source = useSideTip ? sideTip : middleTip;
     const flipVertically = position === HintPositions.TOP;
     const flipHorizontally = targetAlignmentOnScreen === TargetAlignments.RIGHT;
     const flipStyle = {

package/src/components/image/index.js

@@ -156,7 +156,7 @@ class Image extends PureComponent {
     } = modifiers;
     return (
       // @ts-ignore
-      <ImageView style={[Constants.isWeb && source?.dimensions, tintColor && {
+      <ImageView style={[tintColor && {
         tintColor
       }, shouldFlipRTL && styles.rtlFlipped, width && {
         width

package/src/components/modal/TopBar.js

@@ -21,7 +21,7 @@ class TopBar extends Component {
   static displayName = 'Modal.TopBar';
   static defaultProps = {
     doneLabel: 'Save',
-    cancelIcon: Assets.internal.icons.x,
+    cancelIcon: Assets.icons.x,
     doneButtonProps: {},
     cancelButtonProps: {},
     includeStatusBar: Constants.isIOS

package/src/components/modal/api/modalTopBar.api.json

@@ -29,7 +29,7 @@
       "name": "cancelIcon",
       "type": "ImageSource",
       "description": "Cancel action icon",
-      "default": "Assets.internal.icons.x"
+      "default": "Assets.icons.x"
     },
     {"name": "onCancel", "type": "(props?: any) => void", "description": "Cancel action callback"},
     {

package/src/components/overlay/index.js

@@ -3,7 +3,9 @@ import React, { PureComponent } from 'react';
 import { StyleSheet, Image } from 'react-native';
 import { Colors } from "../../style";
 import View from "../view";
-import Assets from "../../assets";
+const gradientImageLow = require("./assets/GradientOverlayLow.png");
+const gradientImageMed = require("./assets/GradientOverlayMedium.png");
+const gradientImageHigh = require("./assets/GradientOverlayHigh.png");
 const OVERLY_TYPES = {
   VERTICAL: 'vertical',
   TOP: 'top',
@@ -75,11 +77,11 @@ class Overlay extends PureComponent {
   getImageSource = (type, intensity) => {
     if (type !== OVERLY_TYPES.SOLID) {
       if (intensity === OverlayIntensityType.MEDIUM) {
-        return Assets.internal.images.gradientOverlayMedium;
+        return gradientImageMed;
       } else if (intensity === OverlayIntensityType.HIGH) {
-        return Assets.internal.images.gradientOverlayHigh;
+        return gradientImageHigh;
       } else {
-        return Assets.internal.images.gradientOverlayLow;
+        return gradientImageLow;
       }
     }
   };

package/src/components/picker/PickerItem.js

@@ -23,7 +23,7 @@ const PickerItem = props => {
     label,
     labelStyle,
     disabled,
-    selectedIcon = Assets.internal.icons.check,
+    selectedIcon = Assets.icons.check,
     selectedIconColor = Colors.$iconPrimary,
     onPress,
     testID

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 PickerSelectionStatusToolbar from "./PickerSelectionStatusToolbar";
 const keyExtractor = (_item, index) => index.toString();
 const PickerItemsList = props => {
   const {
@@ -35,7 +36,8 @@ const PickerItemsList = props => {
     testID,
     showLoader,
     customLoaderElement,
-    renderCustomTopElement
+    renderCustomTopElement,
+    selectionStatus
   } = props;
   const context = useContext(PickerContext);
   const [wheelPickerValue, setWheelPickerValue] = useState(context.value ?? items?.[0]?.value);
@@ -45,7 +47,7 @@ const PickerItemsList = props => {
         return renderCustomSearch(props);
       }
       return <View style={styles.searchInputContainer}>
-          <Icon style={styles.searchIcon} tintColor={Colors.$iconDefault} source={searchStyle.icon || Assets.internal.icons.search} />
+          <Icon style={styles.searchIcon} tintColor={Colors.$iconDefault} source={searchStyle.icon || Assets.icons.search} />
           <TextInput testID={testID}
         // ref={r => (this.search = r)}
         style={[styles.searchInput, {
@@ -130,10 +132,14 @@ const PickerItemsList = props => {
           <ActivityIndicator />
         </View>;
   };
+  const renderSelectionStatus = useMemo(() => {
+    return <PickerSelectionStatusToolbar {...selectionStatus} availableItems={context?.availableItems} value={context?.value} toggleAllItemsSelection={context?.toggleAllItemsSelection} />;
+  }, [selectionStatus, context?.value, context?.availableItems, context?.toggleAllItemsSelection]);
   const renderContent = () => {
     return useWheelPicker ? renderWheel() : <>
         {renderSearchInput()}
         {renderCustomTopElement?.(context.value)}
+        {mode === PickerModes.MULTI && selectionStatus && renderSelectionStatus}
         {renderList()}
       </>;
   };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PickerProps, PickerContextProps, PickerMultiValue, ButtonSelectionStatus, CheckboxSelectionStatus } 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): React.JSX.Element;

package/src/components/picker/PickerSelectionStatusToolbar.js

@@ -0,0 +1,63 @@
+import React, { useCallback } from 'react';
+import Button from "../button";
+import Checkbox from "../checkbox";
+import View from "../view";
+import Text from "../text";
+import { PickerSelectAllType } from "./types";
+export default function PickerSelectionStatusToolbar(props) {
+  const {
+    containerStyle,
+    getLabel,
+    availableItems = [],
+    selectAllType = 'none',
+    showLabel = true,
+    toggleAllItemsSelection,
+    value = [],
+    renderTopCustomElement,
+    renderBottomCustomElement
+  } = props;
+  const isAllSelected = value.length === availableItems.length;
+  const checkboxIndeterminate = value.length > 0 && value.length < availableItems.length;
+  const label = getLabel?.({
+    selectedCount: value.length,
+    value,
+    isAllSelected
+  }) ?? `${value.length} Selected ${isAllSelected ? '(All)' : ''}`;
+  let buttonProps;
+  let checkboxProps;
+  switch (props.selectAllType) {
+    case PickerSelectAllType.button:
+      buttonProps = props.buttonProps;
+      break;
+    case PickerSelectAllType.checkbox:
+      checkboxProps = props.checkboxProps;
+      break;
+  }
+  const handlePress = useCallback(() => {
+    const newSelectionState = !isAllSelected;
+    toggleAllItemsSelection?.(newSelectionState);
+    buttonProps?.onPress?.(availableItems);
+    checkboxProps?.onValueChange?.(newSelectionState);
+  }, [isAllSelected, toggleAllItemsSelection, availableItems, 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>{label}</Text>;
+    }
+    return null;
+  };
+  return <View>
+      {renderTopCustomElement?.()}
+      <View row spread centerV paddingH-page style={containerStyle}>
+        {renderLabel()}
+        {renderSelectionStatus()}
+      </View>
+      {renderBottomCustomElement?.()}
+    </View>;
+}

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

@@ -4,8 +4,8 @@ import { Typography, Colors } from "../../../style";
 import View from "../../view";
 import Text from "../../text";
 import Icon from "../../icon";
-import Assets from "../../../assets";
 import { PickerFieldTypes } from "../types";
+const dropdown = require("../assets/dropdown.png");
 const useFieldType = props => {
   const {
     fieldType,
@@ -30,7 +30,7 @@ const useFieldType = props => {
           ...Typography.text70,
           color: Colors.$textNeutral
         },
-        trailingAccessory: trailingAccessory ?? <Icon marginL-s1 source={Assets.internal.icons.chevronDown} />
+        trailingAccessory: trailingAccessory ?? <Icon marginL-s1 source={dropdown} />
       };
     } else if (fieldType === PickerFieldTypes.settings) {
       return {

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;
+    setMultiFinalValue: import("react").Dispatch<import("react").SetStateAction<PickerMultiValue>>;
+    availableItems: PickerMultiValue;
+    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,20 @@ 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 toggleAllItemsSelection = useCallback(selectAll => {
+    setMultiDraftValue(selectAll ? availableItems : []);
+  }, [availableItems]);
   return {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    setMultiFinalValue,
+    availableItems,
+    toggleAllItemsSelection
   };
 };
 export default usePickerSelection;

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

@@ -1,15 +1,16 @@
 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, PickerSelectAllType } from './types';
 type PickerStatics = {
     Item: typeof PickerItem;
     modes: typeof PickerModes;
     fieldTypes: typeof PickerFieldTypes;
     extractPickerItems: typeof extractPickerItems;
+    selectAllType: typeof PickerSelectAllType;
 };
 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, PickerSelectAllType };
 export { Picker };
 declare const _default: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>> & PickerStatics;
 export default _default;