@coreui/react-pro 5.0.0 → 5.1.0-alpha.0

package/dist/esm/hooks/usePopper.js

@@ -1,6 +1,5 @@
 import { useRef } from 'react';
 import { createPopper } from '@popperjs/core';
-import executeAfterTransition from '../utils/executeAfterTransition.js';
 
 var usePopper = function () {
     var _popper = useRef();
@@ -12,16 +11,24 @@ var usePopper = function () {
     var destroyPopper = function () {
         var popperInstance = _popper.current;
         if (popperInstance && el.current) {
-            executeAfterTransition(function () {
-                popperInstance.destroy();
-            }, el.current);
+            popperInstance.destroy();
         }
         _popper.current = undefined;
     };
+    var updatePopper = function (options) {
+        var popperInstance = _popper.current;
+        if (popperInstance && options) {
+            popperInstance.setOptions(options);
+        }
+        if (popperInstance) {
+            popperInstance.update();
+        }
+    };
     return {
         popper: _popper.current,
         initPopper: initPopper,
         destroyPopper: destroyPopper,
+        updatePopper: updatePopper,
     };
 };
 

package/dist/esm/hooks/usePopper.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopper.js","sources":["../../../src/hooks/usePopper.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAYa,IAAA,SAAS,GAAG,YAAA;AACvB,IAAA,IAAM,OAAO,GAAG,MAAM,EAAY,CAAA;AAClC,IAAA,IAAM,EAAE,GAAG,MAAM,EAAe,CAAA;AAEhC,IAAA,IAAM,UAAU,GAAG,UAAC,SAAsB,EAAE,MAAmB,EAAE,OAAyB,EAAA;QACxF,OAAO,CAAC,OAAO,GAAG,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,CAAA;AAC1D,QAAA,EAAE,CAAC,OAAO,GAAG,MAAM,CAAA;AACrB,KAAC,CAAA;AAED,IAAA,IAAM,aAAa,GAAG,YAAA;AACpB,QAAA,IAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAA;AAEtC,QAAA,IAAI,cAAc,IAAI,EAAE,CAAC,OAAO,EAAE;AAChC,YAAA,sBAAsB,CAAC,YAAA;gBACrB,cAAc,CAAC,OAAO,EAAE,CAAA;AAC1B,aAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAA;SACf;AAED,QAAA,OAAO,CAAC,OAAO,GAAG,SAAS,CAAA;AAC7B,KAAC,CAAA;IAED,OAAO;QACL,MAAM,EAAE,OAAO,CAAC,OAAO;AACvB,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,aAAa,EAAA,aAAA;KACd,CAAA;AACH;;;;"}
+{"version":3,"file":"usePopper.js","sources":["../../../src/hooks/usePopper.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAWa,IAAA,SAAS,GAAG,YAAA;AACvB,IAAA,IAAM,OAAO,GAAG,MAAM,EAAY,CAAA;AAClC,IAAA,IAAM,EAAE,GAAG,MAAM,EAAe,CAAA;AAEhC,IAAA,IAAM,UAAU,GAAG,UAAC,SAAsB,EAAE,MAAmB,EAAE,OAAyB,EAAA;QACxF,OAAO,CAAC,OAAO,GAAG,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,CAAA;AAC1D,QAAA,EAAE,CAAC,OAAO,GAAG,MAAM,CAAA;AACrB,KAAC,CAAA;AAED,IAAA,IAAM,aAAa,GAAG,YAAA;AACpB,QAAA,IAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAA;AAEtC,QAAA,IAAI,cAAc,IAAI,EAAE,CAAC,OAAO,EAAE;YAChC,cAAc,CAAC,OAAO,EAAE,CAAA;SACzB;AAED,QAAA,OAAO,CAAC,OAAO,GAAG,SAAS,CAAA;AAC7B,KAAC,CAAA;IAED,IAAM,YAAY,GAAG,UAAC,OAA0B,EAAA;AAC9C,QAAA,IAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAA;AAEtC,QAAA,IAAI,cAAc,IAAI,OAAO,EAAE;AAC7B,YAAA,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;SACnC;QAED,IAAI,cAAc,EAAE;YAClB,cAAc,CAAC,MAAM,EAAE,CAAA;SACxB;AACH,KAAC,CAAA;IAED,OAAO;QACL,MAAM,EAAE,OAAO,CAAC,OAAO;AACvB,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,aAAa,EAAA,aAAA;AACb,QAAA,YAAY,EAAA,YAAA;KACb,CAAA;AACH;;;;"}

package/dist/esm/hooks/useStateWithCallback.d.ts

@@ -1,2 +1,2 @@
 import { Dispatch, SetStateAction } from 'react';
-export declare const useStateWithCallback: <S>(initialState: S, handler?: ((prevState: S) => void) | undefined, runHandler?: boolean) => [S, Dispatch<SetStateAction<S>>];
+export declare const useStateWithCallback: <S>(initialState: S, handler?: (prevState: S) => void, runHandler?: boolean) => [S, Dispatch<SetStateAction<S>>];

package/dist/esm/index.js

@@ -102,6 +102,7 @@ export { CProgress } from './components/progress/CProgress.js';
 export { CProgressBar } from './components/progress/CProgressBar.js';
 export { CProgressStacked } from './components/progress/CProgressStacked.js';
 export { CPopover } from './components/popover/CPopover.js';
+export { CRating } from './components/rating/CRating.js';
 export { CSmartTable } from './components/smart-table/CSmartTable.js';
 export { CSmartPagination } from './components/smart-pagination/CSmartPagination.js';
 export { CSidebar } from './components/sidebar/CSidebar.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/node_modules/classnames/index.js

@@ -14,39 +14,57 @@ import { __module as classnames } from '../../_virtual/index.js';
 
 		var hasOwn = {}.hasOwnProperty;
 
-		function classNames() {
-			var classes = [];
+		function classNames () {
+			var classes = '';
 
 			for (var i = 0; i < arguments.length; i++) {
 				var arg = arguments[i];
-				if (!arg) continue;
-
-				var argType = typeof arg;
-
-				if (argType === 'string' || argType === 'number') {
-					classes.push(arg);
-				} else if (Array.isArray(arg)) {
-					if (arg.length) {
-						var inner = classNames.apply(null, arg);
-						if (inner) {
-							classes.push(inner);
-						}
-					}
-				} else if (argType === 'object') {
-					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-						classes.push(arg.toString());
-						continue;
-					}
-
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
+				if (arg) {
+					classes = appendClass(classes, parseValue(arg));
 				}
 			}
 
-			return classes.join(' ');
+			return classes;
+		}
+
+		function parseValue (arg) {
+			if (typeof arg === 'string' || typeof arg === 'number') {
+				return arg;
+			}
+
+			if (typeof arg !== 'object') {
+				return '';
+			}
+
+			if (Array.isArray(arg)) {
+				return classNames.apply(null, arg);
+			}
+
+			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+				return arg.toString();
+			}
+
+			var classes = '';
+
+			for (var key in arg) {
+				if (hasOwn.call(arg, key) && arg[key]) {
+					classes = appendClass(classes, key);
+				}
+			}
+
+			return classes;
+		}
+
+		function appendClass (value, newClass) {
+			if (!newClass) {
+				return value;
+			}
+		
+			if (value) {
+				return value + ' ' + newClass;
+			}
+		
+			return value + newClass;
 		}
 
 		if (module.exports) {

package/dist/esm/node_modules/classnames/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../classnames/index.js"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n"],"names":[],"mappings":";;;;;;;;;;AAKA;AACA;AACA,CAAA,CAAC,YAAY;AAEb;AACA,EAAC,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;AAEhC;EACC,SAAS,UAAU,GAAG;AACvB,GAAE,IAAI,OAAO,GAAG,EAAE,CAAC;AACnB;AACA,GAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,IAAG,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAC1B,IAAG,IAAI,CAAC,GAAG,EAAE,SAAS;AACtB;AACA,IAAG,IAAI,OAAO,GAAG,OAAO,GAAG,CAAC;AAC5B;IACG,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE;AACrD,KAAI,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAClB,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;AAClC,KAAI,IAAI,GAAG,CAAC,MAAM,EAAE;MACf,IAAI,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;MACxC,IAAI,KAAK,EAAE;AAChB,OAAM,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;OACpB;MACD;AACL,KAAI,MAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;KAChC,IAAI,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;MACrG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;AAClC,MAAK,SAAS;MACT;AACL;AACA,KAAI,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;AACzB,MAAK,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;AAC5C,OAAM,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAClB;MACD;KACD;IACD;AACH;AACA,GAAE,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GACzB;AACF;EACC,IAAqC,MAAM,CAAC,OAAO,EAAE;AACtD,GAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;GAChC,MAAA,CAAA,OAAA,GAAiB,UAAU,CAAC;AAC9B,GAAE,MAKM;AACR,GAAE,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;GAC/B;AACF,EAAC,EAAE,EAAA;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../../../../../classnames/index.js"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n"],"names":[],"mappings":";;;;;;;;;;AAKA;AACA;AACA,CAAA,CAAC,YAAY;AAEb;AACA,EAAC,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;AAChC;EACC,SAAS,UAAU,IAAI;AACxB,GAAE,IAAI,OAAO,GAAG,EAAE,CAAC;AACnB;AACA,GAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,IAAG,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;IACvB,IAAI,GAAG,EAAE;KACR,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;KAChD;IACD;AACH;GACE,OAAO,OAAO,CAAC;GACf;AACF;AACA,EAAC,SAAS,UAAU,EAAE,GAAG,EAAE;GACzB,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;IACvD,OAAO,GAAG,CAAC;IACX;AACH;AACA,GAAE,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;IAC5B,OAAO,EAAE,CAAC;IACV;AACH;AACA,GAAE,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;IACvB,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACnC;AACH;GACE,IAAI,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;AACxG,IAAG,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;IACtB;AACH;AACA,GAAE,IAAI,OAAO,GAAG,EAAE,CAAC;AACnB;AACA,GAAE,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;AACvB,IAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;KACtC,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;KACpC;IACD;AACH;GACE,OAAO,OAAO,CAAC;GACf;AACF;AACA,EAAC,SAAS,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;GACtC,IAAI,CAAC,QAAQ,EAAE;IACd,OAAO,KAAK,CAAC;IACb;AACH;GACE,IAAI,KAAK,EAAE;AACb,IAAG,OAAO,KAAK,GAAG,GAAG,GAAG,QAAQ,CAAC;IAC9B;AACH;AACA,GAAE,OAAO,KAAK,GAAG,QAAQ,CAAC;GACxB;AACF;EACC,IAAqC,MAAM,CAAC,OAAO,EAAE;AACtD,GAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;GAChC,MAAA,CAAA,OAAA,GAAiB,UAAU,CAAC;AAC9B,GAAE,MAKM;AACR,GAAE,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;GAC/B;AACF,EAAC,EAAE,EAAA;;;;;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "5.0.0",
+  "version": "5.1.0-alpha.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.0.0",
+    "@coreui/coreui-pro": "^5.1.0-alpha.0",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },

package/src/components/index.ts

@@ -33,6 +33,7 @@ export * from './pagination'
 export * from './placeholder'
 export * from './progress'
 export * from './popover'
+export * from './rating'
 export * from './smart-table'
 export * from './smart-pagination'
 export * from './sidebar'

package/src/components/popover/CPopover.tsx

@@ -1,13 +1,12 @@
 import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import { Transition } from 'react-transition-group'
 
 import { CConditionalPortal } from '../conditional-portal'
 import { useForkedRef, usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
-import { getRTLPlacement, getTransitionDurationFromElement } from '../../utils'
+import { executeAfterTransition, getRTLPlacement } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
@@ -101,6 +100,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     const uID = useRef(`popover${Math.floor(Math.random() * 1_000_000)}`)
 
     const { initPopper, destroyPopper } = usePopper()
+    const [mounted, setMounted] = useState(false)
     const [_visible, setVisible] = useState(visible)
 
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
@@ -133,14 +133,39 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       setVisible(visible)
     }, [visible])
 
