funda-ui 2.0.325 → 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.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);
       }
 
@@ -299,7 +294,7 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     if (typeof value !== 'undefined' && value !== null) {
       if (value.length > 0 && autoSize) {
         // Recalculate height if default value exceeds initial height
-        setChangedVal('');
+        setChangedVal("");
         setTimeout(function () {
           setChangedVal("".concat(value));
         }, 0);

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.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);
       }
 
@@ -299,7 +294,7 @@ var Textarea = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     if (typeof value !== 'undefined' && value !== null) {
       if (value.length > 0 && autoSize) {
         // Recalculate height if default value exceeds initial height
-        setChangedVal('');
+        setChangedVal("");
         setTimeout(function () {
           setChangedVal("".concat(value));
         }, 0);

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

@@ -145,17 +145,19 @@ const Textarea = forwardRef((props: TextareaProps, ref: any) => {
 
     useEffect(() => {
 
+     
         // update default value
         //--------------
         if (typeof value !== 'undefined' && value !== null) {
-            
-
+      
             if (value.length > 0 && autoSize) {
+
                 // Recalculate height if default value exceeds initial height
-                setChangedVal('');
+                setChangedVal(``);
                 setTimeout(() => {
                     setChangedVal(`${value}`);
                 }, 0);
+
             } else {
                 setChangedVal(`${value}`);   // Avoid displaying the number 0
             }

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.325",
+  "version": "2.0.375",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",