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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.0-snapshot.6539",
+  "version": "7.39.0-snapshot.6546",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -32,6 +32,7 @@
     "pre-push": "npm run build:dev && npm run test",
     "docs:deploy": "./scripts/docs/deployDocs.sh",
     "docs:build": "node scripts/docs/buildDocs.js",
+    "docs:start": "(cd docuilib && yarn start)",
     "calendar:createMocks": "node scripts/createCalendarMockData.js",
     "snippets:build": "node scripts/generateSnippets.js",
     "release": "node ./scripts/release/release.js",

package/scripts/docs/buildDocsCommon.js

@@ -7,6 +7,7 @@ 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',
@@ -30,6 +31,9 @@ const VALID_COMPONENTS_CATEGORIES = [
 
 function buildDocs(apiFolders, componentsPreProcess) {
   let components = readComponentsFromApiFiles(apiFolders);
+
+  logStatistics(components);
+
   components = componentsPreProcess?.(components) ?? components;
   resetDocsDir();
   processComponents(components);
@@ -92,14 +96,22 @@ function processComponents(components) {
       content += `${buildOldDocs(component)}\n`;
     }
 
-
     let dirPath;
-    if (component.category === 'services') {
-      dirPath = `${SERVICES_DOCS_DIR}`;
-    } else {
-      const componentParentDir =
-        componentParentName || isParentComponent ? `/${componentParentName || componentName}` : '';
-      dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
+    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 (!fs.existsSync(dirPath)) {
@@ -125,6 +137,22 @@ 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`;
@@ -184,12 +212,10 @@ function buildOldDocs(component) {
   /* Snippet */
   if (component.snippet) {
     content += `### Usage\n`;
-    content += `<UILivePreview code={\`${component.snippet
+    content += `<UILivePreview componentName={"${component.name}"} 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/commons/Constants.d.ts

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

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, AccessibilityProps } from 'react-native';
+import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, TextProps, AccessibilityProps } from 'react-native';
 import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
 import { AnimatedImageProps } from '../animatedImage';
@@ -95,6 +95,7 @@ export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & Props
      * The label color
      */
     labelColor?: string;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -162,21 +163,14 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
-        /**
-         * Avatar colors to be used when useAutoColors is true
-         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        overlayType?: string | undefined;
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
@@ -230,6 +224,7 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * The label color
      */
     labelColor?: string | undefined;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -291,21 +286,14 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * Image props object
      */
     imageProps?: Partial<Omit<import("react-native").ImageProps, "source"> & Pick<import("react-native").ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & import("../..").RecorderProps & {
-        /**
-         * Avatar colors to be used when useAutoColors is true
-         */
         sourceTransformer?: ((props: any) => import("../image").ImageSourceType) | undefined;
         assetName?: string | undefined;
         assetGroup?: string | undefined;
         tintColor?: string | undefined;
-        supportRTL?: boolean | undefined; /**
-         * Background color for Avatar
-         */
+        supportRTL?: boolean | undefined;
         cover?: boolean | undefined;
         aspectRatio?: number | undefined;
-        overlayType?: string | undefined; /**
-         * Image props object
-         */
+        overlayType?: string | undefined;
         overlayIntensity?: import("../overlay").OverlayIntensityType | undefined;
         overlayColor?: string | undefined;
         customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
@@ -359,6 +347,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * The label color
      */
     labelColor?: string | undefined;
+    labelEllipsizeMode?: "middle" | "head" | "tail" | "clip" | undefined;
     /**
      * ribbon label to display on the avatar
      */

package/src/components/avatar/index.js

@@ -56,6 +56,7 @@ const Avatar = forwardRef((props, ref) => {
     useAutoColors,
     autoColorsConfig,
     containerStyle,
+    labelEllipsizeMode = 'clip',
     onPress,
     children
   } = themeProps;
@@ -178,7 +179,7 @@ const Avatar = forwardRef((props, ref) => {
   const Container = onPress ? TouchableOpacity : View;
   return <Container style={_containerStyle} ref={ref} testID={testID} onPress={onPress} accessible={!_isUndefined(onPress)} accessibilityLabel={'Avatar'} accessibilityRole={onPress ? 'button' : 'image'} hitSlop={onPress ? hitTargetPadding : undefined} {...accessibilityProps}>
       <View testID={`${testID}.container`} style={textContainerStyle}>
-        {!_isUndefined(text) && <Text numberOfLines={1} style={textStyle} testID={`${testID}.label`}>
+        {!_isUndefined(text) && <Text numberOfLines={1} ellipsizeMode={labelEllipsizeMode} style={textStyle} testID={`${testID}.label`}>
             {text}
           </Text>}
       </View>
@@ -194,7 +195,8 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: BorderRadiuses.br100
+    borderRadius: BorderRadiuses.br100,
+    overflow: 'hidden'
   },
   initialsContainerWithInset: {
     top: 1,

package/src/components/colorPicker/ColorPickerPreview.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { StyleSheet, TextInput, PixelRatio, I18nManager } from 'react-native';
+import { StyleSheet, TextInput, 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 = PixelRatio.getFontScale();
+  const fontScale = Constants.getFontScale();
   const value = Colors.isTransparent(text) ? '000000' : text;
   return <View style={[styles.preview, {
     backgroundColor: hex

package/src/components/hint/hint.api.json

@@ -159,13 +159,37 @@
             ],
             "items": [
               {
-                "title": "Left"
+                "title": "Left",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_top.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_bottom.png"
+                  }
+                ]
               },
               {
-                "title": "Center"
+                "title": "Center",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_top.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_bottom.png"
+                  }
+                ]
               },
               {
-                "title": "Right"
+                "title": "Right",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_top.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_bottom.png"
+                  }
+                ]
               }
             ],
             "title": "Alignment",
@@ -179,10 +203,20 @@
             ],
             "items": [
               {
-                "title": "None"
+                "title": "None",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_none.png"
+                  }
+                ]
               },
               {
-                "title": "Icon"
+                "title": "Icon",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_icon.png"
+                  }
+                ]
               }
             ],
             "title": "Accessories"

