funda-ui 1.0.516 → 1.0.517

package/Input/index.js

@@ -178,10 +178,6 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
 
     //
     onChange === null || onChange === void 0 ? void 0 : onChange(event, onComposition);
-    if (typeof onChangeCallback === 'function') {
-      var newData = onChangeCallback(event);
-      setChangedVal(newData);
-    }
   }
   function handleBlur(event) {
     var el = event.target;
@@ -195,6 +191,12 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
 
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, onComposition);
+
+    //
+    if (typeof onChangeCallback === 'function') {
+      var newData = onChangeCallback(event);
+      setChangedVal(newData);
+    }
   }
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     // update default value

package/Textarea/index.d.ts

@@ -17,11 +17,14 @@ interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
     required?: any;
     readOnly?: any;
     placeholder?: string;
+    autoSize?: boolean;
+    autoSizeBeginOneline?: boolean;
     /** -- */
     id?: string;
     style?: React.CSSProperties;
     tabIndex?: number;
     [key: `data-${string}`]: string | undefined;
+    onChangeCallback?: (e: any) => void;
     onChange?: (e: any) => void;
     onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;

package/Textarea/index.js

@@ -90,25 +90,154 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
 var __webpack_exports__ = {};
 // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
 (() => {
+// ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* 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__);
-var _excluded = ["wrapperClassName", "controlClassName", "cols", "rows", "disabled", "required", "placeholder", "readOnly", "value", "label", "name", "id", "maxLength", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ src)
+});
+
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(787);
+var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
+;// CONCATENATED MODULE: ./src/utils/useAutosizeTextArea.js
 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; }
+/**
+ * Creating a Textarea with dynamic height
+ * 
+ * @usage:
+
+
+const App = () => {
+    const [value, setValue] = useState("");
+    const el = useRef<HTMLTextAreaElement>(null);
+
+    useAutosizeTextArea(el.current, value, false);
+
+    const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const val = evt.target?.value;
+        setValue(val);
+    };
+
+    return (
+        <div className="App">
+            <textarea
+                onChange={handleChange}
+                ref={el}
+                rows={3}
+                value={value}
+            />
+        </div>
+    );
+};
+
+
+//--------
+
+const App = () => {
+    const [value, setValue] = useState("");
+    const el = useRef<HTMLTextAreaElement>(null);
+
+    useAutosizeTextArea(el.current, value, true);
+
+    const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const val = evt.target?.value;
+        setValue(val);
+    };
+
+    return (
+        <div className="App">
+            <textarea
+                onChange={handleChange}
+                ref={el}
+                rows={1}
+                value={value}
+            />
+        </div>
+    );
+};
+
+
+
+ */
+
+
+
+// Updates the height of a <textarea> when the value changes.
+var useAutosizeTextArea = function useAutosizeTextArea(el, value, autoSizeBeginOneline) {
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultRowHeight = _useState2[0],
+    setDefaultRowHeight = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dynamicDefaultRowHeight = _useState4[0],
+    setDynamicDefaultRowHeight = _useState4[1];
+  var _useState5 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    defaultRowHeightInit = _useState6[0],
+    setDefaultRowHeightInit = _useState6[1];
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (el) {
+      if (autoSizeBeginOneline) {
+        el.style.height = "0px";
+        var beginOnelineScrollHeight = el.scrollHeight;
+        el.style.height = beginOnelineScrollHeight + "px";
+      } else {
+        // initialize default row height
+        if (el.scrollHeight > 0 && !defaultRowHeightInit) {
+          setDefaultRowHeight(el.scrollHeight);
+          setDynamicDefaultRowHeight(el.scrollHeight);
+          setDefaultRowHeightInit(true);
+        }
+
+        // reset the height momentarily to get the correct scrollHeight for the textarea
+        var scrollHeight = el.scrollHeight;
+
+        // reset row height
+        if (typeof value !== 'undefined' && value.length === 0) {
+          el.style.height = dynamicDefaultRowHeight + "px";
+
+          // update default row height
+          setDefaultRowHeight(dynamicDefaultRowHeight);
+        }
+
+        // then set the height directly, outside of the render loop
+        // Trying to set this with state or a ref will product an incorrect value.
+
+        // !!! Compare initial height and changed height
+        if (scrollHeight > defaultRowHeight && defaultRowHeight > 0) {
+          el.style.height = scrollHeight + "px";
+
+          // update default row height
+          setDefaultRowHeight(scrollHeight);
+        }
+      }
+    }
+  }, [el, value]);
+};
+/* harmony default export */ const utils_useAutosizeTextArea = (useAutosizeTextArea);
+;// CONCATENATED MODULE: ./src/index.tsx
+var _excluded = ["wrapperClassName", "controlClassName", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "autoSizeBeginOneline", "readOnly", "value", "label", "name", "id", "maxLength", "style", "tabIndex", "onChangeCallback", "onChange", "onBlur", "onFocus"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function src_slicedToArray(arr, i) { return src_arrayWithHoles(arr) || src_iterableToArrayLimit(arr, i) || src_unsupportedIterableToArray(arr, i) || src_nonIterableRest(); }
+function src_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 src_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return src_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 src_arrayLikeToArray(o, minLen); }
+function src_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 src_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 src_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+
 ;
