funda-ui 4.7.445 → 4.7.515

package/Date/index.js

@@ -5471,14 +5471,16 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
   }
   function _handleKeyPressedForSplitInputs() {
     _handleKeyPressedForSplitInputs = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
-      var key, btnMark, isLeftArrow, isRightArrow, move;
+      var key, btnMark, isNumLockOn, isLeftArrow, isRightArrow, move;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             key = event.code;
-            btnMark = event.target.dataset.mark; // Check for both regular arrow keys and numpad arrow keys
-            isLeftArrow = key === 'ArrowLeft' || key === 'Numpad4';
-            isRightArrow = key === 'ArrowRight' || key === 'Numpad6';
+            btnMark = event.target.dataset.mark;
+            isNumLockOn = event.getModifierState && event.getModifierState('NumLock'); // Check for both regular arrow keys and numpad arrow keys
+            // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+            isLeftArrow = key === 'ArrowLeft' || key === 'Numpad4' && !isNumLockOn;
+            isRightArrow = key === 'ArrowRight' || key === 'Numpad6' && !isNumLockOn;
             move = function move(direction) {
               var currentIndex = splitInputsIds.findIndex(function (s) {
                 return s === btnMark;
@@ -5499,7 +5501,7 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
             if (isRightArrow) {
               move('right');
             }
-          case 7:
+          case 8:
           case "end":
             return _context2.stop();
         }

package/Table/index.js

@@ -1131,13 +1131,14 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
   var handleKeyPressed = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
       var _focusableCellIdRef$c;
-      var key, currentCell, row, col, nextCellSignal, oldCellSignal, _row, _col, move, _nextCellSignal;
+      var key, isNumLockOn, currentCell, row, col, nextCellSignal, oldCellSignal, _row, _col, move, _nextCellSignal;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            key = event.code; // If Enter is pressed and keyboard navigation is disabled, just trigger onCellPressEnter
+            key = event.code;
+            isNumLockOn = event.getModifierState && event.getModifierState('NumLock'); // If Enter is pressed and keyboard navigation is disabled, just trigger onCellPressEnter
             if (!((key === 'Enter' || key === 'NumpadEnter') && !enabled)) {
-              _context.next = 8;
+              _context.next = 9;
               break;
             }
             currentCell = event.target;
@@ -1146,13 +1147,13 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
             nextCellSignal = cellMark(row, col);
             onCellPressEnter === null || onCellPressEnter === void 0 ? void 0 : onCellPressEnter(nextCellSignal, refNode.current.get(nextCellSignal), event);
             return _context.abrupt("return");
-          case 8:
+          case 9:
             if (!(!Array.isArray(data) || rootDataInfo === null || spyElement === null || typeof enabled === 'undefined' || enabled === false)) {
-              _context.next = 10;
+              _context.next = 11;
               break;
             }
             return _context.abrupt("return");
-          case 10:
+          case 11:
             // Parse the current focused cell's row and column
             oldCellSignal = (_focusableCellIdRef$c = focusableCellIdRef.current) === null || _focusableCellIdRef$c === void 0 ? void 0 : _focusableCellIdRef$c.replace('cell-', '').split('-');
             _row = Number(oldCellSignal[0]);
@@ -1171,45 +1172,39 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
                   maxCol = rowInfo.colCount;
                 }
               }
-              switch (key) {
-                case 'ArrowLeft':
-                case 'Numpad4':
-                  if (_col - 1 < 0) {
-                    isLeftEdge = true;
-                    _col = 0;
-                  } else {
-                    _col = _col - 1;
-                  }
-                  break;
-                case 'ArrowRight':
-                case 'Numpad6':
-                  {
-                    if (_col + 1 > maxCol - 1) {
-                      isRightEdge = true;
-                      _col = maxCol - 1;
-                    } else {
-                      _col = _col + 1;
-                    }
-                    break;
-                  }
-                case 'ArrowUp':
-                case 'Numpad8':
-                  if (_row - 1 < 0) {
-                    isTopEdge = true;
-                    _row = 0;
-                  } else {
-                    _row = _row - 1;
-                  }
-                  break;
-                case 'ArrowDown':
-                case 'Numpad2':
-                  if (_row + 1 > rootDataInfo.totalRow - 1) {
-                    isBottomEdge = true;
-                    _row = rootDataInfo.totalRow - 1;
-                  } else {
-                    _row = _row + 1;
-                  }
-                  break;
+
+              // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+              if (key === 'ArrowLeft' || key === 'Numpad4' && !isNumLockOn) {
+                if (_col - 1 < 0) {
+                  isLeftEdge = true;
+                  _col = 0;
+                } else {
+                  _col = _col - 1;
+                }
+              }
+              if (key === 'ArrowRight' || key === 'Numpad6' && !isNumLockOn) {
+                if (_col + 1 > maxCol - 1) {
+                  isRightEdge = true;
+                  _col = maxCol - 1;
+                } else {
+                  _col = _col + 1;
+                }
+              }
+              if (key === 'ArrowUp' || key === 'Numpad8' && !isNumLockOn) {
+                if (_row - 1 < 0) {
+                  isTopEdge = true;
+                  _row = 0;
+                } else {
+                  _row = _row - 1;
+                }
+              }
+              if (key === 'ArrowDown' || key === 'Numpad2' && !isNumLockOn) {
+                if (_row + 1 > rootDataInfo.totalRow - 1) {
+                  isBottomEdge = true;
+                  _row = rootDataInfo.totalRow - 1;
+                } else {
+                  _row = _row + 1;
+                }
               }
               var nextCellSignal = cellMark(_row, _col);
               // Focus the current cell
@@ -1223,16 +1218,17 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
               onCellKeyPressed === null || onCellKeyPressed === void 0 ? void 0 : onCellKeyPressed(nextCellSignal, refNode.current.get(nextCellSignal), event, isLeftEdge, isRightEdge, isTopEdge, isBottomEdge);
               onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
             }; // Handle arrow key navigation
