funda-ui 4.7.625 → 4.7.711

package/lib/cjs/Utils/useSSE.js

@@ -0,0 +1,235 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("react"));
+	else if(typeof define === 'function' && define.amd)
+		define(["react"], factory);
+	else if(typeof exports === 'object')
+		exports["RPB"] = factory(require("react"));
+	else
+		root["RPB"] = factory(root["React"]);
+})(this, (__WEBPACK_EXTERNAL_MODULE__787__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 787:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__),
+/* harmony export */   "useSSE": () => (/* binding */ useSSE)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * SSE
+ * 
+ * @usage:
+ *
+const App = () => {
+    const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+
+    return (
+    <div>
+        <p>Status: {connected ? '✅ Connected' : '❌ Disconnected'}</p>
+        <button onClick={disconnect}>Disconnect</button>
+        <button onClick={reconnect}>Reconnect</button>
+        {messages.map((m, i) => <div key={i}>{m}</div>)}
+    </div>
+    );
+};
+
+ * It is recommended to use it in conjunction with usePageVisibility, because in HTTP mode, 
+ * browsers allow a maximum of 6 connections; otherwise, other normal interfaces will be suspended and inaccessible.
+
+ import usePageVisibility from 'funda-ui/Utils/usePageVisibility';
+
+const App = () => {
+    const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+
+    // add new
+    usePageVisibility(
+        () => {
+            reconnect();
+        },
+        () => {
+            disconnect();
+        },
+        () => console.log("🎬 Page initialized while visible.")
+    );
+
+    return '';
+};
+
+ */
+
+
+var useSSE = function useSSE(url) {
+  var retryDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3000;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    connected = _useState2[0],
+    setConnected = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    messages = _useState4[0],
+    setMessages = _useState4[1];
+  var sourceRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var reconnectTimerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var manuallyClosedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  var internalCleanup = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    if (reconnectTimerRef.current) {
+      clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+    if (sourceRef.current) {
+      try {
+        sourceRef.current.close();
+      } catch (_) {
+        // Ignore errors during cleanup
+      }
+      sourceRef.current = null;
+    }
+    setConnected(false);
+  }, []);
+  var connect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    if (!url || manuallyClosedRef.current) return;
+
+    // Prevent duplicate connections
+    if (sourceRef.current) return;
+    var source = new EventSource(url);
+    sourceRef.current = source;
+    source.onopen = function () {
+      setConnected(true);
+    };
+    source.onmessage = function (event) {
+      setMessages([event.data]);
+    };
+    source.onerror = function (err) {
+      internalCleanup();
+      if (!manuallyClosedRef.current) {
+        reconnectTimerRef.current = setTimeout(function () {
+          connect();
+        }, retryDelay);
+      }
+    };
+  }, [internalCleanup, retryDelay, url]);
+  var disconnect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    manuallyClosedRef.current = true;
+    internalCleanup();
+  }, [internalCleanup]);
+  var reconnect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    manuallyClosedRef.current = false;
+    internalCleanup();
+    connect();
+  }, [connect, internalCleanup]);
+  var resetMessages = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    return setMessages([]);
+  }, []);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!url) return;
+    manuallyClosedRef.current = false;
+    connect();
+    return function () {
+      // Cleanup on unmount (does not mark manual close)
+      internalCleanup();
+    };
+  }, [url, connect, internalCleanup]);
+  return {
+    connected: connected,
+    messages: messages,
+    disconnect: disconnect,
+    reconnect: reconnect,
+    resetMessages: resetMessages
+  };
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSSE);
+
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/lib/cjs/index.d.ts

@@ -27,6 +27,7 @@ export const MultipleSelect: any;
 export const NativeSelect: any;
 export const NumberInput: any;
 export const Pagination: any;
+export const Popover: any;
 export const Radio: any;
 export const RangeSlider: any;
 export const Refresher: any;

package/lib/cjs/index.js

