npm - @codezee/sixtify-brahma - Versions diffs - 0.2.169 → 0.2.171 - Mend

@codezee/sixtify-brahma 0.2.169 → 0.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/package.json CHANGED Viewed

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

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

@@ -10,12 +10,20 @@ export type AgGridProps<T = unknown> = AgGridReactProps<T> & {
     height?: string;
     ref?: Ref<AgGridReact<T>>;
     totalRecords?: number;
+    onSelectAllClick?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     overlayNoRowsTemplate?: string;
     loadingOverlayMessage?: string;
     selectedItems?: number;
     enableSecondRowFilter?: boolean;
     disableKeyBoardEvent?: boolean;
     enableFloatingFilter?: boolean;
+    isSelectAllVisible?: boolean;
+    selectAllMessage?: {
+        show: boolean;
+        text: string;
+        buttonText: string;
+        onButtonClick: () => void;
+    };
 };
 type AgGridType = React.ForwardRefExoticComponent<AgGridProps> & (<GenericType>(props: AgGridProps<GenericType>) => JSX.Element);
 export declare const AgGrid: AgGridType;

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

	@@ -1 +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,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,~~EAqPd~~,UAAU,CAAC"}
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;AAWjC,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,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE,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;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE;QACjB,IAAI,EAAE,OAAO,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,aAAa,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;CACH,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,EAuRd,UAAU,CAAC"}

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

@@ -11,6 +11,7 @@ const AgGridStyleProvider_1 = require("./AgGridStyleProvider");
 const LoadingOverlay_1 = require("./LoadingOverlay");
 const NoDataOverlay_1 = require("./NoDataOverlay");
 require("./registerAgGridModules");
+const Button_1 = require("../Button");
 const hideNoRowsOverlay = (api) => {
     if (!api) {
         return;
@@ -35,9 +36,9 @@ exports.defaultPageSize = 100;
 exports.pageSizeOptions = [20, 50, 100, 200];
 exports.AgGrid = (0, react_1.forwardRef)((props, ref) => {
     const { layout } = (0, utils_1.useGetDeviceType)();
-    const { height = "597px", rowHeight = 40, rowModelType = "infinite", defaultColDef, rowBuffer = 5,
+    const { height = "597px", rowHeight = 50, rowModelType = "infinite", defaultColDef, rowBuffer = 5,
     // eslint-disable-next-line quotes
-    overlayNoRowsTemplate = '<span class="ag-overlay-no-rows-center">No Data Found</span>', pagination = false, enableSecondRowFilter, disableKeyBoardEvent = false, onModelUpdated, onFirstDataRendered, onViewportChanged, onFilterChanged, paginationPageSize: paginationPageSizeProp, cacheBlockSize: cacheBlockSizeProp, infiniteInitialRowCount: infiniteInitialRowCountProp, loading: gridLoading = false, ...rest } = props;
+    overlayNoRowsTemplate = '<span class="ag-overlay-no-rows-center">No Data Found</span>', pagination = false, enableSecondRowFilter, disableKeyBoardEvent, isSelectAllVisible = false, onSelectAllClick, selectAllMessage, onModelUpdated, onFirstDataRendered, onViewportChanged, onFilterChanged, paginationPageSize: paginationPageSizeProp, cacheBlockSize: cacheBlockSizeProp, infiniteInitialRowCount: infiniteInitialRowCountProp, loading: gridLoading = false, ...rest } = props;
     const resolvedPaginationPageSize = paginationPageSizeProp ?? exports.defaultPageSize;
     const cacheBlockSize = cacheBlockSizeProp ?? resolvedPaginationPageSize;
     const infiniteInitialRowCount = infiniteInitialRowCountProp ?? resolvedPaginationPageSize;
@@ -75,7 +76,7 @@ exports.AgGrid = (0, react_1.forwardRef)((props, ref) => {
                 if (datasource) {
                     setTimeout(() => {
                         const displayedCount = api.getDisplayedRowCount();
-                        const renderedNodes = api.getRenderedNodes().length || 0;
+                        const renderedNodes = api.getRenderedNodes().length;
                         updateNoRowsOverlay(api, displayedCount === 0 && renderedNodes === 0);
                     }, 50);
                 }
@@ -83,7 +84,7 @@ exports.AgGrid = (0, react_1.forwardRef)((props, ref) => {
             else {
                 setTimeout(() => {
                     const displayedCount = api.getDisplayedRowCount();
-                    const renderedNodes = api.getRenderedNodes().length || 0;
+                    const renderedNodes = api.getRenderedNodes().length;
                     updateNoRowsOverlay(api, displayedCount === 0 && renderedNodes === 0);
                 }, 50);
             }
@@ -152,10 +153,13 @@ exports.AgGrid = (0, react_1.forwardRef)((props, ref) => {
                     suppressFloatingFilterButton: enableSecondRowFilter,
                     filterParams: {
                         ...defaultColumnDef.filterParams,
-                        buttons: disableKeyBoardEvent ? ["apply", "reset"] : [],
+                        buttons: !enableSecondRowFilter || disableKeyBoardEvent
+                            ? ["apply", "reset"]
+                            : [],
                     },
                 }, rowHeight: rowHeight, rowModelType: rowModelType, rowBuffer: rowBuffer, infiniteInitialRowCount: infiniteInitialRowCount, overlayNoRowsTemplate: overlayNoRowsTemplate, loadingOverlayComponent: LoadingOverlay_1.LoadingOverlay, loading: gridLoading, noRowsOverlayComponent: NoDataOverlay_1.NoDataOverlay, suppressNoRowsOverlay: rowModelType === "infinite" || gridLoading, pagination: pagination, onModelUpdated: handleModelUpdated, onFirstDataRendered: handleFirstDataRendered, onViewportChanged: handleViewportChanged, onFilterChanged: handleFilterChanged, ...(pagination
                     ? { paginationPageSize: resolvedPaginationPageSize }
-                    : {}), paginationPageSizeSelector: pagination ? exports.pageSizeOptions : false, ...rest }), !!props.selectedItems && pagination && ((0, jsx_runtime_1.jsx)(material_1.Box, { position: "absolute", bottom: "15px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { paddingLeft: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: ["Selected Rows ", props.selectedItems] }) }) }))] }));
+                    : {}), paginationPageSizeSelector: pagination ? exports.pageSizeOptions : false, ...rest }), isSelectAllVisible && (onSelectAllClick || selectAllMessage) && ((0, jsx_runtime_1.jsx)(material_1.Box, { position: "absolute", bottom: selectAllMessage?.show ? "10px" : "15px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { paddingLeft: selectAllMessage?.text ? "20px" : "0px" }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: selectAllMessage?.show ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: selectAllMessage.text }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "small", onClick: selectAllMessage.onButtonClick, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: selectAllMessage.buttonText }) })] })) : (!!props.selectedItems &&
+                            pagination && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: ["Selected Rows ", props.selectedItems] }))) }) }) }))] }));
 });
 exports.AgGrid.displayName = "AgGrid";

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

