funda-ui 4.7.890 → 4.7.895

package/Table/index.js

@@ -579,7 +579,7 @@ function initRowColProps(rootElem) {
   // !!! Important, performance optimization for large data renderings
   // With this protection, it is only performed once
   if (typeof rootElem.dataset.rowColPropsInit !== 'undefined') return;
-  rootElem.dataset.rowColPropsInit = '1';
+  rootElem.dataset.rowColPropsInit = 1;
 
   //
   var _allRows = allRows(rootElem);
@@ -745,16 +745,20 @@ function useTableResponsive(_ref, deps) {
     }
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (enabled) {
-      // Initialize custom props of table elements
+    if (enabled && spyElement) {
+      // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+      delete spyElement.dataset.customPropsInit;
+      delete spyElement.dataset.rowColPropsInit;
+
+      // 2. Initialize custom props of table elements
       initOrderProps(spyElement);
       initRowColProps(spyElement);
 
-      // With scroll bars
+      // 3. With scroll bars
       var _windowWidth = window.innerWidth;
       tableElemScrolledInit(spyElement, _windowWidth);
 
-      // Add function to the element that should be used as the scrollable area.
+      // 4. Add function to the element that should be used as the scrollable area.
       window.removeEventListener('resize', windowResizeUpdate);
       window.addEventListener('resize', windowResizeUpdate);
 
@@ -1320,18 +1324,23 @@ function useTableDraggable(_ref, deps) {
     dragCacheRef.current.lastOverOrder = null;
   }, [sortData, spyElement, data, onRowDrag]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (enabled) {
+    if (enabled && spyElement) {
       if (Array.isArray(data) && data.length > 0) {
+        // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+        delete spyElement.dataset.customPropsInit;
+        delete spyElement.dataset.rowColPropsInit;
+
+        // 2. Set order for new data items (although this is only in-memory data and has no direct impact on the DOM)
         // !!! REQUIRED "data.length > 0" to avoid data-order cannot be assigned when asynchronous data is empty
         data.forEach(function (item, i) {
           item.order = i;
         });
 
-        // Initialize custom props of table elements
+        // 3. Initialize custom props of table elements
         initOrderProps(spyElement);
         initRowColProps(spyElement);
 
-        // Initialize drag & drop data
+        // 4. Initialize drag & drop data
         initDragDropData();
       }
     }
@@ -1401,6 +1410,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
      };
 
      const { handleKeyPressed } = useTableKeyPress({
+         // isCell: true, // Avoid duplicate rendering
          enabled: keyboardFocusable,
          data: [{ a: 1, b: 2, c: 3 }],
          spyElement: rootRef.current,
@@ -1424,7 +1434,9 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 
 var useTableKeyPress = function useTableKeyPress(_ref, deps) {
-  var enabled = _ref.enabled,
+  var _ref$isCell = _ref.isCell,
+    isCell = _ref$isCell === void 0 ? false : _ref$isCell,
+    enabled = _ref.enabled,
     data = _ref.data,
     spyElement = _ref.spyElement,
     rootDataInfo = _ref.rootDataInfo,
@@ -1558,12 +1570,17 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
     };
   }(), [focusableCellId, rootDataInfo, data]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (enabled) {
-      // Initialize custom props of table elements (only once)
+    if (isCell) return;
+    if (enabled && spyElement) {
+      // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+      delete spyElement.dataset.customPropsInit;
+      delete spyElement.dataset.rowColPropsInit;
+
+      // 2. Initialize custom props of table elements (only once)
       initOrderProps(spyElement);
       initRowColProps(spyElement);
     }
-  }, [enabled, spyElement].concat(useTableKeyPress_toConsumableArray(deps)));
+  }, [enabled, spyElement, isCell].concat(useTableKeyPress_toConsumableArray(deps)));
   return {
     handleKeyPressed: handleKeyPressed,
     /**
@@ -1886,6 +1903,8 @@ var TableCell = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
 
   // key press initialization
   var _useTableKeyPress = hooks_useTableKeyPress({
+      isCell: true,
+      // Avoid duplicate rendering
       enabled: keyboardFocusable,
       data: originData,
       spyElement: rootRef.current,
@@ -2542,13 +2561,18 @@ function useTableSort(_ref, deps) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (enabled) {
+    if (enabled && spyElement) {
       if (Array.isArray(data)) {
+        // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+        delete spyElement.dataset.customPropsInit;
+        delete spyElement.dataset.rowColPropsInit;
+
+        // 2. Set order for new data items (although this is only in-memory data and has no direct impact on the DOM)
         data.forEach(function (item, i) {
           item.order = i;
         });
 
-        // Initialize custom props of table elements
+        // 3. Initialize custom props of table elements
         initOrderProps(spyElement);
         initRowColProps(spyElement);
       }
@@ -2587,7 +2611,7 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
       isReverse: isReverse,
       onClick: onClick,
       sortBy: sortBy
-    }, [rootRef]),
+    }, [rootRef, originData]),
     handleSortList = _useTableSort.handleSortList;
   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, colSortable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: className || 'sort-trigger',

package/lib/cjs/Table/index.js

@@ -579,7 +579,7 @@ function initRowColProps(rootElem) {
   // !!! Important, performance optimization for large data renderings
   // With this protection, it is only performed once
   if (typeof rootElem.dataset.rowColPropsInit !== 'undefined') return;
-  rootElem.dataset.rowColPropsInit = '1';
+  rootElem.dataset.rowColPropsInit = 1;
 
   //
   var _allRows = allRows(rootElem);
@@ -745,16 +745,20 @@ function useTableResponsive(_ref, deps) {
     }
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (enabled) {
-      // Initialize custom props of table elements
+    if (enabled && spyElement) {
+      // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+      delete spyElement.dataset.customPropsInit;
+      delete spyElement.dataset.rowColPropsInit;
+
+      // 2. Initialize custom props of table elements
       initOrderProps(spyElement);
       initRowColProps(spyElement);
 
-      // With scroll bars
+      // 3. With scroll bars
       var _windowWidth = window.innerWidth;
       tableElemScrolledInit(spyElement, _windowWidth);
 
-      // Add function to the element that should be used as the scrollable area.
+      // 4. Add function to the element that should be used as the scrollable area.
       window.removeEventListener('resize', windowResizeUpdate);
       window.addEventListener('resize', windowResizeUpdate);
 
@@ -1320,18 +1324,23 @@ function useTableDraggable(_ref, deps) {
     dragCacheRef.current.lastOverOrder = null;
   }, [sortData, spyElement, data, onRowDrag]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (enabled) {
+    if (enabled && spyElement) {
       if (Array.isArray(data) && data.length > 0) {
+        // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+        delete spyElement.dataset.customPropsInit;
+        delete spyElement.dataset.rowColPropsInit;
+
+        // 2. Set order for new data items (although this is only in-memory data and has no direct impact on the DOM)
         // !!! REQUIRED "data.length > 0" to avoid data-order cannot be assigned when asynchronous data is empty
         data.forEach(function (item, i) {
           item.order = i;
         });
 
-        // Initialize custom props of table elements
+        // 3. Initialize custom props of table elements
         initOrderProps(spyElement);
         initRowColProps(spyElement);
 
-        // Initialize drag & drop data
+        // 4. Initialize drag & drop data
         initDragDropData();
       }
     }
@@ -1401,6 +1410,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
      };
 
      const { handleKeyPressed } = useTableKeyPress({
+         // isCell: true, // Avoid duplicate rendering
          enabled: keyboardFocusable,
          data: [{ a: 1, b: 2, c: 3 }],
          spyElement: rootRef.current,
@@ -1424,7 +1434,9 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 
 var useTableKeyPress = function useTableKeyPress(_ref, deps) {
-  var enabled = _ref.enabled,
+  var _ref$isCell = _ref.isCell,
+    isCell = _ref$isCell === void 0 ? false : _ref$isCell,
+    enabled = _ref.enabled,
     data = _ref.data,
     spyElement = _ref.spyElement,
     rootDataInfo = _ref.rootDataInfo,
@@ -1558,12 +1570,17 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
     };
   }(), [focusableCellId, rootDataInfo, data]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (enabled) {
-      // Initialize custom props of table elements (only once)
+    if (isCell) return;
+    if (enabled && spyElement) {
+      // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+      delete spyElement.dataset.customPropsInit;
+      delete spyElement.dataset.rowColPropsInit;
+
+      // 2. Initialize custom props of table elements (only once)
       initOrderProps(spyElement);
       initRowColProps(spyElement);
     }
-  }, [enabled, spyElement].concat(useTableKeyPress_toConsumableArray(deps)));
+  }, [enabled, spyElement, isCell].concat(useTableKeyPress_toConsumableArray(deps)));
   return {
     handleKeyPressed: handleKeyPressed,
     /**
@@ -1886,6 +1903,8 @@ var TableCell = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
 
   // key press initialization
   var _useTableKeyPress = hooks_useTableKeyPress({
+      isCell: true,
+      // Avoid duplicate rendering
       enabled: keyboardFocusable,
       data: originData,
       spyElement: rootRef.current,
@@ -2542,13 +2561,18 @@ function useTableSort(_ref, deps) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (enabled) {
+    if (enabled && spyElement) {
       if (Array.isArray(data)) {
+        // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+        delete spyElement.dataset.customPropsInit;
+        delete spyElement.dataset.rowColPropsInit;
+
+        // 2. Set order for new data items (although this is only in-memory data and has no direct impact on the DOM)
         data.forEach(function (item, i) {
           item.order = i;
         });
 
-        // Initialize custom props of table elements
+        // 3. Initialize custom props of table elements
         initOrderProps(spyElement);
         initRowColProps(spyElement);
       }
@@ -2587,7 +2611,7 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
       isReverse: isReverse,
       onClick: onClick,
       sortBy: sortBy
-    }, [rootRef]),
+    }, [rootRef, originData]),
     handleSortList = _useTableSort.handleSortList;
   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, colSortable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
     className: className || 'sort-trigger',

package/lib/esm/Table/Table.tsx

@@ -5,7 +5,6 @@ import useComId from 'funda-utils/dist/cjs/useComId';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
-
 import { TableProvider } from './TableContext';
 import useTableResponsive from './utils/hooks/useTableResponsive';
 import useTableDraggable from './utils/hooks/useTableDraggable';
@@ -256,6 +255,7 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
         triggerCellKeyPressed: tableKeyPress.triggerCellKeyPressed
     }), [rootRef, data, rootDataInfo]);
 
+
     return (
         <>
 
@@ -297,12 +297,9 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
                 focusableCellId,
                 setFocusableCellId,
                 onCellKeyPressed,
-                onCellPressEnter,
-
-
+                onCellPressEnter, 
             }}>
 
-
                 {/** Main */}
                 <div
                     {...attributes}

package/lib/esm/Table/TableCell.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, useContext } from 'react';
 
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
-
 import { TableContext } from './TableContext';
 
 import { cellMark, removeCellFocusClassName } from './utils/func';
