@codezee/sixtify-brahma 0.2.156 → 0.2.158

package/packages/shared-components/dist/CellSelectionTable/CellSelectionTable.js

@@ -5,7 +5,9 @@ exports.CellSelectionTable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
+const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
+const Tooltip_1 = require("../Tooltip");
 const useOutsideClick_1 = require("./hook/useOutsideClick");
 const useSorting_1 = require("./hook/useSorting");
 const useStickyColumns_1 = require("./hook/useStickyColumns");
@@ -13,12 +15,14 @@ const EmployeeCell_1 = require("./SubComponents/EmployeeCell");
 const TableBodyLoader_1 = require("./SubComponents/TableBodyLoader");
 const helper_1 = require("./utils/helper");
 const sortUtils_1 = require("./utils/sortUtils");
-const Tooltip_1 = require("../Tooltip");
 exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSelection, cellColors, height, loading = false, getCellTextColor = () => "", onDataUpdate, }, ref) => {
     const theme = (0, material_1.useTheme)();
     const { slate, iron, butterflyBlue } = theme.palette.app.color;
     const selectingRef = (0, react_1.useRef)(false);
     const tableRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const headerRef = (0, react_1.useRef)(null);
+    const [columnWidths, setColumnWidths] = (0, react_1.useState)([]);
     const selectionModeRef = (0, react_1.useRef)("add");
     const anchorRef = (0, react_1.useRef)(null);
     const hoveringRef = (0, react_1.useRef)(null);
@@ -34,12 +38,21 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
             setCurrentSelectedRanges([]);
         }
     }, [loading]);
-    const isSelectedCell = (rowIndex, colIndex) => {
+    const selectedCellsSet = (0, react_1.useMemo)(() => {
+        const set = new Set();
         if (selectedRanges.length === 0 && currentSelectedRanges.length === 0) {
-            return false;
+            return set;
         }
-        return [...selectedRanges, ...currentSelectedRanges].some((range) => range.some((cell) => cell.row === rowIndex && cell.col === colIndex));
-    };
+        [...selectedRanges, ...currentSelectedRanges].forEach((range) => {
+            range.forEach((cell) => {
+                set.add(`${cell.row}-${cell.col}`);
+            });
+        });
+        return set;
+    }, [selectedRanges, currentSelectedRanges]);
+    const isSelectedCell = (0, react_1.useCallback)((rowIndex, colIndex) => {
+        return selectedCellsSet.has(`${rowIndex}-${colIndex}`);
+    }, [selectedCellsSet]);
     const { stickyMap } = (0, useStickyColumns_1.useStickyColumns)(columns);
     (0, useOutsideClick_1.useOutsideClick)(tableRef, () => {
         setSelectedRanges([]);
@@ -78,6 +91,18 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
         data: memoizedData,
         columns,
     });
+    const ROW_HEIGHT = 40;
+    const estimateSize = (0, react_1.useCallback)(() => ROW_HEIGHT, []);
+    const getScrollElement = (0, react_1.useCallback)(() => containerRef.current, []);
+    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: sortedData.length,
+        estimateSize,
+        getScrollElement,
+        overscan: 5,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+    });
+    const virtualItems = rowVirtualizer.getVirtualItems();
     const prevSortedDataRef = (0, react_1.useRef)([]);
     const selectedRangesRef = (0, react_1.useRef)([]);
     // Keep track of the latest data for the ref methods
@@ -168,7 +193,31 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
     (0, react_1.useEffect)(() => {
         selectedRangesRef.current = selectedRanges;
     }, [selectedRanges]);
