react-native-ui-lib 7.39.0 → 7.39.1-snapshot.6732

package/src/components/button/button.api.json

@@ -2,13 +2,8 @@
   "name": "Button",
   "category": "controls",
   "description": "Customizable button component that handles press events",
-  "extends": [
-    "basic/TouchableOpacity"
-  ],
-  "modifiers": [
-    "margin",
-    "background"
-  ],
+  "extends": ["basic/TouchableOpacity"],
+  "modifiers": ["margin", "background"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx",
   "images": [
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Button/Button%20Sizes.png?raw=true",
@@ -169,7 +164,11 @@
     }
   ],
   "snippet": [
-    "<Button label={'Press'$1} size={Button.sizes.medium$2} backgroundColor={Colors.red30$3}/>"
+    "<View flex center gap-s5>",
+    "<Button label={'Press'} backgroundColor={Colors.red30}/>",
+    "<Button label={'Press'} outline size={Button.sizes.medium}/>",
+    "<Button label={'Press'}  iconSource={Assets.icons.demo.star}/>",
+    "</View>"
   ],
   "docs": {
     "hero": {
@@ -189,10 +188,7 @@
         "sections": [
           {
             "type": "table",
-            "columns": [
-              "Type",
-              "Component"
-            ],
+            "columns": ["Type", "Component"],
             "items": [
               {
                 "title": "Main Button",
@@ -259,10 +255,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Primary",
@@ -289,11 +282,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Main",
@@ -355,11 +344,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Active",
@@ -404,11 +389,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Active",
@@ -453,11 +434,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Active",
@@ -502,10 +479,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Large",
@@ -540,10 +514,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Icon prefix",
@@ -574,10 +545,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Primary",
@@ -603,11 +571,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Main",
@@ -643,11 +607,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Active",
@@ -680,11 +640,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Primary",
-              "Secondary"
-            ],
+            "columns": ["Property", "Primary", "Secondary"],
             "items": [
               {
                 "title": "Active",
@@ -732,10 +688,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Main",
@@ -769,10 +722,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Regular",
@@ -797,11 +747,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Regular",
-              "Small (bodyBoldSmall)"
-            ],
+            "columns": ["Property", "Regular", "Small (bodyBoldSmall)"],
             "items": [
               {
                 "title": "Icon prefix",
@@ -838,10 +784,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Main",
@@ -876,10 +819,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Component"
-            ],
+            "columns": ["Property", "Component"],
             "items": [
               {
                 "title": "Active",
@@ -914,7 +854,7 @@
         ]
       },
       {
-        "title": "UX",
+        "title": "UX Guidelines",
         "sections": [
           {
             "type": "list",

package/src/components/card/index.js

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

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

@@ -103,7 +103,10 @@ declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
         accessible: boolean;
         accessibilityLabel: string;
         accessibilityRole: string;
-        accessibilityStates: string[] | undefined;
+        accessibilityState: {
+            disabled: boolean | undefined;
+            checked: boolean | undefined;
+        };
     };
     animateCheckbox(value: CheckboxProps['value']): void;
     setValidation(newValue: boolean): void;

package/src/components/checkbox/index.js

@@ -60,16 +60,18 @@ class Checkbox extends Component {
   }
   getAccessibilityProps() {
     const {
-      accessibilityLabel,
+      accessibilityLabel = 'checkbox',
       disabled,
       value
     } = this.props;
-    const checkedState = value ? 'checked' : 'unchecked';
     return {
       accessible: true,
-      accessibilityLabel: accessibilityLabel ? `${accessibilityLabel} ${checkedState}` : `${checkedState}`,
+      accessibilityLabel,
       accessibilityRole: 'checkbox',
-      accessibilityStates: disabled ? ['disabled'] : undefined
+      accessibilityState: {
+        disabled,
+        checked: value
+      }
     };
   }
   animateCheckbox(value) {
@@ -167,7 +169,7 @@ class Checkbox extends Component {
         }]}>
             <AnimatedIcon style={[this.styles.selectedIcon, {
             transform: this.animationStyle.transform
-          }]} source={indeterminate ? Assets.icons.minusSmall : selectedIcon || Assets.icons.checkSmall} testID={`${testID}.selected`} tintColor={this.getTintColor()} />
+          }]} source={indeterminate ? Assets.internal.icons.minusSmall : selectedIcon || Assets.internal.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.icons.x,
+  dismissIcon = Assets.internal.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={removeIcon} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
+    marginR-s2 marginB-s2 dismissIcon={Assets.internal.icons.xSmall} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
   };
   const chipList = useMemo(() => {
     return <>

package/src/components/colorPicker/ColorPickerDialog.js

@@ -116,7 +116,7 @@ const ColorPickerDialog = props => {
       <ColorPickerDialogSliders keyboardHeight={keyboardHeight} color={color} onSliderValueChange={updateColor} migrate={migrate} />
     </Dialog>;
 };
-ColorPickerDialog.displayName = 'ColorPicker';
+ColorPickerDialog.displayName = 'ColorPickerDialog';
 export default asBaseComponent(ColorPickerDialog);
 const styles = StyleSheet.create({
   dialog: {

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.icons.x} iconStyle={{
+      <Button link iconSource={Assets.internal.icons.x} iconStyle={{
       tintColor: Colors.$iconDefault
     }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} />
-      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
+      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.internal.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, 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/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.icons.plusSmall} onPress={showDialog} testID={`${testID}-button`} accessibilityLabel={accessibilityLabels?.addButton} />
+        <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} />
       </View>
       <ColorPickerDialog {...props} key={initialColor} visible={show} onDismiss={hideDialog} accessibilityLabels={{
       dismissButton: accessibilityLabels?.dismissButton,

package/src/components/colorSwatch/index.js

@@ -6,7 +6,6 @@ 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;
@@ -141,10 +140,10 @@ class ColorSwatch extends PureComponent {
       height: size,
       borderRadius: size / 2
     }, style]} onLayout={this.onLayout} {...this.getAccessibilityInfo()}>
-        {Colors.isTransparent(this.color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
+        {Colors.isTransparent(this.color) && <Image source={Assets.internal.images.transparentSwatch} style={this.styles.transparentImage} resizeMode={'cover'} />}
         {unavailable ? <View style={[this.styles.unavailable, {
         backgroundColor: tintColor
-      }]} /> : <Animated.Image source={Assets.icons.check} style={{
+      }]} /> : <Animated.Image source={Assets.internal.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.icons.x} iconStyle={{
+        <Button link iconSource={Assets.internal.icons.x} iconStyle={{
         tintColor: Colors.$iconDefault
       }} testID={`${testID}.cancel`} {...cancelButtonProps} onPress={toggleExpandableOverlay} />
-        <Button link iconSource={Assets.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
+        <Button link iconSource={Assets.internal.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
       </View>;
   };
   const renderDateTimePicker = useCallback(() => {

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/hint/index.js

@@ -6,6 +6,7 @@ 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";
@@ -14,8 +15,6 @@ 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;
@@ -125,7 +124,7 @@ const Hint = props => {
     }
   };
   const renderHintTip = () => {
-    const source = useSideTip ? sideTip : middleTip;
+    const source = useSideTip ? Assets.internal.images.hintTipSide : Assets.internal.images.hintTipMiddle;
     const flipVertically = position === HintPositions.TOP;
     const flipHorizontally = targetAlignmentOnScreen === TargetAlignments.RIGHT;
     const flipStyle = {

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

@@ -25,7 +25,10 @@ export type IconProps = Omit<RNImageProps, 'source' | 'tintColor'> & MarginModif
     /**
      * the icon size
      */
-    size?: number;
+    size?: number | {
+        width: number;
+        height: number;
+    };
     /**
      * whether the icon should flip horizontally on RTL
      */
@@ -52,7 +55,10 @@ declare const _default: React.ForwardRefExoticComponent<Omit<RNImageProps, "sour
     /**
      * the icon size
      */
-    size?: number | undefined;
+    size?: number | {
+        width: number;
+        height: number;
+    } | undefined;
     /**
      * whether the icon should flip horizontally on RTL
      */
@@ -78,7 +84,10 @@ declare const _default: React.ForwardRefExoticComponent<Omit<RNImageProps, "sour
     /**
      * the icon size
      */
-    size?: number | undefined;
+    size?: number | {
+        width: number;
+        height: number;
+    } | undefined;
     /**
      * whether the icon should flip horizontally on RTL
      */

package/src/components/icon/index.js

@@ -12,10 +12,9 @@ import SvgImage from "../svgImage";
  * @extendsLink: https://reactnative.dev/docs/image
  */
 
-const DEFAULT_WEB_ICON_SIZE = 16;
 const Icon = forwardRef((props, ref) => {
   const {
-    size = Constants.isWeb ? DEFAULT_WEB_ICON_SIZE : undefined,
+    size,
     tintColor,
     style,
     supportRTL,
@@ -30,10 +29,6 @@ const Icon = forwardRef((props, ref) => {
   const {
     margins
   } = modifiers;
-  const iconSize = size ? {
-    width: size,
-    height: size
-  } : undefined;
   const shouldFlipRTL = supportRTL && Constants.isRTL;
   const getBadgeStyling = () => {
     const containerStyle = badgeProps?.containerStyle;
@@ -46,15 +41,29 @@ const Icon = forwardRef((props, ref) => {
     badgePosition.top = position;
     return [badgePosition, containerStyle];
   };
+  const iconSize = useMemo(() => {
+    if (typeof size === 'number') {
+      return {
+        width: size,
+        height: size
+      };
+    }
+    if (typeof size === 'object') {
+      return size;
+    }
+    return undefined;
+  }, [size]);
   const iconSource = useMemo(() => {
     if (!isUndefined(assetName)) {
       return getAsset(assetName, assetGroup);
     }
     return source;
   }, [source, assetGroup, assetName]);
-  const renderImage = () => <Image accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others} ref={ref} source={iconSource} style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {
-    tintColor
-  }, style]} />;
+  const renderImage = () => {
+    return <Image accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others} ref={ref} source={iconSource} style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {
+      tintColor
+    }, style]} />;
+  };
   const renderSvg = () => <SvgImage fsTagName={recorderTag} data={source} {...iconSize} {...props} />;
   if (typeof source === 'string' && isBase64ImageContent(source) && Constants.isWeb) {
     return renderImage();

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

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
 import { Image as RNImage, ImageProps as RNImageProps, ImageBackgroundProps, NativeSyntheticEvent, ImageErrorEventData } from 'react-native';
 import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
+import { ComponentStatics } from '../../typings/common';
 import { RecorderProps } from '../../typings/recorderTypes';
 import { OverlayTypeType, OverlayIntensityType } from '../overlay';
-import { ComponentStatics } from 'src/typings/common';
 export type ImageSourceType = string | RNImageProps['source'];
 export type ImageProps = Omit<RNImageProps, 'source'> & Pick<ImageBackgroundProps, 'imageStyle'> & MarginModifiers & RecorderProps & {
     /**

package/src/components/modal/TopBar.js

@@ -21,7 +21,7 @@ class TopBar extends Component {
   static displayName = 'Modal.TopBar';
   static defaultProps = {
     doneLabel: 'Save',
-    cancelIcon: Assets.icons.x,
+    cancelIcon: Assets.internal.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.icons.x"
+      "default": "Assets.internal.icons.x"
     },
     {"name": "onCancel", "type": "(props?: any) => void", "description": "Cancel action callback"},
     {