package/src/components/picker/PickerItemsList.js

@@ -15,7 +15,6 @@ 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 {
@@ -36,8 +35,7 @@ const PickerItemsList = props => {
     testID,
     showLoader,
     customLoaderElement,
-    renderCustomTopElement,
-    selectionStatus
+    renderCustomTopElement
   } = props;
   const context = useContext(PickerContext);
   const [wheelPickerValue, setWheelPickerValue] = useState(context.value ?? items?.[0]?.value);
@@ -132,14 +130,10 @@ 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/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' | 'items'> {
+interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }
@@ -9,8 +9,5 @@ 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, useMemo } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { PickerModes } from "../types";
 const usePickerSelection = props => {
   const {
@@ -11,8 +11,7 @@ const usePickerSelection = props => {
     pickerExpandableRef,
     getItemValue,
     setSearchValue,
-    mode,
-    items
+    mode
   } = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value);
   const [multiFinalValue, setMultiFinalValue] = useState(value);
@@ -44,20 +43,11 @@ 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,
-    setMultiFinalValue,
-    availableItems,
-    toggleAllItemsSelection
+    cancelSelect
   };
 };
 export default usePickerSelection;

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

@@ -1,16 +1,15 @@
 import React from 'react';
 import PickerItem from './PickerItem';
 import { extractPickerItems } from './PickerPresenter';
