@talxis/base-controls 1.2408.1 → 1.2408.3

package/dist/components/Grid/Grid.js

@@ -1 +1,30 @@
-import"react/jsx-runtime";import"react";import"../../hooks/useControl.js";import"../../hooks/useControlTheme.js";import"./core/model/Grid.js";export{G as Grid}from"../../Grid-b7e6190d.js";import"./translations.js";import"./GridContext.js";import"@fluentui/react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useControlSizing.js";import"../../utils/Theme.js";import"@fluentui/react-migration-v8-v9";import"tslib";import"./constants.js";import"./filtering/model/Filtering.js";import"./core/model/GridDependency.js";import"./filtering/model/Condition.js";import"./core/enums/ConditionOperator.js";import"./core/enums/DataType.js";import"./validation/model/ColumnValidation.js";import"validator/es/lib/isEmail";import"validator/es/lib/isURL";import"dayjs";import"./filtering/utils/FilteringUtilts.js";import"./filtering/constants.js";import"./paging/model/Paging.js";import"./selection/model/Selection.js";import"./sorting/Sorting.js";import"./core/services/RecordUpdateService/model/RecordUpdateService.js";import"lodash";import"numeral";import"../../utils/Numeral.js";import"./core/model/Metadata.js";import"@ag-grid-community/react";import"./selection/controllers/useSelectionController.js";import"./core/hooks/useGridInstance.js";import"./core/components/AgGrid/styles.js";import"./core/components/AgGrid/controllers/useAgGridController.js";import"./core/controllers/useGridController.js";import"./core/components/Cell/EditableCell/EditableCell.js";import"./core/services/RecordUpdateService/controllers/useRecordUpdateServiceController.js";import"./core/components/Component/Component.js";import"../DateTime/DateTime.js";import"../DateTime/styles.js";import"../DateTime/hooks/useDateTime.js";import"../../hooks/useInputBasedControl.js";import"dayjs/plugin/utc";import"dayjs/plugin/customParseFormat";import"../DateTime/translations.js";import"../DateTime/components/Calendar.js";import"@fluentui/react/lib/Calendar";import"@talxis/react-components";import"../Decimal/Decimal.js";import"../../constants.js";import"../Decimal/components/ArrowButtons.js";import"../Decimal/components/styles.js";import"../Lookup/Lookup.js";import"../Lookup/hooks/useLookup.js";import"../Lookup/translations.js";import"../Lookup/hooks/useFetchXml.js";import"@talxis/client-libraries";import"../Lookup/components/TargetSelector.js";import"@fluentui/react/lib/Text";import"../Lookup/styles.js";import"../Lookup/hooks/useLoadedEntities.js";import"../../hooks/useMouseOver.js";import"../Lookup/components/RecordCreator.js";import"../../hooks/useFocusIn.js";import"../MultiSelectOptionSet/MultiSelectOptionSet.js";import"../OptionSet/OptionSet.js";import"../TextField/TextField.js";import"../TwoOptions/TwoOptions.js";import"../Duration/Duration.js";import"../Duration/translations.js";import"./core/components/Component/controller/useComponentController.js";import"./core/components/Component/model/Component.js";import"./core/components/Cell/ReadOnlyCell/ReadOnlyCell.js";import"./core/components/Cell/ReadOnlyCell/styles.js";import"./core/components/Cell/Commands/Commands.js";import"./core/components/Cell/Commands/useCommands.js";import"./core/components/Cell/Commands/Icon.js";import"external-svg-loader";import"./core/components/Cell/Commands/styles.js";import"./core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.js";import"./core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.js";import"color";import"./validation/controllers/useRecordValidationController.js";import"./core/hooks/useRerender.js";import"./core/components/ColumnHeader/ColumnHeader.js";import"./filtering/components/FilterCallout/FilterCallout.js";import"./filtering/components/FilterCallout/styles.js";import"./filtering/controller/useColumnFilterConditionController.js";import"./core/hooks/useRefreshCallback.js";import"./filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.js";import"./filtering/components/FilterCallout/components/ConditionValue/ConditionValue.js";import"./filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.js";import"./sorting/components/SortingContextualMenu/SortingContextualMenu.js";import"./sorting/components/SortingContextualMenu/styles.js";import"./sorting/controllers/useColumnSortingController.js";import"./core/components/ColumnHeader/styles.js";import"./core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js";import"./core/components/ColumnHeader/components/GlobalCheckbox/styles.js";import"./core/components/AgGrid/model/AgGrid.js";import"@ag-grid-community/core";import"@ag-grid-community/client-side-row-model";import"use-debounce";import"@ag-grid-community/styles/ag-grid.css";import"@ag-grid-community/styles/ag-theme-balham.css";import"./paging/controllers/usePagingController.js";import"./paging/components/Paging/Paging.js";import"./paging/components/Paging/styles.js";import"./core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.js";import"./core/components/AgGrid/components/EmptyRecordsOverlay/styles.js";import"./core/components/Save/hooks/useSave.js";import"./core/components/Save/styles.js";import"./core/components/Dialog/index.js";import"./core/components/Dialog/Constants.js";import"./core/components/Dialog/Styles.js";import"./core/components/Save/components/ChangeEditor/components/RecordGrids/styles.js";import"./core/components/Save/components/ChangeEditor/styles.js";import"./core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.js";import"./core/components/AgGrid/components/LoadingOverlay/styles.js";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Grid as Grid$1 } from './core/model/Grid.js';
+import { AgGrid } from './core/components/AgGrid/AgGrid.js';
+import { gridTranslations } from './translations.js';
+import { GridContext } from './GridContext.js';
+import { mergeStyleSets, ThemeProvider } from '@fluentui/react';
+import { useControlTheme } from '../../hooks/useControlTheme.js';
+import { useControl } from '../../hooks/useControl.js';
+
+const styles = mergeStyleSets({
+    root: {
+        displayName: 'talxis__gridControl',
+        height: '100%'
+    }
+});
+const Grid = (props) => {
+    const { labels } = useControl('Grid', props, gridTranslations);
+    const providerValue = useMemo(() => {
+        return {
+            gridInstance: new Grid$1(props, labels)
+        };
+    }, []);
+    providerValue.gridInstance.updateDependencies(props);
+    const theme = useControlTheme(props.context.fluentDesignLanguage);
+    return (jsx(GridContext.Provider, { value: providerValue, children: jsx(ThemeProvider, { className: `talxis__gridControl ${styles.root}`, theme: theme, applyTo: 'none', children: jsx(AgGrid, {}) }) }));
+};
+
+export { Grid };
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useControl, useControlTheme } from \"../../hooks\"\nimport { IGridContext } from \"./core/interfaces/IGridContext\";\nimport { Grid as GridModel } from \"./core/model/Grid\";\nimport { IGrid } from \"./interfaces\";\nimport { AgGrid } from './core/components/AgGrid/AgGrid';\nimport React from 'react';\nimport { gridTranslations } from './translations';\nimport { GridContext } from \"./GridContext\";\nimport { mergeStyleSets, ThemeProvider } from \"@fluentui/react\";\n\nconst styles = mergeStyleSets({\n    root: {\n        displayName: 'talxis__gridControl',\n        height: '100%'\n    }\n});\n\nexport const Grid = (props: IGrid) => {\n    const { labels } = useControl('Grid', props, gridTranslations);\n    const providerValue: IGridContext = useMemo(() => {\n        return {\n            gridInstance: new GridModel(props, labels)\n        }\n    }, [])\n    providerValue.gridInstance.updateDependencies(props);\n    const theme = useControlTheme(props.context.fluentDesignLanguage);\n    return (\n        <GridContext.Provider value={providerValue}>\n            <ThemeProvider className={`talxis__gridControl ${styles.root}`} theme={theme} applyTo='none'>\n                <AgGrid />\n            </ThemeProvider>\n        </GridContext.Provider>\n    )\n}"],"names":["GridModel","_jsx"],"mappings":";;;;;;;;;;AAWA,MAAM,MAAM,GAAG,cAAc,CAAC;AAC1B,IAAA,IAAI,EAAE;AACF,QAAA,WAAW,EAAE,qBAAqB;AAClC,QAAA,MAAM,EAAE,MAAM;AACjB,KAAA;AACJ,CAAA,CAAC,CAAC;AAEU,MAAA,IAAI,GAAG,CAAC,KAAY,KAAI;AACjC,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC;AAC/D,IAAA,MAAM,aAAa,GAAiB,OAAO,CAAC,MAAK;QAC7C,OAAO;AACH,YAAA,YAAY,EAAE,IAAIA,MAAS,CAAC,KAAK,EAAE,MAAM,CAAC;SAC7C,CAAA;KACJ,EAAE,EAAE,CAAC,CAAA;AACN,IAAA,aAAa,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACrD,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAClE,IAAA,QACIC,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,aAAa,YACtCA,GAAC,CAAA,aAAa,EAAC,EAAA,SAAS,EAAE,CAAuB,oBAAA,EAAA,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,EAAA,QAAA,EACxFA,IAAC,MAAM,EAAA,EAAA,CAAG,EACE,CAAA,EAAA,CACG,EAC1B;AACL;;;;"}

package/dist/components/Grid/GridContext.js

