funda-ui 4.5.682 → 4.5.711

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/README.md

@@ -1,10 +1,21 @@
 # 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)
@@ -13,6 +24,7 @@ All components have undergone complex business verification and provide multiple
 
 
 
+
 ## Key Features
 
 1. Simplify the assignment method of diversified data.
@@ -22,7 +34,6 @@ 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.
@@ -63,8 +74,6 @@ Here is a table of the components and their status.
 
 
 
-
-
 ## Usage
 
 **Step 1**. You need to install it:
@@ -73,17 +82,27 @@ 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';
@@ -118,6 +137,88 @@ import 'funda-ui/CascadingSelect/index.css';
 ```
 
 
+## 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/)
 
 
 ## Licensing

package/README_PUBLISH.md

@@ -0,0 +1,126 @@
+# Funda UI
+
+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.
+
+
+---
+
+- [Documentation](https://uiux.cc/funda-ui-doc)
+
+---
+
+
+
+## Key Features
+
+1. Simplify the assignment method of diversified data.
+2. Components are compatible with `gRPC`, `REST APIs`, `GraphQL` self-packaging, uniformly use [Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) and their methods to introduce interfaces
+3. Enhanced user interaction, flexible use in asynchronous and synchronous states
+4. Introduce appropriate component `.css` files as needed, only for some components with special needs. Most of them can directly use Bootstrap's official style sheet.
+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.
+
+
+| WEB ELEMENTS | FORMS | INTERACTION | NAVIGATION | LAYOUTS |
+| --- | --- | --- | --- | --- |
+| [Accordion ✅](packages/Accordion/README.md) | [Input ✅](packages/Input/README.md) | [Infinite Scroll ❏](packages/InfiniteScroll/README.md) |[Multilevel Dropdown Menu ✅](packages/MultilevelDropdownMenu/README.md)  | [MasonryLayout ✅](packages/MasonryLayout/README.md) |
+| [Accordion Slider ❏](packages/AccordionSlider/README.md) | [Number Input ✅](packages/NumberInput/README.md) | [Image Perspective Hover ❏](packages/ImagePerspectiveHover/README.md) | [Dropdown Menu ✅](packages/DropdownMenu/README.md)  | [RootPortal ✅](packages/RootPortal/README.md)  |
+| [Back To Top ✅](packages/BackToTop/README.md) | [Merge Input ❏](packages/MergeInput/README.md) | [Mousewheel Interaction ❏](packages/MousewheelInteraction/README.md) | |   |
+| [Button ❏](packages/Button/README.md) | [Tag Input ✅](packages/TagInput/README.md) | [Parallax ❏](packages/Parallax/README.md) |  |   |
+| [Card ❏](packages/Card/README.md) | [Textarea  ✅](packages/Textarea/README.md) | [Scroll Reveal ✅](packages/ScrollReveal/README.md) |  |   |
+| [Content Placeholder ❏](packages/ContentPlaceholder/README.md) | [NativeSelect ✅](packages/NativeSelect/README.md) | [Sticky Elements ❏](packages/StickyElements/README.md) |  |  |
+| [Counter ❏](packages/Counter/README.md) | [Cascading Select ✅](packages/CascadingSelect/README.md) | [Mode Switch ✅](packages/ModeSwitch/README.md) |  |  |
+| [Hybrid Content Slider ❏](packages/HybridContentSlider/README.md) | [Cascading Select End-to-end ✅🔥](packages/CascadingSelectE2E/README.md) | [Custom Scrollbar ✅](packages/Scrollbar/README.md) |  |  |
+| [Image Shapes ❏](packages/ImageShapes/README.md) | [Radio ✅](packages/Radio/README.md) | [Horizontal Scroll Content ✅](packages/HorizontalScrollContent/README.md) |  |  |
+| [Lightbox ❏](packages/Lightbox/README.md) | [Checkbox ✅](packages/Checkbox/README.md) | [DragDrop List ✅🔥](packages/DragDropList/README.md)  |  |  |
+| [List Bulleted ❏](packages/ListBulleted/README.md) | [Select ✅🔥](packages/Select/README.md) |  |  |  |
+| [Modal Dialog ✅🔥](packages/ModalDialog/README.md) | [Live Search ✅](packages/LiveSearch/README.md) |  |  |  |
+| [Pagination ✅](packages/Pagination/README.md) | [Number ❏](packages/Number/README.md) |  |  |  |
+| [Table ✅🔥](packages/Table/README.md) | [SearchBar ✅](packages/SearchBar/README.md) |  |  |  |
+| [Periodical Scroll ❏](packages/PeriodicalScroll/README.md) | [Switch ✅](packages/Switch/README.md) |  |  |  |
+| [Progress Bar ❏](packages/ProgressBar/README.md) | [Dynamic Fields ✅🔥](packages/DynamicFields/README.md) |  |  |  |
+| [Rating ❏](packages/Rating/README.md) | [File ✅](packages/File/README.md) |  |  |  |
+| [Seamless Scrolling Element ❏](packages/SeamlessScrollingElement/README.md) | [File Field ❏](packages/FileField/README.md) |  |  |  |
+| [Show More Less ✅](packages/ShowMoreLess/README.md) | [Range Slider ✅](packages/RangeSlider/README.md) | |  |  |
+| [Slideshow ❏](packages/Slideshow/README.md) | [Color Picker ✅](packages/ColorPicker/README.md) |  |  |  |
+| [Tabs ✅](packages/Tabs/README.md) | [MultipleCheckboxes ✅](packages/MultipleCheckboxes/README.md) |  |  |  |
+| [Timeline ❏](packages/Timeline/README.md) | [MultipleSelect ✅🔥](packages/MultipleSelect/README.md) |  |  |  |
+| [Toast ✅](packages/Toast/README.md) | [Date ✅🔥](packages/Date/README.md) |  |  |  |
+| [Tooltip ✅](packages/Tooltip/README.md) |  |  |  |  |
+| [Digital Clock ✅](packages/DigitalClock/README.md) |  |  |  |  |
+| [Tree ✅🔥](packages/Tree/README.md) |  |  |  |  |
+| [Event Calendar ✅🔥](packages/EventCalendar/README.md) |  |  |  |  |
+| [Event Calendar Timeline ✅🔥](packages/EventCalendarTimeline/README.md) |  |  |  |  |
+
+
+
+
+
+
+
+## Usage
+
+**Step 1**. You need to install it:
+
+```sh
+$ npm i funda-ui
+```
+
+**Step 2**. Using Bootstrap CSS together (recommended)
+
+```html
+<link href="./bootstrap.min.css" rel="stylesheet"/>
+```
+
+
+**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';
+import CascadingSelect from 'funda-ui/CascadingSelect';
+
+// component styles
+import 'funda-ui/CascadingSelect/index.css';
+```
+
+or 
+
+```js
+import { 
+    Input,
+    Textarea,
+    CascadingSelect
+} from 'funda-ui';
+
+// component styles
+import 'funda-ui/CascadingSelect/index.css';
+```
+
+or
+
+```js
+const Input = require('funda-ui').Input;
+const Textarea = require('funda-ui').Textarea;
+const CascadingSelect = require('funda-ui').CascadingSelect;
+
+// component styles
+import 'funda-ui/CascadingSelect/index.css';
+```
+
+
+
+
+## Licensing
+
+Licensed under the [MIT](https://opensource.org/licenses/MIT).
+

package/lib/cjs/DragDropList/index.d.ts

@@ -10,6 +10,7 @@ export interface ListItem {
     children?: ListItem[];
     disabled?: boolean;
     appendControl?: React.ReactNode;
+    [key: string]: any;
 }
 export interface DragDropListProps {
     wrapperClassName?: string;

package/lib/cjs/DragDropList/index.js

@@ -880,8 +880,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 ))}
             </ul>
         );