-var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, _ref) {
+var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, _ref) {
   var wrapperClassName = props.wrapperClassName,
     controlClassName = props.controlClassName,
     cols = props.cols,
@@ -116,6 +245,8 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     disabled = props.disabled,
     required = props.required,
     placeholder = props.placeholder,
+    autoSize = props.autoSize,
+    autoSizeBeginOneline = props.autoSizeBeginOneline,
     readOnly = props.readOnly,
     value = props.value,
     label = props.label,
@@ -124,18 +255,22 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     maxLength = props.maxLength,
     style = props.style,
     tabIndex = props.tabIndex,
+    onChangeCallback = props.onChangeCallback,
     onChange = props.onChange,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     attributes = _objectWithoutProperties(props, _excluded);
-  var uniqueID = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)();
+  var uniqueID = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useId)();
   var idRes = id || uniqueID;
-  var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var valRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value || ''),
-    _useState2 = _slicedToArray(_useState, 2),
+  var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var valRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(value || ''),
+    _useState2 = src_slicedToArray(_useState, 2),
     changedVal = _useState2[0],
     setChangedVal = _useState2[1];
+
+  // auto size
+  utils_useAutosizeTextArea(autoSize ? valRef.current : null, autoSize ? changedVal : '', autoSizeBeginOneline);
   function handleFocus(event) {
     var el = event.target;
     rootRef.current.classList.add('focus');
@@ -168,24 +303,30 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
 
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+
+    //
+    if (typeof onChangeCallback === 'function') {
+      var newData = onChangeCallback(event);
+      setChangedVal(newData);
+    }
   }
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     // update default value
     //--------------
     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", {
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative",
     ref: rootRef
-  }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+  }, label ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("label", {
     htmlFor: idRes,
     className: "form-label",
     dangerouslySetInnerHTML: {
       __html: "".concat(label)
     }
-  })) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  })) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "input-group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", _extends({
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("textarea", _extends({
     ref: function ref(node) {
       valRef.current = node;
       if (typeof _ref === 'function') {
@@ -208,15 +349,15 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     required: required || null,
     readOnly: readOnly || null,
     cols: cols || 20,
-    rows: rows || 2,
+    rows: autoSizeBeginOneline ? 1 : rows || 1,
     style: style
-  }, attributes))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+  }, attributes))), required ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "position-absolute end-0 top-0 my-2 mx-2"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "text-danger"
   }, "*"))) : ''));
 });
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Textarea);
+/* harmony default export */ const src = (Textarea);
 })();
 
 /******/ 	return __webpack_exports__;

package/lib/cjs/Input/index.js

@@ -178,10 +178,6 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
 
     //
     onChange === null || onChange === void 0 ? void 0 : onChange(event, onComposition);
-    if (typeof onChangeCallback === 'function') {
-      var newData = onChangeCallback(event);
-      setChangedVal(newData);
-    }
   }
   function handleBlur(event) {
     var el = event.target;
@@ -195,6 +191,12 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
 
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, onComposition);
+
+    //
+    if (typeof onChangeCallback === 'function') {
+      var newData = onChangeCallback(event);
+      setChangedVal(newData);
+    }
   }
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     // update default value

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

@@ -17,11 +17,14 @@ interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
     required?: any;
     readOnly?: any;
     placeholder?: string;
