bootstrap-rn 0.1.0 → 0.1.1

package/dist/bootstrap-rn.cjs.js

@@ -8,16 +8,16 @@ var polished = require('polished');
 var React = require('react');
 var reactNativeSvg = require('react-native-svg');
 var PropTypes = require('prop-types');
+var overlays = require('@react-native-aria/overlays');
 var invariant = require('tiny-invariant');
-var reactNative$1 = require('@floating-ui/react-native');
-var Overlay = require('react-native-popover-view');
+var Overlay$1 = require('react-native-popover-view');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
-var Overlay__default = /*#__PURE__*/_interopDefaultLegacy(Overlay);
+var Overlay__default = /*#__PURE__*/_interopDefaultLegacy(Overlay$1);
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -1046,6 +1046,11 @@ function convertToREM(value) {
     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.
@@ -2617,7 +2622,7 @@ function useViewport(initialViewport) {
   return viewport;
 }
 
-var propTypes$1e = {
+var propTypes$1f = {
   children: PropTypes__default["default"].node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types,
   utilities: PropTypes__default["default"].object,
@@ -2648,15 +2653,15 @@ function Provider(props) {
   };
   return /*#__PURE__*/React__default["default"].createElement(Context.Provider, {
     value: context
-  }, children);
+  }, /*#__PURE__*/React__default["default"].createElement(overlays.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__default["default"].node,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
@@ -2674,7 +2679,7 @@ function TextStyleProvider(props) {
   }, children);
 }
 
-TextStyleProvider.propTypes = propTypes$1d;
+TextStyleProvider.propTypes = propTypes$1e;
 
 function useMedia() {
   var context = React.useContext(Context);
@@ -2755,7 +2760,7 @@ function useStyle(style, styleName) {
 }
 
 var _excluded$1g = ["style", "styleName"];
-var propTypes$1c = {
+var propTypes$1d = {
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any,
   // eslint-disable-next-line react/forbid-prop-types
@@ -2776,12 +2781,12 @@ var View = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
   }));
 });
 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__default["default"].node.isRequired,
   color: PropTypes__default["default"].oneOf(Object.keys(THEME_COLORS)),
   dismissible: PropTypes__default["default"].bool,
@@ -2824,12 +2829,12 @@ var Alert = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
   }, 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__default["default"].oneOf(Object.keys(THEME_COLORS)),
   small: PropTypes__default["default"].bool,
   mark: PropTypes__default["default"].bool,
@@ -2898,12 +2903,12 @@ var Text = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
   }, 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__default["default"].node.isRequired,
   color: PropTypes__default["default"].oneOf(Object.keys(THEME_COLORS)),
   // eslint-disable-next-line react/forbid-prop-types
@@ -2942,7 +2947,7 @@ var Badge = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
   }, /*#__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';
@@ -2950,7 +2955,7 @@ ButtonGroupContext.displayName = 'ButtonGroupContext';
 var _excluded$1c = ["children", "size", "style"];
 
 var _templateObject$X;
-var propTypes$18 = {
+var propTypes$19 = {
   children: PropTypes__default["default"].node.isRequired,
   size: PropTypes__default["default"].oneOf(['lg', 'sm']),
   // eslint-disable-next-line react/forbid-prop-types
@@ -2979,12 +2984,12 @@ var ButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function (pr
   }, 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__default["default"].node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
@@ -3005,11 +3010,11 @@ var ButtonToolbar = /*#__PURE__*/React__default["default"].forwardRef(function (
   }), children);
 });
 ButtonToolbar.displayName = 'ButtonToolbar';
-ButtonToolbar.propTypes = propTypes$17;
+ButtonToolbar.propTypes = propTypes$18;
 
 function useForcedContext(Context) {
   var context = React.useContext(Context);
-  invariant__default["default"](context, "Failed to get context \"".concat(Context.dispalyName, "\"."));
+  invariant__default["default"](context, "Failed to get context \"".concat(Context.displayName, "\"."));
   return context;
 }
 
