@coreui/react 4.5.2 → 4.6.0

package/dist/index.js

@@ -7087,8 +7087,8 @@ CNavbarToggler.displayName = 'CNavbarToggler';
 
 var COffcanvas = React.forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, _c = _a.backdrop, backdrop = _c === void 0 ? true : _c, className = _a.className, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _e = _a.portal, portal = _e === void 0 ? true : _e, _f = _a.scroll, scroll = _f === void 0 ? false : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "scroll", "visible"]);
-    var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
+    var children = _a.children, _c = _a.backdrop, backdrop = _c === void 0 ? true : _c, className = _a.className, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _e = _a.portal, portal = _e === void 0 ? false : _e, _f = _a.responsive, responsive = _f === void 0 ? true : _f, _g = _a.scroll, scroll = _g === void 0 ? false : _g, _h = _a.visible, visible = _h === void 0 ? false : _h, rest = __rest(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
+    var _j = React.useState(visible), _visible = _j[0], setVisible = _j[1];
     var offcanvasRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, offcanvasRef);
     React.useEffect(function () {
@@ -7107,19 +7107,27 @@ var COffcanvas = React.forwardRef(function (_a, ref) {
             document.body.style.removeProperty('padding-right');
         }
     }, [_visible]);
-    var _className = classNames('offcanvas', (_b = {},
+    var getTransitionClass = function (state) {
+        return state === 'entering'
+            ? 'showing'
+            : state === 'entered'
+                ? 'show'
+                : state === 'exiting'
+                    ? 'show hiding'
+                    : '';
+    };
+    var _className = classNames((_b = {},
+        _b["offcanvas".concat(typeof responsive !== 'boolean' ? '-' + responsive : '')] = responsive,
         _b["offcanvas-".concat(placement)] = placement,
-        _b.show = _visible,
         _b), className);
-    var transitionStyles = {
-        entering: { visibility: 'visible' },
-        entered: { visibility: 'visible' },
-        exiting: { visibility: 'visible' },
-        exited: { visibility: 'hidden' },
-    };
     var handleDismiss = function () {
         setVisible(false);
     };
+    var handleBackdropDismiss = function () {
+        if (backdrop !== 'static') {
+            setVisible(false);
+        }
+    };
     var handleKeyDown = React.useCallback(function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
@@ -7127,7 +7135,7 @@ var COffcanvas = React.forwardRef(function (_a, ref) {
     }, [ref, handleDismiss]);
     var offcanvas = function (ref, state) {
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", __assign({ className: _className, role: "dialog", style: __assign({}, transitionStyles[state]), tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
+            React.createElement("div", __assign({ className: classNames(_className, getTransitionClass(state)), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Transition$1, { in: _visible, nodeRef: offcanvasRef, onEnter: onShow, onEntered: function () { var _a; return (_a = offcanvasRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onExit: onHide, timeout: 300 }, function (state) {
@@ -7137,11 +7145,11 @@ var COffcanvas = React.forwardRef(function (_a, ref) {
         }),
         typeof window !== 'undefined' && portal
             ? backdrop &&
-                ReactDOM.createPortal(React.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }), document.body)
-            : backdrop && (React.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }))));
+                ReactDOM.createPortal(React.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible }), document.body)
+            : backdrop && (React.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible }))));
 });
 COffcanvas.propTypes = {
-    backdrop: propTypesExports.bool,
+    backdrop: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.oneOf(['static'])]),
     children: propTypesExports.node,
     className: propTypesExports.string,
     keyboard: propTypesExports.bool,
@@ -7150,6 +7158,10 @@ COffcanvas.propTypes = {
     placement: propTypesExports.oneOf(['start', 'end', 'top', 'bottom'])
         .isRequired,
     portal: propTypesExports.bool,
+    responsive: propTypesExports.oneOfType([
+        propTypesExports.bool,
+        propTypesExports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    ]),
     scroll: propTypesExports.bool,
     visible: propTypesExports.bool,
 };