@talxis/base-controls 1.2410.6 → 1.2411.2

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets, keyframes } from \"@fluentui/react\";\n\nconst shimmer = keyframes({\n    '100%': {\n        backgroundPosition: '150px 0'\n    },\n});\n\n\n\nexport const getReadOnlyCellStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        loading: {\n            height: '100%',\n            alignItems: 'center',\n            display: 'flex',\n            '.ms-Shimmer-shimmerWrapper': {\n                height: 10\n            }\n        },\n        root: {\n            display: 'flex',\n            height: '100%',\n            alignItems: 'center',\n        },\n        text: {\n            fontSize: 14,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        link: {\n            fontSize: 14,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        fileWrapper: {\n            display: 'flex',\n            gap: 3\n        },\n        image: {\n            marginRight: 5,\n            'img': {\n                width: 32\n            }\n        },\n        cellContent: {\n            flex: 1,\n            display: 'flex',\n            overflow: 'hidden',\n            alignItems: 'center',\n            height: '100%',\n        },\n        cellContentWrapper: {\n            display: 'flex',\n            height: '100%',\n            alignItems: 'center',\n            overflow: 'hidden',\n            flexShrink: 1,\n            flexGrow: 0,\n            ':global(.talxis-cell-align-right &)': {\n                order: 2\n            },\n            ':only-child': {\n                flexGrow: 1\n            }\n        },\n        uneditableNotification: {\n            'i': {\n                color: `${theme.semanticColors.infoIcon} !important`\n            }\n        },\n        notificationsWrapper: {\n            display: 'flex',\n            flexGrow: 1,\n            flexShrink: 0,\n            flexBasis: 0,\n            justifyContent: 'flex-end',\n            minWidth: 'var(--test, 0px)',\n            alignItems: 'center',\n            overflow: 'hidden',\n            ':global(.talxis-cell-align-right &)': {\n                order: 1,\n                justifyContent: 'flex-start',\n                '.ms-CommandBar .ms-CommandBar-primaryCommand': {\n                    justifyContent: 'flex-start'\n                }\n            }\n        },\n        notifications: {\n            minWidth: 0,\n            flex: 1,\n            ':global(.talxis-cell-align-right &)': {\n                order: 2\n            }\n        },\n        loadingLine: {\n            height: 7,\n            borderRadius: 5,\n            width: '100%',\n            animation: `${shimmer} 2s infinite`,\n            backgroundSize: '1000px 100%',\n            background: `linear-gradient(to right, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 4%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 5%) 25%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 36%)`\n        },\n    })\n}"],"names":[],"mappings":";;AAEA,MAAM,OAAO,GAAG,SAAS,CAAC;AACtB,IAAA,MAAM,EAAE;AACJ,QAAA,kBAAkB,EAAE,SAAS;AAChC,KAAA;AACJ,CAAA,CAAC,CAAC;AAIU,MAAA,qBAAqB,GAAG,CAAC,KAAa,KAAI;AACnD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,OAAO,EAAE;AACL,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,4BAA4B,EAAE;AAC1B,gBAAA,MAAM,EAAE,EAAE;AACb,aAAA;AACJ,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;AACvB,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,QAAQ,EAAE,EAAE;AACZ,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,QAAQ,EAAE,EAAE;AACZ,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,WAAW,EAAE,CAAC;AACd,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,EAAE;AACZ,aAAA;AACJ,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,MAAM;AACjB,SAAA;AACD,QAAA,kBAAkB,EAAE;AAChB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,UAAU,EAAE,CAAC;AACb,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,qCAAqC,EAAE;AACnC,gBAAA,KAAK,EAAE,CAAC;AACX,aAAA;AACD,YAAA,aAAa,EAAE;AACX,gBAAA,QAAQ,EAAE,CAAC;AACd,aAAA;AACJ,SAAA;AACD,QAAA,sBAAsB,EAAE;AACpB,YAAA,GAAG,EAAE;AACD,gBAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAa,WAAA,CAAA;AACvD,aAAA;AACJ,SAAA;AACD,QAAA,oBAAoB,EAAE;AAClB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,UAAU,EAAE,CAAC;AACb,YAAA,SAAS,EAAE,CAAC;AACZ,YAAA,cAAc,EAAE,UAAU;AAC1B,YAAA,QAAQ,EAAE,kBAAkB;AAC5B,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,qCAAqC,EAAE;AACnC,gBAAA,KAAK,EAAE,CAAC;AACR,gBAAA,cAAc,EAAE,YAAY;AAC5B,gBAAA,8CAA8C,EAAE;AAC5C,oBAAA,cAAc,EAAE,YAAY;AAC/B,iBAAA;AACJ,aAAA;AACJ,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,qCAAqC,EAAE;AACnC,gBAAA,KAAK,EAAE,CAAC;AACX,aAAA;AACJ,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,CAAG,EAAA,OAAO,CAAc,YAAA,CAAA;AACnC,YAAA,cAAc,EAAE,aAAa;AAC7B,YAAA,UAAU,EAAE,CAAiD,8CAAA,EAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA,EAAA,EAAK,KAAK,CAAC,OAAO,CAAC,KAAK,CAAgC,6BAAA,EAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAA,EAAA,EAAK,KAAK,CAAC,OAAO,CAAC,KAAK,iCAAiC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAK,EAAA,EAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAW,SAAA,CAAA;AAC7Q,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets, keyframes, mergeStyles } from \"@fluentui/react\";\n\nconst shimmer = keyframes({\n    '100%': {\n        backgroundPosition: '150px 0'\n    },\n});\n\n\n\nexport const getReadOnlyCellStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        loading: {\n            height: '100%',\n            alignItems: 'center',\n            display: 'flex',\n            '.ms-Shimmer-shimmerWrapper': {\n                height: 10\n            }\n        },\n        root: {\n            display: 'flex',\n            height: '100%',\n            alignItems: 'center',\n        },\n        text: {\n            fontSize: 14,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n        },\n        link: {\n            fontSize: 14,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        fileWrapper: {\n            display: 'flex',\n            gap: 3\n        },\n        image: {\n            marginRight: 5,\n            'img': {\n                width: 32\n            }\n        },\n        cellContent: {\n            flex: 1,\n            display: 'flex',\n            overflow: 'hidden',\n            alignItems: 'center',\n            height: '100%',\n        },\n        cellContentWrapper: {\n            display: 'flex',\n            height: '100%',\n            alignItems: 'center',\n            overflow: 'hidden',\n            flexShrink: 1,\n            flexGrow: 0,\n            ':global(.talxis-cell-align-right &)': {\n                order: 2\n            },\n            ':only-child': {\n                flexGrow: 1\n            }\n        },\n        uneditableNotification: {\n            'i': {\n                color: `${theme.semanticColors.infoIcon} !important`\n            }\n        },\n        notificationsWrapper: {\n            display: 'flex',\n            flexGrow: 1,\n            flexShrink: 0,\n            flexBasis: 0,\n            justifyContent: 'flex-end',\n            minWidth: 'var(--test, 0px)',\n            alignItems: 'center',\n            overflow: 'hidden',\n            ':global(.talxis-cell-align-right &)': {\n                order: 1,\n                justifyContent: 'flex-start',\n                '.ms-CommandBar .ms-CommandBar-primaryCommand': {\n                    justifyContent: 'flex-start'\n                }\n            }\n        },\n        notifications: {\n            minWidth: 0,\n            flex: 1,\n            ':global(.talxis-cell-align-right &)': {\n                order: 2\n            }\n        },\n        loadingLine: {\n            height: 7,\n            borderRadius: 5,\n            width: '100%',\n            animation: `${shimmer} 2s infinite`,\n            backgroundSize: '1000px 100%',\n            background: `linear-gradient(to right, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 4%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 5%) 25%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 36%)`\n        },\n        multiline: {\n            alignSelf: 'baseline',\n            whiteSpace: 'normal'\n        }\n    })\n}\n\nexport const getMultilineStyle = (height: number) => {\n    const clamp = Math.floor(height / 20);\n    return mergeStyles({\n        alignSelf: 'baseline',\n        whiteSpace: 'normal',\n        display: '-webkit-box',\n        textAlign: 'left',\n        overflowWrap: 'break-word',\n        lineHeight: \"1.2\",\n        paddingTop: 2,\n        '-webkit-line-clamp': clamp.toString(),\n        '-webkit-box-orient': 'vertical'\n    })\n}"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { IGridColumn } from "../../interfaces/IGridColumn";
 import { IControl } from "../../../../../interfaces/context";