-            if (key === 'ArrowLeft' || key === 'Numpad4') {
+            // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+            if (key === 'ArrowLeft' || key === 'Numpad4' && !isNumLockOn) {
               move('ArrowLeft');
             }
-            if (key === 'ArrowRight' || key === 'Numpad6') {
+            if (key === 'ArrowRight' || key === 'Numpad6' && !isNumLockOn) {
               move('ArrowRight');
             }
-            if (key === 'ArrowUp' || key === 'Numpad8') {
+            if (key === 'ArrowUp' || key === 'Numpad8' && !isNumLockOn) {
               move('ArrowUp');
             }
-            if (key === 'ArrowDown' || key === 'Numpad2') {
+            if (key === 'ArrowDown' || key === 'Numpad2' && !isNumLockOn) {
               move('ArrowDown');
             }
 
@@ -1241,7 +1237,7 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
               _nextCellSignal = cellMark(_row, _col);
               onCellPressEnter === null || onCellPressEnter === void 0 ? void 0 : onCellPressEnter(_nextCellSignal, refNode.current.get(_nextCellSignal), event);
             }
-          case 19:
+          case 20:
           case "end":
             return _context.stop();
         }
@@ -2069,7 +2065,28 @@ const App = () => {
 
     useTableSort({
         enabled: sortableTable && rootRef.current,
-        spyElement: rootRef.current
+        spyElement: rootRef.current,
+        sortBy: (handleProcess: Function, filterType: string, inverse: boolean) => (a: Element, b: Element) => {
+        
+            // Custom comparison logic
+            let v1 = a.textContent, v2 = b.textContent;
+            if (filterType === 'number') {
+                v1 = parseFloat(v1);
+                v2 = parseFloat(v2);
+            }
+        
+            let result = 0;
+            if (filterType === 'text') {
+                result = v1.localeCompare(v2);
+            } else {
+                result = v1 - v2;
+            }
+        
+            // Apply display animation and status updates
+            handleProcess();
+        
+            return inverse ? -result : result;
+        }
     }, [rootRef]);
 
     return (
@@ -2090,7 +2107,8 @@ function useTableSort(_ref, deps) {
     _ref$isReverse = _ref.isReverse,
     isReverse = _ref$isReverse === void 0 ? false : _ref$isReverse,
     onColSort = _ref.onColSort,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    sortBy = _ref.sortBy;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = useTableSort_slicedToArray(_useState, 2),
     inverse = _useState2[0],
@@ -2104,16 +2122,22 @@ function useTableSort(_ref, deps) {
     var filterType = fieldType || 'text';
     var curIndex = el.dataset.tableCol;
     var targetComparator = [].slice.call(tbodyRef.querySelectorAll("[data-table-col=\"".concat(curIndex, "\"]")));
+    var handleProcess = function handleProcess() {
+      allRows(spyElement).forEach(function (node) {
+        node.classList.add('newsort');
+      });
+      setInverse(!inverse);
+    };
 
-    //sort of HTML elements
-    var sortBy = function sortBy(a, b) {
+    // 
+    var defaultSortBy = function defaultSortBy(a, b) {
       var txt1 = a.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase(),
         txt2 = b.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
 
       //type of number
       if (filterType == 'number') {
-        txt1 = Number(txt1.replace(/[^0-9.-]+/g, ''));
-        txt2 = Number(txt2.replace(/[^0-9.-]+/g, ''));
+        txt1 = parseFloat(txt1.replace(/[^0-9.+-]+/g, ''));
+        txt2 = parseFloat(txt2.replace(/[^0-9.+-]+/g, ''));
       }
 
       //type of date
@@ -2123,10 +2147,7 @@ function useTableSort(_ref, deps) {
       }
 
       //add filter class
-      allRows(spyElement).forEach(function (node) {
-        node.classList.add('newsort');
-      });
-      setInverse(!inverse);
+      handleProcess();
 
       // result
       if (filterType == 'text') {
@@ -2139,7 +2160,10 @@ function useTableSort(_ref, deps) {
         return isReverse ? txt1 < txt2 ? -1 : txt1 > txt2 ? 1 : 0 : txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
       }
     };
-    targetComparator.sort(sortBy);
+
+    // Use a custom sort method if available, otherwise default is used
+    var sortFn = typeof sortBy === 'function' ? sortBy(handleProcess, filterType, inverse) : defaultSortBy;
+    targetComparator.sort(sortFn);
 
     //console.log( 'targetComparator:', targetComparator );
     //console.log( 'inverse:', inverse );
@@ -2191,7 +2215,8 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
     icon = props.icon,
     _props$isReverse = props.isReverse,
     isReverse = _props$isReverse === void 0 ? false : _props$isReverse,
-    onClick = props.onClick;
+    onClick = props.onClick,
+    sortBy = props.sortBy;
   var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
     originData = _useContext.originData,
     rootRef = _useContext.rootRef,
@@ -2206,7 +2231,8 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
       fieldType: fieldType,
       onColSort: onColSort,
       isReverse: isReverse,
-      onClick: onClick
+      onClick: onClick,
+      sortBy: sortBy
     }, [rootRef]),
     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", {

package/lib/cjs/Date/index.js

@@ -5471,14 +5471,16 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
   }
   function _handleKeyPressedForSplitInputs() {
     _handleKeyPressedForSplitInputs = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
-      var key, btnMark, isLeftArrow, isRightArrow, move;
+      var key, btnMark, isNumLockOn, isLeftArrow, isRightArrow, move;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             key = event.code;
-            btnMark = event.target.dataset.mark; // Check for both regular arrow keys and numpad arrow keys
-            isLeftArrow = key === 'ArrowLeft' || key === 'Numpad4';
-            isRightArrow = key === 'ArrowRight' || key === 'Numpad6';
+            btnMark = event.target.dataset.mark;
+            isNumLockOn = event.getModifierState && event.getModifierState('NumLock'); // Check for both regular arrow keys and numpad arrow keys
+            // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+            isLeftArrow = key === 'ArrowLeft' || key === 'Numpad4' && !isNumLockOn;
+            isRightArrow = key === 'ArrowRight' || key === 'Numpad6' && !isNumLockOn;
             move = function move(direction) {
               var currentIndex = splitInputsIds.findIndex(function (s) {
                 return s === btnMark;
@@ -5499,7 +5501,7 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
             if (isRightArrow) {
               move('right');
             }
-          case 7:
+          case 8:
           case "end":
             return _context2.stop();
         }

package/lib/cjs/Table/index.js

@@ -1131,13 +1131,14 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
   var handleKeyPressed = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
       var _focusableCellIdRef$c;
-      var key, currentCell, row, col, nextCellSignal, oldCellSignal, _row, _col, move, _nextCellSignal;
+      var key, isNumLockOn, currentCell, row, col, nextCellSignal, oldCellSignal, _row, _col, move, _nextCellSignal;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            key = event.code; // If Enter is pressed and keyboard navigation is disabled, just trigger onCellPressEnter
+            key = event.code;
+            isNumLockOn = event.getModifierState && event.getModifierState('NumLock'); // If Enter is pressed and keyboard navigation is disabled, just trigger onCellPressEnter
             if (!((key === 'Enter' || key === 'NumpadEnter') && !enabled)) {
-              _context.next = 8;
+              _context.next = 9;
               break;
             }
             currentCell = event.target;
@@ -1146,13 +1147,13 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
             nextCellSignal = cellMark(row, col);
             onCellPressEnter === null || onCellPressEnter === void 0 ? void 0 : onCellPressEnter(nextCellSignal, refNode.current.get(nextCellSignal), event);
             return _context.abrupt("return");
-          case 8:
+          case 9:
             if (!(!Array.isArray(data) || rootDataInfo === null || spyElement === null || typeof enabled === 'undefined' || enabled === false)) {
-              _context.next = 10;
+              _context.next = 11;
               break;
             }
             return _context.abrupt("return");
-          case 10:
+          case 11:
             // Parse the current focused cell's row and column
             oldCellSignal = (_focusableCellIdRef$c = focusableCellIdRef.current) === null || _focusableCellIdRef$c === void 0 ? void 0 : _focusableCellIdRef$c.replace('cell-', '').split('-');
             _row = Number(oldCellSignal[0]);
@@ -1171,45 +1172,39 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
                   maxCol = rowInfo.colCount;
                 }
               }
-              switch (key) {
-                case 'ArrowLeft':
-                case 'Numpad4':
-                  if (_col - 1 < 0) {
-                    isLeftEdge = true;
-                    _col = 0;
-                  } else {
-                    _col = _col - 1;
-                  }
-                  break;
-                case 'ArrowRight':
-                case 'Numpad6':
-                  {
-                    if (_col + 1 > maxCol - 1) {
-                      isRightEdge = true;
-                      _col = maxCol - 1;
-                    } else {
-                      _col = _col + 1;
-                    }
-                    break;
-                  }
-                case 'ArrowUp':
-                case 'Numpad8':
-                  if (_row - 1 < 0) {
-                    isTopEdge = true;
-                    _row = 0;
-                  } else {
-                    _row = _row - 1;
-                  }
-                  break;
-                case 'ArrowDown':
-                case 'Numpad2':
-                  if (_row + 1 > rootDataInfo.totalRow - 1) {
-                    isBottomEdge = true;
-                    _row = rootDataInfo.totalRow - 1;
-                  } else {
-                    _row = _row + 1;
-                  }
-                  break;
+
+              // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+              if (key === 'ArrowLeft' || key === 'Numpad4' && !isNumLockOn) {
+                if (_col - 1 < 0) {
+                  isLeftEdge = true;
+                  _col = 0;
+                } else {
+                  _col = _col - 1;
+                }
+              }
+              if (key === 'ArrowRight' || key === 'Numpad6' && !isNumLockOn) {
+                if (_col + 1 > maxCol - 1) {
+                  isRightEdge = true;
+                  _col = maxCol - 1;
+                } else {
+                  _col = _col + 1;
+                }
+              }
+              if (key === 'ArrowUp' || key === 'Numpad8' && !isNumLockOn) {
+                if (_row - 1 < 0) {
+                  isTopEdge = true;
+                  _row = 0;
+                } else {
+                  _row = _row - 1;
+                }
+              }
+              if (key === 'ArrowDown' || key === 'Numpad2' && !isNumLockOn) {
+                if (_row + 1 > rootDataInfo.totalRow - 1) {
+                  isBottomEdge = true;
+                  _row = rootDataInfo.totalRow - 1;
+                } else {
+                  _row = _row + 1;
+                }
               }
               var nextCellSignal = cellMark(_row, _col);
               // Focus the current cell
@@ -1223,16 +1218,17 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
               onCellKeyPressed === null || onCellKeyPressed === void 0 ? void 0 : onCellKeyPressed(nextCellSignal, refNode.current.get(nextCellSignal), event, isLeftEdge, isRightEdge, isTopEdge, isBottomEdge);
               onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
             }; // Handle arrow key navigation
-            if (key === 'ArrowLeft' || key === 'Numpad4') {
+            // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+            if (key === 'ArrowLeft' || key === 'Numpad4' && !isNumLockOn) {
               move('ArrowLeft');
             }
-            if (key === 'ArrowRight' || key === 'Numpad6') {
+            if (key === 'ArrowRight' || key === 'Numpad6' && !isNumLockOn) {
               move('ArrowRight');
             }
-            if (key === 'ArrowUp' || key === 'Numpad8') {
+            if (key === 'ArrowUp' || key === 'Numpad8' && !isNumLockOn) {
               move('ArrowUp');
             }
-            if (key === 'ArrowDown' || key === 'Numpad2') {
+            if (key === 'ArrowDown' || key === 'Numpad2' && !isNumLockOn) {
               move('ArrowDown');
             }
 
@@ -1241,7 +1237,7 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
               _nextCellSignal = cellMark(_row, _col);
               onCellPressEnter === null || onCellPressEnter === void 0 ? void 0 : onCellPressEnter(_nextCellSignal, refNode.current.get(_nextCellSignal), event);
             }
-          case 19:
+          case 20:
           case "end":
             return _context.stop();
         }
@@ -2069,7 +2065,28 @@ const App = () => {
 
     useTableSort({
         enabled: sortableTable && rootRef.current,
-        spyElement: rootRef.current
+        spyElement: rootRef.current,
+        sortBy: (handleProcess: Function, filterType: string, inverse: boolean) => (a: Element, b: Element) => {
+        
+            // Custom comparison logic
+            let v1 = a.textContent, v2 = b.textContent;
+            if (filterType === 'number') {
+                v1 = parseFloat(v1);
+                v2 = parseFloat(v2);
+            }
+        
+            let result = 0;
+            if (filterType === 'text') {
+                result = v1.localeCompare(v2);
+            } else {
+                result = v1 - v2;
+            }
+        
+            // Apply display animation and status updates
+            handleProcess();
+        
+            return inverse ? -result : result;
+        }
     }, [rootRef]);
 
     return (
@@ -2090,7 +2107,8 @@ function useTableSort(_ref, deps) {
     _ref$isReverse = _ref.isReverse,
     isReverse = _ref$isReverse === void 0 ? false : _ref$isReverse,
     onColSort = _ref.onColSort,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    sortBy = _ref.sortBy;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = useTableSort_slicedToArray(_useState, 2),
     inverse = _useState2[0],
@@ -2104,16 +2122,22 @@ function useTableSort(_ref, deps) {
     var filterType = fieldType || 'text';
     var curIndex = el.dataset.tableCol;
     var targetComparator = [].slice.call(tbodyRef.querySelectorAll("[data-table-col=\"".concat(curIndex, "\"]")));
+    var handleProcess = function handleProcess() {
+      allRows(spyElement).forEach(function (node) {
+        node.classList.add('newsort');
+      });
+      setInverse(!inverse);
+    };
 
-    //sort of HTML elements
-    var sortBy = function sortBy(a, b) {
+    // 
+    var defaultSortBy = function defaultSortBy(a, b) {
       var txt1 = a.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase(),
         txt2 = b.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
 
       //type of number
       if (filterType == 'number') {
-        txt1 = Number(txt1.replace(/[^0-9.-]+/g, ''));
-        txt2 = Number(txt2.replace(/[^0-9.-]+/g, ''));
+        txt1 = parseFloat(txt1.replace(/[^0-9.+-]+/g, ''));
+        txt2 = parseFloat(txt2.replace(/[^0-9.+-]+/g, ''));
       }
 
       //type of date
@@ -2123,10 +2147,7 @@ function useTableSort(_ref, deps) {
       }
 
       //add filter class
-      allRows(spyElement).forEach(function (node) {
-        node.classList.add('newsort');
-      });
-      setInverse(!inverse);
+      handleProcess();
 
       // result
       if (filterType == 'text') {
@@ -2139,7 +2160,10 @@ function useTableSort(_ref, deps) {
         return isReverse ? txt1 < txt2 ? -1 : txt1 > txt2 ? 1 : 0 : txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
       }
     };
-    targetComparator.sort(sortBy);
+
+    // Use a custom sort method if available, otherwise default is used
+    var sortFn = typeof sortBy === 'function' ? sortBy(handleProcess, filterType, inverse) : defaultSortBy;
+    targetComparator.sort(sortFn);
 
     //console.log( 'targetComparator:', targetComparator );
     //console.log( 'inverse:', inverse );
@@ -2191,7 +2215,8 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
     icon = props.icon,
     _props$isReverse = props.isReverse,
     isReverse = _props$isReverse === void 0 ? false : _props$isReverse,
-    onClick = props.onClick;
+    onClick = props.onClick,
+    sortBy = props.sortBy;
   var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
     originData = _useContext.originData,
     rootRef = _useContext.rootRef,
@@ -2206,7 +2231,8 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
       fieldType: fieldType,
       onColSort: onColSort,
       isReverse: isReverse,
-      onClick: onClick
+      onClick: onClick,
+      sortBy: sortBy
     }, [rootRef]),
     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", {

package/lib/esm/Date/index.tsx

@@ -679,10 +679,12 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
     async function handleKeyPressedForSplitInputs(event: KeyboardEvent<HTMLDivElement>) {
         const key = event.code;
         const btnMark = (event.target as any).dataset.mark;
+        const isNumLockOn = event.getModifierState && event.getModifierState('NumLock');
         
         // Check for both regular arrow keys and numpad arrow keys
-        const isLeftArrow = key === 'ArrowLeft' || key === 'Numpad4';
-        const isRightArrow = key === 'ArrowRight' || key === 'Numpad6';
+        // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+        const isLeftArrow = key === 'ArrowLeft' || (key === 'Numpad4' && !isNumLockOn);
+        const isRightArrow = key === 'ArrowRight' || (key === 'Numpad6' && !isNumLockOn);
         
         const move = (direction: 'left' | 'right') => {
             const currentIndex = splitInputsIds.findIndex((s: string) => s === btnMark);

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';

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

@@ -9,6 +9,7 @@ export type SortSpriteProps = {
     icon?: React.ReactNode;
     isReverse?: boolean;
     onClick?: (e: any) => void;
+    sortBy?: (handleProcess: Function, filterType: string, inverse: boolean) => ((a: Element, b: Element) => number); // A function that determines the order of the elements. 
 };
 
 
@@ -18,7 +19,8 @@ const SortSprite = forwardRef((props: SortSpriteProps, externalRef: any) => {
         className,
         icon,
         isReverse = false,
-        onClick
+        onClick,
+        sortBy
     } = props;
 
     const {
@@ -37,7 +39,8 @@ const SortSprite = forwardRef((props: SortSpriteProps, externalRef: any) => {
         fieldType: fieldType,
         onColSort: onColSort,
         isReverse: isReverse,
-        onClick: onClick
+        onClick: onClick,
+        sortBy: sortBy
     }, [rootRef]);
 
 

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

@@ -104,6 +104,7 @@ const useTableKeyPress = ({
    
     const handleKeyPressed = useCallback( async (event: KeyboardEvent<HTMLTableCellElement>) => {
         const key = event.code;
+        const isNumLockOn = event.getModifierState && event.getModifierState('NumLock');
 
    
         // If Enter is pressed and keyboard navigation is disabled, just trigger onCellPressEnter
@@ -139,49 +140,46 @@ const useTableKeyPress = ({
                     maxCol = rowInfo.colCount;
                 }
             }
-            switch (key) {
-                case 'ArrowLeft':
-                case 'Numpad4':
-                    if (_col - 1 < 0) {
-                        isLeftEdge = true;
-                        _col = 0;
-                    } else {
-                        _col = _col - 1;
-                    }
-                    break;
-                case 'ArrowRight':
-                case 'Numpad6': {
-                    if (_col + 1 > maxCol - 1) {
-                        isRightEdge = true;
-                        _col = maxCol - 1;
-                    } else {
-                        _col = _col + 1;
-                    }
-                    break;
+
+            
+            // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+            if ((key === 'ArrowLeft') || (key === 'Numpad4' && !isNumLockOn)) {
+                if (_col - 1 < 0) {
+                    isLeftEdge = true;
+                    _col = 0;
+                } else {
+                    _col = _col - 1;
                 }
-                case 'ArrowUp':
-                case 'Numpad8':
-                    if (_row - 1 < 0) {
-                        isTopEdge = true;
-                        _row = 0;
-                    } else {
-                        _row = _row - 1;
-                    }
-                    break;
-                case 'ArrowDown':
-                case 'Numpad2':
+            }
 
-     
-                    if (_row + 1 > rootDataInfo.totalRow - 1) {
-                        isBottomEdge = true;
-                        _row = rootDataInfo.totalRow - 1;
-                    } else {
-                        _row = _row + 1;
-                    }
-                    break;
+            if ((key === 'ArrowRight') || (key === 'Numpad6' && !isNumLockOn)) {
+                if (_col + 1 > maxCol - 1) {
+                    isRightEdge = true;
+                    _col = maxCol - 1;
+                } else {
+                    _col = _col + 1;
+                }
+            }
+
+            if ((key === 'ArrowUp') || (key === 'Numpad8' && !isNumLockOn)) {
+                if (_row - 1 < 0) {
+                    isTopEdge = true;
+                    _row = 0;
+                } else {
+                    _row = _row - 1;
+                }
+            }
+
+            if ((key === 'ArrowDown') || (key === 'Numpad2' && !isNumLockOn)) {
+                if (_row + 1 > rootDataInfo.totalRow - 1) {
+                    isBottomEdge = true;
+                    _row = rootDataInfo.totalRow - 1;
+                } else {
+                    _row = _row + 1;
+                }
             }
 
-             
+            
 
             const nextCellSignal: string = cellMark(_row, _col);
             // Focus the current cell
@@ -209,19 +207,20 @@ const useTableKeyPress = ({
         };
       
         // Handle arrow key navigation
-        if (key === 'ArrowLeft' || key === 'Numpad4') {
+        // Numpad2/4/6/8 trigger direction is allowed only when NumLock is off
+        if ((key === 'ArrowLeft') || (key === 'Numpad4' && !isNumLockOn)) {
             move('ArrowLeft');
         }
 
-        if (key === 'ArrowRight' || key === 'Numpad6') {
+        if ((key === 'ArrowRight') || (key === 'Numpad6' && !isNumLockOn)) {
             move('ArrowRight');
         }
 
-        if (key === 'ArrowUp' || key === 'Numpad8') {
+        if ((key === 'ArrowUp') || (key === 'Numpad8' && !isNumLockOn)) {
             move('ArrowUp');
         }
 
-        if (key === 'ArrowDown' || key === 'Numpad2') {
+        if ((key === 'ArrowDown') || (key === 'Numpad2' && !isNumLockOn)) {
             move('ArrowDown');
         }
 

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

@@ -10,7 +10,28 @@ const App = () => {
 
     useTableSort({
         enabled: sortableTable && rootRef.current,
-        spyElement: rootRef.current
+        spyElement: rootRef.current,
+        sortBy: (handleProcess: Function, filterType: string, inverse: boolean) => (a: Element, b: Element) => {
+        
+            // Custom comparison logic
+            let v1 = a.textContent, v2 = b.textContent;
+            if (filterType === 'number') {
+                v1 = parseFloat(v1);
+                v2 = parseFloat(v2);
+            }
+        
+            let result = 0;
+            if (filterType === 'text') {
+                result = v1.localeCompare(v2);
+            } else {
+                result = v1 - v2;
+            }
+        
+            // Apply display animation and status updates
+            handleProcess();
+        
+            return inverse ? -result : result;
+        }
     }, [rootRef]);
 
     return (
@@ -25,6 +46,7 @@ import { useEffect, useState } from 'react';
 
 import { getTbody, allRows, sortDataByIndex, initOrderProps, initRowColProps } from '../func';
 
+
 export interface UseTableSortProps {
     enabled: boolean;
     data?: any[];
@@ -33,6 +55,7 @@ export interface UseTableSortProps {
     isReverse?: boolean;
     onColSort?: (fetchData: any) => void;
     onClick?: (e: any) => void;
+    sortBy?: (handleProcess: Function, filterType: string, inverse: boolean) => ((a: Element, b: Element) => number); // A function that determines the order of the elements. 
 }
 
 function useTableSort({
@@ -42,7 +65,8 @@ function useTableSort({
     fieldType,
     isReverse = false,
     onColSort,
-    onClick
+    onClick,
+    sortBy
 }: UseTableSortProps, deps: any[]) {
 
    
@@ -62,17 +86,24 @@ function useTableSort({
         const curIndex = el.dataset.tableCol;
         const targetComparator = [].slice.call(tbodyRef.querySelectorAll(`[data-table-col="${curIndex}"]`));
 
+        const handleProcess = function () {
+            allRows(spyElement).forEach((node: any) => {
+                node.classList.add('newsort');
+            });
+
+            setInverse(!inverse);
+        };
 
-        //sort of HTML elements
-        const sortBy = function (a: any, b: any) {
+        // 
+        const defaultSortBy = function (a: Element, b: Element) {
 
-            let txt1 = a.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase(),
-                txt2 = b.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
+            let txt1: any = a.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase(),
+                txt2: any = b.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
 
             //type of number
             if (filterType == 'number') {
-                txt1 = Number(txt1.replace(/[^0-9.-]+/g, ''));
-                txt2 = Number(txt2.replace(/[^0-9.-]+/g, ''));
+                txt1 = parseFloat(txt1.replace(/[^0-9.+-]+/g, ''));
+                txt2 = parseFloat(txt2.replace(/[^0-9.+-]+/g, ''));
             }
 
             //type of date
@@ -83,14 +114,9 @@ function useTableSort({
 
 
             //add filter class
-            allRows(spyElement).forEach((node: any) => {
-                node.classList.add('newsort');
-            });
+            handleProcess();
 
             
-            setInverse(!inverse);
-
-
             // result
             if (filterType == 'text') {
                 return isReverse
@@ -104,7 +130,10 @@ function useTableSort({
             
         }
 
-        targetComparator.sort(sortBy);
+        // Use a custom sort method if available, otherwise default is used
+        const sortFn = typeof sortBy === 'function' ? sortBy(handleProcess, filterType, inverse) : defaultSortBy;
+
+        targetComparator.sort(sortFn);
 
         //console.log( 'targetComparator:', targetComparator );
         //console.log( 'inverse:', inverse );

package/package.json

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