@hero-design/rn 7.16.1 → 7.17.0

package/lib/index.js

@@ -3483,15 +3483,13 @@ 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 = {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
-    optionPadding: theme.space.medium,
-    optionListPadding: theme.space.medium,
-    optionListSpacing: theme.space.xsmall,
+    sectionSpacing: theme.space.smallMedium,
+    optionSpacing: theme.space.xsmall,
+    optionHorizontalMargin: theme.space.smallMedium,
     searchBarMarginTopSpacing: theme.space.small,
     searchBarHorizontalSpacing: theme.space.medium,
     searchBarBottomSpacing: theme.space.small
@@ -18870,11 +18868,12 @@ var StyledErrorAndMaxLengthContainer = index$6(reactNative.View)(function () {
   };
 });
 
-var _excluded$5 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "maxLength", "helpText", "value", "defaultValue"];
+var _excluded$5 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue"];
 var getVariant = function getVariant(_ref) {
   var disabled = _ref.disabled,
       error = _ref.error,
       editable = _ref.editable,
+      loading = _ref.loading,
       isFocused = _ref.isFocused,
       isEmptyValue = _ref.isEmptyValue;
 
@@ -18886,7 +18885,7 @@ var getVariant = function getVariant(_ref) {
     return 'error';
   }
 
-  if (!editable) {
+  if (!editable || loading) {
     return 'readonly';
   }
 
@@ -18917,6 +18916,8 @@ var TextInput = function TextInput(_ref2) {
       editable = _ref2$editable === void 0 ? true : _ref2$editable,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$loading = _ref2.loading,
+      loading = _ref2$loading === void 0 ? false : _ref2$loading,
       maxLength = _ref2.maxLength,
       helpText = _ref2.helpText,
       value = _ref2.value,
@@ -18926,6 +18927,7 @@ var TextInput = function TextInput(_ref2) {
   var textInputReference = React.useRef(null);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
+  var actualSuffix = loading ? 'loading' : suffix;
 
   var _React$useState = React__default["default"].useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -18936,6 +18938,7 @@ var TextInput = function TextInput(_ref2) {
     disabled: disabled,
     error: error,
     editable: editable,
+    loading: loading,
     isFocused: isFocused,
     isEmptyValue: isEmptyValue
   });
@@ -18958,7 +18961,7 @@ var TextInput = function TextInput(_ref2) {
     fontSize: "small",
     themeVariant: variant
   }, label)), typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: disabled ? 'disabled-text' : 'text',
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
@@ -18979,7 +18982,7 @@ var TextInput = function TextInput(_ref2) {
     }, textStyle]),
     testID: "text-input",
     accessibilityState: {
-      disabled: disabled
+      disabled: variant === 'disabled' || variant === 'readonly'
     } // @ts-ignore
     ,
     accessibilityLabelledBy: accessibilityLabelledBy
@@ -19007,10 +19010,11 @@ var TextInput = function TextInput(_ref2) {
     },
     defaultValue: defaultValue,
     placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
-  }))), typeof suffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: disabled ? 'disabled-text' : 'text',
+  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
-    icon: suffix,
+    icon: actualSuffix,
+    spin: actualSuffix === 'loading',
     size: "xsmall"
   }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error && /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     testID: "input-error-icon",
@@ -19104,7 +19108,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 +19159,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 +19768,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
   };
@@ -19793,10 +19797,10 @@ var BasicListItem = function BasicListItem(_ref) {
     underlayColor: theme.__hd__.list.colors.highlightedListItemContainerBackground
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, prefix && /*#__PURE__*/React__default["default"].createElement(StyledPrefixContainer, null, typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: prefix
-  }) : prefix), /*#__PURE__*/React__default["default"].createElement(StyledTitleContainer, null, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+  }) : prefix), /*#__PURE__*/React__default["default"].createElement(StyledTitleContainer, null, typeof title === 'string' ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
     intent: "body",
     fontSize: "large"
-  }, title), subtitle && /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+  }, title) : title, subtitle && /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
     intent: "subdued",
     fontSize: "small"
   }, subtitle)), suffix && /*#__PURE__*/React__default["default"].createElement(StyledSuffixContainer, null, typeof suffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -20455,7 +20459,7 @@ var Radio = function Radio(_ref) {
   })));
 };
 
