@codezee/sixtify-brahma 0.2.157 → 0.2.158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.157",
+  "version": "0.2.158",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"

package/packages/shared-components/dist/AgGrid/ActionCell/ActionButtonsWrapper.d.ts

@@ -0,0 +1,7 @@
+type ActionButtonsWrapperProps = {
+    readonly children: React.ReactNode;
+    readonly disabled?: boolean;
+};
+export declare function ActionButtonsWrapper({ children, disabled, }: Readonly<ActionButtonsWrapperProps>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ActionButtonsWrapper.d.ts.map

package/packages/shared-components/dist/AgGrid/ActionCell/ActionButtonsWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtonsWrapper.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/ActionCell/ActionButtonsWrapper.tsx"],"names":[],"mappings":"AAEA,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,GACT,EAAE,QAAQ,CAAC,yBAAyB,CAAC,2CA8LrC"}

package/packages/shared-components/dist/AgGrid/ActionCell/ActionButtonsWrapper.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionButtonsWrapper = ActionButtonsWrapper;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function ActionButtonsWrapper({ children, disabled, }) {
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const container = containerRef.current;
+        if (!container || disabled) {
+            return;
+        }
+        const getAllButtons = () => {
+            return Array.from(container.querySelectorAll("button, [role='button'], [tabindex='0']"));
+        };
+        const handleCellKeyDown = (event) => {
+            if (event.key !== "Enter" ||
+                event.shiftKey ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.altKey ||
+                disabled) {
+                return;
+            }
+            const activeElement = document.activeElement;
+            const cell = activeElement?.closest(".ag-cell");
+            if (!cell || !container || !cell.contains(container)) {
+                return;
+            }
+            const isEditing = cell.classList.contains("ag-cell-inline-editing");
+            if (isEditing) {
+                return;
+            }
+            const focusedButton = container.querySelector("button:focus, [role='button']:focus, [tabindex='0']:focus");
+            if (focusedButton) {
+                focusedButton.click();
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            const firstButton = container.querySelector("button, [role='button'], [tabindex='0']");
+            if (firstButton) {
+                event.preventDefault();
+                event.stopPropagation();
+                firstButton.focus();
+            }
+        };
+        const handleEnterOrSpace = (event, target) => {
+            if ((event.key === "Enter" || event.key === " ") &&
+                (target.tagName === "BUTTON" ||
+                    (target.hasAttribute("role") &&
+                        target.getAttribute("role") === "button"))) {
+                event.preventDefault();
+                event.stopPropagation();
+                target.click();
+            }
+        };
+        const handleTabForward = (event, target, allButtons, currentIndex) => {
+            const isLastButton = currentIndex === allButtons.length - 1;
+            if (isLastButton) {
+                event.preventDefault();
+                event.stopPropagation();
+                target.blur();
+                const agCell = container.closest(".ag-cell");
+                if (agCell) {
+                    agCell.focus();
+                }
+                return;
+            }
+            const nextButton = allButtons[currentIndex + 1];
+            if (nextButton) {
+                event.preventDefault();
+                event.stopPropagation();
+                nextButton.focus();
+            }
+        };
+        const handleTabBackward = (event, target, allButtons, currentIndex) => {
+            const isFirstButton = currentIndex === 0;
+            if (isFirstButton) {
+                event.preventDefault();
+                event.stopPropagation();
+                target.blur();
+                const agCell = container.closest(".ag-cell");
+                if (agCell) {
+                    agCell.focus();
+                }
+                return;
+            }
+            const previousButton = allButtons[currentIndex - 1];
+            if (previousButton) {
+                event.preventDefault();
+                event.stopPropagation();
+                previousButton.focus();
+            }
+        };
+        const handleButtonKeyDown = (event) => {
+            const target = event.target;
+            if (!container?.contains(target)) {
+                return;
+            }
+            const allButtons = getAllButtons();
+            const currentIndex = allButtons.indexOf(target);
+            handleEnterOrSpace(event, target);
+            if (event.key === "Tab" && !event.shiftKey && currentIndex !== -1) {
+                handleTabForward(event, target, allButtons, currentIndex);
+            }
+            if (event.key === "Tab" && event.shiftKey && currentIndex !== -1) {
+                handleTabBackward(event, target, allButtons, currentIndex);
+            }
+        };
+        const cell = container.closest(".ag-cell");
+        if (cell) {
+            cell.addEventListener("keydown", handleCellKeyDown, true);
+            container.addEventListener("keydown", handleButtonKeyDown);
+            return () => {
+                cell.removeEventListener("keydown", handleCellKeyDown, true);
+                container.removeEventListener("keydown", handleButtonKeyDown);
+            };
+        }
+    }, [disabled]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: { display: "contents" }, children: children }));
+}

