@coreui/react 4.0.0-rc.4 → 4.0.1

package/README.md

@@ -8,20 +8,18 @@
   </a>
 </p>
 
-<h3 align="center">CoreUI</h3>
+<h3 align="center">CoreUI for React.js</h3>
 
 <p align="center">
   React.js Components Library built on top of Bootstrap 5 and TypeScript.
   <br>
-  <a href="https://coreui.io/react/docs/4.0/getting-started/introduction"><strong>Explore CoreUI docs »</strong></a>
+  <a href="https://coreui.io/react/docs/getting-started/introduction"><strong>Explore CoreUI for React.js docs »</strong></a>
   <br>
   <br>
   <a href="https://github.com/coreui/coreui-react/issues/new?template=bug_report.md">Report bug</a>
   ·
   <a href="https://github.com/coreui/coreui-react/issues/new?template=feature_request.md">Request feature</a>
   ·
-  <a href="https://community.coreui.io/">Community</a>
-  ·
   <a href="https://blog.coreui.io/">Blog</a>
 </p>
 
@@ -45,29 +43,35 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.0.0-alpha.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.0.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
-- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react@next`
-- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react@next`
+- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
+- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
 
-Read the [Getting started page](https://coreui.io/react/docs/4.0/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
+Read the [Getting started page](https://coreui.io/react/docs/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
 
 ### Stylesheets
 
-React components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception is custom CoreUI components, which don't exist in the Bootstrap ecosystem.
+React components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception are custom CoreUI components, which don't exist in the Bootstrap ecosystem.
 
 #### CoreUI CSS files
 
 ##### Installation
 
 ```bash
-npm install @coreui/coreui@next
+yarn add @coreui/coreui
+```
+
+or
+
+```bash
+npm install @coreui/coreui --save
 ```
 
 ##### Basic usage
 
 ```js
-import "@coreui/dist/css/coreui.min.css";
+import '@coreui/coreui/dist/css/coreui.min.css'
 ```
 
 #### Bootstrap CSS files
@@ -75,7 +79,13 @@ import "@coreui/dist/css/coreui.min.css";
 ##### Installation
 
 ```bash
-npm install bootstrap@next
+yarn add bootstrap
+```
+
+or
+
+```bash
+npm install bootstrap
 ```
 
 ##### Basic usage
@@ -90,35 +100,34 @@ import "bootstrap/dist/css/bootstrap.min.css";
 [![npm version](https://img.shields.io/npm/v/@coreui/react)](https://www.npmjs.com/package/@coreui/react)
 [![peerDependencies Status](https://img.shields.io/david/peer/coreui/coreui)](https://david-dm.org/coreui/coreui?type=peer)
 [![devDependency Status](https://img.shields.io/david/dev/coreui/coreui)](https://david-dm.org/coreui/coreui?type=dev)
-[![Coverage Status](https://img.shields.io/coveralls/github/coreui/coreui-react/v4-dev)](https://coveralls.io/github/coreui/coreui-react?branch=v4-dev)
+[![Coverage Status](https://img.shields.io/coveralls/github/coreui/coreui-react/v4)](https://coveralls.io/github/coreui/coreui-react?branch=v4)
 
 ## Bugs and feature requests
 
-Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui-react/blob/v4-dev/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui-react/issues/new).
+Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui-react/issues/new).
 
 ## Documentation
 
-The documentation for the CoreUI & CoreUI PRO is hosted at our website [CoreUI for React](https://coreui.io/react/docs/4.0/getting-started/introduction)
+The documentation for the CoreUI & CoreUI PRO is hosted at our website [CoreUI for React](https://coreui.io/react/docs/getting-started/introduction)
 
 ### Running documentation locally
 
-1. Run `yarn install` to install the Node.js dependencies, including Hugo (the site builder).
-2. Run `yarn docz:build` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
-3. From the root directory, run `yarn docz:serve` in the command line.
-4. Open `http://localhost:3000/` in your browser, and voilà.
+1. Run `yarn install` or `npm install` to install the Node.js dependencies.
+2. Run `yarn bootstrap` or `npm run bootstrap` to link local packages together and install remaining package dependencies.
+3. From the root directory, run `yarn docs:dev` or `npm run docs:dev` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
+4. Open `http://localhost:8000/` in your browser, and voilà.
 
 ## Contributing
 
-Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4-dev/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
 
-Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/v4-dev/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
+Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/v4/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
 
 ## Community
 
 Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.
 
-- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog/).
-- Join [the official Community](https://community.coreui.io/).
+- Read and subscribe to [The Official CoreUI Blog](https://blog.coreui.io/).
 
 You can also follow [@core_ui on Twitter](https://twitter.com/core_ui).
 
@@ -139,6 +148,10 @@ See [the Releases section of our project](https://github.com/coreui/coreui-react
 
 - <https://github.com/xidedix>
 
+**The CoreUI Team**
+
+- <https://github.com/orgs/coreui/people>
+
 ## Copyright and license
 
-Copyright 2021 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/v4-dev/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Copyright 2021 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).

package/dist/components/form/CFormCheck.d.ts

@@ -39,6 +39,10 @@ export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      */
     id?: string;
+    /**
+     * Input Checkbox indeterminate Property.
+     */
+    indeterminate?: boolean;
     /**
      * Group checkboxes or radios on the same horizontal row by adding.
      */

package/dist/components/form/CFormSelect.d.ts

@@ -1,4 +1,9 @@
 import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
+declare type Option = {
+    disabled?: boolean;
+    label?: string;
+    value?: string;
+};
 export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
     /**
      * A string of all className you want applied to the component.
@@ -16,6 +21,13 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
      * Method called immediately after the `value` prop changes.
      */
     onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Options list of the select component. Available keys: `label`, `value`, `disabled`.
+     * Examples:
+     * - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
+     * - `options={['js', 'html']}`
+     */
+    options?: Option[] | string[];
     /**
      * Size the component small or large.
      */
@@ -32,3 +44,4 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
     value?: string | string[] | number;
 }
 export declare const CFormSelect: React.ForwardRefExoticComponent<CFormSelectProps & React.RefAttributes<HTMLSelectElement>>;
+export {};

package/dist/components/popover/CPopover.d.ts

@@ -31,7 +31,7 @@ export interface CPopoverProps {
     /**
      * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
      */
-    placement?: 'top' | 'right' | 'bottom' | 'left';
+    placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
     /**
      * Toggle the visibility of popover component.
      */

package/dist/components/tooltip/CTooltip.d.ts

@@ -23,7 +23,7 @@ export interface CTooltipProps {
     /**
      * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
      */
-    placement?: 'top' | 'right' | 'bottom' | 'left';
+    placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
     /**
      * Toggle the visibility of popover component.
      */

package/dist/index.d.ts

@@ -87,7 +87,6 @@ import { CNavbarToggler } from './components/navbar/CNavbarToggler';
 import { CPagination } from './components/pagination/CPagination';
 import { CPaginationItem } from './components/pagination/CPaginationItem';
 import { CPopover } from './components/popover/CPopover';
-import { CPopoverContent } from './components/popover/CPopoverContent';
 import { CProgress } from './components/progress/CProgress';
 import { CProgressBar } from './components/progress/CProgressBar';
 import { CSidebar } from './components/sidebar/CSidebar';
@@ -117,6 +116,5 @@ import { CToastClose } from './components/toast/CToastClose';
 import { CToastHeader } from './components/toast/CToastHeader';
 import { CToaster } from './components/toast/CToaster';
 import { CTooltip } from './components/tooltip/CTooltip';
-import { CTooltipContent } from './components/tooltip/CTooltipContent';
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBadge, CBackdrop, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCollapse, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CCol, CContainer, CRow, CFooter, CCardGroup, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CImage, CInputGroup, CInputGroupText, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, CPagination, CPaginationItem, CPopover, CPopoverContent, CProgress, CProgressBar, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav, CSpinner, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTabContent, CTabPane, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CTooltipContent, };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBadge, CBackdrop, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCollapse, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CCol, CContainer, CRow, CFooter, CCardGroup, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CImage, CInputGroup, CInputGroupText, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, CPagination, CPaginationItem, CPopover, CProgress, CProgressBar, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav, CSpinner, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTabContent, CTabPane, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, };
 export * from './components/';

package/dist/index.es.js

@@ -2563,7 +2563,6 @@ var CAlert = forwardRef(function (_a, ref) {
     }, [visible]);
     var _className = classNames('alert', variant === 'solid' ? "bg-" + color + " text-white" : "alert-" + color, {
         'alert-dismissible fade': dismissible,
-        // show: _visible,
     }, className);
     var getTransitionClass = function (state) {
         return state === 'entered' && 'show';
@@ -5543,13 +5542,16 @@ var CDropdown = forwardRef(function (_a, ref) {
         show: _visible,
     }, direction, className);
     useEffect(function () {
-        window.addEventListener('click', handleClickOutside);
-        window.addEventListener('keyup', handleKeyup);
+        _visible &&
+            setTimeout(function () {
+                window.addEventListener('click', handleClickOutside);
+                window.addEventListener('keyup', handleKeyup);
+            });
         return function () {
             window.removeEventListener('click', handleClickOutside);
             window.removeEventListener('keyup', handleKeyup);
         };
-    });
+    }, [_visible]);
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -5569,9 +5571,11 @@ var CDropdown = forwardRef(function (_a, ref) {
             setVisible(false);
         }
     };
+    var dropdownContent = function () {
+        return variant === 'input-group' ? (React__default.createElement(React__default.Fragment, null, children)) : (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: forkedRef }), children));
+    };
     return popper ? (React__default.createElement(CDropdownContext.Provider, { value: contextValues },
-        React__default.createElement(Manager, null, variant === 'input-group' ? (React__default.createElement(React__default.Fragment, null, children)) : (React__default.createElement(Component, __assign({ className: _className }, rest, { ref: forkedRef }), children))))) : (React__default.createElement(CDropdownContext.Provider, { value: contextValues },
-        React__default.createElement(Component, __assign({ className: _className }, rest, { ref: forkedRef }), children)));
+        React__default.createElement(Manager, null, dropdownContent()))) : (React__default.createElement(CDropdownContext.Provider, { value: contextValues }, dropdownContent()));
 });
 var alignmentDirection = PropTypes.oneOf(['start', 'end']);
 CDropdown.propTypes = {
@@ -5924,7 +5928,14 @@ CFormLabel.displayName = 'CFormLabel';
 
 var CFormCheck = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, button = _a.button, hitArea = _a.hitArea, id = _a.id, inline = _a.inline, invalid = _a.invalid, label = _a.label, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "button", "hitArea", "id", "inline", "invalid", "label", "type", "valid"]);
+    var className = _a.className, button = _a.button, hitArea = _a.hitArea, id = _a.id, indeterminate = _a.indeterminate, inline = _a.inline, invalid = _a.invalid, label = _a.label, _c = _a.type, type = _c === void 0 ? 'checkbox' : _c, valid = _a.valid, rest = __rest(_a, ["className", "button", "hitArea", "id", "indeterminate", "inline", "invalid", "label", "type", "valid"]);
+    var inputRef = useRef(null);
+    var forkedRef = useForkedRef(ref, inputRef);
+    useEffect(function () {
+        if (inputRef.current && indeterminate) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
     var _className = classNames('form-check', {
         'form-check-inline': inline,
         'is-invalid': invalid,
@@ -5941,7 +5952,7 @@ var CFormCheck = forwardRef(function (_a, ref) {
             _b), "" + button.shape)
         : 'form-check-label');
     var formControl = function () {
-        return React__default.createElement("input", __assign({ type: type, className: inputClassName, id: id }, rest, { ref: ref }));
+        return React__default.createElement("input", __assign({ type: type, className: inputClassName, id: id }, rest, { ref: forkedRef }));
     };
     var formLabel = function () {
         return (React__default.createElement(CFormLabel, __assign({ customClassName: labelClassName }, (id && { htmlFor: id })), label));
@@ -5959,6 +5970,7 @@ CFormCheck.propTypes = {
     className: PropTypes.string,
     hitArea: PropTypes.oneOf(['full']),
     id: PropTypes.string,
+    indeterminate: PropTypes.bool,
     inline: PropTypes.bool,
     invalid: PropTypes.bool,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
@@ -6031,19 +6043,25 @@ CFormRange.displayName = 'CFormRange';
 
 var CFormSelect = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, htmlSize = _a.htmlSize, invalid = _a.invalid, size = _a.size, valid = _a.valid, rest = __rest(_a, ["children", "className", "htmlSize", "invalid", "size", "valid"]);
+    var children = _a.children, className = _a.className, htmlSize = _a.htmlSize, invalid = _a.invalid, options = _a.options, size = _a.size, valid = _a.valid, rest = __rest(_a, ["children", "className", "htmlSize", "invalid", "options", "size", "valid"]);
     var _className = classNames('form-select', (_b = {},
         _b["form-select-" + size] = size,
         _b['is-invalid'] = invalid,
         _b['is-valid'] = valid,
         _b), className);
-    return (React__default.createElement("select", __assign({ className: _className, size: htmlSize }, rest, { ref: ref }), children));
+    return (React__default.createElement("select", __assign({ className: _className, size: htmlSize }, rest, { ref: ref }), options
+        ? options.map(function (option, index) {
+            return (React__default.createElement("option", __assign({}, (typeof option === 'object' &&
+                option.disabled && { disabled: option.disabled }), (typeof option === 'object' && option.value && { value: option.value }), { key: index }), typeof option === 'string' ? option : option.label));
+        })
+        : children));
 });
 CFormSelect.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     htmlSize: PropTypes.number,
     invalid: PropTypes.bool,
+    options: PropTypes.array,
     size: PropTypes.oneOf(['sm', 'lg']),
     valid: PropTypes.bool,
 };
@@ -6762,26 +6780,8 @@ CPaginationItem.propTypes = {
 };
 CPaginationItem.displayName = 'CPaginationItem';
 
-var CPopoverContent = forwardRef(function (_a, ref) {
-    var content = _a.content, title = _a.title, placementClassNamePostfix = _a.placementClassNamePostfix, arrowProps = _a.arrowProps, style = _a.style, transitionClass = _a.transitionClass;
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: classNames("popover bs-popover-" + placementClassNamePostfix, transitionClass), ref: ref, style: style, role: "tooltip" },
-            React__default.createElement("div", __assign({ className: "popover-arrow" }, arrowProps)),
-            React__default.createElement("div", { className: "popover-header" }, title),
-            React__default.createElement("div", { className: "popover-body" }, content))));
-});
-CPopoverContent.propTypes = {
-    arrowProps: PropTypes.any,
-    content: PropTypes.node,
-    placementClassNamePostfix: PropTypes.string,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    title: PropTypes.string,
-    transitionClass: PropTypes.string,
-};
-CPopoverContent.displayName = 'CPopoverContent';
-
 var CPopover = function (_a) {
-    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.offset, offset = _c === void 0 ? [0, 8] : _c, onHide = _a.onHide, onShow = _a.onShow, _d = _a.trigger, trigger = _d === void 0 ? 'click' : _d, visible = _a.visible, rest = __rest(_a, ["children", "placement", "offset", "onHide", "onShow", "trigger", "visible"]);
+    var children = _a.children, content = _a.content, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.offset, offset = _c === void 0 ? [0, 8] : _c, onHide = _a.onHide, onShow = _a.onShow, title = _a.title, _d = _a.trigger, trigger = _d === void 0 ? 'click' : _d, visible = _a.visible, rest = __rest(_a, ["children", "content", "placement", "offset", "onHide", "onShow", "title", "trigger", "visible"]);
     var _e = useState(visible), _visible = _e[0], setVisible = _e[1];
     var getTransitionClass = function (state) {
         return state === 'entering'
@@ -6818,15 +6818,23 @@ var CPopover = function (_a) {
                                 offset: offset,
                             },
                         },
-                    ] }, function (p) { return (React__default.createElement(CPopoverContent, __assign({ transitionClass: transitionClass, placementClassNamePostfix: placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement }, rest, p))); }));
+                    ] }, function (_a) {
+                    var arrowProps = _a.arrowProps, style = _a.style, ref = _a.ref;
+                    return (React__default.createElement("div", __assign({ className: classNames("popover bs-popover-" + (placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: ref, role: "tooltip", style: style }, rest),
+                        React__default.createElement("div", __assign({ className: "popover-arrow" }, arrowProps)),
+                        React__default.createElement("div", { className: "popover-header" }, title),
+                        React__default.createElement("div", { className: "popover-body" }, content)));
+                }));
             }), document.body)));
 };
 CPopover.propTypes = {
     children: PropTypes.any,
-    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    content: PropTypes.node,
+    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     offset: PropTypes.any,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
+    title: PropTypes.string,
     trigger: triggerPropType,
     visible: PropTypes.bool,
 };
