funda-ui 4.7.624 → 4.7.701

package/README.md

@@ -1,21 +1,10 @@
 # Funda UI
 
-<p align="center">
-  <img src="logo.png"  alt="Funda UI"  width="180" >
-</p>
-
-
 React components using pure Bootstrap 5+ which has undergone complex business testing and is easy to integrate with any API. You can load Bootstrap css libraries separately in your project.
 
 All components have undergone complex business verification and provide multiple examples.
 
 
-<p align="center">
-  <img src="preview.png"  alt="Funda UI" >
-</p>
-
-
-
 ---
 
 - [Documentation](https://uiux.cc/funda-ui-doc)
@@ -24,7 +13,6 @@ All components have undergone complex business verification and provide multiple
 
 
 
-
 ## Key Features
 
 1. Simplify the assignment method of diversified data.
@@ -34,6 +22,7 @@ All components have undergone complex business verification and provide multiple
 5. Do not embed css-in-js, directly use external CSS styles to completely change the component style.
 
 
+
 ## Components List
 
 Here is a table of the components and their status.
@@ -71,8 +60,7 @@ Here is a table of the components and their status.
 | [Event Calendar Timeline ✅🔥](packages/EventCalendarTimeline/README.md) |  |  |  |  |
 | [Chatbox ✅🔥🤖](packages/Chatbox/README.md) |  |  |  |  |
 | [Stepper ✅](packages/Stepper/README.md) |  |  |  |  |
-
-
+| [Popover ✅](packages/Popover/README.md) |  |  |  |  |
 
 
 ## Usage
@@ -83,27 +71,17 @@ Here is a table of the components and their status.
 $ npm i funda-ui
 ```
 
-or
-
-```sh
-$ pnpm add funda-ui
-```
-
 **Step 2**. Using Bootstrap CSS together (recommended)
 
-[Download bootstrap](https://github.com/twbs/bootstrap)
-
 ```html
 <link href="./bootstrap.min.css" rel="stylesheet"/>
 ```
 
-> You could remove Bootstrap's styles. All components support setting Bootstrap's default class names through `**ClassName` attributes.
 
-**Step 3**. import required components as required
+**Step 3**. import required components as required 
 
 > If the component does not have a CSS file, it can not be imported, or use own CSS.
 
-
 ```js
 import Input from 'funda-ui/Input';
 import Textarea from 'funda-ui/Textarea';
@@ -345,97 +323,6 @@ export default () => {
 ```
 
 
-## Getting Started
-
-Make sure if Node 14+ is installed on your computer.
-
-### Step 1: Create a new Lerna workspace by running:
-
-```sh
-$ cd /{your_directory}/funda-ui
-$ npx lerna init
-```
-
-
-### Step 2: Install dependencies (Required)
-
-It will automatically install the dependencies of all resources in `packages/` without duplication.
-
-```sh
-$ npm install
-```
- 
-
-### Step 3: To open the visualization, run:
-
-```sh
-$ npx nx graph
-```
- 
-### Step 4: To build all projects, run
-
-```sh
-$ npx lerna run build
-```
-
-or Build the package you want (recommend):
-
-```sh
-$ npx lerna run build --scope=plugin-1 --scope=plugin-2
-```
-
-Please do not install **lerna** globally to use `lerna run build`
-
-
-### Step 5: (optional) Use a custom script like:
-
-```sh
-$ npx lerna exec npm run export --scope=plugin-2
-```
-  
-
-## Publish the lib of components, it will hang on NPM: 
-
-
-```sh
-$ npm run build:lib
-$ npm run build:publish
-```
-  
-  
-> **(Optional) Update Utils**
-> 
-> ```sh
-> $ npx lerna run build --scope=funda-utils
-> $ npm i
-> $ npx lerna run build
-> ```
-> 
-
-
-
-> **(Optional) Manually generate `.d.ts` files, you can execute**
-> 
-> ```sh
-> $ npx -p typescript tsc lib/cjs/*.js --declaration --allowJs --emitDeclarationOnly
-> ```
-> 
-
-
-## Contributing
-
-- [Lerna](https://github.com/lerna/lerna)
-- [Bootstrap](https://getbootstrap.com/)
-- [React](https://react.dev/)
-
-
-## Inspiration and References
-
-This component library is inspired by several open-source projects such as [react-bootstrap](https://react-bootstrap.netlify.app), [Ant Design](https://ant.design), [MUI](https://mui.com), and [shadcn/ui](https://ui.shadcn.com). It is an open-source plugin library designed as a learning-to-practice project.
-
-The library does **not** contain any personal or company-specific business logic. It serves purely as an auxiliary tool to help efficiently and reliably develop company applications.
-
-
 ## Licensing
 
 Licensed under the [MIT](https://opensource.org/licenses/MIT).

package/{publish/lib/cjs/Radio → Radio}/index.js

@@ -1587,7 +1587,7 @@ var Radio = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
   }
   function handleFocus(event) {
     var _rootRef$current;
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
+    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus-floating');
 
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
@@ -1606,7 +1606,7 @@ var Radio = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
 
     //----
     //remove focus style
-    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
+    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus-floating');
 
     //
     if (typeof onChange === 'function') {
@@ -1620,7 +1620,7 @@ var Radio = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
     var _rootRef$current3;
     //----
     //remove focus style
-    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
+    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus-floating');
 
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);

package/{publish/lib/cjs/RangeSlider → RangeSlider}/index.js

@@ -1764,9 +1764,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             }
           }
           function handleFocus(event) {
-            var _rootRef$current;
-            (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
-
             //
             if (valRef.current) {
               onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, onComposition, valRef.current);
@@ -1775,13 +1772,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           function handleChange(event, curVal) {
             setChangedVal(curVal);
 
-            //----
-            //remove focus style
-            if (curVal === '') {
-              var _rootRef$current2;
-              (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
-            }
-
             //
             if (valRef.current) {
               onChange === null || onChange === void 0 ? void 0 : onChange(event, onComposition, valRef.current, curVal);
@@ -1798,13 +1788,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             var el = event.target;
             var val = event.target.value;
 
-            //----
-            //remove focus style
-            if (val === '') {
-              var _rootRef$current3;
-              (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
-            }
-
             //
             if (valRef.current) {
               onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, onComposition, valRef.current);
@@ -1902,7 +1885,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             }
           }, []);
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-            className: (0, funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),
+            className: (0, funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0, funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
+              'focus-floating': changedVal !== ''
+            }),
             ref: rootRef
           }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
             htmlFor: idRes,

package/{publish/SearchBar → SearchBar}/index.js

@@ -573,9 +573,6 @@ var SearchBar = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(f
     onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
   }
   function handleFocus(event) {
-    var _rootRef$current;
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
-
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, onComposition);
   }
@@ -583,13 +580,6 @@ var SearchBar = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(f
     var val = event.target.value;
     setChangedVal(val);
 
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current2;
-      (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
-    }
-
     //
     onChange === null || onChange === void 0 ? void 0 : onChange(event, onComposition);
   }
@@ -597,13 +587,6 @@ var SearchBar = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(f
     var el = event.target;
     var val = event.target.value;
 
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current3;
-      (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
-    }
-
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, onComposition);
   }
@@ -624,7 +607,9 @@ var SearchBar = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(f
     setChangedVal(value || '');
   }, [value]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
+      'focus-floating': changedVal !== ''
+    }),
     ref: rootRef
   }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: idRes,

package/{publish/Select → Select}/index.js

@@ -4975,12 +4975,13 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     filteredHeight = listContainerHeightLimit(filteredHeight);
     if (parseFloat(oldHeight) > filteredHeight) {
       listContentRef.current.style.height = filteredHeight + 'px';
-      console.log('popwinContainerHeightAdjust - height changed to:', filteredHeight);
+      // console.log('popwinContainerHeightAdjust - height changed to:', filteredHeight);
     } else {
       listContentRef.current.style.height = oldHeight + 'px';
-      console.log('popwinContainerHeightAdjust - height kept as:', oldHeight);
+      //  console.log('popwinContainerHeightAdjust - height kept as:', oldHeight);
     }
   }
+
   function popwinNoMatchInit() {
     if (listContentRef.current === null) return;
     var _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');

package/{publish/Switch → Switch}/index.js

@@ -540,7 +540,7 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
 
   function handleFocus(event) {
     var _rootRef$current;
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
+    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus-floating');
 
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
@@ -552,7 +552,7 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
 
     //----
     //remove focus style
-    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
+    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus-floating');
 
     //
     if (typeof onChange === 'function') {
@@ -563,7 +563,7 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
     var _rootRef$current3;
     //----
     //remove focus style
-    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
+    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus-floating');
 
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);

package/TagInput/index.css

@@ -0,0 +1,91 @@
+/* ======================================================
+    <!-- Tag Input -->
+/* ====================================================== */
+.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;
+}
+.taginput__wrapper ul,
+.taginput__wrapper li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.taginput__wrapper .taginput__control-wrapper {
+  display: flex;
+}
+.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(--taginput-control-wrapper-bg);
+  background-clip: padding-box;
+  border: 1px solid var(--taginput-control-wrapper-border-color);
+  appearance: none;
+  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;
+}
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control {
+  margin-bottom: 0.375rem;
+}
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control input {
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 0.5rem;
+  /* bootstrap style that match ".form-control" */
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--taginput-control-color);
+}
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control input:focus {
+  outline: none;
+  box-shadow: none;
+}
+.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(--taginput-list-bg);
+  border-radius: 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+}
+.taginput__wrapper ul.taginput__list li > a {
+  font-weight: 400;
+  opacity: 0.6;
+  font-size: 18px;
+  line-height: 20px;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.taginput__wrapper ul.taginput__list li > a path {
+  fill: var(--taginput-removebtn-fill);
+}
+.taginput__wrapper ul.taginput__list li > a:hover path {
+  fill: var(--taginput-removebtn-hover-fill);
+}
+.taginput__wrapper.focus-floating .taginput__control-wrapper > div {
+  box-shadow: var(--taginput-focus-box-shadow);
+  border-color: var(--taginput-focus-border-color);
+}

package/{publish/lib/cjs/TagInput → TagInput}/index.js

@@ -1075,13 +1075,6 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   function handleChange(event) {
     var val = event.target.value;
 
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current;
-      (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.remove('focus');
-    }
-
     //
     var _alreadyInItems = alreadyInItems;
     if (items && items.length > 0) {
@@ -1098,8 +1091,9 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     setUserInput(val);
   }
   function handleFocus(event) {
-    var _rootRef$current2;
-    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.add('focus');
+    var _rootRef$current;
+    // tag style
+    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus-floating');
 
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
@@ -1107,15 +1101,8 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   function handleBlur(event) {
     var el = event.target;
     var val = event.target.value;
-
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current3;
-      (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
-    }
-
-    //
+    setUserInput('');
+    setAlreadyInItems(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
@@ -1124,7 +1111,9 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     initDefaultValue(value);
   }, [value]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('tag-input__wrapper', (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.clsWrite)(wrapperClassName, 'mb-3 position-relative')),
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('taginput__wrapper', (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
+      'focus-floating': userInput !== ''
+    }),
     ref: rootRef
   }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: "label-".concat(idRes),
@@ -1136,9 +1125,9 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     htmlFor: "label-".concat(idRes),
     className: "form-label"
   }, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "tag-input__control-wrapper"
+    className: "taginput__control-wrapper"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "tag-input__list"
+    className: "taginput__list"
   }, typeof renderSelectedValue === 'function' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, renderSelectedValue(items, handleRemove)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, items ? items.map(function (item, index) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       key: index
@@ -1156,7 +1145,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
       d: "M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
     }))));
   }) : null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('tag-input__control', {
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('taginput__control', {
       'disabled': disabled
     }),
     style: {
@@ -1171,7 +1160,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     // Don't use "name", it's just a container to display the label
     ,
     "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
-    "data-tag-input": true,
+    "data-taginput": true,
     autoComplete: typeof autoComplete === 'undefined' ? 'off' : autoComplete,
     autoCapitalize: typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize,
     spellCheck: typeof spellCheck === 'undefined' ? false : spellCheck,

package/{publish/lib/cjs/Textarea → Textarea}/index.js

@@ -1561,9 +1561,7 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     return typeof p !== 'undefined' && p !== null && p !== '';
   };
   function handleFocus(event) {
-    var _rootRef$current;
     var el = event.target;
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
 
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, valRef.current);
@@ -1571,13 +1569,6 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   function handleChange(event, curVal) {
     setChangedVal(curVal);
 
-    //----
-    //remove focus style
-    if (curVal === '') {
-      var _rootRef$current2;
-      (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
-    }
-
     //
     onChange === null || onChange === void 0 ? void 0 : onChange(event, valRef.current, curVal);
 
@@ -1592,13 +1583,6 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     var el = event.target;
     var val = el.value;
 
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current3;
-      (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
-    }
-
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, valRef.current);
 
@@ -1705,7 +1689,9 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     }
   }, []);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_3__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_3__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_3__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
+      'focus-floating': changedVal !== ''
+    }),
     ref: rootRef
   }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: idRes,

package/Utils/useSSE.d.ts

@@ -0,0 +1,9 @@
+declare const useSSE: (url: string | null | undefined, retryDelay?: number) => {
+    readonly connected: boolean;
+    readonly messages: string[];
+    readonly disconnect: () => void;
+    readonly reconnect: () => void;
+    readonly resetMessages: () => void;
+};
+export default useSSE;
+export { useSSE };