funda-ui 2.0.355 → 2.0.375

package/Tabs/index.js

@@ -126,28 +126,36 @@ var TabList = function TabList(props) {
 };
 /* harmony default export */ const src_TabList = (TabList);
 ;// CONCATENATED MODULE: ./src/TabPanel.tsx
-var _excluded = ["fadeDisabled", "defaultActive", "expandedActiveClassNameForPanel", "tabpanelClass", "targetId", "index"];
+var _excluded = ["defaultActive", "expandedActiveClassNameForPanel", "tabpanelClass", "targetId", "index"];
 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 _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 TabPanel = function TabPanel(props) {
-  var fadeDisabled = props.fadeDisabled,
-    defaultActive = props.defaultActive,
+  var defaultActive = props.defaultActive,
     expandedActiveClassNameForPanel = props.expandedActiveClassNameForPanel,
     tabpanelClass = props.tabpanelClass,
     targetId = props.targetId,
     index = props.index,
     attributes = _objectWithoutProperties(props, _excluded);
   var _expandClassName = typeof expandedActiveClassNameForPanel !== 'undefined' ? expandedActiveClassNameForPanel : '';
-  var activedClassName = typeof defaultActive !== 'undefined' && defaultActive !== false ? " show active ".concat(_expandClassName) : " ".concat(_expandClassName);
+  var activedClassName = typeof defaultActive !== 'undefined' && defaultActive !== false ? " active ".concat(_expandClassName) : " ".concat(_expandClassName);
+
+  // !!!Special note:
+  // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
+  // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
+  var activedStyles = typeof defaultActive !== 'undefined' && defaultActive !== false ? {} : {
+    height: '0',
+    overflow: 'hidden'
+  };
   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", _extends({
     "data-index": index,
     "data-tabpanel-index": index,
     role: "tabpanel",
     id: targetId,
-    className: tabpanelClass ? "tab-pane ".concat(fadeDisabled ? '' : 'fade', " ").concat(tabpanelClass, " ").concat(activedClassName) : "tab-pane ".concat(fadeDisabled ? '' : 'fade', " ").concat(activedClassName)
+    className: tabpanelClass ? "tab-pane d-block ".concat(tabpanelClass, " ").concat(activedClassName) : "tab-pane d-block ".concat(activedClassName),
+    style: activedStyles
   }, attributes)));
 };
 /* harmony default export */ const src_TabPanel = (TabPanel);