-    function getCellColor({ cellKey, isSelected = false, }) {
+    // Measure header column widths to ensure body cells match
+    (0, react_1.useEffect)(() => {
+        if (headerRef.current && !loading) {
+            const measureWidths = () => {
+                const headerRow = headerRef.current?.querySelector("tr");
+                if (headerRow) {
+                    const headerCells = headerRow.querySelectorAll("th");
+                    const widths = Array.from(headerCells).map((cell) => {
+                        return cell.getBoundingClientRect().width;
+                    });
+                    if (widths.length > 0) {
+                        setColumnWidths(widths);
+                    }
+                }
+            };
+            // Use requestAnimationFrame to avoid blocking the main thread
+            const rafId = requestAnimationFrame(() => {
+                measureWidths();
+            });
+            return () => {
+                cancelAnimationFrame(rafId);
+            };
+        }
+    }, [columns, loading]);
+    const getCellColor = (0, react_1.useCallback)(({ cellKey, isSelected = false }) => {
         if (isSelected) {
             return butterflyBlue[800];
         }
@@ -176,7 +225,7 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
             return cellColors(cellKey);
         }
         return iron[600];
-    }
+    }, [butterflyBlue, cellColors, iron]);
     const handleCellMouseDown = (0, react_1.useCallback)((ri, ci) => (e) => {
         e.preventDefault();
         if ((0, sortUtils_1.isSelectionDisabled)(columns[ci]?.disableSelection, columns[ci]?.sorting) &&
@@ -276,10 +325,15 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
             onCellSelection,
         });
     }, [onCellSelection, selectedRanges]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { position: "relative", overflow: "auto", height: height, bgcolor: iron[600], children: (0, jsx_runtime_1.jsxs)(material_1.Table, { ref: tableRef, stickyHeader: true, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, position: "relative", overflow: "auto", height: height, bgcolor: iron[600], sx: {
+            WebkitOverflowScrolling: "touch",
+            scrollBehavior: "auto",
+        }, children: (0, jsx_runtime_1.jsxs)(material_1.Table, { ref: tableRef, stickyHeader: true, sx: {
                 userSelect: "none",
                 borderCollapse: "separate",
                 borderSpacing: 0,
+                tableLayout: "fixed",
+                width: "100%",
                 "& th, & td": {
                     borderRight: `1px solid ${slate[700]}`,
                     borderBottom: `1px solid ${slate[700]}`,
@@ -291,7 +345,7 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
                 "& td": {
                     padding: "0px 5px",
                 },
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: columns.map(({ key, label, minWidth = "auto", lockPinned = false, align = "left", disableSelection, sorting, }, ci) => {
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { ref: headerRef, children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: columns.map(({ key, label, minWidth = "auto", lockPinned = false, align = "left", disableSelection, sorting, }, ci) => {
                             const isSticky = stickyMap.has(ci);
                             const left = isSticky ? stickyMap.get(ci) : 0;
                             const sortDirection = getSortDirection(key);
@@ -321,54 +375,91 @@ exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSel
                                     }),
                                     backgroundColor: slate[700],
                                     minWidth,
+                                    maxWidth: columns[ci]?.maxWidth ?? "auto",
+                                    width: minWidth !== "auto" ? minWidth : undefined,
                                     padding: "5px 10px",
                                     cursor: canSort ? "pointer" : "default",
+                                    boxSizing: "border-box",
                                 }, onClick: canSort ? () => handleSort(key) : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: justifyContent, gap: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", lineHeight: "18px", children: label }), canSort && ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", alignItems: "center", children: renderSortIcon() }))] }) }, key));