-    const toggleVisible = (visible: boolean) => {
-      if (visible) {
-        setTimeout(() => setVisible(true), _delay.show)
-        return
+    useEffect(() => {
+      if (_visible) {
+        setMounted(true)
+
+        if (popoverRef.current) {
+          popoverRef.current.classList.remove('fade', 'show')
+          destroyPopper()
+        }
+
+        setTimeout(() => {
+          if (togglerRef.current && popoverRef.current) {
+            if (animation) {
+              popoverRef.current.classList.add('fade')
+            }
+
+            initPopper(togglerRef.current, popoverRef.current, popperConfig)
+            popoverRef.current.classList.add('show')
+            onShow && onShow()
+          }
+        }, _delay.show)
       }
 
-      setTimeout(() => setVisible(false), _delay.hide)
-    }
+      return () => {
+        if (popoverRef.current) {
+          popoverRef.current.classList.remove('show')
+          onHide && onHide()
+          executeAfterTransition(() => {
+            destroyPopper()
+            setMounted(false)
+          }, popoverRef.current)
+        }
+      }
+    }, [_visible])
 
     return (
       <>
@@ -150,71 +175,31 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
           }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => toggleVisible(!_visible),
+            onClick: () => setVisible(!_visible),
           }),
           ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => toggleVisible(true),
