@hero-design/rn 7.16.1 → 7.16.2

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 99b83d4cdc69539a
+@hero-design/rn:build: cache hit, replaying output 388181041750c1c7
 @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: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 19.2s
+@hero-design/rn:build: created lib/index.js, es/index.js in 20.5s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/es/index.js

@@ -3455,8 +3455,6 @@ var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
 
 var getSelectTheme = function getSelectTheme(theme) {
   var colors = {
-    option: theme.colors.platformBackground,
-    checkedOption: theme.colors.primaryBackground,
     footerText: theme.colors.primary
   };
   var space = {
@@ -19076,7 +19074,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
       style = _ref.style,
       testID = _ref.testID;
 
-  var _useState = useState(value),
+  var _useState = useState(value || new Date()),
       _useState2 = _slicedToArray(_useState, 2),
       selectingDate = _useState2[0],
       setSelectingDate = _useState2[1];
@@ -19127,7 +19125,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     }, confirmLabel))
   }, /*#__PURE__*/React.createElement(StyledPickerWrapper$1, null, /*#__PURE__*/React.createElement(DateTimePicker, {
     testID: "datePickerIOS",
-    value: selectingDate || new Date(),
+    value: selectingDate,
     mode: "date",
     onChange: function onChange(_, date) {
       if (date) {
@@ -19736,7 +19734,7 @@ var StyledListItemContainer = index$6(TouchableHighlight)(function (_ref3) {
   return {
     alignItems: 'center',
     flexDirection: 'row',
-    backgroundColor: themeSelected ? theme.__hd__.select.colors.checkedOption : theme.__hd__.select.colors.option,
+    backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
     padding: theme.__hd__.list.space.listItemContainerPadding,
     opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled
   };
@@ -20535,32 +20533,20 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
-var OptionWrapper = index$6(TouchableOpacity)(function (_ref) {
-  var theme = _ref.theme,
-      themeSelected = _ref.themeSelected;
-  return {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    borderRadius: theme.__hd__.select.radii.option,
-    padding: theme.__hd__.select.space.optionPadding,
-    backgroundColor: themeSelected ? theme.__hd__.select.colors.checkedOption : theme.__hd__.select.colors.option
-  };
-});
-index$6(View)(function (_ref2) {
-  var theme = _ref2.theme;
+index$6(View)(function (_ref) {
+  var theme = _ref.theme;
   return {
     marginTop: theme.__hd__.select.space.optionListSpacing
   };
 });
-var FooterText = index$6(Typography.Text)(function (_ref3) {
-  var theme = _ref3.theme;
+var FooterText = index$6(Typography.Text)(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     color: theme.__hd__.select.colors.footerText
   };
 });
-var StyledSearchBar = index$6(View)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledSearchBar = index$6(View)(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
     paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
@@ -20658,19 +20644,15 @@ var Option$1 = function Option(_ref) {
   var text = _ref.text,
       selected = _ref.selected,
       onPress = _ref.onPress;
-  return /*#__PURE__*/React.createElement(OptionWrapper, {
-    themeSelected: selected,
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "large"
-  }, text)), selected && /*#__PURE__*/React.createElement(Icon, {
-    icon: "checkmark",
-    size: "small"
-  }));
+  return /*#__PURE__*/React.createElement(List.BasicItem, {
+    selected: selected,
+    onPress: onPress,
+    title: text,
+    suffix: selected ? /*#__PURE__*/React.createElement(Icon, {
+      icon: "checkmark",
+      size: "small"
+    }) : undefined
+  });
 };
 
 var OptionList$1 = function OptionList(_ref) {
@@ -20829,16 +20811,11 @@ var Option = function Option(_ref) {
   var text = _ref.text,
       selected = _ref.selected,
       onPress = _ref.onPress;
-  return /*#__PURE__*/React.createElement(OptionWrapper, {
-    themeSelected: selected,
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "large"
-  }, text)));
+  return /*#__PURE__*/React.createElement(List.BasicItem, {
+    selected: selected,
+    onPress: onPress,
+    title: text
+  });
 };
 
 var OptionList = function OptionList(_ref) {
@@ -21636,7 +21613,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
       style = _ref.style,
       testID = _ref.testID;
 
-  var _useState = useState(value),
+  var _useState = useState(value || new Date()),
       _useState2 = _slicedToArray(_useState, 2),
       selectingDate = _useState2[0],
       setSelectingDate = _useState2[1];
@@ -21688,7 +21665,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     }, confirmLabel))
   }, /*#__PURE__*/React.createElement(StyledPickerWrapper, null, /*#__PURE__*/React.createElement(DateTimePicker, {
     testID: "timePickerIOS",
-    value: selectingDate || new Date(),
+    value: selectingDate,
     mode: "time" // Current prop is24Hour config only available for Android.
     // This is a work around to get the picker to display 24 hour format for iOS.
     ,

package/lib/index.js

@@ -3483,8 +3483,6 @@ var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
 
 var getSelectTheme = function getSelectTheme(theme) {
   var colors = {
-    option: theme.colors.platformBackground,
-    checkedOption: theme.colors.primaryBackground,
     footerText: theme.colors.primary
   };
   var space = {
@@ -19104,7 +19102,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
       style = _ref.style,
       testID = _ref.testID;
 
-  var _useState = React.useState(value),
+  var _useState = React.useState(value || new Date()),
       _useState2 = _slicedToArray(_useState, 2),
       selectingDate = _useState2[0],
       setSelectingDate = _useState2[1];
@@ -19155,7 +19153,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     }, confirmLabel))
   }, /*#__PURE__*/React__default["default"].createElement(StyledPickerWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(DateTimePicker__default["default"], {
     testID: "datePickerIOS",
-    value: selectingDate || new Date(),
+    value: selectingDate,
     mode: "date",
     onChange: function onChange(_, date) {
       if (date) {
@@ -19764,7 +19762,7 @@ var StyledListItemContainer = index$6(reactNative.TouchableHighlight)(function (
   return {
     alignItems: 'center',
     flexDirection: 'row',
-    backgroundColor: themeSelected ? theme.__hd__.select.colors.checkedOption : theme.__hd__.select.colors.option,
+    backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
     padding: theme.__hd__.list.space.listItemContainerPadding,
     opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled
   };
@@ -20563,32 +20561,20 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
-var OptionWrapper = index$6(reactNative.TouchableOpacity)(function (_ref) {
-  var theme = _ref.theme,
-      themeSelected = _ref.themeSelected;
-  return {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    borderRadius: theme.__hd__.select.radii.option,
-    padding: theme.__hd__.select.space.optionPadding,
-    backgroundColor: themeSelected ? theme.__hd__.select.colors.checkedOption : theme.__hd__.select.colors.option
-  };
-});
-index$6(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme;
+index$6(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
   return {
     marginTop: theme.__hd__.select.space.optionListSpacing
   };
 });
-var FooterText = index$6(Typography.Text)(function (_ref3) {
-  var theme = _ref3.theme;
+var FooterText = index$6(Typography.Text)(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     color: theme.__hd__.select.colors.footerText
   };
 });
-var StyledSearchBar = index$6(reactNative.View)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledSearchBar = index$6(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
     paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
@@ -20686,19 +20672,15 @@ var Option$1 = function Option(_ref) {
   var text = _ref.text,
       selected = _ref.selected,
       onPress = _ref.onPress;
-  return /*#__PURE__*/React__default["default"].createElement(OptionWrapper, {
-    themeSelected: selected,
-    onPress: onPress
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: "large"
-  }, text)), selected && /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: "checkmark",
-    size: "small"
-  }));
+  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+    selected: selected,
+    onPress: onPress,
+    title: text,
+    suffix: selected ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "checkmark",
+      size: "small"
+    }) : undefined
+  });
 };
 
 var OptionList$1 = function OptionList(_ref) {
@@ -20857,16 +20839,11 @@ var Option = function Option(_ref) {
   var text = _ref.text,
       selected = _ref.selected,
       onPress = _ref.onPress;
-  return /*#__PURE__*/React__default["default"].createElement(OptionWrapper, {
-    themeSelected: selected,
-    onPress: onPress
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: "large"
-  }, text)));
+  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+    selected: selected,
+    onPress: onPress,
+    title: text
+  });
 };
 
 var OptionList = function OptionList(_ref) {
@@ -21664,7 +21641,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
       style = _ref.style,
       testID = _ref.testID;
 
-  var _useState = React.useState(value),
+  var _useState = React.useState(value || new Date()),
       _useState2 = _slicedToArray(_useState, 2),
       selectingDate = _useState2[0],
       setSelectingDate = _useState2[1];
@@ -21716,7 +21693,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     }, confirmLabel))
   }, /*#__PURE__*/React__default["default"].createElement(StyledPickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(DateTimePicker__default["default"], {
     testID: "timePickerIOS",
-    value: selectingDate || new Date(),
+    value: selectingDate,
     mode: "time" // Current prop is24Hour config only available for Android.
     // This is a work around to get the picker to display 24 hour format for iOS.
     ,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.16.1",
+  "version": "7.16.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.16.1",
+    "@hero-design/colors": "7.16.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -23,7 +23,7 @@ const DatePickerIOS = ({
   style,
   testID,
 }: DatePickerProps) => {
-  const [selectingDate, setSelectingDate] = useState<Date | undefined>(value);
+  const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const [open, setOpen] = useState(false);
 
   const displayValue = value ? formatDate(displayFormat, value) : '';
@@ -70,7 +70,7 @@ const DatePickerIOS = ({
         <StyledPickerWrapper>
           <DateTimePicker
             testID="datePickerIOS"
-            value={selectingDate || new Date()}
+            value={selectingDate}
             mode="date"
             onChange={(_: any, date: Date | undefined) => {
               if (date) {

package/src/components/List/StyledBasicListItem.tsx

@@ -18,8 +18,8 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
   alignItems: 'center',
   flexDirection: 'row',
   backgroundColor: themeSelected
-    ? theme.__hd__.select.colors.checkedOption
-    : theme.__hd__.select.colors.option,
+    ? theme.__hd__.list.colors.checkedListItemContainerBackground
+    : theme.__hd__.list.colors.listItemContainerBackground,
   padding: theme.__hd__.list.space.listItemContainerPadding,
   opacity: themeDisabled
     ? theme.__hd__.list.opacity.disabled

package/src/components/Select/MultiSelect/Option.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
-import { View } from 'react-native';
 import Icon from '../../Icon';
-
-import Typography from '../../Typography';
-import { OptionWrapper } from '../StyledSelect';
+import List from '../../List';
 
 const Option = ({
   text,
@@ -14,12 +11,12 @@ const Option = ({
   selected: boolean;
   onPress: () => void;
 }) => (
-  <OptionWrapper themeSelected={selected} onPress={onPress}>
-    <View style={{ flex: 1 }}>
-      <Typography.Text fontSize="large">{text}</Typography.Text>
-    </View>
-    {selected && <Icon icon="checkmark" size="small" />}
-  </OptionWrapper>
+  <List.BasicItem
+    selected={selected}
+    onPress={onPress}
+    title={text}
+    suffix={selected ? <Icon icon="checkmark" size="small" /> : undefined}
+  />
 );
 
 export default Option;

package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -2,10 +2,13 @@
 
 exports[`Option renders correctly 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -14,22 +17,26 @@ exports[`Option renders correctly 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#f1e9fb",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f1e9fb",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <View
     style={
-      Object {
-        "flex": 1,
-      }
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
     }
   >
     <Text
@@ -52,19 +59,30 @@ exports[`Option renders correctly 1`] = `
       testOption
     </Text>
   </View>
-  <HeroIcon
-    name="checkmark"
+  <View
     style={
       Array [
         Object {
-          "color": "#292a2b",
-          "fontSize": 20,
+          "marginLeft": 8,
         },
         undefined,
       ]
     }
-    themeIntent="text"
-    themeSize="small"
-  />
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
 </View>
 `;