npm - @talxis/base-controls - Versions diffs - 1.2502.1 → 1.2503.1 - Mend

@talxis/base-controls 1.2502.1 → 1.2503.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (283) hide show

package/dist/components/Grid/core/components/Cell/styles.js ADDED Viewed

@@ -0,0 +1,59 @@
+import { mergeStyleSets } from '@fluentui/react';
+const getJustifyContent = (columnAlignment) => {
+    switch (columnAlignment) {
+        case 'left': {
+            return 'flex-start';
+        }
+        case 'center': {
+            return 'center';
+        }
+        case 'right': {
+            return 'flex-end';
+        }
+    }
+};
+const getCellStyles = () => {
+    return mergeStyleSets({
+        cellRoot: {
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        checkbox: {
+            marginRight: 0.5
+        }
+    });
+};
+const getInnerCellStyles = (isEditing, theme, columnAlignment) => {
+    return mergeStyleSets({
+        innerCellRoot: {
+            flex: 1,
+            display: 'flex',
+            overflow: 'hidden',
+            alignItems: 'center',
+            height: '100%',
+            marginLeft: isEditing ? -1 : undefined,
+            marginRight: isEditing ? -1 : undefined,
+        },
+        shimmerWrapper: {
+            height: 10
+        },
+        shimmerRoot: {
+            width: '100%',
+            paddingLeft: 10,
+            paddingRight: 10
+        },
+        errorIconRoot: {
+            color: `${theme.semanticColors.errorIcon} !important`
+        },
+        uneditableIconRoot: {
+            color: `${theme.semanticColors.bodyText} !important`
+        }
+    });
+};
+export { getCellStyles, getInnerCellStyles, getJustifyContent };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/core/components/Cell/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/core/components/Cell/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\nimport { IColumn } from \"@talxis/client-libraries\";\n\nexport const getJustifyContent = (columnAlignment: Required<IColumn['alignment']>) => {\n switch(columnAlignment) {\n case 'left': {\n return 'flex-start'\n }\n case 'center': {\n return 'center'\n }\n case 'right': {\n return 'flex-end'\n }\n }\n}\n\n\nexport const getCellStyles = () => {\n return mergeStyleSets({\n cellRoot: {\n height: '100%',\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n checkbox: {\n marginRight: 0.5\n }\n })\n}\n\nexport const getInnerCellStyles = (isEditing: boolean, theme: ITheme, columnAlignment: IColumn['alignment']) => {\n return mergeStyleSets({\n innerCellRoot: {\n flex: 1,\n display: 'flex',\n overflow: 'hidden',\n alignItems: 'center',\n height: '100%',\n marginLeft: isEditing ? - 1 : undefined,\n marginRight: isEditing ? - 1 : undefined,\n },\n\n shimmerWrapper: {\n height: 10\n },\n shimmerRoot: {\n width: '100%',\n paddingLeft: 10,\n paddingRight: 10\n },\n errorIconRoot: {\n color: `${theme.semanticColors.errorIcon} !important`\n },\n uneditableIconRoot: {\n color: `${theme.semanticColors.bodyText} !important`\n }\n })\n}\n\n"],"names":[],"mappings":";;AAGa,MAAA,iBAAiB,GAAG,CAAC,eAA+C,KAAI;AACjF,IAAA,QAAO,eAAe;QAClB,KAAK,MAAM,EAAE;AACT,YAAA,OAAO,YAAY,CAAA;AACtB,SAAA;QACD,KAAK,QAAQ,EAAE;AACX,YAAA,OAAO,QAAQ,CAAA;AAClB,SAAA;QACD,KAAK,OAAO,EAAE;AACV,YAAA,OAAO,UAAU,CAAA;AACpB,SAAA;AACJ,KAAA;AACL,EAAC;AAGM,MAAM,aAAa,GAAG,MAAK;AAC9B,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,QAAQ,EAAE;AACN,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,cAAc,EAAE,QAAQ;AAC3B,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,GAAG;AACnB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,EAAC;AAEY,MAAA,kBAAkB,GAAG,CAAC,SAAkB,EAAE,KAAa,EAAE,eAAqC,KAAI;AAC3G,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,aAAa,EAAE;AACX,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,SAAS,GAAG,CAAE,CAAC,GAAG,SAAS;YACvC,WAAW,EAAE,SAAS,GAAG,CAAE,CAAC,GAAG,SAAS;AAC3C,SAAA;AAED,QAAA,cAAc,EAAE;AACZ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAC,cAAc,CAAC,SAAS,CAAa,WAAA,CAAA;AACxD,SAAA;AACD,QAAA,kBAAkB,EAAE;AAChB,YAAA,KAAK,EAAE,CAAG,EAAA,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAa,WAAA,CAAA;AACvD,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/core/components/ColumnHeader/ColumnHeader.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useRef } from 'react';
+import { useState, useMemo, useRef } from 'react';
 import { useTheme, CommandBarButton, Icon, Label } from '@fluentui/react';
 import { FilterCallout } from '../../../filtering/components/FilterCallout/FilterCallout.js';
 import { SortingContextualMenu } from '../../../sorting/components/SortingContextualMenu/SortingContextualMenu.js';