@@ -3063,7 +3068,7 @@ function useAction(props, ref) {
 }
 
 var _excluded$18 = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
-var propTypes$16 = {
+var propTypes$17 = {
   children: PropTypes__default["default"].node,
   active: PropTypes__default["default"].bool,
   // eslint-disable-next-line react/forbid-prop-types
@@ -3152,7 +3157,7 @@ var Pressable = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   } : children);
 });
 Pressable.displayName = 'Pressable';
-Pressable.propTypes = propTypes$16;
+Pressable.propTypes = propTypes$17;
 
 var _excluded$17 = ["active", "handlePress"];
 function useToggleButton(props) {
@@ -3180,7 +3185,7 @@ function useToggleButton(props) {
 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__default["default"].node.isRequired,
   color: PropTypes__default["default"].oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
   size: PropTypes__default["default"].oneOf(['lg', 'sm']),
@@ -3309,13 +3314,13 @@ var Button = /*#__PURE__*/React__default["default"].forwardRef(function (props,
   }), 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__default["default"].node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
@@ -3339,12 +3344,12 @@ var CardBody = /*#__PURE__*/React__default["default"].forwardRef(function (props
   }, 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__default["default"].node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
@@ -3368,12 +3373,12 @@ var CardHeader = /*#__PURE__*/React__default["default"].forwardRef(function (pro
   }, 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__default["default"].node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
@@ -3397,12 +3402,12 @@ var CardFooter = /*#__PURE__*/React__default["default"].forwardRef(function (pro
   }, 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__default["default"].node.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
@@ -3422,7 +3427,7 @@ var Card = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
   }), children);
 });
 Card.displayName = 'Card';
-Card.propTypes = propTypes$11;
+Card.propTypes = propTypes$12;
 Card.Header = CardHeader;
 Card.Body = CardBody;
 Card.Footer = CardFooter;
@@ -3430,7 +3435,7 @@ Card.Footer = CardFooter;
 var _excluded$11 = ["children", "disabled", "style", "textStyle"];
 
 var _templateObject$Q, _templateObject2$y, _templateObject3$h;
-var propTypes$10 = {
+var propTypes$11 = {
   children: PropTypes__default["default"].node,
   disabled: PropTypes__default["default"].bool,
   // eslint-disable-next-line react/forbid-prop-types
@@ -3461,7 +3466,7 @@ var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (pr
   }), 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';
@@ -3520,7 +3525,7 @@ function useCollapse(defaultVisible, controlledVisible, onToggle) {
   }, [visible]);
 }
 
-var propTypes$$ = {
+var propTypes$10 = {
   children: PropTypes__default["default"].node.isRequired,
   defaultVisible: PropTypes__default["default"].bool,
   visible: PropTypes__default["default"].bool,
@@ -3540,7 +3545,7 @@ var CollapseProvider = function CollapseProvider(props) {
 };
 
 CollapseProvider.displayName = 'CollapseProvider';
-CollapseProvider.propTypes = propTypes$$;
+CollapseProvider.propTypes = propTypes$10;
 
 var _excluded$10 = ["onPress"];
 function useToggleCollapse(props) {
@@ -3562,7 +3567,7 @@ function useToggleCollapse(props) {
 }
 
 var _excluded$$ = ["children"];
-var propTypes$_ = {
+var propTypes$$ = {
   children: PropTypes__default["default"].node
 };
 var Collapse = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -3583,7 +3588,7 @@ var Collapse = /*#__PURE__*/React__default["default"].forwardRef(function (props
   }), children);
 });
 Collapse.displayName = 'Collapse';
-Collapse.propTypes = propTypes$_;
+Collapse.propTypes = propTypes$$;
 Collapse.Provider = CollapseProvider;
 Collapse.useToggle = useToggleCollapse;
 
@@ -3611,7 +3616,7 @@ NavbarContext.displayName = 'NavbarContext';
 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__default["default"].node.isRequired,
   fluid: PropTypes__default["default"].oneOf([true].concat(_toConsumableArray(Object.keys(CONTAINER_MAX_WIDTHS)))),
   // eslint-disable-next-line react/forbid-prop-types
@@ -3675,33 +3680,95 @@ var Container = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   }));
 });
 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__default["default"].func.isRequired,