+    autoSize?: boolean;
+    autoSizeBeginOneline?: boolean;
     /** -- */
     id?: string;
     style?: React.CSSProperties;
     tabIndex?: number;
     [key: `data-${string}`]: string | undefined;
+    onChangeCallback?: (e: any) => void;
     onChange?: (e: any) => void;
     onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;

package/lib/cjs/Textarea/index.js

@@ -90,25 +90,154 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
 var __webpack_exports__ = {};
 // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
 (() => {
+// ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* 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__);
-var _excluded = ["wrapperClassName", "controlClassName", "cols", "rows", "disabled", "required", "placeholder", "readOnly", "value", "label", "name", "id", "maxLength", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ src)
+});
+
+// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
+var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(787);
+var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
+;// CONCATENATED MODULE: ./src/utils/useAutosizeTextArea.js
 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; }
+/**
+ * Creating a Textarea with dynamic height
+ * 
+ * @usage:
+
+
+const App = () => {
+    const [value, setValue] = useState("");
+    const el = useRef<HTMLTextAreaElement>(null);
+
+    useAutosizeTextArea(el.current, value, false);
+
+    const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const val = evt.target?.value;
+        setValue(val);
+    };
+
+    return (
+        <div className="App">
+            <textarea
+                onChange={handleChange}
+                ref={el}
+                rows={3}
+                value={value}
+            />
+        </div>
+    );
+};
+
+
+//--------
+
+const App = () => {
+    const [value, setValue] = useState("");
+    const el = useRef<HTMLTextAreaElement>(null);
+
+    useAutosizeTextArea(el.current, value, true);
+
+    const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const val = evt.target?.value;
+        setValue(val);
+    };
+
+    return (
+        <div className="App">
+            <textarea
+                onChange={handleChange}
+                ref={el}
+                rows={1}
+                value={value}
+            />
+        </div>
+    );
+};
+
+
+
+ */
+
+
+
+// Updates the height of a <textarea> when the value changes.
+var useAutosizeTextArea = function useAutosizeTextArea(el, value, autoSizeBeginOneline) {
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultRowHeight = _useState2[0],
+    setDefaultRowHeight = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dynamicDefaultRowHeight = _useState4[0],
+    setDynamicDefaultRowHeight = _useState4[1];
+  var _useState5 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    defaultRowHeightInit = _useState6[0],
+    setDefaultRowHeightInit = _useState6[1];
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (el) {
+      if (autoSizeBeginOneline) {
+        el.style.height = "0px";
+        var beginOnelineScrollHeight = el.scrollHeight;
+        el.style.height = beginOnelineScrollHeight + "px";
+      } else {
+        // initialize default row height
+        if (el.scrollHeight > 0 && !defaultRowHeightInit) {
+          setDefaultRowHeight(el.scrollHeight);
+          setDynamicDefaultRowHeight(el.scrollHeight);
+          setDefaultRowHeightInit(true);
+        }
+
+        // reset the height momentarily to get the correct scrollHeight for the textarea
+        var scrollHeight = el.scrollHeight;
+
+        // reset row height
+        if (typeof value !== 'undefined' && value.length === 0) {
+          el.style.height = dynamicDefaultRowHeight + "px";
+
+          // update default row height
+          setDefaultRowHeight(dynamicDefaultRowHeight);
+        }
+
+        // then set the height directly, outside of the render loop
+        // Trying to set this with state or a ref will product an incorrect value.
+
+        // !!! Compare initial height and changed height
+        if (scrollHeight > defaultRowHeight && defaultRowHeight > 0) {
+          el.style.height = scrollHeight + "px";
+
+          // update default row height
+          setDefaultRowHeight(scrollHeight);
+        }
+      }
+    }
+  }, [el, value]);
+};
+/* harmony default export */ const utils_useAutosizeTextArea = (useAutosizeTextArea);
+;// CONCATENATED MODULE: ./src/index.tsx
+var _excluded = ["wrapperClassName", "controlClassName", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "autoSizeBeginOneline", "readOnly", "value", "label", "name", "id", "maxLength", "style", "tabIndex", "onChangeCallback", "onChange", "onBlur", "onFocus"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function src_slicedToArray(arr, i) { return src_arrayWithHoles(arr) || src_iterableToArrayLimit(arr, i) || src_unsupportedIterableToArray(arr, i) || src_nonIterableRest(); }
+function src_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 src_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return src_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 src_arrayLikeToArray(o, minLen); }
+function src_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 src_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 src_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+
 ;