-                        }) }) }), loading ? ((0, jsx_runtime_1.jsx)(TableBodyLoader_1.TableBodyLoader, { columns: columns, rowCount: 25 })) : ((0, jsx_runtime_1.jsx)(material_1.TableBody, { children: sortedData.map((row, ri) => ((0, jsx_runtime_1.jsx)(material_1.TableRow, { sx: { backgroundColor: iron[600] }, children: columns.map(({ key, maxWidth = "auto", minWidth = "auto", isEmployee, align = "center", lockPinned = false, }, ci) => {
-                            const cell = row[key];
-                            const getRowTitle = (0, helper_1.getCellValue)(cell, "cellLabel");
-                            const tooltip = typeof cell === "object" &&
-                                cell != null &&
-                                typeof cell?.["cellTooltip"] === "object"
-                                ? cell["cellTooltip"]
-                                : (0, helper_1.getCellValue)(cell, "cellTooltip");
-                            const getColor = (0, helper_1.getCellValue)(cell, "cellBackgroundConditionKey");
-                            const cellActive = (0, helper_1.getCellValue)(cell, "cellActive");
-                            const isSticky = stickyMap.has(ci);
-                            const left = isSticky ? stickyMap.get(ci) : 0;
-                            const content = isEmployee ? ((0, jsx_runtime_1.jsx)(EmployeeCell_1.EmployeeCell, { row: row, maxWidth: maxWidth, minWidth: minWidth })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: getRowTitle }));
-                            const isNotDisabled = !((0, sortUtils_1.isSelectionDisabled)(columns[ci]?.disableSelection, columns[ci]?.sorting) || row?.rowDisabled);
-                            return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { align: align, sx: {
-                                    ...(lockPinned && {
-                                        top: 0,
-                                        left,
-                                        zIndex: 5,
-                                        position: "sticky",
-                                    }),
-                                    ...(isNotDisabled
-                                        ? {}
-                                        : {
-                                            cursor: "not-allowed",
+                        }) }) }), loading ? ((0, jsx_runtime_1.jsx)(TableBodyLoader_1.TableBodyLoader, { columns: columns, rowCount: 25 })) : ((0, jsx_runtime_1.jsx)(material_1.TableBody, { style: {
+                        height: `${rowVirtualizer.getTotalSize()}px`,
+                        position: "relative",
+                    }, children: virtualItems.map((virtualRow) => {
+                        const row = sortedData[virtualRow.index];
+                        if (!row) {
+                            return null;
+                        }
+                        const ri = virtualRow.index;
+                        return ((0, jsx_runtime_1.jsx)(material_1.TableRow, { sx: {
+                                backgroundColor: iron[600],
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                height: `${virtualRow.size}px`,
+                                transform: `translateY(${virtualRow.start}px) translateZ(0)`,
+                                display: "table-row",
+                                willChange: "transform",
+                                backfaceVisibility: "hidden",
+                                WebkitBackfaceVisibility: "hidden",
+                            }, children: columns.map(({ key, maxWidth = "auto", minWidth = "auto", isEmployee, align = "center", lockPinned = false, }, ci) => {
+                                const cell = row[key];
+                                const getRowTitle = (0, helper_1.getCellValue)(cell, "cellLabel");
+                                const tooltip = typeof cell === "object" &&
+                                    cell != null &&
+                                    typeof cell?.["cellTooltip"] === "object"
+                                    ? cell["cellTooltip"]
+                                    : (0, helper_1.getCellValue)(cell, "cellTooltip");
+                                const getColor = (0, helper_1.getCellValue)(cell, "cellBackgroundConditionKey");
+                                const cellActive = (0, helper_1.getCellValue)(cell, "cellActive");
+                                const isSticky = stickyMap.has(ci);
+                                const left = isSticky ? stickyMap.get(ci) : 0;
+                                const content = isEmployee ? ((0, jsx_runtime_1.jsx)(EmployeeCell_1.EmployeeCell, { row: row, maxWidth: maxWidth, minWidth: minWidth })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: getRowTitle }));
+                                const isNotDisabled = !((0, sortUtils_1.isSelectionDisabled)(columns[ci]?.disableSelection, columns[ci]?.sorting) || row?.rowDisabled);
+                                let cellWidth;
+                                if (columnWidths[ci] !== undefined) {
+                                    cellWidth = `${columnWidths[ci]}px`;
+                                }
+                                else if (minWidth !== "auto") {
+                                    cellWidth = minWidth;
+                                }
+                                else {
+                                    cellWidth = undefined;
+                                }
+                                return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { align: align, sx: {
+                                        ...(lockPinned && {
+                                            top: 0,
+                                            left,
+                                            zIndex: 5,
+                                            position: "sticky",
                                         }),
-                                    userSelect: "none",
-                                    overflow: "hidden",
-                                    bgcolor: (0, material_1.lighten)(getCellColor({
-                                        cellKey: getColor,
-                                        isSelected: isSelectedCell(ri, ci),
-                                    }), 0.8),
-                                    ...(cellActive &&
-                                        ci > 0 && {
-                                        color: getCellTextColor(cellActive),
-                                    }),
-                                    padding: "5px 10px",
-                                    cursor: "pointer",
-                                    maxWidth,
-                                    minWidth,
-                                }, onMouseDown: (e) => handleCellMouseDown(ri, ci)(e), onMouseEnter: isNotDisabled
-                                    ? handleCellMouseEnter(ri, ci)
-                                    : undefined, onMouseUp: (e) => handleCellMouseUp(ri, ci)(e), onContextMenu: isNotDisabled
-                                    ? handleContextMenuCallback(ri, ci)
-                                    : undefined, children: tooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: tooltip, children: content })) : (content) }, key));
-                        }) }, typeof row.id === "string" ? row.id : ""))) }))] }) }));
+                                        ...(isNotDisabled
+                                            ? {}
+                                            : {
+                                                cursor: "not-allowed",
+                                            }),
+                                        userSelect: "none",
+                                        overflow: "hidden",
+                                        bgcolor: (0, material_1.lighten)(getCellColor({
+                                            cellKey: getColor,
+                                            isSelected: isSelectedCell(ri, ci),
+                                        }), 0.8),
+                                        ...(cellActive &&
+                                            ci > 0 && {
+                                            color: getCellTextColor(cellActive),
+                                        }),
+                                        padding: "5px 10px",
+                                        cursor: "pointer",
+                                        maxWidth,
+                                        minWidth,
+                                        width: cellWidth,
+                                        boxSizing: "border-box",
+                                    }, onMouseDown: (e) => handleCellMouseDown(ri, ci)(e), onMouseEnter: isNotDisabled
+                                        ? handleCellMouseEnter(ri, ci)
+                                        : undefined, onMouseUp: (e) => handleCellMouseUp(ri, ci)(e), onContextMenu: isNotDisabled
+                                        ? handleContextMenuCallback(ri, ci)
+                                        : undefined, children: tooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: tooltip, children: content })) : (content) }, key));
+                            }) }, typeof row.id === "string" ? row.id : `row-${ri}`));
+                    }) }))] }) }));
 });
 exports.CellSelectionTable.displayName = "CellSelectionTable";

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAIrB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAA6B,EAC7B,WAAsD,EACtD,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA6RpB"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAKrB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAA6B,EAC7B,WAAsD,EACtD,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAoSpB"}

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.js