@@ -29,6 +29,7 @@ exports.MultipleSelect = _interopRequireDefault(require("./MultipleSelect")).def
 exports.NativeSelect = _interopRequireDefault(require("./NativeSelect")).default;
 exports.NumberInput = _interopRequireDefault(require("./NumberInput")).default;
 exports.Pagination = _interopRequireDefault(require("./Pagination")).default;
+exports.Popover = _interopRequireDefault(require("./Popover")).default;
 exports.Radio = _interopRequireDefault(require("./Radio")).default;
 exports.RangeSlider = _interopRequireDefault(require("./RangeSlider")).default;
 exports.Refresher = _interopRequireDefault(require("./Refresher")).default;

package/lib/css/Popover/index.css

@@ -0,0 +1,198 @@
+/* ======================================================
+    <!-- Popover -->
+/* ====================================================== */
+/*
+ * 1. Base Styles
+ * 2. Position Modifiers - Top
+ * 3. Position Modifiers - Top Left
+ * 4. Position Modifiers - Top Right
+ * 5. Position Modifiers - Bottom
+ * 6. Position Modifiers - Bottom Left
+ * 7. Position Modifiers - Bottom Right
+ * 8. Position Modifiers - Left
+ * 9. Position Modifiers - Right
+ * 10. Size
+*/
+.cus-popover__wrapper {
+  --cus-popover-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
+  --cus-popover-content-bg: rgba(17, 17, 17, 0.9);
+  --cus-popover-content-color: #fff;
+  --cus-popover-content-font-size: 0.75em;
+  --cus-popover-content-padding-x: 1em;
+  --cus-popover-content-padding-y: .5em;
+  --cus-popover-content-line-height: 1.5;
+  --cus-popover-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-popover-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-popover-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-popover-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-popover-arrow-width: 18px;
+  --cus-popover-arrow-height: 6px;
+  position: absolute;
+  z-index: 1055; /* --bs-modal-zindex */
+  pointer-events: none;
+  display: none;
+  margin-top: -0.2rem;
+  /*
+  ---------------------------
+  1. Base Styles
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  2. Position Modifiers - Top
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  3. Position Modifiers - Top Left
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  4. Position Modifiers - Top Right
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  5. Position Modifiers - Bottom
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  6. Position Modifiers - Bottom Left
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  7. Position Modifiers - Bottom Right
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  10. Size
+  ---------------------------
+  */
+}
+.cus-popover__wrapper::before {
+  background-size: 100% auto !important;
+  content: "";
+  position: absolute;
+}
+.cus-popover__wrapper.active {
+  display: block !important;
+}
+.cus-popover__wrapper.active::before,
+.cus-popover__wrapper.active > .cus-popover__content {
+  opacity: 1;
+}
+.cus-popover__wrapper:focus::before,
+.cus-popover__wrapper:focus > .cus-popover__content {
+  opacity: 1;
+}
+.cus-popover__wrapper::before,
+.cus-popover__wrapper > .cus-popover__content {
+  backface-visibility: hidden;
+  will-change: transform;
+  opacity: 0;
+  box-sizing: border-box;
+  z-index: 10;
+  transform-origin: top;
+  box-shadow: var(--cus-popover-box-shadow);
+  transition: none !important; /* Don't use transition if position is outside window */
+}
+.cus-popover__wrapper > .cus-popover__content {
+  pointer-events: auto;
+  background: var(--cus-popover-content-bg);
+  border-radius: 4px;
+  color: var(--cus-popover-content-color);
+  content: attr(aria-label);
+  font-size: var(--cus-popover-content-font-size);
+  font-weight: normal;
+  text-transform: none;
+  padding: var(--cus-popover-content-padding-y) var(--cus-popover-content-padding-x);
+  white-space: nowrap;
+  box-sizing: content-box;
+  line-height: var(--cus-popover-content-line-height);
+}
+.cus-popover__wrapper > .cus-popover__content img {
+  height: auto !important;
+  margin: 0.5rem 0;
+}
+.cus-popover__wrapper[data-microtip-position|=top]::before {
+  background: var(--cus-popover-arrow-bg-top);
+  height: var(--cus-popover-arrow-height);
+  width: var(--cus-popover-arrow-width);
+}
+.cus-popover__wrapper[data-microtip-position|=top] > .cus-popover__content {
+  margin-bottom: var(--cus-popover-arrow-height);
+}
+.cus-popover__wrapper[data-microtip-position|=top]::before {
+  top: calc(100% - var(--cus-popover-arrow-height));
+  left: calc(var(--cus-popover-arrow-width) / 2 * -1);
+}
+.cus-popover__wrapper[data-microtip-position|=top] > .cus-popover__content {
+  bottom: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.cus-popover__wrapper[data-microtip-position=top-left] > .cus-popover__content {
+  bottom: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
+}
+.cus-popover__wrapper[data-microtip-position=top-right] > .cus-popover__content {
+  bottom: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
+}
+.cus-popover__wrapper[data-microtip-position|=bottom]::before {
+  background: var(--cus-popover-arrow-bg-bottom);
+  height: var(--cus-popover-arrow-height);
+  width: var(--cus-popover-arrow-width);
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+.cus-popover__wrapper[data-microtip-position|=bottom] > .cus-popover__content {
+  margin-top: var(--cus-popover-arrow-height);
+}
+.cus-popover__wrapper[data-microtip-position|=bottom]::before {
+  bottom: calc(100% - var(--cus-popover-arrow-height));
+  left: calc(var(--cus-popover-arrow-width) / 2 * -1);
+}
+.cus-popover__wrapper[data-microtip-position|=bottom] > .cus-popover__content {
+  bottom: auto;
+  top: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.cus-popover__wrapper[data-microtip-position=bottom-left] > .cus-popover__content {
+  bottom: auto;
+  top: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
+}
+.cus-popover__wrapper[data-microtip-position=bottom-right] > .cus-popover__content {
+  bottom: auto;
+  top: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
+}
+.cus-popover__wrapper[data-microtip-size=auto].cus-popover__content {
+  white-space: nowrap;
+  width: auto;
+  max-width: 530px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cus-popover__wrapper[data-microtip-size=small].cus-popover__content {
+  white-space: initial;
+  width: 80px;
+}
+.cus-popover__wrapper[data-microtip-size=medium].cus-popover__content {
+  white-space: initial;
+  width: 150px;
+}
+.cus-popover__wrapper[data-microtip-size=large].cus-popover__content {
+  white-space: initial;
+  width: 260px;
+}

package/lib/css/TagInput/index.css

@@ -1,46 +1,46 @@
 /* ======================================================
     <!-- Tag Input -->
 /* ====================================================== */
-.tag-input__wrapper {
-  --tag-input-control-border-radius: 0.375rem;
-  --tag-input-control-wrapper-bg: #fff;
-  --tag-input-control-wrapper-border-color: #dee2e6;
-  --tag-input-control-color: #adb5bd;
-  --tag-input-list-bg: #efefef;
-  --tag-input-removebtn-fill: #000;
-  --tag-input-removebtn-hover-fill: #f00;
-  --tag-input-focus-border-color:#86b7fe;
-  --tag-input-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
+.taginput__wrapper {
+  --taginput-control-border-radius: 0.375rem;
+  --taginput-control-wrapper-bg: #fff;
+  --taginput-control-wrapper-border-color: #dee2e6;
+  --taginput-control-color: #adb5bd;
+  --taginput-list-bg: #efefef;
+  --taginput-removebtn-fill: #000;
+  --taginput-removebtn-hover-fill: #f00;
+  --taginput-focus-border-color:#86b7fe;
+  --taginput-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
   display: flex;
 }
-.tag-input__wrapper ul,
-.tag-input__wrapper li {
+.taginput__wrapper ul,
+.taginput__wrapper li {
   padding: 0;
   margin: 0;
   list-style: none;
 }
-.tag-input__wrapper .tag-input__control-wrapper {
+.taginput__wrapper .taginput__control-wrapper {
   display: flex;
 }
-.tag-input__wrapper .tag-input__control-wrapper > div {
+.taginput__wrapper .taginput__control-wrapper > div {
   position: relative;
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   /* bootstrap style that match ".form-control" */
   padding: 0.375rem;
-  background-color: var(--tag-input-control-wrapper-bg);
+  background-color: var(--taginput-control-wrapper-bg);
   background-clip: padding-box;
-  border: 1px solid var(--tag-input-control-wrapper-border-color);
+  border: 1px solid var(--taginput-control-wrapper-border-color);
   appearance: none;
-  border-radius: var(--tag-input-control-border-radius);
+  border-radius: var(--taginput-control-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   padding-bottom: 1px;
 }
-.tag-input__wrapper .tag-input__control-wrapper > div .tag-input__control {
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control {
   margin-bottom: 0.375rem;
 }
-.tag-input__wrapper .tag-input__control-wrapper > div .tag-input__control input {
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control input {
   background: transparent;
   border: none;
   outline: none;
@@ -51,25 +51,25 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--tag-input-control-color);
+  color: var(--taginput-control-color);
 }
-.tag-input__wrapper .tag-input__control-wrapper > div .tag-input__control input:focus {
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control input:focus {
   outline: none;
   box-shadow: none;
 }
-.tag-input__wrapper ul.tag-input__list li {
+.taginput__wrapper ul.taginput__list li {
   display: inline-block;
   margin: 5px;
   margin-bottom: 0;
   padding: 0.1rem 1.5rem 0.1rem 1rem;
   font-size: 0.875rem;
-  background: var(--tag-input-list-bg);
+  background: var(--taginput-list-bg);
   border-radius: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
 }
-.tag-input__wrapper ul.tag-input__list li > a {
+.taginput__wrapper ul.taginput__list li > a {
   font-weight: 400;
   opacity: 0.6;
   font-size: 18px;
@@ -79,13 +79,13 @@
   top: 50%;
   transform: translateY(-50%);
 }
-.tag-input__wrapper ul.tag-input__list li > a path {
-  fill: var(--tag-input-removebtn-fill);
+.taginput__wrapper ul.taginput__list li > a path {
+  fill: var(--taginput-removebtn-fill);
 }
-.tag-input__wrapper ul.tag-input__list li > a:hover path {
-  fill: var(--tag-input-removebtn-hover-fill);
+.taginput__wrapper ul.taginput__list li > a:hover path {
+  fill: var(--taginput-removebtn-hover-fill);
 }
-.tag-input__wrapper.focus .tag-input__control-wrapper > div {
-  box-shadow: var(--tag-input-focus-box-shadow);
-  border-color: var(--tag-input-focus-border-color);
+.taginput__wrapper.focus-floating .taginput__control-wrapper > div {
+  box-shadow: var(--taginput-focus-box-shadow);
+  border-color: var(--taginput-focus-border-color);
 }

package/lib/esm/CascadingSelect/index.tsx

@@ -499,7 +499,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
 
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         handleDisplayOptions(null);
@@ -513,7 +513,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
 
         //

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -630,7 +630,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
 
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         handleDisplayOptions(null);
@@ -644,7 +644,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
 
         //

package/lib/esm/Checkbox/index.tsx

@@ -93,7 +93,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
 
 
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);
@@ -107,7 +107,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         if (typeof (onChange) === 'function') {
@@ -123,7 +123,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         onBlur?.(event);

package/lib/esm/ColorPicker/index.tsx

@@ -79,7 +79,6 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
 
 
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
 
         //
         onFocus?.(event);
@@ -91,12 +90,6 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
         setChangedVal(val);
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onChange?.(event);
 
@@ -106,13 +99,6 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
         const el = event.target;
         const val = event.target.value;
 
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onBlur?.(event);
     }
@@ -133,7 +119,10 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
             <div className={combinedCls(
                 'custom-colorpicker__wrapper',
                 shapeClassName,
-                clsWrite(wrapperClassName, 'mb-3 position-relative')
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
             )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}