@talxis/base-controls 1.2508.2 → 1.2509.1-alpha.1

package/dist/components/Grid/{filtering/components/FilterCallout → column-headers/column-header}/styles.js

@@ -1,18 +1,23 @@
 import { mergeStyleSets } from '@fluentui/react';
 
+const getColumnHeaderContextualMenuStyles = (theme) => {
+    return mergeStyleSets({
+        item: {
+            '& .is-checked': {
+                backgroundColor: theme.semanticColors.buttonBackgroundHovered,
+                fontWeight: 600
+            }
+        }
+    });
+};
 const filterCalloutStyles = mergeStyleSets({
-    controls: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 10,
-        flexGrow: 1
-    },
     root: {
         minHeight: 200,
         padding: 16,
         '.ms-Callout-main': {
             display: 'flex',
             flexDirection: 'column',
+            minHeight: 180,
             gap: 10
         },
         '.TALXIS__combobox__root, [class*="TALXIS__textfield__root"], [class*="TALXIS__tag-picker__root"]': {
@@ -29,12 +34,16 @@ const filterCalloutStyles = mergeStyleSets({
             fontSize: 12
         }
     },
-    footer: {
-        display: 'flex',
-        gap: 10,
-        justifyContent: 'flex-end'
+    valueControlsContainer: {
+        flexGrow: 1
+    },
+    datasetColumnFilteringRoot: {
+        flexGrow: 1
+    },
+    datasetColumnFilteringButtons: {
+        justifyContent: 'flex-end',
     }
 });
 
-export { filterCalloutStyles };
+export { filterCalloutStyles, getColumnHeaderContextualMenuStyles };
 //# sourceMappingURL=styles.js.map

package/dist/components/Grid/column-headers/column-header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Grid/column-headers/column-header/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\nimport { IColumn } from \"@talxis/client-libraries\";\nimport { getJustifyContent } from \"../../grid/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}\n\nexport const getColumnHeaderContextualMenuStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        item: {\n            '& .is-checked': {\n                backgroundColor: theme.semanticColors.buttonBackgroundHovered,\n                fontWeight: 600\n            }\n        }\n    });\n};\n\nexport const filterCalloutStyles = mergeStyleSets({\n    root: {\n        minHeight: 200,\n        padding: 16,\n        '.ms-Callout-main': {\n            display: 'flex',\n            flexDirection: 'column',\n            minHeight: 180,\n            gap: 10\n        },\n        '.TALXIS__combobox__root, [class*=\"TALXIS__textfield__root\"], [class*=\"TALXIS__tag-picker__root\"]': {\n            padding: `0x !important`\n        }\n    },\n    title: {\n        fontWeight: 600,\n        flexGrow: 1\n    },\n    header: {\n        display: 'flex',\n        'i': {\n            fontSize: 12\n        }\n    },\n    valueControlsContainer: {\n        flexGrow: 1\n    },\n    datasetColumnFilteringRoot: {\n        flexGrow: 1\n    },\n    datasetColumnFilteringButtons: {\n        justifyContent: 'flex-end',\n    }\n});"],"names":[],"mappings":";;AA+Ca,MAAA,mCAAmC,GAAG,CAAC,KAAa,KAAI;AACjE,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,eAAe,EAAE;AACb,gBAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,uBAAuB;AAC7D,gBAAA,UAAU,EAAE,GAAG;AAClB,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAC;AACP,EAAE;AAEK,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAC9C,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,GAAG;AACd,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,kBAAkB,EAAE;AAChB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,SAAS,EAAE,GAAG;AACd,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,kGAAkG,EAAE;AAChG,YAAA,OAAO,EAAE,CAAe,aAAA,CAAA;AAC3B,SAAA;AACJ,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,QAAQ,EAAE,CAAC;AACd,KAAA;AACD,IAAA,MAAM,EAAE;AACJ,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,EAAE;AACf,SAAA;AACJ,KAAA;AACD,IAAA,sBAAsB,EAAE;AACpB,QAAA,QAAQ,EAAE,CAAC;AACd,KAAA;AACD,IAAA,0BAA0B,EAAE;AACxB,QAAA,QAAQ,EAAE,CAAC;AACd,KAAA;AACD,IAAA,6BAA6B,EAAE;AAC3B,QAAA,cAAc,EAAE,UAAU;AAC7B,KAAA;AACJ,CAAA;;;;"}

