funda-ui 4.7.222 → 4.7.252

package/lib/esm/Date/index.tsx

@@ -29,7 +29,6 @@ import { isNumeric } from 'funda-utils/dist/cjs/math';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
-
 import Calendar from './Calendar';
 
 
@@ -644,6 +643,11 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
         
         resetDefauleValueExist();
 
+        // Automatically pop up a pop-up window
+        if (enableEntireAreaPopup) {
+            handleShow();
+        }
+
         // If there is no valid default value in the input field, 
         // onChange should be triggered only after the resetDefauleValueExist() function is processed
         if (!dateDefaultValueExist) {
@@ -1093,12 +1097,9 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                             if (_val !== '' && !isValidYear(_val) && isNumeric(_val) && Number(_val) > 9999) _val = '9999';
                                             if (_val !== '' && !isValidYear(_val) && !isNumeric(_val)) _val = `${getCurrentYear()}`;
 
-
                                             const _date = `${_val}-${splitVals[1]}-${splitVals[2]}`;
                                             const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
 
-                               
-
                                             onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
                                             setSplitVals((prevState: string[]) => {
                                                 return [_val, prevState[1], prevState[2], prevState[3], prevState[4], prevState[5]];
@@ -1109,7 +1110,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                             setChangedVal(_full);
                                             setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
 
-                                            
+                                            // Auto focus to next input if year is 4 digits
+                                            if (_val.length === 4) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[1]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
                                         }}
                                         {...attributes}
                                     />
@@ -1142,13 +1150,9 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                             }
                                             if (_val !== '' && !isValidMonth(_val) && !isNumeric(_val)) _val = `${getCurrentMonth()}`;
 
-
-
                                             const _date = `${splitVals[0]}-${_val}-${splitVals[2]}`;
                                             const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
 
-                   
-
                                             onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
                                             setSplitVals((prevState: string[]) => {
                                                 return [prevState[0], _val, prevState[2], prevState[3], prevState[4], prevState[5]];
@@ -1158,7 +1162,15 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                             setDateVal(_date);
                                             setChangedVal(_full);
                                             setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
-                                            
+
+                                            // Auto focus to next input if month is 2 digits
+                                            if (_val.length === 2) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[2]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
                                         }}
                                         {...attributes}
                                     />
@@ -1199,13 +1211,9 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                             }
                                             if (_val !== '' && !isValidDay(_val) && !isNumeric(_val)) _val = `${getCurrentDay()}`;
 
-
                                             const _date = `${splitVals[0]}-${splitVals[1]}-${_val}`;
                                             const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
 
-
-
-
                                             onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
                                             setSplitVals((prevState: string[]) => {
                                                 return [prevState[0], prevState[1], _val, prevState[3], prevState[4], prevState[5]];
@@ -1216,7 +1224,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                             setChangedVal(_full);
                                             setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
 
-                                            
+                                            // Auto focus to next input if day is 2 digits
+                                            if (_val.length === 2) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[3]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
                                         }}
                                         {...attributes}
                                     />
@@ -1266,7 +1281,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                             setChangedVal(_full);
                                             setTimeVal([_val, splitVals[4], splitVals[5]]);
 
-                                            
+                                            // Auto focus to next input if hour is 2 digits
+                                            if (_val.length === 2) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[4]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
                                         }}
                                         {...attributes}
                                     />
@@ -1314,7 +1336,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                             setChangedVal(_full);
                                             setTimeVal([splitVals[3], _val, splitVals[5]]);
 
-                                            
+                                            // Auto focus to next input if minute is 2 digits
+                                            if (_val.length === 2) {
+                                                const nextInput = splitInputs.current.get(splitInputsIds[5]);
+                                                if (nextInput) {
+                                                    (nextInput as HTMLInputElement).focus();
+                                                    (nextInput as HTMLInputElement).select();
+                                                }
+                                            }
                                         }}
                                         {...attributes}
                                     />
@@ -1364,7 +1393,7 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                                 setDateVal(_date);
                                                 setChangedVal(_full);
                                                 setTimeVal([splitVals[3], splitVals[4], _val]);
