bootstrap-rn 0.1.0 → 0.1.1

package/dist/bootstrap-rn.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react-native'), require('react'), require('react-native/Libraries/Image/resolveAssetSource'), require('@floating-ui/core/dist/floating-ui.core')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react-native', 'react', 'react-native/Libraries/Image/resolveAssetSource', '@floating-ui/core/dist/floating-ui.core'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["bootstrap-rn"] = {}, global.ReactNative, global.React, global.require$$12, global.floatingUi_core));
-})(this, (function (exports, _reactNative, React, require$$12, floatingUi_core) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react-native'), require('react'), require('react-native/Libraries/Image/resolveAssetSource')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react-native', 'react', 'react-native/Libraries/Image/resolveAssetSource'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["bootstrap-rn"] = {}, global.ReactNative, global.React, global.require$$12));
+})(this, (function (exports, _reactNative, React, require$$12) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -3589,6 +3589,11 @@
       return "".concat(unary || '').concat(number / (_reactNative.PixelRatio.getFontScale() * 16), "rem");
     });
   }
+  function convertToNumber(value) {
+    return parseFloat(value.replace(/([+-]+)?([\d.Ee]+)rem/g, function (_, unary, number) {
+      return "".concat(unary || '').concat(_reactNative.PixelRatio.getFontScale() * 16 * number, "px");
+    }));
+  }
 
   // keys, but not the resolved values. The values are added later by the used
   // theme.
@@ -37833,7 +37838,7 @@
    * LICENSE file in the root directory of this source tree.
    */
 