package/dist/components/Grid/column-headers/record-selection-checkbox/RecordSelectionCheckbox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const RecordSelectionCheckBox: () => JSX.Element;

package/dist/components/Grid/column-headers/record-selection-checkbox/RecordSelectionCheckbox.js

@@ -0,0 +1,50 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useTheme, ThemeProvider, Checkbox } from '@fluentui/react';
+import { getGlobalCheckboxStyles } from './styles.js';
+import { Theming, useThemeGenerator, useRerender } from '@talxis/react-components';
+import { useGridInstance } from '../../grid/useGridInstance.js';
+import { useEventEmitter } from '../../../../hooks/useEventEmitter.js';
+
+const RecordSelectionCheckBox = () => {
+    const grid = useGridInstance();
+    const dataset = grid.getDataset();
+    const context = grid.getPcfContext();
+    const baseTheme = useTheme();
+    const primaryColor = baseTheme.palette.themePrimary;
+    const backgroundColor = baseTheme.semanticColors.bodyBackground;
+    const textColor = Theming.GetTextColorForBackground(backgroundColor);
+    const v8FluentOverrides = context.fluentDesignLanguage?.v8FluentOverrides;
+    const theme = useThemeGenerator(primaryColor, backgroundColor, textColor, v8FluentOverrides);
+    const styles = getGlobalCheckboxStyles(theme);
+    const rerender = useRerender();
+    useEventEmitter(dataset, 'onRecordsSelected', rerender);
+    const getCheckBoxState = () => {
+        const selectedRecordIds = dataset.getDataProvider().getSelectedRecordIds({ includeGroupRecordIds: true, includeChildrenRecordIds: false });
+        if (selectedRecordIds.length === 0) {
+            return 'unchecked';
+        }
+        if (selectedRecordIds.length === dataset.sortedRecordIds.length) {
+            return 'checked';
+        }
+        return 'intermediate'; //indeterminate state, when some records are selected but not all
+    };
+    const onChange = (checked) => {
+        if (checked) {
+            dataset.setSelectedRecordIds(dataset.sortedRecordIds);
+        }
+        else {
+            dataset.clearSelectedRecordIds();
+        }
+    };
+    const checkboxState = getCheckBoxState();
+    if (dataset.sortedRecordIds.length === 0) {
+        return jsx(Fragment, {});
+    }
+    return (jsx(ThemeProvider, { theme: theme, className: styles.root, children: grid.getSelectionType() === 'multiple' &&
+            jsx(Checkbox, { checked: checkboxState === 'checked', styles: {
+                    checkbox: styles.checkbox
+                }, disabled: dataset.grouping.getGroupBys().length > 0, indeterminate: checkboxState === 'intermediate', onChange: (e, checked) => onChange(checked) }) }));
+};
+
+export { RecordSelectionCheckBox };
+//# sourceMappingURL=RecordSelectionCheckbox.js.map

