@widergy/mobile-ui 1.11.3 → 1.11.4

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.11.4](https://github.com/widergy/mobile-ui/compare/v1.11.3...v1.11.4) (2024-06-18)
+
+
+### Bug Fixes
+
+* configurable avoid utmenu overlapping anchor ([#296](https://github.com/widergy/mobile-ui/issues/296)) ([6ab50ba](https://github.com/widergy/mobile-ui/commit/6ab50babc59deb019947c79067a010e4ddf047dc))
+
 ## [1.11.3](https://github.com/widergy/mobile-ui/compare/v1.11.2...v1.11.3) (2024-06-12)
 
 

package/lib/components/UTAutocomplete/index.js

@@ -9,18 +9,19 @@ import UTTextInput from '../UTTextInput';
 import styles from './styles';
 
 const UTAutocomplete = ({
-  input,
-  options,
+  autoCompletePlaceholder,
+  avoidOverlappingAnchor,
   disabled,
+  error,
+  filterOptions,
+  input,
   label,
   labelBackgroundColor,
-  error,
-  variant,
-  autoCompletePlaceholder,
-  MenuOptionComponent,
   ListEmptyComponent,
-  filterOptions,
-  persistSelectedOption = false
+  MenuOptionComponent,
+  options,
+  persistSelectedOption = false,
+  variant
 }) => {
   const [selectedOption, setSelectedOption] = useState();
 
@@ -38,30 +39,31 @@ const UTAutocomplete = ({
   return (
     <View style={styles.container}>
       <UTMenu
-        options={options}
-        fullWidth
-        selectedOption={selectedOption?.id}
-        withAutocomplete
-        onPress={handleOnPress}
-        onOpen={input.onFocus}
-        onClose={input.onBlur}
-        disabled={disabled}
-        onQueryChange={input.onQueryChange}
         autoCompletePlaceholder={autoCompletePlaceholder}
+        avoidOverlappingAnchor={avoidOverlappingAnchor}
+        disabled={disabled}
+        filterOptions={filterOptions}
+        fullWidth
+        ListEmptyComponent={ListEmptyComponent}
         maxHeight={WINDOW_HEIGHT * 0.25}
         MenuOptionComponent={MenuOptionComponent}
-        ListEmptyComponent={ListEmptyComponent}
-        filterOptions={filterOptions}
+        onClose={input.onBlur}
+        onOpen={input.onFocus}
+        onPress={handleOnPress}
+        onQueryChange={input.onQueryChange}
+        options={options}
+        selectedOption={selectedOption?.id}
+        withAutocomplete
       >
         <UTTextInput
-          variant={variant}
-          value={selectedOption?.label || ''}
+          disabled={disabled}
           error={error}
           label={label}
           labelBackgroundColor={labelBackgroundColor}
-          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
           onChange={() => {}}
-          disabled={disabled}
+          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
+          value={selectedOption?.label || ''}
+          variant={variant}
         />
       </UTMenu>
     </View>
@@ -69,12 +71,21 @@ const UTAutocomplete = ({
 };
 
 UTAutocomplete.propTypes = {
+  avoidOverlappingAnchor: bool,
+  autoCompletePlaceholder: string,
+  disabled: bool,
+  error: oneOf([bool, string]),
+  filterOptions: bool,
   input: shape({
     onChange: func.isRequired,
     value: string.isRequired,
     onFocus: func,
     onBlur: func
   }),
+  label: string,
+  labelBackgroundColor: string,
+  ListEmptyComponent: element,
+  MenuOptionComponent: element,
   options: arrayOf(
     shape({
       value: string,
@@ -82,16 +93,8 @@ UTAutocomplete.propTypes = {
       label: string
     })
   ),
-  disabled: bool,
-  label: string,
-  labelBackgroundColor: string,
-  error: oneOf([bool, string]),
-  variant: string,
-  autoCompletePlaceholder: string,
-  MenuOptionComponent: element,
-  ListEmptyComponent: element,
-  filterOptions: bool,
-  persistSelectedOption: bool
+  persistSelectedOption: bool,
+  variant: string
 };
 
 export default UTAutocomplete;

package/lib/components/UTMenu/index.js

@@ -10,27 +10,28 @@ import MenuTypes from './proptypes';
 import styles from './styles';
 
 const UTMenu = ({
-  options = [],
-  selectedOption,
+  autoCompletePlaceholder,
+  avoidOverlappingAnchor = true,
   children,
-  onClose,
-  onOpen,
+  disabled,
+  filterOptions = true,
   fullWidth,
-  verticalOffset = 0,
   horizontalOffset = 0,
-  onPress,
-  disabled,
-  withoutOpacity,
-  styles: propStyles,
-  MenuOptionComponent = MenuOption,
+  isMultiple,
   ItemSeparatorComponent,
   ListEmptyComponent,
   maxHeight,
-  isMultiple,
-  autoCompletePlaceholder,
+  MenuOptionComponent = MenuOption,
+  onClose,
+  onOpen,
+  onPress,
   onQueryChange,
-  filterOptions = true,
-  withAutocomplete
+  options = [],
+  selectedOption,
+  styles: propStyles,
+  verticalOffset = 0,
+  withAutocomplete,
+  withoutOpacity
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef(null);
@@ -70,8 +71,12 @@ const UTMenu = ({
     let left = x + horizontalOffset;
 
     if (top + menuHeight + height / 2 > usableWindowHeight) {
-      const upPosition = y - menuHeight - verticalOffset;
-      top = upPosition > 0 ? upPosition : top - (top + menuHeight - usableWindowHeight + height / 2);
+      if (avoidOverlappingAnchor) {
+        const upPosition = y - menuHeight - verticalOffset;
+        top = upPosition > 0 ? upPosition : top - (top + menuHeight - usableWindowHeight + height / 2);
+      } else {
+        top = usableWindowHeight - menuHeight - 10;
+      }
     }
 
     if (left - width + menuWidth > windowWidth) {
@@ -79,7 +84,15 @@ const UTMenu = ({
     }
 
     setPosition({ top, left });
-  }, [anchorMeasure, horizontalOffset, menuDimentions, verticalOffset, usableWindowHeight, windowWidth]);
+  }, [
+    anchorMeasure,
+    avoidOverlappingAnchor,
+    horizontalOffset,
+    menuDimentions,
+    usableWindowHeight,
+    verticalOffset,
+    windowWidth
+  ]);
 
   const openMenu = () => {
     Keyboard.dismiss();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [