tabler-react-2 0.1.171 → 0.1.172

package/dist/offcanvas/index.js

@@ -32,7 +32,6 @@ var Offcanvas = exports.Offcanvas = /*#__PURE__*/_react["default"].memo(function
     size = _ref$size === void 0 ? 300 : _ref$size,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex;
-  // backdrop style
   var backdropStyle = (0, _react.useMemo)(function () {
     return {
       position: "fixed",
@@ -43,9 +42,7 @@ var Offcanvas = exports.Offcanvas = /*#__PURE__*/_react["default"].memo(function
       backgroundColor: "rgba(0,0,0,0.1)",
       zIndex: zIndex - 1
     };
-  }, []);
-
-  // offcanvas container style
+  }, [zIndex]);
   var containerStyle = (0, _react.useMemo)(function () {
     var base = {
       position: "fixed",
@@ -91,7 +88,7 @@ var Offcanvas = exports.Offcanvas = /*#__PURE__*/_react["default"].memo(function
           transform: show ? "translateX(0)" : "translateX(-100%)"
         });
     }
-  }, [position, show]);
+  }, [position, show, size, zIndex]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, show && /*#__PURE__*/_react["default"].createElement("div", {
     style: backdropStyle,
     onClick: onHide
@@ -103,13 +100,9 @@ var Offcanvas = exports.Offcanvas = /*#__PURE__*/_react["default"].memo(function
 });
 Offcanvas.displayName = "Offcanvas";
 Offcanvas.propTypes = {
-  /** Show or hide the offcanvas */
   show: _propTypes["default"].bool.isRequired,
-  /** Callback when the backdrop is clicked */
   onHide: _propTypes["default"].func.isRequired,
-  /** Position: 'start' (left), 'end' (right), 'top', or 'bottom' */
   position: _propTypes["default"].oneOf(["start", "end", "top", "bottom"]),
-  /** Content inside the offcanvas */
   children: _propTypes["default"].node
 };
 Offcanvas.defaultProps = {
@@ -127,10 +120,14 @@ var useOffcanvas = exports.useOffcanvas = function useOffcanvas() {
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var _useState3 = (0, _react.useState)(Math.random()),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    rand = _useState4[0],
-    setRand = _useState4[1];
+    isMounted = _useState4[0],
+    setIsMounted = _useState4[1];
+  var _useState5 = (0, _react.useState)(Math.random()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rand = _useState6[0],
+    setRand = _useState6[1];
   var offcanvas = (0, _react.useCallback)(function () {
     var newOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     return new Promise(function (resolve) {
@@ -143,6 +140,7 @@ var useOffcanvas = exports.useOffcanvas = function useOffcanvas() {
           position: (_newOptions$position = newOptions.position) !== null && _newOptions$position !== void 0 ? _newOptions$position : prev.position
         });
       });
+      setIsMounted(true); // mount instantly
       setRand(Math.random());
     });
   }, []);
@@ -157,11 +155,23 @@ var useOffcanvas = exports.useOffcanvas = function useOffcanvas() {
       });
     });
   }, [state.resolve]);
+
+  // Delay unmount by 500ms to allow animation
+  (0, _react.useEffect)(function () {
+    if (!state.show && isMounted) {
+      var timer = setTimeout(function () {
+        setIsMounted(false);
+      }, 500);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [state.show, isMounted]);
   var OffcanvasElement = /*#__PURE__*/_react["default"].createElement(Offcanvas, _extends({
     show: state.show,
     onHide: close,
     position: state.position
-  }, options.offcanvasProps || {}), /*#__PURE__*/_react["default"].createElement(_button.Button, {
+  }, options.offcanvasProps || {}), isMounted && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_button.Button, {
     type: "button",
     className: "btn-close",
     "aria-label": "Close",
@@ -173,7 +183,7 @@ var useOffcanvas = exports.useOffcanvas = function useOffcanvas() {
     }
   }), /*#__PURE__*/_react["default"].createElement("div", {
     key: rand
-  }, state.content));
+  }, state.content)));
   return {
     offcanvas: offcanvas,
     OffcanvasElement: OffcanvasElement,