@@ -4,4 +4,5 @@ export * from "./useAgGridKeyboardShortcuts";
 export * from "./useAgGridRowSelectionConfig";
 export * from "./useAgGridSummaryRow";
 export * from "./useAgGridSummaryRowUpdate";
+export * from "./useAgGridSelection";
 //# sourceMappingURL=index.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC"}

package/packages/shared-components/dist/AgGrid/hooks/index.js CHANGED Viewed

@@ -20,3 +20,4 @@ __exportStar(require("./useAgGridKeyboardShortcuts"), exports);
 __exportStar(require("./useAgGridRowSelectionConfig"), exports);
 __exportStar(require("./useAgGridSummaryRow"), exports);
 __exportStar(require("./useAgGridSummaryRowUpdate"), exports);
+__exportStar(require("./useAgGridSelection"), exports);

package/packages/shared-components/dist/AgGrid/hooks/useAgGridSelection.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import type { IGetRowsParams } from "ag-grid-community";
+import type { AgGridReact } from "ag-grid-react";
+import type { RefObject } from "react";
+type UseAgGridSelectionArgs<T extends {
+    id: string;
+}> = {
+    gridRef: RefObject<AgGridReact<T>>;
+    currentPageItems: T[];
+    totalRecords: number;
+    selectedEmployee: string[];
+    fetchAll: (params: IGetRowsParams) => Promise<{
+        list: T[];
+        totalCount: number;
+        selectableCount?: number;
+    }>;
+    getExtraParams: () => Record<string, unknown>;
+    isRowSelectable?: (params: {
+        data: T;
+    }) => boolean;
+};
+type UseAgGridSelectionReturn<T extends {
+    id: string;
+}> = {
+    selectedIds: string[];
+    allDataCache: T[] | null;
+    setLastQueryParams: (params: IGetRowsParams) => void;
+    selectCurrentPage: () => void;
+    deselectCurrentPage: () => void;
+    clearSelection: () => void;
+    onSelectionChanged: () => void;
+    checkboxState: {
+        checked: boolean;
+        indeterminate: boolean;
+    };
+    message: {
+        show: boolean;
+        text: string;
+        buttonText: string;
+        onButtonClick: () => void;
+    } | null;
+};
+export declare const useAgGridSelection: <T extends {
+    id: string;
+}>({ gridRef, currentPageItems, totalRecords, selectedEmployee, fetchAll, getExtraParams, isRowSelectable, }: UseAgGridSelectionArgs<T>) => UseAgGridSelectionReturn<T>;
+export {};
+//# sourceMappingURL=useAgGridSelection.d.ts.map

package/packages/shared-components/dist/AgGrid/hooks/useAgGridSelection.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useAgGridSelection.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useAgGridSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,sBAAsB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IACtD,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,gBAAgB,EAAE,CAAC,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,OAAO,CAAC;QAC5C,IAAI,EAAE,CAAC,EAAE,CAAC;QACV,UAAU,EAAE,MAAM,CAAC;QACnB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IACH,cAAc,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC;CACpD,CAAC;AAEF,KAAK,wBAAwB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IACxD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,YAAY,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC;IACzB,kBAAkB,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE;QACb,OAAO,EAAE,OAAO,CAAC;QACjB,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;IACF,OAAO,EAAE;QACP,IAAI,EAAE,OAAO,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,aAAa,EAAE,MAAM,IAAI,CAAC;KAC3B,GAAG,IAAI,CAAC;CACV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,2GAQ1D,sBAAsB,CAAC,CAAC,CAAC,KAAG,wBAAwB,CAAC,CAAC,CAuPxD,CAAC"}

