react-native-ui-lib 7.39.0-snapshot.6571 → 7.39.0-snapshot.6574

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.0-snapshot.6571",
+  "version": "7.39.0-snapshot.6574",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -39,8 +39,7 @@
     "releaseDemo": "./scripts/release/releaseDemo.sh",
     "releaseDocs": "./scripts/release/releaseDocs.sh",
     "releaseEslint": "./scripts/release/releaseEslint.sh",
-    "releaseNative": "./scripts/release/releaseNative.sh",
-    "update-web-assets": "node scripts/assets/extract-dimensions.js"
+    "releaseNative": "./scripts/release/releaseNative.sh"
   },
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",

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

@@ -52,11 +52,9 @@ const Icon = forwardRef((props, ref) => {
     }
     return source;
   }, [source, assetGroup, assetName]);
-  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 renderImage = () => <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/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

@@ -45,7 +45,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, {

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

@@ -8,8 +8,8 @@ import { Colors } from "../../style";
 import { Constants, asBaseComponent, forwardRef } from "../../commons/new";
 import View from "../view";
 import Image from "../image";
-import Assets from "../../assets";
 const GRADIENT_WIDTH = 76;
+const defaultImage = () => require("./assets/gradientOverlay.png");
 
 /**
  * @description: Scrollable container with animated gradient overlay for horizontal scroll
@@ -175,7 +175,7 @@ class ScrollBar extends Component {
       right: !left ? gradientMargins : undefined,
       left: left ? gradientMargins : undefined
     }}>
-        <Image source={gradientImage || Assets.internal.images.gradientOverlay} style={{
+        <Image source={gradientImage || defaultImage()} style={{
         width: gradientWidth,
         height: heightToUse,
         tintColor: gradientColor,

package/src/components/textField/ClearButton.js

@@ -54,7 +54,7 @@ const ClearButton = ({
     onClear?.();
   };
   return <View reanimated style={style} testID={`${testID}.container`}>
-      <Button link iconSource={Assets.internal.icons.xFlat} iconStyle={styles.clearIcon} onPress={clear} hitSlop={hitSlop} accessible={hasValue} accessibilityLabel={'clear'} testID={testID} />
+      <Button link iconSource={Assets.icons.xFlat} iconStyle={styles.clearIcon} onPress={clear} hitSlop={hitSlop} accessible={hasValue} accessibilityLabel={'clear'} testID={testID} />
     </View>;
 };
 const styles = StyleSheet.create({

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

@@ -214,19 +214,19 @@
                 "title": "Icon",
                 "content": [
                   {
-                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.internal.icons.checkSmall}}><View style={{height: 88}}/></Timeline>"
+                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.icons.checkSmall}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
-                "description": "icon: Assets.internal.icons.general.checkmarkSmall"
+                "description": "icon: Assets.icons.general.checkmarkSmall"
               },
               {
                 "title": "Icon without background",
                 "content": [
                   {
-                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.internal.icons.search, removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
+                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.icons.search, removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
-                "description": "icon: Assets.internal.icons.general.favorite, removeIconBackground: true"
+                "description": "icon: Assets.icons.general.favorite, removeIconBackground: true"
               }
             ],
             "name": "Point Accessories"

package/src/components/toast/index.js

@@ -239,7 +239,7 @@ export default class Toast extends PureBaseComponent {
         <Button
           link
           iconStyle={{tintColor: textColor}}
-          iconSource={Assets.internal.icons.x}
+          iconSource={Assets.icons.x}
           onPress={this.onDismiss}
           paddingR-20
           accessibilityLabel={'dismiss'}

package/src/components/wizard/WizardStates.js

@@ -1,5 +1,6 @@
 import Colors from "../../style/colors";
-import Assets from "../../assets";
+const checkMarkSmall = require("./assets/checkMarkSmall.png");
+const exclamationSmall = require("./assets/exclamationSmall.png");
 export const StatesConfig = {
   enabled: {
     color: Colors.$textNeutralHeavy,
@@ -13,7 +14,7 @@ export const StatesConfig = {
   error: {
     color: Colors.$iconDangerLight,
     circleColor: Colors.$outlineDanger,
-    icon: Assets.internal.icons.exclamationSmall,
+    icon: exclamationSmall,
     enabled: true,
     accessibilityInfo: 'Validation Error'
   },
@@ -26,7 +27,7 @@ export const StatesConfig = {
   completed: {
     color: Colors.$iconNeutral,
     circleColor: Colors.$outlineDisabled,
-    icon: Assets.internal.icons.checkMarkSmall,
+    icon: checkMarkSmall,
     enabled: true,
     accessibilityInfo: 'Completed'
   },

package/src/incubator/dialog/useDialogContent.js

@@ -23,7 +23,7 @@ const useDialogContent = props => {
     }
     return <View left centerV pointerEvents={'box-none'}>
         <TouchableOpacity paddingB-s2 row onPress={close}>
-          <Icon source={Assets.internal.icons.xMedium} tintColor={Colors.white} {...closeButtonProps?.iconProps} />
+          <Icon source={Assets.icons.xMedium} tintColor={Colors.white} {...closeButtonProps?.iconProps} />
           <Text recorderTag={'unmask'} text70BO white {...closeButtonProps?.labelProps}>
             {closeButtonProps?.label || 'Close'}
           </Text>

package/src/assets/internal/icons/index.web.js

@@ -1,38 +0,0 @@
-export const icons = {
-  get check() {
-    return {uri: require('./check.png'), width: 21, height: 15};
-  },
-  get checkMarkSmall() {
-    return {uri: require('./checkMarkSmall.png'), width: 16, height: 16};
-  },
-  get checkSmall() {
-    return {uri: require('./checkSmall.png'), width: 24, height: 24};
-  },
-  get chevronDown() {
-    return {uri: require('./chevronDown.png'), width: 16, height: 16};
-  },
-  get exclamationSmall() {
-    return {uri: require('./exclamationSmall.png'), width: 16, height: 16};
-  },
-  get minusSmall() {
-    return {uri: require('./minusSmall.png'), width: 16, height: 16};
-  },
-  get plusSmall() {
-    return {uri: require('./plusSmall.png'), width: 16, height: 16};
-  },
-  get search() {
-    return {uri: require('./search.png'), width: 24, height: 24};
-  },
-  get x() {
-    return {uri: require('./x.png'), width: 17, height: 16};
-  },
-  get xFlat() {
-    return {uri: require('./xFlat.png'), width: 16, height: 16};
-  },
-  get xMedium() {
-    return {uri: require('./xMedium.png'), width: 24, height: 24};
-  },
-  get xSmall() {
-    return {uri: require('./xSmall.png'), width: 16, height: 16};
-  }
-};

package/src/assets/internal/images/index.js

@@ -1,26 +0,0 @@
-export const images = {
-  get gradient() {
-    return require('./gradient.png');
-  },
-  get gradientOverlay() {
-    return require('./gradientOverlay.png');
-  },
-  get gradientOverlayHigh() {
-    return require('./gradientOverlayHigh.png');
-  },
-  get gradientOverlayLow() {
-    return require('./gradientOverlayLow.png');
-  },
-  get gradientOverlayMedium() {
-    return require('./gradientOverlayMedium.png');
-  },
-  get hintTipMiddle() {
-    return require('./hintTipMiddle.png');
-  },
-  get hintTipSide() {
-    return require('./hintTipSide.png');
-  },
-  get transparentSwatch() {
-    return require('./transparentSwatch.png');
-  }
-};

package/src/assets/internal/images/index.web.js

@@ -1,26 +0,0 @@
-export const images = {
-  get gradient() {
-    return {uri: require('./gradient.png'), width: 56, height: 2};
-  },
-  get gradientOverlay() {
-    return {uri: require('./gradientOverlay.png'), width: 76, height: 48};
-  },
-  get gradientOverlayHigh() {
-    return {uri: require('./gradientOverlayHigh.png'), width: 1, height: 297};
-  },
-  get gradientOverlayLow() {
-    return {uri: require('./gradientOverlayLow.png'), width: 1, height: 297};
-  },
-  get gradientOverlayMedium() {
-    return {uri: require('./gradientOverlayMedium.png'), width: 1, height: 297};
-  },
-  get hintTipMiddle() {
-    return {uri: require('./hintTipMiddle.png'), width: 20, height: 7};
-  },
-  get hintTipSide() {
-    return {uri: require('./hintTipSide.png'), width: 20, height: 24};
-  },
-  get transparentSwatch() {
-    return {uri: require('./transparentSwatch.png'), width: 100, height: 100};
-  }
-};

package/src/assets/internal/index.d.ts

@@ -1,4 +0,0 @@
-export declare const internal: {
-    readonly icons: any;
-    readonly images: any;
-};

package/src/assets/internal/index.js

@@ -1,8 +0,0 @@
-export const internal = {
-  get icons() {
-    return require("./icons").icons;
-  },
-  get images() {
-    return require("./images").images;
-  }
-};