@coreui/react 4.5.2 → 4.6.0

package/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.5.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.6.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/offcanvas/COffcanvas.d.ts

@@ -3,7 +3,7 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Apply a backdrop on body while offcanvas is open.
      */
-    backdrop?: boolean;
+    backdrop?: boolean | 'static';
     /**
      * A string of all className you want applied to the base component.
      */
@@ -28,6 +28,12 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
      * Generates modal using createPortal.
      */
     portal?: boolean;
+    /**
+     * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+     *
+     * @since 4.6.0
+     */
+    responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
     /**
      * Allow body scrolling while offcanvas is open
      */

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import { useForkedRef } from './useForkedRef';
+export { useForkedRef };

package/dist/hooks/useForkedRef.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type AssignableRef<ValueType> = {
+    bivarianceHack(instance: ValueType | null): void;
+}['bivarianceHack'] | React.MutableRefObject<ValueType | null>;
+export declare function useForkedRef<RefValueType = any>(...refs: (AssignableRef<RefValueType> | null | undefined)[]): ((node: any) => void) | null;
+export declare function assignRef<RefValueType = any>(ref: AssignableRef<RefValueType> | null | undefined, value: any): void;
+export declare function isFunction(value: any): value is Function;

package/dist/index.es.js

@@ -7067,8 +7067,8 @@ CNavbarToggler.displayName = 'CNavbarToggler';
 
 var COffcanvas = 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 = 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 = useState(visible), _visible = _j[0], setVisible = _j[1];
     var offcanvasRef = useRef(null);
     var forkedRef = useForkedRef(ref, offcanvasRef);
     useEffect(function () {
@@ -7087,19 +7087,27 @@ var COffcanvas = 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 = useCallback(function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
@@ -7107,7 +7115,7 @@ var COffcanvas = forwardRef(function (_a, ref) {
     }, [ref, handleDismiss]);
     var offcanvas = function (ref, state) {
         return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", __assign({ className: _className, role: "dialog", style: __assign({}, transitionStyles[state]), tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
+            React__default.createElement("div", __assign({ className: classNames(_className, getTransitionClass(state)), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: ref }), children)));
     };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.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) {
@@ -7117,11 +7125,11 @@ var COffcanvas = forwardRef(function (_a, ref) {
         }),
         typeof window !== 'undefined' && portal
             ? backdrop &&
-                createPortal(React__default.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }), document.body)
-            : backdrop && (React__default.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleDismiss, visible: _visible }))));
+                createPortal(React__default.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible }), document.body)
+            : backdrop && (React__default.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,
@@ -7130,6 +7138,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,
 };