package/dist/components/Grid/column-headers/record-selection-checkbox/RecordSelectionCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordSelectionCheckbox.js","sources":["../../../../../src/components/Grid/column-headers/record-selection-checkbox/RecordSelectionCheckbox.tsx"],"sourcesContent":["import { Checkbox, ThemeProvider, useTheme } from \"@fluentui/react\";\nimport { getGlobalCheckboxStyles } from \"./styles\";\nimport { Theming, useRerender, useThemeGenerator } from \"@talxis/react-components\";\nimport { useMemo } from \"react\";\nimport { useGridInstance } from \"../../grid/useGridInstance\";\nimport { useEventEmitter } from \"../../../../hooks/useEventEmitter\";\nimport { IDataProviderEventListeners } from \"@talxis/client-libraries\";\n\n\nexport const RecordSelectionCheckBox = () => {\n    const grid = useGridInstance();\n    const dataset = grid.getDataset();\n    const context = grid.getPcfContext();\n    const baseTheme = useTheme();\n    const primaryColor = baseTheme.palette.themePrimary;\n    const backgroundColor = baseTheme.semanticColors.bodyBackground;\n    const textColor = Theming.GetTextColorForBackground(backgroundColor);\n    const v8FluentOverrides = context.fluentDesignLanguage?.v8FluentOverrides;\n    const theme = useThemeGenerator(primaryColor, backgroundColor, textColor, v8FluentOverrides);\n    const styles = getGlobalCheckboxStyles(theme);\n    const rerender = useRerender();\n    useEventEmitter<IDataProviderEventListeners>(dataset, 'onRecordsSelected', rerender);\n\n\n    const getCheckBoxState = () => {\n        const selectedRecordIds = dataset.getDataProvider().getSelectedRecordIds({includeGroupRecordIds: true, includeChildrenRecordIds: false});\n        if (selectedRecordIds.length === 0) {\n            return 'unchecked';\n        }\n        if(selectedRecordIds.length === dataset.sortedRecordIds.length) {\n            return 'checked';\n        }\n        return 'intermediate'; //indeterminate state, when some records are selected but not all\n    }\n\n    const onChange = (checked?: boolean) => {\n        if (checked) {\n            dataset.setSelectedRecordIds(dataset.sortedRecordIds);\n        }\n        else {\n            dataset.clearSelectedRecordIds();\n        }\n    }\n    const checkboxState = getCheckBoxState();\n\n    if (dataset.sortedRecordIds.length === 0) {\n        return <></>\n    }\n    return (\n        <ThemeProvider theme={theme} className={styles.root}>\n            {grid.getSelectionType() === 'multiple' &&\n                <Checkbox\n                    checked={checkboxState === 'checked'}\n                    styles={{\n                        checkbox: styles.checkbox\n                    }}\n                    disabled={dataset.grouping.getGroupBys().length > 0}\n                    indeterminate={checkboxState === 'intermediate'}\n                    onChange={(e, checked) => onChange(checked)} />\n            }\n        </ThemeProvider>\n    )\n};"],"names":["_jsx"],"mappings":";;;;;;;AASO,MAAM,uBAAuB,GAAG,MAAK;AACxC,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;AAClC,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;AACrC,IAAA,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC;AAC7B,IAAA,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC;AACpD,IAAA,MAAM,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,cAAc,CAAC;IAChE,MAAM,SAAS,GAAG,OAAO,CAAC,yBAAyB,CAAC,eAAe,CAAC,CAAC;AACrE,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,oBAAoB,EAAE,iBAAiB,CAAC;AAC1E,IAAA,MAAM,KAAK,GAAG,iBAAiB,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAC7F,IAAA,MAAM,MAAM,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAC/B,IAAA,eAAe,CAA8B,OAAO,EAAE,mBAAmB,EAAE,QAAQ,CAAC,CAAC;IAGrF,MAAM,gBAAgB,GAAG,MAAK;AAC1B,QAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC,oBAAoB,CAAC,EAAC,qBAAqB,EAAE,IAAI,EAAE,wBAAwB,EAAE,KAAK,EAAC,CAAC,CAAC;AACzI,QAAA,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,YAAA,OAAO,WAAW,CAAC;AACtB,SAAA;QACD,IAAG,iBAAiB,CAAC,MAAM,KAAK,OAAO,CAAC,eAAe,CAAC,MAAM,EAAE;AAC5D,YAAA,OAAO,SAAS,CAAC;AACpB,SAAA;QACD,OAAO,cAAc,CAAC;AAC1B,KAAC,CAAA;AAED,IAAA,MAAM,QAAQ,GAAG,CAAC,OAAiB,KAAI;AACnC,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;AACzD,SAAA;AACI,aAAA;YACD,OAAO,CAAC,sBAAsB,EAAE,CAAC;AACpC,SAAA;AACL,KAAC,CAAA;AACD,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;AAEzC,IAAA,IAAI,OAAO,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;AACtC,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;AACD,IAAA,QACIA,GAAC,CAAA,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAC9C,QAAA,EAAA,IAAI,CAAC,gBAAgB,EAAE,KAAK,UAAU;YACnCA,GAAC,CAAA,QAAQ,IACL,OAAO,EAAE,aAAa,KAAK,SAAS,EACpC,MAAM,EAAE;oBACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;AAC5B,iBAAA,EACD,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,GAAG,CAAC,EACnD,aAAa,EAAE,aAAa,KAAK,cAAc,EAC/C,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,EAAI,CAAA,EAAA,CAE3C,EACnB;AACL;;;;"}