-  var propTypes$1f = createCommonjsModule(function (module) {
+  var propTypes$1g = createCommonjsModule(function (module) {
   {
     var ReactIs = reactIs;
 
@@ -37844,7 +37849,423 @@
   }
   });
 
-  var PropTypes = propTypes$1f;
+  var PropTypes = propTypes$1g;
+
+  const isRTL = () => {
+    // To support previous RN versions. Newer versions use below getConstants()
+    if (_reactNative.I18nManager.isRTL !== undefined) {
+      return _reactNative.I18nManager.isRTL;
+    } // @ts-ignore - RN web only
+
+
+    if (_reactNative.I18nManager.getConstants) {
+      // @ts-ignore - RN web only
+      return _reactNative.I18nManager.getConstants().isRTL;
+    }
+  };
+
+  const measureOffset = ref => new Promise(resolve => {
+    if (ref.current) {
+      ref.current.measureInWindow((x, y, width, height) => {
+        resolve({
+          top: y,
+          left: x,
+          width,
+          height
+        });
+      });
+    }
+  });
+
+  function useOverlayPosition(props) {
+    let {
+      targetRef,
+      overlayRef,
+      placement = 'bottom',
+      offset = 0,
+      crossOffset = 0,
+      isOpen = true,
+      shouldFlip = true,
+      shouldOverlapWithTrigger = false
+    } = props;
+    let [position, setPosition] = React__default["default"].useState({
+      position: {},
+      arrowOffsetLeft: undefined,
+      arrowOffsetTop: undefined,
+      maxHeight: undefined,
+      placement: undefined
+    }); // Layout measurement happens asynchronously in RN. This causes initial flickr. Using opacity and setting it to 1 post calculation prevents that.
+
+    let [rendered, setRendered] = React__default["default"].useState(false);
+
+    let updatePosition = async () => {
+      const [overlayOffset, triggerOffset] = await Promise.all([measureOffset(overlayRef), measureOffset(targetRef)]); // Sometimes measure returns height/width 0. Best solution would be to use onLayout callback, but that might diverege from React Aria's useOverlayPosition API. Decide later, this works for now
+
+      if (!overlayOffset.width || !overlayOffset.height || !triggerOffset.width || !triggerOffset.height) {
+        requestAnimationFrame(updatePosition);
+        return;
+      }
+
+      const {
+        height: windowHeight,
+        width: windowWidth
+      } = _reactNative.Dimensions.get('window');
+      const positions = calculatePosition({
+        placement: translateRTL(placement),
+        targetNode: triggerOffset,
+        overlayNode: overlayOffset,
+        scrollNode: overlayOffset,
+        padding: 0,
+        shouldFlip,
+        boundaryElement: {
+          top: 0,
+          left: 0,
+          width: windowWidth,
+          height: windowHeight
+        },
+        offset,
+        crossOffset,
+        shouldOverlapWithTrigger
+      });
+      setPosition(positions);
+      setRendered(true);
+    };
+
+    React__default["default"].useEffect(() => {
+      return () => {
+        setRendered(false);
+      };
+    }, []);
+    React__default["default"].useLayoutEffect(() => {
+      updatePosition();
+    }, [placement, isOpen, offset, shouldFlip, crossOffset, shouldOverlapWithTrigger]);
+    const returnProps = {
+      rendered,
+      overlayProps: {
+        style: { ...position.position
+        }
+      },
+      placement: position.placement,
+      arrowProps: {
+        style: {
+          left: position.arrowOffsetLeft,
+          top: position.arrowOffsetTop
+        }
+      },
+      updatePosition
+    };
+
+    if (position.maxHeight !== undefined) {
+      //@ts-ignore
+      returnProps.overlayProps.style.maxHeight = position.maxHeight;
+    }
+
+    return returnProps;
+  }
+
+  function translateRTL(position) {
+    if (isRTL()) {
+      return position.replace('start', 'right').replace('end', 'left');
+    }
+
+    return position.replace('start', 'left').replace('end', 'right');
+  }
+
+  const calculatePosition = opts => {
+    let {
+      placement,
+      targetNode,
+      overlayNode,
+      scrollNode,
+      padding,
+      shouldFlip,
+      boundaryElement,
+      offset,
+      crossOffset,
+      shouldOverlapWithTrigger
+    } = opts;
+    let childOffset = targetNode;
+    let isContainerPositioned = false;
+    let overlaySize = overlayNode;
+    let margins = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    };
+    let scrollSize = scrollNode;
+    let boundaryDimensions = boundaryElement;
+    let containerOffsetWithBoundary = overlayNode;
+    return calculatePositionInternal(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, shouldOverlapWithTrigger);
+  };
+
+  function calculatePositionInternal(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, shouldOverlapWithTrigger) {
+    let placementInfo = parsePlacement(placementInput);
+    let {
+      size,
+      crossAxis,
+      crossSize,
+      placement,
+      crossPlacement
+    } = placementInfo;
+    let position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset);
+    let normalizedOffset = offset;
+    let space = getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, placementInfo);
+
+    if (flip && scrollSize[size] > space) {
+      let flippedPlacementInfo = parsePlacement(`${FLIPPED_DIRECTION[placement]} ${crossPlacement}`);
+      let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset);
+      let flippedSpace = getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, flippedPlacementInfo); // If the available space for the flipped position is greater than the original available space, flip.
+
+      if (flippedSpace > space) {
+        placementInfo = flippedPlacementInfo;
+        position = flippedPosition;
+        normalizedOffset = offset;
+      }
+    }
+
+    let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
+    position[crossAxis] += delta;
+    let maxHeight = getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset);
+    overlaySize.height = Math.min(overlaySize.height, maxHeight);
+    position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset);
+    delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
+    position[crossAxis] += delta;
+    let arrowPosition = {};
+    arrowPosition[crossAxis] = childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
+
+    if (shouldOverlapWithTrigger) {
+      position[FLIPPED_DIRECTION[placementInfo.placement]] = position[FLIPPED_DIRECTION[placementInfo.placement]] - childOffset[size];
+    }
+
+    return {
+      position,
+      maxHeight,
+      arrowOffsetLeft: arrowPosition.left,
+      arrowOffsetTop: arrowPosition.top,
+      placement: placementInfo.placement
+    };
+  }
+
+  function getDelta(axis, offset, size, containerDimensions, padding) {
+    //@ts-ignore
+    let containerScroll = containerDimensions[axis]; //@ts-ignore
+
+    let containerHeight = containerDimensions[AXIS_SIZE[axis]];
+    let startEdgeOffset = offset - padding - containerScroll;
+    let endEdgeOffset = offset + padding - containerScroll + size;
+
+    if (startEdgeOffset < 0) {
+      return -startEdgeOffset;
+    } else if (endEdgeOffset > containerHeight) {
+      return Math.max(containerHeight - endEdgeOffset, -startEdgeOffset);
+    } else {
+      return 0;
+    }
+  }
+
+  function getMaxHeight(position, boundaryDimensions, _containerOffsetWithBoundary, childOffset, _margins, _padding) {
+    return position.top != null ? // We want the distance between the top of the overlay to the bottom of the boundary
+    Math.max(0, boundaryDimensions.height - // this is the bottom of the boundary
+    position.top // this is the top of the overlay
+    ) : // We want the distance between the top of the trigger to the top of the boundary
+    Math.max(0, childOffset.top - // this is the top of the trigger
+    0 // this is the top of the boundary
+    );
+  }
+
+  function computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, _containerOffsetWithBoundary, _isContainerPositioned) {
+    let {
+      placement,
+      crossPlacement,
+      axis,
+      crossAxis,
+      size,
+      crossSize
+    } = placementInfo;
+    let position = {}; //@ts-ignore
+
+    position[crossAxis] = childOffset[crossAxis];
+
+    if (crossPlacement === 'center') {
+      position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]) / 2;
+    } else if (crossPlacement !== crossAxis) {
+      position[crossAxis] += childOffset[crossSize] - overlaySize[crossSize];
+    }
+
+    position[crossAxis] += crossOffset; // this is button center position - the overlay size + half of the button to align bottom of overlay with button center
+
+    let minViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2 - overlaySize[crossSize]; // this is button position of center, aligns top of overlay with button center
+
+    let maxViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2; // clamp it into the range of the min/max positions
+
+    position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition); // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
+
+    if (placement === axis) {
+      // If the container is positioned (non-static), then we use the container's actual
+      // height, as `bottom` will be relative to this height.  But if the container is static,
+      // then it can only be the `document.body`, and `bottom` will be relative to _its_
+      // container, which should be as large as boundaryDimensions.
+      const containerHeight = boundaryDimensions[size];
+      position[FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset);
+    } else {
+      position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
+    }
+
+    return position;
+  }
+
+  function getAvailableSpace(boundaryDimensions, _containerOffsetWithBoundary, childOffset, _margins, padding, placementInfo) {
+    let {
+      placement,
+      axis,
+      size
+    } = placementInfo;
+
+    if (placement === axis) {
+      return Math.max(0, childOffset[axis] - padding);
+    }
+
+    return Math.max(0, boundaryDimensions[size] - childOffset[axis] - childOffset[size] - padding);
+  }
+
+  const AXIS = {
+    top: 'top',
+    bottom: 'top',
+    left: 'left',
+    right: 'left'
+  };
+  const FLIPPED_DIRECTION = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+  };
+  const CROSS_AXIS = {
+    top: 'left',
+    left: 'top'
+  };
+  const AXIS_SIZE = {
+    top: 'height',
+    left: 'width'
+  };
+  const PARSED_PLACEMENT_CACHE = {};
+
+  function parsePlacement(input) {
+    if (PARSED_PLACEMENT_CACHE[input]) {
+      return PARSED_PLACEMENT_CACHE[input];
+    }
+
+    let [placement, crossPlacement] = input.split(' ');
+    let axis = AXIS[placement] || 'right';
+    let crossAxis = CROSS_AXIS[axis];
+
+    if (!AXIS[crossPlacement]) {
+      crossPlacement = 'center';
+    }
+
+    let size = AXIS_SIZE[axis];
+    let crossSize = AXIS_SIZE[crossAxis];
+    PARSED_PLACEMENT_CACHE[input] = {
+      placement,
+      crossPlacement,
+      axis,
+      crossAxis,
+      size,
+      crossSize
+    };
+    return PARSED_PLACEMENT_CACHE[input];
+  }
+
+  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+  const PortalContext = /*#__PURE__*/React__default["default"].createContext(null);
+  let globalOverlayCounter = 0;
+  function PortalProvider(props) {
+    const [items, setItems] = React__default["default"].useState([]);
+
+    const setOverlayItem = item => {
+      const overlayId = ++globalOverlayCounter;
+      setItems(prev => prev.concat([{
+        id: overlayId,
+        node: item
+      }]));
+      return overlayId;
+    };
+
+    const updateOverlayItem = (id, node) => {
+      setItems(prev => prev.map(item => {
+        if (item.id === id) {
+          return {
+            id,
+            node
+          };
+        }
+
+        return item;
+      }));
+    };
+
+    const removeOverlayItem = id => {
+      setItems(prev => {
+        const newItems = prev.filter(item => item.id !== id);
+        return newItems;
+      });
+    };
+
+    return /*#__PURE__*/React__default["default"].createElement(PortalContext.Provider, {
+      value: {
+        items,
+        setOverlayItem,
+        removeOverlayItem,
+        updateOverlayItem
+      }
+    }, props.children, items.map(item => {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+        key: item.id
+      }, item.node);
+    }));
+  }
+
+  function OverlayView(props) {
+    return /*#__PURE__*/React__default["default"].createElement(_reactNative.View, _extends({
+      pointerEvents: "box-none",
+      style: _reactNative.StyleSheet.absoluteFill,
+      collapsable: false
+    }, props));
+  }
+
+  const OverlayProvider = PortalProvider;
+  function OverlayContainer(props) {
+    const context = usePortalProvider();
+    const overlayId = React__default["default"].useRef(undefined);
+    let contents = /*#__PURE__*/React__default["default"].createElement(OverlayView, props);
+    React.useEffect(() => {
+      // Mount
+      if (overlayId.current === undefined) {
+        overlayId.current = context === null || context === void 0 ? void 0 : context.setOverlayItem(contents);
+      } // Update
+      else {
+          if (overlayId.current) {
+            context === null || context === void 0 ? void 0 : context.updateOverlayItem(overlayId.current, contents);
+          }
+        }
+    }, // To re-render the child
+    [props]); // Unmount
+
+    React.useEffect(() => {
+      return () => {
+        if (overlayId.current) {
+          context === null || context === void 0 ? void 0 : context.removeOverlayItem(overlayId.current);
+        }
+      };
+    }, []);
+    return null;
+  }
+
+  function usePortalProvider() {
+    const context = React__default["default"].useContext(PortalContext);
+    return context;
+  }
 
   function useViewport(initialViewport) {
     var _useState = React.useState(initialViewport),
@@ -37897,7 +38318,7 @@
     return viewport;
   }
 
