@talxis/base-controls 1.2501.10 → 1.2503.1

package/dist/components/Grid/core/components/Save/components/ChangeEditor/components/ChangeGrid/ChangeGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChangeGrid.js","sources":["../../../../../../../../../../src/components/Grid/core/components/Save/components/ChangeEditor/components/ChangeGrid/ChangeGrid.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { useGridInstance } from \"../../../../../../hooks/useGridInstance\";\nimport {\n    Dataset,\n    DataTypes,\n    IColumn,\n    IDataset,\n    IRecordChange,\n    MemoryDataProvider,\n} from \"@talxis/client-libraries\";\nimport { DatasetControl } from \"../../../../../../../../DatasetControl\";\nimport { useTheme } from \"@fluentui/react\";\nimport { getChangeGridStyles } from \"./styles\";\n\ninterface IChangeGrid {\n    recordChange: IRecordChange;\n    onDatasetReady: (dataset: IDataset) => void;\n    onDatasetDestroyed: (dataset: IDataset) => void;\n    onIsSaving: (value: boolean) => void;\n}\n\nexport const ChangeGrid = (props: IChangeGrid) => {\n    const fieldChangesRef = useRef(props.recordChange.columns);\n    fieldChangesRef.current = props.recordChange.columns;\n    const baseRecord = props.recordChange.record;\n    const grid = useGridInstance();\n    const changedColumns = fieldChangesRef.current.map((change) => {\n        return grid.dataset.columns.find((x) => change.columnName === x.name)!;\n    });\n\n    const recordPrimaryName = (() => {\n        let result;\n        const primaryColumn = grid.dataset.columns.find((col) => col.isPrimary);\n        if (primaryColumn) {\n            result = baseRecord.getFormattedValue(primaryColumn.name);\n        } else {\n            const firstTextColumn = grid.dataset.columns.find(\n                (col) => col.dataType === DataTypes.SingleLineText\n            );\n            if (firstTextColumn) {\n                result = baseRecord.getFormattedValue(firstTextColumn.name);\n            }\n        }\n        return result ?? grid.labels[\"no-name\"]();\n    })();\n\n    const theme = useTheme();\n    const styles = useMemo(() => getChangeGridStyles(theme, recordPrimaryName), [theme, recordPrimaryName]);\n\n    useEffect(() => {\n        props.onDatasetReady(dataset);\n        return () => {\n            props.onDatasetDestroyed(dataset);\n            grid.pcfContext.factory.requestRender()\n        }\n    }, []);\n\n    const getColumns = (): IColumn[] => {\n        const virtualColumns: IColumn[] = [\n            {\n                name: \"id__virtual\",\n                alias: \"id__virtual\",\n                visualSizeFactor: 0,\n                dataType: DataTypes.SingleLineText,\n                displayName: \"\",\n                order: 0,\n                isHidden: true,\n            },\n            {\n                name: \"valueDesc__virtual\",\n                alias: \"valueDesc__virtual\",\n                visualSizeFactor: 150,\n                dataType: DataTypes.SingleLineText,\n                displayName: \"\",\n                order: 1,\n            },\n        ];\n        return [...virtualColumns, ...changedColumns];\n    };\n\n    const getDataset = () => {\n        const memoryProvider = new MemoryDataProvider(\n            [\n                {\n                    id__virtual: \"original\",\n                    'valueDesc__virtual': grid.labels[\"original-value\"](),\n                },\n                {\n                    id__virtual: \"new\",\n                    'valueDesc__virtual': grid.labels[\"new-value\"](),\n                },\n            ]\n        );\n        memoryProvider.setColumns(getColumns());\n        memoryProvider.setMetadata({\n            PrimaryIdAttribute: \"id__virtual\"\n        })\n        const dataset = new Dataset(memoryProvider);\n        grid.dataset.linking.getLinkedEntities().map(x => dataset.linking.addLinkedEntity(x))\n\n        dataset.addEventListener('onRecordLoaded', (record) => {\n            const recordId = record.getRecordId();\n            changedColumns.map(col => {\n                const change = fieldChangesRef.current.find(x => x.columnName === col.name);\n                record.expressions?.setCurrencySymbolExpression(col.name, () => baseRecord.getCurrencySymbol?.(col.name) ?? \"\");\n                record.expressions?.ui.setCellEditorParametersExpression(col.name, (parameters) => baseRecord.ui.getCellEditorParameters(col.name, parameters))\n                if (recordId === 'new') {\n                    record.expressions?.setValueExpression?.(col.name, () => {\n                        //this happens if we have removed a change\n                        if (!change) {\n                            return baseRecord.getValue(col.name);\n                        }\n                        return change.originalValue;\n                    })\n                    if(!change) {\n                        record.setValue(col.name, record.getValue(col.name))\n                    }\n                    else {\n                        record.setValue(col.name, change.currentValue);\n                    }\n                    record.expressions?.ui.setNotificationsExpression?.(col.name, () => {\n                        return [\n                            {\n                                uniqueId: \"clear\",\n                                title: grid.labels[\"saving-discard\"](),\n                                iconName: \"EraseTool\",\n                                compact: true,\n                                messages: [],\n                                actions: [\n                                    {\n                                        actions: [\n                                            () => {\n                                                baseRecord.clearChanges?.(col.name);\n                                                record.setValue(col.name, baseRecord.getValue(col.name))\n                                                grid.pcfContext.factory.requestRender();\n                                            },\n                                        ],\n                                    },\n                                ],\n                            }\n                        ]\n                    })\n                    record.expressions?.setValidationExpression?.(col.name, () => baseRecord.getColumnInfo(col.name))\n                }\n                else if (recordId === 'original') {\n                    record.expressions?.setDisabledExpression?.(col.name, () => true);\n                    record.expressions?.setValueExpression?.(col.name, () => {\n                        //this happens if we have removed a change\n                        if (!change) {\n                            return baseRecord.getValue(col.name);\n                        }\n                        return change.originalValue;\n                    })\n                }\n            });\n        })\n\n        dataset.addEventListener('onRecordColumnValueChanged', (record, columnName) => {\n            baseRecord.setValue(columnName, record.getValue(columnName)); \n            grid.pcfContext.factory.requestRender();    \n        })\n        dataset.addEventListener('onChangesCleared', () => {\n            baseRecord.clearChanges?.();\n            grid.pcfContext.factory.requestRender();\n        })\n        dataset.addEventListener('onRecordSave', async () => {\n            props.onIsSaving(true);\n            await baseRecord.save();\n            baseRecord.clearChanges?.();\n            props.onIsSaving(false);\n            grid.pcfContext.factory.requestRender();\n        })\n        return dataset;\n    };\n    const dataset = useMemo(() => getDataset(), []);\n    return (\n        <div className={styles.root}>\n            <DatasetControl\n                context={{\n                    ...grid.pcfContext,\n                    parameters: {\n                        ...grid.pcfContext.parameters,\n                        Grid: dataset,\n                    },\n                }}\n                parameters={{\n                    Grid: dataset,\n                    EnablePagination: {\n                        raw: false,\n                    },\n                    EnableFiltering: {\n                        raw: false,\n                    },\n                    EnableEditing: {\n                        raw: true,\n                    },\n                    EnableNavigation: {\n                        raw: false,\n                    },\n                    EnableOptionSetColors: grid.parameters.EnableOptionSetColors,\n                    EnableSorting: {\n                        raw: false,\n                    },\n                    EnableChangeEditor: {\n                        raw: false\n                    },\n                    SelectableRows: {\n                        raw: \"none\",\n                    },\n                }}\n            />\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"ChangeGrid.js","sources":["../../../../../../../../../../src/components/Grid/core/components/Save/components/ChangeEditor/components/ChangeGrid/ChangeGrid.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { useGridInstance } from \"../../../../../../hooks/useGridInstance\";\nimport {\n    Dataset,\n    DataTypes,\n    IColumn,\n    IDataset,\n    IRecordChange,\n    MemoryDataProvider,\n} from \"@talxis/client-libraries\";\nimport { DatasetControl } from \"../../../../../../../../DatasetControl\";\nimport { useTheme } from \"@fluentui/react\";\nimport { getChangeGridStyles } from \"./styles\";\nimport React from \"react\";\nimport { AgGridContext } from \"../../../../../AgGrid/context\";\n\ninterface IChangeGrid {\n    recordChange: IRecordChange;\n    onDatasetReady: (dataset: IDataset) => void;\n    onDatasetDestroyed: (dataset: IDataset) => void;\n    onIsSaving: (value: boolean) => void;\n    onRequestRender: () => void;\n}\n\nexport const ChangeGrid = (props: IChangeGrid) => {\n    const fieldChangesRef = useRef(props.recordChange.columns);\n    fieldChangesRef.current = props.recordChange.columns;\n    const baseRecord = props.recordChange.record;\n    const grid = useGridInstance();\n    const changedColumns = fieldChangesRef.current.map((change) => {\n        return grid.dataset.columns.find((x) => change.columnName === x.name)!;\n    });\n    const agGridContext = React.useContext(AgGridContext);\n\n    const recordPrimaryName = (() => {\n        let result;\n        const primaryColumn = grid.dataset.columns.find((col) => col.isPrimary);\n        if (primaryColumn) {\n            result = baseRecord.getFormattedValue(primaryColumn.name);\n        } else {\n            const firstTextColumn = grid.dataset.columns.find(\n                (col) => col.dataType === DataTypes.SingleLineText\n            );\n            if (firstTextColumn) {\n                result = baseRecord.getFormattedValue(firstTextColumn.name);\n            }\n        }\n        return result ?? grid.labels[\"no-name\"]();\n    })();\n\n    const theme = useTheme();\n    const styles = useMemo(() => getChangeGridStyles(theme, recordPrimaryName), [theme, recordPrimaryName]);\n\n    useEffect(() => {\n        props.onDatasetReady(dataset);\n        return () => {\n            props.onDatasetDestroyed(dataset);\n            agGridContext.rerender();\n        }\n    }, []);\n\n    const getColumns = (): IColumn[] => {\n        const virtualColumns: IColumn[] = [\n            {\n                name: \"id__virtual\",\n                alias: \"id__virtual\",\n                visualSizeFactor: 0,\n                dataType: DataTypes.SingleLineText,\n                displayName: \"\",\n                order: 0,\n                isHidden: true,\n            },\n            {\n                name: \"valueDesc__virtual\",\n                alias: \"valueDesc__virtual\",\n                visualSizeFactor: 150,\n                dataType: DataTypes.SingleLineText,\n                displayName: \"\",\n                order: 1,\n            },\n        ];\n        return [...virtualColumns, ...changedColumns];\n    };\n\n    const getDataset = () => {\n        const memoryProvider = new MemoryDataProvider(\n            [\n                {\n                    id__virtual: \"original\",\n                    'valueDesc__virtual': grid.labels[\"original-value\"](),\n                },\n                {\n                    id__virtual: \"new\",\n                    'valueDesc__virtual': grid.labels[\"new-value\"](),\n                },\n            ]\n        );\n        memoryProvider.setColumns(getColumns());\n        memoryProvider.setMetadata({\n            PrimaryIdAttribute: \"id__virtual\"\n        })\n        const dataset = new Dataset(memoryProvider);\n        dataset.isValid = () => {\n            return baseRecord.isValid()\n        }\n        grid.dataset.linking.getLinkedEntities().map(x => dataset.linking.addLinkedEntity(x))\n\n        dataset.addEventListener('onRecordLoaded', (record) => {\n            const recordId = record.getRecordId();\n            record.expressions.ui.setCustomFormattingExpression('valueDesc__virtual', (cellTheme) => {\n                return {\n                    themeOverride: {\n                        fonts: {\n                            medium: {\n                                fontWeight: 600\n                            }\n                        }\n                    }\n                }\n            })\n            changedColumns.map(col => {\n                const change = fieldChangesRef.current.find(x => x.columnName === col.name);\n                record.expressions?.setCurrencySymbolExpression(col.name, () => baseRecord.getCurrencySymbol?.(col.name) ?? \"\");\n                //we need to store the previous values somewhere, in changes?\n                //record.expressions?.ui.setCustomFormattingExpression(col.name, (cellTheme) => baseRecord.getColumnInfo(col.name).ui.getCustomFormatting(cellTheme));\n                record.expressions?.ui.setControlParametersExpression(col.name, (parameters) => baseRecord.getColumnInfo(col.name).ui.getControlParameters(parameters));\n                record.expressions?.ui.setCustomControlsExpression(col.name, (defaultCustomControls) => baseRecord.getColumnInfo(col.name).ui.getCustomControls(defaultCustomControls));\n                record.expressions?.ui.setCustomControlComponentExpression(col.name, () => baseRecord.getColumnInfo(col.name).ui.getCustomControlComponent())\n                if (recordId === 'new') {\n                    record.expressions?.setValueExpression?.(col.name, () => {\n                        //this happens if we have removed a change\n                        if (!change) {\n                            return baseRecord.getValue(col.name);\n                        }\n                        return change.originalValue;\n                    })\n                    if(!change) {\n                        record.setValue(col.name, record.getValue(col.name))\n                    }\n                    else {\n                        record.setValue(col.name, change.currentValue);\n                    }\n                    record.expressions?.ui.setNotificationsExpression?.(col.name, () => {\n                        return [\n                            {\n                                uniqueId: \"clear\",\n                                title: grid.labels[\"saving-discard\"](),\n                                iconName: \"EraseTool\",\n                                compact: true,\n                                messages: [],\n                                actions: [\n                                    {\n                                        actions: [\n                                            () => {\n                                                baseRecord.clearChanges?.(col.name);\n                                                record.setValue(col.name, baseRecord.getValue(col.name))\n                                            },\n                                        ],\n                                    },\n                                ],\n                            }\n                        ]\n                    })\n                    record.expressions?.setValidationExpression?.(col.name, () => baseRecord.getColumnInfo(col.name))\n                }\n                else if (recordId === 'original') {\n                    record.expressions?.setDisabledExpression?.(col.name, () => true);\n                    record.expressions?.setValueExpression?.(col.name, () => {\n                        //this happens if we have removed a change\n                        if (!change) {\n                            return baseRecord.getValue(col.name);\n                        }\n                        return change.originalValue;\n                    })\n                }\n            });\n        })\n\n        dataset.addEventListener('onRecordColumnValueChanged', (record, columnName) => {\n            baseRecord.setValue(columnName, record.getValue(columnName)); \n            props.onRequestRender(); \n        })\n        dataset.addEventListener('onChangesCleared', () => {\n            baseRecord.clearChanges?.();\n            props.onRequestRender();\n        })\n        dataset.addEventListener('onRecordSave', async () => {\n            props.onIsSaving(true);\n            await baseRecord.save();\n            baseRecord.clearChanges?.();\n            props.onIsSaving(false);\n            props.onRequestRender();\n        })\n        return dataset;\n    };\n    const dataset = useMemo(() => getDataset(), []);\n    return (\n        <div className={styles.root}>\n            <DatasetControl\n                context={{\n                    ...grid.pcfContext,\n                    parameters: {\n                        ...grid.pcfContext.parameters,\n                        Grid: dataset,\n                    },\n                }}\n                parameters={{\n                    Grid: dataset,\n                    EnablePagination: {\n                        raw: false,\n                    },\n                    EnableFiltering: {\n                        raw: false,\n                    },\n                    EnableEditing: {\n                        raw: true,\n                    },\n                    EnableNavigation: {\n                        raw: false,\n                    },\n                    EnableOptionSetColors: grid.parameters.EnableOptionSetColors,\n                    EnableSorting: {\n                        raw: false,\n                    },\n                    EnableChangeEditor: {\n                        raw: false\n                    },\n                    SelectableRows: {\n                        raw: \"none\",\n                    },\n                }}\n            />\n        </div>\n    );\n};\n"],"names":["React","_jsx"],"mappings":"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"}