-                                                    
+                                                // No auto focus for the last input (seconds)
                                             }}
                                             {...attributes}
                                         />

package/lib/esm/Input/index.tsx

@@ -7,6 +7,7 @@ import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalc
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 
 
+
 export type InputProps = {
     contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;

package/lib/esm/ModalDialog/index.tsx

@@ -13,6 +13,7 @@ import {
 } from 'funda-utils/dist/cjs/bodyScrollLock';
 
 
+
 declare global {
     interface Window {
         curVideo?: any;
@@ -90,10 +91,14 @@ export type ModalDialogProps = {
     /** This function is called whenever the data is updated.
      *  Exposes the JSON format data about the option as an argument.
      */
-    onLoad?: (openFunc: any, closeFunc: any) => void;
-    onOpen?: (e: any, callback: any) => void;
-    onClose?: (e: any) => void;
-    onSubmit?: (e: any, callback: any, incomingData: string | null | undefined) => void;
+    onLoad?: (openFunc: () => void, closeFunc: () => void) => void;
+    onOpen?: (e: React.MouseEvent<HTMLElement> | null, callback: () => void) => void;
+    onClose?: (e: React.MouseEvent<HTMLElement> | null) => void;
+    onSubmit?: (e: React.MouseEvent<HTMLButtonElement>, callback: () => void, incomingData: string | null | undefined) => void;
+    /**
+     * Called when Enter key is pressed while modal is open
+     */
+    onPressEnter?: (callback: () => void) => void;
 };
 
 const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.ForwardedRef<ModalDialogRef>) => {
@@ -132,7 +137,8 @@ const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.Forw
         onClose,
         onSubmit,
         id,
-        children
+        children,
+        onPressEnter
     } = props;
 
 
@@ -186,7 +192,7 @@ const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.Forw
 
 
     //
-    function handleCloseWin(e: any) {
+    function handleCloseWin(e: React.MouseEvent<HTMLElement> | null) {
         if (typeof e !== 'undefined' && e !== null) {
             e.preventDefault();
 
@@ -206,7 +212,7 @@ const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.Forw
     }
 
 
-    function handleOpenWin(e: any) {
+    function handleOpenWin(e: React.MouseEvent<HTMLElement> | null) {
         if (typeof e !== 'undefined' && e !== null) {
             e.preventDefault();
 
@@ -217,12 +223,10 @@ const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.Forw
         openAction();
 
         //
-        const callback = (e: any) => {
-            return () => {
-                handleCloseWin(e);
-            }
+        const callback = () => {
+            handleCloseWin(e);
         };
-        onOpen?.(e, callback(e));
+        onOpen?.(e, callback);
     }
 
     function closeAction() {
@@ -428,6 +432,23 @@ const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.Forw
 
     }, [show, data, modalRef.current]);   // When show`` defaults to true, `modalRef.current` will be null
 
+    // 监听回车键
+    useEffect(() => {
+        if (!modalShow || !onPressEnter) return;
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+                const callback = () => {
+                    handleCloseWin(null);
+                };
+                onPressEnter?.(callback);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [modalShow, onPressEnter]);
+
     return (
         <>
             {triggerContent ? <>
@@ -468,7 +489,7 @@ const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.Forw
                                     }}
                                 >
                                     <h5 className={`modal-title ${modalTitleClassName || ''}`}>{heading || ''}</h5>
-                                    {!closeDisabled ? <button type="button" className={enableVideo ? 'btn-close btn-close-white' : 'btn-close'} data-close="1" onClick={handleCloseWin}></button> : null}
+                                    {!closeDisabled ? <button type="button" className={enableVideo ? 'btn-close btn-close-white' : 'btn-close'} data-close="1" onClick={(e) => handleCloseWin(e)}></button> : null}
 
                                 </div>
                             </>}
@@ -500,15 +521,13 @@ const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.Forw
                             {closeBtnLabel || submitBtnLabel ? <>
                                 <div className={`modal-footer ${modalFooterClassName || ''}`}>
 
-                                    {!closeDisabled ? <>{closeBtnLabel ? <button data-close="1" onClick={handleCloseWin} type="button" className={closeBtnClassName ? closeBtnClassName : 'btn btn-secondary'}>{closeBtnLabel}</button> : null}</> : null}
+                                    {!closeDisabled ? <>{closeBtnLabel ? <button data-close="1" onClick={(e) => handleCloseWin(e)} type="button" className={closeBtnClassName ? closeBtnClassName : 'btn btn-secondary'}>{closeBtnLabel}</button> : null}</> : null}
 
-                                    {submitBtnLabel ? <button data-confirm="1" data-incoming-data={`${incomingData}`} onClick={(e: any) => {
-                                        const callback = (e: any) => {
-                                            return () => {
-                                                handleCloseWin(e);
-                                            }
+                                    {submitBtnLabel ? <button data-confirm="1" data-incoming-data={`${incomingData}`} onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                                        const callback = () => {
+                                            handleCloseWin(e);
                                         };
-                                        onSubmit?.(e, callback(e), incomingData);
+                                        onSubmit?.(e, callback, incomingData);
                                     }} type="button" className={submitBtnClassName ? submitBtnClassName : 'btn btn-primary'}>{submitBtnLabel}</button> : null}
                                 </div>
                             </> : null}

package/lib/esm/Table/Table.tsx

@@ -8,7 +8,8 @@ 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';
-import { cellMark, removeCellFocusClassName, initRowColProps } from './utils/func';
+import useTableKeyPress from './utils/hooks/useTableKeyPress';
+import { cellMark, removeCellFocusClassName, initRowColProps, getTableRowsColCount } from './utils/func';
 
 export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
     // content ref
@@ -49,8 +50,16 @@ export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
 
     // key press
     keyboardFocusable?: boolean;
-    onCellKeyPressed?: (classname: string, elem: HTMLTableCellElement, event: KeyboardEvent) => void;
-    onCellPressEnter?: (classname: string, elem: HTMLTableCellElement, event: KeyboardEvent) => void;
+    onCellKeyPressed?: (
+        classname: string,
+        elem: HTMLTableCellElement,
+        event: React.KeyboardEvent<Element>,
+        isLeftEdge: boolean,
+        isRightEdge: boolean,
+        isTopEdge: boolean,
+        isBottomEdge: boolean
+    ) => void;
+    onCellPressEnter?: (classname: string, elem: HTMLTableCellElement, event: React.KeyboardEvent<Element>) => void;
     
 }
 
@@ -113,7 +122,7 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
     const [selectedItems, setSelectedItems] = useState<any>(new Set());
     
     // effective element movement on keystroke
-    const [rootDataInfo, setRootDataInfo] = useState<null | {totalRow: number}>(null);
+    const [rootDataInfo, setRootDataInfo] = useState<null | {totalRow: number; totalCol: {row: number; colCount: number}[];}>(null);
     const refNode = useRef(new Map<string, HTMLTableElement>());
     const [focusableCellId, setFocusableCellId] = useState<string>('');
 
@@ -150,6 +159,30 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
         onRowDrag: onRowDrag
     }, [data, rootRef]);
 
+    const tableKeyPress = useTableKeyPress({
+        enabled: keyboardFocusable,
+        data: data,
+        spyElement: rootRef.current,
+        rootDataInfo,
+        refNode,
+        focusableCellId,
+        setFocusableCellId,
+        onCellKeyPressed,
+        onCellPressEnter,
+    }, [data, rootRef, rootDataInfo, refNode, focusableCellId]);
+
+    const updateFocusableCell = (row: number, col: number) => {
+            
+        setFocusableCellId(cellMark(row, col));
+
+        // Find and focus the cell element
+        const targetCell = refNode.current.get(cellMark(row, col)) as HTMLElement;
+
+        if (typeof targetCell !== 'undefined') {
+            removeCellFocusClassName(rootRef.current);
+            targetCell.classList.add('cell-focus');
+        }
+    };
 
     // initialize context
     useEffect(() => {
@@ -174,27 +207,53 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
         if (rootRef.current) {
             // Initialize custom props of table elements
             initRowColProps(rootRef.current);
+
+            // Count the number of columns per row
+            const totalCol = getTableRowsColCount(rootRef.current);
+            setRootDataInfo({
+                totalRow: Array.isArray(data) ? data.length : 0,
+                totalCol
+            });
+
+            // Initialize the focused index
+            if (keyboardFocusable) {
+                updateFocusableCell(0, 0);
+            }
+            
         }
     }, [data]); // Re-run when data changes
 
 
     // exposes the following methods
     useImperativeHandle(contentRef, () => ({
-        setFocusableCell: (row: number, col: number) => {
-            
-            setFocusableCellId(cellMark(row, col));
-
-            // Find and focus the cell element
-            const cellElement = rootRef.current?.querySelector(`.${cellMark(row, col)}`);
-            if (cellElement) {
+        setFocusableCell: updateFocusableCell,
+        clearAllCellFocus: () => {
+            if (rootRef.current) {
                 removeCellFocusClassName(rootRef.current);
-                cellElement.focus(); // !!!Required
-                cellElement.classList.add('cell-focus');
+                
+                const focusedCells = rootRef.current.querySelectorAll('td.cell-focus, th.cell-focus');
+                focusedCells.forEach((cell: any) => {
+                    if (typeof cell.blur === 'function') cell.blur();
+                    if (cell.classList) cell.classList.remove('cell-focus');
+                });
             }
+        },
+        getCellElement: (row: number, col: number) => {
+            // Find and focus the cell element
+            const targetCell = refNode.current.get(cellMark(row, col)) as HTMLElement;
+            return typeof targetCell !== 'undefined' ? targetCell : null;
+        },
+        forceFocusCell: (row: number, col: number) => {
+            // Find and focus the cell element
+            const targetCell = refNode.current.get(cellMark(row, col)) as HTMLElement;
 
-
+            if (typeof targetCell !== 'undefined') {
+                // After forcing focus, you can use the keyboard to listen directly
+                targetCell.focus(); 
+            }
         },
-    }), [rootRef]);
+        triggerCellKeyPressed: tableKeyPress.triggerCellKeyPressed
+    }), [rootRef, data, rootDataInfo]);
 
     return (
         <>

package/lib/esm/Table/TableCell.tsx

@@ -2,6 +2,8 @@ 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';
@@ -39,7 +41,7 @@ const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>((
     const { 
         originData,
         rootRef,
-        rootDataInfo, 
+        rootDataInfo,
         setRootDataInfo,
         refNode,
         focusableCellId,
@@ -58,7 +60,6 @@ const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>((
         data: originData,
         spyElement: rootRef.current,
         rootDataInfo,
-        setRootDataInfo,
         refNode,
         focusableCellId,
         setFocusableCellId,
@@ -84,7 +85,10 @@ const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>((
                     if (node) {
                         const _row = node.dataset.tableRow;
                         const _col = node.dataset.tableCol;
-                        refNode.current.set(cellMark(_row, _col), node);
+                        if (typeof _row !== 'undefined' && typeof _col !== 'undefined') {
+                            refNode.current.set(cellMark(_row, _col), node);
+                        }
+                        
                     }
 
                 }}

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

@@ -159,7 +159,10 @@ export function tableElemScrolledInit(root: HTMLDivElement, w: number) {
 
 
 export function cellMark(row: number | string | undefined, col: number | string | undefined) {
-    return `cell-${row}-${col}`;
+    const isNegative = (num: number) => {
+        return num < 0;
+    };
+    return `cell-${isNegative(row as number) ? 0 : row}-${isNegative(col as number) ? 0 : col}`;
 }
 
 export function removeCellFocusClassName(root: any) {
@@ -169,3 +172,11 @@ export function removeCellFocusClassName(root: any) {
         });
     }
 }
+
+export function getTableRowsColCount(root: HTMLDivElement) {
+    const rows = allRows(root);
+    return rows.map((row: HTMLTableRowElement, i: number) => ({
+        row: i,
+        colCount: row.children.length
+    }));
+}