@@ -14,14 +14,15 @@ const react_i18next_1 = require("react-i18next");
 const PadBox_1 = require("../../PadBox");
 const Svgs_1 = require("../../Svgs");
 const utils_1 = require("../../utils");
+const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const FileUpload_styled_1 = require("./FileUpload.styled");
 const Skeleton_1 = require("./Skeleton");
 exports.error_with_transaltion = "error_with_transaltion";
 function FileUpload({ loading = false, onChange, isDisabled, multiple = false, required = false, error, helperText, label, fileNames, size = 10, name, setError, accept = utils_1.SUPPORTED_FILE_TYPES, acceptTitle = "Only JPG, PNG, PDF files are accepted.", ...restProps }) {
     const theme = (0, material_1.useTheme)();
-    const { red, iron, black } = theme.palette.app.color;
+    const { red, iron, black, butterflyBlue } = theme.palette.app.color;
     const { t } = (0, react_i18next_1.useTranslation)();
-    const inputRef = (0, react_1.useRef)(null);
+    const { inputRef, setInputRef } = (0, useFormFieldFocus_1.useFormFieldFocus)();
     const dragCounter = (0, react_1.useRef)(0);
     const rafRef = (0, react_1.useRef)(null);
     const animStartRef = (0, react_1.useRef)(null);
@@ -60,9 +61,6 @@ function FileUpload({ loading = false, onChange, isDisabled, multiple = false, r
             return;
         }
         onChange(validFiles);
-        if (inputRef.current) {
-            inputRef.current.value = "";
-        }
     };
     const handleFileChange = (event) => {
         const files = event.target.files;
@@ -160,8 +158,11 @@ function FileUpload({ loading = false, onChange, isDisabled, multiple = false, r
         }
         const fileArray = Array.from(files);
         processFiles(fileArray);
-        if (inputRef.current) {
-            inputRef.current.value = "";
+    };
+    const handleContainerKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            inputRef.current?.click();
         }
     };
     if (loading) {
@@ -169,12 +170,16 @@ function FileUpload({ loading = false, onChange, isDisabled, multiple = false, r
     }
     const boxShadowIntensity = 0.08 + 0.12 * dragProgress;
     const scale = 1 + 0.02 * dragProgress;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { disabled: isDisabled, required: required, children: label }), (0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileUploadContainer, { onClick: () => inputRef.current?.click(), onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, error: error, disabled: isDisabled, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { disabled: isDisabled, required: required, children: label }), (0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileUploadContainer, { onClick: () => inputRef.current?.click(), onKeyDown: handleContainerKeyDown, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, error: error, disabled: isDisabled, tabIndex: isDisabled ? -1 : 0, role: "button", "aria-label": label ?? "Upload files", sx: {
                     transform: `scale(${scale})`,
                     transition: "transform 30ms linear",
                     boxShadow: `0 0px ${12 * dragProgress}px ${(0, material_1.alpha)(black[900], boxShadowIntensity)}`,
                     cursor: isDisabled ? "not-allowed" : "pointer",
-                }, ...restProps, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileInput, { disabled: isDisabled, type: "file", accept: accept.toString(), ref: inputRef, onChange: handleFileChange, multiple: multiple }), (0, jsx_runtime_1.jsx)(Svgs_1.SvgDrop, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: isDisabled ? iron[800] : "revert-layer", children: "Drag & drop files or Browse" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: isDisabled ? iron[800] : "revert-layer", children: acceptTitle })] }) }) }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
+                    "&:focus-visible": {
+                        outline: `2px solid ${butterflyBlue[900]}`,
+                        outlineOffset: "2px",
+                    },
+                }, ...restProps, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileInput, { disabled: isDisabled, type: "file", accept: accept.toString(), ref: setInputRef, onChange: handleFileChange, multiple: multiple }), (0, jsx_runtime_1.jsx)(Svgs_1.SvgDrop, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: isDisabled ? iron[800] : "revert-layer", children: "Drag & drop files or Browse" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: isDisabled ? iron[800] : "revert-layer", children: acceptTitle })] }) }) }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
                     color: `${red[900]}`,
                     whiteSpace: "pre",
                     textWrap: "wrap",