package/packages/shared-components/dist/AgGrid/hooks/useAgGridSelection.js ADDED Viewed

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAgGridSelection = void 0;
+const react_1 = require("react");
+const useAgGridSelection = ({ gridRef, currentPageItems, totalRecords, selectedEmployee, fetchAll, getExtraParams, isRowSelectable, }) => {
+    const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
+    const [allDataCache, setAllDataCache] = (0, react_1.useState)(null);
+    const [selectableCount, setSelectableCount] = (0, react_1.useState)(null);
+    const lastQueryParamsRef = (0, react_1.useRef)(null);
+    const currentPageState = (0, react_1.useMemo)(() => {
+        if (!currentPageItems.length) {
+            return { selected: 0, checked: false, indeterminate: false };
+        }
+        // Filter to only selectable items for checkbox state calculation
+        const selectableItems = isRowSelectable
+            ? currentPageItems.filter((item) => isRowSelectable({ data: item }))
+            : currentPageItems;
+        if (!selectableItems.length) {
+            return { selected: 0, checked: false, indeterminate: false };
+        }
+        const selected = selectableItems.filter(({ id }) => selectedIds.includes(id)).length;
+        return {
+            selected,
+            checked: selected === selectableItems.length,
+            indeterminate: selected > 0 && selected < selectableItems.length,
+        };
+    }, [currentPageItems, selectedIds, isRowSelectable]);
+    const syncGridSelection = (0, react_1.useCallback)(() => {
+        if (!gridRef.current) {
+            return;
+        }
+        const api = gridRef.current.api;
+        currentPageItems.forEach((item) => {
+            const node = api.getRowNode(item.id);
+            if (isRowSelectable && !isRowSelectable({ data: item })) {
+                return;
+            }
+            const shouldBeSelected = selectedIds.includes(item.id);
+            if (node && node.isSelected() !== shouldBeSelected) {
+                node.setSelected(shouldBeSelected, undefined, "api");
+            }
+        });
+    }, [gridRef, currentPageItems, selectedIds, isRowSelectable]);
+    (0, react_1.useEffect)(() => {
+        syncGridSelection();
+    }, [syncGridSelection]);
+    const selectCurrentPage = (0, react_1.useCallback)(() => {
+        // Filter to only selectable rows if isRowSelectable is provided
+        const selectableItems = isRowSelectable
+            ? currentPageItems.filter((item) => isRowSelectable({ data: item }))
+            : currentPageItems;
+        const currentPageIds = selectableItems.map(({ id }) => id);
+        setSelectedIds((prev) => {
+            const newSet = new Set([...prev, ...currentPageIds]);
+            return Array.from(newSet);
+        });
+    }, [currentPageItems, isRowSelectable]);
+    const deselectCurrentPage = (0, react_1.useCallback)(() => {
+        const currentPageIds = new Set(currentPageItems.map(({ id }) => id));
+        setSelectedIds((prev) => prev.filter((id) => !currentPageIds.has(id)));
+    }, [currentPageItems]);
+    const selectAll = (0, react_1.useCallback)(async (params) => {
+        const extraParams = getExtraParams();
+        const base = params ??
+            lastQueryParamsRef.current ??
+            { startRow: 0, endRow: totalRecords || 0 };
+        const { list, totalCount, selectableCount: apiSelectableCount, } = await fetchAll({
+            ...base,
+            startRow: 0,
+            endRow: totalRecords ?? 0,
+            ...extraParams,
+            quickFilter: null,
+        });
+        const selectableList = isRowSelectable
+            ? list.filter((item) => isRowSelectable({ data: item }))
+            : list;
+        const allIds = Array.from(new Set(selectableList.map(({ id }) => id)));
+        setAllDataCache(list);
+        if (apiSelectableCount !== undefined) {
+            setSelectableCount(apiSelectableCount);
+        }
+        setSelectedIds(allIds);
+        if (totalRecords === 0 && totalCount) {
+            gridRef.current?.api?.setRowCount(totalCount, false);
+        }
+    }, [fetchAll, totalRecords, gridRef, isRowSelectable, getExtraParams]);
+    const clearSelection = (0, react_1.useCallback)(() => {
+        setSelectedIds([]);
+        setAllDataCache(null);
+        setSelectableCount(null);
+        if (gridRef.current) {
+            gridRef.current.api.deselectAll();
+        }
+    }, [gridRef]);
+    const onSelectionChanged = (0, react_1.useCallback)(() => {
+        if (!gridRef.current) {
+            return;
+        }
+        const selectedRows = gridRef.current.api.getSelectedRows();
+        const selectableSelectedRows = isRowSelectable
+            ? selectedRows.filter((row) => isRowSelectable({ data: row }))
+            : selectedRows;
+        const selectedRowIds = selectableSelectedRows.map(({ id }) => id);
+        const currentPageIds = currentPageItems.map(({ id }) => id);
+        setSelectedIds((prev) => {
+            const base = prev.filter((id) => !currentPageIds.includes(id));
+            const merged = new Set([...base, ...selectedRowIds]);
+            return Array.from(merged);
+        });
+    }, [gridRef, currentPageItems, isRowSelectable]);
+    const setLastQueryParams = (0, react_1.useCallback)((params) => {
+        lastQueryParamsRef.current = params;
+    }, []);
+    const selectedRecords = selectedEmployee.length;
+    const totalRecordsCount = allDataCache?.length && allDataCache.length > totalRecords
+        ? allDataCache.length
+        : totalRecords;
+    // Use selectableCount from API if available (after first select all), otherwise use total records
+    const displayRecordsCount = selectableCount ?? totalRecordsCount;
+    const message = (0, react_1.useMemo)(() => {
+        if (!selectedRecords) {
+            return null;
+        }
+        if (displayRecordsCount === selectedRecords) {
+            return {
+                show: true,
+                text: `All ${displayRecordsCount} rows are selected.`,
+                buttonText: "Clear selection",
+                onButtonClick: clearSelection,
+            };
+        }
+        return {
+            show: true,
+            text: `${selectedRecords} rows selected.`,
+            buttonText: `Select all ${displayRecordsCount} rows`,
+            onButtonClick: () => void selectAll(),
+        };
+    }, [selectedRecords, displayRecordsCount, clearSelection, selectAll]);
+    (0, react_1.useEffect)(() => {
+        const handleKeyDown = (event) => {
+            if (event.key.toLowerCase() === "a" && (event.ctrlKey || event.metaKey)) {
+                const activeElement = document.activeElement;
+                const isInputField = activeElement?.tagName === "INPUT" ||
+                    activeElement?.tagName === "TEXTAREA" ||
+                    activeElement?.contentEditable === "true";
+                if (isInputField || !currentPageItems.length) {
+                    return;
+                }
+                event.preventDefault();
+                selectCurrentPage();
+            }
+            if (event.key.toLowerCase() === "a" && event.altKey) {
+                const activeElement = document.activeElement;
+                const isInputField = activeElement?.tagName === "INPUT" ||
+                    activeElement?.tagName === "TEXTAREA" ||
+                    activeElement?.contentEditable === "true";
+                if (isInputField || !currentPageItems.length) {
+                    return;
+                }
+                event.preventDefault();
+                deselectCurrentPage();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown, true);
+        return () => document.removeEventListener("keydown", handleKeyDown, true);
+    }, [currentPageItems.length, selectCurrentPage, deselectCurrentPage]);
+    return {
+        selectedIds,
+        allDataCache,
+        setLastQueryParams,
+        selectCurrentPage,
+        deselectCurrentPage,
+        clearSelection,
+        onSelectionChanged,
+        checkboxState: {
+            checked: currentPageState.checked,
+            indeterminate: currentPageState.indeterminate,
+        },
+        message,
+    };
+};
+exports.useAgGridSelection = useAgGridSelection;

package/packages/shared-components/dist/AgGrid/hooks/useCellEnterClick.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCellEnterClick.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useCellEnterClick.ts"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,WAAW,EACX,YAAY,GACb,EAAE,qBAAqB,~~QA8DvB~~"}
1	+ {"version":3,"file":"useCellEnterClick.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useCellEnterClick.ts"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,WAAW,EACX,YAAY,GACb,EAAE,qBAAqB,QAuEvB"}

package/packages/shared-components/dist/AgGrid/hooks/useCellEnterClick.js CHANGED Viewed

@@ -9,6 +9,11 @@ function useCellEnterClick({ buttonRef, disabled, popoverOpen, onPressEnter, })
             return;
         }
         const handleKeyDown = (event) => {
+            if (document.querySelector(
+            // eslint-disable-next-line quotes
+            '.MuiDialog-root, [role="dialog"], .MuiPopover-root, .MuiModal-root')) {
+                return;
+            }
             const keyIsClickTrigger = event.key === "Enter" || event.key === " ";
             if (!keyIsClickTrigger ||
                 event.shiftKey ||

package/packages/shared-components/dist/Button/SplitButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../src/Button/SplitButton.tsx"],"names":[],"mappings":"AACA,OAAO,~~EAWL~~,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAElC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,0IAgBzB,gBAAgB,~~mDAoLlB~~,CAAC"}
1	+ {"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../src/Button/SplitButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAYL,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAElC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,0IAgBzB,gBAAgB,mDAsNlB,CAAC"}

package/packages/shared-components/dist/Button/SplitButton.js CHANGED Viewed

@@ -57,11 +57,21 @@ const SplitButton = ({ icon, label, size = "medium", onClick, menuItems = [], sx
         setOpen((prev) => !prev);
     };
     const handleClose = (event) => {
-        if (anchorRef.current?.contains(event.target)) {
+        if (anchorRef.current?.contains(event.target) ||
+            // eslint-disable-next-line quotes
+            event.target?.closest('[role="menu"]')) {
             return;
         }
         setOpen(false);
     };
+    const handleMenuKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setOpen(false);
+            anchorRef.current?.querySelector("button[aria-expanded]")?.focus();
+        }
+        // Allow Tab to work naturally without closing the menu
+    };
     const handleMainClick = () => {
         if (disabled || effectiveMain.disabled || loading) {
             return;
@@ -79,17 +89,22 @@ const SplitButton = ({ icon, label, size = "medium", onClick, menuItems = [], sx
         }
         setOpen(false);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.ButtonGroup, { ref: anchorRef, sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.ButtonGroup, { ref: anchorRef, id: "split-button", sx: {
                     boxShadow: "none",
                     border: "none !important",
                     position: "relative",
                     minWidth: "60px",
                     ...containerSx,
-                }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: variant, size: size, startIcon: !loading ? effectiveMain.icon : null, disabled: disabled || effectiveMain.disabled, onClick: handleMainClick, sx: sx, children: loading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 18 }) : effectiveMain.label }), filteredMenuItems.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, { size: size, variant: variant, disabled: disabled || arrowDisabled || loading, "aria-controls": open ? "split-button-menu" : undefined, "aria-expanded": open ? "true" : undefined, onClick: handleToggle, sx: { width: "32px", minWidth: "32px", ...sx }, children: (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {}) }))] }), (0, jsx_runtime_1.jsx)(material_1.Popper, { open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true, placement: "bottom-end", sx: { zIndex: 1300 }, children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, { ...TransitionProps, style: {
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: variant, size: size, startIcon: !loading ? effectiveMain.icon : null, disabled: disabled || effectiveMain.disabled, onClick: handleMainClick, sx: sx, children: loading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 18 }) : effectiveMain.label }), filteredMenuItems.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, { size: size, variant: variant, disabled: disabled || arrowDisabled || loading, "aria-controls": open ? "split-button-menu" : undefined, "aria-expanded": open ? "true" : undefined, "aria-haspopup": "true", onClick: handleToggle, onKeyDown: (e) => {
+                            if (e.key === "ArrowDown" && !open) {
+                                e.preventDefault();
+                                setOpen(true);
+                            }
+                        }, sx: { width: "32px", minWidth: "32px", ...sx }, children: (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {}) }))] }), (0, jsx_runtime_1.jsx)(material_1.Popper, { open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true, placement: "bottom-end", sx: { zIndex: 1300 }, children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(material_1.Grow, { ...TransitionProps, style: {
                         transformOrigin: placement === "bottom" ? "center top" : "center bottom",
-                    }, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 3, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClose, children: (0, jsx_runtime_1.jsx)(material_1.MenuList, { sx: { padding: "2px" }, children: filteredMenuItems.map((item) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: item.disabled, sx: {
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 3, children: (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClose, children: (0, jsx_runtime_1.jsx)(material_1.MenuList, { sx: { padding: "2px" }, id: "split-button-menu", autoFocusItem: open, onKeyDown: handleMenuKeyDown, role: "menu", "aria-labelledby": "split-button", children: filteredMenuItems.map((item) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemButton, { disabled: item.disabled, sx: {
                                                 padding: "5px 16px 5px 10px",
-                                            }, onClick: () => handleMenuItemClick(item), children: item.label }), item.divider && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
+                                            }, onClick: () => handleMenuItemClick(item), children: (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontSize: "15px" }, children: item.label }) }), item.divider && ((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: {
                                                 border: "none",
                                                 borderTop: "1px solid #eee",
                                                 margin: 0,

package/packages/shared-components/dist/Chips/FilterPill.d.ts CHANGED Viewed

@@ -6,6 +6,11 @@ type FilterPillProps = {
     onClick?: (e: {
         currentTarget: HTMLDivElement | null;
     }) => void;
+    isFocused?: boolean;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    tabIndex?: number;
 };
 export declare const FilterPill: React.ForwardRefExoticComponent<FilterPillProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/packages/shared-components/dist/Chips/FilterPill.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/Chips/FilterPill.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,KAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,aAAa,EAAE,cAAc,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;~~CACjE~~,CAAC;AAEF,eAAO,MAAM,UAAU,~~wFAiCtB~~,CAAC"}
1	+ {"version":3,"file":"FilterPill.d.ts","sourceRoot":"","sources":["../../src/Chips/FilterPill.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,KAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,aAAa,EAAE,cAAc,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,wFA2DtB,CAAC"}

package/packages/shared-components/dist/Chips/FilterPill.js CHANGED Viewed

@@ -6,22 +6,32 @@ const material_1 = require("@mui/material");
 const icons_1 = require("@mui/x-date-pickers/icons");
 const react_1 = require("react");
 const Chips_1 = require("../Chips");
-exports.FilterPill = (0, react_1.forwardRef)(({ onDelete, label, onClick }, ref) => {
+exports.FilterPill = (0, react_1.forwardRef)(({ onDelete, label, onClick, isFocused = false, onKeyDown, onFocus, onBlur, tabIndex = 0, }, ref) => {
     const theme = (0, material_1.useTheme)();
-    const { black, sapphireBlue, iron } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(Chips_1.Chip, { ref: ref, label: label, variant: "filled", deleteIcon: onDelete && (0, jsx_runtime_1.jsx)(icons_1.ClearIcon, {}), sx: {
+    const { black, butterflyBlue, iron } = theme.palette.app.color;
+    return ((0, jsx_runtime_1.jsx)(Chips_1.Chip, { ref: ref, label: label, variant: "filled", deleteIcon: onDelete && (0, jsx_runtime_1.jsx)(icons_1.ClearIcon, {}), tabIndex: tabIndex, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, sx: {
             maxWidth: "200px",
             borderRadius: "20px",
             color: black[900],
-            backgroundColor: `${sapphireBlue[400]} !important`,
+            backgroundColor: `${butterflyBlue[600]} !important`,
             "&:hover": {
-                backgroundColor: sapphireBlue[500],
+                backgroundColor: (0, material_1.darken)(butterflyBlue[600], 0.1),
             },
+            "&:focus-visible": {
+                outline: `1px solid ${butterflyBlue[600]}`,
+                outlineOffset: "2px",
+                backgroundColor: `${(0, material_1.darken)(butterflyBlue[600], 0.1)} !important`,
+            },
+            ...(isFocused && {
+                outline: `2px solid ${butterflyBlue[600]}`,
+                outlineOffset: "2px",
+                backgroundColor: `${(0, material_1.darken)(butterflyBlue[600], 0.1)} !important`,
+            }),
             "& .MuiChip-deleteIcon": {
                 color: iron[800],
                 "&:hover": {
                     color: iron[900],
-                    backgroundColor: sapphireBlue[400],
+                    backgroundColor: butterflyBlue[600],
                 },
             },
         }, onDelete: onDelete, onClick: onClick }));

package/packages/shared-components/dist/Dialog/DeleteDialog.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DeleteDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DeleteDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;~~AAE~~/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,sDAM1B,iBAAiB,~~4CAiCnB~~,CAAC"}
1	+ {"version":3,"file":"DeleteDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DeleteDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,sDAM1B,iBAAiB,4CAyCnB,CAAC"}

package/packages/shared-components/dist/Dialog/DeleteDialog.js CHANGED Viewed

@@ -10,7 +10,15 @@ const material_1 = require("@mui/material");
 const Button_1 = require("../Button");
 const Layouts_1 = require("../Layouts");
 const Dialog_1 = require("./Dialog");
+const utils_1 = require("../utils");
 const DeleteDialog = ({ title, open, isDeleteLoading, onDelete, onClose, }) => {
+    (0, utils_1.useGlobalKeyboardShortcut)({
+        key: "escape",
+        withoutModifiers: true,
+        onTrigger: () => {
+            onClose();
+        },
+    });
     return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { isDeleteDialog: true, maxWidth: "xs", isHideCloseIcon: true, isHideDividers: true, open: open, actions: (0, jsx_runtime_1.jsxs)(Layouts_1.ButtonContainer, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { disabled: isDeleteLoading, onClick: onClose, variant: "outlined", children: "Cancel" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onDelete, color: "error", loading: isDeleteLoading, children: "Delete" })] }), children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", children: [(0, jsx_runtime_1.jsx)(InfoTwoTone_1.default, { color: "error", sx: { mt: "1px" } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", fontWeight: 700, children: title })] }) }));
 };
 exports.DeleteDialog = DeleteDialog;

package/packages/shared-components/dist/Dialog/Dialog.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,WAAW,IAAI,cAAc,EAEnC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,cAAc,GAAG;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kGASpB,WAAW,~~4CAiDb~~,CAAC"}
1	+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,WAAW,IAAI,cAAc,EAEnC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,cAAc,GAAG;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,kGASpB,WAAW,4CAqDb,CAAC"}

package/packages/shared-components/dist/Dialog/Dialog.js CHANGED Viewed

@@ -9,6 +9,9 @@ const HighlightOff_1 = __importDefault(require("@mui/icons-material/HighlightOff
 const material_1 = require("@mui/material");
 const Dialog = ({ title, isHideCloseIcon = false, isHideDividers = false, children, onClose, isDeleteDialog = false, actions, ...props }) => {
     const handleKeyDown = (event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
         if (event.key === "Escape" && onClose) {
             onClose(event, "escapeKeyDown");
         }

package/packages/shared-components/dist/FilterList/DateRangePickerPopUp.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangePickerPopUp.d.ts","sourceRoot":"","sources":["../../src/FilterList/DateRangePickerPopUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAYlD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,KAAK,yBAAyB,GAAG,OAAO,CACtC,iBAAiB,CAAC,YAAY,CAAC,GAAG;IAChC,OAAO,EAAE,QAAQ,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;CACf,CACF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,+EASlC,yBAAyB,~~4CAgE3B~~,CAAC"}
1	+ {"version":3,"file":"DateRangePickerPopUp.d.ts","sourceRoot":"","sources":["../../src/FilterList/DateRangePickerPopUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAYlD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,KAAK,yBAAyB,GAAG,OAAO,CACtC,iBAAiB,CAAC,YAAY,CAAC,GAAG;IAChC,OAAO,EAAE,QAAQ,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;CACf,CACF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,+EASlC,yBAAyB,4CAuE3B,CAAC"}

package/packages/shared-components/dist/FilterList/DateRangePickerPopUp.js CHANGED Viewed

@@ -19,6 +19,12 @@ const DateRangePickerPopUp = ({ open = false, anchorEl, onClose, children, onApp
     };
     return ((0, jsx_runtime_1.jsxs)(material_1.Popover, { open: open, anchorEl: anchorEl, anchorOrigin: { vertical: "bottom", horizontal: "left" }, onClose: () => {
             handleClose();
+        }, onKeyDown: (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                e.stopPropagation();
+                handleClose();
+            }
         }, sx: { "& .MuiPaper-root": { minWidth: "300px" } }, children: [showDivider && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "8px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "5px", children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h6", children: [title, " "] }), required && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "error", children: "*" }))] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleClose, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.ClearIcon, {}) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%" } })] })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     background: slate[600],
                     borderRadius: "5px",

package/packages/shared-components/dist/FilterList/FilterListV2.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterListV2.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterListV2.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAsBnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,OAAO,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EACjB,eAAe,EAAE,cAAc,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAiB7B;AAED,eAAO,MAAM,YAAY,GAAI,8EAO1B,iBAAiB,~~4CAorBnB~~,CAAC"}
1	+ {"version":3,"file":"FilterListV2.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterListV2.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAsBnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,OAAO,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,OAAO,EAAE,QAAQ,CAAC;IAClB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EACjB,eAAe,EAAE,cAAc,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAiB7B;AAED,eAAO,MAAM,YAAY,GAAI,8EAO1B,iBAAiB,4CA6vBnB,CAAC"}

package/packages/shared-components/dist/FilterList/FilterListV2.js CHANGED Viewed

@@ -61,6 +61,8 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
     const [currentFilter, setCurrentFilter] = (0, react_1.useState)(null);
     const filterListV2AnchorRef = (0, react_1.useRef)(null);
     const [isPopupOpen, setIsPopupOpen] = (0, react_1.useState)(false);
+    const [focusedChipKey, setFocusedChipKey] = (0, react_1.useState)(null);
+    const chipRefs = (0, react_1.useRef)({});
     const handleDateRange = (filter) => {
         setCurrentFilter(filter);
         setDatePickerPopup(true);
@@ -237,8 +239,42 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
         }
         return keyValue;
     }
+    const handleChipClick = (key, e) => {
+        if (key === "company_id" &&
+            filterListItems?.some(({ required }) => required)) {
+            return;
+        }
+        setOpenFilterPopup(true);
+        filterPopupAnchorElm.current = e.currentTarget;
+        const item = getFilterItem(key);
+        if (item) {
+            setCurrentFilter(item);
+        }
+    };
+    const handleChipKeyDown = (key, e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            const chipElement = chipRefs.current[key];
+            if (chipElement) {
+                handleChipClick(key, { currentTarget: chipElement });
+            }
+        }
+        else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+            e.preventDefault();
+            const chipKeys = Object.keys(filterListData || {}).filter((k) => filterListData?.[k]);
+            const currentIndex = chipKeys.indexOf(key);
+            const nextIndex = e.key === "ArrowRight"
+                ? (currentIndex + 1) % chipKeys.length
+                : (currentIndex - 1 + chipKeys.length) % chipKeys.length;
+            const nextKey = chipKeys[nextIndex];
+            if (nextKey && chipRefs.current[nextKey]) {
+                chipRefs.current[nextKey]?.focus();
+                setFocusedChipKey(nextKey);
+            }
+        }
+    };
     const renderChips = (data) => {
-        return Object.entries(data).map(([key, value]) => {
+        return Object.entries(data).map(([key, value], index) => {
             if (typeof value !== "boolean" && !value) {
                 return;
             }
@@ -250,22 +286,26 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
             if (typeof value !== "boolean" && !formattedValue) {
                 return;
             }
-            return ((0, jsx_runtime_1.jsx)(FilterPill_1.FilterPill, { ref: filterPopupAnchorElm, label: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip
+            const isFocused = focusedChipKey === key;
+            return ((0, jsx_runtime_1.jsx)(FilterPill_1.FilterPill, { ref: (el) => {
+                    chipRefs.current[key] = el;
+                    if (index === 0 && !focusedChipKey) {
+                        filterPopupAnchorElm.current = el;
+                    }
+                }, label: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip
                 // eslint-disable-next-line sonarjs/no-base-to-string
                 , {
                     // eslint-disable-next-line sonarjs/no-base-to-string
                     toolTipLabel: `${formattedValue}`, children: `${item?.label}: ${formattedValue}` }), onDelete: () => handleDelete(key), onClick: (e) => {
-                    if (key === "company_id" &&
-                        filterListItems?.some(({ required }) => required)) {
-                        return;
-                    }
-                    setOpenFilterPopup(true);
-                    filterPopupAnchorElm.current = e.currentTarget;
-                    const item = getFilterItem(key);
-                    if (item) {
-                        setCurrentFilter(item);
-                    }
-                } }, key));
+                    handleChipClick(key, e);
+                }, isFocused: isFocused, onKeyDown: (e) => handleChipKeyDown(key, e), onFocus: () => setFocusedChipKey(key), onBlur: () => {
+                    // Only clear focus if focus is moving to another chip
+                    setTimeout(() => {
+                        if (!Object.values(chipRefs.current).some((ref) => ref === document.activeElement)) {
+                            setFocusedChipKey(null);
+                        }
+                    }, 0);
+                }, tabIndex: 0 }, key));
         });
     };
     (0, utils_1.useGlobalKeyboardShortcut)({
@@ -289,6 +329,7 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                         }, children: filterListData &&
                             Object.values(filterListData).some((value) => value) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: {
                                         minWidth: "50px",
+                                        marginRight: "10px",
                                     }, children: "Filters:" }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", gap: "5px", alignItems: "center", sx: { flexWrap: "wrap", maxWidth: "100%" }, children: renderChips(filterListData) })] })) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "flex-start", children: [filterListData &&
                                 Object.values(filterListData).some((value) => value) && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => handlerReset(), variant: "text", sx: { minWidth: { xs: "60px", sm: "100px" } }, children: !isMobile ? "Clear Filter" : "Clear" })), !isDisabled && ((0, jsx_runtime_1.jsx)(Actions_1.FilterIconAction, { isFiltered: !(0, isEmpty_1.default)(filterListData), onClick: handleClick, ref: filterListV2AnchorRef }))] })] }), (0, jsx_runtime_1.jsx)("form", { onSubmit: (e) => {
                     e.preventDefault();

package/packages/shared-components/dist/FormFields/Autocomplete/Skeleton.js CHANGED Viewed

@@ -4,9 +4,9 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = ({ label, styling }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", sx: {
+                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", sx: {
                     transform: "scale(1)",
                 } })] }));
 };

