@hero-design/rn 7.10.1 → 7.10.2

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-@hero-design/rn:build: cache hit, replaying output 39d9cfb732804f77
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-@hero-design/rn:build: created lib/index.js, es/index.js in 19.1s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly
+@hero-design/rn:build: cache hit, replaying output f95bf09896acda51
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: created lib/index.js, es/index.js in 18.9s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/es/index.js

@@ -3443,10 +3443,10 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
     containerMarginVertical: theme.space.small,
-    errorContainerMarginLeft: theme.space.medium,
     errorContainerMarginRight: theme.space.xsmall,
     errorMarginLeft: theme.space.xsmall,
-    maxLengthLabelMarginLeft: theme.space.xsmall
+    maxLengthLabelMarginLeft: theme.space.xsmall,
+    errorAndHelpTextContainerPaddingLeft: theme.space.medium
   };
   var fontSizes = {
     text: theme.fontSizes.medium,
@@ -18372,7 +18372,6 @@ var StyledAsteriskLabelInsideTextInput = index$5(Typography.Text)(function (_ref
 var StyledErrorContainer = index$5(View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
-    marginLeft: theme.__hd__.textInput.space.errorContainerMarginLeft,
     marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
     flexDirection: 'row',
     alignItems: 'center',
@@ -18404,8 +18403,7 @@ var StyledMaxLengthMessage = index$5(Typography.Text)(function (_ref9) {
 var StyledHelperText = index$5(Typography.Text)(function (_ref10) {
   var theme = _ref10.theme;
   return {
-    fontSize: theme.__hd__.textInput.fontSizes.error,
-    marginLeft: theme.__hd__.textInput.space.errorMarginLeft
+    fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
 var StyledTextInput = index$5(TextInput$1)(function (_ref11) {
@@ -18445,15 +18443,20 @@ var StyledTextInputAndLabelContainer = index$5(View)(function () {
     flexGrow: 2
   };
 });
-var StyledErrorAndHelpTextContainer = index$5(View)(function () {
+var StyledErrorAndHelpTextContainer = index$5(View)(function (_ref14) {
+  var theme = _ref14.theme;
+  return {
+    paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft
+  };
+});
+var StyledErrorAndMaxLengthContainer = index$5(View)(function () {
   return {
-    flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between'
   };
 });
 
-var _excluded$1 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "maxLength", "helpText", "value"];
+var _excluded$1 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "maxLength", "helpText", "value", "defaultValue"];
 var getVariant = function getVariant(_ref) {
   var disabled = _ref.disabled,
       error = _ref.error,
@@ -18485,6 +18488,8 @@ var getVariant = function getVariant(_ref) {
 };
 
 var TextInput = function TextInput(_ref2) {
+  var _ref3;
+
   var label = _ref2.label,
       prefix = _ref2.prefix,
       suffix = _ref2.suffix,
@@ -18500,12 +18505,13 @@ var TextInput = function TextInput(_ref2) {
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
       maxLength = _ref2.maxLength,
       helpText = _ref2.helpText,
-      _ref2$value = _ref2.value,
-      value = _ref2$value === void 0 ? '' : _ref2$value,
+      value = _ref2.value,
+      defaultValue = _ref2.defaultValue,
       nativeProps = _objectWithoutProperties$1(_ref2, _excluded$1);
 
   var textInputReference = useRef(null);
-  var isEmptyValue = value.length === 0;
+  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
+  var isEmptyValue = displayText.length === 0;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -18585,13 +18591,14 @@ var TextInput = function TextInput(_ref2) {
 
       (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
     },
+    defaultValue: defaultValue,
     placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
   }))), typeof suffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     intent: disabled ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: suffix,
     size: "xsmall"
-  }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, error && /*#__PURE__*/React.createElement(StyledErrorContainer, null, /*#__PURE__*/React.createElement(Icon, {
+  }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React.createElement(StyledErrorAndMaxLengthContainer, null, error && /*#__PURE__*/React.createElement(StyledErrorContainer, null, /*#__PURE__*/React.createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
     size: "xsmall",
@@ -18601,7 +18608,7 @@ var TextInput = function TextInput(_ref2) {
   }, error)), shouldShowMaxLength && /*#__PURE__*/React.createElement(StyledMaxLengthMessage, {
     themeVariant: variant,
     fontSize: "small"
-  }, value.length, "/", maxLength), helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText)));
+  }, displayText.length, "/", maxLength)), helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText)));
 };
 
 function MultiSelect(_ref) {
@@ -18612,7 +18619,6 @@ function MultiSelect(_ref) {
       label = _ref.label,
       footerLabel = _ref.footerLabel,
       onConfirm = _ref.onConfirm;
-  var theme = useTheme$1();
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18633,23 +18639,16 @@ function MultiSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayedValue,
-    onPressIn: function onPressIn() {
-      return setOpen(true);
-    },
-    editable: false // when input is not editable on Android, the text color is gray
-    // hence, adding this to make the text color the same as iOS
-    ,
-    textStyle: {
-      color: theme.colors.text
-    },
     suffix: "arrow-down",
     multiline: true,
     style: style,
     testID: testID
-  }), /*#__PURE__*/React.createElement(BottomSheet, {
+  })), /*#__PURE__*/React.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -18719,7 +18718,6 @@ var SingleSelect = function SingleSelect(_ref) {
       style = _ref.style,
       label = _ref.label,
       onConfirm = _ref.onConfirm;
-  var theme = useTheme$1();
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18738,23 +18736,16 @@ var SingleSelect = function SingleSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayedValue,
-    onPressIn: function onPressIn() {
-      return setOpen(true);
-    },
-    editable: false // when input is not editable on Android, the text color is gray
-    // hence, adding this to make the text color the same as iOS
-    ,
-    textStyle: {
-      color: theme.colors.text
-    },
     suffix: "arrow-down",
     multiline: true,
     style: style,
     testID: testID
-  }), /*#__PURE__*/React.createElement(BottomSheet, {
+  })), /*#__PURE__*/React.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);