package/packages/shared-components/dist/FormFields/ImageUpload/ImageUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUpload.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AASH,wBAAgB,WAAW,CAAC,EAC1B,OAAkB,EAClB,WAAmB,EACnB,YAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAiB,EACjB,OAAe,EACf,IAAQ,EACR,QAAiC,GAClC,EAAE,gBAAgB,2CAmLlB"}
+{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUpload.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKlD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AASH,wBAAgB,WAAW,CAAC,EAC1B,OAAkB,EAClB,WAAmB,EACnB,YAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAiB,EACjB,OAAe,EACf,IAAQ,EACR,QAAiC,GAClC,EAAE,gBAAgB,2CAuMlB"}

package/packages/shared-components/dist/FormFields/ImageUpload/ImageUpload.js

@@ -15,15 +15,16 @@ const Button_1 = require("../../Button");
 const PadBox_1 = require("../../PadBox");
 const Toast_1 = require("../../Toast");
 const utils_1 = require("../../utils");
+const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const ImageUpload_styled_1 = require("./ImageUpload.styled");
 const PhotoCaptureDialog_1 = require("./PhotoCaptureDialog");
 const Skeleton_1 = require("./Skeleton");
 const imageFileType = ["image/png", "image/jpeg", "image/jpg"];
 function ImageUpload({ variant = "square", isUploading = false, defaultValue = "", onDelete, onChange, label, isCapture = false, loading = false, size = 5, subTitle = "PNG, JPEG under 5 MB", }) {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const inputRef = (0, react_1.useRef)(null);
     const [hover, setHover] = (0, react_1.useState)(false);
     const [isOpenCaptureModal, setIsOpenCaptureModal] = (0, react_1.useState)(false);
+    const { inputRef, setInputRef, maintainFocusAfterClose } = (0, useFormFieldFocus_1.useFormFieldFocus)(isOpenCaptureModal);
     const theme = (0, material_1.useTheme)();
     const { butterflyBlue, iron } = theme.palette.app.color;
     const handleFileChange = (event) => {
@@ -53,15 +54,20 @@ function ImageUpload({ variant = "square", isUploading = false, defaultValue = "
     const handleFileRemove = (event) => {
         event.stopPropagation();
         onDelete();
-        if (inputRef.current) {
-            inputRef.current.value = "";
+    };
+    const handleContainerKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (!defaultValue) {
+                inputRef.current?.click();
+            }
         }
     };
     const { layout } = (0, utils_1.useGetDeviceType)();
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { flexWrap: isCapture ? "wrap" : "nowrap", gap: "20px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: () => !defaultValue && inputRef.current?.click(), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { flexWrap: isCapture ? "wrap" : "nowrap", gap: "20px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: () => !defaultValue && inputRef.current?.click(), onKeyDown: handleContainerKeyDown, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), tabIndex: 0, role: "button", "aria-label": label ?? "Upload image", sx: {
                             height: "120px",
                             width: "120px",
                             position: "relative",
@@ -77,6 +83,10 @@ function ImageUpload({ variant = "square", isUploading = false, defaultValue = "
                             ":hover": {
                                 border: `2px dashed ${butterflyBlue[900]}`,
                             },
+                            ":focus-visible": {
+                                outline: `2px solid ${butterflyBlue[900]}`,
+                                outlineOffset: "2px",
+                            },
                             ...(variant === "circle"
                                 ? {
                                     borderRadius: "50%",
@@ -85,9 +95,12 @@ function ImageUpload({ variant = "square", isUploading = false, defaultValue = "
                                     },
                                 }
                                 : {}),
-                        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", ref: inputRef, accept: imageFileType.join(","), onChange: handleFileChange, style: { display: "none" } }), hover && !!defaultValue && ((0, jsx_runtime_1.jsxs)(ImageUpload_styled_1.DarkBackgroundContainer, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => inputRef.current?.click(), children: (0, jsx_runtime_1.jsx)(icons_material_1.Edit, { sx: { color: "white" } }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleFileRemove, children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, { sx: { color: "white" } }) })] })), isUploading && ((0, jsx_runtime_1.jsx)(ImageUpload_styled_1.DarkBackgroundContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: iron[600], children: "Processing..." }) })), defaultValue ? ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: (0, jsx_runtime_1.jsx)("img", { alt: "", src: defaultValue, style: {
+                        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", ref: setInputRef, accept: imageFileType.join(","), onChange: handleFileChange, style: { display: "none" } }), hover && !!defaultValue && ((0, jsx_runtime_1.jsxs)(ImageUpload_styled_1.DarkBackgroundContainer, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => inputRef.current?.click(), children: (0, jsx_runtime_1.jsx)(icons_material_1.Edit, { sx: { color: "white" } }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleFileRemove, children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, { sx: { color: "white" } }) })] })), isUploading && ((0, jsx_runtime_1.jsx)(ImageUpload_styled_1.DarkBackgroundContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: iron[600], children: "Processing..." }) })), defaultValue ? ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: (0, jsx_runtime_1.jsx)("img", { alt: "", src: defaultValue, style: {
                                         width: "100%",
                                         height: "100%",
                                         objectFit: "cover",
-                                    } }) })) : ((0, jsx_runtime_1.jsx)(material_1.Stack, { justifyContent: "center", alignItems: "center", sx: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(PersonAddAlt_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { noWrap: true, variant: "subtitle1", fontWeight: 500, children: label }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: iron[800], children: subTitle })] }), isCapture && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setIsOpenCaptureModal(true), variant: "outlined", fullWidth: layout === "mobile", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", children: [(0, jsx_runtime_1.jsx)(CameraAltOutlined_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: "Capture photo" })] }) }))] }), isOpenCaptureModal && ((0, jsx_runtime_1.jsx)(PhotoCaptureDialog_1.PhotoCaptureDialog, { onChange: onChange, isUploading: isUploading, open: isOpenCaptureModal, onClose: () => setIsOpenCaptureModal(false) }))] }));
+                                    } }) })) : ((0, jsx_runtime_1.jsx)(material_1.Stack, { justifyContent: "center", alignItems: "center", sx: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(PersonAddAlt_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { noWrap: true, variant: "subtitle1", fontWeight: 500, children: label }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: iron[800], children: subTitle })] }), isCapture && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setIsOpenCaptureModal(true), variant: "outlined", fullWidth: layout === "mobile", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", children: [(0, jsx_runtime_1.jsx)(CameraAltOutlined_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: "Capture photo" })] }) }))] }), isOpenCaptureModal && ((0, jsx_runtime_1.jsx)(PhotoCaptureDialog_1.PhotoCaptureDialog, { onChange: onChange, isUploading: isUploading, open: isOpenCaptureModal, onClose: () => {
+                    setIsOpenCaptureModal(false);
+                    maintainFocusAfterClose();
+                } }))] }));
 }

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAK3D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,eAAe,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAmMzB"}
+{"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAK3D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,eAAe,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAsNzB"}

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.js