package/dist/components/Grid/core/controllers/useGridController.js

@@ -5,15 +5,21 @@ import { GridContext } from '../../GridContext.js';
 const useGridController = (gridInstance) => {
     const grid = gridInstance ?? useContext(GridContext).gridInstance;
     const [columns, setColumns] = useState(grid.columns);
+    const preprocessColumns = (columns) => {
+        return columns.map(({ getEntityName, metadata, ...rest }) => rest);
+    };
     //only change columns and records reference if there is a change
     useEffect(() => {
+        if (grid.loading) {
+            return;
+        }
         (async () => {
             const newColumns = await grid.refreshColumns();
-            if (!deepEqual(newColumns, columns)) {
+            if (!deepEqual(preprocessColumns(newColumns), preprocessColumns(columns))) {
                 setColumns(newColumns);
             }
         })();
-    }, [grid.shouldRerender]);
+    }, [grid.loading]);
     return {
         columns
     };

package/dist/components/Grid/core/controllers/useGridController.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGridController.js","sources":["../../../../../src/components/Grid/core/controllers/useGridController.ts"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\"\nimport equal from 'fast-deep-equal/es6';\nimport { Grid } from \"../model/Grid\";\nimport { IGridColumn } from \"../interfaces/IGridColumn\";\nimport { GridContext } from \"../../GridContext\";\n\ninterface IGridController {\n    columns: IGridColumn[]\n}\n\nexport const useGridController = (gridInstance?: Grid): IGridController => {\n    const grid = gridInstance ?? useContext(GridContext).gridInstance;\n    const [columns, setColumns] = useState<IGridColumn[]>(grid.columns);\n\n\n    //only change columns and records reference if there is a change\n    useEffect(() => {\n        (async () => {\n            const newColumns = await grid.refreshColumns();\n            if(!equal(newColumns, columns)) {\n                setColumns(newColumns);\n            }\n        })();\n    }, [grid.shouldRerender]);\n    return {\n        columns\n    }\n}"],"names":["equal"],"mappings":";;;;AAUa,MAAA,iBAAiB,GAAG,CAAC,YAAmB,KAAqB;IACtE,MAAM,IAAI,GAAG,YAAY,IAAI,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;AAClE,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,OAAO,CAAC,CAAC;;IAIpE,SAAS,CAAC,MAAK;QACX,CAAC,YAAW;AACR,YAAA,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC/C,YAAA,IAAG,CAACA,SAAK,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE;gBAC5B,UAAU,CAAC,UAAU,CAAC,CAAC;AAC1B,aAAA;SACJ,GAAG,CAAC;AACT,KAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;IAC1B,OAAO;QACH,OAAO;KACV,CAAA;AACL;;;;"}
+{"version":3,"file":"useGridController.js","sources":["../../../../../src/components/Grid/core/controllers/useGridController.ts"],"sourcesContent":["import { useContext, useEffect, useState } from \"react\"\nimport equal from 'fast-deep-equal/es6';\nimport { Grid } from \"../model/Grid\";\nimport { IGridColumn } from \"../interfaces/IGridColumn\";\nimport { GridContext } from \"../../GridContext\";\n\ninterface IGridController {\n    columns: IGridColumn[]\n}\n\nexport const useGridController = (gridInstance?: Grid): IGridController => {\n    const grid = gridInstance ?? useContext(GridContext).gridInstance;\n    const [columns, setColumns] = useState<IGridColumn[]>(grid.columns);\n\n    const preprocessColumns = (columns: IGridColumn[]): any[] => {\n        return columns.map(({ getEntityName, metadata, ...rest }) => rest);\n    };\n    \n    //only change columns and records reference if there is a change\n    useEffect(() => {\n        if(grid.loading) {\n            return;\n        }\n        (async () => {\n            const newColumns = await grid.refreshColumns();\n            if(!equal(preprocessColumns(newColumns), preprocessColumns(columns))) {\n                setColumns(newColumns);\n            }\n        })();\n    }, [grid.loading]);\n\n    return {\n        columns\n    }\n}"],"names":["equal"],"mappings":";;;;AAUa,MAAA,iBAAiB,GAAG,CAAC,YAAmB,KAAqB;IACtE,MAAM,IAAI,GAAG,YAAY,IAAI,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;AAClE,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,OAAO,CAAC,CAAC;AAEpE,IAAA,MAAM,iBAAiB,GAAG,CAAC,OAAsB,KAAW;AACxD,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC;AACvE,KAAC,CAAC;;IAGF,SAAS,CAAC,MAAK;QACX,IAAG,IAAI,CAAC,OAAO,EAAE;YACb,OAAO;AACV,SAAA;QACD,CAAC,YAAW;AACR,YAAA,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC/C,YAAA,IAAG,CAACA,SAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,EAAE;gBAClE,UAAU,CAAC,UAAU,CAAC,CAAC;AAC1B,aAAA;SACJ,GAAG,CAAC;AACT,KAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnB,OAAO;QACH,OAAO;KACV,CAAA;AACL;;;;"}