package/packages/shared-components/dist/FormFields/DatePicker/Skeleton.js CHANGED Viewed

@@ -4,9 +4,9 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = ({ label, styling }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", sx: {
+                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", sx: {
                     transform: "scale(1)",
                 } })] }));
 };

package/packages/shared-components/dist/FormFields/DateRangePicker/Skeleton.js CHANGED Viewed

@@ -4,13 +4,13 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                             transform: "scale(1)",
-                        } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", sx: {
+                        } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", sx: {
                             transform: "scale(1)",
-                        } })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+                        } })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                             transform: "scale(1)",
-                        } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", sx: {
+                        } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", sx: {
                             transform: "scale(1)",
                         } })] })] }));
 };

package/packages/shared-components/dist/FormFields/DateTimePicker/Skeleton.js CHANGED Viewed

@@ -4,9 +4,9 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = ({ label, styling }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", flex: 1, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", flex: 1, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", width: "100%", sx: {
+                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", width: "100%", sx: {
                     transform: "scale(1)",
                 } })] }));
 };

package/packages/shared-components/dist/FormFields/FileUpload/Skeleton.js CHANGED Viewed

@@ -4,9 +4,9 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "141px", sx: {
+                } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "136px", sx: {
                     transform: "scale(1)",
                 } })] }));
 };