@@ -1 +1,6 @@
-import{createContext as o}from"react";const r=o(null);export{r as GridContext};
+import { createContext } from 'react';
+
+const GridContext = createContext(null);
+
+export { GridContext };
+//# sourceMappingURL=GridContext.js.map

package/dist/components/Grid/GridContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContext.js","sources":["../../../src/components/Grid/GridContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { IGridContext } from \"./core/interfaces/IGridContext\";\n\nexport const GridContext = createContext<IGridContext>(null as any);"],"names":[],"mappings":";;MAGa,WAAW,GAAG,aAAa,CAAe,IAAW;;;;"}

package/dist/components/Grid/constants.js

@@ -1 +1,4 @@
-const o="__checkbox",t="_talxis_gridRibbonButtons";export{o as CHECKBOX_COLUMN_KEY,t as RIBBON_COLUMN_KEY};
+const RIBBON_COLUMN_KEY = '_talxis_gridRibbonButtons';
+
+export { RIBBON_COLUMN_KEY };
+//# sourceMappingURL=constants.js.map

package/dist/components/Grid/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/components/Grid/constants.ts"],"sourcesContent":["export const CHECKBOX_COLUMN_KEY = '__checkbox';\nexport const RIBBON_COLUMN_KEY = '_talxis_gridRibbonButtons';"],"names":[],"mappings":"AACO,MAAM,iBAAiB,GAAG;;;;"}

package/dist/components/Grid/core/components/AgGrid/AgGrid.js

@@ -1 +1,85 @@
-import"react/jsx-runtime";import"@ag-grid-community/react";import"@fluentui/react";import"react";import"../../../selection/controllers/useSelectionController.js";import"../../hooks/useGridInstance.js";import"./styles.js";import"./controllers/useAgGridController.js";import"../../../paging/components/Paging/Paging.js";import"./components/EmptyRecordsOverlay/EmptyRecords.js";export{A as AgGrid}from"../../../../../Grid-b7e6190d.js";import"./components/LoadingOverlay/LoadingOverlay.js";import"../../../paging/controllers/usePagingController.js";import"../../../GridContext.js";import"tslib";import"../../controllers/useGridController.js";import"fast-deep-equal/es6";import"../Cell/EditableCell/EditableCell.js";import"../../enums/DataType.js";import"../../services/RecordUpdateService/controllers/useRecordUpdateServiceController.js";import"../Component/Component.js";import"../../../../DateTime/DateTime.js";import"../../../../DateTime/styles.js";import"../../../../DateTime/hooks/useDateTime.js";import"../../../../../hooks/useInputBasedControl.js";import"../../../../../hooks/useControl.js";import"merge-anything";import"liquidjs";import"../../../../../hooks/useControlTheme.js";import"../../../../../utils/Theme.js";import"@fluentui/react-migration-v8-v9";import"../../../../../hooks/useControlSizing.js";import"dayjs";import"dayjs/plugin/utc";import"dayjs/plugin/customParseFormat";import"../../../../DateTime/translations.js";import"../../../../DateTime/components/Calendar.js";import"@fluentui/react/lib/Calendar";import"@talxis/react-components";import"../../../../Decimal/Decimal.js";import"numeral";import"../../../../../utils/Numeral.js";import"../../../../../constants.js";import"../../../../Decimal/components/ArrowButtons.js";import"../../../../Decimal/components/styles.js";import"../../../../Lookup/Lookup.js";import"../../../../Lookup/hooks/useLookup.js";import"../../../../Lookup/translations.js";import"../../../../Lookup/hooks/useFetchXml.js";import"@talxis/client-libraries";import"../../../../Lookup/components/TargetSelector.js";import"@fluentui/react/lib/Text";import"../../../../Lookup/styles.js";import"../../../../Lookup/hooks/useLoadedEntities.js";import"../../../../../hooks/useMouseOver.js";import"../../../../Lookup/components/RecordCreator.js";import"../../../../../hooks/useFocusIn.js";import"../../../../MultiSelectOptionSet/MultiSelectOptionSet.js";import"../../../../OptionSet/OptionSet.js";import"../../../../TextField/TextField.js";import"../../../../TwoOptions/TwoOptions.js";import"../../../../Duration/Duration.js";import"../../../../Duration/translations.js";import"../Component/controller/useComponentController.js";import"../Component/model/Component.js";import"../../../validation/model/ColumnValidation.js";import"validator/es/lib/isEmail";import"validator/es/lib/isURL";import"../../model/GridDependency.js";import"../Cell/ReadOnlyCell/ReadOnlyCell.js";import"../Cell/ReadOnlyCell/styles.js";import"../Cell/Commands/Commands.js";import"../Cell/Commands/useCommands.js";import"../Cell/Commands/Icon.js";import"external-svg-loader";import"../Cell/Commands/styles.js";import"../Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.js";import"../Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.js";import"color";import"../../../validation/controllers/useRecordValidationController.js";import"../../../constants.js";import"../../hooks/useRerender.js";import"../ColumnHeader/ColumnHeader.js";import"../../../filtering/components/FilterCallout/FilterCallout.js";import"../../../filtering/components/FilterCallout/styles.js";import"../../../filtering/controller/useColumnFilterConditionController.js";import"../../hooks/useRefreshCallback.js";import"../../../filtering/utils/FilteringUtilts.js";import"../../enums/ConditionOperator.js";import"../../../filtering/constants.js";import"../../../filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.js";import"../../../filtering/components/FilterCallout/components/ConditionValue/ConditionValue.js";import"../../../filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.js";import"../../../sorting/components/SortingContextualMenu/SortingContextualMenu.js";import"../../../sorting/components/SortingContextualMenu/styles.js";import"../../../sorting/controllers/useColumnSortingController.js";import"../ColumnHeader/styles.js";import"../ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js";import"../ColumnHeader/components/GlobalCheckbox/styles.js";import"./model/AgGrid.js";import"@ag-grid-community/core";import"@ag-grid-community/client-side-row-model";import"use-debounce";import"@ag-grid-community/styles/ag-grid.css";import"@ag-grid-community/styles/ag-theme-balham.css";import"../../../paging/components/Paging/styles.js";import"./components/EmptyRecordsOverlay/styles.js";import"../../model/Grid.js";import"../../../filtering/model/Filtering.js";import"../../../filtering/model/Condition.js";import"../../../paging/model/Paging.js";import"../../../selection/model/Selection.js";import"../../../sorting/Sorting.js";import"../../services/RecordUpdateService/model/RecordUpdateService.js";import"lodash";import"../../model/Metadata.js";import"../Save/hooks/useSave.js";import"../Save/styles.js";import"../Dialog/index.js";import"../Dialog/Constants.js";import"../Dialog/Styles.js";import"../../../translations.js";import"../Save/components/ChangeEditor/components/RecordGrids/styles.js";import"../Save/components/ChangeEditor/styles.js";import"./components/LoadingOverlay/styles.js";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AgGridReact } from '@ag-grid-community/react';
+import { useTheme, MessageBar, MessageBarType } from '@fluentui/react';
+import { useRef } from 'react';
+import { useSelectionController } from '../../../selection/controllers/useSelectionController.js';
+import { useGridInstance } from '../../hooks/useGridInstance.js';
+import { getGridStyles } from './styles.js';
+import { useAgGridController } from './controllers/useAgGridController.js';
+import { Paging } from '../../../paging/components/Paging/Paging.js';
+import { EmptyRecords } from './components/EmptyRecordsOverlay/EmptyRecords.js';
+import { Save } from '../Save/Save.js';
+import { LoadingOverlay } from './components/LoadingOverlay/LoadingOverlay.js';
+import { usePagingController } from '../../../paging/controllers/usePagingController.js';
+
+const AgGrid = () => {
+    const grid = useGridInstance();
+    const selection = useSelectionController();
+    const gridApiRef = useRef();
+    const containerRef = useRef(null);
+    const theme = useTheme();
+    let { agColumns, records, maxNumberOfVisibleRecords, stateRef, getTotalColumnsWidth, onGridReady } = useAgGridController(gridApiRef);
+    const pagingController = usePagingController();
+    const styles = getGridStyles(theme, maxNumberOfVisibleRecords, grid.useContainerAsHeight);
+    const getAvailableWidth = () => {
+        const rootWrapper = containerRef.current?.querySelector('.ag-root-wrapper');
+        return rootWrapper?.clientWidth ?? 0;
+    };
+    const sizeColumnsIfSpaceAvailable = () => {
+        const availableWidth = getAvailableWidth();
+        if (availableWidth > getTotalColumnsWidth()) {
+            gridApiRef.current.sizeColumnsToFit();
+        }
+    };
+    const updateColumnOrder = (e) => {
+        const columOrder = e.api.getState().columnOrder?.orderedColIds.filter(colId => {
+            return true;
+        });
+        if (!columOrder) {
+            return;
+        }
+        //@ts-ignore - typings
+        grid.pcfContext.factory.fireEvent('__updateColumnOrder', columOrder);
+    };
+    return (jsx("div", { ref: containerRef, className: `${styles.root} ag-theme-balham`, children: agColumns.length > 0 &&
+            jsxs(Fragment, { children: [((grid.isEditable && grid.parameters.ChangeEditorMode?.raw !== 'edit') || grid.parameters.ChangeEditorMode?.raw === 'read') &&
+                        jsx(Save, {}), grid.error &&
+                        jsx(MessageBar, { messageBarType: MessageBarType.error, children: jsx("span", { dangerouslySetInnerHTML: {
+                                    __html: grid.errorMessage
+                                } }) }), jsx(AgGridReact, { animateRows: true, rowSelection: grid.selection.type, noRowsOverlayComponent: EmptyRecords, loadingOverlayComponent: LoadingOverlay, suppressDragLeaveHidesColumns: true, onColumnMoved: (e) => {
+                            if (e.finished) {
+                                updateColumnOrder(e);
+                            }
+                        }, reactiveCustomComponents: true, onRowSelected: (e) => {
+                            //prevent infinite loop since we are also setting the rows
+                            //when the selection comes from above
+                            if (e.source.includes('api') || e.source === 'gridInitializing') {
+                                return;
+                            }
+                            selection.toggle(e.data, e.node.isSelected());
+                        }, onCellDoubleClicked: (e) => {
+                            if (grid.isNavigationEnabled && !grid.isEditable) {
+                                grid.openDatasetItem(e.data.getNamedReference());
+                            }
+                        }, onCellMouseOver: (e) => {
+                            if (e.colDef.colId === '__checkbox') {
+                                gridApiRef.current?.setGridOption('suppressRowClickSelection', true);
+                            }
+                        }, onCellMouseOut: (e) => {
+                            gridApiRef.current?.setGridOption('suppressRowClickSelection', false);
+                        }, getRowId: (params) => params.data.getRecordId(), onGridReady: (e) => {
+                            gridApiRef.current = e.api;
+                            if (grid.loading) {
+                                gridApiRef.current?.showLoadingOverlay();
+                            }
+                            sizeColumnsIfSpaceAvailable();
+                            onGridReady();
+                        }, initialState: stateRef.current, onStateUpdated: (e) => stateRef.current = {
+                            ...stateRef.current,
+                            ...e.state
+                        }, rowHeight: 42, columnDefs: agColumns, rowData: records }), pagingController.isEnabled &&
+                        jsx(Paging, {})] }) }));
+};
+
+export { AgGrid };
+//# sourceMappingURL=AgGrid.js.map