+  placement: PropTypes__default["default"].string.isRequired,
+  targetRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+  offset: PropTypes__default["default"].number,
+  visible: PropTypes__default["default"].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 = overlays.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__default["default"].node.isRequired,
+  start: PropTypes__default["default"].oneOf(ALIGNMENT_BREAKPOINTS),
+  end: PropTypes__default["default"].oneOf(ALIGNMENT_BREAKPOINTS),
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
 };
 var styles$N = StyleSheet.create({
-  '.dropdown-menu': css(_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(_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(_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;
@@ -3709,16 +3776,26 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
 
   var classes = getStyles(styles$N, ['.dropdown-menu']);
   var textClasses = getStyles(styles$N, ['.dropdown-menu-text']);
-  return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, 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(overlays.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({}, 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;
@@ -3756,12 +3833,12 @@ var DropdownItem = function DropdownItem(props) {
       textStyle = props.textStyle,
       elementProps = _objectWithoutProperties(props, _excluded$Y);
 
-  var context = React.useContext(DropdownContext);
+  var dropdown = useForcedContext(DropdownContext);
   var classes = getStyles(styles$M, ['.dropdown-item', active && '.dropdown-item-active', disabled && '.dropdown-item-disabled']);
   var textClasses = getStyles(styles$M, ['.dropdown-item-text', active && '.dropdown-item-active-text', disabled && '.dropdown-item-disabled-text']);
   return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
     onPress: concatFns(function () {
-      context.setVisible(false);
+      dropdown.setVisible(false);
     }, handlePress),
     disabled: disabled,
     style: [classes, style],
@@ -3879,19 +3956,9 @@ var DropdownDivider = /*#__PURE__*/React__default["default"].forwardRef(function
 DropdownDivider.displayName = 'DropdownDivider';
 DropdownDivider.propTypes = propTypes$T;
 
-function useDropdown(defaultVisible, controlledVisible, onToggle, placement) {
+function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
   var identifier = useIdentifier('dropdown');
-
-  var _useFloating = reactNative$1.useFloating({
-    placement: placement,
-    middleware: [reactNative$1.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),
@@ -3904,13 +3971,9 @@ function useDropdown(defaultVisible, controlledVisible, onToggle, placement) {
       visible: visible,
       setVisible: setVisible,
       triggerRef: triggerRef,
-      menuRef: menuRef,
-      menuPos: {
-        x: x,
-        y: y
-      }
+      direction: direction
     };
-  }, [visible, x, y]);
+  }, [visible]);
 }
 
 var _excluded$T = ["onPress"];
@@ -3934,16 +3997,16 @@ function useToggleDropdown(props) {
   });
 }
 
-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__default["default"].node,
   defaultVisible: PropTypes__default["default"].bool,
   visible: PropTypes__default["default"].bool,
   onToggle: PropTypes__default["default"].func,
-  placement: PropTypes__default["default"].oneOf(PLACEMENTS$2),
+  direction: PropTypes__default["default"].oneOf(DIRECTIONS),
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
 };
@@ -3956,12 +4019,12 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (props
       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$H, ['.dropdown']);
   return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
     ref: ref,
@@ -5631,7 +5694,7 @@ var propTypes$j = {
   defaultExpanded: PropTypes__default["default"].bool,
   expanded: PropTypes__default["default"].bool,
   onToggle: PropTypes__default["default"].func,
-  expand: PropTypes__default["default"].oneOf([true, 'sm', 'md', 'lg', 'xl']),
+  expand: PropTypes__default["default"].oneOf([true, 'sm', 'md', 'lg', 'xl', 'xxl']),
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
 };