-var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function (props, _ref) {
+var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (props, _ref) {
   var wrapperClassName = props.wrapperClassName,
     controlClassName = props.controlClassName,
     cols = props.cols,
@@ -116,6 +245,8 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     disabled = props.disabled,
     required = props.required,
     placeholder = props.placeholder,
+    autoSize = props.autoSize,
+    autoSizeBeginOneline = props.autoSizeBeginOneline,
     readOnly = props.readOnly,
     value = props.value,
     label = props.label,
@@ -124,18 +255,22 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     maxLength = props.maxLength,
     style = props.style,
     tabIndex = props.tabIndex,
+    onChangeCallback = props.onChangeCallback,
     onChange = props.onChange,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     attributes = _objectWithoutProperties(props, _excluded);
-  var uniqueID = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)();
+  var uniqueID = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useId)();
   var idRes = id || uniqueID;
-  var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var valRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value || ''),
-    _useState2 = _slicedToArray(_useState, 2),
+  var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var valRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(value || ''),
+    _useState2 = src_slicedToArray(_useState, 2),
     changedVal = _useState2[0],
     setChangedVal = _useState2[1];
+
+  // auto size
+  utils_useAutosizeTextArea(autoSize ? valRef.current : null, autoSize ? changedVal : '', autoSizeBeginOneline);
   function handleFocus(event) {
     var el = event.target;
     rootRef.current.classList.add('focus');
@@ -168,24 +303,30 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
 
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+
+    //
+    if (typeof onChangeCallback === 'function') {
+      var newData = onChangeCallback(event);
+      setChangedVal(newData);
+    }
   }
-  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     // update default value
     //--------------
     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", {
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative",
     ref: rootRef
-  }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+  }, label ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("label", {
     htmlFor: idRes,
     className: "form-label",
     dangerouslySetInnerHTML: {
       __html: "".concat(label)
     }
-  })) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  })) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "input-group"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", _extends({
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("textarea", _extends({
     ref: function ref(node) {
       valRef.current = node;
       if (typeof _ref === 'function') {
@@ -208,15 +349,15 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     required: required || null,
     readOnly: readOnly || null,
     cols: cols || 20,
-    rows: rows || 2,
+    rows: autoSizeBeginOneline ? 1 : rows || 1,
     style: style
-  }, attributes))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+  }, attributes))), required ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "position-absolute end-0 top-0 my-2 mx-2"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: "text-danger"
   }, "*"))) : ''));
 });
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Textarea);
+/* harmony default export */ const src = (Textarea);
 })();
 
 /******/ 	return __webpack_exports__;

package/lib/esm/Input/index.tsx