package/dist/components/Grid/core/components/AgGrid/AgGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgGrid.js","sources":["../../../../../../src/components/Grid/core/components/AgGrid/AgGrid.tsx"],"sourcesContent":["import { AgGridReact } from '@ag-grid-community/react';\nimport { MessageBar, MessageBarType, useTheme } from \"@fluentui/react\";\nimport { ColumnMovedEvent, GridApi} from \"@ag-grid-community/core\";\nimport { useEffect, useRef } from \"react\";\nimport { useSelectionController } from \"../../../selection/controllers/useSelectionController\";\nimport { useGridInstance } from \"../../hooks/useGridInstance\";\nimport { getGridStyles } from \"./styles\";\nimport React from 'react';\nimport { useAgGridController } from \"./controllers/useAgGridController\";\nimport { Paging } from \"../../../paging/components/Paging/Paging\";\nimport { EmptyRecords } from \"./components/EmptyRecordsOverlay/EmptyRecords\";\nimport { Save } from \"../Save/Save\";\nimport { LoadingOverlay } from \"./components/LoadingOverlay/LoadingOverlay\";\nimport { usePagingController } from '../../../paging/controllers/usePagingController';\nimport { CHECKBOX_COLUMN_KEY} from '../../../constants';\nimport { IEntityRecord } from '../../../interfaces';\n\nexport const AgGrid = () => {\n    const grid = useGridInstance();\n    const selection = useSelectionController();\n    const gridApiRef = useRef<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord>>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const theme = useTheme();\n    let { agColumns, records, maxNumberOfVisibleRecords, stateRef, getTotalColumnsWidth, onGridReady } = useAgGridController(gridApiRef);\n    const pagingController = usePagingController();\n    const styles = getGridStyles(theme, maxNumberOfVisibleRecords, grid.useContainerAsHeight);\n\n    const getAvailableWidth = () => {\n        const rootWrapper = containerRef.current?.querySelector('.ag-root-wrapper');\n        return rootWrapper?.clientWidth ?? 0;\n    }\n\n    const sizeColumnsIfSpaceAvailable = () => {\n        const availableWidth = getAvailableWidth();\n        if (availableWidth > getTotalColumnsWidth()) {\n            gridApiRef.current!.sizeColumnsToFit();\n        }\n    }\n\n    const updateColumnOrder = (e: ColumnMovedEvent<IEntityRecord, any>) => {\n        const columOrder = e.api.getState().columnOrder?.orderedColIds.filter(colId => {\n            switch(colId) {\n                case CHECKBOX_COLUMN_KEY:\n            }\n            return true;\n        });\n        if(!columOrder) {\n            return;\n        }\n        //@ts-ignore - typings\n        grid.pcfContext.factory.fireEvent('__updateColumnOrder', columOrder)\n    }\n    return (\n        <div \n            ref={containerRef} \n            className={`${styles.root} ag-theme-balham`}\n            >\n            {agColumns.length > 0 && \n            <>\n            {((grid.isEditable && grid.parameters.ChangeEditorMode?.raw !== 'edit') || grid.parameters.ChangeEditorMode?.raw === 'read') &&\n                <Save />\n            }\n            {grid.error &&\n                <MessageBar messageBarType={MessageBarType.error}>\n                    <span dangerouslySetInnerHTML={{\n                        __html: grid.errorMessage!\n                    }} />\n                </MessageBar>\n            }\n            <AgGridReact\n                animateRows\n                rowSelection={grid.selection.type}\n                noRowsOverlayComponent={EmptyRecords}\n                loadingOverlayComponent={LoadingOverlay}\n                suppressDragLeaveHidesColumns\n                onColumnMoved={(e) => {\n                    if(e.finished) {\n                        updateColumnOrder(e);\n                    }\n                }}\n                reactiveCustomComponents\n                onRowSelected={(e) => {\n                    //prevent infinite loop since we are also setting the rows\n                    //when the selection comes from above\n                    if (e.source.includes('api') || e.source === 'gridInitializing') {\n                        return;\n                    }\n                    selection.toggle(e.data!, e.node.isSelected()!)\n                }}\n                onCellDoubleClicked={(e) => {\n                    if (grid.isNavigationEnabled && !grid.isEditable) {\n                        grid.openDatasetItem(e.data!.getNamedReference())\n                    }\n                }}\n                onCellMouseOver={(e) => {\n                    if (e.colDef.colId === '__checkbox') {\n                        gridApiRef.current?.setGridOption('suppressRowClickSelection', true)\n                    }\n                }}\n                onCellMouseOut={(e) => {\n                    gridApiRef.current?.setGridOption('suppressRowClickSelection', false)\n                }}\n                getRowId={(params) => params.data.getRecordId()}\n                onGridReady={(e) => {\n                    gridApiRef.current = e.api as any;\n                    if (grid.loading) {\n                        gridApiRef.current?.showLoadingOverlay();\n                    }\n                    sizeColumnsIfSpaceAvailable();\n                    onGridReady();\n                }}\n                initialState={stateRef.current}\n                onStateUpdated={(e) => stateRef.current = {\n                    ...stateRef.current,\n                    ...e.state\n                }}\n                rowHeight={42}\n                columnDefs={agColumns as any}\n                rowData={records}\n            >\n            </AgGridReact>\n            {pagingController.isEnabled &&\n                <Paging />\n            }\n            </>\n        }\n        </div>\n    );\n}"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;AAiBO,MAAM,MAAM,GAAG,MAAK;AACvB,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;AAC3C,IAAA,MAAM,UAAU,GAAG,MAAM,EAAsE,CAAC;AAChG,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAClD,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,yBAAyB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC;AACrI,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;AAC/C,IAAA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,EAAE,yBAAyB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAE1F,MAAM,iBAAiB,GAAG,MAAK;QAC3B,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAC5E,QAAA,OAAO,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC;AACzC,KAAC,CAAA;IAED,MAAM,2BAA2B,GAAG,MAAK;AACrC,QAAA,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;AAC3C,QAAA,IAAI,cAAc,GAAG,oBAAoB,EAAE,EAAE;AACzC,YAAA,UAAU,CAAC,OAAQ,CAAC,gBAAgB,EAAE,CAAC;AAC1C,SAAA;AACL,KAAC,CAAA;AAED,IAAA,MAAM,iBAAiB,GAAG,CAAC,CAAuC,KAAI;AAClE,QAAA,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAG;AAI1E,YAAA,OAAO,IAAI,CAAC;AAChB,SAAC,CAAC,CAAC;QACH,IAAG,CAAC,UAAU,EAAE;YACZ,OAAO;AACV,SAAA;;QAED,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,qBAAqB,EAAE,UAAU,CAAC,CAAA;AACxE,KAAC,CAAA;AACD,IAAA,QACIA,GACI,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,IAAI,CAAkB,gBAAA,CAAA,EAAA,QAAA,EAE1C,SAAS,CAAC,MAAM,GAAG,CAAC;YACrBC,IACC,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,gBAAgB,EAAE,GAAG,KAAK,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,gBAAgB,EAAE,GAAG,KAAK,MAAM;AACvH,wBAAAF,GAAA,CAAC,IAAI,EAAA,EAAA,CAAG,EAEX,IAAI,CAAC,KAAK;wBACPA,GAAC,CAAA,UAAU,EAAC,EAAA,cAAc,EAAE,cAAc,CAAC,KAAK,EAAA,QAAA,EAC5CA,GAAM,CAAA,MAAA,EAAA,EAAA,uBAAuB,EAAE;oCAC3B,MAAM,EAAE,IAAI,CAAC,YAAa;AAC7B,iCAAA,EAAA,CAAI,EACI,CAAA,EAEjBA,GAAC,CAAA,WAAW,EACR,EAAA,WAAW,EACX,IAAA,EAAA,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,EACjC,sBAAsB,EAAE,YAAY,EACpC,uBAAuB,EAAE,cAAc,EACvC,6BAA6B,EAAA,IAAA,EAC7B,aAAa,EAAE,CAAC,CAAC,KAAI;4BACjB,IAAG,CAAC,CAAC,QAAQ,EAAE;gCACX,iBAAiB,CAAC,CAAC,CAAC,CAAC;AACxB,6BAAA;yBACJ,EACD,wBAAwB,EACxB,IAAA,EAAA,aAAa,EAAE,CAAC,CAAC,KAAI;;;AAGjB,4BAAA,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,kBAAkB,EAAE;gCAC7D,OAAO;AACV,6BAAA;AACD,4BAAA,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAK,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAG,CAAC,CAAA;AACnD,yBAAC,EACD,mBAAmB,EAAE,CAAC,CAAC,KAAI;4BACvB,IAAI,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gCAC9C,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAK,CAAC,iBAAiB,EAAE,CAAC,CAAA;AACpD,6BAAA;AACL,yBAAC,EACD,eAAe,EAAE,CAAC,CAAC,KAAI;AACnB,4BAAA,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,YAAY,EAAE;gCACjC,UAAU,CAAC,OAAO,EAAE,aAAa,CAAC,2BAA2B,EAAE,IAAI,CAAC,CAAA;AACvE,6BAAA;AACL,yBAAC,EACD,cAAc,EAAE,CAAC,CAAC,KAAI;4BAClB,UAAU,CAAC,OAAO,EAAE,aAAa,CAAC,2BAA2B,EAAE,KAAK,CAAC,CAAA;yBACxE,EACD,QAAQ,EAAE,CAAC,MAAM,KAAK,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,EAC/C,WAAW,EAAE,CAAC,CAAC,KAAI;AACf,4BAAA,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,GAAU,CAAC;4BAClC,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,gCAAA,UAAU,CAAC,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC5C,6BAAA;AACD,4BAAA,2BAA2B,EAAE,CAAC;AAC9B,4BAAA,WAAW,EAAE,CAAC;AAClB,yBAAC,EACD,YAAY,EAAE,QAAQ,CAAC,OAAO,EAC9B,cAAc,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,OAAO,GAAG;4BACtC,GAAG,QAAQ,CAAC,OAAO;4BACnB,GAAG,CAAC,CAAC,KAAK;AACb,yBAAA,EACD,SAAS,EAAE,EAAE,EACb,UAAU,EAAE,SAAgB,EAC5B,OAAO,EAAE,OAAO,EAAA,CAEN,EACb,gBAAgB,CAAC,SAAS;AACvB,wBAAAA,GAAA,CAAC,MAAM,EAAA,EAAA,CAAG,CAEX,EAAA,CAAA,EAAA,CAED,EACR;AACN;;;;"}