-import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectAllType } from './types';
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } 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, PickerSelectAllType };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
 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, PickerSelectAllType } from "./types";
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from "./types";
 const DEFAULT_DIALOG_PROPS = {
   bottom: true,
   width: '100%'
@@ -58,7 +58,6 @@ const Picker = React.forwardRef((props, ref) => {
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
-    selectionStatus,
     ...others
   } = themeProps;
   const {
@@ -102,9 +101,7 @@ const Picker = React.forwardRef((props, ref) => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect,
-    availableItems,
-    toggleAllItemsSelection
+    cancelSelect
   } = usePickerSelection({
     migrate,
     value,
@@ -113,8 +110,7 @@ const Picker = React.forwardRef((props, ref) => {
     getItemValue,
     topBarProps,
     setSearchValue,
-    mode,
-    items
+    mode
   });
   const {
     label,
@@ -158,11 +154,9 @@ const Picker = React.forwardRef((props, ref) => {
       getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
-      selectionLimit,
-      availableItems,
-      toggleAllItemsSelection
+      selectionLimit
     };
-  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, availableItems, toggleAllItemsSelection]);
+  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting]);
   const renderPickerItem = useCallback((item, index) => {
     return <PickerItem key={`${index}-${item.value}`} {...item} />;
   }, []);
@@ -207,7 +201,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} selectionStatus={selectionStatus}>
+    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement}>
         {filteredItems}
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, filteredItems, useSafeArea, useWheelPicker, items, showLoader]);
@@ -227,8 +221,6 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
-//@ts-ignore
-Picker.selectAllType = PickerSelectAllType;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectAllType };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
 export { Picker }; // For tests
 export default Picker;

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

@@ -4,8 +4,6 @@ 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"
@@ -15,10 +13,6 @@ export declare enum PickerFieldTypes {
     filter = "filter",
     settings = "settings"
 }
-export declare enum PickerSelectAllType {
-    button = "button",
-    checkbox = "checkbox"
-}
 export type PickerSingleValue = string | number;
 export type PickerMultiValue = PickerSingleValue[];
 export type PickerValue = PickerSingleValue | PickerMultiValue | undefined;
@@ -153,53 +147,6 @@ type PickerExpandableOverlayProps = {
      */
     enableModalBlur?: boolean;
 };
-interface PickerSelectionStatusLabelOptions {
-    selectedCount: number;
-    value: PickerMultiValue;
-    isAllSelected: boolean;
-}
-export type ButtonSelectionStatus = {
-    /**
-     * Select all element type
-     */
-    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 PickerSelectionStatusProps = {
-    /**
-     * A function that related data to show in the label
-     */
-    getLabel?: (data: PickerSelectionStatusLabelOptions) => string;
-    /**
-     * Custom container style
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * 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'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
     /**
      * Use dialog instead of modal picker
@@ -246,10 +193,6 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & Picke
      * Render custom top element
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
-    /**
-     *
-     */
-    selectionStatus?: PickerSelectionStatusProps;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -343,10 +286,8 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     isMultiMode: boolean;
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
-    availableItems: PickerMultiValue;
-    toggleAllItemsSelection?: (selectAll: boolean) => void;
 }
-export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'selectionStatus' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
+export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
     items?: {
         value: any;
         label: any;

package/src/components/picker/types.js

@@ -10,11 +10,6 @@ export let PickerFieldTypes = /*#__PURE__*/function (PickerFieldTypes) {
   PickerFieldTypes["settings"] = "settings";
   return PickerFieldTypes;
 }({});
-export let PickerSelectAllType = /*#__PURE__*/function (PickerSelectAllType) {
-  PickerSelectAllType["button"] = "button";
-  PickerSelectAllType["checkbox"] = "checkbox";
-  return PickerSelectAllType;
-}({});
 
 // TODO: Remove type
 // type PickerValueDeprecated = {value: string | number; label: string};

package/src/components/test.api.json

@@ -285,38 +285,6 @@
             "description": "html:<h2>Title</h2><p>This is a html content</p><ul><li>item 1</li><li>item 2</li></ul>"
           }
         ]
-      },
-      {
-        "title": "Code",
-        "sections": [
-          {
-            "title": "Usage",
-            "type": "usage"
-          },
-          {
-            "type": "info"
-          },
-          {
-            "type": "tip"
-          },
-          {
-            "type": "banner",
-            "title": "NOTE",
-            "description": "This is an interesting information"
-          },
-          {
-            "type": "banner",
-            "title": "Banner",
-            "description": "This is some massage to the user",
-            "color": "pink",
-            "icon": ""
-          },
-          {
-            "type": "props",
-            "title": "API",
-            "description": "This is the list of additional props for the Text component"
-          }
-        ]
       }
     ]
   }

