@talxis/base-controls 1.2512.3 → 1.2601.1

package/dist/components/DatasetControl/Filtering/DatasetColumnFiltering.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ThemeProvider, PrimaryButton, DefaultButton } from '@fluentui/react';
 import { datasetColumnFilteringTranslations } from './translations.js';
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { DatasetColumnFilteringModel } from './DatasetColumnFilteringModel.js';
 import { useRerender } from '@talxis/react-components';
 import { getDatasetColumnFilteringStyles } from './styles.js';
 import { useDebouncedCallback } from 'use-debounce';
-import { Type } from '@talxis/client-libraries';
+import { useEventEmitter } from '../../../hooks/useEventEmitter.js';
 import { useControl } from '../../../hooks/useControl.js';
 import { OptionSet } from '../../OptionSet/OptionSet.js';
 import { NestedControlRenderer } from '../../NestedControlRenderer/NestedControlRenderer.js';
@@ -25,6 +25,16 @@ const DatasetColumnFiltering = (props) => {
     const condition = columnFilter.getConditions()[0];
     const rerender = useRerender();
     const [shouldRemountValueControl, setShouldRemountValueControl] = useState(false);
+    const model = useMemo(() => {
+        return new DatasetColumnFilteringModel({
+            condition: condition,
+            labels: labels,
+            filtering: filtering
+        });
+    }, []);
+    useEventEmitter(model, 'onSave', (result) => onSave(result));
+    useEventEmitter(model, 'onConditionValueChanged', rerender);
+    useEventEmitter(condition, 'onOperatorChanged', () => onOperatorChanged());
     const onOperatorChanged = useCallback(() => {
         setShouldRemountValueControl(true);
     }, []);
@@ -36,9 +46,7 @@ const DatasetColumnFiltering = (props) => {
             return value == null;
         });
     };