-  var propTypes$1e = {
+  var propTypes$1f = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types,
     utilities: PropTypes.object,
@@ -37928,15 +38349,15 @@
     };
     return /*#__PURE__*/React__default["default"].createElement(Context.Provider, {
       value: context
-    }, children);
+    }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children));
   }
 
-  Provider.propTypes = propTypes$1e;
+  Provider.propTypes = propTypes$1f;
 
   var TextStyleContext = /*#__PURE__*/React__default["default"].createContext();
   TextStyleContext.displayName = 'TextStyleContext';
 
-  var propTypes$1d = {
+  var propTypes$1e = {
     children: PropTypes.node,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
@@ -37954,7 +38375,7 @@
     }, children);
   }
 
-  TextStyleProvider.propTypes = propTypes$1d;
+  TextStyleProvider.propTypes = propTypes$1e;
 
   function useMedia() {
     var context = React.useContext(Context);
@@ -38035,7 +38456,7 @@
   }
 
   var _excluded$1g = ["style", "styleName"];
-  var propTypes$1c = {
+  var propTypes$1d = {
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
@@ -38056,12 +38477,12 @@
     }));
   });
   View.displayName = 'View';
-  View.propTypes = propTypes$1c;
+  View.propTypes = propTypes$1d;
 
   var _excluded$1f = ["children", "color", "dismissible", "style"];
 
   var _templateObject$_, _templateObject2$F, _templateObject3$k;