package/packages/shared-components/dist/FormFields/PhoneInputField/Skeleton.js CHANGED Viewed

@@ -4,8 +4,8 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = ({ rows, label }) => {
-    const height = rows === undefined ? 40 : rows * 23;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    const height = rows === undefined ? 35.69 : rows * 26.5;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
                 } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: `${height}px`, sx: {
                     transform: "scale(1)",

package/packages/shared-components/dist/FormFields/RadioGroupField/Skeleton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/RadioGroupField/Skeleton.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,+~~CAwBpB~~,CAAC"}
1	+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/RadioGroupField/Skeleton.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,QAAQ,+CA+BpB,CAAC"}

package/packages/shared-components/dist/FormFields/RadioGroupField/Skeleton.js CHANGED Viewed

@@ -4,6 +4,6 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "20px", width: "70px", sx: { transform: "scale(1)" } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "50px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", height: "25px", width: "25px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "23px", width: "38px", sx: { transform: "scale(1)" } })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", height: "25px", width: "25px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "23px", width: "38px", sx: { transform: "scale(1)" } })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "18.69px", width: "70px", sx: { transform: "scale(1)" } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "50px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", height: "25px", width: "25px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "21px", width: "45px", sx: { transform: "scale(1)" } })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", height: "25px", width: "25px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "21px", width: "45px", sx: { transform: "scale(1)" } })] })] })] }));
 };
 exports.Skeleton = Skeleton;