package/dist/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.js

@@ -1 +1,12 @@
-import{jsxs as r,jsx as o}from"react/jsx-runtime";import{Icon as e,Text as t}from"@fluentui/react";import{useGridInstance as s}from"../../../../hooks/useGridInstance.js";import{emptyRecordStyles as i}from"./styles.js";import"react";import"../../../../../GridContext.js";const c=()=>{const c=s().labels;return r("div",Object.assign({className:`${i.root} TALXIS__grid__empty-records`},{children:[o(e,{className:i.icon,iconName:"SearchAndApps"}),o(t,{children:c.norecordsfound()})]}))};export{c as EmptyRecords};
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon, Text } from '@fluentui/react';
+import { useGridInstance } from '../../../../hooks/useGridInstance.js';
+import { emptyRecordStyles } from './styles.js';
+
+const EmptyRecords = () => {
+    const labels = useGridInstance().labels;
+    return (jsxs("div", { className: `${emptyRecordStyles.root} TALXIS__grid__empty-records`, children: [jsx(Icon, { className: emptyRecordStyles.icon, iconName: 'SearchAndApps' }), jsx(Text, { children: labels.norecordsfound() })] }));
+};
+
+export { EmptyRecords };
+//# sourceMappingURL=EmptyRecords.js.map

package/dist/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyRecords.js","sources":["../../../../../../../../src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.tsx"],"sourcesContent":["import React from 'react';\nimport {Icon} from '@fluentui/react';\nimport { useGridInstance } from '../../../../hooks/useGridInstance';\nimport { Text } from '@fluentui/react';\nimport { emptyRecordStyles } from './styles';\n\nexport const EmptyRecords = () => {\n    const labels = useGridInstance().labels;\n\n    return (\n    <div className={`${emptyRecordStyles.root} TALXIS__grid__empty-records`}>\n    <Icon className={emptyRecordStyles.icon} iconName='SearchAndApps' />\n    <Text>{labels.norecordsfound()}</Text>\n    </div>\n    )\n}"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAMO,MAAM,YAAY,GAAG,MAAK;AAC7B,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE,CAAC,MAAM,CAAC;AAExC,IAAA,QACAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,GAAG,iBAAiB,CAAC,IAAI,CAAA,4BAAA,CAA8B,aACvEC,GAAC,CAAA,IAAI,EAAC,EAAA,SAAS,EAAE,iBAAiB,CAAC,IAAI,EAAE,QAAQ,EAAC,eAAe,EAAA,CAAG,EACpEA,GAAC,CAAA,IAAI,EAAE,EAAA,QAAA,EAAA,MAAM,CAAC,cAAc,EAAE,EAAQ,CAAA,CAAA,EAAA,CAChC,EACL;AACL;;;;"}

package/dist/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/styles.js

@@ -1 +1,23 @@
-import{mergeStyleSets as i}from"@fluentui/react";const t=i({root:{display:"flex",flexDirection:"column",gap:10,alignItems:"center",position:"relative",top:18},icon:{fontSize:46},image:{img:{width:"100px"}}});export{t as emptyRecordStyles};
+import { mergeStyleSets } from '@fluentui/react';
+
+const emptyRecordStyles = mergeStyleSets({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+        alignItems: 'center',
+        position: 'relative',
+        top: 18
+    },
+    icon: {
+        fontSize: 46
+    },
+    image: {
+        'img': {
+            width: '100px'
+        }
+    }
+});
+
+export { emptyRecordStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\";\n\nexport const emptyRecordStyles = mergeStyleSets({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 10,\n        alignItems: 'center',\n        position: 'relative',\n        top: 18\n    },\n    icon: {\n        fontSize: 46\n    },\n    image: {\n        'img': {\n            width: '100px'\n        }\n    }\n})"],"names":[],"mappings":";;AAEO,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAC5C,IAAA,IAAI,EAAE;AACF,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,GAAG,EAAE,EAAE;AACP,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,EAAE;AACV,KAAA;AACD,IAAA,IAAI,EAAE;AACF,QAAA,QAAQ,EAAE,EAAE;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,KAAK,EAAE;AACH,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA;AACJ,KAAA;AACJ,CAAA;;;;"}

package/dist/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.js

@@ -1 +1,11 @@
-import{jsx as t}from"react/jsx-runtime";import{useTheme as r}from"@fluentui/react";import{getLoadingOverlayStyles as s}from"./styles.js";const e=()=>{const e=s(r());return t("div",Object.assign({className:e.root},{children:t("div",{className:e.tail})}))};export{e as LoadingOverlay};
+import { jsx } from 'react/jsx-runtime';
+import { useTheme } from '@fluentui/react';
+import { getLoadingOverlayStyles } from './styles.js';
+
+const LoadingOverlay = () => {
+    const styles = getLoadingOverlayStyles(useTheme());
+    return jsx("div", { className: styles.root, children: jsx("div", { className: styles.tail }) });
+};
+
+export { LoadingOverlay };
+//# sourceMappingURL=LoadingOverlay.js.map