-  var propTypes$1b = {
+  var propTypes$1c = {
     children: PropTypes.node.isRequired,
     color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
     dismissible: PropTypes.bool,
@@ -38104,12 +38525,12 @@
     }, children));
   });
   Alert.displayName = 'Alert';
-  Alert.propTypes = propTypes$1b;
+  Alert.propTypes = propTypes$1c;
 
   var _excluded$1e = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
 
   var _templateObject$Z, _templateObject2$E, _templateObject3$j, _templateObject4$f, _templateObject5$d;
-  var propTypes$1a = {
+  var propTypes$1b = {
     color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
     small: PropTypes.bool,
     mark: PropTypes.bool,
@@ -38178,12 +38599,12 @@
     }, element);
   });
   Text.displayName = 'Text';
-  Text.propTypes = propTypes$1a;
+  Text.propTypes = propTypes$1b;
 
   var _excluded$1d = ["children", "color", "style", "styleName"];
 
   var _templateObject$Y, _templateObject2$D;
-  var propTypes$19 = {
+  var propTypes$1a = {
     children: PropTypes.node.isRequired,
     color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
     // eslint-disable-next-line react/forbid-prop-types
@@ -38222,7 +38643,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(Text, null, children)));
   });
   Badge.displayName = 'Badge';
-  Badge.propTypes = propTypes$19;
+  Badge.propTypes = propTypes$1a;
 
   var ButtonGroupContext = /*#__PURE__*/React__default["default"].createContext();
   ButtonGroupContext.displayName = 'ButtonGroupContext';
@@ -38230,7 +38651,7 @@
   var _excluded$1c = ["children", "size", "style"];
 
   var _templateObject$X;
-  var propTypes$18 = {
+  var propTypes$19 = {
     children: PropTypes.node.isRequired,
     size: PropTypes.oneOf(['lg', 'sm']),
     // eslint-disable-next-line react/forbid-prop-types
@@ -38259,12 +38680,12 @@
     }, makeListChildren(children)));
   });
   ButtonGroup.displayName = 'ButtonGroup';
-  ButtonGroup.propTypes = propTypes$18;
+  ButtonGroup.propTypes = propTypes$19;
 
   var _excluded$1b = ["children", "style"];
 
   var _templateObject$W;
-  var propTypes$17 = {
+  var propTypes$18 = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
@@ -38285,7 +38706,7 @@
     }), children);
   });
   ButtonToolbar.displayName = 'ButtonToolbar';
-  ButtonToolbar.propTypes = propTypes$17;
+  ButtonToolbar.propTypes = propTypes$18;
 
   var prefix = 'Invariant failed';
   function invariant(condition, message) {
@@ -38299,7 +38720,7 @@
 
   function useForcedContext(Context) {
     var context = React.useContext(Context);
-    invariant(context, "Failed to get context \"".concat(Context.dispalyName, "\"."));
+    invariant(context, "Failed to get context \"".concat(Context.displayName, "\"."));
     return context;
   }
 
@@ -38353,7 +38774,7 @@
   }
 
   var _excluded$18 = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
-  var propTypes$16 = {
+  var propTypes$17 = {
     children: PropTypes.node,
     active: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
@@ -38442,7 +38863,7 @@
     } : children);
   });
   Pressable.displayName = 'Pressable';
-  Pressable.propTypes = propTypes$16;
+  Pressable.propTypes = propTypes$17;
 
   var _excluded$17 = ["active", "handlePress"];
   function useToggleButton(props) {
@@ -38470,7 +38891,7 @@
   var _excluded$16 = ["children", "color", "size", "outline", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
 
   var _templateObject$V, _templateObject2$C, _templateObject3$i, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$9, _templateObject8$8, _templateObject9$3, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
-  var propTypes$15 = {
+  var propTypes$16 = {
     children: PropTypes.node.isRequired,
     color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
     size: PropTypes.oneOf(['lg', 'sm']),
@@ -38599,13 +39020,13 @@
     }), children);
   });
   Button.displayName = 'Button';
-  Button.propTypes = propTypes$15;
+  Button.propTypes = propTypes$16;
   Button.useToggle = useToggleButton;
 
   var _excluded$15 = ["children", "style"];
 
   var _templateObject$U, _templateObject2$B;
-  var propTypes$14 = {
+  var propTypes$15 = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
@@ -38629,12 +39050,12 @@
     }, children));
   });
   CardBody.displayName = 'CardBody';
-  CardBody.propTypes = propTypes$14;
+  CardBody.propTypes = propTypes$15;
 
   var _excluded$14 = ["children", "style"];
 
   var _templateObject$T, _templateObject2$A;
-  var propTypes$13 = {
+  var propTypes$14 = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
@@ -38658,12 +39079,12 @@
     }, children));
   });
   CardHeader.displayName = 'CardHeader';
-  CardHeader.propTypes = propTypes$13;
+  CardHeader.propTypes = propTypes$14;
 
   var _excluded$13 = ["children", "style"];
 
   var _templateObject$S, _templateObject2$z;
-  var propTypes$12 = {
+  var propTypes$13 = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
@@ -38687,12 +39108,12 @@
     }, children));
   });
   CardFooter.displayName = 'CardFooter';
-  CardFooter.propTypes = propTypes$12;
+  CardFooter.propTypes = propTypes$13;
 
   var _excluded$12 = ["children", "style"];
 
   var _templateObject$R;
-  var propTypes$11 = {
+  var propTypes$12 = {
     children: PropTypes.node.isRequired,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
@@ -38712,7 +39133,7 @@
     }), children);
   });
   Card.displayName = 'Card';