@@ -118,10 +118,7 @@ const Input = forwardRef((props: InputProps, ref: any) => {
 
         //
         onChange?.(event, onComposition);
-        if (typeof (onChangeCallback) === 'function') {
-            const newData: any = onChangeCallback(event);
-            setChangedVal(newData);
-        }
+
 
     }
 
@@ -138,6 +135,12 @@ const Input = forwardRef((props: InputProps, ref: any) => {
 
         //
         onBlur?.(event, onComposition);
+
+        //
+        if (typeof (onChangeCallback) === 'function') {
+            const newData: any = onChangeCallback(event);
+            setChangedVal(newData);
+        }
     }
 
 

package/lib/esm/Textarea/index.tsx

@@ -1,6 +1,8 @@
 import React, { useId, useState, useEffect, useRef, forwardRef } from 'react';
 
 
+import useAutosizeTextArea from './utils/useAutosizeTextArea';
+
 declare module 'react' {
     interface ReactI18NextChildren<T> {
         children?: any;
@@ -19,11 +21,14 @@ interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
 	required?: any;
     readOnly?: any;
 	placeholder?: string;
+    autoSize?: boolean;
+    autoSizeBeginOneline?: boolean;
 	/** -- */
 	id?: string;
     style?: React.CSSProperties;
     tabIndex?: number;
     [key: `data-${string}`]: string | undefined;
+    onChangeCallback?: (e: any) => void;
     onChange?: (e: any) => void;
     onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;
@@ -39,6 +44,8 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
         disabled,
         required,
         placeholder,
+        autoSize,
+        autoSizeBeginOneline,
         readOnly,
         value,
         label,
@@ -47,6 +54,7 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
         maxLength,
         style,
         tabIndex,
+        onChangeCallback,
         onChange,
         onBlur,
         onFocus,
@@ -60,6 +68,10 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
     const valRef = useRef<any>(null);
     const [changedVal, setChangedVal] = useState<string>(value || '');
 
+
+    // auto size
+    useAutosizeTextArea(autoSize ? valRef.current : null, autoSize ? changedVal : '', autoSizeBeginOneline);
+
     function handleFocus(event: any) {
         const el = event.target;
         rootRef.current.classList.add('focus');
@@ -96,6 +108,14 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
 
         //
         onBlur?.(event);
+
+
+        //
+        if (typeof (onChangeCallback) === 'function') {
+            const newData: any = onChangeCallback(event);
+            setChangedVal(newData);
+        }
+
     }
 
     useEffect(() => {
@@ -138,7 +158,7 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
 					  required={required || null}
                       readOnly={readOnly || null}
 					  cols={cols || 20}
-					  rows={rows || 2}
+					  rows={autoSizeBeginOneline ? 1 : (rows || 1)}
                       style={style}
                       {...attributes}
 					/>

package/lib/esm/Textarea/utils/useAutosizeTextArea.js

@@ -0,0 +1,124 @@
+/**
+ * Creating a Textarea with dynamic height
+ * 
+ * @usage:
+
+
+const App = () => {
+    const [value, setValue] = useState("");
+    const el = useRef<HTMLTextAreaElement>(null);
+
+    useAutosizeTextArea(el.current, value, false);
+
+    const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const val = evt.target?.value;
+        setValue(val);
+    };
+
+    return (
+        <div className="App">
+            <textarea
+                onChange={handleChange}
+                ref={el}
+                rows={3}
+                value={value}
+            />
+        </div>
+    );
+};
+
+
+//--------
+
+const App = () => {
+    const [value, setValue] = useState("");
+    const el = useRef<HTMLTextAreaElement>(null);
+
+    useAutosizeTextArea(el.current, value, true);
+
+    const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const val = evt.target?.value;
+        setValue(val);
+    };
+
+    return (
+        <div className="App">
+            <textarea
+                onChange={handleChange}
+                ref={el}
+                rows={1}
+                value={value}
+            />
+        </div>
+    );
+};
+
+
+
+ */
+
+
+import { useEffect, useState } from "react";
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (
+    el,
+    value,
+    autoSizeBeginOneline
+) => {
+
+    const [defaultRowHeight, setDefaultRowHeight] = useState(0);
+    const [dynamicDefaultRowHeight, setDynamicDefaultRowHeight] = useState(0);
+    const [defaultRowHeightInit, setDefaultRowHeightInit] = useState(false);
+
+    useEffect(() => {
+        
+        if (el) {
+
+            if (autoSizeBeginOneline) {
+                el.style.height = "0px";
+                const beginOnelineScrollHeight = el.scrollHeight;
+                el.style.height = beginOnelineScrollHeight + "px";
+            }  else {
+                
+                // initialize default row height
+                if (el.scrollHeight > 0 && !defaultRowHeightInit) {
+                    setDefaultRowHeight(el.scrollHeight);
+                    setDynamicDefaultRowHeight(el.scrollHeight);
+                    setDefaultRowHeightInit(true);
+                }
+
+                // reset the height momentarily to get the correct scrollHeight for the textarea
+                const scrollHeight = el.scrollHeight;
+
+        
+                // reset row height
+                if (typeof value !== 'undefined' && value.length === 0) {
+                    el.style.height = dynamicDefaultRowHeight + "px";
+
+                    // update default row height
+                    setDefaultRowHeight(dynamicDefaultRowHeight);
+                }
+
+
+                // then set the height directly, outside of the render loop
+                // Trying to set this with state or a ref will product an incorrect value.
+
+                // !!! Compare initial height and changed height
+                if (scrollHeight > defaultRowHeight && defaultRowHeight > 0) {
+                    el.style.height = scrollHeight + "px";
+
+                    // update default row height
+                    setDefaultRowHeight(scrollHeight);
+                }
+
+            }
+
+
+
+            
+        }
+    }, [el, value]);
+};
+
+export default useAutosizeTextArea;

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "1.0.516",
+  "version": "1.0.517",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",