package/packages/shared-components/dist/FormFields/Rating/Skeleton.js CHANGED Viewed

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const STAR_KEYS = ["star-1", "star-2", "star-3", "star-4", "star-5"];
 const RatingSkeleton = ({ label }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } })), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", gap: "5px", children: STAR_KEYS.map((key) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 30, height: 30, sx: {
+                } })), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", gap: "5px", children: STAR_KEYS.map((key) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 25, height: 25, sx: {
                         transform: "scale(1)",
                     } }, key))) })] }));
 };

package/packages/shared-components/dist/FormFields/Select/Select.js CHANGED Viewed

@@ -109,9 +109,9 @@ function Select({ control, defaultValue, name, required = false, label, multiple
         return groups;
     }, [options]);
     if (loading) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                         transform: "scale(1)",
-                    } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", sx: {
+                    } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", sx: {
                         transform: "scale(1)",
                     } })] }));
     }

package/packages/shared-components/dist/FormFields/TextField/Skeleton.js CHANGED Viewed

@@ -4,8 +4,8 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = ({ rows, label, styling }) => {
-    const height = rows === undefined ? 40 : rows * 23;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    const height = rows === undefined ? 35.69 : rows * 26.5;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
                 } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: `${height}px`, sx: {
                     transform: "scale(1)",

package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts CHANGED Viewed

@@ -24,5 +24,5 @@ export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit
     };
     customOnChange?: (value: string | null | number) => void;
 };
