@coreui/react 4.7.0 → 4.8.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.7.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.8.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/accordion/index.d.ts

@@ -1,7 +1,6 @@
 import { CAccordion } from './CAccordion';
 import { CAccordionBody } from './CAccordionBody';
 import { CAccordionButton } from './CAccordionButton';
-import { CAccordionCollapse } from './CAccordionCollapse';
 import { CAccordionHeader } from './CAccordionHeader';
 import { CAccordionItem } from './CAccordionItem';
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, };

package/dist/components/dropdown/CDropdown.d.ts

@@ -64,6 +64,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
      * If you want to disable dynamic positioning set this property to `true`.
      */
     popper?: boolean;
+    /**
+     * Generates dropdown menu using createPortal.
+     *
+     * @since 4.8.0
+     */
+    portal?: boolean;
     /**
      * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
      */
@@ -76,6 +82,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 interface ContextProps extends CDropdownProps {
     dropdownToggleRef: RefObject<any> | undefined;
     setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    portal: boolean;
 }
 export declare const CDropdownContext: React.Context<ContextProps>;
 export declare const CDropdown: React.ForwardRefExoticComponent<CDropdownProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

package/dist/index.es.js

@@ -2605,15 +2605,6 @@ CAccordionButton.propTypes = {
 };
 CAccordionButton.displayName = 'CAccordionButton';
 
-var CAccordionCollapse = forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default.createElement(CCollapse, __assign({ className: "accordion-collapse" }, props, { ref: ref }), children));
-});
-CAccordionCollapse.propTypes = {
-    children: propTypesExports.node,
-};
-CAccordionCollapse.displayName = 'CAccordionCollapse';
-
 var CAccordionHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
     return (React__default.createElement("div", __assign({ className: classNames('accordion-header', className) }, rest, { ref: ref }),
@@ -5727,13 +5718,18 @@ function Reference(_ref) {
   });
 }
 
+var PopperManagerWrapper = function (_a) {
+    var children = _a.children, popper = _a.popper;
+    return popper ? React__default.createElement(Manager, null, children) : React__default.createElement(React__default.Fragment, null, children);
+};
 var CDropdownContext = createContext({});
 var CDropdown = forwardRef(function (_a, ref) {
-    var children = _a.children, alignment = _a.alignment, _b = _a.autoClose, autoClose = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, _d = _a.popper, popper = _d === void 0 ? true : _d, _e = _a.variant, variant = _e === void 0 ? 'btn-group' : _e, _f = _a.component, component = _f === void 0 ? 'div' : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "variant", "component", "visible"]);
+    var _b;
+    var children = _a.children, alignment = _a.alignment, _c = _a.autoClose, autoClose = _c === void 0 ? true : _c, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _d = _a.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = _a.popper, popper = _e === void 0 ? true : _e, _f = _a.portal, portal = _f === void 0 ? false : _f, _g = _a.variant, variant = _g === void 0 ? 'btn-group' : _g, _h = _a.component, component = _h === void 0 ? 'div' : _h, _j = _a.visible, visible = _j === void 0 ? false : _j, rest = __rest(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "portal", "variant", "component", "visible"]);
     var dropdownRef = useRef(null);
     var dropdownToggleRef = useRef(null);
     var forkedRef = useForkedRef(ref, dropdownRef);