package/dist/components/Grid/column-headers/record-selection-checkbox/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Grid/column-headers/record-selection-checkbox/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/errors/FullWidthCellRendererError/FullWidthCellRendererError.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IFullWidthCellRendererErrorProps {
+    errorMessage: string;
+}
+export declare const FullWidthCellRendererError: (props: IFullWidthCellRendererErrorProps) => JSX.Element;
+export {};

package/dist/components/Grid/errors/FullWidthCellRendererError/FullWidthCellRendererError.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { MessageBar, MessageBarType } from '@fluentui/react';
+import { useMemo } from 'react';
+import { getFullWidthCellRendererErrorStyles } from './styles.js';
+
+const FullWidthCellRendererError = (props) => {
+    const { errorMessage } = props;
+    const styles = useMemo(() => getFullWidthCellRendererErrorStyles(), []);
+    return jsx(MessageBar, { styles: {
+            root: styles.errorMessageBarRoot
+        }, messageBarType: MessageBarType.error, children: errorMessage });
+};
+
+export { FullWidthCellRendererError };
+//# sourceMappingURL=FullWidthCellRendererError.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullWidthCellRendererError.js","sources":["../../../../../src/components/Grid/errors/FullWidthCellRendererError/FullWidthCellRendererError.tsx"],"sourcesContent":["import { MessageBar, MessageBarType } from \"@fluentui/react\";\nimport { useMemo } from \"react\";\nimport { getFullWidthCellRendererErrorStyles } from \"./styles\";\n\ninterface IFullWidthCellRendererErrorProps {\n    errorMessage: string;\n}\n\nexport const FullWidthCellRendererError = (props: IFullWidthCellRendererErrorProps) => {\n    const { errorMessage } = props;\n    const styles = useMemo(() => getFullWidthCellRendererErrorStyles(), []);\n    return <MessageBar\n        styles={{\n            root: styles.errorMessageBarRoot\n        }}\n        messageBarType={MessageBarType.error}>\n        {errorMessage}\n    </MessageBar>\n}"],"names":["_jsx"],"mappings":";;;;;AAQa,MAAA,0BAA0B,GAAG,CAAC,KAAuC,KAAI;AAClF,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;AAC/B,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,mCAAmC,EAAE,EAAE,EAAE,CAAC,CAAC;AACxE,IAAA,OAAOA,GAAC,CAAA,UAAU,EACd,EAAA,MAAM,EAAE;YACJ,IAAI,EAAE,MAAM,CAAC,mBAAmB;SACnC,EACD,cAAc,EAAE,cAAc,CAAC,KAAK,EACnC,QAAA,EAAA,YAAY,GACJ,CAAA;AACjB;;;;"}

package/dist/components/Grid/errors/FullWidthCellRendererError/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const getFullWidthCellRendererErrorStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    errorMessageBarRoot: {
+        height: string;
+        justifyContent: string;
+    };
+}>;

package/dist/components/Grid/errors/FullWidthCellRendererError/styles.js