-            onBlur: () => toggleVisible(false),
+            onFocus: () => setVisible(true),
+            onBlur: () => setVisible(false),
           }),
           ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => toggleVisible(true),
-            onMouseLeave: () => toggleVisible(false),
+            onMouseEnter: () => setVisible(true),
+            onMouseLeave: () => setVisible(false),
           }),
         })}
         <CConditionalPortal container={container} portal={true}>
-          <Transition
-            in={_visible}
-            mountOnEnter
-            nodeRef={popoverRef}
-            onEnter={() => {
-              if (togglerRef.current && popoverRef.current) {
-                initPopper(togglerRef.current, popoverRef.current, popperConfig)
-              }
-
-              onShow
-            }}
-            onEntering={() => {
-              if (togglerRef.current && popoverRef.current) {
-                popoverRef.current.style.display = 'initial'
-              }
-            }}
-            onExit={onHide}
-            onExited={() => {
-              destroyPopper()
-            }}
-            timeout={{
-              enter: 0,
-              exit: popoverRef.current
-                ? getTransitionDurationFromElement(popoverRef.current) + 50
-                : 200,
-            }}
-            unmountOnExit
-          >
-            {(state) => (
-              <div
-                className={classNames(
-                  'popover',
-                  'bs-popover-auto',
-                  {
-                    fade: animation,
-                    show: state === 'entered',
-                  },
-                  className,
-                )}
-                id={uID.current}
-                ref={forkedRef}
-                role="tooltip"
-                style={{
-                  display: 'none',
-                }}
-                {...rest}
-              >
-                <div className="popover-arrow"></div>
-                <div className="popover-header">{title}</div>
-                <div className="popover-body">{content}</div>
-              </div>
-            )}
-          </Transition>
+          {mounted && (
+            <div
+              className={classNames('popover', 'bs-popover-auto', className)}
+              id={uID.current}
+              ref={forkedRef}
+              role="tooltip"
+              {...rest}
+            >
+              <div className="popover-arrow"></div>
+              <div className="popover-header">{title}</div>
+              <div className="popover-body">{content}</div>
+            </div>
+          )}
         </CConditionalPortal>
       </>
     )