+import { IRecord } from "@talxis/client-libraries";
 export interface IControlProps {
     column: IGridColumn;
-    value: any;
-    formattedValue?: string;
+    record: IRecord;
     onNotifyOutputChanged: (value: any) => void;
     onOverrideControlProps?: (props: IControl<any, any, any, any>) => IControl<any, any, any, any>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../../../../src/components/Grid/core/components/Component/Component.tsx"],"sourcesContent":["import { IParameters } from \"../../../../../interfaces/parameters\";\nimport { DateTime } from \"../../../../DateTime/DateTime\";\nimport { Decimal } from \"../../../../Decimal/Decimal\";\nimport { Lookup } from \"../../../../Lookup/Lookup\";\nimport { MultiSelectOptionSet } from \"../../../../MultiSelectOptionSet/MultiSelectOptionSet\";\nimport { OptionSet } from \"../../../../OptionSet/OptionSet\";\nimport { TextField } from \"../../../../TextField/TextField\";\nimport { TwoOptions } from \"../../../../TwoOptions/TwoOptions\";\nimport { Duration } from \"../../../../Duration/Duration\";\nimport { DataType } from \"../../enums/DataType\";\nimport { IGridColumn } from \"../../interfaces/IGridColumn\";\nimport { useComponentController } from \"./controller/useComponentController\";\nimport React from 'react';\nimport { IControl } from \"../../../../../interfaces/context\";\n\nexport interface IControlProps {\n    column: IGridColumn;\n    value: any;\n    formattedValue?: string;\n    onNotifyOutputChanged: (value: any) => void;\n    onOverrideControlProps?: (props: IControl<any, any, any, any>) => IControl<any, any, any, any>;\n}\n\nexport const Component = (props: IControlProps) => {\n    const controller = useComponentController(props);\n    const {column, componentProps} = {...controller};\n    if(!column) {\n        return <></>\n    }\n    switch(column.dataType) {\n        case DataType.TWO_OPTIONS: {\n            return <TwoOptions {...componentProps!} />\n        }\n        case DataType.OPTIONSET: {\n            return <OptionSet {...componentProps!} />\n        }\n        case DataType.MULTI_SELECT_OPTIONSET: {\n            return <MultiSelectOptionSet {...componentProps!} />\n        }\n        case DataType.DATE_AND_TIME_DATE_AND_TIME:\n        case DataType.DATE_AND_TIME_DATE_ONLY: {\n            return <DateTime {...componentProps!} />\n        }\n        case DataType.DECIMAL:\n        case DataType.WHOLE_NONE:\n        case DataType.CURRENCY: {\n            return <Decimal {...componentProps!} />\n        }\n        case DataType.LOOKUP_SIMPLE:\n        case DataType.LOOKUP_OWNER:\n        case DataType.LOOKUP_CUSTOMER: {\n            return <Lookup {...componentProps!} />\n        }\n        case DataType.WHOLE_DURATION: {\n            return <Duration {...componentProps!} />\n        }\n        default: {\n            return <TextField {...componentProps!} />\n        }\n    }\n}"],"names":["_jsx"],"mappings":";;;;;;;;;;;;AAuBa,MAAA,SAAS,GAAG,CAAC,KAAoB,KAAI;AAC9C,IAAA,MAAM,UAAU,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;IACjD,MAAM,EAAC,MAAM,EAAE,cAAc,EAAC,GAAG,EAAC,GAAG,UAAU,EAAC,CAAC;IACjD,IAAG,CAAC,MAAM,EAAE;AACR,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;IACD,QAAO,MAAM,CAAC,QAAQ;AAClB,QAAA,KAAK,QAAQ,CAAC,WAAW,EAAE;AACvB,YAAA,OAAOA,GAAC,CAAA,UAAU,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC7C,SAAA;AACD,QAAA,KAAK,QAAQ,CAAC,SAAS,EAAE;AACrB,YAAA,OAAOA,GAAC,CAAA,SAAS,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC5C,SAAA;AACD,QAAA,KAAK,QAAQ,CAAC,sBAAsB,EAAE;AAClC,YAAA,OAAOA,GAAC,CAAA,oBAAoB,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AACvD,SAAA;QACD,KAAK,QAAQ,CAAC,2BAA2B,CAAC;AAC1C,QAAA,KAAK,QAAQ,CAAC,uBAAuB,EAAE;AACnC,YAAA,OAAOA,GAAC,CAAA,QAAQ,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC3C,SAAA;QACD,KAAK,QAAQ,CAAC,OAAO,CAAC;QACtB,KAAK,QAAQ,CAAC,UAAU,CAAC;AACzB,QAAA,KAAK,QAAQ,CAAC,QAAQ,EAAE;AACpB,YAAA,OAAOA,GAAC,CAAA,OAAO,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC1C,SAAA;QACD,KAAK,QAAQ,CAAC,aAAa,CAAC;QAC5B,KAAK,QAAQ,CAAC,YAAY,CAAC;AAC3B,QAAA,KAAK,QAAQ,CAAC,eAAe,EAAE;AAC3B,YAAA,OAAOA,GAAC,CAAA,MAAM,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AACzC,SAAA;AACD,QAAA,KAAK,QAAQ,CAAC,cAAc,EAAE;AAC1B,YAAA,OAAOA,GAAC,CAAA,QAAQ,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC3C,SAAA;AACD,QAAA,SAAS;AACL,YAAA,OAAOA,GAAC,CAAA,SAAS,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC5C,SAAA;AACJ,KAAA;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../../../../src/components/Grid/core/components/Component/Component.tsx"],"sourcesContent":["import { DateTime } from \"../../../../DateTime/DateTime\";\nimport { Decimal } from \"../../../../Decimal/Decimal\";\nimport { Lookup } from \"../../../../Lookup/Lookup\";\nimport { MultiSelectOptionSet } from \"../../../../MultiSelectOptionSet/MultiSelectOptionSet\";\nimport { OptionSet } from \"../../../../OptionSet/OptionSet\";\nimport { TextField } from \"../../../../TextField/TextField\";\nimport { TwoOptions } from \"../../../../TwoOptions/TwoOptions\";\nimport { Duration } from \"../../../../Duration/Duration\";\nimport { DataType } from \"../../enums/DataType\";\nimport { IGridColumn } from \"../../interfaces/IGridColumn\";\nimport { useComponentController } from \"./controller/useComponentController\";\nimport { IControl } from \"../../../../../interfaces/context\";\nimport { IRecord } from \"@talxis/client-libraries\";\n\nexport interface IControlProps {\n    column: IGridColumn;\n    record: IRecord\n    onNotifyOutputChanged: (value: any) => void;\n    onOverrideControlProps?: (props: IControl<any, any, any, any>) => IControl<any, any, any, any>;\n}\n\nexport const Component = (props: IControlProps) => {\n    const controller = useComponentController(props);\n    const {column, componentProps} = {...controller};\n    if(!column) {\n        return <></>\n    }\n    switch(column.dataType) {\n        case DataType.TWO_OPTIONS: {\n            return <TwoOptions {...componentProps!} />\n        }\n        case DataType.OPTIONSET: {\n            return <OptionSet {...componentProps!} />\n        }\n        case DataType.MULTI_SELECT_OPTIONSET: {\n            return <MultiSelectOptionSet {...componentProps!} />\n        }\n        case DataType.DATE_AND_TIME_DATE_AND_TIME:\n        case DataType.DATE_AND_TIME_DATE_ONLY: {\n            return <DateTime {...componentProps!} />\n        }\n        case DataType.DECIMAL:\n        case DataType.WHOLE_NONE:\n        case DataType.CURRENCY: {\n            return <Decimal {...componentProps!} />\n        }\n        case DataType.LOOKUP_SIMPLE:\n        case DataType.LOOKUP_OWNER:\n        case DataType.LOOKUP_CUSTOMER: {\n            return <Lookup {...componentProps!} />\n        }\n        case DataType.WHOLE_DURATION: {\n            return <Duration {...componentProps!} />\n        }\n        default: {\n            return <TextField {...componentProps!} />\n        }\n    }\n}"],"names":["_jsx"],"mappings":";;;;;;;;;;;;AAqBa,MAAA,SAAS,GAAG,CAAC,KAAoB,KAAI;AAC9C,IAAA,MAAM,UAAU,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;IACjD,MAAM,EAAC,MAAM,EAAE,cAAc,EAAC,GAAG,EAAC,GAAG,UAAU,EAAC,CAAC;IACjD,IAAG,CAAC,MAAM,EAAE;AACR,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;IACD,QAAO,MAAM,CAAC,QAAQ;AAClB,QAAA,KAAK,QAAQ,CAAC,WAAW,EAAE;AACvB,YAAA,OAAOA,GAAC,CAAA,UAAU,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC7C,SAAA;AACD,QAAA,KAAK,QAAQ,CAAC,SAAS,EAAE;AACrB,YAAA,OAAOA,GAAC,CAAA,SAAS,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC5C,SAAA;AACD,QAAA,KAAK,QAAQ,CAAC,sBAAsB,EAAE;AAClC,YAAA,OAAOA,GAAC,CAAA,oBAAoB,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AACvD,SAAA;QACD,KAAK,QAAQ,CAAC,2BAA2B,CAAC;AAC1C,QAAA,KAAK,QAAQ,CAAC,uBAAuB,EAAE;AACnC,YAAA,OAAOA,GAAC,CAAA,QAAQ,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC3C,SAAA;QACD,KAAK,QAAQ,CAAC,OAAO,CAAC;QACtB,KAAK,QAAQ,CAAC,UAAU,CAAC;AACzB,QAAA,KAAK,QAAQ,CAAC,QAAQ,EAAE;AACpB,YAAA,OAAOA,GAAC,CAAA,OAAO,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC1C,SAAA;QACD,KAAK,QAAQ,CAAC,aAAa,CAAC;QAC5B,KAAK,QAAQ,CAAC,YAAY,CAAC;AAC3B,QAAA,KAAK,QAAQ,CAAC,eAAe,EAAE;AAC3B,YAAA,OAAOA,GAAC,CAAA,MAAM,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AACzC,SAAA;AACD,QAAA,KAAK,QAAQ,CAAC,cAAc,EAAE;AAC1B,YAAA,OAAOA,GAAC,CAAA,QAAQ,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC3C,SAAA;AACD,QAAA,SAAS;AACL,YAAA,OAAOA,GAAC,CAAA,SAAS,EAAK,EAAA,GAAA,cAAe,GAAI,CAAA;AAC5C,SAAA;AACJ,KAAA;AACL;;;;"}

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

@@ -6,4 +6,5 @@ export declare class Component extends GridDependency {
     private static _lookupSavedQueriesCache;
     getControlProps(props: IControlProps): Promise<IControl<any, any, any, any>>;
     private _getLookupValue;
+    private _getComponentValue;
 }

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

@@ -1,8 +1,7 @@
 import dayjs from 'dayjs';
-import { ColumnValidation } from '../../../../validation/model/ColumnValidation.js';
 import { DataType } from '../../../enums/DataType.js';
 import { GridDependency } from '../../../model/GridDependency.js';