-    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
+    var _k = useState(visible), _visible = _k[0], setVisible = _k[1];
     var Component = variant === 'nav-item' ? 'li' : component;
     // Disable popper if responsive aligment is set.
     if (typeof alignment === 'object') {
@@ -5747,6 +5743,7 @@ var CDropdown = forwardRef(function (_a, ref) {
         dropdownToggleRef: dropdownToggleRef,
         placement: placement,
         popper: popper,
+        portal: portal,
         variant: variant,
         visible: _visible,
         setVisible: setVisible,
@@ -5758,16 +5755,14 @@ var CDropdown = forwardRef(function (_a, ref) {
         _visible && onShow && onShow();
         !_visible && onHide && onHide();
     }, [_visible]);
-    var DropdownContent = function () {
-        return variant === 'input-group' ? (React__default.createElement(React__default.Fragment, null, children)) : (React__default.createElement(Component, __assign({ className: classNames(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
-                'dropdown-center': direction === 'center',
-                'dropup dropup-center': direction === 'dropup-center',
-                direction: direction && direction !== 'center' && direction !== 'dropup-center',
-                show: _visible,
-            }, className) }, rest, { ref: forkedRef }), children));
-    };
-    return (React__default.createElement(CDropdownContext.Provider, { value: contextValues }, popper ? (React__default.createElement(Manager, null,
-        React__default.createElement(DropdownContent, null))) : (React__default.createElement(DropdownContent, null))));
+    return (React__default.createElement(CDropdownContext.Provider, { value: contextValues },
+        React__default.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React__default.createElement(React__default.Fragment, null, children)) : (React__default.createElement(Component, __assign({ className: classNames(variant === 'nav-item' ? 'nav-item dropdown' : variant, (_b = {
+                    'dropdown-center': direction === 'center',
+                    'dropup dropup-center': direction === 'dropup-center'
+                },
+                _b["".concat(direction)] = direction && direction !== 'center' && direction !== 'dropup-center',
+                _b.show = _visible,
+                _b), className) }, rest, { ref: forkedRef }), children)))));
 });
 var alignmentDirection = propTypesExports.oneOf(['start', 'end']);
 CDropdown.propTypes = {
@@ -5794,6 +5789,7 @@ CDropdown.propTypes = {
     onShow: propTypesExports.func,
     placement: placementPropType,
     popper: propTypesExports.bool,
+    portal: propTypesExports.bool,
     variant: propTypesExports.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
     visible: propTypesExports.bool,
 };
@@ -5841,9 +5837,21 @@ CDropdownItemPlain.propTypes = {
 };
 CDropdownItemPlain.displayName = 'CDropdownItemPlain';
 
+var alignmentClassNames = function (alignment) {
+    var classNames = [];
+    if (typeof alignment === 'object') {
+        Object.keys(alignment).map(function (key) {
+            classNames.push("dropdown-menu".concat(key === 'xs' ? '' : "-".concat(key), "-").concat(alignment[key]));
+        });
+    }
+    if (typeof alignment === 'string') {
+        classNames.push("dropdown-menu-".concat(alignment));
+    }
+    return classNames;
+};
 var CDropdownMenu = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _c = useContext(CDropdownContext), alignment = _c.alignment, autoClose = _c.autoClose, dark = _c.dark, direction = _c.direction, dropdownToggleRef = _c.dropdownToggleRef, placement = _c.placement, popper = _c.popper, visible = _c.visible, setVisible = _c.setVisible;
+    var _c = useContext(CDropdownContext), alignment = _c.alignment, autoClose = _c.autoClose, dark = _c.dark, direction = _c.direction, dropdownToggleRef = _c.dropdownToggleRef, placement = _c.placement, popper = _c.popper, portal = _c.portal, visible = _c.visible, setVisible = _c.setVisible;
     var dropdownMenuRef = useRef(null);
     useEffect(function () {
         visible && window.addEventListener('mouseup', handleMouseUp);
@@ -5892,29 +5900,18 @@ var CDropdownMenu = function (_a) {
     if (alignment === 'end') {
         _placement = 'bottom-end';
     }
-    var alignmentClassNames = function (alignment) {
-        var classNames = [];
-        if (typeof alignment === 'object') {
-            Object.keys(alignment).map(function (key) {
-                classNames.push("dropdown-menu".concat(key === 'xs' ? '' : "-".concat(key), "-").concat(alignment[key]));
-            });
-        }
-        if (typeof alignment === 'string') {
-            classNames.push("dropdown-menu-".concat(alignment));
-        }
-        return classNames;
-    };
-    var dropdownMenuComponent = function (style, ref) { return (React__default.createElement(Component, __assign({ className: classNames('dropdown-menu', {
-            'dropdown-menu-dark': dark,
-            show: visible,
-        }, alignment && alignmentClassNames(alignment), className), ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
-        ? React__default.Children.map(children, function (child, index) {
-            if (React__default.isValidElement(child)) {
-                return React__default.createElement("li", { key: index }, React__default.cloneElement(child));
-            }
-            return;
-        })
-        : children)); };
+    var dropdownMenuComponent = function (style, ref) { return (React__default.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
+        React__default.createElement(Component, __assign({ className: classNames('dropdown-menu', {
+                'dropdown-menu-dark': dark,
+                show: visible,
+            }, alignment && alignmentClassNames(alignment), className), ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
+            ? React__default.Children.map(children, function (child, index) {
+                if (React__default.isValidElement(child)) {
+                    return React__default.createElement("li", { key: index }, React__default.cloneElement(child));
+                }
+                return;
+            })
+            : children))); };
     return popper && visible ? (React__default.createElement(Popper, { innerRef: dropdownMenuRef, placement: _placement }, function (_a) {
         var ref = _a.ref, style = _a.style;
         return dropdownMenuComponent(style, ref);
@@ -6969,11 +6966,9 @@ var COffcanvas = forwardRef(function (_a, ref) {
         setVisible(visible);
     }, [visible]);
     useEffect(function () {
-        if (_visible) {
-            if (!scroll) {
-                document.body.style.overflow = 'hidden';
-                document.body.style.paddingRight = '0px';
-            }
+        if (_visible && !scroll) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = '0px';
             return;
         }
         if (!scroll) {
@@ -7917,5 +7912,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
 //# sourceMappingURL=index.es.js.map