funda-ui 2.0.375 → 2.0.475

package/Tabs/index.js

@@ -141,21 +141,26 @@ var TabPanel = function TabPanel(props) {
     attributes = _objectWithoutProperties(props, _excluded);
   var _expandClassName = typeof expandedActiveClassNameForPanel !== 'undefined' ? expandedActiveClassNameForPanel : '';
   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 d-block ".concat(tabpanelClass, " ").concat(activedClassName) : "tab-pane d-block ".concat(activedClassName),
-    style: activedStyles
+    ref: function ref(node) {
+      if (node) {
+        // !!!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 (typeof defaultActive !== 'undefined' && defaultActive !== false) {
+          node.style.removeProperty('height');
+          node.style.removeProperty('overflow');
+        } else {
+          node.style.setProperty('height', '0', 'important');
+          node.style.setProperty('overflow', 'hidden', 'important');
+        }
+      }
+    }
   }, attributes)));
 };
 /* harmony default export */ const src_TabPanel = (TabPanel);
@@ -193,8 +198,8 @@ var Tabs = function Tabs(props) {
     // 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');
+      node.style.setProperty('height', '0', 'important');
+      node.style.setProperty('overflow', 'hidden', 'important');
     } else {
       node.style.removeProperty('height');
       node.style.removeProperty('overflow');

package/lib/cjs/Tabs/index.js

@@ -141,21 +141,26 @@ var TabPanel = function TabPanel(props) {
     attributes = _objectWithoutProperties(props, _excluded);
   var _expandClassName = typeof expandedActiveClassNameForPanel !== 'undefined' ? expandedActiveClassNameForPanel : '';
   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 d-block ".concat(tabpanelClass, " ").concat(activedClassName) : "tab-pane d-block ".concat(activedClassName),
-    style: activedStyles
+    ref: function ref(node) {
+      if (node) {
+        // !!!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 (typeof defaultActive !== 'undefined' && defaultActive !== false) {
+          node.style.removeProperty('height');
+          node.style.removeProperty('overflow');
+        } else {
+          node.style.setProperty('height', '0', 'important');
+          node.style.setProperty('overflow', 'hidden', 'important');
+        }
+      }
+    }
   }, attributes)));
 };
 /* harmony default export */ const src_TabPanel = (TabPanel);
@@ -193,8 +198,8 @@ var Tabs = function Tabs(props) {
     // 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');
+      node.style.setProperty('height', '0', 'important');
+      node.style.setProperty('overflow', 'hidden', 'important');
     } else {
       node.style.removeProperty('height');
       node.style.removeProperty('overflow');

package/lib/esm/Tabs/TabList.tsx

@@ -30,7 +30,14 @@ const TabList = (props: TabListProps) => {
     return (
         <>
 
-            <li data-index={index} data-tablist-index={index} className={`position-relative nav-item ${activedClassName}`} role="presentation" onClick={switchEv} data-tab={targetId}>
+            <li 
+                data-index={index} 
+                data-tablist-index={index} 
+                className={`position-relative nav-item ${activedClassName}`} 
+                role="presentation" 
+                onClick={switchEv} 
+                data-tab={targetId}
+            >
                 {children}
             </li>
 

package/lib/esm/Tabs/TabPanel.tsx

@@ -24,13 +24,7 @@ const TabPanel = (props: TabPanelProps) => {
     const _expandClassName =  typeof(expandedActiveClassNameForPanel) !== 'undefined' ? expandedActiveClassNameForPanel : '';
     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 (
         <>
 
@@ -39,7 +33,22 @@ const TabPanel = (props: TabPanelProps) => {
                 data-tabpanel-index={index} 
                 role="tabpanel" id={targetId} 
                 className={ tabpanelClass ? `tab-pane d-block ${tabpanelClass} ${activedClassName}` : `tab-pane d-block ${activedClassName}`}
-                style={activedStyles}
+                ref={(node) => {
+                    if (node) {
+
+                        // !!!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 (typeof(defaultActive) !== 'undefined' && defaultActive !== false) {
+                            node.style.removeProperty('height');
+                            node.style.removeProperty('overflow');
+                        } else {
+                            node.style.setProperty('height', '0', 'important');
+                            node.style.setProperty('overflow', 'hidden', 'important');
+                        }
+
+                    }
+                }}
                 {...attributes}
             ></div>
 

package/lib/esm/Tabs/Tabs.tsx

@@ -49,8 +49,8 @@ const Tabs = (props: TabsProps) => {
         // 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');
+            node.style.setProperty('height', '0', 'important');
+            node.style.setProperty('overflow', 'hidden', 'important');
         } else {
             node.style.removeProperty('height');
             node.style.removeProperty('overflow');

package/package.json

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