package/dist/components/Grid/core/interfaces/IGridColumn.d.ts

@@ -7,4 +7,6 @@ export interface IGridColumn extends IColumn {
     isFiltered: boolean;
     isSortedDescending: boolean;
     isResizable: boolean;
+    alignment: IColumn['alignment'];
+    getEntityName: () => string;
 }

package/dist/components/Grid/core/model/Grid.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="powerapps-component-framework" />
-import { IDataset, IRecord } from "@talxis/client-libraries";
+/// <reference types="@types/powerapps-component-framework" />
+import { Client, IColumn, ICustomColumnControl, IDataset, IRecord } from "@talxis/client-libraries";
 import { Filtering } from "../../filtering/model/Filtering";
 import { IGrid } from "../../interfaces";
 import { Paging } from "../../paging/model/Paging";
 import { Selection } from "../../selection/model/Selection";
 import { Sorting } from "../../sorting/Sorting";
 import { KeyHoldListener } from "../services/KeyListener";
-import { Metadata } from "./Metadata";
 import { IGridColumn } from "../interfaces/IGridColumn";
+import { IBinding } from "../../../NestedControlRenderer/interfaces";
 export declare class Grid {
     private _props;
     private _dataset;
@@ -21,7 +21,8 @@ export declare class Grid {
     private _maxHeight;
     private _minHeight;
     private _initialPageSize;
-    private _refreshGlobalCheckBox;
+    private _usesNestedPcfs;
+    private _client;
     readonly keyHoldListener: KeyHoldListener;
     constructor(props: IGrid, labels: any, keyHoldListener: KeyHoldListener);
     get isNavigationEnabled(): boolean;
@@ -36,7 +37,6 @@ export declare class Grid {
     get columns(): IGridColumn[];
     get records(): IRecord[];
     get sorting(): Sorting;
-    get metadata(): Metadata;
     get filtering(): Filtering;
     get selection(): Selection;
     get paging(): Paging;
@@ -49,15 +49,24 @@ export declare class Grid {
     get inlineRibbonButtonIds(): string[] | undefined;
     get rowHeight(): number;
     get height(): string;
-    openDatasetItem(entityReference: ComponentFramework.EntityReference): void;
+    getClient(): Client;
     updateDependencies(props: IGrid): void;
     refreshColumns(): Promise<IGridColumn[]>;
-    setRefreshGlobalCheckBox(refreshGlobalCheckBox: () => void): void;
-    refreshGlobalCheckBox(): void;
     getTotalVisibleColumnsWidth(): number;
+    onNotifyOutputChanged(record: IRecord, column: IColumn, editing: boolean, newValue: any, rerenderCell: () => void): void;
+    setUsesNestedPcfs(): void;
+    getBindings(record: IRecord, column: IColumn, control: ICustomColumnControl): {
+        [name: string]: IBinding;
+    };
+    getControl(column: IColumn, record: IRecord, editing: boolean): Required<ICustomColumnControl>;
+    getParameters(record: IRecord, column: IGridColumn, editing: boolean): any;
+    getColumnAlignment(column: IColumn): "left" | "right" | "center";
+    destroy(): void;
+    private _getBindingValue;
     private _isColumnEditable;
     private _isColumnRequired;
     private _isColumnSortable;
     private _isColumnFilterable;
     private _getMaxHeight;
+    private _getColumnEntityName;
 }

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

@@ -1,11 +1,11 @@
-import { DataTypes, Constants, Attribute } from '@talxis/client-libraries';
+import { Client, DataTypes, Sanitizer, Constants, Attribute } from '@talxis/client-libraries';
 import { Filtering } from '../../filtering/model/Filtering.js';
 import { Paging } from '../../paging/model/Paging.js';
 import { Selection } from '../../selection/model/Selection.js';
 import { Sorting } from '../../sorting/Sorting.js';
-import { DataType } from '../enums/DataType.js';
-import { Metadata } from './Metadata.js';
 import { CHECKBOX_COLUMN_KEY } from '../../constants.js';
+import { merge } from 'merge-anything';
+import { BaseControls } from '../../../../utils/BaseControls.js';
 
 const DEFAULT_ROW_HEIGHT = 42;
 class Grid {
@@ -16,8 +16,8 @@ class Grid {
         this._shouldRerender = false;
         this._records = [];
         this._minHeight = 150;
-        //this is temp, should be moved to AgGrid class, useAgGridInstance should also be created, similar to useGridInstance
-        this._refreshGlobalCheckBox = () => { };
+        this._usesNestedPcfs = false;
+        this._client = new Client();
         this._props = props;
         this._dataset = props.parameters.Grid;
         this._pcfContext = props.context;
@@ -26,7 +26,6 @@ class Grid {
         this._dependencies = {
             filtering: new Filtering(this),
             selection: new Selection(this),
-            metadata: new Metadata(this),
             sorting: new Sorting(this),
             paging: new Paging(this),
         };
@@ -71,9 +70,6 @@ class Grid {
     get sorting() {
         return this._dependencies.sorting;
     }
-    get metadata() {
-        return this._dependencies.metadata;
-    }
     get filtering() {
         return this._dependencies.filtering;
     }
@@ -131,21 +127,13 @@ class Grid {
         }
         return `${height}px`;
     }
-    openDatasetItem(entityReference) {
-        this._dataset.openDatasetItem(entityReference);
-        const clickedRecord = this.records.find(x => x.getRecordId() === entityReference.id.guid);
-        //we need to make sure the item we are opening gets selected in order for the
-        //OnOpenRecord ribbon scripts to work correctly
-        //if no record found we have clicked a lookup, no selection should be happening in that case
-        if (clickedRecord) {
-            this.selection.toggle(clickedRecord, true, true, true);
-        }
+    getClient() {
+        return this._client;
     }
     updateDependencies(props) {
         this._props = props;
         this._dataset = props.parameters.Grid;
         this._pcfContext = props.context;
-        //THIS COULD MAKE GRID STOP WORKING IN POWER APPS!
         if (this._previousRecordsReference !== this._dataset.records) {
             this._records = Object.values(this._dataset.records);
             this._previousRecordsReference = this._dataset.records;
@@ -161,14 +149,16 @@ class Grid {
             const sorted = this._dataset.sorting?.find(sort => sort.name === column.name);
             const gridColumn = {
                 ...column,
-                isEditable: await this._isColumnEditable(column),
-                isRequired: await this._isColumnRequired(column),
-                isFilterable: await this._isColumnFilterable(column),
+                alignment: this.getColumnAlignment(column),
+                isEditable: this._isColumnEditable(column),
+                isRequired: this._isColumnRequired(column),
+                isFilterable: this._isColumnFilterable(column),
                 disableSorting: !this._isColumnSortable(column),
                 isSortedDescending: sorted?.sortDirection === 1 ? true : false,
                 isResizable: true,
                 isSorted: sorted ? true : false,
-                isFiltered: false
+                isFiltered: false,
+                getEntityName: () => this._getColumnEntityName(column.name)
             };
             const condition = await this.filtering.condition(gridColumn);
             gridColumn.isFiltered = condition.isAppliedToDataset;
@@ -179,6 +169,7 @@ class Grid {
                 name: CHECKBOX_COLUMN_KEY,
                 alias: CHECKBOX_COLUMN_KEY,
                 dataType: DataTypes.SingleLineText,
+                alignment: 'center',
                 displayName: '',
                 isEditable: false,
                 isFilterable: false,
@@ -190,25 +181,217 @@ class Grid {
                 isSortedDescending: false,
                 order: 0,
                 visualSizeFactor: 45,
+                getEntityName: () => this._getColumnEntityName(CHECKBOX_COLUMN_KEY)
             });
         }
         this._columns = gridColumns;
         return gridColumns;
     }
-    setRefreshGlobalCheckBox(refreshGlobalCheckBox) {
-        this._refreshGlobalCheckBox = refreshGlobalCheckBox;
-    }
-    refreshGlobalCheckBox() {
-        this._refreshGlobalCheckBox();
-    }
     getTotalVisibleColumnsWidth() {
         let totalWidth = 0;
         this._columns.filter(x => !x.isHidden).map(col => {
-            totalWidth = totalWidth + col.visualSizeFactor;
+            totalWidth = totalWidth + (col.visualSizeFactor ?? 0);
         });
         return totalWidth;
     }
-    async _isColumnEditable(column) {
+    onNotifyOutputChanged(record, column, editing, newValue, rerenderCell) {
+        record.setValue(column.name, newValue);
+        if (!editing) {
+            this.pcfContext.factory.requestRender();
+            return;
+        }
+        setTimeout(() => {
+            rerenderCell();
+        }, 0);
+    }
+    setUsesNestedPcfs() {
+        this._usesNestedPcfs = true;
+    }
+    getBindings(record, column, control) {
+        const columnInfo = record.getColumnInfo(column.name);
+        const bindings = {
+            'value': {
+                isStatic: false,
+                type: column.dataType,
+                value: this._getBindingValue(record, column),
+                error: columnInfo.error,
+                errorMessage: columnInfo.errorMessage,
+                onNotifyOutputChanged: () => { },
+                metadata: {
+                    onOverrideMetadata: () => column.metadata
+                }
+            },
+            'IsCellCustomizer': {
+                isStatic: true,
+                type: DataTypes.TwoOptions,
+                value: true
+            }
+        };
+        if (control.bindings) {
+            Object.entries(control.bindings).map(([name, binding]) => {
+                bindings[name] = {
+                    isStatic: true,
+                    type: binding.type,
+                    value: binding.value
+                };
+            });
+        }
+        return bindings;
+    }
+    getControl(column, record, editing) {
+        //file and image currently do not support editor, always force cell renderers
+        switch (column.dataType) {
+            case 'File':
+            case 'Image': {
+                return {
+                    name: 'GridCellRenderer',
+                    appliesTo: 'both',
+                    bindings: {}
+                };
+            }
+        }
+        const defaultControl = {
+            name: editing ? BaseControls.GetControlNameForDataType(column.dataType) : 'GridCellRenderer',
+            appliesTo: 'both',
+            bindings: {}
+        };
+        const customControls = record.getColumnInfo(column.name).ui.getCustomControls([defaultControl]);
+        const appliesToValue = editing ? 'editor' : 'renderer';
+        const customControl = customControls.find(control => control.appliesTo === 'both' || control.appliesTo === appliesToValue);
+        if (customControl) {
+            return merge(defaultControl, customControl);
+        }
+        return defaultControl;
+    }
+    getParameters(record, column, editing) {
+        const parameters = {
+            Dataset: {
+                raw: this.dataset,
+                type: DataTypes.Object
+            },
+            Record: {
+                raw: record,
+                type: DataTypes.Object
+            },
+            Column: {
+                raw: column,
+                type: DataTypes.Object
+            }
+        };
+        parameters.EnableNavigation = {
+            raw: this.isNavigationEnabled,
+            type: DataTypes.TwoOptions
+        };
+        parameters.ColumnAlignment = {
+            raw: column.alignment,
+            type: DataTypes.SingleLineText
+        };
+        parameters.IsPrimaryColumn = {
+            raw: column.isPrimary,
+            type: DataTypes.TwoOptions
+        };
+        parameters.ShowErrorMessage = {
+            raw: false,
+            type: DataTypes.TwoOptions
+        };
+        parameters.CellType = {
+            raw: editing ? 'editor' : 'renderer',
+            type: DataTypes.SingleLineText
+        };
+        if (editing) {
+            parameters.AutoFocus = {
+                raw: true,
+                type: DataTypes.TwoOptions
+            };
+        }
+        switch (column.dataType) {
+            case 'Lookup.Customer':
+            case 'Lookup.Owner':
+            case 'Lookup.Regarding':
+            case 'Lookup.Simple': {
+                parameters.IsInlineNewEnabled = {
+                    raw: false,
+                    type: DataTypes.TwoOptions
+                };
+                break;
+            }
+            case 'SingleLine.Email':
+            case 'SingleLine.Phone':
+            case 'SingleLine.URL': {
+                parameters.EnableTypeSuffix = {
+                    raw: false,
+                    type: DataTypes.TwoOptions
+                };
+                break;
+            }
+            case 'OptionSet':
+            case 'TwoOptions':
+            case 'MultiSelectPicklist': {
+                parameters.EnableOptionSetColors = {
+                    raw: this.enableOptionSetColors,
+                    type: DataTypes.TwoOptions
+                };
+                break;
+            }
+        }
+        return parameters;
+    }
+    getColumnAlignment(column) {
+        if (column.alignment) {
+            return column.alignment;
+        }
+        switch (column.dataType) {
+            case DataTypes.WholeNone:
+            case DataTypes.Decimal:
+            case DataTypes.Currency: {
+                return 'right';
+            }
+        }
+        if (column.type === 'action') {
+            return 'right';
+        }
+        return 'left';
+    }
+    destroy() {
+        this._previousRecordsReference = {};
+        this._records.length = 0;
+        this.keyHoldListener.destroy();
+        //@ts-ignore - internal types
+        //if any nested PCF has been loaded and we are in Power Apps, do a page refresh to prevent memory leaks
+        if (this._usesNestedPcfs && !this._client.isTalxisPortal()) ;
+    }
+    _getBindingValue(record, column) {
+        let value = record.getValue(column.name);
+        switch (column.dataType) {
+            //getValue always returns string for TwoOptions
+            case 'TwoOptions': {
+                value = value == '1' ? true : false;
+                break;
+            }
+            //getValue always returns string for OptionSet
+            case 'OptionSet': {
+                value = value ? parseInt(value) : null;
+                break;
+            }
+            case 'MultiSelectPicklist': {
+                value = value ? value.split(',').map((x) => parseInt(x)) : null;
+                break;
+            }
+            case 'Lookup.Simple':
+            case 'Lookup.Customer':
+            case 'Lookup.Owner':
+            case 'Lookup.Regarding': {
+                //our implementation returns array, Power Apps returns object
+                if (value && !Array.isArray(value)) {
+                    value = [value];
+                }
+                value = value?.map((x) => Sanitizer.Lookup.getLookupValue(x));
+                break;
+            }
+        }
+        return value;
+    }
+    _isColumnEditable(column) {
         //only allow editing if specifically allowed
         if (!this._props.parameters.EnableEditing?.raw) {
             return false;
@@ -218,25 +401,21 @@ class Grid {
         }
         //these field types do not support editing
         switch (column.dataType) {
-            case DataType.FILE:
-            case DataType.IMAGE: {
+            case DataTypes.File:
+            case DataTypes.Image: {
                 return false;
             }
         }
-        const attributeName = Attribute.GetNameFromAlias(column.name);
-        const metadata = await this.metadata.get(column.name);
-        return metadata.Attributes.get(attributeName)?.attributeDescriptor?.IsValidForUpdate ?? false;
+        return column.metadata?.IsValidForUpdate ?? false;
     }
-    async _isColumnRequired(column) {
+    _isColumnRequired(column) {
         if (!this.parameters.EnableEditing?.raw) {
             return false;
         }
         if (column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) {
             return false;
         }
-        const metadata = await this.metadata.get(column.name);
-        const attributeName = Attribute.GetNameFromAlias(column.name);
-        const requiredLevel = metadata.Attributes.get(attributeName)?.attributeDescriptor?.RequiredLevel;
+        const requiredLevel = column.metadata?.RequiredLevel;
         if (requiredLevel === 1 || requiredLevel === 2) {
             return true;
         }
@@ -253,7 +432,7 @@ class Grid {
             return false;
         }
         switch (column.dataType) {
-            case DataType.IMAGE: {
+            case DataTypes.Image: {
                 return false;
             }
         }
@@ -262,7 +441,7 @@ class Grid {
         }
         return !column.disableSorting;
     }
-    async _isColumnFilterable(column) {
+    _isColumnFilterable(column) {
         if (column.name.endsWith('__virtual')) {
             return false;
         }
@@ -272,9 +451,7 @@ class Grid {
         if (column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) {
             return false;
         }
-        const metadata = await this.metadata.get(column.name);
-        const attributeName = Attribute.GetNameFromAlias(column.name);
-        return metadata.Attributes.get(attributeName)?.attributeDescriptor?.isFilterable ?? true;
+        return column.metadata?.isFilterable ?? true;
     }
     _getMaxHeight() {
         let maxHeight = this._initialPageSize * this.rowHeight;
@@ -283,6 +460,13 @@ class Grid {
         }
         return maxHeight;
     }
+    _getColumnEntityName(columnName) {
+        const entityAliasName = Attribute.GetLinkedEntityAlias(columnName);
+        if (!entityAliasName) {
+            return this.dataset.getTargetEntityType();
+        }
+        return this.dataset.linking.getLinkedEntities().find(x => x.alias === entityAliasName).name;
+    }
 }
 
 export { Grid };