-  Card.propTypes = propTypes$11;
+  Card.propTypes = propTypes$12;
   Card.Header = CardHeader;
   Card.Body = CardBody;
   Card.Footer = CardFooter;
@@ -38720,7 +39141,7 @@
   var _excluded$11 = ["children", "disabled", "style", "textStyle"];
 
   var _templateObject$Q, _templateObject2$y, _templateObject3$h;
-  var propTypes$10 = {
+  var propTypes$11 = {
     children: PropTypes.node,
     disabled: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
@@ -38751,7 +39172,7 @@
     }), StyleSheet.value('btn-close-bg'));
   });
   CloseButton.displayName = 'CloseButton';
-  CloseButton.propTypes = propTypes$10;
+  CloseButton.propTypes = propTypes$11;
 
   var CollapseContext = /*#__PURE__*/React__default["default"].createContext();
   CollapseContext.displayName = 'CollapseContext';
@@ -38810,7 +39231,7 @@
     }, [visible]);
   }
 
-  var propTypes$$ = {
+  var propTypes$10 = {
     children: PropTypes.node.isRequired,
     defaultVisible: PropTypes.bool,
     visible: PropTypes.bool,
@@ -38830,7 +39251,7 @@
   };
 
   CollapseProvider.displayName = 'CollapseProvider';
-  CollapseProvider.propTypes = propTypes$$;
+  CollapseProvider.propTypes = propTypes$10;
 
   var _excluded$10 = ["onPress"];
   function useToggleCollapse(props) {
@@ -38852,7 +39273,7 @@
   }
 
   var _excluded$$ = ["children"];
-  var propTypes$_ = {
+  var propTypes$$ = {
     children: PropTypes.node
   };
   var Collapse = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -38873,7 +39294,7 @@
     }), children);
   });
   Collapse.displayName = 'Collapse';
-  Collapse.propTypes = propTypes$_;
+  Collapse.propTypes = propTypes$$;
   Collapse.Provider = CollapseProvider;
   Collapse.useToggle = useToggleCollapse;
 
@@ -38901,7 +39322,7 @@
   var _excluded$_ = ["fluid", "style"];
 
   var _templateObject$P, _templateObject2$x, _templateObject3$g, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$8, _templateObject8$7;
-  var propTypes$Z = {
+  var propTypes$_ = {
     children: PropTypes.node.isRequired,
     fluid: PropTypes.oneOf([true].concat(_toConsumableArray(Object.keys(CONTAINER_MAX_WIDTHS)))),
     // eslint-disable-next-line react/forbid-prop-types
@@ -38965,33 +39386,95 @@
     }));
   });
   Container.displayName = 'Container';
-  Container.propTypes = propTypes$Z;
+  Container.propTypes = propTypes$_;
 
   var DropdownContext = /*#__PURE__*/React__default["default"].createContext();
   DropdownContext.displayName = 'DropdownContext';
 
-  var _excluded$Z = ["children", "style"];
+  var propTypes$Z = {
+    children: PropTypes.func.isRequired,
+    placement: PropTypes.string.isRequired,
+    targetRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    offset: PropTypes.number,
+    visible: PropTypes.bool.isRequired
+  };
+
+  var Overlay = function Overlay(props) {
+    var children = props.children,
+        targetRef = props.targetRef,
+        placement = props.placement,
+        offset = props.offset,
+        visible = props.visible;
+    var overlayRef = React.useRef();
+    var overlay = useOverlayPosition({
+      placement: placement,
+      targetRef: targetRef,
+      overlayRef: overlayRef,
+      offset: offset,
+      isOpen: visible
+    });
+    return children(overlay, overlayRef);
+  };
+
+  Overlay.displayName = 'Overlay';
+  Overlay.propTypes = propTypes$Z;
+
+  var _excluded$Z = ["children", "start", "end", "style"];
 
   var _templateObject$O, _templateObject2$w;