package/lib/index.js

@@ -3470,10 +3470,10 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
     containerMarginVertical: theme.space.small,
-    errorContainerMarginLeft: theme.space.medium,
     errorContainerMarginRight: theme.space.xsmall,
     errorMarginLeft: theme.space.xsmall,
-    maxLengthLabelMarginLeft: theme.space.xsmall
+    maxLengthLabelMarginLeft: theme.space.xsmall,
+    errorAndHelpTextContainerPaddingLeft: theme.space.medium
   };
   var fontSizes = {
     text: theme.fontSizes.medium,
@@ -18399,7 +18399,6 @@ var StyledAsteriskLabelInsideTextInput = index$5(Typography.Text)(function (_ref
 var StyledErrorContainer = index$5(ReactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
-    marginLeft: theme.__hd__.textInput.space.errorContainerMarginLeft,
     marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
     flexDirection: 'row',
     alignItems: 'center',
@@ -18431,8 +18430,7 @@ var StyledMaxLengthMessage = index$5(Typography.Text)(function (_ref9) {
 var StyledHelperText = index$5(Typography.Text)(function (_ref10) {
   var theme = _ref10.theme;
   return {
-    fontSize: theme.__hd__.textInput.fontSizes.error,
-    marginLeft: theme.__hd__.textInput.space.errorMarginLeft
+    fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
 var StyledTextInput = index$5(ReactNative.TextInput)(function (_ref11) {
@@ -18472,15 +18470,20 @@ var StyledTextInputAndLabelContainer = index$5(ReactNative.View)(function () {
     flexGrow: 2
   };
 });
-var StyledErrorAndHelpTextContainer = index$5(ReactNative.View)(function () {
+var StyledErrorAndHelpTextContainer = index$5(ReactNative.View)(function (_ref14) {
+  var theme = _ref14.theme;
+  return {
+    paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft
+  };
+});
+var StyledErrorAndMaxLengthContainer = index$5(ReactNative.View)(function () {
   return {
-    flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between'
   };
 });
 
-var _excluded$1 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "maxLength", "helpText", "value"];
+var _excluded$1 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "maxLength", "helpText", "value", "defaultValue"];
 var getVariant = function getVariant(_ref) {
   var disabled = _ref.disabled,
       error = _ref.error,
@@ -18512,6 +18515,8 @@ var getVariant = function getVariant(_ref) {
 };
 
 var TextInput = function TextInput(_ref2) {
+  var _ref3;
+
   var label = _ref2.label,
       prefix = _ref2.prefix,
       suffix = _ref2.suffix,
@@ -18527,12 +18532,13 @@ var TextInput = function TextInput(_ref2) {
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
       maxLength = _ref2.maxLength,
       helpText = _ref2.helpText,
-      _ref2$value = _ref2.value,
-      value = _ref2$value === void 0 ? '' : _ref2$value,
+      value = _ref2.value,
+      defaultValue = _ref2.defaultValue,
       nativeProps = _objectWithoutProperties$1(_ref2, _excluded$1);
 
   var textInputReference = React.useRef(null);
-  var isEmptyValue = value.length === 0;
+  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
+  var isEmptyValue = displayText.length === 0;
 
   var _React$useState = React__default["default"].useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -18612,13 +18618,14 @@ var TextInput = function TextInput(_ref2) {
 
       (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
     },
+    defaultValue: defaultValue,
     placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
   }))), typeof suffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     intent: disabled ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: suffix,
     size: "xsmall"
-  }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, error && /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error && /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
     size: "xsmall",
@@ -18628,7 +18635,7 @@ var TextInput = function TextInput(_ref2) {
   }, error)), shouldShowMaxLength && /*#__PURE__*/React__default["default"].createElement(StyledMaxLengthMessage, {
     themeVariant: variant,
     fontSize: "small"
-  }, value.length, "/", maxLength), helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText)));
+  }, displayText.length, "/", maxLength)), helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText)));
 };
 
 function MultiSelect(_ref) {
@@ -18639,7 +18646,6 @@ function MultiSelect(_ref) {
       label = _ref.label,
       footerLabel = _ref.footerLabel,
       onConfirm = _ref.onConfirm;
-  var theme = useTheme$1();
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18660,23 +18666,16 @@ function MultiSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React__default["default"].createElement(ReactNative.View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayedValue,
-    onPressIn: function onPressIn() {
-      return setOpen(true);
-    },
-    editable: false // when input is not editable on Android, the text color is gray
-    // hence, adding this to make the text color the same as iOS
-    ,
-    textStyle: {
-      color: theme.colors.text
-    },
     suffix: "arrow-down",
     multiline: true,
     style: style,
     testID: testID
-  }), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -18746,7 +18745,6 @@ var SingleSelect = function SingleSelect(_ref) {
       style = _ref.style,
       label = _ref.label,
       onConfirm = _ref.onConfirm;
-  var theme = useTheme$1();
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18765,23 +18763,16 @@ var SingleSelect = function SingleSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React__default["default"].createElement(ReactNative.View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayedValue,
-    onPressIn: function onPressIn() {
-      return setOpen(true);
-    },
-    editable: false // when input is not editable on Android, the text color is gray
-    // hence, adding this to make the text color the same as iOS
-    ,
-    textStyle: {
-      color: theme.colors.text
-    },
     suffix: "arrow-down",
     multiline: true,
     style: style,
     testID: testID
-  }), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.10.1",
+  "version": "7.10.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.10.1"
+    "@hero-design/colors": "7.10.2"
   },
   "peerDependencies": {
     "react": "17.0.2",