-export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, styling, infoMessage, regexExpression, customOnChange, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, styling, infoMessage, regexExpression, customOnChange, multiline, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

package/packages/shared-components/dist/FormFields/TextField/TextField.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAYzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,cAAc,EACd,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,~~2CA6JnB~~"}
1	+ {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAYzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,cAAc,EACd,SAAS,EACT,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAoKnB"}

package/packages/shared-components/dist/FormFields/TextField/TextField.js CHANGED Viewed

@@ -20,7 +20,7 @@ const characterTypeMessages = {
 function TextField({ control, name, defaultValue, label = "", rules, type, required, disabled, loading = false, placeholder = "", isCapitalize = false, isTrimStartDisabled = false, rows, characterType = "string-number-special", letterCase = "mixed", setError, containerProps, styling = "custom", infoMessage, regexExpression = {
     message: null,
     regex: /^[\s\S]*$/,
-}, customOnChange, ...inputFieldProps }) {
+}, customOnChange, multiline, ...inputFieldProps }) {
     const { field: { value, onChange, ...restField }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const { inputRef, maintainFocus } = (0, hooks_1.useFormFieldFocus)();
     const handleKeyDown = (event) => {
@@ -68,7 +68,7 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
         ? characterTypeMessages[characterType]
         : message;
     if (loading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: rows, styling: styling });
+        return ((0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: multiline && !rows ? 2 : rows, styling: styling }));
     }
     return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { ...containerProps, gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, disabled: disabled, children: label }), infoMessage && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: infoMessage, children: (0, jsx_runtime_1.jsx)(icons_material_1.InfoOutlined, { sx: {
                                 fontSize: 13,
@@ -108,5 +108,5 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
                         }
                         maintainFocus();
                     });