package/src/components/rating/CRating.tsx

@@ -0,0 +1,291 @@
+import React, { forwardRef, Fragment, HTMLAttributes, ReactNode, useId, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { CTooltip } from '../tooltip'
+
+type Icon = {
+  [key: number]: JSX.Element
+}
+
+export interface CRatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * The default icon to display when the item is selected.
+   */
+  activeIcon?: string | JSX.Element | Icon
+  /**
+   * Enables the clearing upon clicking the selected item again.
+   */
+  allowClear?: boolean
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean
+  /**
+   * If enabled, only the currently selected icon will be visibly highlighted.
+   */
+  highlightOnlySelected?: boolean
+  /**
+   * The default icon to display when the item is not selected.
+   */
+  icon?: string | JSX.Element | Icon
+  /**
+   * The maximum value the user can select.
+   */
+  max?: number
+  /**
+   * The name attribute of the radio input elements.
+   */
+  name?: string
+  /**
+   * Execute a function when a user changes the selected element.
+   */
+  onChange?: (value: number | null) => void
+  /**
+   * Execute a function when a user hover the element.
+   */
+  onHover?: (value: number) => void
+  /**
+   * Minimum increment value change allowed.
+   */
+  precision?: number
+  /**
+   * Toggle the readonly state for the component.
+   */
+  readOnly?: boolean
+  /**
+   * Size the component small, large, or custom if you define custom icons with custom height.
+   */
+  size?: 'sm' | 'lg' | 'custom'
+  /**
+   * Enable tooltips with default values or set specific labels for each icon.
+   */
+  tooltips?: boolean | string[]
+  /**
+   * The `value` attribute of component.
+   *
+   * @controllable onChange
+   * */
+  value?: number
+}
+
+const CConditionalTooltip = ({
+  children,
+  content,
+  tooltip,
+}: {
+  children: ReactNode
+  content?: ReactNode
+  tooltip?: boolean
+}) => {
+  return tooltip ? (
+    <CTooltip content={content}>
+      <span>{children}</span>
+    </CTooltip>
+  ) : (
+    children
+  )
+}
+
+export const CRating = forwardRef<HTMLDivElement, CRatingProps>(
+  (
+    {
+      activeIcon,
+      allowClear,
+      className,
+      disabled,
+      highlightOnlySelected,
+      icon,
+      max = 5,
+      name,
+      onChange,
+      onHover,
+      precision = 1,
+      readOnly,
+      size,
+      tooltips,
+      value,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [cleared, setCleared] = useState(false)
+    const [currentValue, setCurrentValue] = useState(value ?? null)
+    const [hoverValue, setHoverValue] = useState<number | null>(null)
+    const [tooltipValue, setTooltipValue] = useState<number | string | null>(null)
+    const _name = name || useId()
+
+    const handleMouseEnter = (value: number) => {
+      if (disabled || readOnly) {
+        return
+      }
+
+      onHover && onHover(value)
+      setHoverValue(value)
+      value && setTooltipValue(value)
+    }
+
+    const handleOnChange = (value: number) => {
+      if (disabled || readOnly) {
+        return
+      }
+
+      if (cleared) {
+        setCleared(false)
+        return
+      }
+
+      setCurrentValue(value)
+      onChange && onChange(value)
+    }
+
+    const handleOnClick = (value: number) => {
+      if (disabled || readOnly) {
+        return
+      }
+
+      if (allowClear && value === currentValue) {
+        setCleared(true)
+        onChange && onChange(null)
+        setCurrentValue(null)
+        setHoverValue(null)
+      }
+    }
+
+    return (
+      <div
+        className={classNames(
+          'rating',
+          {
+            [`rating-${size}`]: size,
+            disabled: disabled,
+            readonly: readOnly,
+          },
+          className,
+        )}
+        onMouseLeave={() => !disabled && !readOnly && setHoverValue(null)}
+        role="radiogroup"
+        {...rest}
+        ref={ref}
+      >
+        {Array.from({ length: max }, (_, index) => {
+          const numberOfRadios = 1 / precision
+
+          return (
+            <CConditionalTooltip
+              key={index}
+              {...(tooltips && {
+                content: Array.isArray(tooltips)
+                  ? tooltips[index]
+                  : precision
+                    ? tooltipValue
+                    : index + 1,
+                tooltip: true,
+              })}
+            >
+              <div className="rating-item">
+                {Array.from({ length: numberOfRadios }, (_, _index) => {
+                  const isNotLastItem = _index + 1 < numberOfRadios
+                  const value =
+                    numberOfRadios === 1 ? index + 1 : index + (_index + 1) * (1 * precision)
+                  const id = useId()
+
+                  const isItemChecked = () => value === currentValue
+
+                  const isItemActive = () => {
+                    if (
+                      highlightOnlySelected
+                        ? hoverValue === value
+                        : hoverValue && hoverValue >= value
+                    ) {
+                      return true
+                    }
+
+                    if (
+                      hoverValue === null &&
+                      (highlightOnlySelected
+                        ? isItemChecked()
+                        : currentValue && currentValue >= value)
+                    ) {
+                      return true
+                    }
+
+                    return false
+                  }
+
+                  return (
+                    <Fragment key={value}>
+                      <label
+                        className={classNames('rating-item-label', {
+                          active: isItemActive(),
+                        })}
+                        htmlFor={id}
+                        onClick={() => handleOnClick(value)}
+                        onMouseEnter={() => handleMouseEnter(value)}
+                        {...(isNotLastItem && {
+                          style: {
+                            zIndex: 1 / precision - _index,
+                            position: 'absolute',
+                            width: `${precision * (_index + 1) * 100}%`,
+                            overflow: 'hidden',
+                            opacity: 0,
+                          },
+                        })}
+                      >
+                        {icon ? (
+                          <div className="rating-item-custom-icon">
+                            {(icon as Icon)[value] ?? icon}
+                          </div>
+                        ) : (
+                          <div className="rating-item-icon"></div>
+                        )}
+                        {activeIcon && (
+                          <div className="rating-item-custom-icon-active">
+                            {(activeIcon as Icon)[value] ?? activeIcon}
+                          </div>
+                        )}
+                      </label>
+                      <input
+                        className="rating-item-input"
+                        checked={isItemChecked()}
+                        disabled={disabled || readOnly}
+                        id={id}
+                        name={_name}
+                        onChange={() => handleOnChange(value)}
+                        onFocus={() => handleMouseEnter(value)}
+                        type="radio"
+                        value={value}
+                      />
+                    </Fragment>
+                  )
+                })}
+              </div>
+            </CConditionalTooltip>
+          )
+        })}
+      </div>
+    )
+  },
+)
+
+CRating.propTypes = {
+  children: PropTypes.node,
+  activeIcon: PropTypes.any,
+  allowClear: PropTypes.bool,
+  disabled: PropTypes.bool,
+  highlightOnlySelected: PropTypes.bool,
+  icon: PropTypes.any,
+  max: PropTypes.number,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  onHover: PropTypes.func,
+  precision: PropTypes.number,
+  readOnly: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg', 'custom']),
+  value: PropTypes.number,
+}
+
+CRating.displayName = 'CRating'

package/src/components/rating/index.ts

@@ -0,0 +1,3 @@
+import { CRating } from './CRating'
+
+export { CRating }