-    const onSave = () => {
-        condition.setIsValueRequired(true);
-        const result = filtering.getFilterExpression(Type.And.Value);
+    const onSave = (result) => {
         if (!result) {
             rerender();
         }
@@ -53,11 +61,6 @@ const DatasetColumnFiltering = (props) => {
     const debouncedSetConditionControlValue = useDebouncedCallback((value, index) => {
         model.setConditionValue(value, index);
     });
-    const model = useMemo(() => {
-        condition.addEventListener('onOperatorChanged', onOperatorChanged);
-        condition.addEventListener('onValueChanged', rerender);
-        return new DatasetColumnFilteringModel(condition, labels);
-    }, []);
     const conditionValue = model.getConditionValue();
     const validationResult = condition.getValidationResult();
     const styles = useMemo(() => getDatasetColumnFilteringStyles(), []);
@@ -152,7 +155,7 @@ const DatasetColumnFiltering = (props) => {
                     return jsxs("div", { ...props.container, children: [props.onRenderApplyButton({
                                 text: 'Apply',
                                 disabled: condition.isValueLoading(),
-                                onClick: onSave,
+                                onClick: () => model.save(),
                             }, (props) => jsx(PrimaryButton, { ...props })), props.onRenderClearButton({
                                 text: 'Clear',
                                 disabled: isClearButtonDisabled(),

package/dist/components/DatasetControl/Filtering/DatasetColumnFiltering.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatasetColumnFiltering.js","sources":["../../../../src/components/DatasetControl/Filtering/DatasetColumnFiltering.tsx"],"sourcesContent":["import { DefaultButton, DirectionalHint, PrimaryButton, ThemeProvider } from \"@fluentui/react\";\nimport { useControl } from \"../../../hooks\"\nimport { OptionSet } from \"../../OptionSet\";\nimport { IDatasetColumnFiltering } from \"./interfaces\";\nimport { datasetColumnFilteringTranslations } from \"./translations\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { DatasetColumnFilteringModel } from \"./DatasetColumnFilteringModel\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { NestedControlRenderer } from \"../../NestedControlRenderer\";\nimport React from \"react\";\nimport { getDatasetColumnFilteringStyles } from \"./styles\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { Type as FilterType } from \"@talxis/client-libraries\";\n\nexport const DatasetColumnFiltering = (props: IDatasetColumnFiltering) => {\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { labels, theme, onNotifyOutputChanged } = useControl('DatasetFiltering', props, datasetColumnFilteringTranslations);\n    const context = props.context;\n    const filtering = props.parameters.Filtering;\n    const columnFilter = props.parameters.Filtering.getColumnFilter(props.parameters.ColumnName.raw!);\n    //automatically create a condition if it's not present\n    if (columnFilter.getConditions().length === 0) {\n        columnFilter.addCondition();\n    }\n    //this is the first condition, we assume that the control is used for a single condition\n    const condition = columnFilter.getConditions()[0];\n    const rerender = useRerender();\n    const [shouldRemountValueControl, setShouldRemountValueControl] = useState(false);\n\n    const onOperatorChanged = useCallback(() => {\n        setShouldRemountValueControl(true);\n    }, []);\n\n    const isClearButtonDisabled = () => {\n        if (condition.isValueLoading()) {\n            return true;\n        }\n        return model.getConditionValue().every(value => {\n            return value == null;\n        });\n    }\n    const onSave = () => {\n        condition.setIsValueRequired(true);\n        const result = filtering.getFilterExpression(FilterType.And.Value);\n        if (!result) {\n            rerender();\n        }\n        else {\n            onNotifyOutputChanged(result)\n        }\n    }\n\n    const onClear = () => {\n        condition.setValue(null);\n        setShouldRemountValueControl(true);\n    }\n\n    const debouncedSetConditionControlValue = useDebouncedCallback((value, index) => {\n        model.setConditionValue(value, index);\n    })\n\n    const model = useMemo(() => {\n        condition.addEventListener('onOperatorChanged', onOperatorChanged);\n        condition.addEventListener('onValueChanged', rerender);\n        return new DatasetColumnFilteringModel(condition, labels)\n    }, []);\n\n    const conditionValue = model.getConditionValue();\n    const validationResult = condition.getValidationResult();\n    const styles = useMemo(() => getDatasetColumnFilteringStyles(), []);\n\n    const componentProps = onOverrideComponentProps({\n        onRender: (props, defaultRender) => defaultRender(props),\n    })\n\n    useEffect(() => {\n        if (shouldRemountValueControl) {\n            setShouldRemountValueControl(false);\n        }\n    }, [shouldRemountValueControl])\n\n    return componentProps.onRender({\n        container: {\n            theme: theme,\n            className: styles.datasetColumnFilteringRoot\n        },\n        valueControlsContainer: {\n            className: styles.valueControlsContainer\n        },\n        onRenderConditionOperatorControl: (props, defaultRender) => defaultRender(props),\n        onRenderConditionValueControl: (props, defaultRender) => defaultRender(props),\n        onRenderButtons: (props, defaultRender) => defaultRender(props),\n\n    }, (props) => {\n        return <ThemeProvider {...props.container}>\n            {props.onRenderConditionOperatorControl({\n                context: context,\n                //@ts-ignore - typings\n                onNotifyOutputChanged: (outputs) => condition.setOperator(outputs.value),\n                parameters: {\n                    value: {\n                        raw: condition.getOperator(),\n                        //@ts-ignore - typings\n                        attributes: {\n                            Options: model.getOperatorOptionSet()\n                        }\n                    }\n                },\n            }, (props) => <OptionSet {...props} />)}\n            <div {...props.valueControlsContainer}>\n                {!shouldRemountValueControl &&\n                    <>\n                        {\n                            conditionValue.map((value, index) => {\n                                return <React.Fragment key={index}>\n                                    {props.onRenderConditionValueControl({\n                                        context: context,\n                                        onOverrideComponentProps: (props) => {\n                                            return {\n                                                ...props,\n                                                onOverrideIsLoading: () => condition.isValueLoading()\n                                            }\n                                        },\n                                        parameters: {\n                                            ControlName: model.getControlName()!,\n                                            LoadingType: 'shimmer',\n                                            Bindings: {\n                                                value: {\n                                                    isStatic: false,\n                                                    value: value,\n                                                    type: condition.getDataType() ?? 'SingleLine.Text',\n                                                    error: validationResult[index].error,\n                                                    errorMessage: validationResult[index].errorMessage,\n                                                    metadata: {\n                                                        onOverrideMetadata: () => {\n                                                            return {\n                                                                ...condition.getMetadata()\n                                                            }\n                                                        }\n                                                    },\n                                                    onNotifyOutputChanged: (value) => debouncedSetConditionControlValue(value, index)\n                                                },\n                                                AutoFocus: {\n                                                    isStatic: true,\n                                                    value: index === 0 && conditionValue.length === 1,\n                                                    type: 'TwoOptions'\n                                                },\n                                                ShowErrorMessage: {\n                                                    isStatic: true,\n                                                    value: true,\n                                                    type: 'TwoOptions'\n                                                },\n                                                ...condition.getBindings()\n                                            }\n                                        }\n                                    }, (props) => {\n                                        if (!model.getControlName()) {\n                                            return <></>\n                                        }\n                                        return <NestedControlRenderer {...props} />\n                                    })}\n                                </React.Fragment>\n                            })\n                        }\n                    </>\n                }\n            </div>\n            {props.onRenderButtons({\n                container: {\n                    className: styles.buttons\n                },\n                onRenderApplyButton: (props, defaultRender) => defaultRender(props),\n                onRenderClearButton: (props, defaultRender) => defaultRender(props)\n            }, (props) => {\n                return <div {...props.container}>\n                    {props.onRenderApplyButton({\n                        text: 'Apply',\n                        disabled: condition.isValueLoading(),\n                        onClick: onSave,\n                    }, (props) => <PrimaryButton {...props} />)}\n                    {props.onRenderClearButton({\n                        text: 'Clear',\n                        disabled: isClearButtonDisabled(),\n                        onClick: onClear\n                    }, (props) => <DefaultButton\n                        {...props} />)}\n                </div>\n            })}\n        </ThemeProvider>\n    })\n}"],"names":["FilterType","_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"DatasetColumnFiltering.js","sources":["../../../../src/components/DatasetControl/Filtering/DatasetColumnFiltering.tsx"],"sourcesContent":["import { DefaultButton, DirectionalHint, PrimaryButton, ThemeProvider } from \"@fluentui/react\";\nimport { useControl, useEventEmitter } from \"../../../hooks\"\nimport { OptionSet } from \"../../OptionSet\";\nimport { IDatasetColumnFiltering } from \"./interfaces\";\nimport { datasetColumnFilteringTranslations } from \"./translations\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { DatasetColumnFilteringModel, IDatasetColumnFilteringModelEvents } from \"./DatasetColumnFilteringModel\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { NestedControlRenderer } from \"../../NestedControlRenderer\";\nimport React from \"react\";\nimport { getDatasetColumnFilteringStyles } from \"./styles\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IConditionEvents } from \"@talxis/client-libraries\";\n\nexport const DatasetColumnFiltering = (props: IDatasetColumnFiltering) => {\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { labels, theme, onNotifyOutputChanged } = useControl('DatasetFiltering', props, datasetColumnFilteringTranslations);\n    const context = props.context;\n    const filtering = props.parameters.Filtering;\n    const columnFilter = props.parameters.Filtering.getColumnFilter(props.parameters.ColumnName.raw!);\n    //automatically create a condition if it's not present\n    if (columnFilter.getConditions().length === 0) {\n        columnFilter.addCondition();\n    }\n    //this is the first condition, we assume that the control is used for a single condition\n    const condition = columnFilter.getConditions()[0];\n    const rerender = useRerender();\n    const [shouldRemountValueControl, setShouldRemountValueControl] = useState(false);\n    const model = useMemo(() => {\n        return new DatasetColumnFilteringModel({\n            condition: condition,\n            labels: labels,\n            filtering: filtering\n        })\n    }, []);\n    useEventEmitter<IDatasetColumnFilteringModelEvents>(model, 'onSave', (result) => onSave(result));\n    useEventEmitter<IDatasetColumnFilteringModelEvents>(model, 'onConditionValueChanged', rerender);\n    useEventEmitter<IConditionEvents>(condition, 'onOperatorChanged', () => onOperatorChanged());\n\n    const onOperatorChanged = useCallback(() => {\n        setShouldRemountValueControl(true);\n    }, []);\n\n    const isClearButtonDisabled = () => {\n        if (condition.isValueLoading()) {\n            return true;\n        }\n        return model.getConditionValue().every(value => {\n            return value == null;\n        });\n    }\n    const onSave = (result: false | ComponentFramework.PropertyHelper.DataSetApi.FilterExpression) => {\n        if (!result) {\n            rerender();\n        }\n        else {\n            onNotifyOutputChanged(result)\n        }\n    }\n\n    const onClear = () => {\n        condition.setValue(null);\n        setShouldRemountValueControl(true);\n    }\n\n    const debouncedSetConditionControlValue = useDebouncedCallback((value, index) => {\n        model.setConditionValue(value, index);\n    });\n\n    const conditionValue = model.getConditionValue();\n    const validationResult = condition.getValidationResult();\n    const styles = useMemo(() => getDatasetColumnFilteringStyles(), []);\n\n    const componentProps = onOverrideComponentProps({\n        onRender: (props, defaultRender) => defaultRender(props),\n    })\n\n    useEffect(() => {\n        if (shouldRemountValueControl) {\n            setShouldRemountValueControl(false);\n        }\n    }, [shouldRemountValueControl])\n\n    return componentProps.onRender({\n        container: {\n            theme: theme,\n            className: styles.datasetColumnFilteringRoot\n        },\n        valueControlsContainer: {\n            className: styles.valueControlsContainer\n        },\n        onRenderConditionOperatorControl: (props, defaultRender) => defaultRender(props),\n        onRenderConditionValueControl: (props, defaultRender) => defaultRender(props),\n        onRenderButtons: (props, defaultRender) => defaultRender(props),\n\n    }, (props) => {\n        return <ThemeProvider {...props.container}>\n            {props.onRenderConditionOperatorControl({\n                context: context,\n                //@ts-ignore - typings\n                onNotifyOutputChanged: (outputs) => condition.setOperator(outputs.value),\n                parameters: {\n                    value: {\n                        raw: condition.getOperator(),\n                        //@ts-ignore - typings\n                        attributes: {\n                            Options: model.getOperatorOptionSet()\n                        }\n                    }\n                },\n            }, (props) => <OptionSet {...props} />)}\n            <div {...props.valueControlsContainer}>\n                {!shouldRemountValueControl &&\n                    <>\n                        {\n                            conditionValue.map((value, index) => {\n                                return <React.Fragment key={index}>\n                                    {props.onRenderConditionValueControl({\n                                        context: context,\n                                        onOverrideComponentProps: (props) => {\n                                            return {\n                                                ...props,\n                                                onOverrideIsLoading: () => condition.isValueLoading()\n                                            }\n                                        },\n                                        parameters: {\n                                            ControlName: model.getControlName()!,\n                                            LoadingType: 'shimmer',\n                                            Bindings: {\n                                                value: {\n                                                    isStatic: false,\n                                                    value: value,\n                                                    type: condition.getDataType() ?? 'SingleLine.Text',\n                                                    error: validationResult[index].error,\n                                                    errorMessage: validationResult[index].errorMessage,\n                                                    metadata: {\n                                                        onOverrideMetadata: () => {\n                                                            return {\n                                                                ...condition.getMetadata()\n                                                            }\n                                                        }\n                                                    },\n                                                    onNotifyOutputChanged: (value) => debouncedSetConditionControlValue(value, index)\n                                                },\n                                                AutoFocus: {\n                                                    isStatic: true,\n                                                    value: index === 0 && conditionValue.length === 1,\n                                                    type: 'TwoOptions'\n                                                },\n                                                ShowErrorMessage: {\n                                                    isStatic: true,\n                                                    value: true,\n                                                    type: 'TwoOptions'\n                                                },\n                                                ...condition.getBindings()\n                                            }\n                                        }\n                                    }, (props) => {\n                                        if (!model.getControlName()) {\n                                            return <></>\n                                        }\n                                        return <NestedControlRenderer {...props} />\n                                    })}\n                                </React.Fragment>\n                            })\n                        }\n                    </>\n                }\n            </div>\n            {props.onRenderButtons({\n                container: {\n                    className: styles.buttons\n                },\n                onRenderApplyButton: (props, defaultRender) => defaultRender(props),\n                onRenderClearButton: (props, defaultRender) => defaultRender(props)\n            }, (props) => {\n                return <div {...props.container}>\n                    {props.onRenderApplyButton({\n                        text: 'Apply',\n                        disabled: condition.isValueLoading(),\n                        onClick: () => model.save(),\n                    }, (props) => <PrimaryButton {...props} />)}\n                    {props.onRenderClearButton({\n                        text: 'Clear',\n                        disabled: isClearButtonDisabled(),\n                        onClick: onClear\n                    }, (props) => <DefaultButton\n                        {...props} />)}\n                </div>\n            })}\n        </ThemeProvider>\n    })\n}"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/components/DatasetControl/Filtering/DatasetColumnFilteringModel.d.ts

@@ -1,15 +1,27 @@
 /// <reference types="@types/powerapps-component-framework" />
+import { EventEmitter, Filtering } from "@talxis/client-libraries";
 import { ITranslation } from "../../../hooks";
 import { datasetColumnFilteringTranslations } from "./translations";
 import { Condition } from '@talxis/client-libraries';
 type Labels = Required<ITranslation<typeof datasetColumnFilteringTranslations>>;
-export declare class DatasetColumnFilteringModel {
+export interface IDatasetColumnFilteringModelEvents {
+    onSave: (result: false | ComponentFramework.PropertyHelper.DataSetApi.FilterExpression) => void;
+    onConditionValueChanged: () => void;
+}
+interface IDatasetColumnFilteringModelOptions {
+    condition: Condition;
+    labels: Labels;
+    filtering: Filtering;
+}
+export declare class DatasetColumnFilteringModel extends EventEmitter<IDatasetColumnFilteringModelEvents> {
     private _condition;
     private _labels;
-    constructor(condition: Condition, labels: Labels);
+    private _filtering;
+    constructor(options: IDatasetColumnFilteringModelOptions);
     getOperatorOptionSet(): ComponentFramework.PropertyHelper.OptionMetadata[];
     setConditionValue(value: any, index: number): void;
     getConditionValue(): any[];
     getControlName(): "Decimal" | "TextField" | "OptionSet" | "MultiSelectOptionSet" | "DateTime" | "Duration" | "Lookup" | "TwoOptions" | null;
+    save(): void;
 }
 export {};

package/dist/components/DatasetControl/Filtering/DatasetColumnFilteringModel.js

@@ -1,10 +1,12 @@
-import { Operators } from '@talxis/client-libraries';
+import { EventEmitter, Operators, Type } from '@talxis/client-libraries';
 import { BaseControls } from '../../../utils/BaseControls.js';
 
-class DatasetColumnFilteringModel {
-    constructor(condition, labels) {
-        this._condition = condition;
-        this._labels = labels;
+class DatasetColumnFilteringModel extends EventEmitter {
+    constructor(options) {
+        super();
+        this._condition = options.condition;
+        this._labels = options.labels;
+        this._filtering = options.filtering;
     }
     getOperatorOptionSet() {
         const operators = this._condition.getColumn().metadata?.SupportedFilterConditionOperators ?? [];
@@ -32,13 +34,24 @@ class DatasetColumnFilteringModel {
             }
             this._condition.setValue(values);
         }
+        this.dispatchEvent('onConditionValueChanged');
     }
     getConditionValue() {
         const operator = this._condition.getOperator();
+        let value = this._condition.getControlValue();
+        switch (operator) {
+            case Operators.Like.Value:
+            case Operators.NotLike.Value: {
+                if (typeof value === 'string' && value.startsWith('*')) {
+                    value = value.substring(1);
+                    this._condition.setValue(value);
+                }
+                break;
+            }
+        }
         if (operator !== Operators.Between.Value && operator !== Operators.NotBetween.Value) {
-            return [this._condition.getControlValue()];
+            return [value];
         }
-        const value = this._condition.getControlValue();
         if (Array.isArray(value)) {
             return value;
         }
@@ -53,6 +66,27 @@ class DatasetColumnFilteringModel {
             return BaseControls.GetControlNameForDataType(dataType);
         }
     }
+    save() {
+        const operator = this._condition.getOperator();
+        switch (operator) {
+            case Operators.Like.Value:
+            case Operators.NotLike.Value: {
+                this._condition.setValue(`*${this._condition.getControlValue() ?? ''}`);
+                break;
+            }
+        }
+        this._condition.setIsValueRequired(true);
+        const result = this._filtering.getFilterExpression(Type.And.Value);
+        if (!result) {
+            switch (operator) {
+                case Operators.Like.Value:
+                case Operators.NotLike.Value: {
+                    this._condition.setValue(this._condition.getControlValue()?.substring(1));
+                }
+            }
+        }
+        this.dispatchEvent('onSave', result);
+    }
 }
 
 export { DatasetColumnFilteringModel };

package/dist/components/DatasetControl/Filtering/DatasetColumnFilteringModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatasetColumnFilteringModel.js","sources":["../../../../src/components/DatasetControl/Filtering/DatasetColumnFilteringModel.ts"],"sourcesContent":["import { Operators } from \"@talxis/client-libraries\";\nimport { ITranslation } from \"../../../hooks\";\nimport { datasetColumnFilteringTranslations } from \"./translations\";\nimport { BaseControls } from \"../../../utils\";\nimport { Condition } from '@talxis/client-libraries';\n\ntype Labels = Required<ITranslation<typeof datasetColumnFilteringTranslations>>;\n\nexport class DatasetColumnFilteringModel {\n    private _condition: Condition;\n    private _labels: Labels;\n\n    constructor(condition: Condition, labels: Labels) {\n        this._condition = condition;\n        this._labels = labels;\n    }\n\n    public getOperatorOptionSet(): ComponentFramework.PropertyHelper.OptionMetadata[] {\n        const operators = this._condition.getColumn().metadata?.SupportedFilterConditionOperators ?? []\n        return operators.map(operator => {\n            return {\n                Value: operator,\n                //@ts-ignore - typings\n                Label: this._labels[`operator-${operator}`](),\n                Color: ''\n            }\n        })\n    }\n\n    public setConditionValue(value: any, index: number) {\n        const operator = this._condition.getOperator();\n        if (operator !== Operators.Between.Value && operator !== Operators.NotBetween.Value) {\n            this._condition.setValue(value);\n        }\n        else {\n            const values = [this._condition.getControlValue()?.[0] ?? null, this._condition.getControlValue()?.[1] ?? null];\n            if (index === 0) {\n                values[0] = value;\n            }\n            else {\n                values[1] = value;\n            }\n            this._condition.setValue(values);\n        }\n    }\n\n    public getConditionValue(): any[] {\n        const operator = this._condition.getOperator();\n        if (operator !== Operators.Between.Value && operator !== Operators.NotBetween.Value) {\n            return [this._condition.getControlValue()];\n        }\n        const value = this._condition.getControlValue();\n        if (Array.isArray(value)) {\n            return value;\n        }\n        return [null, null];\n    }\n\n    public getControlName() {\n        const dataType = this._condition.getDataType();\n        if (!dataType) {\n            return null;\n        }\n        else {\n            return BaseControls.GetControlNameForDataType(dataType);\n        }\n    }\n}"],"names":[],"mappings":";;;MAQa,2BAA2B,CAAA;IAIpC,WAAY,CAAA,SAAoB,EAAE,MAAc,EAAA;AAC5C,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;AAC5B,QAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;KACzB;IAEM,oBAAoB,GAAA;AACvB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,iCAAiC,IAAI,EAAE,CAAA;AAC/F,QAAA,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,IAAG;YAC5B,OAAO;AACH,gBAAA,KAAK,EAAE,QAAQ;;gBAEf,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAY,SAAA,EAAA,QAAQ,CAAE,CAAA,CAAC,EAAE;AAC7C,gBAAA,KAAK,EAAE,EAAE;aACZ,CAAA;AACL,SAAC,CAAC,CAAA;KACL;IAEM,iBAAiB,CAAC,KAAU,EAAE,KAAa,EAAA;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;AAC/C,QAAA,IAAI,QAAQ,KAAK,SAAS,CAAC,OAAO,CAAC,KAAK,IAAI,QAAQ,KAAK,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE;AACjF,YAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnC,SAAA;AACI,aAAA;AACD,YAAA,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,IAAI,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC;YAChH,IAAI,KAAK,KAAK,CAAC,EAAE;AACb,gBAAA,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;AACrB,aAAA;AACI,iBAAA;AACD,gBAAA,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;AACrB,aAAA;AACD,YAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AACpC,SAAA;KACJ;IAEM,iBAAiB,GAAA;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;AAC/C,QAAA,IAAI,QAAQ,KAAK,SAAS,CAAC,OAAO,CAAC,KAAK,IAAI,QAAQ,KAAK,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE;YACjF,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC,CAAC;AAC9C,SAAA;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC;AAChD,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACtB,YAAA,OAAO,KAAK,CAAC;AAChB,SAAA;AACD,QAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KACvB;IAEM,cAAc,GAAA;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,EAAE;AACX,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACI,aAAA;AACD,YAAA,OAAO,YAAY,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AAC3D,SAAA;KACJ;AACJ;;;;"}
+{"version":3,"file":"DatasetColumnFilteringModel.js","sources":["../../../../src/components/DatasetControl/Filtering/DatasetColumnFilteringModel.ts"],"sourcesContent":["import { EventEmitter, Filtering, Operators, Type } from \"@talxis/client-libraries\";\nimport { ITranslation } from \"../../../hooks\";\nimport { datasetColumnFilteringTranslations } from \"./translations\";\nimport { BaseControls } from \"../../../utils\";\nimport { Condition } from '@talxis/client-libraries';\n\ntype Labels = Required<ITranslation<typeof datasetColumnFilteringTranslations>>;\n\nexport interface IDatasetColumnFilteringModelEvents {\n    onSave: (result: false | ComponentFramework.PropertyHelper.DataSetApi.FilterExpression) => void;\n    onConditionValueChanged: () => void;\n}\n\ninterface IDatasetColumnFilteringModelOptions {\n    condition: Condition;\n    labels: Labels;\n    filtering: Filtering;\n}\n\nexport class DatasetColumnFilteringModel extends EventEmitter<IDatasetColumnFilteringModelEvents> {\n    private _condition: Condition;\n    private _labels: Labels;\n    private _filtering: Filtering;\n\n    constructor(options: IDatasetColumnFilteringModelOptions) {\n        super();\n        this._condition = options.condition;\n        this._labels = options.labels;\n        this._filtering = options.filtering;\n    }\n\n    public getOperatorOptionSet(): ComponentFramework.PropertyHelper.OptionMetadata[] {\n        const operators = this._condition.getColumn().metadata?.SupportedFilterConditionOperators ?? []\n        return operators.map(operator => {\n            return {\n                Value: operator,\n                //@ts-ignore - typings\n                Label: this._labels[`operator-${operator}`](),\n                Color: ''\n            }\n        })\n    }\n\n    public setConditionValue(value: any, index: number) {\n        const operator = this._condition.getOperator();\n        if (operator !== Operators.Between.Value && operator !== Operators.NotBetween.Value) {\n            this._condition.setValue(value);\n        }\n        else {\n            const values = [this._condition.getControlValue()?.[0] ?? null, this._condition.getControlValue()?.[1] ?? null];\n            if (index === 0) {\n                values[0] = value;\n            }\n            else {\n                values[1] = value;\n            }\n            this._condition.setValue(values);\n        }\n        this.dispatchEvent('onConditionValueChanged');\n    }\n\n    public getConditionValue(): any[] {\n        const operator = this._condition.getOperator();\n        let value = this._condition.getControlValue();\n        switch (operator) {\n            case Operators.Like.Value:\n            case Operators.NotLike.Value: {\n                if(typeof value === 'string' && value.startsWith('*')) {\n                    value = value.substring(1);\n                    this._condition.setValue(value);\n                }\n                break;\n            }\n        }\n        if (operator !== Operators.Between.Value && operator !== Operators.NotBetween.Value) {\n            return [value];\n        }\n        if (Array.isArray(value)) {\n            return value;\n        }\n        return [null, null];\n    }\n\n    public getControlName() {\n        const dataType = this._condition.getDataType();\n        if (!dataType) {\n            return null;\n        }\n        else {\n            return BaseControls.GetControlNameForDataType(dataType);\n        }\n    }\n    public save() {\n        const operator = this._condition.getOperator();\n        switch (operator) {\n            case Operators.Like.Value:\n            case Operators.NotLike.Value: {\n                this._condition.setValue(`*${this._condition.getControlValue() ?? ''}`);\n                break;\n            }\n        }\n        this._condition.setIsValueRequired(true);\n        const result = this._filtering.getFilterExpression(Type.And.Value);\n        if (!result) {\n            switch (operator) {\n                case Operators.Like.Value:\n                case Operators.NotLike.Value: {\n                    this._condition.setValue(this._condition.getControlValue()?.substring(1))\n                }\n            }\n        }\n        this.dispatchEvent('onSave', result);\n    }\n}"],"names":[],"mappings":"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"}

package/dist/components/DatasetControl/Header/Header.js

@@ -44,16 +44,23 @@ const Header = (props) => {
                     ribbonQuickFindContainerProps: {
                         className: styles.ribbonQuickFindContainer
                     },
+                    isRibbonVisible: datasetControl.isRibbonVisible(),
+                    isQuickFindVisible: datasetControl.isQuickFindVisible(),
                     onRenderQuickFind: (props, defaultRender) => defaultRender(props),
                     onRenderRibbon: (props, defaultRender) => defaultRender(props)
                 }, (props) => {
-                    return jsxs("div", { ...props.ribbonQuickFindContainerProps, children: [datasetControl.isRibbonVisible() &&
+                    return jsxs("div", { ...props.ribbonQuickFindContainerProps, children: [props.isRibbonVisible &&
                                 jsx(Ribbon, { context: {
                                         ...datasetControl.getPcfContext(),
                                         mode: {
                                             ...datasetControl.getPcfContext().mode,
                                             isControlDisabled: dataset.loading
                                         }
+                                    }, onOverrideComponentProps: (ribbonProps) => {
+                                        return {
+                                            ...ribbonProps,
+                                            onRender: props.onRenderRibbon
+                                        };
                                     }, parameters: {
                                         Commands: {
                                             raw: datasetControl.retrieveRecordCommands(),
@@ -61,7 +68,7 @@ const Header = (props) => {
                                         Loading: {
                                             raw: !datasetControl.areCommandsLoaded()
                                         }
-                                    } }), datasetControl.isQuickFindVisible() &&
+                                    } }), props.isQuickFindVisible &&
                                 jsx(QuickFind, { onRenderQuickFind: props.onRenderQuickFind })] });
                 }), dataset.error &&
                     props.onRenderErrorMessageBar({

package/dist/components/DatasetControl/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/DatasetControl/Header/Header.tsx"],"sourcesContent":["import { MessageBar, MessageBarType } from \"@fluentui/react\";\nimport { IComponentProps } from \"../interfaces\";\nimport { useModel } from \"../useModel\";\nimport { useMemo } from \"react\";\nimport { getHeaderStyles } from \"./styles\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { QuickFind } from \"../QuickFind/QuickFind\";\nimport { Ribbon } from \"../../Ribbon/Ribbon\";\nimport { useEventEmitter } from \"../../../hooks/useEventEmitter\";\nimport { IDataProviderEventListeners } from \"@talxis/client-libraries\";\nimport { IDatasetControlEvents } from \"../../../utils/dataset-control\";\n\nexport const Header = (props: { onRenderHeader: IComponentProps['onRenderHeader'] }) => {\n    const model = useModel();\n    const datasetControl = model.getDatasetControl();\n    const dataset = datasetControl.getDataset();\n    const rerender = useRerender();\n    const styles = useMemo(() => getHeaderStyles(), []);\n    useEventEmitter<IDataProviderEventListeners>(dataset, 'onLoading', rerender);\n    useEventEmitter<IDatasetControlEvents>(datasetControl, 'onRecordCommandsLoaded', rerender);\n\n    const isHeaderVisible = () => {\n        switch (true) {\n            case datasetControl.isQuickFindVisible():\n            case dataset.error:\n            case datasetControl.isRibbonVisible():\n                {\n                    return true;\n                }\n            default: {\n                return false;\n            }\n        }\n    }\n\n    return props.onRenderHeader({\n        headerContainerProps: {\n            className: styles.header\n        },\n        onRenderErrorMessageBar: (props, defaultRender) => defaultRender(props),\n        onRenderRibbonQuickFindWrapper: (props, defaultRender) => defaultRender(props),\n        onRenderUnsavedChangesMessageBar: (props, defaultRender) => defaultRender(props)\n    }, (props) => {\n        if (!isHeaderVisible()) {\n            return <></>\n        }\n        return <div {...props.headerContainerProps}>\n            {props.onRenderRibbonQuickFindWrapper({\n                ribbonQuickFindContainerProps: {\n                    className: styles.ribbonQuickFindContainer\n                },\n                onRenderQuickFind: (props, defaultRender) => defaultRender(props),\n                onRenderRibbon: (props, defaultRender) => defaultRender(props)\n            }, (props) => {\n                return <div {...props.ribbonQuickFindContainerProps}>\n                    {datasetControl.isRibbonVisible() &&\n                        <Ribbon\n                            context={{\n                                ...datasetControl.getPcfContext(),\n                                mode: {\n                                    ...datasetControl.getPcfContext().mode,\n                                    isControlDisabled: dataset.loading\n                                }\n                            }}\n                            parameters={{\n                                Commands: {\n                                    raw: datasetControl.retrieveRecordCommands(),\n                                },\n                                Loading: {\n                                    raw: !datasetControl.areCommandsLoaded()\n                                }\n                            }}\n                        />\n                    }\n                    {datasetControl.isQuickFindVisible() &&\n                        <QuickFind\n                            onRenderQuickFind={props.onRenderQuickFind} />\n                    }\n                </div>\n            })}\n            {dataset.error &&\n                props.onRenderErrorMessageBar({\n                    messageBarProps: {\n                        messageBarType: MessageBarType.error\n                    },\n                    onRenderMessageBar: (props, defaultRender) => defaultRender(props)\n\n                }, (props) => {\n                    return <MessageBar {...props.messageBarProps}>\n                        {dataset.errorMessage}\n                    </MessageBar>\n                })\n            }\n        </div>\n    })\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/DatasetControl/Header/Header.tsx"],"sourcesContent":["import { MessageBar, MessageBarType } from \"@fluentui/react\";\nimport { IComponentProps } from \"../interfaces\";\nimport { useModel } from \"../useModel\";\nimport { useMemo } from \"react\";\nimport { getHeaderStyles } from \"./styles\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { QuickFind } from \"../QuickFind/QuickFind\";\nimport { Ribbon } from \"../../Ribbon/Ribbon\";\nimport { useEventEmitter } from \"../../../hooks/useEventEmitter\";\nimport { IDataProviderEventListeners } from \"@talxis/client-libraries\";\nimport { IDatasetControlEvents } from \"../../../utils/dataset-control\";\n\nexport const Header = (props: { onRenderHeader: IComponentProps['onRenderHeader'] }) => {\n    const model = useModel();\n    const datasetControl = model.getDatasetControl();\n    const dataset = datasetControl.getDataset();\n    const rerender = useRerender();\n    const styles = useMemo(() => getHeaderStyles(), []);\n    useEventEmitter<IDataProviderEventListeners>(dataset, 'onLoading', rerender);\n    useEventEmitter<IDatasetControlEvents>(datasetControl, 'onRecordCommandsLoaded', rerender);\n\n    const isHeaderVisible = () => {\n        switch (true) {\n            case datasetControl.isQuickFindVisible():\n            case dataset.error:\n            case datasetControl.isRibbonVisible():\n                {\n                    return true;\n                }\n            default: {\n                return false;\n            }\n        }\n    }\n\n    return props.onRenderHeader({\n        headerContainerProps: {\n            className: styles.header\n        },\n        onRenderErrorMessageBar: (props, defaultRender) => defaultRender(props),\n        onRenderRibbonQuickFindWrapper: (props, defaultRender) => defaultRender(props),\n        onRenderUnsavedChangesMessageBar: (props, defaultRender) => defaultRender(props)\n    }, (props) => {\n        if (!isHeaderVisible()) {\n            return <></>\n        }\n        return <div {...props.headerContainerProps}>\n            {props.onRenderRibbonQuickFindWrapper({\n                ribbonQuickFindContainerProps: {\n                    className: styles.ribbonQuickFindContainer\n                },\n                isRibbonVisible: datasetControl.isRibbonVisible(),\n                isQuickFindVisible: datasetControl.isQuickFindVisible(),\n                onRenderQuickFind: (props, defaultRender) => defaultRender(props),\n                onRenderRibbon: (props, defaultRender) => defaultRender(props)\n            }, (props) => {\n                return <div {...props.ribbonQuickFindContainerProps}>\n                    {props.isRibbonVisible &&\n                        <Ribbon\n                            context={{\n                                ...datasetControl.getPcfContext(),\n                                mode: {\n                                    ...datasetControl.getPcfContext().mode,\n                                    isControlDisabled: dataset.loading\n                                }\n                            }}\n                            onOverrideComponentProps={(ribbonProps) => {\n                                return {\n                                    ...ribbonProps,\n                                    onRender: props.onRenderRibbon\n                                }\n                            }}\n                            parameters={{\n                                Commands: {\n                                    raw: datasetControl.retrieveRecordCommands(),\n                                },\n                                Loading: {\n                                    raw: !datasetControl.areCommandsLoaded()\n                                }\n                            }}\n                        />\n                    }\n                    {props.isQuickFindVisible &&\n                        <QuickFind\n                            onRenderQuickFind={props.onRenderQuickFind} />\n                    }\n                </div>\n            })}\n            {dataset.error &&\n                props.onRenderErrorMessageBar({\n                    messageBarProps: {\n                        messageBarType: MessageBarType.error\n                    },\n                    onRenderMessageBar: (props, defaultRender) => defaultRender(props)\n\n                }, (props) => {\n                    return <MessageBar {...props.messageBarProps}>\n                        {dataset.errorMessage}\n                    </MessageBar>\n                })\n            }\n        </div>\n    })\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/DatasetControl/interfaces.d.ts

@@ -11,7 +11,7 @@ import { IRibbonComponentProps } from "../Ribbon/interfaces";
 import { IDatasetControl } from "../../utils/dataset-control";
 export interface IDatasetControlProps extends Omit<IControl<IDatasetControlParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, IDatasetControlComponentProps>, 'parameters' | 'context' | 'state'> {
     /**
-     * Gets the instance of the Dataset control model.
+     * Used to provide the Dataset control instance.
      */
     onGetDatasetControlInstance: () => IDatasetControl;
     /**
@@ -58,6 +58,8 @@ export interface IHeaderProps {
 }
 export interface IRibbonQuickFindWrapperProps {
     ribbonQuickFindContainerProps: React.HTMLAttributes<HTMLDivElement>;
+    isRibbonVisible: boolean;
+    isQuickFindVisible: boolean;
     onRenderQuickFind: (props: IQuickFindProps, defaultRender: (props: IQuickFindProps) => React.ReactElement) => React.ReactElement;
     onRenderRibbon: IRibbonComponentProps['onRender'];
 }

package/dist/components/Grid/cells/cell/Cell.js

@@ -126,13 +126,24 @@ const InternalCell = (props) => {
     const formatting = props.value.customFormatting;
     const grid = useGridInstance();
     const agGrid = useAgGridInstance();
-    const error = props.value.error;
+    const errorRef = useRef(props.value.error);
     const notifications = props.value.notifications;
-    const errorMessage = props.value.errorMessage;
+    const errorMessageRef = useRef(props.value.errorMessage);
     const theme = useTheme();
     const applicationTheme = useControlTheme(grid.getPcfContext().fluentDesignLanguage);
     const rerender = useRerender();
     const styles = useMemo(() => getInnerCellStyles(props.isCellEditor, theme, props.value.columnAlignment, node.expanded), [props.isCellEditor, theme, props.value.columnAlignment, node.expanded]);
+    useEventEmitter(record, 'onAfterSaved', (result) => {
+        if (!result.success) {
+            const errors = result.errors ?? [];
+            const fieldError = errors.find(error => error.fieldName === column.name);
+            if (fieldError) {
+                errorRef.current = true;
+                errorMessageRef.current = fieldError.message;
+                rerender();
+            }
+        }
+    });
     const shouldShowNotEditableNotification = () => {
         if (column.isEditable && !record.getColumnInfo(column.name).security.editable && record.getSummarizationType() === 'none') {
             return true;
@@ -143,7 +154,7 @@ const InternalCell = (props) => {
         if (props.isCellEditor) {
             return false;
         }
-        if (error === true) {
+        if (errorRef.current === true) {
             return true;
         }
         if (shouldShowNotEditableNotification()) {
@@ -197,12 +208,12 @@ const InternalCell = (props) => {
                 }
             });
         }
-        if (error) {
+        if (errorRef.current) {
             result.push({
                 key: 'error',
                 iconOnly: true,
                 disabled: true,
-                text: errorMessage,
+                text: errorMessageRef.current,
                 tooltipHostProps: tooltipProps,
                 iconProps: {
                     iconName: 'Error',
@@ -224,7 +235,7 @@ const InternalCell = (props) => {
         return false;
     };
     const shouldRenderNotifications = getShouldRenderNotifications();
-    return jsx("div", { className: styles.innerCellRoot, "data-is-loading": isLoading(), "data-is-valid": !error, children: renderContent() });
+    return jsx("div", { className: styles.innerCellRoot, "data-is-loading": isLoading(), "data-is-valid": !errorRef.current, children: renderContent() });
 };
 
 export { Cell, InternalCell };

package/dist/components/Grid/cells/cell/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../../../src/components/Grid/cells/cell/Cell.tsx"],"sourcesContent":["import { ICellRendererParams } from \"@ag-grid-community/core\";\nimport { ThemeProvider, useTheme, Shimmer, ICommandBarItemProps, ITooltipHostProps, IconButton, mergeStyleSets } from \"@fluentui/react\";\nimport { IRecord, Constants, DataProvider, IRecordEvents } from \"@talxis/client-libraries\";\nimport { useThemeGenerator, getClassNames, useRerender } from \"@talxis/react-components\";\nimport { useMemo, useEffect, useRef, useCallback } from \"react\";\nimport { useControlTheme } from \"../../../../utils\";\nimport { ICellValues } from \"../../grid/ag-grid/AgGridModel\";\nimport { IGridColumn } from \"../../grid/GridModel\";\nimport { useGridInstance } from \"../../grid/useGridInstance\";\nimport { CellContent } from \"./content/CellContent\";\nimport { Notifications } from \"./notifications/Notifications\";\nimport { getCellStyles, getInnerCellStyles } from \"./styles\";\nimport { useAgGridInstance } from \"../../grid/ag-grid/useAgGridInstance\";\nimport ReactDOM from \"react-dom\";\nimport { GridContext } from \"../../grid/GridContext\";\nimport { AgGridContext } from \"../../grid/ag-grid/AgGridContext\";\nimport { useEventEmitter } from \"../../../../hooks/useEventEmitter\";\n\nexport interface ICellProps extends ICellRendererParams {\n    baseColumn: IGridColumn;\n    isCellEditor: boolean;\n    record: IRecord;\n    value: ICellValues;\n}\n\nexport const Cell = (props: ICellProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const memoizedContainerRef = useRef<HTMLDivElement | null>();\n    const { record, node, baseColumn } = props;\n    const column = baseColumn;\n    const grid = useGridInstance();\n    const agGrid = useAgGridInstance();\n    const lastLoadingRefValue = useRef<boolean>(props.value.loading);\n    const rerender = useRerender();\n\n    const skipCellRendering = (() => {\n        const dataProvider = record.getDataProvider();\n        const summarizationType = dataProvider.getSummarizationType();\n        switch (true) {\n            case column.type === 'action': {\n                return false;\n            }\n            case props.value.loading: {\n                return false;\n            }\n            case summarizationType === 'grouping': {\n                if (lastLoadingRefValue.current && !props.value.loading) {\n                    return false;\n                }\n                const _column = dataProvider.getColumnsMap()[column.name]!;\n                if (_column.aggregation?.aggregationFunction && !_column.grouping?.isGrouped) {\n                    return false;\n                }\n                if (grid.getGroupType() === 'nested') {\n                    return dataProvider.grouping.getGroupBys()[0].columnName !== column.name\n                }\n                return !column.grouping?.isGrouped;\n            }\n            case summarizationType === 'aggregation': {\n                return !dataProvider.getColumnsMap()[column.name]?.aggregation?.aggregationFunction;\n            }\n            case summarizationType === 'none': {\n                return !!column.grouping?.isGrouped\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n    lastLoadingRefValue.current = props.value.loading;\n\n    const onCellClick = useCallback((e: MouseEvent) => {\n        if (record.getDataProvider().getSummarizationType() === 'grouping' && !grid.isSelectionModifierKeyPressed()) {\n            e.stopPropagation();\n        }\n        else if (node.isSelected()) {\n            e.stopPropagation();\n        }\n    }, []);\n\n    const onFieldValueChanged = useCallback(async (columnName: string) => {\n        if (columnName !== column.name) {\n            return;\n        }\n        props.api.refreshCells({\n            rowNodes: [node]\n        })\n        setTimeout(() => {\n            rerender();\n        }, 0);\n    }, []);\n\n\n    const getTopLevelCellWrapperStyles = () => {\n        return mergeStyleSets({\n            cellRoot: {\n                width: '100%',\n                height: (() => {\n                    if (skipCellRendering && column.autoHeight) {\n                        return `${grid.getDefaultRowHeight()}px !important`;\n                    }\n                    return '100% !important';\n                })()\n            }\n        })\n    }\n    useEventEmitter<IRecordEvents>(record, 'onFieldValueChanged', onFieldValueChanged);\n\n    useEffect(() => {\n        memoizedContainerRef.current = containerRef.current;\n        containerRef.current?.addEventListener('click', onCellClick);\n        return () => {\n            containerRef.current?.removeEventListener('click', onCellClick);\n            ReactDOM.unmountComponentAtNode(memoizedContainerRef.current!);\n        }\n    }, []);\n\n\n    useEffect(() => {\n        if (skipCellRendering) {\n            ReactDOM.render(<></>, containerRef.current)\n        }\n        else {\n            ReactDOM.render(\n                <GridContext.Provider value={grid}>\n                    <AgGridContext.Provider value={agGrid}>\n                        <CellContentWrapper {...props} />\n                    </AgGridContext.Provider>\n                </GridContext.Provider>,\n                containerRef.current\n            );\n        }\n    });\n    return <div className={getTopLevelCellWrapperStyles().cellRoot} ref={containerRef} />\n}\n\nconst CellContentWrapper = (props: ICellProps) => {\n    const { value: cellData, record } = props;\n    const { customFormatting } = cellData;\n    const cellTheme = useThemeGenerator(customFormatting.primaryColor, customFormatting.backgroundColor, customFormatting.textColor, customFormatting.themeOverride);\n    const styles = useMemo(() => getCellStyles(cellTheme), [cellTheme])\n    const cellRef = useRef<HTMLDivElement>(null);\n    const rerender = useRerender();\n    useEventEmitter<IRecordEvents>(record, 'onBeforeSaved', rerender);\n\n    return <ThemeProvider\n        ref={cellRef}\n        theme={cellTheme}\n        className={getClassNames([styles.cellRoot, customFormatting.className])}>\n        <InternalCell {...props} />\n    </ThemeProvider>\n}\n\n\nexport const InternalCell = (props: ICellProps) => {\n    const column = props.baseColumn;\n    const record = props.record;\n    const node = props.node;\n    const formatting = props.value.customFormatting;\n    const grid = useGridInstance();\n    const agGrid = useAgGridInstance();\n    const error = props.value.error;\n    const notifications = props.value.notifications;\n    const errorMessage = props.value.errorMessage;\n    const theme = useTheme();\n    const applicationTheme = useControlTheme(grid.getPcfContext().fluentDesignLanguage);\n    const rerender = useRerender();\n    const styles = useMemo(() => getInnerCellStyles(\n        props.isCellEditor,\n        theme,\n        props.value.columnAlignment,\n        node.expanded\n    ), [props.isCellEditor, theme, props.value.columnAlignment, node.expanded]);\n\n    const shouldShowNotEditableNotification = () => {\n        if (column.isEditable && !record.getColumnInfo(column.name).security.editable && record.getSummarizationType() === 'none') {\n            return true;\n        }\n        return false;\n    }\n\n    const getShouldRenderNotifications = (): boolean => {\n        if (props.isCellEditor) {\n            return false;\n        }\n        if (error === true) {\n            return true;\n        }\n        if (shouldShowNotEditableNotification()) {\n            return true;\n        }\n        if (notifications && notifications.length > 0) {\n            return true;\n        }\n        return false;\n    }\n\n    const renderContent = (): JSX.Element => {\n        if (isLoading()) {\n            return (\n                <Shimmer styles={{\n                    shimmerWrapper: styles.shimmerWrapper,\n                    root: styles.shimmerRoot\n                }} />\n            );\n        }\n        return (\n            <>\n                {grid.isColumnExpandable(record, column) &&\n                    <IconButton\n                        iconProps={{ iconName: 'ChevronRight' }}\n                        styles={{\n                            root: styles.groupToggleButtonRoot,\n                            icon: styles.groupToggleButtonIcon\n                        }}\n                        onClick={() => {\n                            agGrid.toggleGroup(node);\n                            rerender();\n                        }} />\n                }\n                {(column.type !== 'action' || column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) &&\n                    <CellContent {...props} />\n                }\n                {shouldRenderNotifications &&\n                    renderNotifications()\n                }\n            </>\n        )\n    }\n\n    const getFarNotifications = (): ICommandBarItemProps[] => {\n        const result: ICommandBarItemProps[] = [];\n        const tooltipProps: ITooltipHostProps = {\n            tooltipProps: {\n                theme: applicationTheme\n            },\n            calloutProps: {\n                theme: applicationTheme,\n            }\n        }\n        if (shouldShowNotEditableNotification()) {\n            result.push({\n                key: 'noteditable',\n                text: grid.getLabels()['value-not-editable'](),\n                iconOnly: true,\n                disabled: true,\n                tooltipHostProps: tooltipProps,\n                iconProps: {\n                    iconName: 'Uneditable',\n                    styles: {\n                        root: styles.uneditableIconRoot\n                    }\n                }\n            })\n        }\n        if (error) {\n            result.push({\n                key: 'error',\n                iconOnly: true,\n                disabled: true,\n                text: errorMessage,\n                tooltipHostProps: tooltipProps,\n                iconProps: {\n                    iconName: 'Error',\n                    styles: {\n                        root: styles.errorIconRoot\n                    }\n                }\n            })\n        }\n        return result;\n    }\n\n    const renderNotifications = (): JSX.Element => {\n        return <Notifications\n            formatting={formatting}\n            isActionColumn={column.type === 'action'}\n            columnAlignment={props.value.columnAlignment}\n            notifications={notifications}\n            farItems={getFarNotifications()} />\n    }\n\n    const isLoading = () => {\n        if (props.value.loading) {\n            return true;\n        }\n        return false;\n    }\n    const shouldRenderNotifications = getShouldRenderNotifications();\n\n    return <div\n        className={styles.innerCellRoot}\n        data-is-loading={isLoading()}\n        data-is-valid={!error}>\n        {renderContent()}\n    </div>\n}"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Cell.js","sources":["../../../../../src/components/Grid/cells/cell/Cell.tsx"],"sourcesContent":["import { ICellRendererParams } from \"@ag-grid-community/core\";\nimport { ThemeProvider, useTheme, Shimmer, ICommandBarItemProps, ITooltipHostProps, IconButton, mergeStyleSets } from \"@fluentui/react\";\nimport { IRecord, Constants, DataProvider, IRecordEvents, IRecordSaveOperationResult } from \"@talxis/client-libraries\";\nimport { useThemeGenerator, getClassNames, useRerender } from \"@talxis/react-components\";\nimport { useMemo, useEffect, useRef, useCallback } from \"react\";\nimport { useControlTheme } from \"../../../../utils\";\nimport { ICellValues } from \"../../grid/ag-grid/AgGridModel\";\nimport { IGridColumn } from \"../../grid/GridModel\";\nimport { useGridInstance } from \"../../grid/useGridInstance\";\nimport { CellContent } from \"./content/CellContent\";\nimport { Notifications } from \"./notifications/Notifications\";\nimport { getCellStyles, getInnerCellStyles } from \"./styles\";\nimport { useAgGridInstance } from \"../../grid/ag-grid/useAgGridInstance\";\nimport ReactDOM from \"react-dom\";\nimport { GridContext } from \"../../grid/GridContext\";\nimport { AgGridContext } from \"../../grid/ag-grid/AgGridContext\";\nimport { useEventEmitter } from \"../../../../hooks/useEventEmitter\";\n\nexport interface ICellProps extends ICellRendererParams {\n    baseColumn: IGridColumn;\n    isCellEditor: boolean;\n    record: IRecord;\n    value: ICellValues;\n}\n\nexport const Cell = (props: ICellProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const memoizedContainerRef = useRef<HTMLDivElement | null>();\n    const { record, node, baseColumn } = props;\n    const column = baseColumn;\n    const grid = useGridInstance();\n    const agGrid = useAgGridInstance();\n    const lastLoadingRefValue = useRef<boolean>(props.value.loading);\n    const rerender = useRerender();\n\n    const skipCellRendering = (() => {\n        const dataProvider = record.getDataProvider();\n        const summarizationType = dataProvider.getSummarizationType();\n        switch (true) {\n            case column.type === 'action': {\n                return false;\n            }\n            case props.value.loading: {\n                return false;\n            }\n            case summarizationType === 'grouping': {\n                if (lastLoadingRefValue.current && !props.value.loading) {\n                    return false;\n                }\n                const _column = dataProvider.getColumnsMap()[column.name]!;\n                if (_column.aggregation?.aggregationFunction && !_column.grouping?.isGrouped) {\n                    return false;\n                }\n                if (grid.getGroupType() === 'nested') {\n                    return dataProvider.grouping.getGroupBys()[0].columnName !== column.name\n                }\n                return !column.grouping?.isGrouped;\n            }\n            case summarizationType === 'aggregation': {\n                return !dataProvider.getColumnsMap()[column.name]?.aggregation?.aggregationFunction;\n            }\n            case summarizationType === 'none': {\n                return !!column.grouping?.isGrouped\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n    lastLoadingRefValue.current = props.value.loading;\n\n    const onCellClick = useCallback((e: MouseEvent) => {\n        if (record.getDataProvider().getSummarizationType() === 'grouping' && !grid.isSelectionModifierKeyPressed()) {\n            e.stopPropagation();\n        }\n        else if (node.isSelected()) {\n            e.stopPropagation();\n        }\n    }, []);\n\n    const onFieldValueChanged = useCallback(async (columnName: string) => {\n        if (columnName !== column.name) {\n            return;\n        }\n        props.api.refreshCells({\n            rowNodes: [node]\n        })\n        setTimeout(() => {\n            rerender();\n        }, 0);\n    }, []);\n\n\n    const getTopLevelCellWrapperStyles = () => {\n        return mergeStyleSets({\n            cellRoot: {\n                width: '100%',\n                height: (() => {\n                    if (skipCellRendering && column.autoHeight) {\n                        return `${grid.getDefaultRowHeight()}px !important`;\n                    }\n                    return '100% !important';\n                })()\n            }\n        })\n    }\n    useEventEmitter<IRecordEvents>(record, 'onFieldValueChanged', onFieldValueChanged);\n\n    useEffect(() => {\n        memoizedContainerRef.current = containerRef.current;\n        containerRef.current?.addEventListener('click', onCellClick);\n        return () => {\n            containerRef.current?.removeEventListener('click', onCellClick);\n            ReactDOM.unmountComponentAtNode(memoizedContainerRef.current!);\n        }\n    }, []);\n\n\n    useEffect(() => {\n        if (skipCellRendering) {\n            ReactDOM.render(<></>, containerRef.current)\n        }\n        else {\n            ReactDOM.render(\n                <GridContext.Provider value={grid}>\n                    <AgGridContext.Provider value={agGrid}>\n                        <CellContentWrapper {...props} />\n                    </AgGridContext.Provider>\n                </GridContext.Provider>,\n                containerRef.current\n            );\n        }\n    });\n    return <div className={getTopLevelCellWrapperStyles().cellRoot} ref={containerRef} />\n}\n\nconst CellContentWrapper = (props: ICellProps) => {\n    const { value: cellData, record } = props;\n    const { customFormatting } = cellData;\n    const cellTheme = useThemeGenerator(customFormatting.primaryColor, customFormatting.backgroundColor, customFormatting.textColor, customFormatting.themeOverride);\n    const styles = useMemo(() => getCellStyles(cellTheme), [cellTheme])\n    const cellRef = useRef<HTMLDivElement>(null);\n    const rerender = useRerender();\n    useEventEmitter<IRecordEvents>(record, 'onBeforeSaved', rerender);\n\n    return <ThemeProvider\n        ref={cellRef}\n        theme={cellTheme}\n        className={getClassNames([styles.cellRoot, customFormatting.className])}>\n        <InternalCell {...props} />\n    </ThemeProvider>\n}\n\n\nexport const InternalCell = (props: ICellProps) => {\n    const column = props.baseColumn;\n    const record = props.record;\n    const node = props.node;\n    const formatting = props.value.customFormatting;\n    const grid = useGridInstance();\n    const agGrid = useAgGridInstance();\n    const errorRef = useRef<boolean>(props.value.error);\n    const notifications = props.value.notifications;\n    const errorMessageRef = useRef<string | undefined>(props.value.errorMessage);\n    const theme = useTheme();\n    const applicationTheme = useControlTheme(grid.getPcfContext().fluentDesignLanguage);\n    const rerender = useRerender();\n    const styles = useMemo(() => getInnerCellStyles(\n        props.isCellEditor,\n        theme,\n        props.value.columnAlignment,\n        node.expanded\n    ), [props.isCellEditor, theme, props.value.columnAlignment, node.expanded]);\n\n    useEventEmitter<IRecordEvents>(record, 'onAfterSaved', (result: IRecordSaveOperationResult) => {\n        if(!result.success) {\n            const errors = result.errors ?? [];\n            const fieldError = errors.find(error => error.fieldName === column.name);\n            if(fieldError) {\n                errorRef.current = true;\n                errorMessageRef.current = fieldError.message;\n                rerender();\n            }\n        }\n    });\n\n    const shouldShowNotEditableNotification = () => {\n        if (column.isEditable && !record.getColumnInfo(column.name).security.editable && record.getSummarizationType() === 'none') {\n            return true;\n        }\n        return false;\n    }\n\n    const getShouldRenderNotifications = (): boolean => {\n        if (props.isCellEditor) {\n            return false;\n        }\n        if (errorRef.current === true) {\n            return true;\n        }\n        if (shouldShowNotEditableNotification()) {\n            return true;\n        }\n        if (notifications && notifications.length > 0) {\n            return true;\n        }\n        return false;\n    }\n\n    const renderContent = (): JSX.Element => {\n        if (isLoading()) {\n            return (\n                <Shimmer styles={{\n                    shimmerWrapper: styles.shimmerWrapper,\n                    root: styles.shimmerRoot\n                }} />\n            );\n        }\n        return (\n            <>\n                {grid.isColumnExpandable(record, column) &&\n                    <IconButton\n                        iconProps={{ iconName: 'ChevronRight' }}\n                        styles={{\n                            root: styles.groupToggleButtonRoot,\n                            icon: styles.groupToggleButtonIcon\n                        }}\n                        onClick={() => {\n                            agGrid.toggleGroup(node);\n                            rerender();\n                        }} />\n                }\n                {(column.type !== 'action' || column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) &&\n                    <CellContent {...props} />\n                }\n                {shouldRenderNotifications &&\n                    renderNotifications()\n                }\n            </>\n        )\n    }\n\n    const getFarNotifications = (): ICommandBarItemProps[] => {\n        const result: ICommandBarItemProps[] = [];\n        const tooltipProps: ITooltipHostProps = {\n            tooltipProps: {\n                theme: applicationTheme\n            },\n            calloutProps: {\n                theme: applicationTheme,\n            }\n        }\n        if (shouldShowNotEditableNotification()) {\n            result.push({\n                key: 'noteditable',\n                text: grid.getLabels()['value-not-editable'](),\n                iconOnly: true,\n                disabled: true,\n                tooltipHostProps: tooltipProps,\n                iconProps: {\n                    iconName: 'Uneditable',\n                    styles: {\n                        root: styles.uneditableIconRoot\n                    }\n                }\n            })\n        }\n        if (errorRef.current) {\n            result.push({\n                key: 'error',\n                iconOnly: true,\n                disabled: true,\n                text: errorMessageRef.current,\n                tooltipHostProps: tooltipProps,\n                iconProps: {\n                    iconName: 'Error',\n                    styles: {\n                        root: styles.errorIconRoot\n                    }\n                }\n            })\n        }\n        return result;\n    }\n\n    const renderNotifications = (): JSX.Element => {\n        return <Notifications\n            formatting={formatting}\n            isActionColumn={column.type === 'action'}\n            columnAlignment={props.value.columnAlignment}\n            notifications={notifications}\n            farItems={getFarNotifications()} />\n    }\n\n    const isLoading = () => {\n        if (props.value.loading) {\n            return true;\n        }\n        return false;\n    }\n    const shouldRenderNotifications = getShouldRenderNotifications();\n\n    return <div\n        className={styles.innerCellRoot}\n        data-is-loading={isLoading()}\n        data-is-valid={!errorRef.current}>\n        {renderContent()}\n    </div>\n}"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/dist/components/Grid/grid/Grid.js

@@ -36,6 +36,7 @@ const Grid = (props) => {
         grid: grid,
         getContainer: () => containerRef.current
     }), []);
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
     const onGridReady = (event) => {
         agGrid.init(event.api);
         gridReadyRef.current = true;
@@ -45,19 +46,31 @@ const Grid = (props) => {
             grid.destroy();
         };
     }, []);
-    return jsx(GridContext.Provider, { value: grid, children: jsx(AgGridContext.Provider, { value: agGrid, children: jsx(ThemeProvider, { className: getClassNames([className, styles.gridRoot, 'ag-theme-balham']), ref: containerRef, children: jsx(AgGridReact, { getRowId: (params) => `${params.data.getRecordId()}`, rowModelType: 'serverSide', 
-                    //needs to be set here, crashes if set via API
-                    rowHeight: grid.getDefaultRowHeight(), rowSelection: agGrid.getSelectionType(), loadingOverlayComponent: LoadingOverlay, noRowsOverlayComponent: EmptyRecords, enableGroupEdit: true, reactiveCustomComponents: true, initialState: props.state?.AgGridState, gridOptions: {
-                        getRowStyle: (params) => {
-                            const record = params.data;
-                            if (!record) {
-                                return undefined;
-                            }
-                            return {
-                                backgroundColor: grid.getDefaultCellTheme(record).semanticColors.bodyBackground,
-                            };
-                        },
-                    }, onGridReady: onGridReady }) }) }) });
+    const componentProps = onOverrideComponentProps({
+        getRowId: (params) => `${params.data.getRecordId()}`,
+        rowModelType: 'serverSide',
+        //needs to be set here, crashes if set via API
+        rowHeight: grid.getDefaultRowHeight(),
+        rowSelection: agGrid.getSelectionType(),
+        loadingOverlayComponent: LoadingOverlay,
+        noRowsOverlayComponent: EmptyRecords,
+        enableGroupEdit: true,
+        reactiveCustomComponents: true,
+        initialState: props.state?.AgGridState,
+        gridOptions: {
+            getRowStyle: (params) => {
+                const record = params.data;
+                if (!record) {
+                    return undefined;
+                }
+                return {
+                    backgroundColor: grid.getDefaultCellTheme(record).semanticColors.bodyBackground,
+                };
+            },
+        },
+        onGridReady: onGridReady,
+    });
+    return jsx(GridContext.Provider, { value: grid, children: jsx(AgGridContext.Provider, { value: agGrid, children: jsx(ThemeProvider, { className: getClassNames([className, styles.gridRoot, 'ag-theme-balham']), ref: containerRef, children: jsx(AgGridReact, { ...componentProps }) }) }) });
 };
 
 export { Grid };

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/grid/Grid.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { GetRowIdParams, GridReadyEvent, GridState } from \"@ag-grid-community/core\";\nimport { IRecord } from \"@talxis/client-libraries\";\nimport { AgGridModel } from \"./ag-grid/AgGridModel\";\nimport { AgGridReact } from \"@ag-grid-community/react\";\nimport { LoadingOverlay } from \"../overlays/loading/LoadingOverlay\";\nimport { EmptyRecords } from \"../overlays/empty-records/EmptyRecordsOverlay\";\nimport { getClassNames, ITheme, useStateValues } from \"@talxis/react-components\";\nimport { IGrid } from \"../interfaces\";\nimport { GridModel } from \"./GridModel\";\nimport { useControl } from \"../../../hooks\";\nimport { gridTranslations } from \"../translations\";\nimport { GridContext } from \"./GridContext\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { getGridStyles } from \"./styles\";\nimport \"@ag-grid-community/styles/ag-grid.css\";\nimport \"@ag-grid-community/styles/ag-theme-balham.css\";\nimport { AgGridContext } from \"./ag-grid/AgGridContext\";\n\nconst getGridInstance = (onGetProps: () => IGrid, labels: any, theme: ITheme): GridModel => {\n    return new GridModel({\n        labels: labels,\n        onGetProps: () => onGetProps(),\n        theme: theme\n    })\n}\n\nexport const Grid = (props: IGrid) => {\n    const { labels, theme, className } = useControl('Grid', props, gridTranslations);\n    const propsRef = useRef<IGrid>(props);\n    propsRef.current = props;\n    const grid = useMemo(() => {\n        return getGridInstance(() => propsRef.current, labels, theme)\n    }, []);\n\n    const styles = useMemo(() => getGridStyles(theme), [theme]);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const gridReadyRef = useRef<boolean>(false);\n    const agGrid = useMemo(() => new AgGridModel({\n        grid: grid,\n        getContainer: () => containerRef.current!\n    }), []);\n\n\n    const onGridReady = (event: GridReadyEvent<IRecord, any>) => {\n        agGrid.init(event.api);\n        gridReadyRef.current = true;\n    }\n\n    useEffect(() => {\n        return () => {\n            grid.destroy();\n        }\n    }, []);\n\n\n    return <GridContext.Provider value={grid}>\n        <AgGridContext.Provider value={agGrid}>\n            <ThemeProvider\n                className={getClassNames([className, styles.gridRoot, 'ag-theme-balham'])}\n                ref={containerRef}\n            >\n                <AgGridReact\n                    getRowId={(params: GetRowIdParams<IRecord>) => `${params.data.getRecordId()}`}\n                    rowModelType='serverSide'\n                    //needs to be set here, crashes if set via API\n                    rowHeight={grid.getDefaultRowHeight()}\n                    rowSelection={agGrid.getSelectionType()}\n                    loadingOverlayComponent={LoadingOverlay}\n                    noRowsOverlayComponent={EmptyRecords}\n                    enableGroupEdit\n                    reactiveCustomComponents\n                    initialState={props.state?.AgGridState}\n                    gridOptions={{\n                        getRowStyle: (params) => {\n                            const record = params.data;\n                            if (!record) {\n                                return undefined\n                            }\n                            return {\n                                backgroundColor: grid.getDefaultCellTheme(record).semanticColors.bodyBackground,\n                            }\n                        },\n                    }}\n                    onGridReady={onGridReady}\n                />\n            </ThemeProvider>\n        </AgGridContext.Provider>\n    </GridContext.Provider>\n}\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Grid.js","sources":["../../../../src/components/Grid/grid/Grid.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { GetRowIdParams, GridReadyEvent, GridState } from \"@ag-grid-community/core\";\nimport { IRecord } from \"@talxis/client-libraries\";\nimport { AgGridModel } from \"./ag-grid/AgGridModel\";\nimport { AgGridReact } from \"@ag-grid-community/react\";\nimport { LoadingOverlay } from \"../overlays/loading/LoadingOverlay\";\nimport { EmptyRecords } from \"../overlays/empty-records/EmptyRecordsOverlay\";\nimport { getClassNames, ITheme, useStateValues } from \"@talxis/react-components\";\nimport { IGrid } from \"../interfaces\";\nimport { GridModel } from \"./GridModel\";\nimport { useControl } from \"../../../hooks\";\nimport { gridTranslations } from \"../translations\";\nimport { GridContext } from \"./GridContext\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { getGridStyles } from \"./styles\";\nimport \"@ag-grid-community/styles/ag-grid.css\";\nimport \"@ag-grid-community/styles/ag-theme-balham.css\";\nimport { AgGridContext } from \"./ag-grid/AgGridContext\";\n\nconst getGridInstance = (onGetProps: () => IGrid, labels: any, theme: ITheme): GridModel => {\n    return new GridModel({\n        labels: labels,\n        onGetProps: () => onGetProps(),\n        theme: theme\n    })\n}\n\nexport const Grid = (props: IGrid) => {\n    const { labels, theme, className } = useControl('Grid', props, gridTranslations);\n    const propsRef = useRef<IGrid>(props);\n    propsRef.current = props;\n    const grid = useMemo(() => {\n        return getGridInstance(() => propsRef.current, labels, theme)\n    }, []);\n\n    const styles = useMemo(() => getGridStyles(theme), [theme]);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const gridReadyRef = useRef<boolean>(false);\n    const agGrid = useMemo(() => new AgGridModel({\n        grid: grid,\n        getContainer: () => containerRef.current!\n    }), []);\n\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n\n    const onGridReady = (event: GridReadyEvent<IRecord, any>) => {\n        agGrid.init(event.api);\n        gridReadyRef.current = true;\n    }\n\n    useEffect(() => {\n        return () => {\n            grid.destroy();\n        }\n    }, []);\n\n    const componentProps = onOverrideComponentProps({\n        getRowId: (params: GetRowIdParams<IRecord>) => `${params.data.getRecordId()}`,\n        rowModelType: 'serverSide' as const,\n        //needs to be set here, crashes if set via API\n        rowHeight: grid.getDefaultRowHeight(),\n        rowSelection: agGrid.getSelectionType(),\n        loadingOverlayComponent: LoadingOverlay,\n        noRowsOverlayComponent: EmptyRecords,\n        enableGroupEdit: true,\n        reactiveCustomComponents: true,\n        initialState: props.state?.AgGridState,\n        gridOptions: {\n            getRowStyle: (params) => {\n                const record = params.data;\n                if (!record) {\n                    return undefined\n                }\n                return {\n                    backgroundColor: grid.getDefaultCellTheme(record).semanticColors.bodyBackground,\n                }\n            },\n        },\n        onGridReady: onGridReady,\n    })\n\n    return <GridContext.Provider value={grid}>\n        <AgGridContext.Provider value={agGrid}>\n            <ThemeProvider\n                className={getClassNames([className, styles.gridRoot, 'ag-theme-balham'])}\n                ref={containerRef}\n            >\n                <AgGridReact\n                    {...componentProps}\n                />\n            </ThemeProvider>\n        </AgGridContext.Provider>\n    </GridContext.Provider>\n}\n"],"names":["_jsx"],"mappings":"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"}