@@ -11,7 +11,8 @@ const ColumnHeader = (props) => {
     const column = props.baseColumn;
     const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState(null);
     const [filterCalloutProps, setFilterCalloutProps] = useState(null);
-    const columnHeaderStyles = getColumnHeaderStyles(useTheme());
+    const theme = useTheme();
+    const columnHeaderStyles = useMemo(() => getColumnHeaderStyles(theme, column.alignment), [theme, column.alignment]);
     const buttonRef = useRef(null);
     const onClick = () => {
         if ((column.isFilterable === false && column.disableSorting)) {

package/dist/components/Grid/core/components/ColumnHeader/ColumnHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColumnHeader.js","sources":["../../../../../../src/components/Grid/core/components/ColumnHeader/ColumnHeader.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { CommandBarButton, Icon, Label, useTheme } from '@fluentui/react';\nimport { FilterCallout, IFilterCallout } from '../../../filtering/components/FilterCallout/FilterCallout';\nimport { IGridColumn } from '../../interfaces/IGridColumn';\nimport { ISortingContextualMenu, SortingContextualMenu } from '../../../sorting/components/SortingContextualMenu/SortingContextualMenu';\nimport { getColumnHeaderStyles } from './styles';\nimport { useGridInstance } from '../../hooks/useGridInstance';\nimport React from 'react';\n\nexport interface IColumnHeader {\n baseColumn: IGridColumn;\n}\n\nexport const ColumnHeader = (props: IColumnHeader) => {\n const grid = useGridInstance();\n const column = props.baseColumn;\n const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState<ISortingContextualMenu \| null>(null);\n const [filterCalloutProps, setFilterCalloutProps] = useState<IFilterCallout \| null>(null);\n const columnHeaderStyles = ~~getColumnHeaderStyles~~(~~useTheme~~());\n const buttonRef = useRef<HTMLElement>(null);\n\n const onClick = () => {\n if ((column.isFilterable === false && column.disableSorting)) {\n return;\n }\n setColumnHeaderContextualMenuProps({\n column: column,\n onDismiss: (e, dismissAll, showFilterCallout) => {\n setColumnHeaderContextualMenuProps(null);\n if (!showFilterCallout) {\n return;\n }\n setFilterCalloutProps({\n column: column,\n onDismiss: () => {\n setFilterCalloutProps(null)\n }\n })\n }\n });\n }\n const preventDismissOnEvent = (e: Event \| React.MouseEvent<Element, MouseEvent> \| React.KeyboardEvent<Element> \| React.FocusEvent<Element, Element>) => {\n if(e.type !== 'scroll') {\n return false;\n }\n const target = e.target as HTMLElement;\n //check for vertical scroll\n if (target?.classList?.contains('ag-body-viewport') \|\| target?.classList?.contains('ag-body-vertical-scroll-viewport')) {\n return true;\n }\n //ios outputs horizontal scroll if focused in callout btn which would result in dismiss of callout\n if (/iPad\|iPhone\|iPod/.test(navigator.userAgent)) {\n return true;\n }\n return false;\n }\n return (\n <>\n <CommandBarButton\n elementRef={buttonRef}\n title={column.displayName}\n className={columnHeaderStyles.root}\n onClick={onClick}\n >\n {grid.isEditable && !column.isEditable && column.type !== 'action' && <Icon className={columnHeaderStyles.editIcon} iconName='Uneditable' />}\n <div className={columnHeaderStyles.labelWrapper}>\n <Label className={columnHeaderStyles.label}>{column.displayName}</Label>\n {column.isRequired &&\n <span className={columnHeaderStyles.requiredSymbol}>*</span>\n }\n </div>\n <div className={columnHeaderStyles.filterSortIcons}>\n {column.isSorted && <Icon iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'} />}\n {column.isFiltered && <Icon iconName='Filter' />}\n </div>\n </CommandBarButton>\n {columnHeaderContextualMenuProps &&\n <SortingContextualMenu \n target={buttonRef}\n calloutProps={{\n preventDismissOnEvent: preventDismissOnEvent\n }} \n {...columnHeaderContextualMenuProps} />\n }\n {filterCalloutProps &&\n <FilterCallout preventDismissOnEvent={preventDismissOnEvent} target={buttonRef} {...filterCalloutProps} />\n }\n </>\n )\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;AAaa,MAAA,YAAY,GAAG,CAAC,KAAoB,KAAI;AACjD,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC;IAChC,MAAM,CAAC,+BAA+B,EAAE,kCAAkC,CAAC,GAAG,QAAQ,CAAgC,IAAI,CAAC,CAAC;IAC5H,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;AAC1F,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,~~QAAQ~~,EAAE,CAAC,CAAC;~~AAC7D~~,IAAA,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,MAAK;QACjB,KAAK,MAAM,CAAC,YAAY,KAAK,KAAK,IAAI,MAAM,CAAC,cAAc,GAAG;YAC1D,OAAO;AACV,SAAA;AACD,QAAA,kCAAkC,CAAC;AAC/B,YAAA,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,iBAAiB,KAAI;gBAC5C,kCAAkC,CAAC,IAAI,CAAC,CAAC;gBACzC,IAAI,CAAC,iBAAiB,EAAE;oBACpB,OAAO;AACV,iBAAA;AACD,gBAAA,qBAAqB,CAAC;AAClB,oBAAA,MAAM,EAAE,MAAM;oBACd,SAAS,EAAE,MAAK;wBACZ,qBAAqB,CAAC,IAAI,CAAC,CAAA;qBAC9B;AACJ,iBAAA,CAAC,CAAA;aACL;AACJ,SAAA,CAAC,CAAC;AACP,KAAC,CAAA;AACD,IAAA,MAAM,qBAAqB,GAAG,CAAC,CAAoH,KAAI;AACnJ,QAAA,IAAG,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE;AACpB,YAAA,OAAO,KAAK,CAAC;AAChB,SAAA;AACD,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAsB,CAAC;;AAExC,QAAA,IAAI,MAAM,EAAE,SAAS,EAAE,QAAQ,CAAC,kBAAkB,CAAC,IAAI,MAAM,EAAE,SAAS,EAAE,QAAQ,CAAC,kCAAkC,CAAC,EAAE;AACpH,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;;QAED,IAAI,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE;AAC9C,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAA;AACD,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,IAAA,CAAC,gBAAgB,EAAA,EACb,UAAU,EAAE,SAAS,EACrB,KAAK,EAAE,MAAM,CAAC,WAAW,EACzB,SAAS,EAAE,kBAAkB,CAAC,IAAI,EAClC,OAAO,EAAE,OAAO,EAAA,QAAA,EAAA,CAEf,IAAI,CAAC,UAAU,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAIE,IAAC,IAAI,EAAA,EAAC,SAAS,EAAE,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,EAAC,YAAY,EAAA,CAAG,EAC5IF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,CAAC,YAAY,aAC3CE,GAAC,CAAA,KAAK,EAAC,EAAA,SAAS,EAAE,kBAAkB,CAAC,KAAK,EAAA,QAAA,EAAG,MAAM,CAAC,WAAW,GAAS,EACvE,MAAM,CAAC,UAAU;gCACdA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,kBAAkB,CAAC,cAAc,EAAU,QAAA,EAAA,GAAA,EAAA,CAAA,CAAA,EAAA,CAE9D,EACNF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,kBAAkB,CAAC,eAAe,EAC7C,QAAA,EAAA,CAAA,MAAM,CAAC,QAAQ,IAAIE,GAAC,CAAA,IAAI,EAAC,EAAA,QAAQ,EAAE,MAAM,CAAC,kBAAkB,GAAG,UAAU,GAAG,QAAQ,EAAI,CAAA,EACxF,MAAM,CAAC,UAAU,IAAIA,GAAA,CAAC,IAAI,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAG,CAAA,CAAA,EAAA,CAC9C,CACS,EAAA,CAAA,EAClB,+BAA+B;AAC5B,gBAAAA,GAAA,CAAC,qBAAqB,EAClB,EAAA,MAAM,EAAE,SAAS,EACjB,YAAY,EAAE;AACV,wBAAA,qBAAqB,EAAE,qBAAqB;qBAC/C,EACG,GAAA,+BAA+B,EAAI,CAAA,EAE9C,kBAAkB;AACf,gBAAAA,GAAA,CAAC,aAAa,EAAA,EAAC,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,EAAE,SAAS,EAAM,GAAA,kBAAkB,EAAI,CAAA,CAAA,EAAA,CAE/G,EACN;AACL;;;;"}
1	+ {"version":3,"file":"ColumnHeader.js","sources":["../../../../../../src/components/Grid/core/components/ColumnHeader/ColumnHeader.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from 'react';\nimport { CommandBarButton, Icon, Label, useTheme } from '@fluentui/react';\nimport { FilterCallout, IFilterCallout } from '../../../filtering/components/FilterCallout/FilterCallout';\nimport { IGridColumn } from '../../interfaces/IGridColumn';\nimport { ISortingContextualMenu, SortingContextualMenu } from '../../../sorting/components/SortingContextualMenu/SortingContextualMenu';\nimport { getColumnHeaderStyles } from './styles';\nimport { useGridInstance } from '../../hooks/useGridInstance';\nimport React from 'react';\n\nexport interface IColumnHeader {\n baseColumn: IGridColumn;\n}\n\nexport const ColumnHeader = (props: IColumnHeader) => {\n const grid = useGridInstance();\n const column = props.baseColumn;\n const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState<ISortingContextualMenu \| null>(null);\n const [filterCalloutProps, setFilterCalloutProps] = useState<IFilterCallout \| null>(null);\n const theme = useTheme();\n const columnHeaderStyles = useMemo(() => getColumnHeaderStyles(theme, column.alignment), [theme, column.alignment])\n const buttonRef = useRef<HTMLElement>(null);\n\n const onClick = () => {\n if ((column.isFilterable === false && column.disableSorting)) {\n return;\n }\n setColumnHeaderContextualMenuProps({\n column: column,\n onDismiss: (e, dismissAll, showFilterCallout) => {\n setColumnHeaderContextualMenuProps(null);\n if (!showFilterCallout) {\n return;\n }\n setFilterCalloutProps({\n column: column,\n onDismiss: () => {\n setFilterCalloutProps(null)\n }\n })\n }\n });\n }\n const preventDismissOnEvent = (e: Event \| React.MouseEvent<Element, MouseEvent> \| React.KeyboardEvent<Element> \| React.FocusEvent<Element, Element>) => {\n if(e.type !== 'scroll') {\n return false;\n }\n const target = e.target as HTMLElement;\n //check for vertical scroll\n if (target?.classList?.contains('ag-body-viewport') \|\| target?.classList?.contains('ag-body-vertical-scroll-viewport')) {\n return true;\n }\n //ios outputs horizontal scroll if focused in callout btn which would result in dismiss of callout\n if (/iPad\|iPhone\|iPod/.test(navigator.userAgent)) {\n return true;\n }\n return false;\n }\n return (\n <>\n <CommandBarButton\n elementRef={buttonRef}\n title={column.displayName}\n className={columnHeaderStyles.root}\n onClick={onClick}\n >\n {grid.isEditable && !column.isEditable && column.type !== 'action' && <Icon className={columnHeaderStyles.editIcon} iconName='Uneditable' />}\n <div className={columnHeaderStyles.labelWrapper}>\n <Label className={columnHeaderStyles.label}>{column.displayName}</Label>\n {column.isRequired &&\n <span className={columnHeaderStyles.requiredSymbol}>*</span>\n }\n </div>\n <div className={columnHeaderStyles.filterSortIcons}>\n {column.isSorted && <Icon iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'} />}\n {column.isFiltered && <Icon iconName='Filter' />}\n </div>\n </CommandBarButton>\n {columnHeaderContextualMenuProps &&\n <SortingContextualMenu \n target={buttonRef}\n calloutProps={{\n preventDismissOnEvent: preventDismissOnEvent\n }} \n {...columnHeaderContextualMenuProps} />\n }\n {filterCalloutProps &&\n <FilterCallout preventDismissOnEvent={preventDismissOnEvent} target={buttonRef} {...filterCalloutProps} />\n }\n </>\n )\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js CHANGED Viewed

@@ -1,30 +1,48 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useTheme, Checkbox } from '@fluentui/react';
-import { useState, useMemo } from 'react';
-import { useSelectionController } from '../../../../../selection/controllers/useSelectionController.js';
+import { useTheme, ThemeProvider, Checkbox } from '@fluentui/react';
+import { useContext, useEffect } from 'react';
 import { useGridInstance } from '../../../../hooks/useGridInstance.js';
 import { getGlobalCheckboxStyles } from './styles.js';
+import { AgGridContext } from '../../../AgGrid/context.js';
+import { useThemeGenerator, Theming, useRerender } from '@talxis/react-components';
 const GlobalCheckBox = () => {
     const grid = useGridInstance();
-    const theme = useTheme();
+    const baseTheme = useTheme();
+    const theme = useThemeGenerator(baseTheme.palette.themePrimary, baseTheme.semanticColors.bodyBackground, Theming.GetTextColorForBackground(baseTheme.semanticColors.bodyBackground),
+    //@ts-ignore - typings
+    grid.pcfContext.fluentDesignLanguage?.v8FluentOverrides);
     const styles = getGlobalCheckboxStyles(theme);
-    const selection = useSelectionController();
-    //TODO: why does useRerender not work?
-    const [_, rerender] = useState(0);
-    useMemo(() => {
-        grid.setRefreshGlobalCheckBox(() => rerender((previous) => previous + 1));
+    const selection = grid.selection;
+    const agGrid = useContext(AgGridContext);
+    const rerender = useRerender();
+    const getCheckBoxState = () => {
+        if (grid.selection.allRecordsSelected) {
+            return 'checked';
+        }
+        if (grid.dataset.getSelectedRecordIds().length > 0) {
+            return 'intermediate';
+        }
+        return 'unchecked';
+    };
+    const checkboxState = getCheckBoxState();
+    useEffect(() => {
+        agGrid.setGlobalCheckBoxRenderer(() => rerender());
     }, []);
     if (grid.dataset.sortedRecordIds.length === 0) {
         return jsx(Fragment, {});
     }
-    return (jsx("div", { className: styles.root, children: selection.type === 'multiple' &&
-            jsx(Checkbox, { checked: selection.allRecordsSelected, indeterminate: selection.selectedRecordIds.length > 0 && !selection.allRecordsSelected, onChange: (e, checked) => {
+    return (jsx(ThemeProvider, { theme: theme, className: styles.root, children: selection.type === 'multiple' &&
+            jsx(Checkbox, { checked: checkboxState === 'checked', styles: {
+                    checkbox: styles.checkbox
+                }, indeterminate: checkboxState === 'intermediate', onChange: (e, checked) => {
                     if (checked) {
                         selection.selectAll();
-                        return;
                     }
-                    selection.clear();
+                    else {
+                        selection.clear();
+                    }
+                    agGrid.refreshRowSelection();
                 } }) }));
 };

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GlobalCheckbox.js","sources":["../../../../../../../../src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.tsx"],"sourcesContent":["import { Checkbox, useTheme } from \"@fluentui/react\";\nimport ~~React,~~ { ~~useMemo~~, ~~useState~~ } from \"react\";\nimport { ~~useSelectionController~~ } from \"~~../../../../../selection~~/~~controllers/useSelectionController~~\";\nimport { ~~useGridInstance~~ } from \"~~../../../../hooks/useGridInstance~~\";\nimport { ~~getGlobalCheckboxStyles~~ } from \"~~./styles~~\";\nimport { useRerender } from \"~~../../../../../../../hooks~~/~~useRerender~~\";\n\nexport const GlobalCheckBox = () => {\n const grid = useGridInstance();\n const ~~theme~~ = useTheme();\n const styles = getGlobalCheckboxStyles(theme);\n const selection = ~~useSelectionController()~~;\n ~~//TODO:~~ ~~why~~ ~~does~~ ~~useRerender not work?\~~n const ~~[_,~~ rerender] = ~~useState~~(0)\n\n ~~useMemo~~(() => {\n grid.~~setRefreshGlobalCheckBox~~(() => ~~rerender~~((~~previous~~) => ~~previous~~ + 1))\n }, []);\n\n if(grid.dataset.sortedRecordIds.length === 0) {\n return <></>\n }\n return (\n <~~div~~ className={styles.root}>\n {selection.type === 'multiple' &&\n <Checkbox\n checked={~~selection~~.~~allRecordsSelected~~}\n indeterminate={~~selection.selectedRecordIds.length~~ > ~~0 && !selection.allRecordsSelected~~}\n onChange={(e, checked) => {\n if(checked) {\n selection.selectAll()\n ~~return~~;\n }\n ~~selection~~.~~clear~~();\n }} />\n }\n </~~div~~>\n )\n};"],"names":["_jsx"],"mappings":"~~;;;;;;;AAOO~~,MAAM,cAAc,GAAG,MAAK;AAC/B,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,~~KAAK~~,GAAG,QAAQ,EAAE,CAAC;~~AACzB~~,IAAA,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAA,MAAM,SAAS,GAAG,~~sBAAsB~~,~~EAAE~~,CAAC~~;;IAE3C~~,MAAM,CAAC,CAAC,~~EAAE~~,QAAQ,CAAC,GAAG,~~QAAQ~~,~~CAAC~~,CAAC,CAAC,~~CAAA~~;~~IAEjC~~,OAAO,CAAC,~~MAAK~~;~~AACT~~,~~QAAA~~,IAAI,CAAC,~~wBAAwB~~,CAAC,MAAM,~~QAAQ~~,CAAC,CAAC,~~QAAQ~~,~~KAAK~~,~~QAAQ~~,GAAG,CAAC,CAAC,CAAC,CAAA;~~KAC5E~~,EAAE,EAAE,CAAC,CAAC;IAEP,~~IAAG~~,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;~~AAC1C~~,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;AACD,IAAA,QACIA,~~GAAA~~,CAAA,~~KAAA~~,~~EAAA~~,~~EAAK~~,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,~~EACtB~~,SAAS,CAAC,IAAI,KAAK,UAAU;~~AAC1B~~,~~YAAAA~~,~~GAAA~~,~~CAAC,~~QAAQ,~~EAAA~~,~~EACL,~~OAAO,EAAE,~~SAAS~~,~~CAAC~~,~~kBAAkB~~,~~EACrC~~,~~aAAa~~,EAAE,~~SAAS~~,~~CAAC~~,~~iBAAiB~~,CAAC,~~MAAM~~,~~GAAG~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~SAAS~~,~~CAAC~~,~~kBAAkB~~,~~EACtF~~,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAI;AACrB,oBAAA,~~IAAG~~,OAAO,EAAE;~~wBACR~~,SAAS,CAAC,SAAS,EAAE,~~CAAA~~;~~wBACrB~~,~~OAAO~~;~~AACV~~,~~qBAAA~~;~~oBACD~~,SAAS,CAAC,KAAK,EAAE,CAAC;~~iBACrB~~,EAAA,CAAI,~~EAEX~~,CAAA,~~EACT~~;AACL;;;;"}
1	+ {"version":3,"file":"GlobalCheckbox.js","sources":["../../../../../../../../src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.tsx"],"sourcesContent":["import { Checkbox, ThemeProvider, useTheme } from \"@fluentui/react\";\nimport { useContext, useEffect } from \"react\";\nimport { useGridInstance } from \"../../../../hooks/useGridInstance\";\nimport { getGlobalCheckboxStyles } from \"./styles\";\nimport { AgGridContext } from \"../../../AgGrid/context\";\nimport { Theming, useRerender, useThemeGenerator } from \"@talxis/react-components\";\n\n\nexport const GlobalCheckBox = () => {\n const grid = useGridInstance();\n const baseTheme = useTheme();\n const theme = useThemeGenerator(\n baseTheme.palette.themePrimary,\n baseTheme.semanticColors.bodyBackground,\n Theming.GetTextColorForBackground(baseTheme.semanticColors.bodyBackground),\n //@ts-ignore - typings\n grid.pcfContext.fluentDesignLanguage?.v8FluentOverrides\n )\n const styles = getGlobalCheckboxStyles(theme);\n const selection = grid.selection;\n const agGrid = useContext(AgGridContext);\n const rerender = useRerender();\n\n const getCheckBoxState = () => {\n if (grid.selection.allRecordsSelected) {\n return 'checked';\n }\n if (grid.dataset.getSelectedRecordIds().length > 0) {\n return 'intermediate';\n }\n return 'unchecked';\n }\n\n const checkboxState = getCheckBoxState();\n\n useEffect(() => {\n agGrid.setGlobalCheckBoxRenderer(() => rerender())\n }, []);\n\n if (grid.dataset.sortedRecordIds.length === 0) {\n return <></>\n }\n return (\n <ThemeProvider theme={theme} className={styles.root}>\n {selection.type === 'multiple' &&\n <Checkbox\n checked={checkboxState === 'checked'}\n styles={{\n checkbox: styles.checkbox\n }}\n indeterminate={checkboxState === 'intermediate'}\n onChange={(e, checked) => {\n if (checked) {\n selection.selectAll();\n }\n else {\n selection.clear();\n }\n agGrid.refreshRowSelection();\n }} />\n }\n </ThemeProvider>\n )\n};"],"names":["_jsx"],"mappings":";;;;;;;;AAQO,MAAM,cAAc,GAAG,MAAK;AAC/B,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,iBAAiB,CAC3B,SAAS,CAAC,OAAO,CAAC,YAAY,EAC9B,SAAS,CAAC,cAAc,CAAC,cAAc,EACvC,OAAO,CAAC,yBAAyB,CAAC,SAAS,CAAC,cAAc,CAAC,cAAc,CAAC;;AAE1E,IAAA,IAAI,CAAC,UAAU,CAAC,oBAAoB,EAAE,iBAAiB,CAC1D,CAAA;AACD,IAAA,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AACzC,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,MAAM,gBAAgB,GAAG,MAAK;AAC1B,QAAA,IAAI,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;AACnC,YAAA,OAAO,SAAS,CAAC;AACpB,SAAA;QACD,IAAI,IAAI,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AAChD,YAAA,OAAO,cAAc,CAAC;AACzB,SAAA;AACD,QAAA,OAAO,WAAW,CAAC;AACvB,KAAC,CAAA;AAED,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,SAAS,CAAC,MAAK;QACX,MAAM,CAAC,yBAAyB,CAAC,MAAM,QAAQ,EAAE,CAAC,CAAA;KACrD,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;AAC3C,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;AACD,IAAA,QACIA,GAAC,CAAA,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,QAAA,EAC9C,SAAS,CAAC,IAAI,KAAK,UAAU;YAC1BA,GAAC,CAAA,QAAQ,IACL,OAAO,EAAE,aAAa,KAAK,SAAS,EACpC,MAAM,EAAE;oBACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;AAC5B,iBAAA,EACD,aAAa,EAAE,aAAa,KAAK,cAAc,EAC/C,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAI;AACrB,oBAAA,IAAI,OAAO,EAAE;wBACT,SAAS,CAAC,SAAS,EAAE,CAAC;AACzB,qBAAA;AACI,yBAAA;wBACD,SAAS,CAAC,KAAK,EAAE,CAAC;AACrB,qBAAA;oBACD,MAAM,CAAC,mBAAmB,EAAE,CAAC;iBAChC,EAAA,CAAI,EAED,CAAA,EACnB;AACL;;;;"}

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.d.ts CHANGED Viewed

@@ -7,7 +7,8 @@ export declare const getGlobalCheckboxStyles: (theme: ITheme) => import("@fluent
         justifyContent: string;
         height: string;
         alignItems: string;
-        position: string;
-        left: number;
+    };
+    checkbox: {
+        marginRight: number;
     };
 }>;

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.js CHANGED Viewed

@@ -3,14 +3,15 @@ import { mergeStyleSets } from '@fluentui/react';
 const getGlobalCheckboxStyles = (theme) => {
     return mergeStyleSets({
         root: {
-            backgroundColor: theme.palette.white,
+            backgroundColor: theme.semanticColors.bodyBackground,
             flexGrow: 1,
             display: 'flex',
             justifyContent: 'center',
             height: '100%',
-            alignItems: 'center',
-            position: 'relative',
-            left: 1
+            alignItems: 'center'
+        },
+        checkbox: {
+            marginRight: 0.5
         }
     });
 };

package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\"\n\nexport const getGlobalCheckboxStyles = (theme: ITheme) => {\n return mergeStyleSets({\n root: {\n backgroundColor: theme.~~palette~~.~~white~~,\n flexGrow: 1,\n display: 'flex',\n justifyContent: 'center',\n height: '100%',\n alignItems: 'center',\n ~~position~~: ~~'relative',\~~n ~~left~~: 1\n }\n });\n}"],"names":[],"mappings":";;AAEa,MAAA,uBAAuB,GAAG,CAAC,KAAa,KAAI;AACrD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,eAAe,EAAE,KAAK,CAAC,~~OAAO~~,CAAC,~~KAAK~~;~~AACpC~~,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;~~AACpB~~,~~YAAA~~,QAAQ,EAAE~~,UAAU~~;~~AACpB~~,YAAA,~~IAAI~~,EAAE,~~CAAC~~;~~AACV~~,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}
1	+ {"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\"\n\nexport const getGlobalCheckboxStyles = (theme: ITheme) => {\n return mergeStyleSets({\n root: {\n backgroundColor: theme.semanticColors.bodyBackground,\n flexGrow: 1,\n display: 'flex',\n justifyContent: 'center',\n height: '100%',\n alignItems: 'center'\n },\n checkbox: {\n marginRight: 0.5\n }\n });\n}"],"names":[],"mappings":";;AAEa,MAAA,uBAAuB,GAAG,CAAC,KAAa,KAAI;AACrD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;AACpD,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,UAAU,EAAE,QAAQ;AACvB,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,GAAG;AACnB,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

package/dist/components/Grid/core/components/ColumnHeader/styles.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { ITheme } from "@fluentui/react";
-export declare const getColumnHeaderStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+import { IColumn } from "@talxis/client-libraries";
+export declare const getColumnHeaderStyles: (theme: ITheme, columnAlignment: Required<IColumn['alignment']>) => import("@fluentui/react").IProcessedStyleSet<{
     root: {
         width: string;
         textAlign: string;
@@ -18,6 +19,7 @@ export declare const getColumnHeaderStyles: (theme: ITheme) => import("@fluentui
         flex: number;
         display: string;
         minWidth: number;
+        justifyContent: string | undefined;
     };
     label: {
         overflow: string;

package/dist/components/Grid/core/components/ColumnHeader/styles.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { mergeStyleSets } from '@fluentui/react';
+import { getJustifyContent } from '../Cell/styles.js';
-const getColumnHeaderStyles = (theme) => {
+const getColumnHeaderStyles = (theme, columnAlignment) => {
     return mergeStyleSets({
         root: {
             width: '100%',
@@ -19,7 +20,8 @@ const getColumnHeaderStyles = (theme) => {
         labelWrapper: {
             flex: 1,
             display: 'flex',
-            minWidth: 0
+            minWidth: 0,
+            justifyContent: getJustifyContent(columnAlignment)
         },
         label: {
             overflow: 'hidden',

package/dist/components/Grid/core/components/ColumnHeader/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/core/components/ColumnHeader/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\n\nexport const getColumnHeaderStyles = (theme: ITheme) => {\n return mergeStyleSets({\n root: {\n width: '100%',\n textAlign: 'left',\n height: 42,\n paddingLeft: 10,\n paddingRight: 10,\n justifyContent: 'flex-start',\n '.ms-Button-flexContainer': {\n justifyContent: 'flex-start',\n width: '100%',\n gap: 2,\n pointerEvents: 'none'\n }\n },\n labelWrapper: {\n flex: 1,\n display: 'flex',\n minWidth: 0\n },\n label: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n cursor: 'pointer',\n },\n requiredSymbol: {\n color: theme.semanticColors.errorIcon,\n position: 'relative',\n top: 4,\n left: 2\n },\n filterSortIcons: {\n display: 'flex',\n gap: 2\n },\n editIcon: {\n marginRight: 3\n }\n })\n}"],"names":[],"mappings":"~~;;AAEa~~,~~MAAA,~~qBAAqB,GAAG,CAAC,KAAa,KAAI;~~AACnD~~,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,cAAc,EAAE,YAAY;AAC5B,YAAA,0BAA0B,EAAE;AACxB,gBAAA,cAAc,EAAE,YAAY;AAC5B,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,aAAa,EAAE,MAAM;AACxB,aAAA;AACJ,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,CAAC;~~AACd~~,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,MAAM,EAAE,SAAS;AACpB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;AACrC,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,IAAI,EAAE,CAAC;AACV,SAAA;AACD,QAAA,eAAe,EAAE;AACb,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,CAAC;AACjB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}
1	+ {"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/core/components/ColumnHeader/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\nimport { IColumn } from \"@talxis/client-libraries\";\nimport { getJustifyContent } from \"../Cell/styles\";\n\nexport const getColumnHeaderStyles = (theme: ITheme, columnAlignment: Required<IColumn['alignment']>) => {\n return mergeStyleSets({\n root: {\n width: '100%',\n textAlign: 'left',\n height: 42,\n paddingLeft: 10,\n paddingRight: 10,\n justifyContent: 'flex-start',\n '.ms-Button-flexContainer': {\n justifyContent: 'flex-start',\n width: '100%',\n gap: 2,\n pointerEvents: 'none'\n }\n },\n labelWrapper: {\n flex: 1,\n display: 'flex',\n minWidth: 0,\n justifyContent: getJustifyContent(columnAlignment)\n },\n label: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n cursor: 'pointer',\n },\n requiredSymbol: {\n color: theme.semanticColors.errorIcon,\n position: 'relative',\n top: 4,\n left: 2\n },\n filterSortIcons: {\n display: 'flex',\n gap: 2\n },\n editIcon: {\n marginRight: 3\n }\n })\n}"],"names":[],"mappings":";;;MAIa,qBAAqB,GAAG,CAAC,KAAa,EAAE,eAA+C,KAAI;AACpG,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,cAAc,EAAE,YAAY;AAC5B,YAAA,0BAA0B,EAAE;AACxB,gBAAA,cAAc,EAAE,YAAY;AAC5B,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,aAAa,EAAE,MAAM;AACxB,aAAA;AACJ,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,cAAc,EAAE,iBAAiB,CAAC,eAAe,CAAC;AACrD,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,MAAM,EAAE,SAAS;AACpB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;AACrC,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,IAAI,EAAE,CAAC;AACV,SAAA;AACD,QAAA,eAAe,EAAE;AACb,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,WAAW,EAAE,CAAC;AACjB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

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

@@ -11,7 +11,7 @@ const Save = () => {
     const styles = getSaveStyles(grid.parameters.EnableChangeEditor?.raw !== false);
     const [isSaving, setIsSaving] = useState(false);
     const [changeEditorOpened, setChangeEditorOpened] = useState(false);
-    const hasInvalidRecords = grid.dataset.hasInvalidChanges?.();
+    const isDatasetValid = grid.dataset.isValid() && !grid.dataset.hasInvalidChanges();
     const isDirty = grid.dataset.isDirty?.();
     const numOfChanges = Object.keys(grid.dataset.getChanges?.() ?? []).length;
     const onMessageClick = () => {
@@ -20,7 +20,7 @@ const Save = () => {
         }
         setChangeEditorOpened(true);
     };
-    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: {
+    return (jsxs(Fragment, { children: [jsx("div", { onClick: onMessageClick, className: `${styles.root} talxis__grid-control__notification-bar`, children: jsx(MessageBar, { messageBarType: isDatasetValid ? MessageBarType.info : MessageBarType.error, actions: jsxs("div", { className: styles.actions, children: [jsx(CommandBarButton, { disabled: !isDatasetValid || grid.dataset.loading, text: isSaving ? grid.labels["saving-saving"]() : undefined, iconProps: {
                                     iconName: 'Save',
                                 }, onClick: async (e) => {
                                     e.stopPropagation();
@@ -45,14 +45,13 @@ const Save = () => {
                             })()
                         } }) }) }), 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);
                         }
+                        else {
+                            grid.pcfContext.factory.requestRender();
+                        }
                     } })] }));
 };

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

	@@ -1 +1 @@
1	- {"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":";;;;;;;AAOO,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,CAAC,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,GAAG,KAAK,KAAK,CAAC,CAAC;IAChF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;~~IAC7E~~,MAAM,~~iBAAiB~~,GAAG,IAAI,CAAC,OAAO,CAAC,~~iBAAiB~~,IAAI,~~CAAA~~;~~IAC5D~~,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC;AACzC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,IAAI,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;IAE3E,MAAM,cAAc,GAAG,MAAK;AACxB,QAAA,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,GAAG,KAAK,KAAK,EAAE;YAC3E,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,CAAA,EAAG,MAAM,CAAC,IAAI,CAAyC,uCAAA,CAAA,EAAA,QAAA,EAC5FA,IAAC,UAAU,EAAA,EACP,cAAc,EAAE,~~CAAC~~,~~iBAAiB,~~GAAG,cAAc,CAAC,IAAI,GAAG,cAAc,CAAC,KAAK,~~EAC/E~~,OAAO,EACHF,~~IAAA~~,CAAA,KAAA,EAAA,~~EAAK~~,SAAS,EAAE,MAAM,CAAC,OAAO,~~EAC1B~~,QAAA,EAAA,~~CAAAE~~,~~GAAA~~,~~CAAC~~,gBAAgB,~~EACb~~,~~EAAA,~~QAAQ,EAAE,~~iBAAiB~~,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,~~EACnD~~,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,GAAG,SAAS,EAC3D,SAAS,EAAE;AACP,oCAAA,QAAQ,EAAE,MAAM;AACnB,iCAAA,EACD,OAAO,EAAE,OAAO,CAAC,KAAI;oCACjB,CAAC,CAAC,eAAe,EAAE,CAAA;oCACnB,WAAW,CAAC,IAAI,CAAC,CAAC;AAClB,oCAAA,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;oCACtE,WAAW,CAAC,KAAK,CAAC,CAAC;iCACtB,EAAA,CACH,EACFA,GAAA,CAAC,gBAAgB,EAAA,EACb,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,wBAAwB,CAAC,EAAE,EAC7C,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,EAC1C,SAAS,EAAE;AACP,oCAAA,QAAQ,EAAE,WAAW;AACxB,iCAAA,EACD,OAAO,EAAE,OAAO,CAAC,KAAI;oCACjB,CAAC,CAAC,eAAe,EAAE,CAAC;AACpB,oCAAA,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,iCAAiC,CAAC,EAAE,CAAC,EAAE;AAClE,wCAAA,IAAI,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC;AAC9B,wCAAA,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;AAC3C,qCAAA;AACL,iCAAC,EACH,CAAA,CAAA,EAAA,CACA,EACR,WAAW,EAAE,KAAK,EAAA,QAAA,EACpBA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAE,uBAAuB,EAAE;4BAC/D,MAAM,EAAE,CAAC,MAAK;AACV,gCAAA,IAAI,OAAO,GAAG,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC,CAAA;gCACjF,IAAI,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,GAAG,KAAK,KAAK,EAAE;oCACnD,OAAO,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,CAAA,CAAE,CAAA;AACvD,iCAAA;AACD,gCAAA,OAAO,OAAO,CAAC;AACnB,6BAAC,GAAG;yBACP,EAAS,CAAA,EAAA,CACD,EACX,CAAA,EACL,kBAAkB;gBACfA,GAAC,CAAA,YAAY,IAAC,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAI~~;;AAE1C,wBAAA,IAAI,CAAC,EAAE,IAAI,KAAK,QAAQ,EAAE~~;~~4BACtB~~,~~OAAO;AACV,yBAAA;wBACD,~~qBAAqB,CAAC,KAAK,CAAC,CAAC;AAC7B,wBAAA,IAAG,aAAa,EAAE;AACd,4BAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;AACrE,yBAAA;qBACJ,EAAA,CAAI,CAEV,EAAA,CAAA,EACN;AACL;;;;"}
1	+ {"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 isDatasetValid = grid.dataset.isValid() && !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={isDatasetValid ? MessageBarType.info : MessageBarType.error}\n actions={\n <div className={styles.actions}>\n <CommandBarButton\n disabled={!isDatasetValid \|\| 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 setChangeEditorOpened(false);\n if(shouldRefresh) {\n grid.dataset.paging.loadExactPage(grid.dataset.paging.pageNumber);\n }\n else {\n grid.pcfContext.factory.requestRender();\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.js CHANGED Viewed

@@ -5,6 +5,7 @@ import Dialog from '../../../Dialog/index.js';
 import { getChangeEditorStyles } from './styles.js';
 import { ChangeGrid } from './components/ChangeGrid/ChangeGrid.js';
 import { useState, useRef, useEffect } from 'react';
+import { useRerender } from '@talxis/react-components';
 const ChangeEditor = (props) => {
     const grid = useGridInstance();
@@ -14,7 +15,12 @@ const ChangeEditor = (props) => {
     const styles = getChangeEditorStyles(useTheme());
     const datasetsRef = useRef(new Set());
     const shouldRefreshOnDismissRef = useRef(false);
+    const rerender = useRerender();
     const onDismiss = (ev) => {
+        //@ts-ignore
+        if (ev?.code === 'Escape') {
+            return;
+        }
         //do not close the dialog if we have pending save operations
         if (activeSaveOperationsCount > 0) {
             return;
@@ -25,10 +31,7 @@ const ChangeEditor = (props) => {
         if (activeSaveOperationsCount > 0) {
             return true;
         }
-        if ([...datasetsRef.current.values()].find(x => x.hasInvalidChanges?.())) {
-            return true;
-        }
-        return false;
+        return !grid.dataset.isValid() || grid.dataset.hasInvalidChanges();
     };
     useEffect(() => {
         return () => {
@@ -53,15 +56,15 @@ const ChangeEditor = (props) => {
             })
         }, 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 () => {
+                    }, onRequestRender: () => setTimeout(() => rerender(), 0), 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 () => {
+                        } }), jsx(DefaultButton, { text: grid.labels['saving-discard-all'](), disabled: activeSaveOperationsCount > 0, onClick: async (e) => {
                             if (window.confirm(grid.labels['saving-discard-all-confirmation']())) {
                                 grid.dataset.clearChanges?.();
-                                grid.pcfContext.factory.requestRender();
+                                props.onDismiss(e, shouldRefreshOnDismissRef.current);
                             }
                         } })] })] });
 };

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

	@@ -1 +1 @@
1	- {"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":"~~;;;;;;;;AAYa~~,MAAA,YAAY,GAAG,CAAC,KAAyB,KAAI;AACtD,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;IAC/B,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,IAAI,IAAI,EAAE,CAAC;AACxD,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;IAC3B,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC9E,IAAA,MAAM,MAAM,GAAG,qBAAqB,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjD,MAAM,WAAW,GAAG,MAAM,CAAgB,IAAI,GAAG,EAAE,CAAC,CAAC;AACrD,IAAA,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;~~AAEhD~~,IAAA,MAAM,SAAS,GAAG,CAAC,EAAwC,KAAI;;~~QAE3D~~,IAAI,yBAAyB,GAAG,CAAC,EAAE;YAC/B,OAAO;AACV,SAAA;QACD,KAAK,CAAC,SAAS,GAAG,EAAE,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC;AAC7D,KAAC,CAAA;IAED,MAAM,cAAc,GAAG,MAAK;QACxB,IAAI,yBAAyB,GAAG,CAAC,EAAE;AAC/B,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;~~QACD~~,~~IAAI~~,CAAC,~~GAAG~~,~~WAAW,~~CAAC,OAAO,CAAC,~~MAAM~~,EAAE,~~CAAC~~,~~CAAC,~~IAAI,CAAC,~~CAAC~~,~~IAAI,~~CAAC,~~CAAC,~~iBAAiB,~~IAAI,CAAC,~~EAAE~~;AACtE~~,~~YAAA,OAAO,IAAI,~~CAAC;~~AACf~~,~~SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,~~KAAC,CAAA;IAED,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;YACR,KAAK,CAAC,SAAS,GAAG,SAAS,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC;AACpE,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,MAAK;QACX,~~IAAG~~,yBAAyB,GAAG,CAAC,EAAE;~~AAC9B~~,YAAA,yBAAyB,CAAC,OAAO,GAAG,IAAI,CAAC;AAC5C,SAAA;AACL,KAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC,CAAA;AAC/B,IAAA,OAAOA,KAAC,MAAM,EAAA,EAAA,GACN,KAAK,EACT,SAAS,EAAE,SAAS,EACpB,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,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;aAClD,CAAC;AACL,SAAA,EACD,MAAM,EAAE,KAAK,EAAA,QAAA,EAAA,CACbC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,QAAA,EAAA,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,YAAY,IAAIA,GAAA,CAAC,UAAU,EAAA,EACzD,kBAAkB,EAAE,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EACpE,cAAc,EAAE,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAC7D,UAAU,EAAE,CAAC,KAAK,KAAI;AAClB,wBAAA,4BAA4B,CAAC,KAAK,IAAI,KAAK,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;AACzE,qBAAC,~~EAED~~,YAAY,EAAE,YAAY,~~EADrB~~,~~EAAA,~~YAAY,CAAC,MAAM,CAAC,WAAW,EAAE,CACR,CAAC,EAAA,CACjC,EACND,~~IAAA~~,~~CAAC~~,YAAY,~~EAAA~~,~~EAAA,QAAA,EAAA,CACTC,~~GAAC,CAAA,aAAa,~~EACV~~,~~EAAA,~~SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,QAAQ,EAAE,cAAc,EAAE,EAC1B,IAAI,EAAE,yBAAyB,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE,EACvG,OAAO,EAAE,YAAW;4BAChB,4BAA4B,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC;4BACjD,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC;AACtF,4BAAA,IAAI,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC;4BAC9B,4BAA4B,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC;yBACpD,EAAA,CACH,EACFA,GAAA,CAAC,aAAa,EAAA,EACV,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,EACzC,QAAQ,EAAE,yBAAyB,GAAG,CAAC,EACvC,OAAO,EAAE,~~YAAW~~;~~AAChB~~,4BAAA,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,iCAAiC,CAAC,EAAE,CAAC,EAAE;AAClE,gCAAA,IAAI,CAAC,OAAO,CAAC,YAAY,IAAI,CAAC;~~AAC9B~~,~~gCAAA~~,~~IAAI~~,CAAC,~~UAAU~~,CAAC,OAAO,CAAC,~~aAAa,EAAE,~~CAAC;~~AAC3C~~,6BAAA;yBACJ,EAAA,CACH,CACS,EAAA,CAAA,CAAA,EAAA,CACV,CAAA;AACb;;;;"}
1	+ {"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\";\nimport { useRerender } from \"@talxis/react-components\";\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 const rerender = useRerender();\n\n const onDismiss = (ev?: React.MouseEvent<HTMLButtonElement>) => {\n //@ts-ignore\n if (ev?.code === 'Escape') {\n return;\n }\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 return !grid.dataset.isValid() \|\| grid.dataset.hasInvalidChanges();\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 onRequestRender={() => setTimeout(() => rerender(), 0)}\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 (e) => {\n if (window.confirm(grid.labels['saving-discard-all-confirmation']())) {\n grid.dataset.clearChanges?.();\n props.onDismiss(e as any, shouldRefreshOnDismissRef.current);\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 CHANGED Viewed

@@ -5,6 +5,7 @@ interface IChangeGrid {
     onDatasetReady: (dataset: IDataset) => void;
     onDatasetDestroyed: (dataset: IDataset) => void;
     onIsSaving: (value: boolean) => void;
+    onRequestRender: () => void;
 }
 export declare const ChangeGrid: (props: IChangeGrid) => JSX.Element;
 export {};

package/dist/components/Grid/core/components/Save/components/ChangeEditor/components/ChangeGrid/ChangeGrid.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect } from 'react';
+import React__default, { useRef, useMemo, useEffect } from 'react';
 import { useGridInstance } from '../../../../../../hooks/useGridInstance.js';
 import { DataTypes, MemoryDataProvider, Dataset } from '@talxis/client-libraries';
 import { useTheme } from '@fluentui/react';
 import { getChangeGridStyles } from './styles.js';
+import { AgGridContext } from '../../../../../AgGrid/context.js';
 import { DatasetControl } from '../../../../../../../../DatasetControl/DatasetControl.js';
 const ChangeGrid = (props) => {
@@ -14,6 +15,7 @@ const ChangeGrid = (props) => {
     const changedColumns = fieldChangesRef.current.map((change) => {
         return grid.dataset.columns.find((x) => change.columnName === x.name);
     });
+    const agGridContext = React__default.useContext(AgGridContext);
     const recordPrimaryName = (() => {
         let result;
         const primaryColumn = grid.dataset.columns.find((col) => col.isPrimary);
@@ -34,7 +36,7 @@ const ChangeGrid = (props) => {
         props.onDatasetReady(dataset);
         return () => {
             props.onDatasetDestroyed(dataset);
-            grid.pcfContext.factory.requestRender();
+            agGridContext.rerender();
         };
     }, []);
     const getColumns = () => {
@@ -75,13 +77,31 @@ const ChangeGrid = (props) => {
             PrimaryIdAttribute: "id__virtual"
         });
         const dataset = new Dataset(memoryProvider);
+        dataset.isValid = () => {
+            return baseRecord.isValid();
+        };
         grid.dataset.linking.getLinkedEntities().map(x => dataset.linking.addLinkedEntity(x));
         dataset.addEventListener('onRecordLoaded', (record) => {
             const recordId = record.getRecordId();
+            record.expressions.ui.setCustomFormattingExpression('valueDesc__virtual', (cellTheme) => {
+                return {
+                    themeOverride: {
+                        fonts: {
+                            medium: {
+                                fontWeight: 600
+                            }
+                        }
+                    }
+                };
+            });
             changedColumns.map(col => {
                 const change = fieldChangesRef.current.find(x => x.columnName === col.name);
                 record.expressions?.setCurrencySymbolExpression(col.name, () => baseRecord.getCurrencySymbol?.(col.name) ?? "");
-                record.expressions?.ui.setCellEditorParametersExpression(col.name, (parameters) => baseRecord.ui.getCellEditorParameters(col.name, parameters));
+                //we need to store the previous values somewhere, in changes?
+                //record.expressions?.ui.setCustomFormattingExpression(col.name, (cellTheme) => baseRecord.getColumnInfo(col.name).ui.getCustomFormatting(cellTheme));
+                record.expressions?.ui.setControlParametersExpression(col.name, (parameters) => baseRecord.getColumnInfo(col.name).ui.getControlParameters(parameters));
+                record.expressions?.ui.setCustomControlsExpression(col.name, (defaultCustomControls) => baseRecord.getColumnInfo(col.name).ui.getCustomControls(defaultCustomControls));
+                record.expressions?.ui.setCustomControlComponentExpression(col.name, () => baseRecord.getColumnInfo(col.name).ui.getCustomControlComponent());
                 if (recordId === 'new') {
                     record.expressions?.setValueExpression?.(col.name, () => {
                         //this happens if we have removed a change
@@ -110,7 +130,6 @@ const ChangeGrid = (props) => {
                                             () => {
                                                 baseRecord.clearChanges?.(col.name);
                                                 record.setValue(col.name, baseRecord.getValue(col.name));
-                                                grid.pcfContext.factory.requestRender();
                                             },
                                         ],
                                     },
@@ -134,18 +153,18 @@ const ChangeGrid = (props) => {
         });
         dataset.addEventListener('onRecordColumnValueChanged', (record, columnName) => {
             baseRecord.setValue(columnName, record.getValue(columnName));
-            grid.pcfContext.factory.requestRender();
+            props.onRequestRender();
         });
         dataset.addEventListener('onChangesCleared', () => {
             baseRecord.clearChanges?.();
-            grid.pcfContext.factory.requestRender();
+            props.onRequestRender();
         });
         dataset.addEventListener('onRecordSave', async () => {
             props.onIsSaving(true);
             await baseRecord.save();
             baseRecord.clearChanges?.();
             props.onIsSaving(false);
-            grid.pcfContext.factory.requestRender();
+            props.onRequestRender();
         });
         return dataset;
     };