+  var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
   var propTypes$Y = {
     children: PropTypes.node.isRequired,
+    start: PropTypes.oneOf(ALIGNMENT_BREAKPOINTS),
+    end: PropTypes.oneOf(ALIGNMENT_BREAKPOINTS),
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
   var styles$O = StyleSheet.create({
-    '.dropdown-menu': css$1(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: $zindex-dropdown;\n    // display: none; // none by default, but block on \"open\" of the menu\n    min-width: $dropdown-min-width;\n    padding: $dropdown-padding-y $dropdown-padding-x;\n    margin: 0; // Override default margin of ul\n    // list-style: none;\n    background-color: $dropdown-bg;\n    // background-clip: padding-box;\n    border: $dropdown-border-width solid $dropdown-border-color;\n    border-radius: $dropdown-border-radius;\n    // @include box-shadow($dropdown-box-shadow);\n    margin-top: $dropdown-spacer; // added for bootstrap-rn\n  "]))),
+    '.dropdown-menu': css$1(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: $zindex-dropdown;\n    // display: none; // none by default, but block on \"open\" of the menu\n    min-width: $dropdown-min-width;\n    padding: $dropdown-padding-y $dropdown-padding-x;\n    margin: 0; // Override default margin of ul\n    // list-style: none;\n    background-color: $dropdown-bg;\n    // background-clip: padding-box;\n    border: $dropdown-border-width solid $dropdown-border-color;\n    border-radius: $dropdown-border-radius;\n    // @include box-shadow($dropdown-box-shadow);\n  "]))),
     '.dropdown-menu-text': css$1(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n    font-size: $dropdown-font-size;\n    color: $dropdown-color;\n    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  "])))
   });
+
+  var getAlignment = function getAlignment(media, start, end) {
+    var alignStart = typeof start === 'boolean' ? start : media.up(start);
+    var alignEnd = typeof end === 'boolean' ? end : media.up(end);
+
+    if (!alignEnd) {
+      return 'start';
+    }
+
+    if (!alignStart) {
+      return 'end';
+    }
+
+    var startIndex = ALIGNMENT_BREAKPOINTS.indexOf(start);
+    var endIndex = ALIGNMENT_BREAKPOINTS.indexOf(end);
+    return startIndex > endIndex ? 'start' : 'end';
+  };
+
+  var getPlacement = function getPlacement(media, direction, start, end) {
+    if (direction === 'start' || direction === 'end') {
+      return "".concat(direction, " top");
+    }
+
+    return "".concat(direction, " ").concat(getAlignment(media, start, end));
+  };
+
   var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var children = props.children,
+        _props$start = props.start,
+        start = _props$start === void 0 ? true : _props$start,
+        _props$end = props.end,
+        end = _props$end === void 0 ? false : _props$end,
         style = props.style,
         elementProps = _objectWithoutProperties(props, _excluded$Z);
 
     var dropdown = useForcedContext(DropdownContext);
+    var media = useMedia();
     var identifier = dropdown.identifier,
-        visible = dropdown.visible,
-        menuRef = dropdown.menuRef,
-        menuPos = dropdown.menuPos;
+        direction = dropdown.direction,
+        triggerRef = dropdown.triggerRef,
+        visible = dropdown.visible;
 
     if (!visible) {
       return null;
@@ -38999,16 +39482,26 @@
 
     var classes = getStyles(styles$O, ['.dropdown-menu']);
     var textClasses = getStyles(styles$O, ['.dropdown-menu-text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$2({}, elementProps, {
-      ref: concatRefs(menuRef, ref),
-      accessibilityLabelledBy: identifier,
-      style: [classes, {
-        top: menuPos.y,
-        left: menuPos.x
-      }, style]
-    }), /*#__PURE__*/React__default["default"].createElement(TextStyleProvider, {
-      style: textClasses
-    }, children));
+    return /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
+      placement: getPlacement(media, direction, start, end),
+      targetRef: triggerRef,
+      offset: convertToNumber(StyleSheet.value('dropdown-spacer')),
+      visible: visible
+    }, function (_ref, menuRef) {
+      var overlayProps = _ref.overlayProps,
+          rendered = _ref.rendered;
+      return /*#__PURE__*/React__default["default"].createElement(View, _extends$2({}, elementProps, {
+        ref: concatRefs(menuRef, ref),
+        accessibilityLabelledBy: identifier,
+        style: [classes, style, {
+          opacity: rendered ? 1 : 0
+        }, overlayProps.style]
+      }), /*#__PURE__*/React__default["default"].createElement(DropdownContext.Provider, {
+        value: dropdown
+      }, /*#__PURE__*/React__default["default"].createElement(TextStyleProvider, {
+        style: textClasses
+      }, children)));
+    }));
   });
   DropdownMenu.displayName = 'DropdownMenu';
   DropdownMenu.propTypes = propTypes$Y;
@@ -39046,12 +39539,12 @@
         textStyle = props.textStyle,
         elementProps = _objectWithoutProperties(props, _excluded$Y);
 