-import { Attribute } from '@talxis/client-libraries';
+import { Attribute, Sanitizer, DataTypes } from '@talxis/client-libraries';
 
 const debounce = (func, wait) => {
     let timeout = null;
@@ -25,9 +24,15 @@ class Component extends GridDependency {
         this._debouncedGetLookupValue = debounce(this._getLookupValue.bind(this), 50);
     }
     async getControlProps(props) {
-        const { column, value, onNotifyOutputChanged, formattedValue } = { ...props };
-        const [isValid, validationErrorMessage] = new ColumnValidation(this._grid, props.column).validate(value);
-        const onOverrideControlProps = props?.onOverrideControlProps ?? ((props) => props);
+        const { column, onNotifyOutputChanged, record } = { ...props };
+        const value = this._getComponentValue(column, record.getValue(column.name));
+        const formattedValue = record.getFormattedValue(column.name);
+        const validation = record.getColumnInfo(column.name);
+        const onOverrideControlProps = (passedProps) => {
+            const overridenProps = props?.onOverrideControlProps?.(passedProps) ?? passedProps;
+            overridenProps.parameters = record.ui?.getCellEditorParameters(column.name, overridenProps.parameters) ?? overridenProps.parameters;
+            return overridenProps;
+        };
         const attributeName = Attribute.GetNameFromAlias(column.name);
         switch (column.dataType) {
             case DataType.LOOKUP_SIMPLE:
@@ -70,8 +75,8 @@ class Component extends GridDependency {
                                 Targets: targets,
                                 DisplayName: displayName
                             },
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
+                            error: validation?.error === false,
+                            errorMessage: validation?.errorMessage ?? "",
                         }
                     },
                     onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
@@ -86,8 +91,8 @@ class Component extends GridDependency {
                     parameters: {
                         value: {
                             raw: twoOptionsValue === true ? true : false,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
+                            error: validation?.error === false,
+                            errorMessage: validation?.errorMessage ?? "",
                             attributes: {
                                 Options: options
                             }
@@ -104,8 +109,8 @@ class Component extends GridDependency {
                     parameters: {
                         value: {
                             raw: optionSetValue ?? null,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
+                            error: validation?.error === false,
+                            errorMessage: validation?.errorMessage ?? "",
                             attributes: {
                                 Options: options
                             }
@@ -122,8 +127,8 @@ class Component extends GridDependency {
                     parameters: {
                         value: {
                             raw: optionSetValue ?? null,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
+                            error: validation?.error === false,
+                            errorMessage: validation?.errorMessage ?? "",
                             attributes: {
                                 Options: options
                             }
@@ -142,8 +147,8 @@ class Component extends GridDependency {
                     parameters: {
                         value: {
                             raw: date.isValid() ? date.toDate() : dateTimeValue,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
+                            error: validation?.error === false,
+                            errorMessage: validation?.errorMessage ?? "",
                             attributes: {
                                 Behavior: metadata.Attributes.get(attributeName).Behavior,
                                 Format: column.dataType
@@ -165,17 +170,18 @@ class Component extends GridDependency {
                     parameters: {
                         value: {
                             raw: decimalValue ?? null,
-                            error: !isValid,
+                            error: validation?.error === false,
                             //formatted value is only used for currency => there is no way to get the currency symbol so the formatCurrency method is useless
                             formatted: formattedValue,
-                            errorMessage: validationErrorMessage,
+                            errorMessage: validation?.errorMessage ?? "",
                             type: column.dataType,
                             attributes: {
                                 Precision: precision
                             }
                         },
                         NotifyOutputChangedOnUnmount: {
-                            raw: true,
+                            //duration is ComboBox => no need to do this
+                            raw: column.dataType !== DataType.WHOLE_DURATION,
                         }
                     },
                     onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
@@ -193,8 +199,9 @@ class Component extends GridDependency {
                         },
                         value: {
                             raw: value,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage
+                            type: column.dataType,
+                            error: validation?.error === false,
+                            errorMessage: validation?.errorMessage ?? ""
                         }
                     },
                     onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
@@ -225,6 +232,36 @@ class Component extends GridDependency {
         }
         return value;
     }
+    //map because getValue API does not return values 1:1 to PCF bindings
+    _getComponentValue(column, value) {
+        switch (column.dataType) {
+            //getValue always returns string for TwoOptions
+            case DataTypes.TwoOptions: {
+                value = value == '1' ? true : false;
+                break;
+            }
+            //getValue always returns string for OptionSet
+            case DataType.OPTIONSET: {
+                value = value ? parseInt(value) : null;
+                break;
+            }
+            case DataType.MULTI_SELECT_OPTIONSET: {
+                value = value ? value.split(',').map((x) => parseInt(x)) : null;
+                break;
+            }
+            case DataType.LOOKUP_SIMPLE:
+            case DataType.LOOKUP_CUSTOMER:
+            case DataType.LOOKUP_OWNER: {
+                //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;
+    }
 }
 Component._lookupSavedQueriesCache = new Map;
 

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

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../../../../../src/components/Grid/core/components/Component/model/Component.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { IControl } from \"../../../../../../interfaces/context\";\nimport { IDateTime } from \"../../../../../DateTime/interfaces\";\nimport { IDecimal } from \"../../../../../Decimal/interfaces\";\nimport { ILookup } from \"../../../../../Lookup/interfaces\";\nimport { IMultiSelectOptionSet } from \"../../../../../MultiSelectOptionSet/interfaces\";\nimport { IOptionSet } from \"../../../../../OptionSet/interfaces\";\nimport { ITextField } from \"../../../../../TextField/interfaces\";\nimport { ITwoOptions } from \"../../../../../TwoOptions/interfaces\";\nimport { ColumnValidation } from \"../../../../validation/model/ColumnValidation\";\nimport { DataType } from \"../../../enums/DataType\";\nimport { GridDependency } from \"../../../model/GridDependency\";\nimport { IControlProps } from \"../Component\";\nimport { Attribute } from \"@talxis/client-libraries\";\n\nconst debounce = (func: (...args: any[]) => Promise<any>, wait: number) => {\n    let timeout: NodeJS.Timeout | null = null;\n    let promiseCache: Promise<any> | null = null;\n\n    return async (...args: any[]) => {\n        if (!promiseCache) {\n            promiseCache = func(...args);\n        }\n\n        if (timeout) clearTimeout(timeout);\n\n        timeout = setTimeout(() => {\n            promiseCache = null;\n        }, wait);\n\n        return promiseCache;\n    };\n};\n\nexport class Component extends GridDependency {\n    private _debouncedGetLookupValue = debounce(this._getLookupValue.bind(this), 50);\n    private static _lookupSavedQueriesCache = new Map<string, Promise<ComponentFramework.WebApi.Entity>>;\n\n    public async getControlProps(props: IControlProps): Promise<IControl<any, any, any, any>> {\n        const { column, value, onNotifyOutputChanged, formattedValue } = { ...props };\n        const [isValid, validationErrorMessage] = new ColumnValidation(this._grid, props.column).validate(value);\n        const onOverrideControlProps = props?.onOverrideControlProps ?? ((props: IControl<any, any, any, any>) => props);\n        const attributeName = Attribute.GetNameFromAlias(column.name);\n        switch (column.dataType) {\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_OWNER:\n            case DataType.LOOKUP_CUSTOMER: {\n                const columnMetadata = await this._grid.metadata.get(column.name);\n                const targets = columnMetadata.Attributes.get(attributeName).attributeDescriptor.Targets ?? [];\n                //@ts-ignore - typings\n                if (column.dataType === DataType.LOOKUP_OWNER && window.TALXIS.Portal) {\n                    targets.push('systemuser', 'team')\n                }\n                let displayName = \"\";\n                if(targets.length === 1) {\n                    displayName = (await this._pcfContext.utils.getEntityMetadata(targets[0])).DisplayName;\n                }\n                const result = {\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            getAllViews: async (entityName: string, __queryType: number = 64) => {\n                                const cacheKey = `${entityName}_${__queryType}`\n                                if (!Component._lookupSavedQueriesCache.get(cacheKey)) {\n                                    Component._lookupSavedQueriesCache.set(cacheKey, new Promise(async (resolve) => {\n                                        const response = await this._pcfContext.webAPI.retrieveMultipleRecords('savedquery', `?$filter=returnedtypecode eq '${entityName}' and querytype eq ${__queryType} and isdefault eq true&$select=name,savedqueryid,fetchxml`);\n                                        resolve(response.entities[0])\n                                    }))\n                                }\n                                const result = await Component._lookupSavedQueriesCache.get(cacheKey)!;\n                                return [\n                                    {\n                                        isDefault: true,\n                                        viewName: result.name,\n                                        viewId: result.savedqueryid,\n                                        fetchXml: result.fetchxml\n                                    }\n                                ]\n                            },\n                            raw: await this._debouncedGetLookupValue(targets, value),\n                            attributes: {\n                                Targets: targets,\n                                DisplayName: displayName\n                            },\n                            error: !isValid,\n                            errorMessage: validationErrorMessage,\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n\n                } as ILookup;\n                return onOverrideControlProps(result);\n            }\n            case DataType.TWO_OPTIONS: {\n                const twoOptionsValue = value as boolean | undefined | null;\n                const [defaultValue, options] = await this._grid.metadata.getOptions(column.name)\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: twoOptionsValue === true ? true : false,\n                            error: !isValid,\n                            errorMessage: validationErrorMessage,\n                            attributes: {\n                                Options: options\n                            }\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                } as ITwoOptions)\n            }\n            case DataType.OPTIONSET: {\n                const optionSetValue = value as number | null | undefined;\n                const [defaultValue, options] = await this._grid.metadata.getOptions(column.name)\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: optionSetValue ?? null,\n                            error: !isValid,\n                            errorMessage: validationErrorMessage,\n                            attributes: {\n                                Options: options\n                            }\n                        },\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                } as IOptionSet);\n            }\n            case DataType.MULTI_SELECT_OPTIONSET: {\n                const [defaultValue, options] = await this._grid.metadata.getOptions(column.name)\n                const optionSetValue = value as number[] | null | undefined;\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: optionSetValue ?? null,\n                            error: !isValid,\n                            errorMessage: validationErrorMessage,\n                            attributes: {\n                                Options: options\n                            }\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                } as IMultiSelectOptionSet);\n            }\n            case DataType.DATE_AND_TIME_DATE_AND_TIME:\n            case DataType.DATE_AND_TIME_DATE_ONLY: {\n                const dateTimeValue = value as Date | null | undefined;\n                const metadata = await this._grid.metadata.get(column.name);\n                const date = dayjs(dateTimeValue);\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: date.isValid() ? date.toDate() : dateTimeValue,\n                            error: !isValid,\n                            errorMessage: validationErrorMessage,\n                            attributes: {\n                                Behavior: metadata.Attributes.get(attributeName).Behavior,\n                                Format: column.dataType\n                            }\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                } as IDateTime);\n            }\n            case DataType.WHOLE_NONE:\n            case DataType.DECIMAL:\n            case DataType.CURRENCY:\n            case DataType.WHOLE_DURATION: {\n                const decimalValue = value as number | null | undefined\n                const metadata = await this._grid.metadata.get(column.name);\n                const precision = metadata.Attributes.get(attributeName).Precision;\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: decimalValue ?? null,\n                            error: !isValid,\n                            //formatted value is only used for currency => there is no way to get the currency symbol so the formatCurrency method is useless\n                            formatted: formattedValue,\n                            errorMessage: validationErrorMessage,\n                            type: column.dataType,\n                            attributes: {\n                                Precision: precision\n                            }\n                        },\n                        NotifyOutputChangedOnUnmount: {\n                            raw: true,\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n\n                } as IDecimal);\n            }\n            default: {\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        isResizable: {\n                            raw: false\n                        },\n                        NotifyOutputChangedOnUnmount: {\n                            raw: true,\n                        },\n                        value: {\n                            raw: value,\n                            error: !isValid,\n                            errorMessage: validationErrorMessage\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                } as ITextField);\n            }\n        }\n    }\n    private async _getLookupValue(targets: string[], value: ComponentFramework.LookupValue[] | null | undefined): Promise<ComponentFramework.LookupValue[]> {\n        if (!value || value.length === 0) {\n            return [];\n        }\n        //this is case from filters where we only have the id to work it => we need to go through targets and search for the records\n        if (!value[0].entityType) {\n            for (const lookup of value) {\n                for (const target of targets) {\n                    try {\n                        const lookupEntityMetadata = await this._pcfContext.utils.getEntityMetadata(target, []);\n                        const response = await this._pcfContext.webAPI.retrieveRecord(target, lookup.id, `?$select=${lookupEntityMetadata.PrimaryNameAttribute}`);\n                        lookup.entityType = target;\n                        lookup.name = response[lookupEntityMetadata.PrimaryNameAttribute];\n                        break;\n                    }\n                    catch (err) {\n                        continue;\n                    }\n                }\n            }\n        }\n        return value;\n    }\n}"],"names":[],"mappings":";;;;;;AAeA,MAAM,QAAQ,GAAG,CAAC,IAAsC,EAAE,IAAY,KAAI;IACtE,IAAI,OAAO,GAA0B,IAAI,CAAC;IAC1C,IAAI,YAAY,GAAwB,IAAI,CAAC;AAE7C,IAAA,OAAO,OAAO,GAAG,IAAW,KAAI;QAC5B,IAAI,CAAC,YAAY,EAAE;AACf,YAAA,YAAY,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AAChC,SAAA;AAED,QAAA,IAAI,OAAO;YAAE,YAAY,CAAC,OAAO,CAAC,CAAC;AAEnC,QAAA,OAAO,GAAG,UAAU,CAAC,MAAK;YACtB,YAAY,GAAG,IAAI,CAAC;SACvB,EAAE,IAAI,CAAC,CAAC;AAET,QAAA,OAAO,YAAY,CAAC;AACxB,KAAC,CAAC;AACN,CAAC,CAAC;AAEI,MAAO,SAAU,SAAQ,cAAc,CAAA;AAA7C,IAAA,WAAA,GAAA;;AACY,QAAA,IAAA,CAAA,wBAAwB,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;KA8MpF;IA3MU,MAAM,eAAe,CAAC,KAAoB,EAAA;AAC7C,QAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC;QAC9E,MAAM,CAAC,OAAO,EAAE,sBAAsB,CAAC,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACzG,QAAA,MAAM,sBAAsB,GAAG,KAAK,EAAE,sBAAsB,KAAK,CAAC,KAAmC,KAAK,KAAK,CAAC,CAAC;QACjH,MAAM,aAAa,GAAG,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC9D,QAAQ,MAAM,CAAC,QAAQ;YACnB,KAAK,QAAQ,CAAC,aAAa,CAAC;YAC5B,KAAK,QAAQ,CAAC,YAAY,CAAC;AAC3B,YAAA,KAAK,QAAQ,CAAC,eAAe,EAAE;AAC3B,gBAAA,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAClE,gBAAA,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,mBAAmB,CAAC,OAAO,IAAI,EAAE,CAAC;;AAE/F,gBAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,YAAY,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;AACnE,oBAAA,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;AACrC,iBAAA;gBACD,IAAI,WAAW,GAAG,EAAE,CAAC;AACrB,gBAAA,IAAG,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;AACrB,oBAAA,WAAW,GAAG,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC;AAC1F,iBAAA;AACD,gBAAA,MAAM,MAAM,GAAG;oBACX,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,oBAAA,UAAU,EAAE;AACR,wBAAA,KAAK,EAAE;4BACH,WAAW,EAAE,OAAO,UAAkB,EAAE,WAAsB,GAAA,EAAE,KAAI;AAChE,gCAAA,MAAM,QAAQ,GAAG,CAAA,EAAG,UAAU,CAAI,CAAA,EAAA,WAAW,EAAE,CAAA;gCAC/C,IAAI,CAAC,SAAS,CAAC,wBAAwB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;AACnD,oCAAA,SAAS,CAAC,wBAAwB,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,OAAO,CAAC,OAAO,OAAO,KAAI;AAC3E,wCAAA,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,uBAAuB,CAAC,YAAY,EAAE,CAAiC,8BAAA,EAAA,UAAU,sBAAsB,WAAW,CAAA,yDAAA,CAA2D,CAAC,CAAC;wCAC9N,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;qCAChC,CAAC,CAAC,CAAA;AACN,iCAAA;gCACD,MAAM,MAAM,GAAG,MAAM,SAAS,CAAC,wBAAwB,CAAC,GAAG,CAAC,QAAQ,CAAE,CAAC;gCACvE,OAAO;AACH,oCAAA;AACI,wCAAA,SAAS,EAAE,IAAI;wCACf,QAAQ,EAAE,MAAM,CAAC,IAAI;wCACrB,MAAM,EAAE,MAAM,CAAC,YAAY;wCAC3B,QAAQ,EAAE,MAAM,CAAC,QAAQ;AAC5B,qCAAA;iCACJ,CAAA;6BACJ;4BACD,GAAG,EAAE,MAAM,IAAI,CAAC,wBAAwB,CAAC,OAAO,EAAE,KAAK,CAAC;AACxD,4BAAA,UAAU,EAAE;AACR,gCAAA,OAAO,EAAE,OAAO;AAChB,gCAAA,WAAW,EAAE,WAAW;AAC3B,6BAAA;4BACD,KAAK,EAAE,CAAC,OAAO;AACf,4BAAA,YAAY,EAAE,sBAAsB;AACvC,yBAAA;AACJ,qBAAA;oBACD,qBAAqB,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAC,OAAO,CAAC,KAAK,CAAC;iBAEhE,CAAC;AACb,gBAAA,OAAO,sBAAsB,CAAC,MAAM,CAAC,CAAC;AACzC,aAAA;AACD,YAAA,KAAK,QAAQ,CAAC,WAAW,EAAE;gBACvB,MAAM,eAAe,GAAG,KAAmC,CAAC;AAC5D,gBAAA,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;AACjF,gBAAA,OAAO,sBAAsB,CAAC;oBAC1B,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,oBAAA,UAAU,EAAE;AACR,wBAAA,KAAK,EAAE;4BACH,GAAG,EAAE,eAAe,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK;4BAC5C,KAAK,EAAE,CAAC,OAAO;AACf,4BAAA,YAAY,EAAE,sBAAsB;AACpC,4BAAA,UAAU,EAAE;AACR,gCAAA,OAAO,EAAE,OAAO;AACnB,6BAAA;AACJ,yBAAA;AACJ,qBAAA;oBACD,qBAAqB,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAC,OAAO,CAAC,KAAK,CAAC;AAC5D,iBAAA,CAAC,CAAA;AACpB,aAAA;AACD,YAAA,KAAK,QAAQ,CAAC,SAAS,EAAE;gBACrB,MAAM,cAAc,GAAG,KAAkC,CAAC;AAC1D,gBAAA,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;AACjF,gBAAA,OAAO,sBAAsB,CAAC;oBAC1B,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,oBAAA,UAAU,EAAE;AACR,wBAAA,KAAK,EAAE;4BACH,GAAG,EAAE,cAAc,IAAI,IAAI;4BAC3B,KAAK,EAAE,CAAC,OAAO;AACf,4BAAA,YAAY,EAAE,sBAAsB;AACpC,4BAAA,UAAU,EAAE;AACR,gCAAA,OAAO,EAAE,OAAO;AACnB,6BAAA;AACJ,yBAAA;AACJ,qBAAA;oBACD,qBAAqB,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAC,OAAO,CAAC,KAAK,CAAC;AAC7D,iBAAA,CAAC,CAAC;AACpB,aAAA;AACD,YAAA,KAAK,QAAQ,CAAC,sBAAsB,EAAE;AAClC,gBAAA,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;gBACjF,MAAM,cAAc,GAAG,KAAoC,CAAC;AAC5D,gBAAA,OAAO,sBAAsB,CAAC;oBAC1B,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,oBAAA,UAAU,EAAE;AACR,wBAAA,KAAK,EAAE;4BACH,GAAG,EAAE,cAAc,IAAI,IAAI;4BAC3B,KAAK,EAAE,CAAC,OAAO;AACf,4BAAA,YAAY,EAAE,sBAAsB;AACpC,4BAAA,UAAU,EAAE;AACR,gCAAA,OAAO,EAAE,OAAO;AACnB,6BAAA;AACJ,yBAAA;AACJ,qBAAA;oBACD,qBAAqB,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAC,OAAO,CAAC,KAAK,CAAC;AAClD,iBAAA,CAAC,CAAC;AAC/B,aAAA;YACD,KAAK,QAAQ,CAAC,2BAA2B,CAAC;AAC1C,YAAA,KAAK,QAAQ,CAAC,uBAAuB,EAAE;gBACnC,MAAM,aAAa,GAAG,KAAgC,CAAC;AACvD,gBAAA,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC5D,gBAAA,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAClC,gBAAA,OAAO,sBAAsB,CAAC;oBAC1B,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,oBAAA,UAAU,EAAE;AACR,wBAAA,KAAK,EAAE;AACH,4BAAA,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,aAAa;4BACnD,KAAK,EAAE,CAAC,OAAO;AACf,4BAAA,YAAY,EAAE,sBAAsB;AACpC,4BAAA,UAAU,EAAE;gCACR,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,QAAQ;gCACzD,MAAM,EAAE,MAAM,CAAC,QAAQ;AAC1B,6BAAA;AACJ,yBAAA;AACJ,qBAAA;oBACD,qBAAqB,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAC,OAAO,CAAC,KAAK,CAAC;AAC9D,iBAAA,CAAC,CAAC;AACnB,aAAA;YACD,KAAK,QAAQ,CAAC,UAAU,CAAC;YACzB,KAAK,QAAQ,CAAC,OAAO,CAAC;YACtB,KAAK,QAAQ,CAAC,QAAQ,CAAC;AACvB,YAAA,KAAK,QAAQ,CAAC,cAAc,EAAE;gBAC1B,MAAM,YAAY,GAAG,KAAkC,CAAA;AACvD,gBAAA,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC5D,gBAAA,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC;AACnE,gBAAA,OAAO,sBAAsB,CAAC;oBAC1B,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,oBAAA,UAAU,EAAE;AACR,wBAAA,KAAK,EAAE;4BACH,GAAG,EAAE,YAAY,IAAI,IAAI;4BACzB,KAAK,EAAE,CAAC,OAAO;;AAEf,4BAAA,SAAS,EAAE,cAAc;AACzB,4BAAA,YAAY,EAAE,sBAAsB;4BACpC,IAAI,EAAE,MAAM,CAAC,QAAQ;AACrB,4BAAA,UAAU,EAAE;AACR,gCAAA,SAAS,EAAE,SAAS;AACvB,6BAAA;AACJ,yBAAA;AACD,wBAAA,4BAA4B,EAAE;AAC1B,4BAAA,GAAG,EAAE,IAAI;AACZ,yBAAA;AACJ,qBAAA;oBACD,qBAAqB,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAC,OAAO,CAAC,KAAK,CAAC;AAE/D,iBAAA,CAAC,CAAC;AAClB,aAAA;AACD,YAAA,SAAS;AACL,gBAAA,OAAO,sBAAsB,CAAC;oBAC1B,OAAO,EAAE,IAAI,CAAC,WAAW;AACzB,oBAAA,UAAU,EAAE;AACR,wBAAA,WAAW,EAAE;AACT,4BAAA,GAAG,EAAE,KAAK;AACb,yBAAA;AACD,wBAAA,4BAA4B,EAAE;AAC1B,4BAAA,GAAG,EAAE,IAAI;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACH,4BAAA,GAAG,EAAE,KAAK;4BACV,KAAK,EAAE,CAAC,OAAO;AACf,4BAAA,YAAY,EAAE,sBAAsB;AACvC,yBAAA;AACJ,qBAAA;oBACD,qBAAqB,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAC,OAAO,CAAC,KAAK,CAAC;AAC7D,iBAAA,CAAC,CAAC;AACpB,aAAA;AACJ,SAAA;KACJ;AACO,IAAA,MAAM,eAAe,CAAC,OAAiB,EAAE,KAA0D,EAAA;QACvG,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAC9B,YAAA,OAAO,EAAE,CAAC;AACb,SAAA;;AAED,QAAA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE;AACtB,YAAA,KAAK,MAAM,MAAM,IAAI,KAAK,EAAE;AACxB,gBAAA,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;oBAC1B,IAAI;AACA,wBAAA,MAAM,oBAAoB,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;wBACxF,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,CAAA,SAAA,EAAY,oBAAoB,CAAC,oBAAoB,CAAE,CAAA,CAAC,CAAC;AAC1I,wBAAA,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC;wBAC3B,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,oBAAoB,CAAC,CAAC;wBAClE,MAAM;AACT,qBAAA;AACD,oBAAA,OAAO,GAAG,EAAE;wBACR,SAAS;AACZ,qBAAA;AACJ,iBAAA;AACJ,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;KAChB;;AA5Mc,SAAwB,CAAA,wBAAA,GAAG,IAAI,GAAsD;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../../../../../src/components/Grid/core/components/Component/model/Component.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { IControl } from \"../../../../../../interfaces/context\";\nimport { IDateTime } from \"../../../../../DateTime/interfaces\";\nimport { IDecimal } from \"../../../../../Decimal/interfaces\";\nimport { ILookup } from \"../../../../../Lookup/interfaces\";\nimport { IMultiSelectOptionSet } from \"../../../../../MultiSelectOptionSet/interfaces\";\nimport { IOptionSet } from \"../../../../../OptionSet/interfaces\";\nimport { ITextField } from \"../../../../../TextField/interfaces\";\nimport { ITwoOptions } from \"../../../../../TwoOptions/interfaces\";\nimport { DataType } from \"../../../enums/DataType\";\nimport { GridDependency } from \"../../../model/GridDependency\";\nimport { IControlProps } from \"../Component\";\nimport { Attribute, DataTypes, Sanitizer } from \"@talxis/client-libraries\";\nimport { IGridColumn } from \"../../../interfaces/IGridColumn\";\n\nconst debounce = (func: (...args: any[]) => Promise<any>, wait: number) => {\n    let timeout: NodeJS.Timeout | null = null;\n    let promiseCache: Promise<any> | null = null;\n\n    return async (...args: any[]) => {\n        if (!promiseCache) {\n            promiseCache = func(...args);\n        }\n\n        if (timeout) clearTimeout(timeout);\n\n        timeout = setTimeout(() => {\n            promiseCache = null;\n        }, wait);\n\n        return promiseCache;\n    };\n};\n\nexport class Component extends GridDependency {\n    private _debouncedGetLookupValue = debounce(this._getLookupValue.bind(this), 50);\n    private static _lookupSavedQueriesCache = new Map<string, Promise<ComponentFramework.WebApi.Entity>>;\n\n    public async getControlProps(props: IControlProps): Promise<IControl<any, any, any, any>> {\n        const { column, onNotifyOutputChanged, record} = { ...props };\n        const value = this._getComponentValue(column, record.getValue(column.name));\n        const formattedValue = record.getFormattedValue(column.name);\n        const validation = record.getColumnInfo(column.name);\n        const onOverrideControlProps = (passedProps: IControl<any, any, any, any>): any => {\n            const overridenProps = props?.onOverrideControlProps?.(passedProps) ?? passedProps;\n            overridenProps.parameters = record.ui?.getCellEditorParameters(column.name, overridenProps.parameters) ?? overridenProps.parameters;\n            return overridenProps;\n        }\n        const attributeName = Attribute.GetNameFromAlias(column.name);\n        switch (column.dataType) {\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_OWNER:\n            case DataType.LOOKUP_CUSTOMER: {\n                const columnMetadata = await this._grid.metadata.get(column.name);\n                const targets = columnMetadata.Attributes.get(attributeName).attributeDescriptor.Targets ?? [];\n                //@ts-ignore - typings\n                if (column.dataType === DataType.LOOKUP_OWNER && window.TALXIS.Portal) {\n                    targets.push('systemuser', 'team')\n                }\n                let displayName = \"\";\n                if(targets.length === 1) {\n                    displayName = (await this._pcfContext.utils.getEntityMetadata(targets[0])).DisplayName;\n                }\n                const result = {\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            getAllViews: async (entityName: string, __queryType: number = 64) => {\n                                const cacheKey = `${entityName}_${__queryType}`\n                                if (!Component._lookupSavedQueriesCache.get(cacheKey)) {\n                                    Component._lookupSavedQueriesCache.set(cacheKey, new Promise(async (resolve) => {\n                                        const response = await this._pcfContext.webAPI.retrieveMultipleRecords('savedquery', `?$filter=returnedtypecode eq '${entityName}' and querytype eq ${__queryType} and isdefault eq true&$select=name,savedqueryid,fetchxml`);\n                                        resolve(response.entities[0])\n                                    }))\n                                }\n                                const result = await Component._lookupSavedQueriesCache.get(cacheKey)!;\n                                return [\n                                    {\n                                        isDefault: true,\n                                        viewName: result.name,\n                                        viewId: result.savedqueryid,\n                                        fetchXml: result.fetchxml\n                                    }\n                                ]\n                            },\n                            raw: await this._debouncedGetLookupValue(targets, value),\n                            attributes: {\n                                Targets: targets,\n                                DisplayName: displayName\n                            },\n                            error: validation?.error === false,\n                            errorMessage: validation?.errorMessage ?? \"\",\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n\n                } as ILookup;\n                return onOverrideControlProps(result);\n            }\n            case DataType.TWO_OPTIONS: {\n                const twoOptionsValue = value as boolean | undefined | null;\n                const [defaultValue, options] = await this._grid.metadata.getOptions(column.name)\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: twoOptionsValue === true ? true : false,\n                            error: validation?.error === false,\n                            errorMessage: validation?.errorMessage ?? \"\",\n                            attributes: {\n                                Options: options\n                            }\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                } as ITwoOptions)\n            }\n            case DataType.OPTIONSET: {\n                const optionSetValue = value as number | null | undefined;\n                const [defaultValue, options] = await this._grid.metadata.getOptions(column.name)\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: optionSetValue ?? null,\n                            error:  validation?.error === false,\n                            errorMessage: validation?.errorMessage ?? \"\",\n                            attributes: {\n                                Options: options\n                            }\n                        },\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                } as IOptionSet);\n            }\n            case DataType.MULTI_SELECT_OPTIONSET: {\n                const [defaultValue, options] = await this._grid.metadata.getOptions(column.name)\n                const optionSetValue = value as number[] | null | undefined;\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: optionSetValue ?? null,\n                            error:  validation?.error === false,\n                            errorMessage: validation?.errorMessage ?? \"\",\n                            attributes: {\n                                Options: options\n                            }\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                } as IMultiSelectOptionSet);\n            }\n            case DataType.DATE_AND_TIME_DATE_AND_TIME:\n            case DataType.DATE_AND_TIME_DATE_ONLY: {\n                const dateTimeValue = value as Date | null | undefined;\n                const metadata = await this._grid.metadata.get(column.name);\n                const date = dayjs(dateTimeValue);\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: date.isValid() ? date.toDate() : dateTimeValue,\n                            error: validation?.error === false,\n                            errorMessage: validation?.errorMessage ?? \"\",\n                            attributes: {\n                                Behavior: metadata.Attributes.get(attributeName).Behavior,\n                                Format: column.dataType\n                            }\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                    \n                } as IDateTime);\n            }\n            case DataType.WHOLE_NONE:\n            case DataType.DECIMAL:\n            case DataType.CURRENCY:\n            case DataType.WHOLE_DURATION: {\n                const decimalValue = value as number | null | undefined\n                const metadata = await this._grid.metadata.get(column.name);\n                const precision = metadata.Attributes.get(attributeName).Precision;\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        value: {\n                            raw: decimalValue ?? null,\n                            error: validation?.error === false,\n                            //formatted value is only used for currency => there is no way to get the currency symbol so the formatCurrency method is useless\n                            formatted: formattedValue,\n                            errorMessage: validation?.errorMessage ?? \"\",\n                            type: column.dataType,\n                            attributes: {\n                                Precision: precision\n                            }\n                        },\n                        NotifyOutputChangedOnUnmount: {\n                            //duration is ComboBox => no need to do this\n                            raw: column.dataType !== DataType.WHOLE_DURATION,\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n\n                } as IDecimal);\n            }\n            default: {\n                return onOverrideControlProps({\n                    context: this._pcfContext,\n                    parameters: {\n                        isResizable: {\n                            raw: false\n                        },\n                        NotifyOutputChangedOnUnmount: {\n                            raw: true,\n                        },\n                        value: {\n                            raw: value,\n                            type: column.dataType,\n                            error:  validation?.error === false,\n                            errorMessage: validation?.errorMessage ?? \"\"\n                        }\n                    },\n                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)\n                } as ITextField);\n            }\n        }\n    }\n    private async _getLookupValue(targets: string[], value: ComponentFramework.LookupValue[] | null | undefined): Promise<ComponentFramework.LookupValue[]> {\n        if (!value || value.length === 0) {\n            return [];\n        }\n        //this is case from filters where we only have the id to work it => we need to go through targets and search for the records\n        if (!value[0].entityType) {\n            for (const lookup of value) {\n                for (const target of targets) {\n                    try {\n                        const lookupEntityMetadata = await this._pcfContext.utils.getEntityMetadata(target, []);\n                        const response = await this._pcfContext.webAPI.retrieveRecord(target, lookup.id, `?$select=${lookupEntityMetadata.PrimaryNameAttribute}`);\n                        lookup.entityType = target;\n                        lookup.name = response[lookupEntityMetadata.PrimaryNameAttribute];\n                        break;\n                    }\n                    catch (err) {\n                        continue;\n                    }\n                }\n            }\n        }\n        return value;\n    }\n\n\n    //map because getValue API does not return values 1:1 to PCF bindings\n    private _getComponentValue(column: IGridColumn, value: any) {\n        switch(column.dataType) {\n            //getValue always returns string for TwoOptions\n            case DataTypes.TwoOptions: {\n                value = value == '1' ? true : false\n                break;\n            }\n            //getValue always returns string for OptionSet\n            case DataType.OPTIONSET: {\n                value = value ? parseInt(value) : null;\n                break;\n            }\n            case DataType.MULTI_SELECT_OPTIONSET: {\n                value = value ? value.split(',').map((x: string) => parseInt(x)) : null;\n                break;\n            }\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_CUSTOMER:\n            case DataType.LOOKUP_OWNER: {\n                //our implementation returns array, Power Apps returns object\n                if(value && !Array.isArray(value)) {\n                    value = [value];\n                }\n                value = value?.map((x: ComponentFramework.EntityReference) => Sanitizer.Lookup.getLookupValue(x))\n                break;\n            }\n        }\n        return value;\n    }\n}"],"names":[],"mappings":"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"}

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

@@ -1,45 +1,58 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { MessageBar, MessageBarType, CommandBarButton, Spinner, SpinnerSize } from '@fluentui/react';
+import { MessageBar, MessageBarType, CommandBarButton } from '@fluentui/react';
 import { useGridInstance } from '../../hooks/useGridInstance.js';
-import { useSave } from './hooks/useSave.js';
 import { useState } from 'react';
 import { getSaveStyles } from './styles.js';
 import { ChangeEditor } from './components/ChangeEditor/ChangeEditor.js';
-import { useRecordUpdateServiceController } from '../../services/RecordUpdateService/controllers/useRecordUpdateServiceController.js';
 
 const Save = () => {
     const grid = useGridInstance();
     const labels = grid.labels;
-    const styles = getSaveStyles();
-    const { isDirty, updatedRecords, hasInvalidRecords, clearAll } = useRecordUpdateServiceController();
-    const { isSaving, saveBtnProps, save } = useSave();
+    const styles = getSaveStyles(grid.parameters.EnableChangeEditor?.raw !== false);
+    const [isSaving, setIsSaving] = useState(false);
     const [changeEditorOpened, setChangeEditorOpened] = useState(false);
+    const hasInvalidRecords = grid.dataset.hasInvalidChanges?.();
+    const isDirty = grid.dataset.isDirty?.();
+    const numOfChanges = Object.keys(grid.dataset.getChanges?.() ?? []).length;
     const onMessageClick = () => {
-        if (!isDirty) {
+        if (!isDirty || isSaving || grid.parameters.EnableChangeEditor?.raw === false) {
             return;
         }
         setChangeEditorOpened(true);
     };
-    return (jsxs(Fragment, { children: [jsx("div", { onClick: onMessageClick, className: styles.root, "data-dirty": isDirty, children: jsx(MessageBar, { messageBarType: !hasInvalidRecords ? MessageBarType.info : MessageBarType.error, actions: jsxs("div", { className: styles.actions, children: [jsx(CommandBarButton, { text: isSaving ? saveBtnProps.text : undefined, disabled: saveBtnProps.disabled, onRenderIcon: isSaving ? () => jsx(Spinner, { size: SpinnerSize.small }) : undefined, iconProps: {
-                                    iconName: saveBtnProps.iconName,
-                                }, onClick: (e) => {
+    return (jsxs(Fragment, { children: [jsx("div", { onClick: onMessageClick, className: `${styles.root} talxis__grid-control__notification-bar`, children: jsx(MessageBar, { messageBarType: !hasInvalidRecords ? MessageBarType.info : MessageBarType.error, actions: jsxs("div", { className: styles.actions, children: [jsx(CommandBarButton, { disabled: hasInvalidRecords || grid.dataset.loading, text: isSaving ? grid.labels["saving-saving"]() : undefined, iconProps: {
+                                    iconName: 'Save',
+                                }, onClick: async (e) => {
                                     e.stopPropagation();
-                                    save();
-                                } }), jsx(CommandBarButton, { disabled: saveBtnProps.disabled && !hasInvalidRecords && !grid.props.parameters.ChangeEditorMode, iconProps: {
-                                    iconName: 'Delete'
-                                }, onClick: (e) => {
+                                    setIsSaving(true);
+                                    await grid.dataset.paging.loadExactPage(grid.paging.pageNumber, true);
+                                    setIsSaving(false);
+                                } }), jsx(CommandBarButton, { text: grid.labels['saving-discard-changes'](), disabled: isSaving || grid.dataset.loading, iconProps: {
+                                    iconName: 'EraseTool'
+                                }, onClick: async (e) => {
                                     e.stopPropagation();
-                                    clearAll();
-                                } })] }), isMultiline: false, children: isDirty &&
-                        jsx("span", { className: styles.notificationText, dangerouslySetInnerHTML: {
-                                __html: labels["saving-changenotification"]({ numOfChanges: updatedRecords.length })
-                            } }) }) }), changeEditorOpened &&
-                jsx(ChangeEditor, { onDismiss: (e) => {
+                                    if (window.confirm(grid.labels['saving-discard-all-confirmation']())) {
+                                        grid.dataset.clearChanges?.();
+                                        grid.pcfContext.factory.requestRender();
+                                    }
+                                } })] }), isMultiline: false, children: jsx("span", { className: styles.notificationText, dangerouslySetInnerHTML: {
+                            __html: (() => {
+                                let message = labels["saving-changenotification"]({ numOfChanges: numOfChanges });
+                                if (grid.parameters.EnableChangeEditor?.raw !== false) {
+                                    message += ` ${grid.labels['saving-clickreview']()}`;
+                                }
+                                return message;
+                            })()
+                        } }) }) }), changeEditorOpened &&
+                jsx(ChangeEditor, { onDismiss: (e, shouldRefresh) => {
                         //@ts-ignore
                         if (e?.code === 'Escape') {
                             return;
                         }
                         setChangeEditorOpened(false);
+                        if (shouldRefresh) {
+                            grid.dataset.paging.loadExactPage(grid.dataset.paging.pageNumber);
+                        }
                     } })] }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Save.js","sources":["../../../../../../src/components/Grid/core/components/Save/Save.tsx"],"sourcesContent":["import { CommandBarButton, MessageBar, MessageBarType, Spinner, SpinnerSize } from \"@fluentui/react\";\nimport { useGridInstance } from \"../../hooks/useGridInstance\";\nimport { useSave } from \"./hooks/useSave\";\nimport React, { useState } from 'react';\nimport { getSaveStyles } from \"./styles\";\nimport { ChangeEditor } from \"./components/ChangeEditor/ChangeEditor\";\nimport { useRecordUpdateServiceController } from \"../../services/RecordUpdateService/controllers/useRecordUpdateServiceController\";\n\nexport const Save = () => {\n    const grid = useGridInstance();\n    const labels = grid.labels;\n    const styles = getSaveStyles();\n    const { isDirty, updatedRecords, hasInvalidRecords, clearAll } = useRecordUpdateServiceController();\n    const { isSaving, saveBtnProps, save } = useSave();\n    const [changeEditorOpened, setChangeEditorOpened] = useState<boolean>(false);\n\n    const onMessageClick = () => {\n        if (!isDirty) {\n            return;\n        }\n        setChangeEditorOpened(true);\n    }\n    return (\n        <>\n            <div onClick={onMessageClick} className={styles.root} data-dirty={isDirty}>\n                <MessageBar\n                    messageBarType={!hasInvalidRecords ? MessageBarType.info : MessageBarType.error}\n                    actions={\n                        <div className={styles.actions}>\n                            <CommandBarButton\n                                text={isSaving ? saveBtnProps.text : undefined}\n                                disabled={saveBtnProps.disabled}\n                                onRenderIcon={isSaving ? () => <Spinner size={SpinnerSize.small} /> : undefined}\n                                iconProps={{\n                                    iconName: saveBtnProps.iconName,\n                                }}\n                                onClick={(e) => {\n                                    e.stopPropagation()\n                                    save();\n                                }}\n                            />\n                            <CommandBarButton\n                                disabled={saveBtnProps.disabled && !hasInvalidRecords && !grid.props.parameters.ChangeEditorMode}\n                                iconProps={{\n                                    iconName: 'Delete'\n                                }}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    clearAll();\n                                }}\n                            />\n                        </div>\n                    } isMultiline={false}>\n                    {isDirty &&\n                        <span className={styles.notificationText} dangerouslySetInnerHTML={{\n                            __html: labels[\"saving-changenotification\"]({ numOfChanges: updatedRecords.length })\n                        }}></span>\n                    }\n                </MessageBar>\n            </div>\n            {changeEditorOpened &&\n                <ChangeEditor onDismiss={(e) => {\n                    //@ts-ignore\n                    if(e?.code === 'Escape') {\n                        return;\n                    }\n                    setChangeEditorOpened(false);\n                }} />\n            }\n        </>\n    )\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;AAQO,MAAM,IAAI,GAAG,MAAK;AACrB,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;AAC3B,IAAA,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;AAC/B,IAAA,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,QAAQ,EAAE,GAAG,gCAAgC,EAAE,CAAC;IACpG,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;IACnD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE7E,MAAM,cAAc,GAAG,MAAK;QACxB,IAAI,CAAC,OAAO,EAAE;YACV,OAAO;AACV,SAAA;QACD,qBAAqB,CAAC,IAAI,CAAC,CAAC;AAChC,KAAC,CAAA;AACD,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,gBAAc,OAAO,EAAA,QAAA,EACrEA,IAAC,UAAU,EAAA,EACP,cAAc,EAAE,CAAC,iBAAiB,GAAG,cAAc,CAAC,IAAI,GAAG,cAAc,CAAC,KAAK,EAC/E,OAAO,EACHF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAC1B,QAAA,EAAA,CAAAE,GAAA,CAAC,gBAAgB,EACb,EAAA,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC,IAAI,GAAG,SAAS,EAC9C,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAC/B,YAAY,EAAE,QAAQ,GAAG,MAAMA,GAAC,CAAA,OAAO,IAAC,IAAI,EAAE,WAAW,CAAC,KAAK,GAAI,GAAG,SAAS,EAC/E,SAAS,EAAE;oCACP,QAAQ,EAAE,YAAY,CAAC,QAAQ;AAClC,iCAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;oCACX,CAAC,CAAC,eAAe,EAAE,CAAA;AACnB,oCAAA,IAAI,EAAE,CAAC;iCACV,EAAA,CACH,EACFA,GAAA,CAAC,gBAAgB,EAAA,EACb,QAAQ,EAAE,YAAY,CAAC,QAAQ,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAChG,SAAS,EAAE;AACP,oCAAA,QAAQ,EAAE,QAAQ;AACrB,iCAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;oCACX,CAAC,CAAC,eAAe,EAAE,CAAC;AACpB,oCAAA,QAAQ,EAAE,CAAC;AACf,iCAAC,GACH,CACA,EAAA,CAAA,EACR,WAAW,EAAE,KAAK,YACnB,OAAO;AACJ,wBAAAA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAE,uBAAuB,EAAE;AAC/D,gCAAA,MAAM,EAAE,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,YAAY,EAAE,cAAc,CAAC,MAAM,EAAE,CAAC;6BACvF,EAAS,CAAA,EAAA,CAEL,EACX,CAAA,EACL,kBAAkB;AACf,gBAAAA,GAAA,CAAC,YAAY,EAAC,EAAA,SAAS,EAAE,CAAC,CAAC,KAAI;;AAE3B,wBAAA,IAAG,CAAC,EAAE,IAAI,KAAK,QAAQ,EAAE;4BACrB,OAAO;AACV,yBAAA;wBACD,qBAAqB,CAAC,KAAK,CAAC,CAAC;qBAChC,EAAA,CAAI,CAEV,EAAA,CAAA,EACN;AACL;;;;"}
+{"version":3,"file":"Save.js","sources":["../../../../../../src/components/Grid/core/components/Save/Save.tsx"],"sourcesContent":["import { CommandBarButton, MessageBar, MessageBarType } from \"@fluentui/react\";\nimport { useGridInstance } from \"../../hooks/useGridInstance\";\nimport { useState } from 'react';\nimport { getSaveStyles } from \"./styles\";\nimport { ChangeEditor } from \"./components/ChangeEditor/ChangeEditor\";\n\n\nexport const Save = () => {\n    const grid = useGridInstance();\n    const labels = grid.labels;\n    const styles = getSaveStyles(grid.parameters.EnableChangeEditor?.raw !== false);\n    const [isSaving, setIsSaving] = useState(false);\n    const [changeEditorOpened, setChangeEditorOpened] = useState<boolean>(false);\n    const hasInvalidRecords = grid.dataset.hasInvalidChanges?.()\n    const isDirty = grid.dataset.isDirty?.();\n    const numOfChanges = Object.keys(grid.dataset.getChanges?.() ?? []).length;\n\n    const onMessageClick = () => {\n        if (!isDirty || isSaving || grid.parameters.EnableChangeEditor?.raw === false) {\n            return;\n        }\n        setChangeEditorOpened(true);\n    }\n    return (\n        <>\n            <div onClick={onMessageClick} className={`${styles.root} talxis__grid-control__notification-bar`}>\n                <MessageBar\n                    messageBarType={!hasInvalidRecords ? MessageBarType.info : MessageBarType.error}\n                    actions={\n                        <div className={styles.actions}>\n                            <CommandBarButton\n                                disabled={hasInvalidRecords || grid.dataset.loading}\n                                text={isSaving ? grid.labels[\"saving-saving\"]() : undefined}\n                                iconProps={{\n                                    iconName: 'Save',\n                                }}\n                                onClick={async (e) => {\n                                    e.stopPropagation()\n                                    setIsSaving(true);\n                                    await grid.dataset.paging.loadExactPage(grid.paging.pageNumber, true);\n                                    setIsSaving(false);\n                                }}\n                            />\n                            <CommandBarButton\n                                text={grid.labels['saving-discard-changes']()}\n                                disabled={isSaving || grid.dataset.loading}\n                                iconProps={{\n                                    iconName: 'EraseTool'\n                                }}\n                                onClick={async (e) => {\n                                    e.stopPropagation();\n                                    if (window.confirm(grid.labels['saving-discard-all-confirmation']())) {\n                                        grid.dataset.clearChanges?.();\n                                        grid.pcfContext.factory.requestRender();\n                                    }\n                                }}\n                            />\n                        </div>\n                    } isMultiline={false}>\n                    <span className={styles.notificationText} dangerouslySetInnerHTML={{\n                        __html: (() => {\n                            let message = labels[\"saving-changenotification\"]({ numOfChanges: numOfChanges })\n                            if (grid.parameters.EnableChangeEditor?.raw !== false) {\n                                message += ` ${grid.labels['saving-clickreview']()}`\n                            }\n                            return message;\n                        })()\n                    }}></span>\n                </MessageBar>\n            </div>\n            {changeEditorOpened &&\n                <ChangeEditor onDismiss={(e, shouldRefresh) => {\n                    //@ts-ignore\n                    if (e?.code === 'Escape') {\n                        return;\n                    }\n                    setChangeEditorOpened(false);\n                    if(shouldRefresh) {\n                        grid.dataset.paging.loadExactPage(grid.dataset.paging.pageNumber);\n                    }\n                }} />\n            }\n        </>\n    )\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/components/Grid/core/components/Save/components/ChangeEditor/ChangeEditor.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import { IDialogProps } from "@fluentui/react";
-export declare const ChangeEditor: (props: IDialogProps) => JSX.Element;
+interface IChangeDialogProps extends IDialogProps {
+    onDismiss: (ev?: React.MouseEvent<HTMLButtonElement>, shoulRefreshGrid?: boolean) => void;
+}
+export declare const ChangeEditor: (props: IChangeDialogProps) => JSX.Element;
+export {};

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

@@ -1,26 +1,46 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useTheme, DialogFooter, PrimaryButton, Spinner, SpinnerSize } from '@fluentui/react';
-import { useEffect } from 'react';
+import { useTheme, DialogFooter, PrimaryButton, DefaultButton } from '@fluentui/react';
 import { useGridInstance } from '../../../../hooks/useGridInstance.js';
-import { useRecordUpdateServiceController } from '../../../../services/RecordUpdateService/controllers/useRecordUpdateServiceController.js';
 import Dialog from '../../../Dialog/index.js';
-import { RecordGrids } from './components/RecordGrids/RecordGrids.js';
 import { getChangeEditorStyles } from './styles.js';
-import { useSave } from '../../hooks/useSave.js';
+import { ChangeGrid } from './components/ChangeGrid/ChangeGrid.js';
+import { useState, useRef, useEffect } from 'react';
 
 const ChangeEditor = (props) => {
     const grid = useGridInstance();
+    const recordChanges = grid.dataset.getChanges?.() ?? [];
     const labels = grid.labels;
-    const controller = useRecordUpdateServiceController();
-    const { isSaving, saveBtnProps, save } = useSave();
-    const updatedRecords = controller.updatedRecords;
+    const [activeSaveOperationsCount, setActiveSaveOperationsCount] = useState(0);
     const styles = getChangeEditorStyles(useTheme());
+    const datasetsRef = useRef(new Set());
+    const shouldRefreshOnDismissRef = useRef(false);
+    const onDismiss = (ev) => {
+        //do not close the dialog if we have pending save operations
+        if (activeSaveOperationsCount > 0) {
+            return;
+        }
+        props.onDismiss?.(ev, shouldRefreshOnDismissRef.current);
+    };
+    const isSaveDisabled = () => {
+        if (activeSaveOperationsCount > 0) {
+            return true;
+        }
+        if ([...datasetsRef.current.values()].find(x => x.hasInvalidChanges?.())) {
+            return true;
+        }
+        return false;
+    };
+    useEffect(() => {
+        return () => {
+            props.onDismiss?.(undefined, shouldRefreshOnDismissRef.current);
+        };
+    }, []);
     useEffect(() => {
-        if (updatedRecords.length === 0) {
-            props.onDismiss?.();
+        if (activeSaveOperationsCount > 0) {
+            shouldRefreshOnDismissRef.current = true;
         }
-    }, [updatedRecords]);
-    return jsxs(Dialog, { ...props, width: 1000, minWidth: '80%', modalProps: {
+    }, [activeSaveOperationsCount]);
+    return jsxs(Dialog, { ...props, onDismiss: onDismiss, width: 1000, minWidth: '80%', modalProps: {
             isBlocking: true,
             className: styles.root,
             layerProps: {
@@ -29,10 +49,21 @@ const ChangeEditor = (props) => {
         }, dialogContentProps: {
             showCloseButton: true,
             title: labels["saving-changepreview-title"]({
-                numOfChanges: updatedRecords.length
+                numOfChanges: Object.keys(recordChanges).length
             })
-        }, hidden: false, children: [jsx("div", { className: styles.recordGrids, children: updatedRecords.map(record => jsx(RecordGrids, { record: record }, record.getRecordId())) }), jsx(DialogFooter, { children: jsx(PrimaryButton, { className: styles.saveBtn, text: saveBtnProps.text, disabled: saveBtnProps.disabled, onClick: () => save(), children: isSaving &&
-                        jsx(Spinner, { size: SpinnerSize.small }) }) })] });
+        }, hidden: false, children: [jsx("div", { className: styles.recordGrids, children: Object.values(recordChanges).map(recordChange => jsx(ChangeGrid, { onDatasetDestroyed: (dataset) => datasetsRef.current.delete(dataset), onDatasetReady: (dataset) => datasetsRef.current.add(dataset), onIsSaving: (value) => {
+                        setActiveSaveOperationsCount(count => value ? count + 1 : count - 1);
+                    }, recordChange: recordChange }, recordChange.record.getRecordId())) }), jsxs(DialogFooter, { children: [jsx(PrimaryButton, { className: styles.saveBtn, disabled: isSaveDisabled(), text: activeSaveOperationsCount > 0 ? grid.labels['saving-saving']() : grid.labels['saving-save-all'](), onClick: async () => {
+                            setActiveSaveOperationsCount(count => count + 1);
+                            await Promise.all([...datasetsRef.current.values()].map(dataset => dataset.save?.()));
+                            grid.dataset.clearChanges?.();
+                            setActiveSaveOperationsCount(count => count - 1);
+                        } }), jsx(DefaultButton, { text: grid.labels['saving-discard-all'](), disabled: activeSaveOperationsCount > 0, onClick: async () => {
+                            if (window.confirm(grid.labels['saving-discard-all-confirmation']())) {
+                                grid.dataset.clearChanges?.();
+                                grid.pcfContext.factory.requestRender();
+                            }
+                        } })] })] });
 };
 
 export { ChangeEditor };

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

@@ -1 +1 @@
-{"version":3,"file":"ChangeEditor.js","sources":["../../../../../../../../src/components/Grid/core/components/Save/components/ChangeEditor/ChangeEditor.tsx"],"sourcesContent":["import { DialogFooter, IDialogProps, PrimaryButton, Spinner, SpinnerSize, useTheme } from \"@fluentui/react\";\nimport { useEffect } from 'react';\nimport { useGridInstance } from \"../../../../hooks/useGridInstance\";\nimport { useRecordUpdateServiceController } from \"../../../../services/RecordUpdateService/controllers/useRecordUpdateServiceController\";\nimport Dialog from \"../../../Dialog\";\nimport { RecordGrids } from \"./components/RecordGrids/RecordGrids\";\nimport { getChangeEditorStyles } from \"./styles\";\nimport { useSave } from \"../../hooks/useSave\";\n\nexport const ChangeEditor = (props: IDialogProps) => {\n    const grid = useGridInstance();\n    const labels = grid.labels;\n    const controller = useRecordUpdateServiceController();\n    const { isSaving, saveBtnProps, save } = useSave();\n    const updatedRecords = controller.updatedRecords;\n\n    const styles = getChangeEditorStyles(useTheme());\n    useEffect(() => {\n        if (updatedRecords.length === 0) {\n            props.onDismiss?.();\n        }\n    }, [updatedRecords]);\n\n\n    return <Dialog\n        {...props}\n        width={1000}\n        minWidth={'80%'}\n        modalProps={{\n            isBlocking: true,\n            className: styles.root,\n            layerProps: {\n                eventBubblingEnabled: true\n            }\n        }}\n        dialogContentProps={{\n            showCloseButton: true,\n            title: labels[\"saving-changepreview-title\"]({\n                numOfChanges: updatedRecords.length\n            })\n        }}\n        hidden={false}>\n            <div className={styles.recordGrids}>\n                {updatedRecords.map(record => <RecordGrids key={record.getRecordId()} record={record} />)}\n            </div>\n        <DialogFooter>\n            <PrimaryButton\n                className={styles.saveBtn}\n                text={saveBtnProps.text}\n                disabled={saveBtnProps.disabled}\n                onClick={() => save()}\n            >\n                {isSaving &&\n                    <Spinner size={SpinnerSize.small} />\n                }\n            </PrimaryButton>\n        </DialogFooter>\n    </Dialog>\n}"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AASa,MAAA,YAAY,GAAG,CAAC,KAAmB,KAAI;AAChD,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;AAC3B,IAAA,MAAM,UAAU,GAAG,gCAAgC,EAAE,CAAC;IACtD,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;AACnD,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC;AAEjD,IAAA,MAAM,MAAM,GAAG,qBAAqB,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,YAAA,KAAK,CAAC,SAAS,IAAI,CAAC;AACvB,SAAA;AACL,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;AAGrB,IAAA,OAAOA,IAAC,CAAA,MAAM,EACN,EAAA,GAAA,KAAK,EACT,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE;AACR,YAAA,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,MAAM,CAAC,IAAI;AACtB,YAAA,UAAU,EAAE;AACR,gBAAA,oBAAoB,EAAE,IAAI;AAC7B,aAAA;AACJ,SAAA,EACD,kBAAkB,EAAE;AAChB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,KAAK,EAAE,MAAM,CAAC,4BAA4B,CAAC,CAAC;gBACxC,YAAY,EAAE,cAAc,CAAC,MAAM;aACtC,CAAC;AACL,SAAA,EACD,MAAM,EAAE,KAAK,EAAA,QAAA,EAAA,CACTC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,QAAA,EAAA,cAAc,CAAC,GAAG,CAAC,MAAM,IAAIA,GAAC,CAAA,WAAW,IAA4B,MAAM,EAAE,MAAM,EAAA,EAApC,MAAM,CAAC,WAAW,EAAE,CAAoB,CAAC,EAAA,CACvF,EACVA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACTA,GAAC,CAAA,aAAa,EACV,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,IAAI,EAAE,YAAY,CAAC,IAAI,EACvB,QAAQ,EAAE,YAAY,CAAC,QAAQ,EAC/B,OAAO,EAAE,MAAM,IAAI,EAAE,YAEpB,QAAQ;wBACLA,GAAC,CAAA,OAAO,EAAC,EAAA,IAAI,EAAE,WAAW,CAAC,KAAK,EAAI,CAAA,EAAA,CAE5B,EACL,CAAA,CAAA,EAAA,CACV,CAAA;AACb;;;;"}
+{"version":3,"file":"ChangeEditor.js","sources":["../../../../../../../../src/components/Grid/core/components/Save/components/ChangeEditor/ChangeEditor.tsx"],"sourcesContent":["import { DefaultButton, DialogFooter, IDialogProps, PrimaryButton, useTheme } from \"@fluentui/react\";\nimport { useGridInstance } from \"../../../../hooks/useGridInstance\";\nimport Dialog from \"../../../Dialog\";\nimport { getChangeEditorStyles } from \"./styles\";\nimport { ChangeGrid } from \"./components/ChangeGrid/ChangeGrid\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { IDataset } from \"@talxis/client-libraries\";\n\ninterface IChangeDialogProps extends IDialogProps {\n    onDismiss: (ev?: React.MouseEvent<HTMLButtonElement>, shoulRefreshGrid?: boolean) => void;\n}\n\nexport const ChangeEditor = (props: IChangeDialogProps) => {\n    const grid = useGridInstance();\n    const recordChanges = grid.dataset.getChanges?.() ?? [];\n    const labels = grid.labels;\n    const [activeSaveOperationsCount, setActiveSaveOperationsCount] = useState(0);\n    const styles = getChangeEditorStyles(useTheme());\n    const datasetsRef = useRef<Set<IDataset>>(new Set());\n    const shouldRefreshOnDismissRef = useRef(false);\n\n    const onDismiss = (ev?: React.MouseEvent<HTMLButtonElement>) => {\n        //do not close the dialog if we have pending save operations\n        if (activeSaveOperationsCount > 0) {\n            return;\n        }\n        props.onDismiss?.(ev, shouldRefreshOnDismissRef.current);\n    }\n\n    const isSaveDisabled = () => {\n        if (activeSaveOperationsCount > 0) {\n            return true;\n        }\n        if ([...datasetsRef.current.values()].find(x => x.hasInvalidChanges?.())) {\n            return true;\n        }\n        return false;\n    }\n\n    useEffect(() => {\n        return () => {\n            props.onDismiss?.(undefined, shouldRefreshOnDismissRef.current);\n        }\n    }, []);\n\n    useEffect(() => {\n        if(activeSaveOperationsCount > 0) {\n            shouldRefreshOnDismissRef.current = true;\n        }\n    }, [activeSaveOperationsCount])\n    return <Dialog\n        {...props}\n        onDismiss={onDismiss}\n        width={1000}\n        minWidth={'80%'}\n        modalProps={{\n            isBlocking: true,\n            className: styles.root,\n            layerProps: {\n                eventBubblingEnabled: true\n            }\n        }}\n        dialogContentProps={{\n            showCloseButton: true,\n            title: labels[\"saving-changepreview-title\"]({\n                numOfChanges: Object.keys(recordChanges).length\n            })\n        }}\n        hidden={false}>\n        <div className={styles.recordGrids}>\n            {Object.values(recordChanges).map(recordChange => <ChangeGrid\n                onDatasetDestroyed={(dataset) => datasetsRef.current.delete(dataset)}\n                onDatasetReady={(dataset) => datasetsRef.current.add(dataset)}\n                onIsSaving={(value) => {\n                    setActiveSaveOperationsCount(count => value ? count + 1 : count - 1);\n                }}\n                key={recordChange.record.getRecordId()}\n                recordChange={recordChange} />)}\n        </div>\n        <DialogFooter>\n            <PrimaryButton\n                className={styles.saveBtn}\n                disabled={isSaveDisabled()}\n                text={activeSaveOperationsCount > 0 ? grid.labels['saving-saving']() : grid.labels['saving-save-all']()}\n                onClick={async () => {\n                    setActiveSaveOperationsCount(count => count + 1);\n                    await Promise.all([...datasetsRef.current.values()].map(dataset => dataset.save?.()));\n                    grid.dataset.clearChanges?.();\n                    setActiveSaveOperationsCount(count => count - 1);\n                }}\n            />\n            <DefaultButton\n                text={grid.labels['saving-discard-all']()}\n                disabled={activeSaveOperationsCount > 0}\n                onClick={async () => {\n                    if (window.confirm(grid.labels['saving-discard-all-confirmation']())) {\n                        grid.dataset.clearChanges?.();\n                        grid.pcfContext.factory.requestRender();\n                    }\n                }}\n            />\n        </DialogFooter>\n    </Dialog>\n}"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/Grid/core/components/Save/components/ChangeEditor/components/ChangeGrid/ChangeGrid.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IDataset, IRecordChange } from "@talxis/client-libraries";
+interface IChangeGrid {
+    recordChange: IRecordChange;
+    onDatasetReady: (dataset: IDataset) => void;
+    onDatasetDestroyed: (dataset: IDataset) => void;
+    onIsSaving: (value: boolean) => void;
+}
+export declare const ChangeGrid: (props: IChangeGrid) => JSX.Element;
+export {};