@@ -178,6 +186,20 @@ var Tabs = function Tabs(props) {
   var uniqueID = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useId)().replace(/\:/g, "-");
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var speed = animTransitionDuration ? animTransitionDuration : 150;
+  var elDisplay = function elDisplay(type, node) {
+    if (node === null) return;
+
+    // !!!Special note:
+    // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
+    // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
+    if (type === 'hide') {
+      node.style.setProperty('height', '0');
+      node.style.setProperty('overflow', 'hidden');
+    } else {
+      node.style.removeProperty('height');
+      node.style.removeProperty('overflow');
+    }
+  };
   function handleClickItem(e) {
     e.preventDefault();
     var el = e.currentTarget;
@@ -220,7 +242,8 @@ var Tabs = function Tabs(props) {
       runExClassName(node.firstChild, _classNameNav, 'remove');
     });
     $allContent.forEach(function (node) {
-      node.classList.remove('show');
+      // 
+      elDisplay('hide', node);
       setTimeout(function () {
         node.classList.remove('active');
         runExClassName(node, _classNamePanel, 'remove');
@@ -236,7 +259,8 @@ var Tabs = function Tabs(props) {
       setTimeout(function () {
         var _panel = document.getElementById(tabID);
         if (_panel !== null) {
-          _panel.classList.add('active', 'show');
+          elDisplay('show', _panel);
+          _panel.classList.add('active');
           runExClassName(_panel, _classNamePanel, 'add');
         }
       }, speed);

package/Textarea/index.d.ts

@@ -9,7 +9,6 @@ interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
     controlClassName?: string;
     controlGroupWrapperClassName?: string;
     controlGroupTextClassName?: string;
-    initializingText?: string;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;

package/Textarea/index.js

@@ -144,26 +144,21 @@ const App = () => {
 
 
 // Updates the height of a <textarea> when the value changes.
-var useAutosizeTextArea = function useAutosizeTextArea(el, value, autoSizeBeginOneline) {
+var useAutosizeTextArea = function useAutosizeTextArea(el, value) {
   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),
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _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];
+    defaultRowHeightInit = _useState4[0],
+    setDefaultRowHeightInit = _useState4[1];
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (el) {
       // initialize default row height
       if (el.scrollHeight > 0 && !defaultRowHeightInit) {
         var style = el.currentStyle || window.getComputedStyle(el);
         setDefaultRowHeight(el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth));
-        setDynamicDefaultRowHeight(el.scrollHeight);
         setDefaultRowHeightInit(true);
       }
 
@@ -187,7 +182,7 @@ var useAutosizeTextArea = function useAutosizeTextArea(el, value, autoSizeBeginO
 };
 /* harmony default export */ const utils_useAutosizeTextArea = (useAutosizeTextArea);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["wrapperClassName", "controlClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "initializingText", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "iconLeft", "iconRight", "readOnly", "value", "label", "name", "id", "maxLength", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "iconLeft", "iconRight", "readOnly", "value", "label", "name", "id", "maxLength", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "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."); }
@@ -205,7 +200,6 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     controlClassName = props.controlClassName,
     controlGroupWrapperClassName = props.controlGroupWrapperClassName,
     controlGroupTextClassName = props.controlGroupTextClassName,
-    initializingText = props.initializingText,
     cols = props.cols,
     rows = props.rows,
     disabled = props.disabled,
@@ -237,11 +231,6 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     _useState2 = src_slicedToArray(_useState, 2),
     changedVal = _useState2[0],
     setChangedVal = _useState2[1];
-  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
-    _useState4 = src_slicedToArray(_useState3, 2),
-    initTextStatus = _useState4[0],
-    setInitTextStatus = _useState4[1];
-  var INIT_TEXT = initializingText || 'Initializing...';
 
   // auto size
   utils_useAutosizeTextArea(autoSize ? valRef.current : null, autoSize ? changedVal : '');
@@ -304,20 +293,11 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     //--------------
     if (typeof value !== 'undefined' && value !== null) {
       if (value.length > 0 && autoSize) {
-        setInitTextStatus(true);
-
         // Recalculate height if default value exceeds initial height
         setChangedVal("");
-        setTimeout(function () {
-          setChangedVal(" "); // spacing here
-        }, 0);
-        setTimeout(function () {
-          setChangedVal("");
-        }, 750);
         setTimeout(function () {
           setChangedVal("".concat(value));
-          setInitTextStatus(false);
-        }, 1500);
+        }, 0);
       } else {
         setChangedVal("".concat(value)); // Avoid displaying the number 0
       }
@@ -349,7 +329,7 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     className: controlClassName || controlClassName === '' ? controlClassName : "form-control",
     id: idRes,
     name: name,
-    placeholder: initTextStatus ? INIT_TEXT : placeholder || '',
+    placeholder: placeholder || '',
     value: changedVal,
     maxLength: maxLength || null,
     onFocus: handleFocus,

package/lib/cjs/Tabs/index.js

@@ -126,28 +126,36 @@ var TabList = function TabList(props) {
 };
 /* harmony default export */ const src_TabList = (TabList);
 ;// CONCATENATED MODULE: ./src/TabPanel.tsx
-var _excluded = ["fadeDisabled", "defaultActive", "expandedActiveClassNameForPanel", "tabpanelClass", "targetId", "index"];
+var _excluded = ["defaultActive", "expandedActiveClassNameForPanel", "tabpanelClass", "targetId", "index"];
 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 _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 TabPanel = function TabPanel(props) {
-  var fadeDisabled = props.fadeDisabled,
-    defaultActive = props.defaultActive,
+  var defaultActive = props.defaultActive,
     expandedActiveClassNameForPanel = props.expandedActiveClassNameForPanel,
     tabpanelClass = props.tabpanelClass,
     targetId = props.targetId,
     index = props.index,
     attributes = _objectWithoutProperties(props, _excluded);
   var _expandClassName = typeof expandedActiveClassNameForPanel !== 'undefined' ? expandedActiveClassNameForPanel : '';
-  var activedClassName = typeof defaultActive !== 'undefined' && defaultActive !== false ? " show active ".concat(_expandClassName) : " ".concat(_expandClassName);
+  var activedClassName = typeof defaultActive !== 'undefined' && defaultActive !== false ? " active ".concat(_expandClassName) : " ".concat(_expandClassName);
+
+  // !!!Special note:
+  // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
+  // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
+  var activedStyles = typeof defaultActive !== 'undefined' && defaultActive !== false ? {} : {
+    height: '0',
+    overflow: 'hidden'
+  };
   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", _extends({
     "data-index": index,
     "data-tabpanel-index": index,
     role: "tabpanel",
     id: targetId,
-    className: tabpanelClass ? "tab-pane ".concat(fadeDisabled ? '' : 'fade', " ").concat(tabpanelClass, " ").concat(activedClassName) : "tab-pane ".concat(fadeDisabled ? '' : 'fade', " ").concat(activedClassName)
+    className: tabpanelClass ? "tab-pane d-block ".concat(tabpanelClass, " ").concat(activedClassName) : "tab-pane d-block ".concat(activedClassName),
+    style: activedStyles
   }, attributes)));
 };
 /* harmony default export */ const src_TabPanel = (TabPanel);
@@ -178,6 +186,20 @@ var Tabs = function Tabs(props) {
   var uniqueID = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useId)().replace(/\:/g, "-");
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var speed = animTransitionDuration ? animTransitionDuration : 150;
+  var elDisplay = function elDisplay(type, node) {
+    if (node === null) return;
+
+    // !!!Special note:
+    // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
+    // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
+    if (type === 'hide') {
+      node.style.setProperty('height', '0');
+      node.style.setProperty('overflow', 'hidden');
+    } else {
+      node.style.removeProperty('height');
+      node.style.removeProperty('overflow');
+    }
+  };
   function handleClickItem(e) {
     e.preventDefault();
     var el = e.currentTarget;
@@ -220,7 +242,8 @@ var Tabs = function Tabs(props) {
       runExClassName(node.firstChild, _classNameNav, 'remove');
     });
     $allContent.forEach(function (node) {
-      node.classList.remove('show');
+      // 
+      elDisplay('hide', node);
       setTimeout(function () {
         node.classList.remove('active');
         runExClassName(node, _classNamePanel, 'remove');
@@ -236,7 +259,8 @@ var Tabs = function Tabs(props) {
       setTimeout(function () {
         var _panel = document.getElementById(tabID);
         if (_panel !== null) {
-          _panel.classList.add('active', 'show');
+          elDisplay('show', _panel);
+          _panel.classList.add('active');
           runExClassName(_panel, _classNamePanel, 'add');
         }
       }, speed);

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

@@ -9,7 +9,6 @@ interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
     controlClassName?: string;
     controlGroupWrapperClassName?: string;
     controlGroupTextClassName?: string;
-    initializingText?: string;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;

package/lib/cjs/Textarea/index.js

@@ -144,26 +144,21 @@ const App = () => {
 
 
 // Updates the height of a <textarea> when the value changes.
-var useAutosizeTextArea = function useAutosizeTextArea(el, value, autoSizeBeginOneline) {
+var useAutosizeTextArea = function useAutosizeTextArea(el, value) {
   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),
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _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];
+    defaultRowHeightInit = _useState4[0],
+    setDefaultRowHeightInit = _useState4[1];
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (el) {
       // initialize default row height
       if (el.scrollHeight > 0 && !defaultRowHeightInit) {
         var style = el.currentStyle || window.getComputedStyle(el);
         setDefaultRowHeight(el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth));
-        setDynamicDefaultRowHeight(el.scrollHeight);
         setDefaultRowHeightInit(true);
       }
 
@@ -187,7 +182,7 @@ var useAutosizeTextArea = function useAutosizeTextArea(el, value, autoSizeBeginO
 };
 /* harmony default export */ const utils_useAutosizeTextArea = (useAutosizeTextArea);
 ;// CONCATENATED MODULE: ./src/index.tsx
-var _excluded = ["wrapperClassName", "controlClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "initializingText", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "iconLeft", "iconRight", "readOnly", "value", "label", "name", "id", "maxLength", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus"];
+var _excluded = ["wrapperClassName", "controlClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "cols", "rows", "disabled", "required", "placeholder", "autoSize", "iconLeft", "iconRight", "readOnly", "value", "label", "name", "id", "maxLength", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "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."); }
@@ -205,7 +200,6 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     controlClassName = props.controlClassName,
     controlGroupWrapperClassName = props.controlGroupWrapperClassName,
     controlGroupTextClassName = props.controlGroupTextClassName,
-    initializingText = props.initializingText,
     cols = props.cols,
     rows = props.rows,
     disabled = props.disabled,
@@ -237,11 +231,6 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     _useState2 = src_slicedToArray(_useState, 2),
     changedVal = _useState2[0],
     setChangedVal = _useState2[1];
-  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
-    _useState4 = src_slicedToArray(_useState3, 2),
-    initTextStatus = _useState4[0],
-    setInitTextStatus = _useState4[1];
-  var INIT_TEXT = initializingText || 'Initializing...';
 
   // auto size
   utils_useAutosizeTextArea(autoSize ? valRef.current : null, autoSize ? changedVal : '');
@@ -304,20 +293,11 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     //--------------
     if (typeof value !== 'undefined' && value !== null) {
       if (value.length > 0 && autoSize) {
-        setInitTextStatus(true);
-
         // Recalculate height if default value exceeds initial height
         setChangedVal("");
-        setTimeout(function () {
-          setChangedVal(" "); // spacing here
-        }, 0);
-        setTimeout(function () {
-          setChangedVal("");
-        }, 750);
         setTimeout(function () {
           setChangedVal("".concat(value));
-          setInitTextStatus(false);
-        }, 1500);
+        }, 0);
       } else {
         setChangedVal("".concat(value)); // Avoid displaying the number 0
       }
@@ -349,7 +329,7 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     className: controlClassName || controlClassName === '' ? controlClassName : "form-control",
     id: idRes,
     name: name,
-    placeholder: initTextStatus ? INIT_TEXT : placeholder || '',
+    placeholder: placeholder || '',
     value: changedVal,
     maxLength: maxLength || null,
     onFocus: handleFocus,

package/lib/esm/Tabs/TabPanel.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 
 interface TabPanelProps extends React.ComponentPropsWithoutRef<"div"> {
-    fadeDisabled?: boolean;
 	defaultActive?: string | boolean | undefined;
     expandedActiveClassNameForPanel?: string;
 	tabpanelClass?: string;
@@ -13,7 +12,6 @@ interface TabPanelProps extends React.ComponentPropsWithoutRef<"div"> {
 const TabPanel = (props: TabPanelProps) => {
 
     const { 
-        fadeDisabled,
         defaultActive,
         expandedActiveClassNameForPanel,
         tabpanelClass,
@@ -24,12 +22,26 @@ const TabPanel = (props: TabPanelProps) => {
     
 
     const _expandClassName =  typeof(expandedActiveClassNameForPanel) !== 'undefined' ? expandedActiveClassNameForPanel : '';
-    const activedClassName = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? ` show active ${_expandClassName}` : ` ${_expandClassName}`;
+    const activedClassName = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? ` active ${_expandClassName}` : ` ${_expandClassName}`;
+
+
+    // !!!Special note:
+    // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
+    // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
+    const activedStyles = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? {} : {height: '0', overflow: 'hidden'}
+    
 
     return (
         <>
 
-            <div data-index={index} data-tabpanel-index={index} role="tabpanel" id={targetId} className={ tabpanelClass ? `tab-pane ${fadeDisabled ? '' : 'fade'} ${tabpanelClass} ${activedClassName}` : `tab-pane ${fadeDisabled ? '' : 'fade'} ${activedClassName}`} {...attributes}></div>
+            <div 
+                data-index={index} 
+                data-tabpanel-index={index} 
+                role="tabpanel" id={targetId} 
+                className={ tabpanelClass ? `tab-pane d-block ${tabpanelClass} ${activedClassName}` : `tab-pane d-block ${activedClassName}`}
+                style={activedStyles}
+                {...attributes}
+            ></div>
 
         </>
     )

package/lib/esm/Tabs/Tabs.tsx

@@ -41,6 +41,24 @@ const Tabs = (props: TabsProps) => {
     const speed = animTransitionDuration ? animTransitionDuration : 150;
 
 
+    
+    const elDisplay = (type: string, node: HTMLElement) => {
+        if (node === null) return;
+
+        // !!!Special note:
+        // If you want to hide the tab in advance, please use `{ height: 0; overflow: hidden; }`, do not use `{ display: none }`
+        // Otherwise it will cause the scrollHeight of the element inside the child node to be 0
+        if (type === 'hide') {
+            node.style.setProperty('height', '0');
+            node.style.setProperty('overflow', 'hidden');
+        } else {
+            node.style.removeProperty('height');
+            node.style.removeProperty('overflow');
+        }
+
+    };
+
+
     function handleClickItem(e: any) {
         e.preventDefault();
         
@@ -97,7 +115,10 @@ const Tabs = (props: TabsProps) => {
         
 
         $allContent.forEach( (node) => {
-            node.classList.remove('show');
+            // 
+            elDisplay('hide', node);
+
+
             setTimeout(() => {
                 node.classList.remove('active');
                 runExClassName(node, _classNamePanel, 'remove');
@@ -115,7 +136,10 @@ const Tabs = (props: TabsProps) => {
             setTimeout(() => {
                 const _panel = document.getElementById(tabID) as HTMLElement;
                 if ( _panel !== null ) {
-                    _panel.classList.add('active', 'show');
+
+                    elDisplay('show', _panel);
+
+                    _panel.classList.add('active');
                     runExClassName(_panel, _classNamePanel, 'add');
                 }
             }, speed);  

package/lib/esm/Textarea/index.tsx

@@ -13,7 +13,6 @@ interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
     controlClassName?: string;
     controlGroupWrapperClassName?: string;
     controlGroupTextClassName?: string;
-    initializingText?: string;
 	value?: string;
 	label?: React.ReactNode | string;
 	name?: string;
@@ -47,7 +46,6 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
         controlClassName,
         controlGroupWrapperClassName,
         controlGroupTextClassName,
-        initializingText,
         cols,
         rows,
         disabled,
@@ -79,8 +77,6 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
     const rootRef = useRef<any>(null);
     const valRef = useRef<any>(null);
     const [changedVal, setChangedVal] = useState<string>(value || '');
-    const [initTextStatus, setInitTextStatus] = useState<boolean>(false);
-    const INIT_TEXT = initializingText || 'Initializing...'
 
 
     // auto size
@@ -156,22 +152,12 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
       
             if (value.length > 0 && autoSize) {
 
-                setInitTextStatus(true);
-
                 // Recalculate height if default value exceeds initial height
                 setChangedVal(``);
                 setTimeout(() => {
-                    setChangedVal(` `); // spacing here
+                    setChangedVal(`${value}`);
                 }, 0);
 
-                setTimeout(() => {
-                    setChangedVal(``);
-                }, 750);
-                
-                setTimeout(() => {
-                    setChangedVal(`${value}`);
-                    setInitTextStatus(false);
-                }, 1500);
             } else {
                 setChangedVal(`${value}`);   // Avoid displaying the number 0
             }
@@ -203,7 +189,7 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
 					  className={controlClassName || controlClassName === '' ? controlClassName : "form-control"}
 			          id={idRes}
 					  name={name}
-					  placeholder={initTextStatus ? INIT_TEXT : (placeholder || '')}
+					  placeholder={placeholder || ''}
 					  value={changedVal}
 					  maxLength={maxLength || null}
 			          onFocus={handleFocus}

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

@@ -37,12 +37,10 @@ import { useEffect, useState } from "react";
 // Updates the height of a <textarea> when the value changes.
 const useAutosizeTextArea = (
     el,
-    value,
-    autoSizeBeginOneline
+    value
 ) => {
 
     const [defaultRowHeight, setDefaultRowHeight] = useState(0);
-    const [dynamicDefaultRowHeight, setDynamicDefaultRowHeight] = useState(0);
     const [defaultRowHeightInit, setDefaultRowHeightInit] = useState(false);
 
     useEffect(() => {
@@ -53,11 +51,9 @@ const useAutosizeTextArea = (
             if (el.scrollHeight > 0 && !defaultRowHeightInit) {
                 const style = el.currentStyle || window.getComputedStyle(el);
                 setDefaultRowHeight(el.scrollHeight + parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth));
-                setDynamicDefaultRowHeight(el.scrollHeight);
                 setDefaultRowHeightInit(true);
             }
 
-
             // restore default row height
             if (defaultRowHeight > 0) {
                 el.style.height = defaultRowHeight + "px";

package/package.json

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