@codezee/sixtify-brahma 0.2.168 → 0.2.170

package/package.json

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

package/packages/shared-components/dist/ActionButtons/FormActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormActionButton.d.ts","sourceRoot":"","sources":["../../src/ActionButtons/FormActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhE,KAAK,qBAAqB,GAAG,WAAW,GAAG;IACzC,OAAO,EAAE,QAAQ,CAAC;CACnB,GAAG,OAAO,CAAC;IACR,UAAU,EAAE,oBAAoB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,uBAAuB,EAAE,OAAO,CAAC;CAClC,CAAC,CAAC;AAEL,eAAO,MAAM,gBAAgB,GAAI,6HAW9B,QAAQ,CAAC,qBAAqB,CAAC,4CAuDjC,CAAC"}
+{"version":3,"file":"FormActionButton.d.ts","sourceRoot":"","sources":["../../src/ActionButtons/FormActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhE,KAAK,qBAAqB,GAAG,WAAW,GAAG;IACzC,OAAO,EAAE,QAAQ,CAAC;CACnB,GAAG,OAAO,CAAC;IACR,UAAU,EAAE,oBAAoB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,uBAAuB,EAAE,OAAO,CAAC;CAClC,CAAC,CAAC;AAEL,eAAO,MAAM,gBAAgB,GAAI,6HAW9B,QAAQ,CAAC,qBAAqB,CAAC,4CA+DjC,CAAC"}

package/packages/shared-components/dist/ActionButtons/FormActionButton.js

@@ -26,6 +26,12 @@ const FormActionButton = ({ actionType, onClick, shortcutKey, label, withoutModi
         }
         return "Save";
     };
+    const getVariant = () => {
+        if (actionType == "cancel") {
+            return "outlined";
+        }
+        return variant;
+    };
     if (!disableKeyboardShortcut) {
         (0, utils_1.useGlobalKeyboardShortcut)({
             key: getShortcutKey(),
@@ -39,6 +45,6 @@ const FormActionButton = ({ actionType, onClick, shortcutKey, label, withoutModi
             },
         });
     }
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, variant: variant, loading: loading, disabled: disabled, ...rest, children: getLabel() }));
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, variant: getVariant(), loading: loading, disabled: disabled, ...rest, children: getLabel() }));
 };
 exports.FormActionButton = FormActionButton;

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

@@ -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

@@ -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"}
+{"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

@@ -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/RedirectionCell/RedirectionCell.js

@@ -39,7 +39,7 @@ const RedirectionCell = ({ mainLabel, onClick, includeSubLabel = false, isSubLab
             }
         },
     });
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "div", sx: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5px", alignItems: "center", children: [includeAvatar && ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: avatar ?? "", alt: "Photo", sx: { width: 28, height: 28 } })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [typeof mainLabel === "string" ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "div", sx: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5px", alignItems: "center", children: [includeAvatar && ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: avatar ?? "", alt: "Photo", sx: { width: 28, height: 28 } })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [typeof mainLabel === "string" ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: {
                                         width: "100%",
                                         color: disabled || isSubLabelClickable
                                             ? black[900]
@@ -76,7 +76,7 @@ const RedirectionCell = ({ mainLabel, onClick, includeSubLabel = false, isSubLab
                                             (0, isFunction_1.default)(onClick)) {
                                             onClick(e);
                                         }
-                                    }, children: mainLabel })), includeSubLabel &&
+                                    }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: mainLabel }) })), includeSubLabel &&
                                     (isStringSubLabel ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: !isSubLabelClickable
                                             ? butterflyBlue[400]
                                             : butterflyBlue[900], sx: {
@@ -114,6 +114,6 @@ const RedirectionCell = ({ mainLabel, onClick, includeSubLabel = false, isSubLab
                                                 (0, isFunction_1.default)(onClick)) {
                                                 onClick(e);
                                             }
-                                        }, children: subLabel })))] })] }), includeIcon && icon && (0, jsx_runtime_1.jsx)(material_1.Box, { children: icon })] }) }));
+                                        }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: subLabel ?? "-" }) })))] })] }), includeIcon && icon && (0, jsx_runtime_1.jsx)(material_1.Box, { children: icon })] }) }));
 };
 exports.RedirectionCell = RedirectionCell;

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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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

@@ -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,4CA8Cb,CAAC"}
+{"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

@@ -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");
         }
@@ -21,6 +24,6 @@ const Dialog = ({ title, isHideCloseIcon = false, isHideDividers = false, childr
     return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { fullWidth: true, onKeyDown: handleKeyDown, ...props, children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, { padding: {
                     xs: "10px",
                     sm: isDeleteDialog ? "16px 20px" : "5px 15px",
-                }, textAlign: "center", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", fontWeight: 500, flex: 1, children: title }), !isHideCloseIcon && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: (event) => onClose && onClose(event, "escapeKeyDown"), color: "secondary", size: "small", children: (0, jsx_runtime_1.jsx)(HighlightOff_1.default, { fontSize: "medium" }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: commonSX, dividers: !isHideDividers, children: children }), actions && (0, jsx_runtime_1.jsx)(material_1.DialogActions, { sx: commonSX, children: actions })] }));
+                }, textAlign: "center", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", fontWeight: 500, flex: 1, children: title }), !isHideCloseIcon && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: (event) => onClose && onClose(event, "escapeKeyDown"), color: "secondary", size: "small", children: (0, jsx_runtime_1.jsx)(HighlightOff_1.default, { fontSize: "medium" }) }))] }) }), (0, jsx_runtime_1.jsx)(material_1.DialogContent, { sx: { padding: { xs: "10px", sm: "15px" } }, dividers: !isHideDividers, children: children }), actions && (0, jsx_runtime_1.jsx)(material_1.DialogActions, { sx: commonSX, children: actions })] }));
 };
 exports.Dialog = Dialog;

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

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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

@@ -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/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

@@ -205,7 +205,8 @@ 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, { required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", gap: "10px", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { PopperComponent: material_1.Popper, PaperComponent: CustomPaperComponent, 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, { 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: {
+                            "align-self": "center",
                             "& .MuiAutocomplete-tag": {
                                 backgroundColor: (0, styles_1.alpha)(color.iron[700], 0.6),
                                 color: color.black[900],

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

@@ -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"}
+{"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

@@ -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;

package/packages/shared-components/dist/utils/theme/theme.js

@@ -197,7 +197,7 @@ function appTheme(theme) {
             MuiFormLabel: {
                 styleOverrides: {
                     root: {
-                        fontSize: "16px",
+                        fontSize: "13px",
                         "&.Mui-disabled": {
                             "& .MuiFormLabel-asterisk": {
                                 color: palette.app.color.iron[800],