@@ -7475,23 +7483,8 @@ CToaster.propTypes = {
 };
 CToaster.displayName = 'CToaster';
 
-var CTooltipContent = forwardRef(function (_a, ref) {
-    var content = _a.content, placementClassNamePostfix = _a.placementClassNamePostfix, arrowProps = _a.arrowProps, transitionClass = _a.transitionClass, style = _a.style;
-    return (React__default.createElement("div", { className: classNames("tooltip bs-tooltip-" + placementClassNamePostfix, transitionClass), ref: ref, style: style, role: "tooltip" },
-        React__default.createElement("div", __assign({ className: "tooltip-arrow" }, arrowProps)),
-        React__default.createElement("div", { className: "tooltip-inner" }, content)));
-});
-CTooltipContent.propTypes = {
-    arrowProps: PropTypes.any,
-    content: PropTypes.node,
-    placementClassNamePostfix: PropTypes.string,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    transitionClass: PropTypes.string,
-};
-CTooltipContent.displayName = 'CTooltipContent';
-
 var CTooltip = function (_a) {
-    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.trigger, trigger = _c === void 0 ? 'hover' : _c, visible = _a.visible, rest = __rest(_a, ["children", "placement", "onHide", "onShow", "trigger", "visible"]);
+    var children = _a.children, content = _a.content, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, onHide = _a.onHide, onShow = _a.onShow, _c = _a.trigger, trigger = _c === void 0 ? 'hover' : _c, visible = _a.visible, rest = __rest(_a, ["children", "content", "placement", "onHide", "onShow", "trigger", "visible"]);
     var _d = useState(visible), _visible = _d[0], setVisible = _d[1];
     var getTransitionClass = function (state) {
         return state === 'entering'
@@ -7521,12 +7514,18 @@ var CTooltip = function (_a) {
                     exit: 200,
                 }, unmountOnExit: true }, function (state) {
                 var transitionClass = getTransitionClass(state);
-                return (React__default.createElement(Popper, { placement: placement }, function (p) { return (React__default.createElement(CTooltipContent, __assign({ transitionClass: transitionClass, placementClassNamePostfix: placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement }, rest, p))); }));
+                return (React__default.createElement(Popper, { placement: placement }, function (_a) {
+                    var arrowProps = _a.arrowProps, style = _a.style, ref = _a.ref;
+                    return (React__default.createElement("div", __assign({ className: classNames("tooltip bs-tooltip-" + (placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement), transitionClass), ref: ref, role: "tooltip", style: style }, rest),
+                        React__default.createElement("div", __assign({ className: "tooltip-arrow" }, arrowProps)),
+                        React__default.createElement("div", { className: "tooltip-inner" }, content)));
+                }));
             }), document.body)));
 };
 CTooltip.propTypes = {
     children: PropTypes.any,
-    placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    content: PropTypes.node,
+    placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     onHide: PropTypes.func,
     onShow: PropTypes.func,
     trigger: triggerPropType,
@@ -7665,5 +7664,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, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, 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, CPopover, CPopoverContent, 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, CTooltipContent, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, 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, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, 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, 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