@@ -26,7 +26,7 @@ function PhoneInputField({ control, name, defaultValue, rules, label, disabled =
     const containerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const container = containerRef.current;
-        if (!container) {
+        if (!container || disabled) {
             return;
         }
         const mainInput = container.querySelector("input[type='tel']");
@@ -35,6 +35,13 @@ function PhoneInputField({ control, name, defaultValue, rules, label, disabled =
             restField.ref(mainInput);
         }
         const checkDropdownState = () => {
+            const selectedFlag = container.querySelector(".selected-flag");
+            if (selectedFlag) {
+                selectedFlag.setAttribute("tabindex", "-1");
+                selectedFlag.addEventListener("focus", () => {
+                    selectedFlag.blur();
+                });
+            }
             const dropdown = container.querySelector(".flag-dropdown.open");
             const isOpen = !!dropdown;
             setDropdownOpen(isOpen);
@@ -75,22 +82,30 @@ function PhoneInputField({ control, name, defaultValue, rules, label, disabled =
             container.removeEventListener("click", handleClick);
             document.removeEventListener("click", handleClickOutside);
         };
-    }, [setInputRef, restField]);
+    }, [setInputRef, restField, disabled]);
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: rows });
     }
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, sx: {
                             "& .phone-input-container": {
-                                "&:focus-within": {
-                                    border: error
-                                        ? `2px solid ${red[900]} !important`
-                                        : `2px solid ${butterflyBlue[900]} !important`,
-                                },
+                                ...(disabled
+                                    ? {}
+                                    : {
+                                        "&:focus-within": {
+                                            border: `2px solid ${butterflyBlue[900]} !important`,
+                                        },
+                                    }),
                             },
-                            "& .phone-input-field:focus": {
-                                "& ~ .flag-dropdown": {
-                                    borderColor: error ? red[900] : butterflyBlue[900],
-                                },
+                            "& .phone-input-field": {
+                                ...(disabled
+                                    ? {}
+                                    : {
+                                        "&:focus": {
+                                            "& ~ .flag-dropdown": {
+                                                borderColor: error ? red[900] : butterflyBlue[900],
+                                            },
+                                        },
+                                    }),
                             },
                             "& .flag-dropdown": {
                                 "&.open": {

package/packages/shared-components/dist/UserProfileMenu/UserProfileMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfileMenu.d.ts","sourceRoot":"","sources":["../../src/UserProfileMenu/UserProfileMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAa/C,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC,GAAG;IACzE,WAAW,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,EAAE,CAAC,EAAE,aAAa,CAAC;QACnB,OAAO,CAAC,EAAE,QAAQ,CAAC;KACpB,EAAE,CAAC;CACL,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,SAAS,GACV,EAAE,oBAAoB,2CA2ItB"}
+{"version":3,"file":"UserProfileMenu.d.ts","sourceRoot":"","sources":["../../src/UserProfileMenu/UserProfileMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAa/C,OAAO,EAGL,KAAK,aAAa,EAElB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC,GAAG;IACzE,WAAW,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,EAAE,CAAC,EAAE,aAAa,CAAC;QACnB,OAAO,CAAC,EAAE,QAAQ,CAAC;KACpB,EAAE,CAAC;CACL,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,SAAS,GACV,EAAE,oBAAoB,2CA0ItB"}

package/packages/shared-components/dist/UserProfileMenu/UserProfileMenu.js

@@ -13,6 +13,7 @@ const utils_1 = require("../utils");
 const UserProfileMenu_styled_1 = require("./UserProfileMenu.styled");
 function UserProfileMenu({ userDetails, menuItems, }) {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const buttonRef = (0, react_1.useRef)(null);
     const { layout } = (0, utils_1.useGetDeviceType)();
     const isDesktop = layout === "desktop";
     const theme = (0, material_1.useTheme)();
@@ -21,29 +22,27 @@ function UserProfileMenu({ userDetails, menuItems, }) {
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
+    const handleClose = () => setAnchorEl(null);
     const { name } = userDetails;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "flex", alignItems: "center", textAlign: "center" }, children: (0, jsx_runtime_1.jsx)(UserProfileMenu_styled_1.IconButtonStyled, { onClick: handleClick, size: "small", "aria-controls": open ? "account-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 1, color: "black", children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: userDetails.avatar, sx: { border: `1px solid ${iron[700]}` } }), isDesktop && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { maxWidth: 150, noWrap: true, children: name }), open ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowUp, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowDown, {})] }))] }) }) }), (0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, sx: {
-                    "& .MuiPaper-root": {
-                        width: "220px",
-                    },
-                }, slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "flex", alignItems: "center" }, children: (0, jsx_runtime_1.jsx)(UserProfileMenu_styled_1.IconButtonStyled, { ref: buttonRef, onClick: handleClick, size: "small", "aria-haspopup": "true", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: 1, color: "black", children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: userDetails.avatar, sx: { border: `1px solid ${iron[700]}` } }), isDesktop && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { maxWidth: 150, noWrap: true, children: name }), open ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowUp, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowDown, {})] }))] }) }) }), open && ((0, jsx_runtime_1.jsx)(material_1.Popover, { open: true, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "right" }, transformOrigin: { vertical: "top", horizontal: "right" }, slotProps: {
                     paper: {
                         elevation: 0,
                         sx: {
+                            width: 220,
                             overflow: "visible",
-                            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
                             mt: 1.5,
+                            px: 0,
+                            py: 0,
+                            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
                             "& .MuiAvatar-root": {
                                 width: 32,
                                 height: 32,
                                 ml: -0.5,
                                 mr: 1,
                             },
-                            "&::before": {
-                                content: "''",
+                            "&:before": {
+                                // eslint-disable-next-line quotes
+                                content: '""',
                                 display: "block",
                                 position: "absolute",
                                 top: 0,
@@ -56,15 +55,13 @@ function UserProfileMenu({ userDetails, menuItems, }) {
                             },
                         },
                     },
-                }, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, children: menuItems.map(({ divider = false, onClick, icon, label, sx = {}, key }) => {
-                    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [divider && (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => {
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { padding: "4px 0" }, children: menuItems.map(({ key, divider, label, icon, sx, onClick }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [divider && (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { onClick: () => {
                                     if ((0, isFunction_1.default)(onClick)) {
                                         onClick();
                                     }
-                                }, children: (icon || label) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "1px", alignItems: "center", width: "100%", flexDirection: "row", sx: { ...sx }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { sx: {
+                                }, children: (icon || label) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "16px", alignItems: "center", width: "100%", flexDirection: "row", sx: { ...sx }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { sx: {
                                                 minWidth: "20px",
                                                 alignItems: "center",
                                                 ...sx,
-                                            }, children: icon }), label && ((0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontSize: "15px" }, children: label }))] })) })] }, `${key}_container`));
-                }) })] }));
+                                            }, children: icon }), label && ((0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontSize: "15px" }, children: label }))] })) })] }, `${key}_container`))) }) }))] }));
 }

package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldFocus.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useFormFieldFocus.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS;;uBA6CtB,gBAAgB,GAAG,IAAI;;;oBAf1D,CAAC,SAAS,WAAW,uBACb,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,YACnB,MAAM,IAAI,gBACN,OAAO;EAyB1B"}
+{"version":3,"file":"useFormFieldFocus.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useFormFieldFocus.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS;;uBA8GtB,gBAAgB,GAAG,IAAI;;;oBAf1D,CAAC,SAAS,WAAW,uBACb,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,YACnB,MAAM,IAAI,gBACN,OAAO;EA8C1B"}