package/dist/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.js","sources":["../../../../../../../../src/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.tsx"],"sourcesContent":["import { useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { getLoadingOverlayStyles } from './styles';\n\nexport const LoadingOverlay = () => {\n    const styles = getLoadingOverlayStyles(useTheme());\n    return <div className={styles.root}>\n        <div className={styles.tail} />\n    </div>\n}"],"names":["_jsx"],"mappings":";;;;AAIO,MAAM,cAAc,GAAG,MAAK;AAC/B,IAAA,MAAM,MAAM,GAAG,uBAAuB,CAAC,QAAQ,EAAE,CAAC,CAAC;AACnD,IAAA,OAAOA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAC9BA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,CAAI,GAC7B,CAAA;AACV;;;;"}

package/dist/components/Grid/core/components/AgGrid/components/LoadingOverlay/styles.js

@@ -1 +1,82 @@
-import{keyframes as t,mergeStyleSets as a}from"@fluentui/react";const e=a=>t({"0%":{transform:"rotate(0deg)"},"50%":{transform:`rotate(${a}deg)`},"100%":{transform:"rotate(0deg)"}}),i=t({"0%":{transform:"rotate(-135deg)"},"50%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(225deg)"}}),n=t({"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}),o=t=>a({root:{borderWidth:"3px",position:"relative",border:"none",maskImage:"radial-gradient(closest-side, transparent calc(100% - 3px), white calc(100% - 3px) calc(100% - 1px), transparent 100%)",backgroundColor:t.palette.themeLighter,color:t.palette.themePrimary,width:36,height:36,animationName:n,animationDuration:"1.5s",animationIterationCount:"infinite",animationTimingFunction:"linear"},tail:{position:"absolute",display:"block",width:"100%",height:"100%",maskImage:"conic-gradient(transparent 105deg, white 105deg)",animationDuration:"1.5s",animationIterationCount:"infinite",animationTimingFunction:"cubic-bezier(0.33,0,0.67,1)",animationName:i,"::after, ::before":{content:"''",position:"absolute",display:"block",width:"100%",height:"100%",animation:"inherit",backgroundImage:"conic-gradient(currentcolor 135deg, transparent 135deg)"},"::after":{animationName:e(225)},"::before":{maskImage:"inherit",animationName:e(105)}}});export{o as getLoadingOverlayStyles};
+import { keyframes, mergeStyleSets } from '@fluentui/react';
+
+const getSpinnerAnimation = (degValue) => {
+    return keyframes({
+        '0%': {
+            transform: 'rotate(0deg)'
+        },
+        '50%': {
+            transform: `rotate(${degValue}deg)`
+        },
+        '100%': {
+            transform: 'rotate(0deg)'
+        }
+    });
+};
+const counterSpinner = keyframes({
+    '0%': {
+        transform: 'rotate(-135deg)'
+    },
+    '50%': {
+        transform: `rotate(0deg)`
+    },
+    '100%': {
+        transform: 'rotate(225deg)'
+    }
+});
+const rotate = keyframes({
+    '0%': {
+        transform: 'rotate(0deg)'
+    },
+    '100%': {
+        transform: 'rotate(360deg)'
+    }
+});
+const getLoadingOverlayStyles = (theme) => {
+    return mergeStyleSets({
+        root: {
+            borderWidth: '3px',
+            position: 'relative',
+            border: 'none',
+            maskImage: 'radial-gradient(closest-side, transparent calc(100% - 3px), white calc(100% - 3px) calc(100% - 1px), transparent 100%)',
+            backgroundColor: theme.palette.themeLighter,
+            color: theme.palette.themePrimary,
+            width: 36,
+            height: 36,
+            animationName: rotate,
+            animationDuration: '1.5s',
+            animationIterationCount: 'infinite',
+            animationTimingFunction: 'linear'
+        },
+        tail: {
+            position: 'absolute',
+            display: 'block',
+            width: '100%',
+            height: '100%',
+            maskImage: 'conic-gradient(transparent 105deg, white 105deg)',
+            animationDuration: '1.5s',
+            animationIterationCount: 'infinite',
+            animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',
+            animationName: counterSpinner,
+            '::after, ::before': {
+                content: "''",
+                position: 'absolute',
+                display: 'block',
+                width: '100%',
+                height: '100%',
+                animation: 'inherit',
+                backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)',
+            },
+            '::after': {
+                animationName: getSpinnerAnimation(225),
+            },
+            '::before': {
+                maskImage: 'inherit',
+                animationName: getSpinnerAnimation(105)
+            },
+        }
+    });
+};
+
+export { getLoadingOverlayStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/core/components/AgGrid/components/LoadingOverlay/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Grid/core/components/AgGrid/components/LoadingOverlay/styles.ts"],"sourcesContent":["import { ITheme, keyframes, mergeStyleSets } from \"@fluentui/react\";\n\nconst getSpinnerAnimation = (degValue: number) => {\n    return keyframes({\n        '0%': {\n            transform: 'rotate(0deg)'\n        },\n        '50%': {\n            transform: `rotate(${degValue}deg)`\n        },\n        '100%': {\n            transform: 'rotate(0deg)'\n        }\n    })\n}\n\nconst counterSpinner = keyframes({\n    '0%': {\n        transform: 'rotate(-135deg)'\n    },\n    '50%': {\n        transform: `rotate(0deg)`\n    },\n    '100%': {\n        transform: 'rotate(225deg)'\n    }\n})\n\nconst rotate = keyframes({\n    '0%': {\n        transform: 'rotate(0deg)'\n    },\n    '100%': {\n        transform: 'rotate(360deg)'\n    }\n})\n\nexport const getLoadingOverlayStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        root: {\n            borderWidth: '3px',\n            position: 'relative',\n            border: 'none',\n            maskImage: 'radial-gradient(closest-side, transparent calc(100% - 3px), white calc(100% - 3px) calc(100% - 1px), transparent 100%)',\n            backgroundColor: theme.palette.themeLighter,\n            color: theme.palette.themePrimary,\n            width: 36,\n            height: 36,\n            animationName: rotate,\n            animationDuration: '1.5s',\n            animationIterationCount: 'infinite',\n            animationTimingFunction: 'linear'\n        },\n        tail: {\n            position: 'absolute',\n            display: 'block',\n            width: '100%',\n            height: '100%',\n            maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n            animationDuration: '1.5s',\n            animationIterationCount: 'infinite',\n            animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n            animationName: counterSpinner,\n            '::after, ::before': {\n                content: \"''\",\n                position: 'absolute',\n                display: 'block',\n                width: '100%',\n                height: '100%',\n                animation: 'inherit',\n                backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)',\n            },\n            '::after': {\n                animationName: getSpinnerAnimation(225),\n            },\n            '::before': {\n                maskImage: 'inherit',\n                animationName: getSpinnerAnimation(105)\n            },\n        }\n    })\n}"],"names":[],"mappings":";;AAEA,MAAM,mBAAmB,GAAG,CAAC,QAAgB,KAAI;AAC7C,IAAA,OAAO,SAAS,CAAC;AACb,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,cAAc;AAC5B,SAAA;AACD,QAAA,KAAK,EAAE;YACH,SAAS,EAAE,CAAU,OAAA,EAAA,QAAQ,CAAM,IAAA,CAAA;AACtC,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,SAAS,EAAE,cAAc;AAC5B,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,CAAC,CAAA;AAED,MAAM,cAAc,GAAG,SAAS,CAAC;AAC7B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,iBAAiB;AAC/B,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,SAAS,EAAE,CAAc,YAAA,CAAA;AAC5B,KAAA;AACD,IAAA,MAAM,EAAE;AACJ,QAAA,SAAS,EAAE,gBAAgB;AAC9B,KAAA;AACJ,CAAA,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,SAAS,CAAC;AACrB,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,cAAc;AAC5B,KAAA;AACD,IAAA,MAAM,EAAE;AACJ,QAAA,SAAS,EAAE,gBAAgB;AAC9B,KAAA;AACJ,CAAA,CAAC,CAAA;AAEW,MAAA,uBAAuB,GAAG,CAAC,KAAa,KAAI;AACrD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,wHAAwH;AACnI,YAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AAC3C,YAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACjC,YAAA,KAAK,EAAE,EAAE;AACT,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,aAAa,EAAE,MAAM;AACrB,YAAA,iBAAiB,EAAE,MAAM;AACzB,YAAA,uBAAuB,EAAE,UAAU;AACnC,YAAA,uBAAuB,EAAE,QAAQ;AACpC,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,kDAAkD;AAC7D,YAAA,iBAAiB,EAAE,MAAM;AACzB,YAAA,uBAAuB,EAAE,UAAU;AACnC,YAAA,uBAAuB,EAAE,6BAA6B;AACtD,YAAA,aAAa,EAAE,cAAc;AAC7B,YAAA,mBAAmB,EAAE;AACjB,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,SAAS,EAAE,SAAS;AACpB,gBAAA,eAAe,EAAE,yDAAyD;AAC7E,aAAA;AACD,YAAA,SAAS,EAAE;AACP,gBAAA,aAAa,EAAE,mBAAmB,CAAC,GAAG,CAAC;AAC1C,aAAA;AACD,YAAA,UAAU,EAAE;AACR,gBAAA,SAAS,EAAE,SAAS;AACpB,gBAAA,aAAa,EAAE,mBAAmB,CAAC,GAAG,CAAC;AAC1C,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/core/components/AgGrid/controllers/useAgGridController.js

@@ -1 +1,169 @@
-import{__awaiter as o}from"tslib";import{useRef as e,useMemo as t,useState as r,useEffect as i}from"react";import{useGridController as n}from"../../../controllers/useGridController.js";import{useGridInstance as s}from"../../../hooks/useGridInstance.js";import{EditableCell as l}from"../../Cell/EditableCell/EditableCell.js";import{ReadOnlyCell as m}from"../../Cell/ReadOnlyCell/ReadOnlyCell.js";import{ColumnHeader as a}from"../../ColumnHeader/ColumnHeader.js";import{GlobalCheckBox as p}from"../../ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js";import{AgGrid as u}from"../model/AgGrid.js";import{ModuleRegistry as d}from"@ag-grid-community/core";import{ClientSideRowModelModule as c}from"@ag-grid-community/client-side-row-model";import{useDebounce as C}from"use-debounce";import"@ag-grid-community/styles/ag-grid.css";import"@ag-grid-community/styles/ag-theme-balham.css";import{usePagingController as j}from"../../../../paging/controllers/usePagingController.js";import{useStateValues as g}from"@talxis/react-components";import"fast-deep-equal/es6";import"../../../../GridContext.js";import"react/jsx-runtime";import"../../../enums/DataType.js";import"../../../services/RecordUpdateService/controllers/useRecordUpdateServiceController.js";import"../../Component/Component.js";import"../../../../../DateTime/DateTime.js";import"@fluentui/react";import"../../../../../DateTime/styles.js";import"../../../../../DateTime/hooks/useDateTime.js";import"../../../../../../hooks/useInputBasedControl.js";import"../../../../../../hooks/useControl.js";import"merge-anything";import"liquidjs";import"../../../../../../hooks/useControlTheme.js";import"../../../../../../utils/Theme.js";import"@fluentui/react-migration-v8-v9";import"../../../../../../hooks/useControlSizing.js";import"dayjs";import"dayjs/plugin/utc";import"dayjs/plugin/customParseFormat";import"../../../../../DateTime/translations.js";import"../../../../../DateTime/components/Calendar.js";import"@fluentui/react/lib/Calendar";import"../../../../../Decimal/Decimal.js";import"numeral";import"../../../../../../utils/Numeral.js";import"../../../../../../constants.js";import"../../../../../Decimal/components/ArrowButtons.js";import"../../../../../Decimal/components/styles.js";import"../../../../../Lookup/Lookup.js";import"../../../../../Lookup/hooks/useLookup.js";import"../../../../../Lookup/translations.js";import"../../../../../Lookup/hooks/useFetchXml.js";import"@talxis/client-libraries";import"../../../../../Lookup/components/TargetSelector.js";import"@fluentui/react/lib/Text";import"../../../../../Lookup/styles.js";import"../../../../../Lookup/hooks/useLoadedEntities.js";import"../../../../../../hooks/useMouseOver.js";import"../../../../../Lookup/components/RecordCreator.js";import"../../../../../../hooks/useFocusIn.js";import"../../../../../MultiSelectOptionSet/MultiSelectOptionSet.js";import"../../../../../OptionSet/OptionSet.js";import"../../../../../TextField/TextField.js";import"../../../../../TwoOptions/TwoOptions.js";import"../../../../../Duration/Duration.js";import"../../../../../Duration/translations.js";import"../../Component/controller/useComponentController.js";import"../../Component/model/Component.js";import"../../../../validation/model/ColumnValidation.js";import"validator/es/lib/isEmail";import"validator/es/lib/isURL";import"../../../model/GridDependency.js";import"../../Cell/ReadOnlyCell/styles.js";import"../../Cell/Commands/Commands.js";import"../../Cell/Commands/useCommands.js";import"../../Cell/Commands/Icon.js";import"external-svg-loader";import"../../Cell/Commands/styles.js";import"../../Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.js";import"../../Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.js";import"color";import"../../../../validation/controllers/useRecordValidationController.js";import"../../../../selection/controllers/useSelectionController.js";import"../../../../constants.js";import"../../../hooks/useRerender.js";import"../../../../filtering/components/FilterCallout/FilterCallout.js";import"../../../../filtering/components/FilterCallout/styles.js";import"../../../../filtering/controller/useColumnFilterConditionController.js";import"../../../hooks/useRefreshCallback.js";import"../../../../filtering/utils/FilteringUtilts.js";import"../../../enums/ConditionOperator.js";import"../../../../filtering/constants.js";import"../../../../filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.js";import"../../../../filtering/components/FilterCallout/components/ConditionValue/ConditionValue.js";import"../../../../filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.js";import"../../../../sorting/components/SortingContextualMenu/SortingContextualMenu.js";import"../../../../sorting/components/SortingContextualMenu/styles.js";import"../../../../sorting/controllers/useColumnSortingController.js";import"../../ColumnHeader/styles.js";import"../../ColumnHeader/components/GlobalCheckbox/styles.js";d.registerModules([c]);const f=d=>{var c;const f=s(),v=j(),y=e(!1),h=t((()=>new u(f,d)),[]),{columns:k,records:b}=n(),[O,R]=r([]),[S,w,x]=g(f.state),[L]=C(b,0);null===(c=d.current)||void 0===c||c.refreshCells(),i((()=>{var o;y.current&&(h.selectRows(),null===(o=d.current)||void 0===o||o.refreshHeader())}),[f.dataset.getSelectedRecordIds().join("")]),i((()=>{if(0===k.length)return;const o=h.columns;for(const e of o)e.cellRenderer=m,e.cellEditor=l,e.headerComponent=a,"__checkbox"===e.field&&(e.lockPosition="left",e.headerComponent=p);R(o)}),[k]),i((()=>{d.current&&(f.loading?d.current.showLoadingOverlay():(d.current.hideOverlay(),setTimeout((()=>{var o;0===f.records.length&&(null===(o=d.current)||void 0===o||o.showNoRowsOverlay())}),0)))}),[f.loading]),i((()=>{d.current&&d.current.ensureIndexVisible(0)}),[v.pageNumber]),i((()=>{const o=o=>{if(f.recordUpdateService.isDirty)return o.preventDefault(),"Unsaved changes!"};return window.addEventListener("beforeunload",o),()=>{window.removeEventListener("beforeunload",o),d.current&&(S.current.__updatedRecords=f.recordUpdateService.updatedRecords,f.paging.pageSize!==h.initialPageSize&&(S.current.initialPageSize=h.initialPageSize),f.pcfContext.mode.setControlState(w()))}}),[]),i((()=>{const e=e=>o(void 0,void 0,void 0,(function*(){var o,t,r;if((e.ctrlKey||e.metaKey)&&"c"===e.key.toLowerCase()){const e=null===(o=d.current)||void 0===o?void 0:o.getFocusedCell();if(!e)return;const i=null===(t=d.current)||void 0===t?void 0:t.getDisplayedRowAtIndex(e.rowIndex),n=null===(r=d.current)||void 0===r?void 0:r.getCellValue({rowNode:i,colKey:e.column.getColId(),useFormatter:!0});navigator.clipboard.writeText(null!=n?n:"")}}));return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[]),i((()=>{const o=o=>{var e;try{((o,e)=>{let t=o;for(;!t.classList.contains("ag-theme-balham");){if(t.classList.contains(e))return!0;if("HTML"===t.tagName)return!1;if(t=t.parentElement,!t)return!0}return!1})(o.target,"ag-cell")||null===(e=d.current)||void 0===e||e.stopEditing()}catch(o){}};return document.addEventListener("click",o),()=>{document.removeEventListener("click",o)}}),[]);return{agColumns:O,records:L,maxNumberOfVisibleRecords:h.maxNumberOfVisibleRecords,stateRef:S,getTotalColumnsWidth:()=>h.getTotalColumnsWidth(),onGridReady:()=>{y.current=!0,x(Object.assign(Object.assign({},d.current.getState()),{initialPageSize:void 0,__updatedRecords:[]})),h.selectRows()}}};export{f as useAgGridController};
+import { useRef, useMemo, useState, useEffect } from 'react';
+import { useGridController } from '../../../controllers/useGridController.js';
+import { useGridInstance } from '../../../hooks/useGridInstance.js';
+import { EditableCell } from '../../Cell/EditableCell/EditableCell.js';
+import { ReadOnlyCell } from '../../Cell/ReadOnlyCell/ReadOnlyCell.js';
+import { ColumnHeader } from '../../ColumnHeader/ColumnHeader.js';
+import { GlobalCheckBox } from '../../ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js';
+import { AgGrid } from '../model/AgGrid.js';
+import { ModuleRegistry } from '@ag-grid-community/core';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { useDebounce } from 'use-debounce';
+import '@ag-grid-community/styles/ag-grid.css';
+import '@ag-grid-community/styles/ag-theme-balham.css';
+import { usePagingController } from '../../../../paging/controllers/usePagingController.js';
+import { useStateValues } from '@talxis/react-components';
+
+ModuleRegistry.registerModules([ClientSideRowModelModule]);
+const useAgGridController = (gridApiRef) => {
+    const grid = useGridInstance();
+    const pagingController = usePagingController();
+    const agGridReadyRef = useRef(false);
+    const agGrid = useMemo(() => new AgGrid(grid, gridApiRef), []);
+    const { columns, records } = useGridController();
+    const [agColumns, setAgColumns] = useState([]);
+    const [stateValuesRef, getNewStateValues, setDefaultStateValues] = useStateValues(grid.state);
+    //this is to prevent AgGrid from throwing errors in some rerender edge cases - https://github.com/ag-grid/ag-grid/issues/6013
+    const [agRecords] = useDebounce(records, 0);
+    gridApiRef.current?.refreshCells();
+    useEffect(() => {
+        if (!agGridReadyRef.current) {
+            return;
+        }
+        agGrid.selectRows();
+        gridApiRef.current?.refreshHeader();
+    }, [grid.dataset.getSelectedRecordIds().join('')]);
+    useEffect(() => {
+        if (columns.length === 0) {
+            return;
+        }
+        const _agColumns = agGrid.columns;
+        for (const agColumn of _agColumns) {
+            agColumn.cellRenderer = ReadOnlyCell;
+            agColumn.cellEditor = EditableCell;
+            agColumn.headerComponent = ColumnHeader;
+            if (agColumn.field === '__checkbox') {
+                agColumn.lockPosition = 'left';
+                agColumn.headerComponent = GlobalCheckBox;
+            }
+        }
+        setAgColumns(_agColumns);
+    }, [columns]);
+    //this might be very Portal centric
+    useEffect(() => {
+        if (!gridApiRef.current) {
+            return;
+        }
+        if (grid.loading) {
+            gridApiRef.current.showLoadingOverlay();
+            return;
+        }
+        gridApiRef.current.hideOverlay();
+        setTimeout(() => {
+            if (grid.records.length === 0) {
+                gridApiRef.current?.showNoRowsOverlay();
+            }
+        }, 0);
+    }, [grid.loading]);
+    useEffect(() => {
+        if (!gridApiRef.current) {
+            return;
+        }
+        gridApiRef.current.ensureIndexVisible(0);
+    }, [pagingController.pageNumber]);
+    useEffect(() => {
+        const onBeforeUnload = (ev) => {
+            if (grid.recordUpdateService.isDirty) {
+                ev.preventDefault();
+                return 'Unsaved changes!';
+            }
+        };
+        window.addEventListener('beforeunload', onBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', onBeforeUnload);
+            if (!gridApiRef.current) {
+                return;
+            }
+            stateValuesRef.current.__updatedRecords = grid.recordUpdateService.updatedRecords;
+            if (grid.paging.pageSize !== agGrid.initialPageSize) {
+                stateValuesRef.current.initialPageSize = agGrid.initialPageSize;
+            }
+            grid.pcfContext.mode.setControlState(getNewStateValues());
+        };
+    }, []);
+    //this can be replaced with native functionality if we decide to use ag grid enterprise
+    useEffect(() => {
+        const onKeyDownHandler = async (event) => {
+            // if control key(windows) or command key(iOS) + S key is clicked
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
+                const cell = gridApiRef.current?.getFocusedCell();
+                if (!cell) {
+                    return;
+                }
+                const row = gridApiRef.current?.getDisplayedRowAtIndex(cell.rowIndex);
+                const formattedValue = gridApiRef.current?.getCellValue({
+                    rowNode: row,
+                    colKey: cell.column.getColId(),
+                    useFormatter: true
+                });
+                navigator.clipboard.writeText(formattedValue ?? "");
+            }
+        };
+        window.addEventListener('keydown', onKeyDownHandler);
+        return () => {
+            window.removeEventListener('keydown', onKeyDownHandler);
+        };
+    }, []);
+    //TODO: find a better way to achieve this
+    useEffect(() => {
+        const globalClickHandler = (e) => {
+            const hasAncestorWithClass = (element, className) => {
+                let parent = element;
+                while (!parent.classList.contains('ag-theme-balham')) {
+                    if (parent.classList.contains(className)) {
+                        return true;
+                    }
+                    if (parent.tagName === 'HTML') {
+                        return false;
+                    }
+                    parent = parent.parentElement;
+                    if (!parent) {
+                        return true;
+                    }
+                }
+                return false;
+            };
+            try {
+                if (!hasAncestorWithClass(e.target, 'ag-cell')) {
+                    gridApiRef.current?.stopEditing();
+                }
+            }
+            catch (err) {
+            }
+        };
+        document.addEventListener('click', globalClickHandler);
+        return () => {
+            document.removeEventListener('click', globalClickHandler);
+        };
+    }, []);
+    const onGridReady = () => {
+        agGridReadyRef.current = true;
+        setDefaultStateValues({
+            ...gridApiRef.current.getState(),
+            initialPageSize: undefined,
+            __updatedRecords: []
+        });
+        agGrid.selectRows();
+    };
+    return {
+        agColumns: agColumns,
+        records: agRecords,
+        maxNumberOfVisibleRecords: agGrid.maxNumberOfVisibleRecords,
+        stateRef: stateValuesRef,
+        getTotalColumnsWidth: () => agGrid.getTotalColumnsWidth(),
+        onGridReady: onGridReady
+    };
+};
+
+export { useAgGridController };
+//# sourceMappingURL=useAgGridController.js.map

package/dist/components/Grid/core/components/AgGrid/controllers/useAgGridController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAgGridController.js","sources":["../../../../../../../src/components/Grid/core/components/AgGrid/controllers/useAgGridController.ts"],"sourcesContent":["import { ColDef, GridApi, GridState } from \"@ag-grid-community/core\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { IEntityRecord } from \"../../../../interfaces\";\nimport { useGridController } from \"../../../controllers/useGridController\"\nimport { useGridInstance } from \"../../../hooks/useGridInstance\";\nimport { EditableCell } from \"../../Cell/EditableCell/EditableCell\";\nimport { ReadOnlyCell } from \"../../Cell/ReadOnlyCell/ReadOnlyCell\";\nimport { ColumnHeader } from \"../../ColumnHeader/ColumnHeader\";\nimport { GlobalCheckBox } from \"../../ColumnHeader/components/GlobalCheckbox/GlobalCheckbox\";\nimport { AgGrid } from \"../model/AgGrid\";\nimport { ModuleRegistry } from '@ag-grid-community/core';\nimport { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';\nimport { useDebounce } from 'use-debounce';\nimport \"@ag-grid-community/styles/ag-grid.css\";\nimport \"@ag-grid-community/styles/ag-theme-balham.css\";\nimport { usePagingController } from \"../../../../paging/controllers/usePagingController\";\nimport { useStateValues } from \"@talxis/react-components\";\nimport { IUpdatedRecord } from \"../../../services/RecordUpdateService/model/RecordUpdateService\";\nModuleRegistry.registerModules([ClientSideRowModelModule]);\n\ninterface IAgGridController {\n    agColumns: ColDef[],\n    records: IEntityRecord[],\n    maxNumberOfVisibleRecords: number;\n    stateRef: React.MutableRefObject<IAgGridState>\n    getTotalColumnsWidth: () => number,\n    onGridReady: () => void;\n}\n\ninterface IAgGridState extends GridState {\n    '__updatedRecords'?: IUpdatedRecord[];\n    initialPageSize?: number;\n}\n\nexport const useAgGridController = (gridApiRef: React.MutableRefObject<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord> | undefined>): IAgGridController => {\n    const grid = useGridInstance();\n    const pagingController = usePagingController();\n    const agGridReadyRef = useRef<boolean>(false);\n    const agGrid = useMemo(() => new AgGrid(grid, gridApiRef), [])\n    const { columns, records } = useGridController();\n    const [agColumns, setAgColumns] = useState<ColDef[]>([]);\n    const [stateValuesRef, getNewStateValues, setDefaultStateValues] = useStateValues<IAgGridState>(grid.state as IAgGridState);\n    //this is to prevent AgGrid from throwing errors in some rerender edge cases - https://github.com/ag-grid/ag-grid/issues/6013\n    const [agRecords] = useDebounce(records, 0);\n    gridApiRef.current?.refreshCells();\n\n    useEffect(() => {\n        if (!agGridReadyRef.current) {\n            return;\n        }\n        agGrid.selectRows();\n        gridApiRef.current?.refreshHeader();\n    }, [grid.dataset.getSelectedRecordIds().join('')]);\n\n    useEffect(() => {\n        if (columns.length === 0) {\n            return;\n        }\n        const _agColumns = agGrid.columns;\n        for (const agColumn of _agColumns) {\n            agColumn.cellRenderer = ReadOnlyCell;\n            agColumn.cellEditor = EditableCell;\n            agColumn.headerComponent = ColumnHeader;\n\n            if (agColumn.field === '__checkbox') {\n                agColumn.lockPosition = 'left';\n                agColumn.headerComponent = GlobalCheckBox\n            }\n        }\n        setAgColumns(_agColumns);\n    }, [columns]);\n\n    //this might be very Portal centric\n    useEffect(() => {\n        if (!gridApiRef.current) {\n            return;\n        }\n        if (grid.loading) {\n            gridApiRef.current.showLoadingOverlay();\n            return;\n        }\n        gridApiRef.current.hideOverlay();\n        setTimeout(() => {\n            if (grid.records.length === 0) {\n                gridApiRef.current?.showNoRowsOverlay();\n            }\n        }, 0);\n    }, [grid.loading]);\n\n\n    useEffect(() => {\n        if (!gridApiRef.current) {\n            return;\n        }\n        gridApiRef.current.ensureIndexVisible(0)\n    }, [pagingController.pageNumber]);\n\n    useEffect(() => {\n        const onBeforeUnload = (ev: BeforeUnloadEvent) => {\n            if (grid.recordUpdateService.isDirty) {\n                ev.preventDefault();\n                return 'Unsaved changes!'\n            }\n        }\n        window.addEventListener('beforeunload', onBeforeUnload);\n        return () => {\n            window.removeEventListener('beforeunload', onBeforeUnload);\n            if (!gridApiRef.current) {\n                return;\n            }\n            stateValuesRef.current.__updatedRecords = grid.recordUpdateService.updatedRecords;\n            if(grid.paging.pageSize !== agGrid.initialPageSize) {\n                stateValuesRef.current.initialPageSize = agGrid.initialPageSize; \n            }\n            grid.pcfContext.mode.setControlState(getNewStateValues());\n        }\n    }, []);\n\n    //this can be replaced with native functionality if we decide to use ag grid enterprise\n    useEffect(() => {\n        const onKeyDownHandler = async (event: KeyboardEvent) => {\n            // if control key(windows) or command key(iOS) + S key is clicked\n            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {\n                const cell = gridApiRef.current?.getFocusedCell();\n                if (!cell) {\n                    return;\n                }\n                const row = gridApiRef.current?.getDisplayedRowAtIndex(cell.rowIndex);\n                const formattedValue = gridApiRef.current?.getCellValue({\n                    rowNode: row!,\n                    colKey: cell.column.getColId(),\n                    useFormatter: true\n                })\n                navigator.clipboard.writeText(formattedValue ?? \"\");\n            }\n        }\n        window.addEventListener('keydown', onKeyDownHandler)\n        return () => {\n            window.removeEventListener('keydown', onKeyDownHandler);\n        }\n    }, []);\n\n    //TODO: find a better way to achieve this\n    useEffect(() => {\n        const globalClickHandler = (e: MouseEvent) => {\n            const hasAncestorWithClass = (element: HTMLElement, className: string): boolean => {\n                let parent = element;\n                while (!parent.classList.contains('ag-theme-balham')) {\n                    if (parent.classList.contains(className)) {\n                        return true;\n                    }\n                    if (parent.tagName === 'HTML') {\n                        return false;\n                    }\n                    parent = parent.parentElement!;\n                    if (!parent) {\n                        return true;\n                    }\n                }\n                return false;\n            };\n            try {\n                if (!hasAncestorWithClass(e.target as HTMLElement, 'ag-cell')) {\n                    gridApiRef.current?.stopEditing();\n                }\n            }\n            catch (err) {\n            }\n        }\n        document.addEventListener('click', globalClickHandler)\n        return () => {\n            document.removeEventListener('click', globalClickHandler);\n        }\n    }, []);\n\n    const onGridReady = () => {\n        agGridReadyRef.current = true;\n        setDefaultStateValues({\n            ...gridApiRef.current!.getState(),\n            initialPageSize: undefined,\n            __updatedRecords: []\n        });\n        agGrid.selectRows();\n    }\n\n    return {\n        agColumns: agColumns,\n        records: agRecords,\n        maxNumberOfVisibleRecords: agGrid.maxNumberOfVisibleRecords,\n        stateRef: stateValuesRef,\n        getTotalColumnsWidth: () => agGrid.getTotalColumnsWidth(),\n        onGridReady: onGridReady\n    }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA,cAAc,CAAC,eAAe,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC;AAgB9C,MAAA,mBAAmB,GAAG,CAAC,UAAkH,KAAuB;AACzK,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;AAC/C,IAAA,MAAM,cAAc,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;AAC9C,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,EAAE,EAAE,CAAC,CAAA;IAC9D,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;AACzD,IAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,EAAE,qBAAqB,CAAC,GAAG,cAAc,CAAe,IAAI,CAAC,KAAqB,CAAC,CAAC;;IAE5H,MAAM,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;AAC5C,IAAA,UAAU,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC;IAEnC,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;YACzB,OAAO;AACV,SAAA;QACD,MAAM,CAAC,UAAU,EAAE,CAAC;AACpB,QAAA,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,CAAC;AACxC,KAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAEnD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YACtB,OAAO;AACV,SAAA;AACD,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;AAClC,QAAA,KAAK,MAAM,QAAQ,IAAI,UAAU,EAAE;AAC/B,YAAA,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AACrC,YAAA,QAAQ,CAAC,UAAU,GAAG,YAAY,CAAC;AACnC,YAAA,QAAQ,CAAC,eAAe,GAAG,YAAY,CAAC;AAExC,YAAA,IAAI,QAAQ,CAAC,KAAK,KAAK,YAAY,EAAE;AACjC,gBAAA,QAAQ,CAAC,YAAY,GAAG,MAAM,CAAC;AAC/B,gBAAA,QAAQ,CAAC,eAAe,GAAG,cAAc,CAAA;AAC5C,aAAA;AACJ,SAAA;QACD,YAAY,CAAC,UAAU,CAAC,CAAC;AAC7B,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;;IAGd,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YACrB,OAAO;AACV,SAAA;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;AACd,YAAA,UAAU,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC;YACxC,OAAO;AACV,SAAA;AACD,QAAA,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QACjC,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;AAC3B,gBAAA,UAAU,CAAC,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAC3C,aAAA;SACJ,EAAE,CAAC,CAAC,CAAC;AACV,KAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAGnB,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YACrB,OAAO;AACV,SAAA;AACD,QAAA,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAA;AAC5C,KAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAElC,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,CAAC,EAAqB,KAAI;AAC7C,YAAA,IAAI,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE;gBAClC,EAAE,CAAC,cAAc,EAAE,CAAC;AACpB,gBAAA,OAAO,kBAAkB,CAAA;AAC5B,aAAA;AACL,SAAC,CAAA;AACD,QAAA,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;AACxD,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;AAC3D,YAAA,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;gBACrB,OAAO;AACV,aAAA;YACD,cAAc,CAAC,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,cAAc,CAAC;YAClF,IAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,eAAe,EAAE;gBAChD,cAAc,CAAC,OAAO,CAAC,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC;AACnE,aAAA;YACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9D,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;;IAGP,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,gBAAgB,GAAG,OAAO,KAAoB,KAAI;;AAEpD,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,KAAK,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;gBACrE,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;gBAClD,IAAI,CAAC,IAAI,EAAE;oBACP,OAAO;AACV,iBAAA;AACD,gBAAA,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,EAAE,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACtE,gBAAA,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC;AACpD,oBAAA,OAAO,EAAE,GAAI;AACb,oBAAA,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AAC9B,oBAAA,YAAY,EAAE,IAAI;AACrB,iBAAA,CAAC,CAAA;gBACF,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC;AACvD,aAAA;AACL,SAAC,CAAA;AACD,QAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;AACpD,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;AAC5D,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;;IAGP,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,kBAAkB,GAAG,CAAC,CAAa,KAAI;AACzC,YAAA,MAAM,oBAAoB,GAAG,CAAC,OAAoB,EAAE,SAAiB,KAAa;gBAC9E,IAAI,MAAM,GAAG,OAAO,CAAC;gBACrB,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE;oBAClD,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AACtC,wBAAA,OAAO,IAAI,CAAC;AACf,qBAAA;AACD,oBAAA,IAAI,MAAM,CAAC,OAAO,KAAK,MAAM,EAAE;AAC3B,wBAAA,OAAO,KAAK,CAAC;AAChB,qBAAA;AACD,oBAAA,MAAM,GAAG,MAAM,CAAC,aAAc,CAAC;oBAC/B,IAAI,CAAC,MAAM,EAAE;AACT,wBAAA,OAAO,IAAI,CAAC;AACf,qBAAA;AACJ,iBAAA;AACD,gBAAA,OAAO,KAAK,CAAC;AACjB,aAAC,CAAC;YACF,IAAI;gBACA,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAqB,EAAE,SAAS,CAAC,EAAE;AAC3D,oBAAA,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC;AACrC,iBAAA;AACJ,aAAA;AACD,YAAA,OAAO,GAAG,EAAE;AACX,aAAA;AACL,SAAC,CAAA;AACD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAA;AACtD,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;AAC9D,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,MAAK;AACrB,QAAA,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;AAC9B,QAAA,qBAAqB,CAAC;AAClB,YAAA,GAAG,UAAU,CAAC,OAAQ,CAAC,QAAQ,EAAE;AACjC,YAAA,eAAe,EAAE,SAAS;AAC1B,YAAA,gBAAgB,EAAE,EAAE;AACvB,SAAA,CAAC,CAAC;QACH,MAAM,CAAC,UAAU,EAAE,CAAC;AACxB,KAAC,CAAA;IAED,OAAO;AACH,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,OAAO,EAAE,SAAS;QAClB,yBAAyB,EAAE,MAAM,CAAC,yBAAyB;AAC3D,QAAA,QAAQ,EAAE,cAAc;AACxB,QAAA,oBAAoB,EAAE,MAAM,MAAM,CAAC,oBAAoB,EAAE;AACzD,QAAA,WAAW,EAAE,WAAW;KAC3B,CAAA;AACL;;;;"}