@@ -55,6 +54,7 @@ const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>((
 
     // key press initialization
     const { handleKeyPressed } = useTableKeyPress({
+        isCell: true, // Avoid duplicate rendering
         enabled: keyboardFocusable,
         data: originData,
         spyElement: rootRef.current,

package/lib/esm/Table/utils/SortSprite.tsx

@@ -41,7 +41,7 @@ const SortSprite = forwardRef((props: SortSpriteProps, externalRef: any) => {
         isReverse: isReverse,
         onClick: onClick,
         sortBy: sortBy
-    }, [rootRef]);
+    }, [rootRef, originData]);
 
 
     return (

package/lib/esm/Table/utils/func.ts

@@ -67,7 +67,7 @@ export function initRowColProps(rootElem: any) {
     // !!! Important, performance optimization for large data renderings
     // With this protection, it is only performed once
     if (typeof rootElem.dataset.rowColPropsInit !== 'undefined') return;
-    rootElem.dataset.rowColPropsInit = '1';
+    rootElem.dataset.rowColPropsInit = 1;
 
 
     //

package/lib/esm/Table/utils/hooks/useTableDraggable.tsx

@@ -614,18 +614,24 @@ function useTableDraggable({
 
 
     useEffect(() => {
-        if (enabled) {
+        if (enabled && spyElement) {
             if (Array.isArray(data) && data.length > 0) {  
+
+                // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+                delete spyElement.dataset.customPropsInit;
+                delete spyElement.dataset.rowColPropsInit;
+
+                // 2. Set order for new data items (although this is only in-memory data and has no direct impact on the DOM)
                 // !!! REQUIRED "data.length > 0" to avoid data-order cannot be assigned when asynchronous data is empty
                 data.forEach((item: any, i: number) => {
                     item.order = i;
                 });
 
-                // Initialize custom props of table elements
+                // 3. Initialize custom props of table elements
                 initOrderProps(spyElement);
                 initRowColProps(spyElement);
 
-                // Initialize drag & drop data
+                // 4. Initialize drag & drop data
                 initDragDropData();
                  
 

package/lib/esm/Table/utils/hooks/useTableKeyPress.tsx

@@ -40,6 +40,7 @@
      };
 
      const { handleKeyPressed } = useTableKeyPress({
+         // isCell: true, // Avoid duplicate rendering
          enabled: keyboardFocusable,
          data: [{ a: 1, b: 2, c: 3 }],
          spyElement: rootRef.current,
@@ -65,6 +66,7 @@ import { useEffect, useCallback, KeyboardEvent, useRef } from "react";
 import { initOrderProps, initRowColProps, cellMark, removeCellFocusClassName } from '../func';
 
 export interface UseTableKeyPressProps {
+    isCell?: boolean;
     enabled?: boolean;
     data?: any[];
     spyElement?: any;
@@ -86,6 +88,7 @@ export interface UseTableKeyPressProps {
 }
 
 const useTableKeyPress = ({
+    isCell = false,
     enabled,
     data,
     spyElement,
@@ -190,8 +193,7 @@ const useTableKeyPress = ({
             if (typeof targetCell !== 'undefined') {
                 targetCell.classList.add('cell-focus');
             }
-            
-     
+       
             setFocusableCellId(nextCellSignal);
             // Callback with edge detection
             onCellKeyPressed?.(
@@ -233,12 +235,19 @@ const useTableKeyPress = ({
     }, [focusableCellId, rootDataInfo, data]);
 
     useEffect(() => {
-        if (enabled) {
-            // Initialize custom props of table elements (only once)
+        if (isCell) return;
+
+        if (enabled && spyElement) {
+
+            // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+            delete spyElement.dataset.customPropsInit;
+            delete spyElement.dataset.rowColPropsInit;
+
+            // 2. Initialize custom props of table elements (only once)
             initOrderProps(spyElement);
             initRowColProps(spyElement);
         }
-    }, [enabled, spyElement, ...deps]);
+    }, [enabled, spyElement, isCell, ...deps]);
 
     return {
         handleKeyPressed,

package/lib/esm/Table/utils/hooks/useTableResponsive.tsx

@@ -64,18 +64,22 @@ function useTableResponsive({
     }
 
     useEffect(() => {
-        if (enabled) {
+        if (enabled && spyElement) {
 
-            // Initialize custom props of table elements
+            // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+            delete spyElement.dataset.customPropsInit;
+            delete spyElement.dataset.rowColPropsInit;
+
+            // 2. Initialize custom props of table elements
             initOrderProps(spyElement);
             initRowColProps(spyElement);
   
-            // With scroll bars
+            // 3. With scroll bars
             let windowWidth = window.innerWidth;
             tableElemScrolledInit(spyElement as never, windowWidth);
 
 
-            // Add function to the element that should be used as the scrollable area.
+            // 4. Add function to the element that should be used as the scrollable area.
             window.removeEventListener('resize', windowResizeUpdate);
             window.addEventListener('resize', windowResizeUpdate);
 

package/lib/esm/Table/utils/hooks/useTableSort.tsx

@@ -161,22 +161,27 @@ function useTableSort({
 
     }
 
+
     useEffect(() => {
-        if (enabled) {
+        if (enabled && spyElement) {
             if (Array.isArray(data)) {
+                // 1. Remove the tag to allow initRowColProps to re-execute (!!!REQUIRED)
+                delete spyElement.dataset.customPropsInit;
+                delete spyElement.dataset.rowColPropsInit;
+
+                // 2. Set order for new data items (although this is only in-memory data and has no direct impact on the DOM)
                 data.forEach((item: any, i: number) => {
                     item.order = i;
                 });
 
-
-                // Initialize custom props of table elements
+                // 3. Initialize custom props of table elements
                 initOrderProps(spyElement);
                 initRowColProps(spyElement);
-   
             }
         }
     }, [data, enabled, spyElement, ...deps]);
 
+
     return {
         handleSortList
     }

package/package.json

@@ -1 +1 @@
-{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.890","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.895","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}