package/src/components/timeline/timeline.api.json

@@ -29,30 +29,18 @@
     }
   ],
   "snippet": [
-    "<Timeline ",
-    "  topLine={{",
-    "    state: Timeline.states.ERROR",
-    "  }$1}",
-    "  bottomLine={{",
-    "    type: Timeline.lineTypes.DASHED,",
-    "    color: Colors.orange40",
-    "  }$2}",
-    "  point={{",
-    "    type: Timeline.pointTypes.OUTLINE,",
-    "    color: Colors.orange40,",
-    "    icon: Assets.icons.demo.camera,",
-    "    anchorRef: alignToTitle ? titleRef : undefined",
-    "  }$3}",
+    "<Timeline",
+    "  topLine={{type: Timeline.lineTypes.DASHED}}",
+    "  bottomLine={{state: Timeline.states.SUCCESS}}",
+    "  point={{state: Timeline.states.SUCCESS}}",
     ">",
-    "    <View flex centerH paddingH-20>",
-    "      <Text text70 dark10 ref={titleRef}>",
-    "        {title}",
-    "      </Text>",
-    "      <Text dark40>",
-    "        {description}",
-    "      </Text>",
-    "    </View>",
-    "</Timeline>"
+    "   <View padding-20 bg-grey60 br30>",
+    "     <Text text70BO>Title</Text>",
+    "     <View marginT-5 padding-8 bg-white br30>",
+    "       <Text>Description</Text>",
+    "     </View>",
+    "   </View>",
+    " </Timeline>"
   ],
   "docs": {
     "hero": {
@@ -138,29 +126,7 @@
                 "title": "Current",
                 "content": [
                   {
-                    "props": {
-                      "state": "current",
-                      "point": {
-                        "type": {
-                          "type": "bullet"
-                        }
-                      },
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
-                  },
-                  {
-                    "props": {
-                      "point": {
-                        "type": {
-                          "type": "bullet",
-                          "color": "#116DFF"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT}} bottomLine={{state: Timeline.states.CURRENT}} point={{state: Timeline.states.CURRENT}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "state: current"
@@ -169,19 +135,7 @@
                 "title": "Next",
                 "content": [
                   {
-                    "props": {
-                      "state": "next",
-                      "point": {
-                        "type": {
-                          "type": "bullet"
-                        }
-                      },
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline topLine={{state: Timeline.states.NEXT}} bottomLine={{state: Timeline.states.NEXT}} point={{state: Timeline.states.NEXT, type: Timeline.pointTypes.CIRCLE}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "state: next"
@@ -190,19 +144,7 @@
                 "title": "Error",
                 "content": [
                   {
-                    "props": {
-                      "state": "error",
-                      "point": {
-                        "type": {
-                          "type": "bullet"
-                        }
-                      },
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline topLine={{state: Timeline.states.ERROR}} bottomLine={{state: Timeline.states.ERROR}} point={{state: Timeline.states.ERROR}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "state: error"
@@ -211,19 +153,7 @@
                 "title": "Success",
                 "content": [
                   {
-                    "props": {
-                      "state": "success",
-                      "point": {
-                        "type": {
-                          "type": "bullet"
-                        }
-                      },
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline topLine={{state: Timeline.states.SUCCESS}} bottomLine={{state: Timeline.states.SUCCESS}} point={{state: Timeline.states.SUCCESS}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "state: success"
@@ -238,15 +168,30 @@
             "items": [
               {
                 "title": "Bullet",
-                "description": "type: bullet"
+                "description": "type: bullet",
+                "content": [
+                  {
+                    "snippet": "<Timeline point={{type: Timeline.pointTypes.BULLET}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ]
               },
               {
                 "title": "Circle",
-                "description": "type: circle"
+                "description": "type: circle",
+                "content": [
+                  {
+                    "snippet": "<Timeline point={{state: Timeline.states.NEXT, type: Timeline.pointTypes.CIRCLE}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ]
               },
               {
                 "title": "Outline",
-                "description": "type: outline"
+                "description": "type: outline",
+                "content": [
+                  {
+                    "snippet": "<Timeline point={{type: Timeline.pointTypes.OUTLINE}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ]
               }
             ],
             "title": "Point",
@@ -260,14 +205,7 @@
                 "title": "Text",
                 "content": [
                   {
-                    "props": {
-                      "state": "current",
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline point={{label: '1'}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "text: “1”"
@@ -276,20 +214,18 @@
                 "title": "Icon",
                 "content": [
                   {
-                    "props": {
-                      "state": "current",
-                      "bottomLine": {
-                        "type": {
-                          "type": "dashed"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.icons.checkSmall}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "icon: Assets.icons.general.checkmarkSmall"
               },
               {
                 "title": "Icon without background",
+                "content": [
+                  {
+                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.icons.search, removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ],
                 "description": "icon: Assets.icons.general.favorite, removeIconBackground: true"
               }
             ],
@@ -301,10 +237,20 @@
             "items": [
               {
                 "title": "Solid",
+                "content": [
+                  {
+                    "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ],
                 "description": "type: solid"
               },
               {
                 "title": "Dashed",
+                "content": [
+                  {
+                    "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT, type: Timeline.lineTypes.DASHED}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ],
                 "description": "type: dashed"
               }
             ],
@@ -317,6 +263,11 @@
             "items": [
               {
                 "title": "Entry",
+                "content": [
+                  {
+                    "snippet": "<Timeline topLine={{state: Timeline.states.NEXT, entry: true}} bottomLine={{state: Timeline.states.NEXT, entry: true}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ],
                 "description": "entry: true"
               }
             ],

package/src/incubator/slider/Thumb.js

@@ -7,13 +7,20 @@ import View from "../../components/view";
 import { Constants } from "../../commons/new";
 const SHADOW_RADIUS = 4;
 const THUMB_SIZE = 24;
+const THUMB_ACCESSIBLE_HITSLOP = Math.max(0, 48 - THUMB_SIZE) / 2;
+const DEFAULT_THUMB_HIT_SLOP = {
+  top: THUMB_ACCESSIBLE_HITSLOP,
+  bottom: THUMB_ACCESSIBLE_HITSLOP,
+  left: THUMB_ACCESSIBLE_HITSLOP,
+  right: THUMB_ACCESSIBLE_HITSLOP
+};
 const Thumb = props => {
   const {
     disabled,
     disableActiveStyling,
     activeStyle,
     defaultStyle,
-    hitSlop,
+    hitSlop = DEFAULT_THUMB_HIT_SLOP,
     onSeekStart,
     onSeekEnd,
     start,

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

@@ -104,7 +104,7 @@
                   {
                     "props": {
                       "visible": true,
-                      "message": "\"Mika Or\" was saved to contacts."
+                      "message": "Mika Or was saved to contacts."
                     }
                   }
                 ]

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, PickerSelectAllType } from './components/picker';
+export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } 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,7 +166,6 @@ var _exportNames = {
   RenderCustomModalProps: true,
   PickerItemsListProps: true,
   PickerMethods: true,
-  PickerSelectAllType: true,
   PieChart: true,
   PieChartSegmentProps: true,
   ProgressBar: true,
@@ -1111,12 +1110,6 @@ Object.defineProperty(exports, "PickerSearchStyle", {
     return _picker().PickerSearchStyle;
   }
 });
-Object.defineProperty(exports, "PickerSelectAllType", {
-  enumerable: true,
-  get: function () {
-    return _picker().PickerSelectAllType;
-  }
-});
 Object.defineProperty(exports, "PickerValue", {
   enumerable: true,
   get: function () {

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

@@ -1,8 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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>;
-}