-        };
-        
         
          */
 
@@ -1274,11 +1272,11 @@ var DragDropList = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef
 
     // Handle object
     var clonedObj = {};
-    for (var key in obj) {
-      if (key === 'appendControl') {
-        clonedObj[key] = obj[key];
+    for (var _key in obj) {
+      if (_key === 'appendControl') {
+        clonedObj[_key] = obj[_key];
       } else {
-        clonedObj[key] = deepCloneWithReactNode(obj[key]);
+        clonedObj[_key] = deepCloneWithReactNode(obj[_key]);
       }
     }
     return clonedObj;

package/lib/cjs/MultipleSelect/index.d.ts

@@ -10,6 +10,7 @@ export interface OptionConfig {
     children?: OptionConfig[];
     disabled?: boolean;
     extendedContent?: React.ReactNode;
+    [key: string]: any;
 }
 export declare type MultipleSelectProps = {
     contentRef?: React.ForwardedRef<any>;

package/lib/cjs/MultipleSelect/index.js

@@ -911,8 +911,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                           ))}
                       </ul>
                   );
-                  };
-                  
                   
                    */
 
@@ -1110,7 +1108,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/
       /******/ // The require function
       /******/
-      function __nested_webpack_require_54674__(moduleId) {
+      function __nested_webpack_require_54634__(moduleId) {
         /******/ // Check if module is in cache
         /******/var cachedModule = __webpack_module_cache__[moduleId];
         /******/
@@ -1129,7 +1127,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         /******/
         /******/ // Execute the module function
         /******/
-        __webpack_modules__[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_54674__);
+        __webpack_modules__[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_54634__);
         /******/
         /******/ // Flag the module as loaded
         /******/
@@ -1146,14 +1144,14 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/
       (function () {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/__nested_webpack_require_54674__.n = function (module) {
+        /******/__nested_webpack_require_54634__.n = function (module) {
           /******/var getter = module && module.__esModule ? /******/function () {
             return module['default'];
           } : /******/function () {
             return module;
           };
           /******/
-          __nested_webpack_require_54674__.d(getter, {
+          __nested_webpack_require_54634__.d(getter, {
             a: getter
           });
           /******/
@@ -1167,9 +1165,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/
       (function () {
         /******/ // define getter functions for harmony exports
-        /******/__nested_webpack_require_54674__.d = function (exports, definition) {
+        /******/__nested_webpack_require_54634__.d = function (exports, definition) {
           /******/for (var key in definition) {
-            /******/if (__nested_webpack_require_54674__.o(definition, key) && !__nested_webpack_require_54674__.o(exports, key)) {
+            /******/if (__nested_webpack_require_54634__.o(definition, key) && !__nested_webpack_require_54634__.o(exports, key)) {
               /******/Object.defineProperty(exports, key, {
                 enumerable: true,
                 get: definition[key]
@@ -1186,7 +1184,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/ /* webpack/runtime/hasOwnProperty shorthand */
       /******/
       (function () {
-        /******/__nested_webpack_require_54674__.o = function (obj, prop) {
+        /******/__nested_webpack_require_54634__.o = function (obj, prop) {
           return Object.prototype.hasOwnProperty.call(obj, prop);
         };
         /******/
@@ -1196,7 +1194,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/
       (function () {
         /******/ // define __esModule on exports
-        /******/__nested_webpack_require_54674__.r = function (exports) {
+        /******/__nested_webpack_require_54634__.r = function (exports) {
           /******/if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
             /******/Object.defineProperty(exports, Symbol.toStringTag, {
               value: 'Module'
@@ -1215,7 +1213,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       /******/ /* webpack/runtime/node module decorator */
       /******/
       (function () {
-        /******/__nested_webpack_require_54674__.nmd = function (module) {
+        /******/__nested_webpack_require_54634__.nmd = function (module) {
           /******/module.paths = [];
           /******/
           if (!module.children) module.children = [];
@@ -1232,30 +1230,30 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       (function () {
         "use strict";
 
-        __nested_webpack_require_54674__.r(__webpack_exports__);
+        __nested_webpack_require_54634__.r(__webpack_exports__);
         /* harmony export */
-        __nested_webpack_require_54674__.d(__webpack_exports__, {
+        __nested_webpack_require_54634__.d(__webpack_exports__, {
           /* harmony export */"default": function _default() {
             return __WEBPACK_DEFAULT_EXPORT__;
           }
           /* harmony export */
         });
         /* harmony import */
-        var react__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_54674__(787);
+        var react__WEBPACK_IMPORTED_MODULE_0__ = __nested_webpack_require_54634__(787);
         /* harmony import */
-        var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_54674__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+        var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__nested_webpack_require_54634__.n(react__WEBPACK_IMPORTED_MODULE_0__);
         /* harmony import */
-        var funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_54674__(438);
+        var funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1__ = __nested_webpack_require_54634__(438);
         /* harmony import */
-        var funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_54674__.n(funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1__);
+        var funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__nested_webpack_require_54634__.n(funda_utils_dist_cjs_tree__WEBPACK_IMPORTED_MODULE_1__);
         /* harmony import */
-        var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__ = __nested_webpack_require_54674__(188);
+        var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__ = __nested_webpack_require_54634__(188);
         /* harmony import */
-        var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__nested_webpack_require_54674__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__);
+        var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__nested_webpack_require_54634__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__);
         /* harmony import */
-        var funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3__ = __nested_webpack_require_54674__(759);
+        var funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3__ = __nested_webpack_require_54634__(759);
         /* harmony import */
-        var funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__nested_webpack_require_54674__.n(funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3__);
+        var funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__nested_webpack_require_54634__.n(funda_utils_dist_cjs_useBoundedDrag__WEBPACK_IMPORTED_MODULE_3__);
         var _excluded = ["wrapperClassName", "prefix", "data", "draggable", "handleHide", "handleIcon", "handlePos", "dragMode", "editable", "itemStyle", "hierarchical", "indentation", "doubleIndent", "alternateCollapse", "arrow", "onUpdate"];
         function _extends() {
           _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1502,11 +1500,11 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
             // Handle object
             var clonedObj = {};
-            for (var key in obj) {
-              if (key === 'appendControl') {
-                clonedObj[key] = obj[key];
+            for (var _key in obj) {
+              if (_key === 'appendControl') {
+                clonedObj[_key] = obj[_key];
               } else {
-                clonedObj[key] = deepCloneWithReactNode(obj[key]);
+                clonedObj[_key] = deepCloneWithReactNode(obj[_key]);
               }
             }
             return clonedObj;

package/lib/cjs/Textarea/index.d.ts

@@ -20,6 +20,7 @@ export declare type TextareaProps = {
     readOnly?: any;
     placeholder?: string;
     autoSize?: boolean;
+    autoSizeMaxHeight?: number;
     iconLeft?: React.ReactNode | string;
     iconRight?: React.ReactNode | string;
     aiPredict?: boolean;

package/lib/cjs/Textarea/index.js

@@ -664,7 +664,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             const [value, setValue] = useState("");
             const el = useRef<HTMLTextAreaElement>(null);
         
-            useAutosizeTextArea({
+            const { reset } = useAutosizeTextArea({
                 el: el.current, 
                 value: value,
                 cb: (res) => {
@@ -672,11 +672,25 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 }
             });
         
+            useImperativeHandle(
+                contentRef,
+                () => ({
+                    resetHeight: () => {
+                        reset();
+                    },
+                }),
+                [contentRef, reset]
+            );
+        
             const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
                 const val = evt.target?.value;
                 setValue(val);
             };
         
+            const handleReset = () => {
+                reset();
+            };
+        
             return (
                 <div className="App">
                     <textarea
@@ -696,6 +710,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         var useAutosizeTextArea = function useAutosizeTextArea(_ref) {
           var el = _ref.el,
             value = _ref.value,
+            _ref$maxHeight = _ref.maxHeight,
+            maxHeight = _ref$maxHeight === void 0 ? 0 : _ref$maxHeight,
             cb = _ref.cb;
           var _useState = (0, react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
             _useState2 = _slicedToArray(_useState, 2),
@@ -705,6 +721,18 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             _useState4 = _slicedToArray(_useState3, 2),
             defaultRowHeightInit = _useState4[0],
             setDefaultRowHeightInit = _useState4[1];
+
+          // Reset function to restore default height
+          var reset = (0, react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+            if (el && defaultRowHeight > 0) {
+              el.style.height = defaultRowHeight + "px";
+
+              // Get current dimensions after reset
+              var style = el.currentStyle || window.getComputedStyle(el);
+              var _controlWidth = el.scrollWidth + parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth);
+              cb === null || cb === void 0 ? void 0 : cb([_controlWidth, defaultRowHeight]);
+            }
+          }, [el, defaultRowHeight, cb]);
           (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
             if (el) {
               var style = el.currentStyle || window.getComputedStyle(el);
@@ -729,11 +757,18 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
               // !!! Compare initial height and changed height
               if (scrollHeight > defaultRowHeight && defaultRowHeight > 0) {
-                el.style.height = scrollHeight + "px";
+                if (maxHeight != 0 && scrollHeight >= maxHeight) {
+                  el.style.height = maxHeight + "px";
+                } else {
+                  el.style.height = scrollHeight + "px";
+                }
               }
               cb === null || cb === void 0 ? void 0 : cb([_controlWidth, scrollHeight]);
             }
           }, [el, value]);
+          return {
+            reset: reset
+          };
         };
         /* harmony default export */
         var __WEBPACK_DEFAULT_EXPORT__ = useAutosizeTextArea;
@@ -1216,7 +1251,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_inputsCalculation__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(702);
 /* harmony import */ var funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_5__);
-var _excluded = ["contentRef", "wrapperClassName", "controlClassName", "controlExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "iconLeft", "iconRight", "aiPredict", "aiPredictRemainingTextRGB", "aiPredictConfirmKey", "aiPredictFetchFuncAsync", "aiPredictFetchFuncMethod", "aiPredictFetchFuncMethodParams", "aiPredictFetchCallback", "readOnly", "defaultValue", "value", "requiredLabel", "label", "name", "id", "minLength", "maxLength", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus", "onPressEnter", "onKeyDown", "onKeyUp", "onResize"];
+var _excluded = ["contentRef", "wrapperClassName", "controlClassName", "controlExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "autoSizeMaxHeight", "iconLeft", "iconRight", "aiPredict", "aiPredictRemainingTextRGB", "aiPredictConfirmKey", "aiPredictFetchFuncAsync", "aiPredictFetchFuncMethod", "aiPredictFetchFuncMethodParams", "aiPredictFetchCallback", "readOnly", "defaultValue", "value", "requiredLabel", "label", "name", "id", "minLength", "maxLength", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus", "onPressEnter", "onKeyDown", "onKeyUp", "onResize"];
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -1253,6 +1288,8 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     required = props.required,
     placeholder = props.placeholder,
     autoSize = props.autoSize,
+    _props$autoSizeMaxHei = props.autoSizeMaxHeight,
+    autoSizeMaxHeight = _props$autoSizeMaxHei === void 0 ? 0 : _props$autoSizeMaxHei,
     iconLeft = props.iconLeft,
     iconRight = props.iconRight,
     _props$aiPredict = props.aiPredict,
@@ -1470,6 +1507,17 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   //
   var remainingText = getRemainingText(currentSuggestion);
 
+  // auto size
+  var _useAutosizeTextArea = funda_utils_dist_cjs_useAutosizeTextArea__WEBPACK_IMPORTED_MODULE_2___default()({
+      el: autoSize ? valRef.current : null,
+      value: autoSize ? changedVal : '',
+      maxHeight: autoSizeMaxHeight,
+      cb: function cb(res) {
+        onResize === null || onResize === void 0 ? void 0 : onResize(valRef.current, res);
+      }
+    }),
+    reset = _useAutosizeTextArea.reset;
+
   //================================================================
   // General
   //================================================================  
@@ -1487,6 +1535,9 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
         setChangedVal("".concat(value));
         cb === null || cb === void 0 ? void 0 : cb();
       },
+      resetHeight: function resetHeight() {
+        reset();
+      },
       aiPredictReset: function aiPredictReset() {
         setTimeout(function () {
           // Avoid conflicts with other asynchronous states, resulting in invalid clearing
@@ -1494,16 +1545,7 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
         }, 0);
       }
     };
-  }, [contentRef]);
-
-  // auto size
-  funda_utils_dist_cjs_useAutosizeTextArea__WEBPACK_IMPORTED_MODULE_2___default()({
-    el: autoSize ? valRef.current : null,
-    value: autoSize ? changedVal : '',
-    cb: function cb(res) {
-      onResize === null || onResize === void 0 ? void 0 : onResize(valRef.current, res);
-    }
-  });
+  }, [contentRef, reset]);
   var propExist = function propExist(p) {
     return typeof p !== 'undefined' && p !== null && p !== '';
   };