bootstrap-rn 0.2.11 → 0.2.13

package/dist/bootstrap-rn.cjs.js

@@ -678,23 +678,10 @@ var UnitValue = /*#__PURE__*/function () {
   }
 
   _createClass(UnitValue, [{
-    key: "toPercentage",
-    value: function toPercentage() {
-      if (!['number', 'percent'].includes(this.unit)) {
-        throw new Error("Unexpected unit \"".concat(this.unit, "\"."));
-      }
-
-      if (this.unit === 'percent') {
-        return this.value / 100;
-      }
-
-      return this.value;
-    }
-  }, {
     key: "toNumber",
     value: function toNumber() {
-      if (!['number', 'px', 'rem'].includes(this.unit)) {
-        throw new Error("Unexpected unit \"".concat(this.unit, "\"."));
+      if (this.unit === 'percent') {
+        return this.value / 100;
       }
 
       if (this.unit === 'rem') {
@@ -706,7 +693,15 @@ var UnitValue = /*#__PURE__*/function () {
   }, {
     key: "toString",
     value: function toString() {
-      return "".concat(this.value).concat(this.unit === 'number' ? '' : this.unit);
+      if (this.unit === 'number') {
+        return this.value;
+      }
+
+      if (this.unit === 'percent') {
+        return "".concat(this.value, "%");
+      }
+
+      return "".concat(this.value).concat(this.unit);
     }
   }], [{
     key: "parse",
@@ -733,12 +728,28 @@ var UnitValue = /*#__PURE__*/function () {
 }();
 
 var POWER = Math.pow(10, 8);
+var UNIT_ORDER = ['percent', 'number', 'px', 'rem'];
 
 var fixRounding = function fixRounding(value) {
   return Math.round(value * POWER) / POWER;
 };
 
-var calculateValue = function calculateValue(value1, operator, value2) {
+var normalizeValue$1 = function normalizeValue(number1, number2) {
+  if (number1.unit === 'px' && number2.unit === 'rem') {
+    return number1.value / (reactNative.PixelRatio.getFontScale() * 16);
+  }
+
+  if (number1.unit === 'percent' && number2.unit !== 'percent') {
+    return number1.value / 100;
+  }
+
+  return number1.value;
+};
+
+var calculateValue = function calculateValue(number1, operator, number2) {
+  var value1 = normalizeValue$1(number1, number2);
+  var value2 = normalizeValue$1(number2, number1);
+
   switch (operator) {
     case '+':
       return value1 + value2;
@@ -760,24 +771,18 @@ var calculateValue = function calculateValue(value1, operator, value2) {
   }
 };
 
-var pxToRem = function pxToRem(value) {
-  return value / (reactNative.PixelRatio.getFontScale() * 16);
+var determineUnit = function determineUnit(number1, number2) {
+  var index1 = UNIT_ORDER.indexOf(number1.unit);
+  var index2 = UNIT_ORDER.indexOf(number2.unit);
+  return index1 > index2 ? number1.unit : number2.unit;
 };
 
 function calculate(value1, operator, value2) {
   var number1 = UnitValue.parse(value1);
   var number2 = UnitValue.parse(value2);
-
-  if (number1.unit === 'px' && number2.unit === 'rem') {
-    return "".concat(calculateValue(pxToRem(number1.value), operator, number2.value), "rem");
-  }
-
-  if (number1.unit === 'rem' && number2.unit === 'px') {
-    return "".concat(calculateValue(number1.value, operator, pxToRem(number2.value)), "rem");
-  }
-
-  var unit = number1.unit === 'number' ? number2.unit : number1.unit;
-  return "".concat(calculateValue(number1.value, operator, number2.value)).concat(unit === 'number' ? '' : unit);
+  var value = calculateValue(number1, operator, number2);
+  var unit = determineUnit(number1, number2);
+  return new UnitValue(value, unit).toString();
 }
 function normalizeNumber(value) {
   return UnitValue.parse(value).toNumber();
@@ -1083,7 +1088,7 @@ function mix(color1, color2) {
   var weight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
   var rgb1 = RgbaValue.parse(color1).toRgb();
   var rgb2 = RgbaValue.parse(color2).toRgb();
-  var percentage = UnitValue.parse(weight).toPercentage();
+  var percentage = UnitValue.parse(weight).toNumber();
 
   var _rgb1$map = rgb1.map(function (value, key) {
     return Math.round(rgb2[key] + (value - rgb2[key]) * percentage);
@@ -2542,7 +2547,7 @@ var shiftColor = fn(function (_ref9, t) {
       color = _ref10[0],
       weight = _ref10[1];
 
-  var percentage = UnitValue.parse(weight).toPercentage();
+  var percentage = UnitValue.parse(weight).toNumber();
   var handle = percentage > 0 ? shadeColor(color, percentage) : tintColor(color, -percentage);
   return handle(t);
 });
@@ -3662,7 +3667,7 @@ function useModifier(name, props, ref) {
 }
 
 var _excluded$1p = ["toggle", "dismiss"],
-    _excluded2$2 = ["ref"];
+    _excluded2$3 = ["ref"];
 
 var getActionHook = function getActionHook(toggle, dismiss) {
   if (toggle) {
@@ -3693,7 +3698,7 @@ function useAction(props, ref) {
 
   var _useActionHook = useActionHook(restProps),
       actionRef = _useActionHook.ref,
-      actionProps = _objectWithoutProperties(_useActionHook, _excluded2$2);
+      actionProps = _objectWithoutProperties(_useActionHook, _excluded2$3);
 
   return [actionProps, concatRefs(actionRef, ref)];
 }
@@ -5274,21 +5279,32 @@ var Overlay = function Overlay(props) {
     overlayRef: overlayRef,
     offset: offset,
     isOpen: visible
-  }); // Remove undefined arrow styles and adjust arrow offset.
+  }); // Remove unnecessary arrow styles and adjust arrow offset.
 
-  if (overlay.arrowProps.style.left === undefined) {
+  if (placement === 'top' || placement === 'bottom') {
+    delete overlay.arrowProps.style.top;
+
+    if (typeof overlay.arrowProps.style.left === 'number') {
+      overlay.arrowProps.style.left -= arrowOffset;
+    }
+  }
+
+  if (placement === 'left' || placement === 'right') {
     delete overlay.arrowProps.style.left;
 
-    if (overlay.arrowProps.style.top) {
+    if (typeof overlay.arrowProps.style.top === 'number') {
       overlay.arrowProps.style.top -= arrowOffset;
     }
-  }
+  } // Adjust top value by status bar height on Android
 
-  if (overlay.arrowProps.style.top === undefined) {
-    delete overlay.arrowProps.style.top;
 
-    if (overlay.arrowProps.style.left) {
-      overlay.arrowProps.style.left -= arrowOffset;
+  if (reactNative.Platform.OS === 'android' && reactNative.StatusBar.currentHeight) {
+    if (typeof overlay.overlayProps.style.top === 'number') {
+      overlay.overlayProps.style.top -= reactNative.StatusBar.currentHeight;
+    }
+
+    if (typeof overlay.arrowProps.style.top === 'number') {
+      overlay.arrowProps.style.top -= reactNative.StatusBar.currentHeight;
     }
   }
 
@@ -6524,7 +6540,7 @@ Popover.Header = PopoverHeader;
 Popover.Body = PopoverBody;
 
 var _excluded$M = ["title", "content", "autoClose", "trigger", "placement"],
-    _excluded2$1 = ["popover"];
+    _excluded2$2 = ["popover"];
 var propTypes$O = {
   popover: PropTypes__default["default"].shape(_objectSpread2({
     title: PropTypes__default["default"].node,
@@ -6545,7 +6561,7 @@ function injectPopover(Target) {
         _props$popover$placem = _props$popover.placement,
         placement = _props$popover$placem === void 0 ? 'right' : _props$popover$placem,
         tooltipProps = _objectWithoutProperties(_props$popover, _excluded$M),
-        elementProps = _objectWithoutProperties(props, _excluded2$1);
+        elementProps = _objectWithoutProperties(props, _excluded2$2);
     /* eslint-enable */
 
 
@@ -6721,7 +6737,7 @@ Tooltip.Arrow = TooltipArrow;
 Tooltip.Inner = TooltipInner;
 
 var _excluded$I = ["title", "autoClose", "trigger", "placement"],
-    _excluded2 = ["tooltip"];
+    _excluded2$1 = ["tooltip"];
 var propTypes$K = {
   tooltip: PropTypes__default["default"].shape(_objectSpread2({
     title: PropTypes__default["default"].node.isRequired,
@@ -6740,7 +6756,7 @@ function injectTooltip(Target) {
         _props$tooltip$placem = _props$tooltip.placement,
         placement = _props$tooltip$placem === void 0 ? 'top' : _props$tooltip$placem,
         tooltipProps = _objectWithoutProperties(_props$tooltip, _excluded$I),
-        elementProps = _objectWithoutProperties(props, _excluded2);
+        elementProps = _objectWithoutProperties(props, _excluded2$1);
     /* eslint-enable */
 
 
@@ -7033,11 +7049,14 @@ ListGroup.propTypes = propTypes$F;
 ListGroup.Item = ListGroupItem;
 ListGroup.ItemAction = ListGroupItemAction;
 
-var _excluded$C = ["children", "style"];
+var _excluded$C = ["children", "onHoverIn", "onHoverOut", "onMouseEnter", "onMouseLeave", "style"],
+    _excluded2 = ["onHoverIn", "onHoverOut"];
 
 var _templateObject$w;
 var propTypes$E = {
   children: PropTypes__default["default"].node.isRequired,
+  onMouseEnter: PropTypes__default["default"].func,
+  onMouseLeave: PropTypes__default["default"].func,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
 };
@@ -7055,7 +7074,13 @@ var Link = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
       actionProps = _useAction2[0],
       actionRef = _useAction2[1];
 
-  var children = actionProps.children,
+  var children = actionProps.children;
+      actionProps.onHoverIn;
+      actionProps.onHoverOut;
+      var _actionProps$onMouseE = actionProps.onMouseEnter,
+      handleMouseEnter = _actionProps$onMouseE === void 0 ? function () {} : _actionProps$onMouseE,
+      _actionProps$onMouseL = actionProps.onMouseLeave,
+      handleMouseLeave = _actionProps$onMouseL === void 0 ? function () {} : _actionProps$onMouseL,
       style = actionProps.style,
       elementProps = _objectWithoutProperties(actionProps, _excluded$C);
 
@@ -7065,9 +7090,20 @@ var Link = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
 
   var _useInteractionState = useInteractionState(elementProps),
       interaction = _useInteractionState.interaction,
-      interactionProps = _useInteractionState.interactionProps;
+      _useInteractionState$ = _useInteractionState.interactionProps,
+      handleMouseEnterInteraction = _useInteractionState$.onHoverIn,
+      handleMouseLeaveInteraction = _useInteractionState$.onHoverOut,
+      interactionProps = _objectWithoutProperties(_useInteractionState$, _excluded2);
 
   return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, interactionProps, {
+    onMouseEnter: function onMouseEnter(event) {
+      handleMouseEnter(event);
+      handleMouseEnterInteraction(event);
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      handleMouseLeave(event);
+      handleMouseLeaveInteraction(event);
+    },
     ref: actionRef,
     accessibilityRole: getRole$2(actionProps),
     accessible: true,
@@ -8011,6 +8047,14 @@ var Offcanvas = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     transparent: true,
     visible: navbar ? navbar.expanded : visible,
     onRequestClose: handleToggle
+  }, placement !== 'bottom' && /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, {
+    style: {
+      flexGrow: 0
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, {
+    style: {
+      flexGrow: 1
+    }
   }, backdrop && /*#__PURE__*/React__default["default"].createElement(View, {
     style: backdropClasses
   }, /*#__PURE__*/React__default["default"].createElement(BackdropHandler, {
@@ -8021,11 +8065,7 @@ var Offcanvas = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     ref: concatRefs(offcanvasRef, ref),
     style: [classes, style],
     textStyle: [textClasses, textStyle]
-  }), /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, {
-    style: {
-      flexShrink: 1
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(View, {
+  }), /*#__PURE__*/React__default["default"].createElement(View, {
     style: [dialogClasses, dialogStyle],
     textStyle: dialogTextStyle
   }, /*#__PURE__*/React__default["default"].createElement(OffcanvasContext.Provider, {

package/dist/bootstrap-rn.esm.js

@@ -1,6 +1,6 @@
 import { OverlayProvider, useOverlayPosition, OverlayContainer } from '@react-native-aria/overlays';
 export { PortalProvider } from '@react-native-aria/overlays';
-import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, SafeAreaView, unstable_createElement, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, Picker as Picker$1, Animated, Easing } from 'react-native';
+import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, SafeAreaView, unstable_createElement, StatusBar, findNodeHandle, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1, ScrollView as ScrollView$1, Modal as Modal$1, Picker as Picker$1, Animated, Easing } from 'react-native';
 import { transformRawValue, getStylesForProperty, getPropertyName } from 'css-to-react-native';
 import React, { useState, useEffect, useMemo, useRef, useContext, createContext } from 'react';
 import PropTypes from 'prop-types';
@@ -669,23 +669,10 @@ var UnitValue = /*#__PURE__*/function () {
   }
 
   _createClass(UnitValue, [{
-    key: "toPercentage",
-    value: function toPercentage() {
-      if (!['number', 'percent'].includes(this.unit)) {
-        throw new Error("Unexpected unit \"".concat(this.unit, "\"."));
-      }
-
-      if (this.unit === 'percent') {
-        return this.value / 100;
-      }
-
-      return this.value;
-    }
-  }, {
     key: "toNumber",
     value: function toNumber() {
-      if (!['number', 'px', 'rem'].includes(this.unit)) {
-        throw new Error("Unexpected unit \"".concat(this.unit, "\"."));
+      if (this.unit === 'percent') {
+        return this.value / 100;
       }
 
       if (this.unit === 'rem') {
@@ -697,7 +684,15 @@ var UnitValue = /*#__PURE__*/function () {
   }, {
     key: "toString",
     value: function toString() {
-      return "".concat(this.value).concat(this.unit === 'number' ? '' : this.unit);
+      if (this.unit === 'number') {
+        return this.value;
+      }
+
+      if (this.unit === 'percent') {
+        return "".concat(this.value, "%");
+      }
+
+      return "".concat(this.value).concat(this.unit);
     }
   }], [{
     key: "parse",
@@ -724,12 +719,28 @@ var UnitValue = /*#__PURE__*/function () {
 }();
 
 var POWER = Math.pow(10, 8);
+var UNIT_ORDER = ['percent', 'number', 'px', 'rem'];
 
 var fixRounding = function fixRounding(value) {
   return Math.round(value * POWER) / POWER;
 };
 
-var calculateValue = function calculateValue(value1, operator, value2) {
+var normalizeValue$1 = function normalizeValue(number1, number2) {
+  if (number1.unit === 'px' && number2.unit === 'rem') {
+    return number1.value / (PixelRatio.getFontScale() * 16);
+  }
+
+  if (number1.unit === 'percent' && number2.unit !== 'percent') {
+    return number1.value / 100;
+  }
+
+  return number1.value;
+};
+
+var calculateValue = function calculateValue(number1, operator, number2) {
+  var value1 = normalizeValue$1(number1, number2);
+  var value2 = normalizeValue$1(number2, number1);
+
   switch (operator) {
     case '+':
       return value1 + value2;
@@ -751,24 +762,18 @@ var calculateValue = function calculateValue(value1, operator, value2) {
   }
 };
 
-var pxToRem = function pxToRem(value) {
-  return value / (PixelRatio.getFontScale() * 16);
+var determineUnit = function determineUnit(number1, number2) {
+  var index1 = UNIT_ORDER.indexOf(number1.unit);
+  var index2 = UNIT_ORDER.indexOf(number2.unit);
+  return index1 > index2 ? number1.unit : number2.unit;
 };
 
 function calculate(value1, operator, value2) {
   var number1 = UnitValue.parse(value1);
   var number2 = UnitValue.parse(value2);
-
-  if (number1.unit === 'px' && number2.unit === 'rem') {
-    return "".concat(calculateValue(pxToRem(number1.value), operator, number2.value), "rem");
-  }
-
-  if (number1.unit === 'rem' && number2.unit === 'px') {
-    return "".concat(calculateValue(number1.value, operator, pxToRem(number2.value)), "rem");
-  }
-
-  var unit = number1.unit === 'number' ? number2.unit : number1.unit;
-  return "".concat(calculateValue(number1.value, operator, number2.value)).concat(unit === 'number' ? '' : unit);
+  var value = calculateValue(number1, operator, number2);
+  var unit = determineUnit(number1, number2);
+  return new UnitValue(value, unit).toString();
 }
 function normalizeNumber(value) {
   return UnitValue.parse(value).toNumber();
@@ -1074,7 +1079,7 @@ function mix(color1, color2) {
   var weight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
   var rgb1 = RgbaValue.parse(color1).toRgb();
   var rgb2 = RgbaValue.parse(color2).toRgb();
-  var percentage = UnitValue.parse(weight).toPercentage();
+  var percentage = UnitValue.parse(weight).toNumber();
 
   var _rgb1$map = rgb1.map(function (value, key) {
     return Math.round(rgb2[key] + (value - rgb2[key]) * percentage);
@@ -2533,7 +2538,7 @@ var shiftColor = fn(function (_ref9, t) {
       color = _ref10[0],
       weight = _ref10[1];
 
-  var percentage = UnitValue.parse(weight).toPercentage();
+  var percentage = UnitValue.parse(weight).toNumber();
   var handle = percentage > 0 ? shadeColor(color, percentage) : tintColor(color, -percentage);
   return handle(t);
 });
@@ -3653,7 +3658,7 @@ function useModifier(name, props, ref) {
 }
 
 var _excluded$1p = ["toggle", "dismiss"],
-    _excluded2$2 = ["ref"];
+    _excluded2$3 = ["ref"];
 
 var getActionHook = function getActionHook(toggle, dismiss) {
   if (toggle) {
@@ -3684,7 +3689,7 @@ function useAction(props, ref) {
 
   var _useActionHook = useActionHook(restProps),
       actionRef = _useActionHook.ref,
-      actionProps = _objectWithoutProperties(_useActionHook, _excluded2$2);
+      actionProps = _objectWithoutProperties(_useActionHook, _excluded2$3);
 
   return [actionProps, concatRefs(actionRef, ref)];
 }
@@ -5265,21 +5270,32 @@ var Overlay = function Overlay(props) {
     overlayRef: overlayRef,
     offset: offset,
     isOpen: visible
-  }); // Remove undefined arrow styles and adjust arrow offset.
+  }); // Remove unnecessary arrow styles and adjust arrow offset.
 
-  if (overlay.arrowProps.style.left === undefined) {
+  if (placement === 'top' || placement === 'bottom') {
+    delete overlay.arrowProps.style.top;
+
+    if (typeof overlay.arrowProps.style.left === 'number') {
+      overlay.arrowProps.style.left -= arrowOffset;
+    }
+  }
+
+  if (placement === 'left' || placement === 'right') {
     delete overlay.arrowProps.style.left;
 
-    if (overlay.arrowProps.style.top) {
+    if (typeof overlay.arrowProps.style.top === 'number') {
       overlay.arrowProps.style.top -= arrowOffset;
     }
-  }
+  } // Adjust top value by status bar height on Android
 
-  if (overlay.arrowProps.style.top === undefined) {
-    delete overlay.arrowProps.style.top;
 
-    if (overlay.arrowProps.style.left) {
-      overlay.arrowProps.style.left -= arrowOffset;
+  if (Platform.OS === 'android' && StatusBar.currentHeight) {
+    if (typeof overlay.overlayProps.style.top === 'number') {
+      overlay.overlayProps.style.top -= StatusBar.currentHeight;
+    }
+
+    if (typeof overlay.arrowProps.style.top === 'number') {
+      overlay.arrowProps.style.top -= StatusBar.currentHeight;
     }
   }
 
@@ -6515,7 +6531,7 @@ Popover.Header = PopoverHeader;
 Popover.Body = PopoverBody;
 
 var _excluded$M = ["title", "content", "autoClose", "trigger", "placement"],
-    _excluded2$1 = ["popover"];
+    _excluded2$2 = ["popover"];
 var propTypes$O = {
   popover: PropTypes.shape(_objectSpread2({
     title: PropTypes.node,
@@ -6536,7 +6552,7 @@ function injectPopover(Target) {
         _props$popover$placem = _props$popover.placement,
         placement = _props$popover$placem === void 0 ? 'right' : _props$popover$placem,
         tooltipProps = _objectWithoutProperties(_props$popover, _excluded$M),
-        elementProps = _objectWithoutProperties(props, _excluded2$1);
+        elementProps = _objectWithoutProperties(props, _excluded2$2);
     /* eslint-enable */
 
 
@@ -6712,7 +6728,7 @@ Tooltip.Arrow = TooltipArrow;
 Tooltip.Inner = TooltipInner;
 
 var _excluded$I = ["title", "autoClose", "trigger", "placement"],
-    _excluded2 = ["tooltip"];
+    _excluded2$1 = ["tooltip"];
 var propTypes$K = {
   tooltip: PropTypes.shape(_objectSpread2({
     title: PropTypes.node.isRequired,
@@ -6731,7 +6747,7 @@ function injectTooltip(Target) {
         _props$tooltip$placem = _props$tooltip.placement,
         placement = _props$tooltip$placem === void 0 ? 'top' : _props$tooltip$placem,
         tooltipProps = _objectWithoutProperties(_props$tooltip, _excluded$I),
-        elementProps = _objectWithoutProperties(props, _excluded2);
+        elementProps = _objectWithoutProperties(props, _excluded2$1);
     /* eslint-enable */
 
 
@@ -7024,11 +7040,14 @@ ListGroup.propTypes = propTypes$F;
 ListGroup.Item = ListGroupItem;
 ListGroup.ItemAction = ListGroupItemAction;
 
-var _excluded$C = ["children", "style"];
+var _excluded$C = ["children", "onHoverIn", "onHoverOut", "onMouseEnter", "onMouseLeave", "style"],
+    _excluded2 = ["onHoverIn", "onHoverOut"];
 
 var _templateObject$w;
 var propTypes$E = {
   children: PropTypes.node.isRequired,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any
 };
@@ -7046,7 +7065,13 @@ var Link = /*#__PURE__*/React.forwardRef(function (props, ref) {
       actionProps = _useAction2[0],
       actionRef = _useAction2[1];
 
-  var children = actionProps.children,
+  var children = actionProps.children;
+      actionProps.onHoverIn;
+      actionProps.onHoverOut;
+      var _actionProps$onMouseE = actionProps.onMouseEnter,
+      handleMouseEnter = _actionProps$onMouseE === void 0 ? function () {} : _actionProps$onMouseE,
+      _actionProps$onMouseL = actionProps.onMouseLeave,
+      handleMouseLeave = _actionProps$onMouseL === void 0 ? function () {} : _actionProps$onMouseL,
       style = actionProps.style,
       elementProps = _objectWithoutProperties(actionProps, _excluded$C);
 
@@ -7056,9 +7081,20 @@ var Link = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useInteractionState = useInteractionState(elementProps),
       interaction = _useInteractionState.interaction,
-      interactionProps = _useInteractionState.interactionProps;
+      _useInteractionState$ = _useInteractionState.interactionProps,
+      handleMouseEnterInteraction = _useInteractionState$.onHoverIn,
+      handleMouseLeaveInteraction = _useInteractionState$.onHoverOut,
+      interactionProps = _objectWithoutProperties(_useInteractionState$, _excluded2);
 
   return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, interactionProps, {
+    onMouseEnter: function onMouseEnter(event) {
+      handleMouseEnter(event);
+      handleMouseEnterInteraction(event);
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      handleMouseLeave(event);
+      handleMouseLeaveInteraction(event);
+    },
     ref: actionRef,
     accessibilityRole: getRole$2(actionProps),
     accessible: true,
@@ -8002,6 +8038,14 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
     transparent: true,
     visible: navbar ? navbar.expanded : visible,
     onRequestClose: handleToggle
+  }, placement !== 'bottom' && /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      flexGrow: 0
+    }
+  }), /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: {
+      flexGrow: 1
+    }
   }, backdrop && /*#__PURE__*/React.createElement(View, {
     style: backdropClasses
   }, /*#__PURE__*/React.createElement(BackdropHandler, {
@@ -8012,11 +8056,7 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: concatRefs(offcanvasRef, ref),
     style: [classes, style],
     textStyle: [textClasses, textStyle]
-  }), /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: {
-      flexShrink: 1
-    }
-  }, /*#__PURE__*/React.createElement(View, {
+  }), /*#__PURE__*/React.createElement(View, {
     style: [dialogClasses, dialogStyle],
     textStyle: dialogTextStyle
   }, /*#__PURE__*/React.createElement(OffcanvasContext.Provider, {