-function getKey$1(option, index, keyExtractor) {
+function getKey(option, index, keyExtractor) {
   var key = '';
 
   if (keyExtractor !== undefined) {
@@ -20481,7 +20485,7 @@ var RadioGroup = function RadioGroup(_ref) {
     testID: testID
   }, options.map(function (option, index) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-      key: getKey$1(option, index, keyExtractor)
+      key: getKey(option, index, keyExtractor)
     }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(Spacer, null), /*#__PURE__*/React__default["default"].createElement(Radio, {
       text: option.text,
       checked: option.value === value,
@@ -20563,22 +20567,16 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
-var OptionWrapper = index$6(reactNative.TouchableOpacity)(function (_ref) {
-  var theme = _ref.theme,
-      themeSelected = _ref.themeSelected;
+var SectionSpacer = index$6(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
   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
+    marginTop: theme.__hd__.select.space.sectionSpacing
   };
 });
-index$6(reactNative.View)(function (_ref2) {
+var OptionSpacer = index$6(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    marginTop: theme.__hd__.select.space.optionListSpacing
+    marginTop: theme.__hd__.select.space.optionSpacing
   };
 });
 var FooterText = index$6(Typography.Text)(function (_ref3) {
@@ -20607,18 +20605,70 @@ var Footer = function Footer(_ref) {
   }, label));
 };
 
-var getKey = function getKey(option, index, keyExtractor) {
-  var key = '';
+var isSections = function isSections(options) {
+  var firstOption = options[0];
+  return firstOption !== undefined && firstOption.category !== undefined;
+};
+var toSections = function toSections(options) {
+  if (isSections(options)) {
+    return options;
+  }
 
-  if (keyExtractor !== undefined) {
-    key = keyExtractor(option, index);
-  } else if (option.key !== undefined) {
-    key = option.key;
-  } else {
-    key = index;
+  return [{
+    category: '',
+    data: options
+  }];
+};
+var toFlatOptions = function toFlatOptions(options) {
+  if (isSections(options)) {
+    return options.flatMap(function (opt) {
+      return opt.data;
+    });
   }
 
-  return key;
+  return options;
+};
+var getScrollParams = function getScrollParams(value, sections) {
+  var itemIndex = -1;
+  var sectionIndex = sections.findIndex(function (section) {
+    itemIndex = section.data.findIndex(function (opt) {
+      return opt.value === value;
+    });
+    return itemIndex !== -1;
+  });
+  return {
+    sectionIndex: sectionIndex < 0 ? 0 : sectionIndex,
+    itemIndex: itemIndex < 0 ? 0 : itemIndex
+  };
+};
+var useKeyboard = function useKeyboard() {
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isKeyboardVisible = _useState2[0],
+      setKeyboardVisible = _useState2[1];
+
+  var _useState3 = React.useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      keyboardHeight = _useState4[0],
+      setKeyboardHeight = _useState4[1];
+
+  React.useEffect(function () {
+    var keyboardWillShowListener = reactNative.Keyboard.addListener('keyboardWillShow', function (e) {
+      setKeyboardVisible(true);
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    var keyboardWillHideListener = reactNative.Keyboard.addListener('keyboardWillHide', function () {
+      setKeyboardVisible(false);
+    });
+    return function () {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, []);
+  return {
+    isKeyboardVisible: isKeyboardVisible,
+    keyboardHeight: keyboardHeight
+  };
 };
 
 var StyledOptionList = function StyledOptionList(_ref) {
@@ -20626,26 +20676,23 @@ var StyledOptionList = function StyledOptionList(_ref) {
       loading = _ref.loading,
       onEndReached = _ref.onEndReached,
       onQueryChange = _ref.onQueryChange,
-      options = _ref.options,
-      RenderItem = _ref.RenderItem,
-      _ref$scrollIndex = _ref.scrollIndex,
-      scrollIndex = _ref$scrollIndex === void 0 ? 0 : _ref$scrollIndex;
+      sections = _ref.sections,
+      renderItem = _ref.renderItem,
+      scrollParams = _ref.scrollParams;
   var theme = useTheme$1();
-  var flatListRef = React.useRef(null);
+  var sectionListRef = React.useRef(null);
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       onEndReachedCalled = _useState2[0],
       setOnEndReachedCalled = _useState2[1];
 
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
-    ref: flatListRef,
-    style: _objectSpread2({
-      paddingHorizontal: theme.__hd__.select.space.optionListPadding
-    }, onQueryChange ? {
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.SectionList, {
+    ref: sectionListRef,
+    style: _objectSpread2({}, onQueryChange ? {
       height: reactNative.Dimensions.get('screen').height
     } : {}),
-    data: options,
+    sections: sections,
     keyExtractor: keyExtractor,
     onEndReachedThreshold: 0.1,
     onEndReached: function onEndReached() {
@@ -20653,11 +20700,9 @@ var StyledOptionList = function StyledOptionList(_ref) {
     },
     onScrollToIndexFailed: function onScrollToIndexFailed() {},
     onContentSizeChange: function onContentSizeChange() {
-      var _flatListRef$current;
+      var _sectionListRef$curre;
 
-      return options.length && ((_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
-        index: scrollIndex
-      }));
+      return sections.length && ((_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams));
     },
     onMomentumScrollBegin: function onMomentumScrollBegin() {
       if (onEndReached && onEndReachedCalled && !loading) onEndReached();
@@ -20670,86 +20715,100 @@ var StyledOptionList = function StyledOptionList(_ref) {
         height: theme.space.xxxxlarge
       }
     }, /*#__PURE__*/React__default["default"].createElement(Spinner, null)) : null,
-    renderItem: function renderItem(_ref2) {
-      var item = _ref2.item,
-          index = _ref2.index;
-      return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-        key: getKey(item, index, keyExtractor)
-      }, /*#__PURE__*/React__default["default"].createElement(RenderItem, {
-        item: item
-      }));
-    }
+    renderSectionHeader: function renderSectionHeader(_ref2) {
+      var category = _ref2.section.category;
+      return category !== '' ? /*#__PURE__*/React__default["default"].createElement(SectionHeading, {
+        text: category,
+        style: {
+          marginBottom: 0
+        }
+      }) : null;
+    },
+    renderItem: renderItem,
+    ItemSeparatorComponent: OptionSpacer,
+    SectionSeparatorComponent: SectionSpacer
   });
 };
 
 var Option$1 = function Option(_ref) {
   var text = _ref.text,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       selected = _ref.selected,
       onPress = _ref.onPress;
-  return /*#__PURE__*/React__default["default"].createElement(OptionWrapper, {
-    themeSelected: selected,
-    onPress: onPress
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+  var theme = useTheme();
+  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+    selected: selected,
+    disabled: disabled,
+    onPress: onPress,
+    title: text,
+    suffix: selected ? 'checkmark' : undefined,
     style: {
-      flex: 1
+      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: "large"
-  }, text)), selected && /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: "checkmark",
-    size: "small"
-  }));
+  });
 };
 
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
       loading = _ref.loading,
       onEndReached = _ref.onEndReached,
-      _onPress = _ref.onPress,
+      onPress = _ref.onPress,
       onQueryChange = _ref.onQueryChange,
-      options = _ref.options,
+      sections = _ref.sections,
+      renderOption = _ref.renderOption,
       value = _ref.value;
   var firstValue = value === null || value === void 0 ? void 0 : value[0];
-  var rawScrollIndex = firstValue ? options.findIndex(function (option) {
-    return option.value === firstValue;
-  }) : 0;
-  var scrollIndex = rawScrollIndex - 2 >= 0 ? rawScrollIndex - 2 : 0;
-  var RenderItem = /*#__PURE__*/React__default["default"].memo(function (_ref2) {
-    var item = _ref2.item;
-    return /*#__PURE__*/React__default["default"].createElement(Option$1, {
-      text: item.text,
-      selected: value.includes(item.value),
-      onPress: function onPress() {
-        if (value.includes(item.value)) {
-          _onPress(value.filter(function (val) {
-            return val !== item.value;
-          }));
-        } else {
-          _onPress([].concat(_toConsumableArray(value), [item.value]));
-        }
+  var scrollParams = getScrollParams(firstValue, sections);
+
+  var renderItem = function renderItem(info) {
+    var item = info.item;
+    var selected = value.includes(info.item.value);
+
+    var onItemPress = function onItemPress() {
+      if (value.includes(info.item.value)) {
+        onPress(value.filter(function (val) {
+          return val !== info.item.value;
+        }));
+      } else {
+        onPress([].concat(_toConsumableArray(value), [info.item.value]));
       }
+    };
+
+    return renderOption ? renderOption(_objectSpread2(_objectSpread2({}, info), {}, {
+      selected: selected,
+      onPress: onItemPress
+    })) : /*#__PURE__*/React__default["default"].createElement(Option$1, {
+      selected: selected,
+      text: item.text,
+      disabled: item.disabled,
+      onPress: onItemPress
     });
-  });
+  };
+
   return /*#__PURE__*/React__default["default"].createElement(StyledOptionList, {
     keyExtractor: keyExtractor,
     loading: loading,
     onEndReached: onEndReached,
     onQueryChange: onQueryChange,
-    options: options,
-    RenderItem: RenderItem,
-    scrollIndex: scrollIndex
+    sections: sections,
+    renderItem: renderItem,
+    scrollParams: scrollParams
   });
 };
 
 function MultiSelect(_ref) {
   var footerLabel = _ref.footerLabel,
       label = _ref.label,
-      loading = _ref.loading,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      inputProps = _ref.inputProps,
       onConfirm = _ref.onConfirm,
       onDimiss = _ref.onDimiss,
       onEndReached = _ref.onEndReached,
       onQueryChange = _ref.onQueryChange,
       options = _ref.options,
+      renderOption = _ref.renderOption,
       query = _ref.query,
       error = _ref.error,
       _ref$editable = _ref.editable,
@@ -20761,6 +20820,10 @@ function MultiSelect(_ref) {
       testID = _ref.testID,
       value = _ref.value;
 
+  var _useKeyboard = useKeyboard(),
+      isKeyboardVisible = _useKeyboard.isKeyboardVisible,
+      keyboardHeight = _useKeyboard.keyboardHeight;
+
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -20771,37 +20834,15 @@ function MultiSelect(_ref) {
       selectingValue = _useState4[0],
       setSelectingValue = _useState4[1];
 
-  var displayedValue = options.filter(function (opt) {
+  var sections = toSections(options);
+  var flatOptions = toFlatOptions(options);
+  var displayedValue = flatOptions.filter(function (opt) {
     return value.includes(opt.value);
   }).map(function (opt) {
     return opt.text;
   }).join(', ');
-
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isKeyboardVisible = _useState6[0],
-      setKeyboardVisible = _useState6[1];
-
-  var _useState7 = React.useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      keyboardHeight = _useState8[0],
-      setKeyboardHeight = _useState8[1];
-
-  React.useEffect(function () {
-    var keyboardDidShowListener = reactNative.Keyboard.addListener('keyboardDidShow', function (e) {
-      setKeyboardVisible(true);
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    var keyboardDidHideListener = reactNative.Keyboard.addListener('keyboardDidHide', function () {
-      setKeyboardVisible(false);
-    });
-    return function () {
-      keyboardDidHideListener.remove();
-      keyboardDidShowListener.remove();
-    };
-  }, []);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-    pointerEvents: !editable || disabled ? 'none' : 'auto'
+    pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20814,6 +20855,7 @@ function MultiSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
+    loading: inputProps === null || inputProps === void 0 ? void 0 : inputProps.loading,
     numberOfLines: numberOfLines,
     pointerEvents: "none",
     style: style,
@@ -20845,9 +20887,11 @@ function MultiSelect(_ref) {
     onChangeText: onQueryChange,
     value: query
   })), /*#__PURE__*/React__default["default"].createElement(OptionList$1, {
+    onQueryChange: onQueryChange,
     onEndReached: onEndReached,
     loading: loading,
-    options: options,
+    sections: sections,
+    renderOption: renderOption,
     value: selectingValue,
     onPress: setSelectingValue
   })));
@@ -20855,67 +20899,80 @@ function MultiSelect(_ref) {
 
 var Option = function Option(_ref) {
   var text = _ref.text,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       selected = _ref.selected,
       onPress = _ref.onPress;
-  return /*#__PURE__*/React__default["default"].createElement(OptionWrapper, {
-    themeSelected: selected,
-    onPress: onPress
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+  var theme = useTheme();
+  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+    selected: selected,
+    disabled: disabled,
+    onPress: onPress,
+    title: text,
     style: {
-      flex: 1
+      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: "large"
-  }, text)));
+  });
 };
 
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
       loading = _ref.loading,
       onEndReached = _ref.onEndReached,
-      _onPress = _ref.onPress,
+      onPress = _ref.onPress,
       onQueryChange = _ref.onQueryChange,
-      options = _ref.options,
+      sections = _ref.sections,
+      renderOption = _ref.renderOption,
       value = _ref.value;
-  var rawScrollIndex = options.findIndex(function (option) {
-    return option.value === value;
-  });
-  var scrollIndex = rawScrollIndex - 2 >= 0 ? rawScrollIndex - 2 : 0;
-  var RenderItem = /*#__PURE__*/React__default["default"].memo(function (_ref2) {
-    var item = _ref2.item;
-    return /*#__PURE__*/React__default["default"].createElement(Option, {
-      selected: value === item.value,
-      text: item.text,
-      onPress: function onPress() {
-        if (value === item.value) {
-          _onPress(null);
-        } else {
-          _onPress(item.value);
-        }
+  var scrollParams = getScrollParams(value, sections);
+
+  var renderItem = function renderItem(info) {
+    var item = info.item;
+    var selected = item.value === value;
+
+    var onItemPress = function onItemPress() {
+      if (value === item.value) {
+        onPress(null);
+      } else {
+        onPress(item.value);
       }
+    };
+
+    return renderOption ? renderOption(_objectSpread2(_objectSpread2({}, info), {}, {
+      selected: selected,
+      onPress: onItemPress
+    })) : /*#__PURE__*/React__default["default"].createElement(Option, {
+      selected: selected,
+      text: item.text,
+      disabled: item.disabled,
+      onPress: onItemPress
     });
-  });
+  };
+
   return /*#__PURE__*/React__default["default"].createElement(StyledOptionList, {
     keyExtractor: keyExtractor,
     loading: loading,
     onEndReached: onEndReached,
     onQueryChange: onQueryChange,
-    options: options,
-    RenderItem: RenderItem,
-    scrollIndex: scrollIndex
+    sections: sections,
+    renderItem: renderItem,
+    scrollParams: scrollParams
   });
 };
 
 var SingleSelect = function SingleSelect(_ref) {
-  var _options$find;
+  var _flatOptions$find;
 
   var label = _ref.label,
-      loading = _ref.loading,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      inputProps = _ref.inputProps,
       onConfirm = _ref.onConfirm,
       onDimiss = _ref.onDimiss,
       onEndReached = _ref.onEndReached,
       onQueryChange = _ref.onQueryChange,
       options = _ref.options,
+      renderOption = _ref.renderOption,
       query = _ref.query,
       error = _ref.error,
       _ref$editable = _ref.editable,
@@ -20927,6 +20984,10 @@ var SingleSelect = function SingleSelect(_ref) {
       testID = _ref.testID,
       value = _ref.value;
 
+  var _useKeyboard = useKeyboard(),
+      isKeyboardVisible = _useKeyboard.isKeyboardVisible,
+      keyboardHeight = _useKeyboard.keyboardHeight;
+
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -20937,35 +20998,13 @@ var SingleSelect = function SingleSelect(_ref) {
       selectingValue = _useState4[0],
       setSelectingValue = _useState4[1];
 
-  var displayedValue = (_options$find = options.find(function (opt) {
+  var sections = toSections(options);
+  var flatOptions = toFlatOptions(options);
+  var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
     return value === opt.value;
-  })) === null || _options$find === void 0 ? void 0 : _options$find.text;
-
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isKeyboardVisible = _useState6[0],
-      setKeyboardVisible = _useState6[1];
-
-  var _useState7 = React.useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      keyboardHeight = _useState8[0],
-      setKeyboardHeight = _useState8[1];
-
-  React.useEffect(function () {
-    var keyboardDidShowListener = reactNative.Keyboard.addListener('keyboardWillShow', function (e) {
-      setKeyboardVisible(true);
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    var keyboardDidHideListener = reactNative.Keyboard.addListener('keyboardWillHide', function () {
-      setKeyboardVisible(false);
-    });
-    return function () {
-      keyboardDidHideListener.remove();
-      keyboardDidShowListener.remove();
-    };
-  }, []);
+  })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-    pointerEvents: !editable || disabled ? 'none' : 'auto'
+    pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -20978,6 +21017,7 @@ var SingleSelect = function SingleSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
+    loading: inputProps === null || inputProps === void 0 ? void 0 : inputProps.loading,
     numberOfLines: numberOfLines,
     pointerEvents: "none",
     style: style,
@@ -21005,7 +21045,8 @@ var SingleSelect = function SingleSelect(_ref) {
     onQueryChange: onQueryChange,
     onEndReached: onEndReached,
     loading: loading,
-    options: options,
+    sections: sections,
+    renderOption: renderOption,
     value: selectingValue,
     onPress: function onPress(selectedValue) {
       setOpen(false);
@@ -21664,7 +21705,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 +21757,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.
     ,