funda-ui 4.7.202 → 4.7.222

package/Table/index.js

@@ -654,8 +654,8 @@ function tableElemScrolledInit(root, w) {
     });
   }
 }
-function cellMark(col, row) {
-  return "cell-".concat(col, "-").concat(row);
+function cellMark(row, col) {
+  return "cell-".concat(row, "-").concat(col);
 }
 function removeCellFocusClassName(root) {
   if (root) {
@@ -1027,7 +1027,7 @@ function useTableDraggable(_ref, deps) {
 }
 /* harmony default export */ const hooks_useTableDraggable = (useTableDraggable);
 ;// CONCATENATED MODULE: ./src/Table.tsx
-var _excluded = ["children", "wrapperClassName", "tableClassName", "bordered", "colGroup", "cellAutoWidth", "colSortable", "onColSort", "rowDraggable", "onRowDrag", "responsive", "enhancedResponsive", "enhancedResponsiveWithScrollBar", "data", "filterFields", "filterControlClassName", "filterControlPlaceholder", "filterLabel", "onChangeFilter", "dataSelected", "rowSelectable", "onChangeRowSelect", "keyboardFocusable", "onCellKeyPressed"];
+var _excluded = ["contentRef", "children", "wrapperClassName", "tableClassName", "bordered", "colGroup", "cellAutoWidth", "colSortable", "onColSort", "rowDraggable", "onRowDrag", "responsive", "enhancedResponsive", "enhancedResponsiveWithScrollBar", "data", "filterFields", "filterControlClassName", "filterControlPlaceholder", "filterLabel", "onChangeFilter", "dataSelected", "rowSelectable", "onChangeRowSelect", "keyboardFocusable", "onCellKeyPressed", "onCellPressEnter"];
 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 Table_slicedToArray(arr, i) { return Table_arrayWithHoles(arr) || Table_iterableToArrayLimit(arr, i) || Table_unsupportedIterableToArray(arr, i) || Table_nonIterableRest(); }
 function Table_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."); }
@@ -1043,8 +1043,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.forwardRef)(function (_ref, externalRef) {
-  var children = _ref.children,
+  var contentRef = _ref.contentRef,
+    children = _ref.children,
     wrapperClassName = _ref.wrapperClassName,
     tableClassName = _ref.tableClassName,
     bordered = _ref.bordered,
@@ -1068,6 +1070,7 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
     onChangeRowSelect = _ref.onChangeRowSelect,
     keyboardFocusable = _ref.keyboardFocusable,
     onCellKeyPressed = _ref.onCellKeyPressed,
+    onCellPressEnter = _ref.onCellPressEnter,
     attributes = _objectWithoutProperties(_ref, _excluded);
   var uniqueID = useComId_default()();
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -1139,6 +1142,32 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
       setSelectedItems(newSelectedItems);
     }
   }, [data, dataSelected]);
+
+  // Synchronous execution, which blocks rendering
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
+    if (rootRef.current) {
+      // Initialize custom props of table elements
+      initRowColProps(rootRef.current);
+    }
+  }, [data]); // Re-run when data changes
+
+  // exposes the following methods
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(contentRef, function () {
+    return {
+      setFocusableCell: function setFocusableCell(row, col) {
+        var _rootRef$current;
+        setFocusableCellId(cellMark(row, col));
+
+        // Find and focus the cell element
+        var cellElement = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelector(".".concat(cellMark(row, col)));
+        if (cellElement) {
+          removeCellFocusClassName(rootRef.current);
+          cellElement.focus(); // !!!Required
+          cellElement.classList.add('cell-focus');
+        }
+      }
+    };
+  }, [rootRef]);
   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(TableProvider, {
     value: {
       originData: data,
@@ -1170,7 +1199,8 @@ var Table = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_a
       refNode: refNode,
       focusableCellId: focusableCellId,
       setFocusableCellId: setFocusableCellId,
-      onCellKeyPressed: onCellKeyPressed
+      onCellKeyPressed: onCellKeyPressed,
+      onCellPressEnter: onCellPressEnter
     }
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({}, attributes, {
     id: uniqueID,
@@ -1252,7 +1282,8 @@ const App = () => {
         refNode,
         focusableCellId,
         setFocusableCellId,
-        onCellKeyPressed
+        onCellKeyPressed,
+        onCellPressEnter,
     }, [rootRef]);
     
 
@@ -1278,20 +1309,32 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
     focusableCellId = _ref.focusableCellId,
     setFocusableCellId = _ref.setFocusableCellId,
     onCellKeyPressed = _ref.onCellKeyPressed,
+    onCellPressEnter = _ref.onCellPressEnter,
     onKeyDown = _ref.onKeyDown;
   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 key, oldCellSignal, _row, _col, move;
+      var key, 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 (!((key === 'Enter' || key === 'NumpadEnter') && !enabled)) {
+              _context.next = 8;
+              break;
+            }
+            currentCell = event.target;
+            row = Number(currentCell.getAttribute('data-table-row'));
+            col = Number(currentCell.getAttribute('data-table-col'));
+            nextCellSignal = cellMark(row, col);
+            onCellPressEnter === null || onCellPressEnter === void 0 ? void 0 : onCellPressEnter(nextCellSignal, refNode.current.get(nextCellSignal), event);
+            return _context.abrupt("return");
+          case 8:
             if (!(!Array.isArray(data) || rootDataInfo === null || spyElement === null || typeof enabled === 'undefined' || enabled === false)) {
-              _context.next = 2;
+              _context.next = 10;
               break;
             }
             return _context.abrupt("return");
-          case 2:
-            key = event.code;
+          case 10:
             oldCellSignal = focusableCellId === null || focusableCellId === void 0 ? void 0 : focusableCellId.replace('cell-', '').split('-');
             _row = Number(oldCellSignal[0]);
             _col = Number(oldCellSignal[1]);
@@ -1299,15 +1342,19 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
               var _spyElement$querySele;
               switch (key) {
                 case 'ArrowLeft':
+                case 'Numpad4':
                   _col = _col - 1 < 0 ? 0 : _col - 1;
                   break;
                 case 'ArrowRight':
+                case 'Numpad6':
                   _col = _col + 1 > data.length - 1 ? data.length - 1 : _col + 1;
                   break;
                 case 'ArrowUp':
+                case 'Numpad8':
                   _row = _row - 1 < 0 ? 0 : _row - 1;
                   break;
                 case 'ArrowDown':
+                case 'Numpad2':
                   _row = _row + 1 > rootDataInfo.totalRow - 1 ? rootDataInfo.totalRow - 1 : _row + 1;
                   break;
               }
@@ -1324,19 +1371,23 @@ var useTableKeyPress = function useTableKeyPress(_ref, deps) {
               onCellKeyPressed === null || onCellKeyPressed === void 0 ? void 0 : onCellKeyPressed(nextCellSignal, refNode.current.get(nextCellSignal), event);
               onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
             };
-            if (key === 'ArrowLeft') {
+            if (key === 'ArrowLeft' || key === 'Numpad4') {
               move('ArrowLeft');
             }
-            if (key === 'ArrowRight') {
+            if (key === 'ArrowRight' || key === 'Numpad6') {
               move('ArrowRight');
             }
-            if (key === 'ArrowUp') {
+            if (key === 'ArrowUp' || key === 'Numpad8') {
               move('ArrowUp');
             }
-            if (key === 'ArrowDown') {
+            if (key === 'ArrowDown' || key === 'Numpad2') {
               move('ArrowDown');
             }
-          case 11:
+            if (key === 'Enter' || key === 'NumpadEnter') {
+              _nextCellSignal = cellMark(_row, _col);
+              onCellPressEnter === null || onCellPressEnter === void 0 ? void 0 : onCellPressEnter(_nextCellSignal, refNode.current.get(_nextCellSignal), event);
+            }
+          case 19:
           case "end":
             return _context.stop();
         }
@@ -1402,7 +1453,8 @@ var TableCell = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
     focusableCellId = _useContext.focusableCellId,
     setFocusableCellId = _useContext.setFocusableCellId,
     keyboardFocusable = _useContext.keyboardFocusable,
-    onCellKeyPressed = _useContext.onCellKeyPressed;
+    onCellKeyPressed = _useContext.onCellKeyPressed,
+    onCellPressEnter = _useContext.onCellPressEnter;
   var CellComponent = scope ? 'th' : 'td';
 
   // key press initialization
@@ -1416,6 +1468,7 @@ var TableCell = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_rea
       focusableCellId: focusableCellId,
       setFocusableCellId: setFocusableCellId,
       onCellKeyPressed: onCellKeyPressed,
+      onCellPressEnter: onCellPressEnter,
       onKeyDown: onKeyDown
     }, [rootRef]),
     handleKeyPressed = _useTableKeyPress.handleKeyPressed;

package/Utils/time.d.ts

@@ -9,6 +9,8 @@
 
 console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
 console.log(getTimeslots("10:00", "14:00", 60));   // ['10:00', '11:00', '12:00', '13:00']
+console.log(getTimeslots("08:00:00", "08:02:00", 0.4));   // ['08:00:00', '08:00:24', '08:00:48', '08:01:12', '08:01:36', '08:02:00']
+
 */
 declare function getTimeslots(startTime: string, endTime: string, timeInterval: number, formatRange?: boolean): string[];
 /**

package/Utils/time.js

@@ -62,49 +62,54 @@ __webpack_require__.r(__webpack_exports__);
 
 console.log(getTimeslots("10:00", "14:00", 60, true)); //['10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00']
 console.log(getTimeslots("10:00", "14:00", 60));   // ['10:00', '11:00', '12:00', '13:00']
+console.log(getTimeslots("08:00:00", "08:02:00", 0.4));   // ['08:00:00', '08:00:24', '08:00:48', '08:01:12', '08:01:36', '08:02:00']
+
 */
 
 function getTimeslots(startTime, endTime, timeInterval) {
   var formatRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  // Parse time string to seconds
   var parseTime = function parseTime(s) {
-    var c = s.split(':');
-    return parseInt(c[0]) * 60 + parseInt(c[1]);
-  };
-  var convertHours = function convertHours(mins) {
-    var hour = Math.floor(mins / 60);
-    mins = Math.trunc(mins % 60);
-    var converted = pad(hour, 2) + ':' + pad(mins, 2);
-    return converted;
+    var c = s.split(":").map(Number);
+    // Support HH:mm or HH:mm:ss
+    return c[0] * 3600 + c[1] * 60 + (c[2] || 0);
   };
+
+  // Pad with zeros
   var pad = function pad(str, max) {
     str = str.toString();
     return str.length < max ? pad("0" + str, max) : str;
   };
 
-  // calculate time slot
+  // Convert seconds to HH:mm:ss
+  var convertTime = function convertTime(secs) {
+    var hour = Math.floor(secs / 3600);
+    var min = Math.floor(secs % 3600 / 60);
+    var sec = secs % 60;
+    return pad(hour, 2) + ":" + pad(min, 2) + ":" + pad(sec, 2);
+  };
+
+  // Calculate time slots
   var calculateTimeSlot = function calculateTimeSlot(_startTime, _endTime, _timeInterval) {
     var timeSlots = [];
-    // Round start and end times to next 30 min interval
-    _startTime = Math.ceil(_startTime / 30) * 30;
-    _endTime = Math.ceil(_endTime / 30) * 30;
-
-    // Start and end of interval in the loop
     var currentTime = _startTime;
-    while (currentTime < _endTime) {
+    while (currentTime <= _endTime) {
       if (formatRange) {
-        var t = convertHours(currentTime) + ' - ' + convertHours(currentTime + _timeInterval);
+        var t = convertTime(currentTime) + ' - ' + convertTime(Math.min(currentTime + _timeInterval, _endTime));
         timeSlots.push(t);
       } else {
-        timeSlots.push(convertHours(currentTime));
+        timeSlots.push(convertTime(currentTime));
       }
       currentTime += _timeInterval;
     }
     return timeSlots;
   };
-  var inputEndTime = parseTime(endTime);
   var inputStartTime = parseTime(startTime);
-  var timeSegment = calculateTimeSlot(inputStartTime, inputEndTime, timeInterval);
-  return timeSegment;
+  var inputEndTime = parseTime(endTime);
+  // If timeInterval is not an integer, treat as minutes with decimals, convert to seconds
+  var isDecimal = !Number.isInteger(timeInterval);
+  var intervalInSeconds = isDecimal ? Math.round(timeInterval * 60) : timeInterval * 60;
+  return calculateTimeSlot(inputStartTime, inputEndTime, intervalInSeconds);
 }
 
 /**

package/lib/cjs/Date/index.js

@@ -5424,9 +5424,14 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
 
     e.target.select();
     resetDefauleValueExist();
-    var _date = "".concat(splitVals[0], "-").concat(splitVals[1], "-").concat(splitVals[2]);
-    var _full = "".concat(_date, " ").concat(splitVals[3], ":").concat(splitVals[4], ":").concat(splitVals[5]);
-    _onChange === null || _onChange === void 0 ? void 0 : _onChange(inputRef.current, valueResConverter(_full), (0,cjs_date.isValidDate)(_full), getAllSplittingInputs());
+
+    // If there is no valid default value in the input field, 
+    // onChange should be triggered only after the resetDefauleValueExist() function is processed
+    if (!dateDefaultValueExist) {
+      var _date = "".concat(splitVals[0], "-").concat(splitVals[1], "-").concat(splitVals[2]);
+      var _full = "".concat(_date, " ").concat(splitVals[3], ":").concat(splitVals[4], ":").concat(splitVals[5]);
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(inputRef.current, valueResConverter(_full), (0,cjs_date.isValidDate)(_full), getAllSplittingInputs());
+    }
   }
   function handleKeyPressed(_x2) {
     return _handleKeyPressed.apply(this, arguments);
@@ -5461,17 +5466,19 @@ 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, move;
+      var key, btnMark, 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;
-            move = function move(key) {
+            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';
+            move = function move(direction) {
               var currentIndex = splitInputsIds.findIndex(function (s) {
                 return s === btnMark;
               });
-              var nextIndex = key === 'ArrowLeft' ? currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex - 1 : currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex + 1;
+              var nextIndex = direction === 'left' ? currentIndex === 0 ? splitInputsIds.length - 1 : currentIndex - 1 : currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex + 1;
               var nextOption = splitInputsIds.at(nextIndex);
               if (nextOption) {
                 setTimeout(function () {
@@ -5481,13 +5488,13 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
                 setFocusableSplitInputId(nextOption);
               }
             };
-            if (key === 'ArrowLeft') {
-              move('ArrowLeft');
+            if (isLeftArrow) {
+              move('left');
             }
-            if (key === 'ArrowRight') {
-              move('ArrowRight');
+            if (isRightArrow) {
+              move('right');
             }
-          case 5:
+          case 7:
           case "end":
             return _context2.stop();
         }
@@ -5500,6 +5507,7 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     _onChange === null || _onChange === void 0 ? void 0 : _onChange(inputRef.current, '', false, getAllSplittingInputs());
   }
   function resetDefauleValueExist() {
+    // Does the current input box have a "valid default value"?
     if (!dateDefaultValueExist) setDateDefaultValueExist(true);
   }
   function resetPopupBlurStatus() {

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

@@ -1,5 +1,15 @@
 import React from 'react';
-export declare type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3: any) => void;
+export interface MultiSelectValue {
+    items: {
+        label: string;
+        value: string;
+    }[];
+    labels: string[];
+    values: string[];
+    labelsOfString: string;
+    valuesOfString: string;
+}
+export declare type SelectOptionChangeFnType = (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, element: HTMLElement, value: OptionConfig | MultiSelectValue) => void | Promise<void>;
 export interface MultiSelectControlValConfig {
     values: string[];
     labels: string[];
@@ -12,7 +22,8 @@ export interface OptionConfig {
     listItemLabel?: string;
     value: string | number | boolean;
     queryString: string | number;
-    callback?: () => void;
+    callback?: () => void | Promise<void>;
+    [key: string]: string | number | boolean | any[] | (() => void | Promise<void>) | undefined;
 }
 export interface MultiSelectConfig {
     valid: boolean;
@@ -82,14 +93,14 @@ export declare type SelectProps = {
     fetchFuncAsync?: any;
     fetchFuncMethod?: string;
     fetchFuncMethodParams?: any[];
-    fetchCallback?: (data: any) => void;
-    onFetch?: (e: any, e2: any, value: string, data: any, incomingData: string | null | undefined) => void;
-    onLoad?: (e: any, e2: any, value: string | null | undefined) => void;
-    onSelect?: (data: any) => void;
+    fetchCallback?: (data: OptionConfig[]) => OptionConfig[];
+    onFetch?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, element: HTMLElement, value: string, data: OptionConfig[], incomingData: string | null | undefined) => void;
+    onLoad?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, element: HTMLElement, value: string | null | undefined) => void;
+    onSelect?: (data: OptionConfig) => void | Promise<void>;
     onChange?: SelectOptionChangeFnType | null;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    onKeyPressed?: (arg1: any, arg2: any, arg3: any) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    onKeyPressed?: (event: React.KeyboardEvent<HTMLElement>, element: HTMLElement, value: string) => void;
 };
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<unknown>>;
 export default Select;