@codezee/sixtify-brahma 0.2.152 → 0.2.153

package/package.json

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

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;AAWjC,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,EA6Pd,UAAU,CAAC"}

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

@@ -11,6 +11,7 @@ const AgGridStyleProvider_1 = require("./AgGridStyleProvider");
 const LoadingOverlay_1 = require("./LoadingOverlay");
 const NoDataOverlay_1 = require("./NoDataOverlay");
 require("./registerAgGridModules");
+const useAgGridFocusManagement_1 = require("./hooks/useAgGridFocusManagement");
 const hideNoRowsOverlay = (api) => {
     if (!api) {
         return;
@@ -146,7 +147,9 @@ exports.AgGrid = (0, react_1.forwardRef)((props, ref) => {
             }
         }
     }, [onFilterChanged, rowModelType, updateNoRowsOverlay]);
-    return ((0, jsx_runtime_1.jsxs)(AgGridStyleProvider_1.AgGridStyleProvider, { className: "ag-theme-quartz ", style: { width: "100%", height, position: "relative" }, children: [(0, jsx_runtime_1.jsx)(ag_grid_react_1.AgGridReact, { ref: ref, theme: "legacy", cacheBlockSize: cacheBlockSize, defaultColDef: {
+    const gridContainerRef = (0, react_1.useRef)(null);
+    (0, useAgGridFocusManagement_1.useAgGridFocusManagement)(gridContainerRef);
+    return ((0, jsx_runtime_1.jsxs)(AgGridStyleProvider_1.AgGridStyleProvider, { ref: gridContainerRef, className: "ag-theme-quartz ", style: { width: "100%", height, position: "relative" }, children: [(0, jsx_runtime_1.jsx)(ag_grid_react_1.AgGridReact, { ref: ref, theme: "legacy", cacheBlockSize: cacheBlockSize, defaultColDef: {
                     ...defaultColumnDef,
                     floatingFilter: enableSecondRowFilter,
                     suppressFloatingFilterButton: enableSecondRowFilter,

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

@@ -1 +1 @@
-{"version":3,"file":"useAgGridCheckBoxSelection.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useAgGridCheckBoxSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9E,KAAK,8BAA8B,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IAC9D,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACxD,gBAAgB,EAAE,CAAC,EAAE,CAAC;IACtB,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B,CAAC;AAqCF,eAAO,MAAM,0BAA0B,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,uEAKlE,8BAA8B,CAAC,CAAC,CAAC;;6BAyCF,WAAW,CAAC,gBAAgB,CAAC;;;CAoJ9D,CAAC"}
+{"version":3,"file":"useAgGridCheckBoxSelection.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useAgGridCheckBoxSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI9E,KAAK,8BAA8B,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IAC9D,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACxD,gBAAgB,EAAE,CAAC,EAAE,CAAC;IACtB,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B,CAAC;AAsCF,eAAO,MAAM,0BAA0B,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,uEAKlE,8BAA8B,CAAC,CAAC,CAAC;;6BAyCF,WAAW,CAAC,gBAAgB,CAAC;;;CAsJ9D,CAAC"}

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

@@ -3,24 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAgGridCheckBoxSelection = void 0;
 const react_1 = require("react");
 const utils_1 = require("../../utils");
-const isDialogOnTop = (gridRef) => {
+const isDialogOnTop = () => {
+    const backdrop = document.querySelector(
+    // eslint-disable-next-line quotes
+    '.MuiBackdrop-root:not([style*="display: none"])');
+    if (backdrop) {
+        return true;
+    }
     const dialogs = document.querySelectorAll(
     // eslint-disable-next-line quotes
     '[role="dialog"], .MuiDialog-root, .MuiModal-root');
     if (dialogs.length === 0) {
         return false;
     }
-    const gridContainer = gridRef.current?.api?.eGridDiv;
-    const gridZIndex = gridContainer ? (0, utils_1.getZIndex)(gridContainer) : 0;
     for (const dialog of Array.from(dialogs)) {
         const dialogElement = dialog;
-        const isVisible = dialogElement.offsetParent !== null ||
-            window.getComputedStyle(dialogElement).display !== "none";
+        const style = window.getComputedStyle(dialogElement);
+        const isVisible = style.display !== "none" &&
+            style.visibility !== "hidden" &&
+            parseFloat(style.opacity) > 0;
         if (isVisible) {
-            const dialogZIndex = (0, utils_1.getZIndex)(dialogElement);
-            if (dialogZIndex > gridZIndex) {
-                return true;
-            }
+            return true;
         }
     }
     return false;
@@ -57,14 +60,15 @@ const useAgGridCheckBoxSelection = ({ gridRef, setSelectedEmployee, currentPageI
         setIsChecked(event.target.checked);
         commonCheckBoxMethod();
     };
-    (0, utils_1.useGlobalKeyboardShortcut)({
-        key: "a",
-        modifierKeys: "ctrl",
-        onTrigger: () => {
-            if (isDialogOnTop(gridRef)) {
+    (0, react_1.useEffect)(() => {
+        const handleCtrlA = (event) => {
+            if (event.key.toLowerCase() !== "a" ||
+                (!event.ctrlKey && !event.metaKey)) {
+                return;
+            }
+            if (isDialogOnTop()) {
                 return;
             }
-            // Check if user is focused on an input field
             const activeElement = document.activeElement;
             const isInputField = activeElement?.tagName === "INPUT" ||
                 activeElement?.tagName === "TEXTAREA" ||
@@ -72,37 +76,33 @@ const useAgGridCheckBoxSelection = ({ gridRef, setSelectedEmployee, currentPageI
             if (isInputField) {
                 return;
             }
-            if (!currentPageItems.length) {
-                return;
-            }
-            const currentPageItemsId = currentPageItems.map(({ id }) => id);
-            if (!gridRef.current) {
+            if (!currentPageItems.length || !gridRef.current) {
                 return;
             }
+            event.preventDefault();
+            event.stopPropagation();
             const api = gridRef.current.api;
+            const currentPageItemsId = currentPageItems.map(({ id }) => id);
             currentPageItems.forEach(({ id }) => {
                 api.getRowNode(id)?.setSelected(true);
             });
             setIsChecked(true);
-            setSelectedEmployee((prev) => {
-                const newArray = [...prev];
-                currentPageItemsId.forEach((id) => {
-                    if (!newArray.includes(id)) {
-                        newArray.push(id);
-                    }
-                });
-                return newArray;
-            });
-        },
-    });
+            const existingIds = new Set(selectedEmployee);
+            const idsToAdd = currentPageItemsId.filter((id) => !existingIds.has(id));
+            setSelectedEmployee([...selectedEmployee, ...idsToAdd]);
+        };
+        document.addEventListener("keydown", handleCtrlA, true);
+        return () => {
+            document.removeEventListener("keydown", handleCtrlA, true);
+        };
+    }, [currentPageItems, gridRef, setSelectedEmployee]);
     (0, utils_1.useGlobalKeyboardShortcut)({
         key: "a",
         modifierKeys: "alt",
         onTrigger: () => {
-            if (isDialogOnTop(gridRef)) {
+            if (isDialogOnTop()) {
                 return;
             }
-            // Check if user is focused on an input field
             const activeElement = document.activeElement;
             const isInputField = activeElement?.tagName === "INPUT" ||
                 activeElement?.tagName === "TEXTAREA" ||

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

@@ -0,0 +1,2 @@
+export declare const useAgGridFocusManagement: (containerRef: React.RefObject<HTMLElement>) => void;
+//# sourceMappingURL=useAgGridFocusManagement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAgGridFocusManagement.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useAgGridFocusManagement.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB,GACnC,cAAc,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,SAuJ3C,CAAC"}

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAgGridFocusManagement = void 0;
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable sonarjs/no-nested-functions */
+const react_1 = require("react");
+const useAgGridFocusManagement = (containerRef) => {
+    const rafRef = (0, react_1.useRef)(null);
+    const secondHeaderCellRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const getSecondHeaderCell = () => {
+            const cached = secondHeaderCellRef.current;
+            if (cached && container.contains(cached)) {
+                return cached;
+            }
+            const headerCells = container.querySelectorAll(".ag-header-cell:not(.ag-column-first)");
+            const cell = headerCells.length > 0 ? headerCells[0] : null;
+            secondHeaderCellRef.current = cell ?? null;
+            return cell ?? null;
+        };
+        const preventUnwantedFocus = () => {
+            if (rafRef.current !== null) {
+                return;
+            }
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = null;
+                const firstHeaderCells = container.querySelectorAll(".ag-header-cell.ag-column-first:not(.ag-floating-filter)");
+                firstHeaderCells.forEach((cell) => {
+                    if (cell.tabIndex !== -1) {
+                        cell.tabIndex = -1;
+                    }
+                    const interactiveElements = cell.querySelectorAll("input, button, select, textarea, [tabindex]:not([tabindex='-1'])");
+                    interactiveElements.forEach((el) => {
+                        if (el.tabIndex !== -1) {
+                            el.tabIndex = -1;
+                        }
+                    });
+                });
+                secondHeaderCellRef.current = null;
+            });
+        };
+        const handleFocusRedirect = (e) => {
+            const target = e.target;
+            if (!container.contains(target)) {
+                return;
+            }
+            const isFirstHeader = target.closest(".ag-header-cell.ag-column-first:not(.ag-floating-filter)") !== null;
+            if (!isFirstHeader) {
+                return;
+            }
+            const secondCell = getSecondHeaderCell();
+            if (!secondCell) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            requestAnimationFrame(() => {
+                secondCell.focus();
+            });
+        };
+        const observer = new MutationObserver((mutations) => {
+            const shouldUpdate = mutations.some((mutation) => {
+                const target = mutation.target;
+                if (target.classList?.contains("ag-header") ||
+                    target.classList?.contains("ag-header-cell") ||
+                    target.classList?.contains("ag-header-row")) {
+                    return true;
+                }
+                const hasHeaderNodes = Array.from(mutation.addedNodes).some((node) => node instanceof HTMLElement &&
+                    (node.classList.contains("ag-header-cell") ||
+                        node.classList.contains("ag-header-row") ||
+                        node.querySelector(".ag-header-cell, .ag-header-row")));
+                return hasHeaderNodes;
+            });
+            if (shouldUpdate) {
+                preventUnwantedFocus();
+            }
+        });
+        const header = container.querySelector(".ag-header");
+        if (header instanceof HTMLElement) {
+            observer.observe(header, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ["class", "tabindex"],
+            });
+        }
+        observer.observe(container, { childList: true });
+        container.addEventListener("focusin", handleFocusRedirect, true);
+        preventUnwantedFocus();
+        return () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+            }
+            observer.disconnect();
+            container.removeEventListener("focusin", handleFocusRedirect, true);
+            secondHeaderCellRef.current = null;
+        };
+    }, [containerRef]);
+};
+exports.useAgGridFocusManagement = useAgGridFocusManagement;

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts

@@ -34,6 +34,7 @@ export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> & O
     setValue?: UseFormSetValue<P>;
     containerProps?: StackProps;
     styling?: "custom" | "default";
+    customOnChange?: (selected: any) => void;
 };
-export declare function Autocomplete<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, withLabel, placeholder, freeSolo, isShowOptionsOnType, isShowSelectAll, isShowAvatar, isShowEmployeeData, shouldCloseOnSelect, onAction, renderOption, getOptionLabel, maxLimit, autoFocus, defaultOption, disableClearable, containerProps, setValue, limitTags, styling, ...restProps }: AutocompleteProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, withLabel, placeholder, freeSolo, isShowOptionsOnType, isShowSelectAll, isShowAvatar, isShowEmployeeData, shouldCloseOnSelect, onAction, renderOption, getOptionLabel, maxLimit, autoFocus, defaultOption, disableClearable, containerProps, setValue, limitTags, styling, customOnChange, ...restProps }: AutocompleteProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Autocomplete.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}

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

@@ -7,19 +7,26 @@ exports.Autocomplete = Autocomplete;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
+const filter_1 = __importDefault(require("lodash/filter"));
+const find_1 = __importDefault(require("lodash/find"));
+const isArray_1 = __importDefault(require("lodash/isArray"));
 const isFunction_1 = __importDefault(require("lodash/isFunction"));
+const isObject_1 = __importDefault(require("lodash/isObject"));
+const isString_1 = __importDefault(require("lodash/isString"));
+const map_1 = __importDefault(require("lodash/map"));
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const Actions_1 = require("../../Actions");
 const Toast_1 = require("../../Toast");
 const Tooltip_1 = require("../../Tooltip");
+const useAutocompleteScrollToSelected_1 = require("../../utils/hooks/useAutocompleteScrollToSelected");
 const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
 const commonStyles_1 = require("../commonStyles");
 const ChipV2_styled_1 = require("./ChipV2.styled");
 const Skeleton_1 = require("./Skeleton");
 const Tags_1 = require("./Tags");
-function Autocomplete({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, withLabel = false, placeholder = "", freeSolo, isShowOptionsOnType = false, isShowSelectAll = true, isShowAvatar = false, isShowEmployeeData = false, shouldCloseOnSelect = false, onAction, renderOption, getOptionLabel, maxLimit, autoFocus = false, defaultOption, disableClearable = required ? true : false, containerProps, setValue, limitTags = 0, styling = "custom", ...restProps }) {
+function Autocomplete({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, withLabel = false, placeholder = "", freeSolo, isShowOptionsOnType = false, isShowSelectAll = true, isShowAvatar = false, isShowEmployeeData = false, shouldCloseOnSelect = false, onAction, renderOption, getOptionLabel, maxLimit, autoFocus = false, defaultOption, disableClearable = required ? true : false, containerProps, setValue, limitTags = 0, styling = "custom", customOnChange, ...restProps }) {
     const { field: { onChange, value, ...restField }, } = (0, react_hook_form_1.useController)({
         name,
         control,
@@ -28,15 +35,56 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
     });
     const { t } = (0, react_i18next_1.useTranslation)();
     const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const convertValueToOption = (val) => {
+        const foundOption = (0, find_1.default)(options, (option) => option.value === val);
+        return foundOption || { label: String(val), value: val };
+    };
+    const convertToOption = (item) => {
+        return (0, isString_1.default)(item) ? { label: item, value: item } : item;
+    };
+    const formatValueForCustomOnChange = (newValue, isMultiple, selectedValues) => {
+        if (!customOnChange) {
+            return;
+        }
+        if (isMultiple && (0, isArray_1.default)(selectedValues)) {
+            const formattedValues = (0, filter_1.default)((0, map_1.default)(selectedValues, convertValueToOption), (option) => option.value !== "select-all");
+            customOnChange(formattedValues);
+        }
+        else if (isMultiple && (0, isArray_1.default)(newValue)) {
+            const formattedValues = (0, map_1.default)((0, filter_1.default)(newValue, (option) => (0, isString_1.default)(option) ||
+                ((0, isObject_1.default)(option) && option?.value !== "select-all")), convertToOption);
+            customOnChange(formattedValues);
+        }
+        else if (!isMultiple) {
+            if ((0, isString_1.default)(newValue)) {
+                customOnChange({ label: newValue, value: newValue });
+            }
+            else if ((0, isObject_1.default)(newValue) && !(0, isArray_1.default)(newValue)) {
+                customOnChange(newValue);
+            }
+            else {
+                customOnChange(null);
+            }
+        }
+    };
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const listboxRef = (0, react_1.useRef)(null);
+    const { setLastSelectedValue } = (0, useAutocompleteScrollToSelected_1.useAutocompleteScrollToSelected)(listboxRef, value);
     const handleSelectAll = (isSelected) => {
         const disabledOptions = options.filter((option) => option.disabled);
         const disabledValues = disabledOptions.map((option) => option.value);
         if (isSelected) {
             const allValues = options.map((option) => option.value);
             onChange(allValues);
+            if (customOnChange) {
+                customOnChange([...options]);
+            }
         }
         else {
             onChange(disabledValues);
+            if (customOnChange) {
+                customOnChange([...disabledOptions]);
+            }
         }
     };
     const isAllSelected = (0, react_1.useMemo)(() => {
@@ -91,7 +139,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
     const { palette: { app: { color }, }, } = (0, material_1.useTheme)();
     const StyledPaper = (0, styles_1.styled)(material_1.Paper)(({ theme }) => ({
         "& .MuiAutocomplete-listbox": {
-            maxHeight: 300,
+            maxHeight: 150,
             overflowY: "auto",
             marginTop: "0px",
             "&::-webkit-scrollbar": {
@@ -109,6 +157,19 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
             },
         },
     }));
+    const CustomPaperComponent = (0, react_1.useCallback)((props) => {
+        const handlePaperRef = (paperElement) => {
+            if (paperElement) {
+                setTimeout(() => {
+                    const listbox = paperElement.querySelector(".MuiAutocomplete-listbox");
+                    if (listbox) {
+                        listboxRef.current = listbox;
+                    }
+                }, 0);
+            }
+        };
+        return ((0, jsx_runtime_1.jsx)(StyledPaper, { ...props, ref: handlePaperRef, children: props.children }));
+    }, []);
     const GroupHeader = (0, styles_1.styled)("div")(({ theme }) => ({
         position: "sticky",
         padding: "4px 10px",
@@ -123,7 +184,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", gap: "10px", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { PopperComponent: material_1.Popper, PaperComponent: StyledPaper, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", gap: "10px", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { PopperComponent: material_1.Popper, PaperComponent: CustomPaperComponent, sx: {
                             "& .MuiAutocomplete-tag": {
                                 backgroundColor: (0, styles_1.alpha)(color.iron[700], 0.6),
                                 color: color.black[900],
@@ -136,7 +197,22 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                 borderRadius: "50%",
                             },
                             width: "100%",
-                        }, disableCloseOnSelect: multiple || !shouldCloseOnSelect, disabled: disabled, freeSolo: freeSolo, ...restProps, ...restField, disableClearable: disableClearable, renderTags: (value, getTagProps) => {
+                        }, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), disableCloseOnSelect: multiple || !shouldCloseOnSelect, disabled: disabled, freeSolo: freeSolo, ...restProps, ...restField, disableClearable: disableClearable, componentsProps: {
+                            popper: {
+                                modifiers: [
+                                    {
+                                        name: "preventOverflow",
+                                        enabled: true,
+                                        options: {
+                                            altAxis: true,
+                                            altBoundary: true,
+                                            tether: true,
+                                            rootBoundary: "document",
+                                        },
+                                    },
+                                ],
+                            },
+                        }, renderTags: (value, getTagProps) => {
                             const visibleTags = limitTags ? value.slice(0, limitTags) : value;
                             const hiddenCount = value.length - visibleTags.length;
                             const hiddenTags = limitTags ? value.slice(limitTags) : value;
@@ -150,7 +226,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                             const { label, avatar, employee_code, punch_code, value } = option;
                             const { key, ...optionProps } = props;
                             const isSelectAll = value === "select-all";
-                            return ((0, jsx_runtime_1.jsx)("li", { ...optionProps, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", alignItems: "center", children: [multiple && ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.BoxStyled, { size: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.CheckStyled, { size: "small" }), indeterminate: !isAllSelected && selectedValue?.length && isSelectAll
+                            return ((0, jsx_runtime_1.jsx)("li", { ...optionProps, "data-option-value": value, tabIndex: -1, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", alignItems: "center", children: [multiple && ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.BoxStyled, { size: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.CheckStyled, { size: "small" }), indeterminate: !isAllSelected && selectedValue?.length && isSelectAll
                                                         ? true
                                                         : false, checked: isAllSelected ? true : selected, sx: {
                                                         marginRight: "8px",
@@ -192,7 +268,9 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                 setInputValue("");
                             }
                             if (withLabel) {
-                                return onChange(newValue);
+                                onChange(newValue);
+                                formatValueForCustomOnChange(newValue, false);
+                                return;
                             }
                             if (multiple && Array.isArray(newValue)) {
                                 const disabledSelectedOptions = options.filter(({ disabled, value: disabledValue }) => disabled && value?.includes(disabledValue));
@@ -204,6 +282,8 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                 const enabledNewValues = newValue
                                     .map((option) => typeof option === "string" ? option : option.value)
                                     .filter((val) => !disabledSelectedOptions.some((d) => d.value === val));
+                                const lastSelected = enabledNewValues[enabledNewValues.length - 1];
+                                setLastSelectedValue(lastSelected ?? null);
                                 const mergedValues = [
                                     ...disabledSelectedOptions.map(({ value }) => value),
                                     ...enabledNewValues,
@@ -214,12 +294,19 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                                     });
                                     return;
                                 }
-                                return onChange(mergedValues);
+                                onChange(mergedValues);
+                                formatValueForCustomOnChange(newValue, true, mergedValues);
+                                return;
                             }
                             if (typeof newValue === "string") {
-                                return onChange(newValue ?? null);
+                                onChange(newValue ?? null);
+                                formatValueForCustomOnChange(newValue, false);
+                                return;
                             }
-                            onChange(newValue && !Array.isArray(newValue) ? newValue.value : null);
+                            const finalValue = newValue && !Array.isArray(newValue) ? newValue.value : null;
+                            onChange(finalValue);
+                            formatValueForCustomOnChange(newValue, false);
+                            setLastSelectedValue(finalValue);
                         }, groupBy: (option) => option.heading ?? "", renderGroup: (params) => {
                             if (!params.group) {
                                 return (0, jsx_runtime_1.jsx)(material_1.Box, { children: params.children });

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

@@ -0,0 +1,5 @@
+export declare function useAutocompleteScrollToSelected(listboxRef: React.RefObject<HTMLUListElement>, value: string | number | (string | number)[] | null, delay?: number): {
+    lastSelectedValueRef: import("react").MutableRefObject<string | number | null>;
+    setLastSelectedValue: (selectedValue: string | number | null) => void;
+};
+//# sourceMappingURL=useAutocompleteScrollToSelected.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAutocompleteScrollToSelected.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useAutocompleteScrollToSelected.ts"],"names":[],"mappings":"AAEA,wBAAgB,+BAA+B,CAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAC7C,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,EACnD,KAAK,GAAE,MAAY;;0CAyCqB,MAAM,GAAG,MAAM,GAAG,IAAI;EAI/D"}

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutocompleteScrollToSelected = useAutocompleteScrollToSelected;
+const react_1 = require("react");
+function useAutocompleteScrollToSelected(listboxRef, value, delay = 300) {
+    const lastSelectedValueRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (lastSelectedValueRef.current === null || !listboxRef.current) {
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            const listbox = listboxRef.current;
+            if (!listbox) {
+                lastSelectedValueRef.current = null;
+                return;
+            }
+            const selector = `[data-option-value="${lastSelectedValueRef.current}"]`;
+            const optionElement = listbox.querySelector(selector);
+            if (optionElement) {
+                requestAnimationFrame(() => {
+                    optionElement.scrollIntoView({
+                        block: "nearest",
+                        behavior: "smooth",
+                    });
+                });
+            }
+            lastSelectedValueRef.current = null;
+        }, delay);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [value, delay, listboxRef]);
+    return {
+        lastSelectedValueRef,
+        setLastSelectedValue: (selectedValue) => {
+            lastSelectedValueRef.current = selectedValue;
+        },
+    };
+}