package/packages/shared-components/dist/AgGrid/ActionCell/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ActionCell";
+export * from "./ActionButtonsWrapper";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/AgGrid/ActionCell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/ActionCell/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC"}

package/packages/shared-components/dist/AgGrid/ActionCell/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ActionCell"), exports);
+__exportStar(require("./ActionButtonsWrapper"), exports);

package/packages/shared-components/dist/AgGrid/AgGrid.d.ts

@@ -4,7 +4,7 @@ import { AgGridReact } from "ag-grid-react";
 import type { Ref } from "react";
 import "./registerAgGridModules";
 export declare const showNoRowsOverlay: (api: GridApi<unknown>) => void;
-export declare const defaultPageSize = 50;
+export declare const defaultPageSize = 100;
 export declare const pageSizeOptions: number[];
 export type AgGridProps<T = unknown> = AgGridReactProps<T> & {
     height?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"AgGrid.d.ts","sourceRoot":"","sources":["../../src/AgGrid/AgGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,OAAO,EAGR,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAOjC,OAAO,yBAAyB,CAAC;AAUjC,eAAO,MAAM,iBAAiB,GAAI,KAAK,OAAO,CAAC,OAAO,CAAC,KAAG,IAczD,CAAC;AAEF,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,eAAO,MAAM,eAAe,UAAqB,CAAC;AAGlD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,UAAU,GAAG,KAAK,CAAC,yBAAyB,CAAC,WAAW,CAAC,GAC5D,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAElE,eAAO,MAAM,MAAM,EAwPd,UAAU,CAAC"}
+{"version":3,"file":"AgGrid.d.ts","sourceRoot":"","sources":["../../src/AgGrid/AgGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,OAAO,EAGR,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAOjC,OAAO,yBAAyB,CAAC;AAUjC,eAAO,MAAM,iBAAiB,GAAI,KAAK,OAAO,CAAC,OAAO,CAAC,KAAG,IAczD,CAAC;AAEF,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,eAAO,MAAM,eAAe,UAAqB,CAAC;AAGlD,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,KAAK,UAAU,GAAG,KAAK,CAAC,yBAAyB,CAAC,WAAW,CAAC,GAC5D,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAElE,eAAO,MAAM,MAAM,EAwPd,UAAU,CAAC"}

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

@@ -31,7 +31,7 @@ const showNoRowsOverlay = (api) => {
     }
 };
 exports.showNoRowsOverlay = showNoRowsOverlay;
-exports.defaultPageSize = 50;
+exports.defaultPageSize = 100;
 exports.pageSizeOptions = [20, 50, 100, 200];
 exports.AgGrid = (0, react_1.forwardRef)((props, ref) => {
     const { layout } = (0, utils_1.useGetDeviceType)();

package/packages/shared-components/dist/AgGrid/RedirectionCell/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./RedirectionCell";
+export * from "./ClickableCell";
 //# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/AgGrid/RedirectionCell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/RedirectionCell/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/RedirectionCell/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/packages/shared-components/dist/AgGrid/RedirectionCell/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./RedirectionCell"), exports);
+__exportStar(require("./ClickableCell"), exports);

package/packages/shared-components/dist/AgGrid/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./ActionCell/ActionCell";
+export * from "./ActionCell";
 export * from "./AgGrid";
 export * from "./hooks";
 export * from "./LoadingCell";

package/packages/shared-components/dist/AgGrid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AgGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AgGrid/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/packages/shared-components/dist/AgGrid/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ActionCell/ActionCell"), exports);
+__exportStar(require("./ActionCell"), exports);
 __exportStar(require("./AgGrid"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./LoadingCell"), exports);

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,WAAW,eAAe,4CAuErD,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,WAAW,eAAe,4CA0ErD,CAAC"}

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

@@ -25,10 +25,14 @@ const Breadcrumbs = ({ items }) => {
         }, children: items.map((item) => {
             const { icon, text, onClick } = item;
             if (onClick) {
-                return ((0, jsx_runtime_1.jsxs)(material_1.Link, { underline: "hover", sx: { display: "flex", alignItems: "center" }, onClick: (e) => {
-                        e.preventDefault();
-                        onClick();
-                    }, href: "#", children: [icon && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { sx: {
+                return ((0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: onClick, style: {
+                        background: "none",
+                        border: "none",
+                        padding: 0,
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                    }, children: [icon && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { sx: {
                                 color: butterflyBlue[900],
                             }, children: icon })), text && (0, jsx_runtime_1.jsx)(material_1.Typography, { children: text })] }, (0, uuid_1.v4)()));
             }

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"}

package/packages/shared-components/dist/utils/hooks/useFormFieldFocus.js

@@ -5,6 +5,54 @@ const react_1 = require("react");
 function useFormFieldFocus(isOpen) {
     const inputRef = (0, react_1.useRef)(null);
     const shouldMaintainFocusRef = (0, react_1.useRef)(false);
+    const wasFocusedRef = (0, react_1.useRef)(false);
+    const blurTimeoutRef = (0, react_1.useRef)(null);
+    const [hasInputElement, setHasInputElement] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const inputElement = inputRef.current;
+        if (!inputElement) {
+            return;
+        }
+        const handleFocus = () => {
+            if (blurTimeoutRef.current) {
+                clearTimeout(blurTimeoutRef.current);
+                blurTimeoutRef.current = null;
+            }
+            wasFocusedRef.current = true;
+        };
+        const handleBlur = () => {
+            if (blurTimeoutRef.current) {
+                clearTimeout(blurTimeoutRef.current);
+            }
+            blurTimeoutRef.current = setTimeout(() => {
+                if (document.activeElement !== inputRef.current) {
+                    wasFocusedRef.current = false;
+                }
+                blurTimeoutRef.current = null;
+            }, 200);
+        };
+        inputElement.addEventListener("focus", handleFocus);
+        inputElement.addEventListener("blur", handleBlur);
+        return () => {
+            inputElement.removeEventListener("focus", handleFocus);
+            inputElement.removeEventListener("blur", handleBlur);
+            if (blurTimeoutRef.current) {
+                clearTimeout(blurTimeoutRef.current);
+                blurTimeoutRef.current = null;
+            }
+        };
+    }, [hasInputElement]);
+    (0, react_1.useEffect)(() => {
+        if (wasFocusedRef.current && inputRef.current) {
+            requestAnimationFrame(() => {
+                if (inputRef.current &&
+                    document.activeElement !== inputRef.current &&
+                    wasFocusedRef.current) {
+                    inputRef.current.focus();
+                }
+            });
+        }
+    });
     (0, react_1.useEffect)(() => {
         if (!isOpen && shouldMaintainFocusRef.current && inputRef.current) {
             shouldMaintainFocusRef.current = false;
@@ -18,9 +66,11 @@ function useFormFieldFocus(isOpen) {
         }
     }, [isOpen]);
     const maintainFocus = (0, react_1.useCallback)(() => {
-        requestAnimationFrame(() => {
-            inputRef.current?.focus();
-        });
+        if (inputRef.current) {
+            requestAnimationFrame(() => {
+                inputRef.current?.focus();
+            });
+        }
     }, []);
     const maintainFocusAfterClose = (0, react_1.useCallback)(() => {
         shouldMaintainFocusRef.current = true;
@@ -35,7 +85,25 @@ function useFormFieldFocus(isOpen) {
     }, [maintainFocusAfterClose]);
     const setInputRef = (0, react_1.useCallback)((ref) => {
         if (ref) {
+            const wasInputFocused = document.activeElement === ref ||
+                ref.contains(document.activeElement) ||
+                wasFocusedRef.current;
+            if (wasInputFocused && !wasFocusedRef.current) {
+                wasFocusedRef.current = true;
+            }
             inputRef.current = ref;
+            setHasInputElement(true);
+            if (wasFocusedRef.current) {
+                requestAnimationFrame(() => {
+                    if (inputRef.current && document.activeElement !== inputRef.current) {
+                        inputRef.current.focus();
+                    }
+                });
+            }
+        }
+        else {
+            inputRef.current = null;
+            setHasInputElement(false);
         }
     }, []);
     return {

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

@@ -1 +1 @@
-{"version":3,"file":"useGlobalKeyboardShortcut.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useGlobalKeyboardShortcut.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpD,KAAK,6BAA6B,GAAG;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,QAAQ,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,qDAKvC,6BAA6B,SA8E/B,CAAC"}
+{"version":3,"file":"useGlobalKeyboardShortcut.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useGlobalKeyboardShortcut.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpD,KAAK,6BAA6B,GAAG;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,QAAQ,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,qDAKvC,6BAA6B,SA8H/B,CAAC"}

package/packages/shared-components/dist/utils/hooks/useGlobalKeyboardShortcut.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGlobalKeyboardShortcut = void 0;
+/* eslint-disable quotes */
 const castArray_1 = __importDefault(require("lodash/castArray"));
 const every_1 = __importDefault(require("lodash/every"));
 const react_1 = require("react");
@@ -11,6 +12,32 @@ const useGlobalKeyboardShortcut = ({ key, onTrigger, modifierKeys = "ctrl", with
     (0, react_1.useEffect)(() => {
         // eslint-disable-next-line sonarjs/cognitive-complexity
         const handler = (e) => {
+            const dialog = document.querySelector('[role="dialog"]');
+            if (dialog) {
+                return;
+            }
+            const eventTarget = e.target;
+            const autocompleteRoot = eventTarget?.closest(".MuiAutocomplete-root");
+            if (autocompleteRoot) {
+                const inputRoot = autocompleteRoot.querySelector(".MuiAutocomplete-inputRoot");
+                const isPopupOpen = inputRoot?.getAttribute("aria-expanded") === "true" ||
+                    document.querySelector('[role="listbox"][aria-expanded="true"]') ||
+                    document.querySelector(".MuiAutocomplete-popper[data-popper-placement]") ||
+                    document.querySelector(".MuiAutocomplete-paper");
+                if (isPopupOpen) {
+                    return;
+                }
+            }
+            const activeElement = document.activeElement;
+            const activeAutocompleteRoot = activeElement?.closest(".MuiAutocomplete-root");
+            if (activeAutocompleteRoot) {
+                const activeInputRoot = activeAutocompleteRoot.querySelector(".MuiAutocomplete-inputRoot");
+                const isActivePopupOpen = activeInputRoot?.getAttribute("aria-expanded") === "true" ||
+                    document.querySelector('[role="listbox"][aria-expanded="true"]');
+                if (isActivePopupOpen) {
+                    return;
+                }
+            }
             const normalizedCode = key.length === 1 ? `Key${key.toUpperCase()}` : key;
             const keyMatch = e.code?.toLowerCase() === normalizedCode?.toLowerCase();
             if (withoutModifiers) {