@hero-design/rn 8.139.1 → 8.139.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.139.3
+
+### Patch Changes
+
+- [#5565](https://github.com/Thinkei/hero-design/pull/5565) [`3985de1`](https://github.com/Thinkei/hero-design/commit/3985de1d7c34161ef52137beda331bf2b0a0e184) Thanks [@ttkien](https://github.com/ttkien)! - [Switch] Fix disabled-checked state using the same color as disabled-unchecked
+
+## 8.139.2
+
+### Patch Changes
+
+- [#5561](https://github.com/Thinkei/hero-design/pull/5561) [`6391a1e`](https://github.com/Thinkei/hero-design/commit/6391a1e82979b5f1089edf4c2360cdd7e442eb0e) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Select] Fix options list collapsing behind keyboard in nested BottomSheet
+
 ## 8.139.1
 
 ### Patch Changes

package/es/index.js

@@ -7121,7 +7121,7 @@ var getSwitchTheme = function getSwitchTheme(theme) {
     backgroundColors: {
       checked: theme.colors.pressedSurface,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
-      'disabled-checked': theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-checked': theme.colors.pressedSurface,
       'disabled-unchecked': theme.colors.inactiveOnDefaultGlobalSurface
     },
     thumb: theme.colors.white,
@@ -27912,6 +27912,9 @@ function MultiSelect(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var _useKeyboard = useKeyboard(),
+    isKeyboardVisible = _useKeyboard.isKeyboardVisible,
+    keyboardHeight = _useKeyboard.keyboardHeight;
   var _useState3 = useState(value),
     _useState4 = _slicedToArray(_useState3, 2),
     selectingValue = _useState4[0],
@@ -27965,6 +27968,12 @@ function MultiSelect(_ref) {
       setOpen(false);
     },
     header: bottomSheetHeader || label,
+    style: {
+      paddingBottom: isKeyboardVisible ? keyboardHeight : 0
+    },
+    keyboardAvoidingViewProps: {
+      enabled: false
+    },
     footer: typeof footerLabel === 'string' ? /*#__PURE__*/React__default.createElement(Footer, {
       label: footerLabel,
       onPress: function onPress() {
@@ -28119,6 +28128,9 @@ var SingleSelect = function SingleSelect(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var _useKeyboard = useKeyboard(),
+    isKeyboardVisible = _useKeyboard.isKeyboardVisible,
+    keyboardHeight = _useKeyboard.keyboardHeight;
   var sectionListRef = useRef(null);
   var sections = toSections(options);
   var flatOptions = toFlatOptions(options);
@@ -28165,6 +28177,12 @@ var SingleSelect = function SingleSelect(_ref) {
       setOpen(false);
     },
     header: bottomSheetHeader || label,
+    style: {
+      paddingBottom: isKeyboardVisible ? keyboardHeight : 0
+    },
+    keyboardAvoidingViewProps: {
+      enabled: false
+    },
     onAnimationEnd: function onAnimationEnd() {
       if (open === true) {
         var _sectionListRef$curre;

package/lib/index.js

@@ -7150,7 +7150,7 @@ var getSwitchTheme = function getSwitchTheme(theme) {
     backgroundColors: {
       checked: theme.colors.pressedSurface,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
-      'disabled-checked': theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-checked': theme.colors.pressedSurface,
       'disabled-unchecked': theme.colors.inactiveOnDefaultGlobalSurface
     },
     thumb: theme.colors.white,
@@ -27941,6 +27941,9 @@ function MultiSelect(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var _useKeyboard = useKeyboard(),
+    isKeyboardVisible = _useKeyboard.isKeyboardVisible,
+    keyboardHeight = _useKeyboard.keyboardHeight;
   var _useState3 = React.useState(value),
     _useState4 = _slicedToArray(_useState3, 2),
     selectingValue = _useState4[0],
@@ -27994,6 +27997,12 @@ function MultiSelect(_ref) {
       setOpen(false);
     },
     header: bottomSheetHeader || label,
+    style: {
+      paddingBottom: isKeyboardVisible ? keyboardHeight : 0
+    },
+    keyboardAvoidingViewProps: {
+      enabled: false
+    },
     footer: typeof footerLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Footer, {
       label: footerLabel,
       onPress: function onPress() {
@@ -28148,6 +28157,9 @@ var SingleSelect = function SingleSelect(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  var _useKeyboard = useKeyboard(),
+    isKeyboardVisible = _useKeyboard.isKeyboardVisible,
+    keyboardHeight = _useKeyboard.keyboardHeight;
   var sectionListRef = React.useRef(null);
   var sections = toSections(options);
   var flatOptions = toFlatOptions(options);
@@ -28194,6 +28206,12 @@ var SingleSelect = function SingleSelect(_ref) {
       setOpen(false);
     },
     header: bottomSheetHeader || label,
+    style: {
+      paddingBottom: isKeyboardVisible ? keyboardHeight : 0
+    },
+    keyboardAvoidingViewProps: {
+      enabled: false
+    },
     onAnimationEnd: function onAnimationEnd() {
       if (open === true) {
         var _sectionListRef$curre;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.139.1",
+  "version": "8.139.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -9,6 +9,7 @@ import Box from '../../Box';
 import type { TextInputProps } from '../../TextInput';
 import TextInput from '../../TextInput';
 import Footer from '../Footer';
+import { useKeyboard } from '../../../utils/helpers';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
 import { StyledSearchBar } from '../StyledSelect';
 import type { SectionType, SelectOptionType, SelectProps } from '../types';
@@ -77,6 +78,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   assistiveInfoConfig,
 }: MultiSelectProps<V, T>) {
   const [open, setOpen] = useState(false);
+  const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [selectingValue, setSelectingValue] = useState(value);
   const sectionListRef = useRef<SectionList<T, SectionType>>(null);
   const sections = toSections(options);
@@ -145,6 +147,8 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
           setOpen(false);
         }}
         header={bottomSheetHeader || label}
+        style={{ paddingBottom: isKeyboardVisible ? keyboardHeight : 0 }}
+        keyboardAvoidingViewProps={{ enabled: false }}
         footer={
           typeof footerLabel === 'string' ? (
             <Footer

package/src/components/Select/SingleSelect/index.tsx

@@ -4,7 +4,7 @@ import type {
   SectionList,
 } from 'react-native';
 import { TouchableOpacity, View } from 'react-native';
-import { deepCompareValue } from '../../../utils/helpers';
+import { deepCompareValue, useKeyboard } from '../../../utils/helpers';
 import BottomSheet from '../../BottomSheet';
 import type { TextInputProps } from '../../TextInput';
 import TextInput from '../../TextInput';
@@ -62,6 +62,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
   assistiveInfoConfig,
 }: SingleSelectProps<V, T>) => {
   const [open, setOpen] = useState(false);
+  const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const sectionListRef = useRef<SectionList<T, SectionType>>(null);
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
@@ -129,6 +130,8 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
           setOpen(false);
         }}
         header={bottomSheetHeader || label}
+        style={{ paddingBottom: isKeyboardVisible ? keyboardHeight : 0 }}
+        keyboardAvoidingViewProps={{ enabled: false }}
         onAnimationEnd={() => {
           if (open === true) {
             const scrollParams = getScrollParams(value, sections);

package/src/theme/components/switch.ts

@@ -5,7 +5,7 @@ const getSwitchTheme = (theme: GlobalTheme) => {
     backgroundColors: {
       checked: theme.colors.pressedSurface,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
-      'disabled-checked': theme.colors.inactiveOnDefaultGlobalSurface,
+      'disabled-checked': theme.colors.pressedSurface,
       'disabled-unchecked': theme.colors.inactiveOnDefaultGlobalSurface,
     },
     thumb: theme.colors.white,