-                }, value: typeof value === "string" ? value.trimStart() : (value ?? ""), ...restField, ...inputFieldProps })] }));
+                }, value: typeof value === "string" ? value.trimStart() : (value ?? ""), multiline: multiline, ...restField, ...inputFieldProps })] }));
 }

package/packages/shared-components/dist/FormFields/TimeField/Skeleton.js CHANGED Viewed

@@ -4,9 +4,9 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = ({ label, styling }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", flex: 1, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", flex: 1, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", width: "100%", sx: {
+                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", width: "100%", sx: {
                     transform: "scale(1)",
                 } })] }));
 };

package/packages/shared-components/dist/FormFields/TimePicker/Skeleton.js CHANGED Viewed

@@ -4,9 +4,9 @@ exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const Skeleton = ({ label, styling }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", flex: 1, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "23px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", flex: 1, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", width: "100%", sx: {
+                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", width: "100%", sx: {
                     transform: "scale(1)",
                 } })] }));
 };

package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/FacetedFilter.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FacetedFilter.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/FacetedFilter/FacetedFilter.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;~~AAUpD~~,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,EAAG,8BAG/B,kBAAkB,CAAC,CAAC,CAAC,~~4CAgUvB~~,CAAC"}
1	+ {"version":3,"file":"FacetedFilter.d.ts","sourceRoot":"","sources":["../../../../src/SmartGrid/Components/FacetedFilter/FacetedFilter.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAWpD,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,EAAG,8BAG/B,kBAAkB,CAAC,CAAC,CAAC,4CAiVvB,CAAC"}

package/packages/shared-components/dist/SmartGrid/Components/FacetedFilter/FacetedFilter.js CHANGED Viewed

@@ -7,6 +7,7 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const DebouncedInput_1 = require("../SearchFilterRow/DebouncedInput");
 const useGetDynamicOptionData_1 = require("./hooks/useGetDynamicOptionData");
+const ActionButtons_1 = require("../../../ActionButtons");
 const Tooltip_1 = require("../../../Tooltip");
 const VirtualCheckboxList_1 = require("./VirtualCheckboxList");
 const FacetedFilter = ({ header, resetAllFilters, }) => {
@@ -132,6 +133,11 @@ const FacetedFilter = ({ header, resetAllFilters, }) => {
         }
     }, [resetAllFilters]);
     const hasActiveFilter = activeFilterCount > 0;
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            popoverRef.current?.focus();
+        }
+    }, [isOpen]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)(material_1.IconButton, { ref: buttonRef, onClick: () => setIsOpen(!isOpen), sx: {
                     padding: "2px",
                     position: "relative",
@@ -154,7 +160,12 @@ const FacetedFilter = ({ header, resetAllFilters, }) => {
                             right: 4,
                             top: 4,
                             width: "7px",
-                        } }))] }), isOpen && ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClickAway, children: (0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, style: {
+                        } }))] }), isOpen && ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: handleClickAway, children: (0, jsx_runtime_1.jsxs)("div", { ref: popoverRef, tabIndex: -1, onKeyDown: (e) => {
+                        if (e.key === "Escape") {
+                            e.stopPropagation();
+                            handleClickAway();
+                        }
+                    }, style: {
                         backgroundColor: iron[600],
                         borderRadius: "6px",
                         boxShadow: `0 0 20px ${mirage[50]}`,
@@ -186,6 +197,10 @@ const FacetedFilter = ({ header, resetAllFilters, }) => {
                                 display: "flex",
                                 justifyContent: "space-between",
                                 paddingTop: "8px",
-                            }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", size: "small", sx: { fontSize: "12px", height: "22px", minWidth: "40px" }, onClick: handleReset, children: "Reset" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", sx: { fontSize: "12px", height: "22px", minWidth: "40px" }, onClick: handleApply, disableElevation: true, children: "Apply" })] })] }) }))] }));
+                            }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "text", size: "small", sx: { fontSize: "12px", height: "22px", minWidth: "40px" }, onClick: handleReset, children: "Reset" }), (0, jsx_runtime_1.jsx)(ActionButtons_1.FormActionButton, { actionType: "save", label: "Apply", onClick: handleApply, withoutModifiers: true, shortcutKey: "Enter", variant: "contained", sx: {
+                                        height: "22px",
+                                        fontSize: "12px",
+                                        minWidth: "40px",
+                                    } })] })] }) }))] }));
 };
 exports.FacetedFilter = FacetedFilter;