@@ -0,0 +1,13 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getFullWidthCellRendererErrorStyles = () => {
+    return mergeStyleSets({
+        errorMessageBarRoot: {
+            height: '100%',
+            justifyContent: 'center',
+        }
+    });
+};
+
+export { getFullWidthCellRendererErrorStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/errors/FullWidthCellRendererError/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Grid/errors/FullWidthCellRendererError/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getFullWidthCellRendererErrorStyles = () => {\n    return mergeStyleSets({\n        errorMessageBarRoot: {\n            height: '100%',\n            justifyContent: 'center',\n        }\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,mCAAmC,GAAG,MAAK;AACpD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,mBAAmB,EAAE;AACjB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,cAAc,EAAE,QAAQ;AAC3B,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/{core/components/AgGrid/AgGrid.d.ts → grid/Grid.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
+import { IGrid } from "../interfaces";
 import "@ag-grid-community/styles/ag-grid.css";
 import "@ag-grid-community/styles/ag-theme-balham.css";
-import { IGrid } from '../../../interfaces';
-export declare const AgGrid: (props: IGrid) => JSX.Element;
+export declare const Grid: (props: IGrid) => JSX.Element;

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

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import { AgGridModel } from './ag-grid/AgGridModel.js';
+import { AgGridReact } from '@ag-grid-community/react';
+import { LoadingOverlay } from '../overlays/loading/LoadingOverlay.js';
+import { EmptyRecords } from '../overlays/empty-records/EmptyRecordsOverlay.js';
+import { getClassNames } from '@talxis/react-components';
+import { GridModel } from './GridModel.js';
+import { gridTranslations } from '../translations.js';
+import { GridContext } from './GridContext.js';
+import { ThemeProvider } from '@fluentui/react';
+import { getGridStyles } from './styles.js';
+import '@ag-grid-community/styles/ag-grid.css';
+import '@ag-grid-community/styles/ag-theme-balham.css';
+import { AgGridContext } from './ag-grid/AgGridContext.js';
+import { useControl } from '../../../hooks/useControl.js';
+
+const getGridInstance = (onGetProps, labels, theme) => {
+    return new GridModel({
+        labels: labels,
+        onGetProps: () => onGetProps(),
+        theme: theme
+    });
+};
+const Grid = (props) => {
+    const { labels, theme, className } = useControl('Grid', props, gridTranslations);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const grid = useMemo(() => {
+        return getGridInstance(() => propsRef.current, labels, theme);
+    }, []);
+    const styles = useMemo(() => getGridStyles(theme), [theme]);
+    const containerRef = useRef(null);
+    const gridReadyRef = useRef(false);
+    const agGrid = useMemo(() => new AgGridModel({
+        grid: grid,
+        getContainer: () => containerRef.current
+    }), []);
+    const onGridReady = (event) => {
+        agGrid.init(event.api);
+        gridReadyRef.current = true;
+    };
+    useEffect(() => {
+        return () => {
+            grid.destroy();
+        };
+    }, []);
+    return jsx(GridContext.Provider, { value: grid, children: jsx(AgGridContext.Provider, { value: agGrid, children: jsx(ThemeProvider, { className: getClassNames([className, styles.gridRoot, 'ag-theme-balham']), ref: containerRef, children: jsx(AgGridReact, { getRowId: (params) => `${params.data.getRecordId()}`, rowModelType: 'serverSide', 
+                    //needs to be set here, crashes if set via API
+                    rowHeight: grid.getDefaultRowHeight(), rowSelection: agGrid.getSelectionType(), loadingOverlayComponent: LoadingOverlay, noRowsOverlayComponent: EmptyRecords, enableGroupEdit: true, reactiveCustomComponents: true, gridOptions: {
+                        getRowStyle: (params) => {
+                            const record = params.data;
+                            if (!record) {
+                                return undefined;
+                            }
+                            return {
+                                backgroundColor: grid.getDefaultCellTheme(record).semanticColors.bodyBackground,
+                            };
+                        },
+                    }, onGridReady: onGridReady }) }) }) });
+};
+
+export { Grid };
+//# sourceMappingURL=Grid.js.map

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

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

package/dist/components/Grid/grid/GridContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { GridModel } from "./GridModel";
+export declare const GridContext: import("react").Context<GridModel>;

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

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

package/dist/components/Grid/grid/GridModel.d.ts

@@ -0,0 +1,118 @@
+/// <reference types="@types/powerapps-component-framework" />
+/// <reference types="powerapps-component-framework" />
+import { AggregationFunction, Filtering, IColumn, ICommand, ICustomColumnControl, ICustomColumnFormatting, IDataset, IRecord, TotalRow } from "@talxis/client-libraries";
+import { ITheme } from "@talxis/react-components";
+import { gridTranslations } from "../translations";
+import { ITranslation } from "../../../hooks";
+import { IBinding } from "../../NestedControlRenderer/interfaces";
+import { IFluentDesignState } from "../../../utils";
+import { IGrid, IGridParameters } from "../interfaces";
+interface IGridDependencies {
+    labels: Required<ITranslation<typeof gridTranslations>>;
+    onGetProps: () => IGrid;
+    theme?: ITheme;
+}
+interface IPCFContext extends Omit<ComponentFramework.Context<any, any>, 'fluentDesignLanguage'> {
+    fluentDesignLanguage?: IFluentDesignState;
+}
+export interface IGridColumn extends IColumn {
+    isRequired: boolean;
+    isEditable: boolean;
+    isFilterable: boolean;
+    isSorted: boolean;
+    isFiltered: boolean;
+    canBeAggregated: boolean;
+    canBeGrouped: boolean;
+    isSortedDescending: boolean;
+    isResizable: boolean;
+    alignment: IColumn['alignment'];
+}
+export declare class GridModel {
+    readonly oddRowCellTheme: ITheme;
+    readonly evenRowCellTheme: ITheme;
+    private _getProps;
+    private _labels;
+    private _theme;
+    private _cachedColumns;
+    private _cachedColumnsMap;
+    private _hasFirstDataBeenLoaded;
+    private __sorting?;
+    private __totalRow?;
+    private __grouping?;
+    private __filtering?;
+    constructor({ onGetProps, labels, theme }: IGridDependencies);
+    init(): void;
+    getDataset(): IDataset;
+    getPcfContext(): IPCFContext;
+    getParameters(): IGridParameters;
+    getLabels(): Required<ITranslation<typeof gridTranslations>>;
+    isZebraEnabled(): boolean;
+    isNavigationEnabled(): boolean;
+    isAutoSaveEnabled(): boolean;
+    isGroupedColumnsPinnedEnabled(): boolean;
+    isEditingEnabled(): boolean;
+    getGroupType(): 'nested' | 'flat';
+    optionSetColorsEnabled(): boolean;
+    getDefaultExpandedGroupLevel(): number;
+    getLicenseKey(): string | null;
+    getDefaultRowHeight(): number;
+    getSelectionType(): 'none' | 'single' | 'multiple';
+    getControl(column: IColumn, record: IRecord, editing: boolean): Required<ICustomColumnControl>;
+    getBindings(record: IRecord, column: IColumn, control: ICustomColumnControl): {
+        [name: string]: IBinding;
+    };
+    getFieldBindingParameters(record: IRecord, column: IColumn, editing: boolean, recordCommands?: ICommand[]): any;
+    isColumnExpandable(record: IRecord, column: IColumn): boolean;
+    getFieldFormatting(record: IRecord, columnName: string): Required<ICustomColumnFormatting>;
+    getDefaultCellTheme(record: IRecord, columnName?: string): ITheme;
+    getGridColumns(): IGridColumn[];
+    getGridColumnByName(columnName: string): IGridColumn;
+    refreshGridColumns(): {
+        haveColumnsOrderBeenUpdated: boolean;
+        columns: IGridColumn[];
+    };
+    getColumnByName(columnName: string): IColumn;
+    getRecordValue(record: IRecord, column: IColumn | string): {
+        value: any;
+        aggregatedValue: any;
+    };
+    getRecordFormattedValue(record: IRecord, column: IColumn | string): {
+        value: any;
+        aggregatedValue: any;
+    };
+    getControlValue(record: IRecord, column: IColumn | string): any;
+    isRecordSelectionDisabled(record: IRecord): boolean;
+    isColumnEditable(columnName: string, record?: IRecord): boolean;
+    addAggregation(columnName: string, aggregationFunction: AggregationFunction): void;
+    removeAggregation(alias: string): void;
+    toggleColumnGroup(columnName: string): void;
+    getColumnFilter(columnName: string): import("@talxis/client-libraries").ColumnFilter;
+    removeColumnFilter(columnName: string, saveToDataset?: boolean): void;
+    sortColumn(columnName: string, descending?: boolean): void;
+    clearColumnSorting(columnName: string): void;
+    getTotalRow(): TotalRow;
+    getFiltering(): Filtering;
+    isSelectionModifierKeyPressed(): boolean;
+    getColumnSortingLabel(columnName: string, descending?: boolean): string;
+    destroy(): void;
+    private _getVisibleColumnNames;
+    private _setAggregationDecorator;
+    private _getRecordValue;
+    private _getGridColumnsFromDataset;
+    private _isRecordFieldEditable;
+    private _isColumnRequired;
+    private _isColumnSortable;
+    private _isColumnFilterable;
+    private _isColumnGroupable;
+    private _isColumnEditable;
+    private _canColumnBeAggregated;
+    private _registerEventListeners;
+    private _autoSaveRecord;
+    private _setGroupingInterceptor;
+    private get _dataset();
+    private get _sorting();
+    private get _filtering();
+    private get _totalRow();
+    private get _grouping();
+}
+export {};