-    var context = React.useContext(DropdownContext);
+    var dropdown = useForcedContext(DropdownContext);
     var classes = getStyles(styles$N, ['.dropdown-item', active && '.dropdown-item-active', disabled && '.dropdown-item-disabled']);
     var textClasses = getStyles(styles$N, ['.dropdown-item-text', active && '.dropdown-item-active-text', disabled && '.dropdown-item-disabled-text']);
     return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$2({}, elementProps, {
       onPress: concatFns(function () {
-        context.setVisible(false);
+        dropdown.setVisible(false);
       }, handlePress),
       disabled: disabled,
       style: [classes, style],
@@ -39169,343 +39662,9 @@
   DropdownDivider.displayName = 'DropdownDivider';
   DropdownDivider.propTypes = propTypes$T;
 
-  function _extends() {
-    _extends = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-    return _extends.apply(this, arguments);
-  }
-
-  function rectToClientRect(rect) {
-    return { ...rect,
-      top: rect.y,
-      left: rect.x,
-      right: rect.x + rect.width,
-      bottom: rect.y + rect.height
-    };
-  }
-
-  var ORIGIN$1 = {
-    x: 0,
-    y: 0
-  };
-  var createPlatform = function createPlatform(_ref) {
-    var offsetParent = _ref.offsetParent,
-        _ref$sameScrollView = _ref.sameScrollView,
-        sameScrollView = _ref$sameScrollView === void 0 ? true : _ref$sameScrollView,
-        _ref$scrollOffsets = _ref.scrollOffsets,
-        scrollOffsets = _ref$scrollOffsets === void 0 ? ORIGIN$1 : _ref$scrollOffsets;
-    return {
-      getElementRects: function getElementRects(_ref2) {
-        var reference = _ref2.reference,
-            floating = _ref2.floating;
-        return new Promise(function (resolve) {
-          var onMeasure = function onMeasure(offsetX, offsetY) {
-            if (offsetX === void 0) {
-              offsetX = 0;
-            }
-
-            if (offsetY === void 0) {
-              offsetY = 0;
-            }
-
-            floating.measure(function (x, y, width, height) {
-              var floatingRect = _extends({
-                width: width,
-                height: height
-              }, ORIGIN$1);
-
-              var method = sameScrollView ? 'measure' : 'measureInWindow';
-              reference[method](function (x, y, width, height) {
-                var referenceRect = {
-                  width: width,
-                  height: height,
-                  x: x - offsetX,
-                  y: y - offsetY
-                };
-                resolve({
-                  reference: referenceRect,
-                  floating: floatingRect
-                });
-              });
-            });
-          };
-
-          if (offsetParent.current) {
-            offsetParent.current.measure(onMeasure);
-          } else {
-            onMeasure();
-          }
-        });
-      },
-      getClippingClientRect: function getClippingClientRect() {
-        var _Dimensions$get = _reactNative.Dimensions.get('window'),
-            width = _Dimensions$get.width,
-            height = _Dimensions$get.height;
-
-        return Promise.resolve(rectToClientRect(_extends({
-          width: width,
-          height: height
-        }, sameScrollView ? scrollOffsets : ORIGIN$1)));
-      },
-      convertOffsetParentRelativeRectToViewportRelativeRect: function convertOffsetParentRelativeRectToViewportRelativeRect(_ref3) {
-        var rect = _ref3.rect;
-        return new Promise(function (resolve) {
-          var onMeasure = function onMeasure(offsetX, offsetY) {
-            if (offsetX === void 0) {
-              offsetX = 0;
-            }
-
-            if (offsetY === void 0) {
-              offsetY = 0;
-            }
-
-            resolve(_extends({}, rect, {
-              x: rect.x + offsetX,
-              y: rect.y + offsetY
-            }));
-          };
-
-          if (offsetParent.current) {
-            offsetParent.current.measure(onMeasure);
-          } else {
-            onMeasure();
-          }
-        });
-      },
-      getDocumentElement: function getDocumentElement() {
-        return Promise.resolve({});
-      },
-      // these are the properties accessed on an offsetParent
-      getOffsetParent: function getOffsetParent() {
-        return Promise.resolve({
-          clientLeft: 0,
-          clientTop: 0,
-          clientWidth: 0,
-          clientHeight: 0
-        });
-      },
-      getDimensions: function getDimensions(_ref4) {
-        var element = _ref4.element;
-        return new Promise(function (resolve) {
-          return element.measure(function (_ref5) {
-            var width = _ref5.width,
-                height = _ref5.height;
-            return resolve({
-              width: width,
-              height: height
-            });
-          });
-        });
-      },
-      isElement: function isElement() {
-        return Promise.resolve(true);
-      }
-    };
-  };
-
-  // Fork of `fast-deep-equal` that only does the comparisons we need and compares
-  // functions
-  function deepEqual(a, b) {
-    if (a === b) {
-      return true;
-    }
-
-    if (typeof a !== typeof b) {
-      return false;
-    }
-
-    if (typeof a === 'function' && a.toString() === b.toString()) {
-      return true;
-    }
-
-    var length, i, keys;
-
-    if (a && b && typeof a == 'object') {
-      if (Array.isArray(a)) {
-        length = a.length;
-        if (length != b.length) return false;
-
-        for (i = length; i-- !== 0;) {
-          if (!deepEqual(a[i], b[i])) {
-            return false;
-          }
-        }
-
-        return true;
-      }
-
-      keys = Object.keys(a);
-      length = keys.length;
-
-      if (length !== Object.keys(b).length) {
-        return false;
-      }
-
-      for (i = length; i-- !== 0;) {
-        if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
-          return false;
-        }
-      }
-
-      for (i = length; i-- !== 0;) {
-        var key = keys[i];
-
-        if (key === '_owner' && a.$$typeof) {
-          continue;
-        }
-
-        if (!deepEqual(a[key], b[key])) {
-          return false;
-        }
-      }
-
-      return true;
-    }
-
-    return a !== a && b !== b;
-  }
-
-  var ORIGIN = {
-    x: 0,
-    y: 0
-  };
-  var useFloating = function useFloating(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-        _ref$placement = _ref.placement,
-        placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-        middleware = _ref.middleware,
-        _ref$sameScrollView = _ref.sameScrollView,
-        sameScrollView = _ref$sameScrollView === void 0 ? true : _ref$sameScrollView;
-
-    var reference = React.useRef();
-    var floating = React.useRef();
-    var offsetParent = React.useRef();
-
-    var _useState = React.useState({
-      x: null,
-      y: null,
-      placement: placement,
-      strategy: 'absolute',
-      middlewareData: {}
-    }),
-        data = _useState[0],
-        setData = _useState[1];
-
-    var _useState2 = React.useState(ORIGIN),
-        scrollOffsets = _useState2[0],
-        setScrollOffsets = _useState2[1];
-
-    var platform = React.useMemo(function () {
-      return createPlatform({
-        offsetParent: offsetParent,
-        scrollOffsets: scrollOffsets,
-        sameScrollView: sameScrollView
-      });
-    }, [offsetParent, scrollOffsets, sameScrollView]);
-
-    var _useState3 = React.useState(middleware),
-        latestMiddleware = _useState3[0],
-        setLatestMiddleware = _useState3[1];
-
-    if (!deepEqual(latestMiddleware == null ? void 0 : latestMiddleware.map(function (_ref2) {
-      var options = _ref2.options;
-      return options;
-    }), middleware == null ? void 0 : middleware.map(function (_ref3) {
-      var options = _ref3.options;
-      return options;
-    }))) {
-      setLatestMiddleware(middleware);
-    }
-
-    var animationFrames = React.useRef([]);
-    var isMountedRef = React.useRef(true);
-    React.useLayoutEffect(function () {
-      isMountedRef.current = true;
-      return function () {
-        isMountedRef.current = false;
-      };
-    }, []);
-    var update = React.useCallback(function () {
-      if (!reference.current || !floating.current) {
-        return;
-      }
-
-      floatingUi_core.computePosition(reference.current, floating.current, {
-        middleware: latestMiddleware,
-        platform: platform,
-        placement: placement
-      }).then(function (data) {
-        if (isMountedRef.current) {
-          setData(data);
-        }
-      });
-    }, [latestMiddleware, platform, placement]);
-    React.useLayoutEffect(function () {
-      var frames = animationFrames.current;
-      frames.push(requestAnimationFrame(update));
-      return function () {
-        frames.forEach(cancelAnimationFrame);
-        animationFrames.current = [];
-      };
-    }, [update]);
-    var setReference = React.useCallback(function (node) {
-      reference.current = node;
-      animationFrames.current.push(requestAnimationFrame(update));
-    }, [update]);
-    var setFloating = React.useCallback(function (node) {
-      floating.current = node;
-      animationFrames.current.push(requestAnimationFrame(update));
-    }, [update]);
-    var setOffsetParent = React.useCallback(function (node) {
-      offsetParent.current = node;
-      animationFrames.current.push(requestAnimationFrame(update));
-    }, [update]);
-    return React.useMemo(function () {
-      return _extends({}, data, {
-        update: update,
-        refs: {
-          reference: reference,
-          floating: floating,
-          offsetParent: offsetParent
-        },
-        offsetParent: setOffsetParent,
-        reference: setReference,
-        floating: setFloating,
-        scrollProps: {
-          onScroll: function onScroll(event) {
-            return setScrollOffsets(event.nativeEvent.contentOffset);
-          },
-          scrollEventThrottle: 16
-        }
-      });
-    }, [data, setReference, setFloating, setOffsetParent, update]);
-  };
-
-  function useDropdown(defaultVisible, controlledVisible, onToggle, placement) {
+  function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
     var identifier = useIdentifier('dropdown');
-
-    var _useFloating = useFloating({
-      placement: placement,
-      middleware: [floatingUi_core.shift()]
-    }),
-        _useFloating$x = _useFloating.x,
-        x = _useFloating$x === void 0 ? 0 : _useFloating$x,
-        _useFloating$y = _useFloating.y,
-        y = _useFloating$y === void 0 ? 0 : _useFloating$y,
-        triggerRef = _useFloating.reference,
-        menuRef = _useFloating.floating;
+    var triggerRef = React.useRef();
 
     var _useControlledState = useControlledState(defaultVisible, controlledVisible, onToggle),
         _useControlledState2 = _slicedToArray(_useControlledState, 2),
@@ -39518,13 +39677,9 @@
         visible: visible,
         setVisible: setVisible,
         triggerRef: triggerRef,
-        menuRef: menuRef,
-        menuPos: {
-          x: x,
-          y: y
-        }
+        direction: direction
       };
-    }, [visible, x, y]);
+    }, [visible]);
   }
 
   var _excluded$T = ["onPress"];
@@ -39548,16 +39703,16 @@
     });
   }
 
-  var _excluded$S = ["children", "defaultVisible", "visible", "onToggle", "placement", "style"];
+  var _excluded$S = ["children", "defaultVisible", "visible", "onToggle", "direction", "style"];
 
   var _templateObject$I;
-  var PLACEMENTS$2 = ['top', 'bottom', 'left', 'right'];
+  var DIRECTIONS = ['top', 'bottom', 'start', 'end'];
   var propTypes$S = {
     children: PropTypes.node,
     defaultVisible: PropTypes.bool,
     visible: PropTypes.bool,
     onToggle: PropTypes.func,
-    placement: PropTypes.oneOf(PLACEMENTS$2),
+    direction: PropTypes.oneOf(DIRECTIONS),
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
@@ -39570,12 +39725,12 @@
         defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
         visible = props.visible,
         onToggle = props.onToggle,
-        _props$placement = props.placement,
-        placement = _props$placement === void 0 ? 'bottom' : _props$placement,
+        _props$direction = props.direction,
+        direction = _props$direction === void 0 ? 'bottom' : _props$direction,
         style = props.style,
         elementProps = _objectWithoutProperties(props, _excluded$S);
 
-    var dropdown = useDropdown(defaultVisible, visible, onToggle, placement);
+    var dropdown = useDropdown(defaultVisible, visible, onToggle, direction);
     var classes = getStyles(styles$I, ['.dropdown']);
     return /*#__PURE__*/React__default["default"].createElement(View, _extends$2({}, elementProps, {
       ref: ref,
@@ -41245,7 +41400,7 @@
     defaultExpanded: PropTypes.bool,
     expanded: PropTypes.bool,
     onToggle: PropTypes.func,
-    expand: PropTypes.oneOf([true, 'sm', 'md', 'lg', 'xl']),
+    expand: PropTypes.oneOf([true, 'sm', 'md', 'lg', 'xl', 'xxl']),
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };