@talxis/base-controls 1.2506.3 → 1.2506.5

package/dist/components/DatasetControl/DatasetControl.js

@@ -6,6 +6,7 @@ import { getDatasetControlStyles } from './styles.js';
 import { QuickFind } from './QuickFind/QuickFind.js';
 import { useRerender } from '@talxis/react-components';
 import { Client } from '@talxis/client-libraries';
+import { DatasetPaging } from './Paging/DatasetPaging.js';
 import { useControl } from '../../hooks/useControl.js';
 
 const client = new Client();
@@ -39,6 +40,7 @@ const DatasetControl = (props) => {
             onRender: (renderQuickFind) => renderQuickFind(),
             onGetQuickFindProps: (props) => props
         },
+        onRenderPagination: (props, renderPagination) => renderPagination(props)
     });
     useMemo(() => {
         //@ts-ignore - private property
@@ -57,7 +59,13 @@ const DatasetControl = (props) => {
                 jsx("div", { ...componentProps.headerProps.headerContainerProps, children: componentProps.headerProps.onRender(() => {
                         return jsx(Fragment, { children: isQuickFindEnabled() &&
                                 jsx(QuickFind, { dataset: dataset, labels: labels, theme: theme, onGetQuickFindComponentProps: (props) => componentProps.headerProps.onGetQuickFindProps(props) }) });
-                    }) }), props.onGetControlComponent({ ...props, context: injectedContextRef.current })] }));
+                    }) }), props.onGetControlComponent({ ...props, context: injectedContextRef.current }), componentProps.onRenderPagination({
+                context: injectedContextRef.current, parameters: {
+                    Dataset: dataset,
+                    EnablePagination: props.parameters.EnablePagination,
+                    EnablePageSizeSwitcher: props.parameters.EnablePageSizeSwitcher
+                }
+            }, (paginationProps) => jsx(DatasetPaging, { ...paginationProps }))] }));
 };
 
 export { DatasetControl };

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

@@ -1 +1 @@
-{"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { useControl } from \"../../hooks\";\nimport { MessageBar, MessageBarButton, MessageBarType, ThemeProvider } from \"@fluentui/react\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { QuickFind } from \"./QuickFind/QuickFind\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { Client } from \"@talxis/client-libraries\";\n\nconst client = new Client();\n\nexport const DatasetControl = (props: IDatasetControl) => {\n  const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n  const rerender = useRerender();\n  const dataset = props.parameters.Grid;\n  const injectedContextRef = useRef(props.context);\n  const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);\n  const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n  useMemo(() => {\n    if (dataset.isVirtual() || !client.isTalxisPortal()) {\n      dataset.setInterceptor('__onRequestRender', () => rerender());\n    }\n  }, []);\n\n  //we need to have a way to customize the init behavior from above\n  const componentProps = onOverrideComponentProps({\n    onDatasetInit: () => {\n      if (dataset.isVirtual()) {\n        dataset.paging.loadExactPage(dataset.paging.pageNumber);\n      }\n    },\n    containerProps: {\n      theme: theme,\n      className: styles.datasetControlRoot,\n    },\n\n    headerProps: {\n      headerContainerProps: {\n        className: styles.headerRoot\n      },\n      onRender: (renderQuickFind) => renderQuickFind(),\n      onGetQuickFindProps: (props) => props\n    },\n  });\n\n  const renderErrorMessageBar = (onReset?: () => void) => {\n    <MessageBar\n      isMultiline={false}\n      actions={<MessageBarButton className={styles.messageBarBtn} text={labels.reload()} onClick={() => {\n        onReset?.();\n        dataset.refresh();\n      }} />}\n      messageBarType={MessageBarType.error}>\n      {dataset.errorMessage || labels.generalError()}\n    </MessageBar>\n  }\n\n  useMemo(() => {\n    //@ts-ignore - private property\n    injectedContextRef.current = dataset._patchContext(props.context);\n  }, [props.context]);\n\n  useMemo(() => {\n    componentProps.onDatasetInit();\n  }, []);\n\n  const isQuickFindEnabled = () => {\n    if (dataset.isVirtual() && props.parameters.EnableQuickFind?.raw) {\n      return true;\n    }\n    return false;\n  }\n\n\n  return (\n    <ThemeProvider {...componentProps.containerProps}>\n      {isQuickFindEnabled() &&\n        <div {...componentProps.headerProps.headerContainerProps}>\n          {componentProps.headerProps.onRender(() => {\n            return <>\n              {isQuickFindEnabled() &&\n                <QuickFind\n                  dataset={dataset}\n                  labels={labels}\n                  theme={theme}\n                  onGetQuickFindComponentProps={(props) => componentProps.headerProps.onGetQuickFindProps(props)} />\n              }\n            </>\n          })}\n        </div>\n      }\n      {props.onGetControlComponent({ ...props, context: injectedContextRef.current })}\n    </ThemeProvider>\n  )\n}"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { useControl } from \"../../hooks\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { QuickFind } from \"./QuickFind/QuickFind\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { Client } from \"@talxis/client-libraries\";\nimport { DatasetPaging } from \"./Paging\";\n\nconst client = new Client();\n\nexport const DatasetControl = (props: IDatasetControl) => {\n  const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n  const rerender = useRerender();\n  const dataset = props.parameters.Grid;\n  const injectedContextRef = useRef(props.context);\n  const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);\n  const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n  useMemo(() => {\n    if (dataset.isVirtual() || !client.isTalxisPortal()) {\n      dataset.setInterceptor('__onRequestRender', () => rerender());\n    }\n  }, []);\n\n  //we need to have a way to customize the init behavior from above\n  const componentProps = onOverrideComponentProps({\n    onDatasetInit: () => {\n      if (dataset.isVirtual()) {\n        dataset.paging.loadExactPage(dataset.paging.pageNumber);\n      }\n    },\n    containerProps: {\n      theme: theme,\n      className: styles.datasetControlRoot,\n    },\n\n    headerProps: {\n      headerContainerProps: {\n        className: styles.headerRoot\n      },\n      onRender: (renderQuickFind) => renderQuickFind(),\n      onGetQuickFindProps: (props) => props\n    },\n    onRenderPagination: (props, renderPagination) => renderPagination(props)\n  });\n\n  useMemo(() => {\n    //@ts-ignore - private property\n    injectedContextRef.current = dataset._patchContext(props.context);\n  }, [props.context]);\n\n  useMemo(() => {\n    componentProps.onDatasetInit();\n  }, []);\n\n  const isQuickFindEnabled = () => {\n    if (dataset.isVirtual() && props.parameters.EnableQuickFind?.raw) {\n      return true;\n    }\n    return false;\n  }\n\n\n  return (\n    <ThemeProvider {...componentProps.containerProps}>\n      {isQuickFindEnabled() &&\n        <div {...componentProps.headerProps.headerContainerProps}>\n          {componentProps.headerProps.onRender(() => {\n            return <>\n              {isQuickFindEnabled() &&\n                <QuickFind\n                  dataset={dataset}\n                  labels={labels}\n                  theme={theme}\n                  onGetQuickFindComponentProps={(props) => componentProps.headerProps.onGetQuickFindProps(props)} />\n              }\n            </>\n          })}\n        </div>\n      }\n      {props.onGetControlComponent({ ...props, context: injectedContextRef.current })}\n      {componentProps.onRenderPagination({\n        context: injectedContextRef.current, parameters: {\n          Dataset: dataset,\n          EnablePagination: props.parameters.EnablePagination,\n          EnablePageSizeSwitcher: props.parameters.EnablePageSizeSwitcher\n        }\n      }, (paginationProps) => <DatasetPaging {...paginationProps} />)}\n    </ThemeProvider>\n  )\n}"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/components/DatasetControl/Paging/DatasetPaging.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IDatasetPaging } from "./interfaces";
+export declare const DatasetPaging: (props: IDatasetPaging) => JSX.Element;

package/dist/components/{Grid/paging/components/Paging/Paging.js → DatasetControl/Paging/DatasetPaging.js}

@@ -1,17 +1,21 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useTheme, CommandBarButton, ContextualMenuItemType, CommandBar } from '@fluentui/react';
-import { useGridInstance } from '../../../core/hooks/useGridInstance.js';
-import { usePagingController } from '../../controllers/usePagingController.js';
+import { ThemeProvider, CommandBarButton, ContextualMenuItemType } from '@fluentui/react';
 import { getPagingStyles } from './styles.js';
+import { useMemo } from 'react';
+import { Paging } from './Paging.js';
+import { CommandBar } from '@talxis/react-components';
+import { datasetPagingTranslations } from './translations.js';
+import { useControl } from '../../../hooks/useControl.js';
 
-const Paging = () => {
-    const grid = useGridInstance();
-    const labels = grid.labels;
-    const paging = usePagingController();
-    const styles = getPagingStyles(useTheme());
+const PAGE_SIZE_OPTIONS = ['25', '50', '75', '100', '250'];
+const DatasetPaging = (props) => {
+    const { labels, theme } = useControl('DatasetPaging', props, datasetPagingTranslations);
+    const styles = useMemo(() => getPagingStyles(theme), [theme]);
+    const paging = useMemo(() => new Paging(() => props.parameters, () => labels), []);
+    const parameters = props.parameters;
+    const dataset = parameters.Dataset;
     const getPageSizeOptions = () => {
-        const sizes = ['25', '50', '75', '100', '250'];
-        return sizes.map(size => {
+        return PAGE_SIZE_OPTIONS.map(size => {
             return {
                 key: size,
                 text: size,
@@ -21,13 +25,7 @@ const Paging = () => {
             };
         });
     };
-    const getPagingLabel = () => {
-        if (paging.totalResultCount === undefined) {
-            return labels['paging-pages']({ start: paging.pageFirstRecordOrder, end: paging.pageLastRecordOrder });
-        }
-        return `${labels['paging-pages']({ start: paging.pageFirstRecordOrder, end: paging.pageLastRecordOrder })} ${labels['paging-pages-totalcount']({ recordcount: paging.formattedTotalResultCount })}`;
-    };
-    return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.pageSizeBtnWrapper, children: jsx(CommandBarButton, { disabled: grid.dataset.loading || !grid.paging.isEnabled, text: getPagingLabel(), menuProps: grid.parameters.EnablePageSizeSwitcher?.raw !== false ? {
+    return (jsxs(ThemeProvider, { theme: theme, className: styles.datasetPagingRoot, children: [jsx("div", { className: styles.pageSizeBtnWrapper, children: jsx(CommandBarButton, { disabled: dataset.loading || !paging.isEnabled, text: paging.toString(), menuProps: parameters.EnablePageSizeSwitcher?.raw !== false ? {
                         items: [
                             {
                                 key: 'header',
@@ -40,18 +38,18 @@ const Paging = () => {
                             },
                             ...getPageSizeOptions()
                         ]
-                    } : undefined }) }), grid.paging.isEnabled &&
+                    } : undefined }) }), paging.isEnabled &&
                 jsx(CommandBar, { className: styles.pagination, items: [], farItems: [{
                             key: 'FirstPage',
                             iconOnly: true,
                             iconProps: { iconName: 'DoubleChevronLeft' },
-                            disabled: !paging.hasPreviousPage || grid.dataset.loading,
+                            disabled: !paging.hasPreviousPage || dataset.loading,
                             onClick: () => paging.reset()
                         }, {
                             key: 'PreviousPage',
                             iconOnly: true,
                             iconProps: { iconName: 'Back' },
-                            disabled: !paging.hasPreviousPage || grid.dataset.loading,
+                            disabled: !paging.hasPreviousPage || dataset.loading,
                             onClick: () => paging.loadPreviousPage()
                         }, {
                             key: 'CurrentPage',
@@ -62,10 +60,10 @@ const Paging = () => {
                             key: 'NextPage',
                             iconOnly: true,
                             iconProps: { iconName: 'Forward' },
-                            disabled: !paging.hasNextPage || grid.dataset.loading,
+                            disabled: !paging.hasNextPage || dataset.loading,
                             onClick: () => paging.loadNextPage()
                         }] })] }));
 };
 
-export { Paging };
-//# sourceMappingURL=Paging.js.map
+export { DatasetPaging };
+//# sourceMappingURL=DatasetPaging.js.map

package/dist/components/DatasetControl/Paging/DatasetPaging.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatasetPaging.js","sources":["../../../../src/components/DatasetControl/Paging/DatasetPaging.tsx"],"sourcesContent":["import { CommandBarButton, ContextualMenuItemType, IContextualMenuItem, ThemeProvider } from \"@fluentui/react\";\nimport { useControl } from \"../../../hooks\";\nimport { IDatasetPaging } from \"./interfaces\";\nimport { getPagingStyles } from \"./styles\";\nimport { useMemo } from \"react\";\nimport { Paging } from \"./Paging\";\nimport { CommandBar } from \"@talxis/react-components\";\nimport { datasetPagingTranslations } from \"./translations\";\n\nconst PAGE_SIZE_OPTIONS = ['25', '50', '75', '100', '250'];\n\nexport const DatasetPaging = (props: IDatasetPaging) => {\n    const { labels, theme } = useControl('DatasetPaging', props, datasetPagingTranslations);\n    const styles = useMemo(() => getPagingStyles(theme), [theme]);\n    const paging = useMemo(() => new Paging(() => props.parameters, () => labels), []);\n    const parameters = props.parameters;\n    const dataset = parameters.Dataset;\n\n    const getPageSizeOptions = (): IContextualMenuItem[] => {\n        return PAGE_SIZE_OPTIONS.map(size => {\n            return {\n                key: size,\n                text: size,\n                checked: parseInt(size) === paging.pageSize,\n                className: styles.pageSizeOption,\n                onClick: () => paging.setPageSize(parseInt(size))\n            }\n        })\n    }\n    return (\n        <ThemeProvider theme={theme} className={styles.datasetPagingRoot}>\n            <div className={styles.pageSizeBtnWrapper}>\n                <CommandBarButton\n                    disabled={dataset.loading || !paging.isEnabled}\n                    text={paging.toString()}\n                    menuProps={parameters.EnablePageSizeSwitcher?.raw !== false ? {\n                        items: [\n                            {\n                                key: 'header',\n                                itemType: ContextualMenuItemType.Header,\n                                text: labels['page-record-count'](),\n                            },\n                            {\n                                key: 'divider',\n                                itemType: ContextualMenuItemType.Divider,\n                            },\n                            ...getPageSizeOptions()\n                        ]\n                    } : undefined}\n                />\n            </div>\n            {paging.isEnabled &&\n                <CommandBar\n                    className={styles.pagination}\n                    items={[]}\n                    farItems={[{\n                        key: 'FirstPage',\n                        iconOnly: true,\n                        iconProps: { iconName: 'DoubleChevronLeft' },\n                        disabled: !paging.hasPreviousPage || dataset.loading,\n                        onClick: () => paging.reset()\n                    }, {\n                        key: 'PreviousPage',\n                        iconOnly: true,\n                        iconProps: { iconName: 'Back' },\n                        disabled: !paging.hasPreviousPage || dataset.loading,\n                        onClick: () => paging.loadPreviousPage()\n                    }, {\n                        key: 'CurrentPage',\n                        text: `${labels['paging-page']()} ${paging.pageNumber.toString()}`,\n                        className: styles.currentPageBtn,\n                        disabled: true,\n                    }, {\n                        key: 'NextPage',\n                        iconOnly: true,\n                        iconProps: { iconName: 'Forward' },\n                        disabled: !paging.hasNextPage || dataset.loading,\n                        onClick: () => paging.loadNextPage()\n                    }]}\n                />\n            }\n        </ThemeProvider>\n    )\n\n\n\n}"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/{Grid/paging/model → DatasetControl/Paging}/Paging.d.ts

@@ -1,5 +1,11 @@
-import { GridDependency } from "../../core/model/GridDependency";
-export declare class Paging extends GridDependency {
+import { IDatasetPagingParameters } from "./interfaces";
+import { ITranslation } from "../../../hooks";
+import { datasetPagingTranslations } from "./translations";
+type ILabels = Required<ITranslation<typeof datasetPagingTranslations>>;
+export declare class Paging {
+    private _getParameters;
+    private _getLabels;
+    constructor(getParameters: () => IDatasetPagingParameters, getLabels: () => ILabels);
     get pageNumber(): number;
     get pageSize(): number;
     get totalResultCount(): number;
@@ -14,4 +20,7 @@ export declare class Paging extends GridDependency {
     loadExactPage(pageNumber: number): void;
     setPageSize(pageSize: number): void;
     reset(): void;
+    toString(): string;
+    private _getDataset;
 }
+export {};

package/dist/components/DatasetControl/Paging/Paging.js

@@ -0,0 +1,80 @@
+class Paging {
+    constructor(getParameters, getLabels) {
+        this._getParameters = getParameters;
+        this._getLabels = getLabels;
+    }
+    get pageNumber() {
+        return this._getDataset().paging.pageNumber;
+    }
+    get pageSize() {
+        return this._getDataset().paging.pageSize;
+    }
+    get totalResultCount() {
+        return this._getDataset().paging.totalResultCount;
+    }
+    get hasPreviousPage() {
+        return this._getDataset().paging.hasPreviousPage;
+    }
+    get hasNextPage() {
+        return this._getDataset().paging.hasNextPage;
+    }
+    get pageFirstRecordOrder() {
+        if (this._getDataset().sortedRecordIds.length === 0) {
+            return 0;
+        }
+        return (this.pageNumber - 1) * this.pageSize + (this.totalResultCount === 0 ? 0 : 1);
+    }
+    get formattedTotalResultCount() {
+        if (this.totalResultCount === undefined) {
+            return '';
+        }
+        if (this.totalResultCount === -1) {
+            return '5000+';
+        }
+        return this.totalResultCount.toString();
+    }
+    get pageLastRecordOrder() {
+        const count = this.pageNumber * this.pageSize;
+        if (this.totalResultCount === undefined) {
+            if (this.hasNextPage) {
+                return `${count}+`;
+            }
+            return `${count - this.pageSize + this._getDataset().sortedRecordIds.length}`;
+        }
+        if (count > this.totalResultCount && this.totalResultCount !== -1) {
+            return this.totalResultCount.toString();
+        }
+        return count.toString();
+    }
+    get isEnabled() {
+        return this._getParameters()?.EnablePagination?.raw !== false;
+    }
+    loadNextPage() {
+        this.loadExactPage(this.pageNumber + 1);
+    }
+    loadPreviousPage() {
+        this.loadExactPage(this.pageNumber - 1);
+    }
+    loadExactPage(pageNumber) {
+        this._getDataset().paging.loadExactPage(pageNumber);
+    }
+    setPageSize(pageSize) {
+        this._getDataset().paging.setPageSize(pageSize);
+        this._getDataset().refresh();
+    }
+    reset() {
+        this._getDataset().paging.reset();
+    }
+    toString() {
+        if (this.totalResultCount === undefined) {
+            return this._getLabels()['paging-pages']({ start: this.pageFirstRecordOrder, end: this.pageLastRecordOrder });
+        }
+        return `${this._getLabels()['paging-pages']({ start: this.pageFirstRecordOrder, end: this.pageLastRecordOrder })} ${this._getLabels()['paging-pages-totalcount']({ recordcount: this.formattedTotalResultCount })}`;
+    }
+    _getDataset() {
+        return this._getParameters().Dataset;
+    }
+}
+
+export { Paging };
+//# sourceMappingURL=Paging.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Paging.js","sources":["../../../../src/components/DatasetControl/Paging/Paging.ts"],"sourcesContent":["import { IDataset } from \"@talxis/client-libraries\";\nimport { IDatasetPagingParameters } from \"./interfaces\";\nimport { ITranslation } from \"../../../hooks\";\nimport { datasetPagingTranslations } from \"./translations\";\n\ntype ILabels = Required<ITranslation<typeof datasetPagingTranslations>>;\n\nexport class Paging {\n    private _getParameters: () => IDatasetPagingParameters;\n    private _getLabels: () => ILabels\n\n    constructor(getParameters: () => IDatasetPagingParameters, getLabels: () => ILabels) {\n        this._getParameters = getParameters;\n        this._getLabels = getLabels;\n    }\n\n    public get pageNumber() {\n        return this._getDataset().paging.pageNumber\n    }\n    public get pageSize() {\n        return this._getDataset().paging.pageSize\n    }\n    public get totalResultCount() {\n        return this._getDataset().paging.totalResultCount\n    }\n    public get hasPreviousPage() {\n        return this._getDataset().paging.hasPreviousPage\n    }\n    public get hasNextPage() {\n        return this._getDataset().paging.hasNextPage\n    }\n    public get pageFirstRecordOrder() {\n        if (this._getDataset().sortedRecordIds.length === 0) {\n            return 0;\n        }\n        return (this.pageNumber - 1) * this.pageSize + (this.totalResultCount === 0 ? 0 : 1);\n    }\n    public get formattedTotalResultCount(): string {\n        if (this.totalResultCount === undefined) {\n            return '';\n        }\n        if (this.totalResultCount === -1) {\n            return '5000+';\n        }\n        return this.totalResultCount.toString();\n    }\n    public get pageLastRecordOrder(): string {\n        const count = this.pageNumber * this.pageSize;\n        if (this.totalResultCount === undefined) {\n            if (this.hasNextPage) {\n                return `${count}+`;\n            }\n            return `${count - this.pageSize + this._getDataset().sortedRecordIds.length}`\n\n        }\n        if (count > this.totalResultCount && this.totalResultCount !== -1) {\n            return this.totalResultCount.toString();\n        }\n        return count.toString();\n    }\n\n    public get isEnabled() {\n        return this._getParameters()?.EnablePagination?.raw !== false;\n    }\n\n    public loadNextPage() {\n        this.loadExactPage(this.pageNumber + 1)\n    }\n    public loadPreviousPage() {\n        this.loadExactPage(this.pageNumber - 1);\n    }\n    public loadExactPage(pageNumber: number) {\n        this._getDataset().paging.loadExactPage(pageNumber);\n    }\n    public setPageSize(pageSize: number) {\n        this._getDataset().paging.setPageSize(pageSize);\n        this._getDataset().refresh();\n    }\n    public reset() {\n        this._getDataset().paging.reset();\n    }\n\n    public toString(): string {\n        if (this.totalResultCount === undefined) {\n            return this._getLabels()['paging-pages']({ start: this.pageFirstRecordOrder, end: this.pageLastRecordOrder })\n        }\n        return `${this._getLabels()['paging-pages']({ start: this.pageFirstRecordOrder, end: this.pageLastRecordOrder })} ${this._getLabels()['paging-pages-totalcount']({ recordcount: this.formattedTotalResultCount })}`\n    }\n\n    private _getDataset(): IDataset {\n        return this._getParameters().Dataset;\n    }\n}"],"names":[],"mappings":"MAOa,MAAM,CAAA;IAIf,WAAY,CAAA,aAA6C,EAAE,SAAwB,EAAA;AAC/E,QAAA,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;AACpC,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;KAC/B;AAED,IAAA,IAAW,UAAU,GAAA;QACjB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,UAAU,CAAA;KAC9C;AACD,IAAA,IAAW,QAAQ,GAAA;QACf,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAA;KAC5C;AACD,IAAA,IAAW,gBAAgB,GAAA;QACvB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAA;KACpD;AACD,IAAA,IAAW,eAAe,GAAA;QACtB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,eAAe,CAAA;KACnD;AACD,IAAA,IAAW,WAAW,GAAA;QAClB,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,WAAW,CAAA;KAC/C;AACD,IAAA,IAAW,oBAAoB,GAAA;QAC3B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;AACjD,YAAA,OAAO,CAAC,CAAC;AACZ,SAAA;QACD,OAAO,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;KACxF;AACD,IAAA,IAAW,yBAAyB,GAAA;AAChC,QAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS,EAAE;AACrC,YAAA,OAAO,EAAE,CAAC;AACb,SAAA;AACD,QAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,CAAC,EAAE;AAC9B,YAAA,OAAO,OAAO,CAAC;AAClB,SAAA;AACD,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;KAC3C;AACD,IAAA,IAAW,mBAAmB,GAAA;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;AAC9C,QAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS,EAAE;YACrC,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,OAAO,CAAA,EAAG,KAAK,CAAA,CAAA,CAAG,CAAC;AACtB,aAAA;AACD,YAAA,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,eAAe,CAAC,MAAM,EAAE,CAAA;AAEhF,SAAA;AACD,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,CAAC,EAAE;AAC/D,YAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC;AAC3C,SAAA;AACD,QAAA,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC;KAC3B;AAED,IAAA,IAAW,SAAS,GAAA;QAChB,OAAO,IAAI,CAAC,cAAc,EAAE,EAAE,gBAAgB,EAAE,GAAG,KAAK,KAAK,CAAC;KACjE;IAEM,YAAY,GAAA;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAA;KAC1C;IACM,gBAAgB,GAAA;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;KAC3C;AACM,IAAA,aAAa,CAAC,UAAkB,EAAA;QACnC,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;KACvD;AACM,IAAA,WAAW,CAAC,QAAgB,EAAA;QAC/B,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AAChD,QAAA,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,CAAC;KAChC;IACM,KAAK,GAAA;QACR,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrC;IAEM,QAAQ,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS,EAAE;YACrC,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAA;AAChH,SAAA;AACD,QAAA,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAI,CAAA,EAAA,IAAI,CAAC,UAAU,EAAE,CAAC,yBAAyB,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,yBAAyB,EAAE,CAAC,EAAE,CAAA;KACtN;IAEO,WAAW,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC,OAAO,CAAC;KACxC;AACJ;;;;"}

package/dist/components/DatasetControl/Paging/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DatasetPaging';
+export * from './Paging';
+export * from './interfaces';

package/dist/components/DatasetControl/Paging/index.js

@@ -0,0 +1,3 @@
+export { DatasetPaging } from './DatasetPaging.js';
+export { Paging } from './Paging.js';
+//# sourceMappingURL=index.js.map

package/dist/components/DatasetControl/Paging/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,16 @@
+import { IControl, IParameters, ITranslations, ITwoOptionsProperty } from "../../../interfaces";
+import { IDataset } from "@talxis/client-libraries";
+import { datasetPagingTranslations } from "./translations";
+export interface IDatasetPaging extends IControl<IDatasetPagingParameters, any, Partial<ITranslations<typeof datasetPagingTranslations>>, any> {
+}
+export interface IDatasetPagingParameters extends IParameters {
+    Dataset: IDataset;
+    /**
+     * If set to false, the user will not be able to navigate through pages. The component will still display the total number of records and the current page.
+     */
+    EnablePagination?: Omit<ITwoOptionsProperty, 'attributes'>;
+    /**
+     * If set to false, the user will not be able to change the page size.
+     */
+    EnablePageSizeSwitcher?: Omit<ITwoOptionsProperty, 'attributes'>;
+}

package/dist/components/{Grid/paging/components → DatasetControl}/Paging/styles.d.ts

@@ -1,6 +1,6 @@
 import { ITheme } from "@fluentui/react";
 export declare const getPagingStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
-    root: {
+    datasetPagingRoot: {
         display: string;
         flexWrap: string;
         justifyContent: string;

package/dist/components/{Grid/paging/components → DatasetControl}/Paging/styles.js

@@ -2,7 +2,7 @@ import { mergeStyleSets } from '@fluentui/react';
 
 const getPagingStyles = (theme) => {
     return mergeStyleSets({
-        root: {
+        datasetPagingRoot: {
             display: 'flex',
             flexWrap: 'wrap',
             justifyContent: 'center'

package/dist/components/DatasetControl/Paging/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DatasetControl/Paging/styles.ts"],"sourcesContent":["import { mergeStyleSets, ITheme } from \"@fluentui/react\";\n\nexport const getPagingStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        datasetPagingRoot: {\n            display: 'flex',\n            flexWrap: 'wrap',\n            justifyContent: 'center'\n        },\n        pagination: {\n            '.ms-CommandBar': {\n                paddingLeft: 0,\n                paddingRight: 0,\n            }\n        },\n        currentPageBtn: {\n            '.ms-Button-label': {\n                color: theme.semanticColors.bodyText\n            }\n        },\n        pageSizeBtnWrapper: {\n            flexGrow: 1,\n            display: 'flex',\n            '.ms-Button-label': {\n                whiteSpace: 'nowrap',\n            },\n            '.ms-Button': {\n                height: 44\n            }\n        },\n        pageSizeOption: {\n            '& .is-checked': {\n                backgroundColor: theme.semanticColors.buttonBackgroundHovered,\n                fontWeight: 600\n            }\n        }\n    });\n};"],"names":[],"mappings":";;AAEa,MAAA,eAAe,GAAG,CAAC,KAAa,KAAI;AAC7C,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,iBAAiB,EAAE;AACf,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,cAAc,EAAE,QAAQ;AAC3B,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,gBAAgB,EAAE;AACd,gBAAA,WAAW,EAAE,CAAC;AACd,gBAAA,YAAY,EAAE,CAAC;AAClB,aAAA;AACJ,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,kBAAkB,EAAE;AAChB,gBAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;AACvC,aAAA;AACJ,SAAA;AACD,QAAA,kBAAkB,EAAE;AAChB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,kBAAkB,EAAE;AAChB,gBAAA,UAAU,EAAE,QAAQ;AACvB,aAAA;AACD,YAAA,YAAY,EAAE;AACV,gBAAA,MAAM,EAAE,EAAE;AACb,aAAA;AACJ,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,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;;;;"}

package/dist/components/DatasetControl/Paging/translations.d.ts

@@ -0,0 +1,38 @@
+export declare const datasetPagingTranslations: {
+    "paging-of": {
+        1029: string;
+        1033: string;
+    };
+    "paging-firstpage": {
+        1029: string;
+        1033: string;
+    };
+    "paging-previouspage": {
+        1029: string;
+        1033: string;
+    };
+    "paging-page": {
+        1029: string;
+        1033: string;
+    };
+    "paging-nextpage": {
+        1029: string;
+        1033: string;
+    };
+    "paging-lastpage": {
+        1029: string;
+        1033: string;
+    };
+    "paging-pages": {
+        1029: string;
+        1033: string;
+    };
+    "paging-pages-totalcount": {
+        1029: string;
+        1033: string;
+    };
+    "page-record-count": {
+        1029: string;
+        1033: string;
+    };
+};

package/dist/components/DatasetControl/Paging/translations.js

@@ -0,0 +1,14 @@
+const datasetPagingTranslations = {
+    "paging-of": { 1029: "z", 1033: "of" },
+    "paging-firstpage": { 1029: "První strana", 1033: "First page" },
+    "paging-previouspage": { 1029: "Předchozí", 1033: "Previous" },
+    "paging-page": { 1029: "Strana", 1033: "Page" },
+    "paging-nextpage": { 1029: "Další", 1033: "Next" },
+    "paging-lastpage": { 1029: "Poslední strana", 1033: "Last page" },
+    "paging-pages": { 1029: "{{start}} - {{end}}", 1033: "{{start}} - {{end}}" },
+    "paging-pages-totalcount": { 1029: "z {{recordcount}}", 1033: "of {{recordcount}}" },
+    "page-record-count": { 1029: 'Počet záznamů na stránce', 1033: 'Records per page' }
+};
+
+export { datasetPagingTranslations };
+//# sourceMappingURL=translations.js.map

package/dist/components/DatasetControl/Paging/translations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sources":["../../../../src/components/DatasetControl/Paging/translations.ts"],"sourcesContent":["export const datasetPagingTranslations = {\n    \"paging-of\": { 1029: \"z\", 1033: \"of\" },\n    \"paging-firstpage\": { 1029: \"První strana\", 1033: \"First page\" },\n    \"paging-previouspage\": { 1029: \"Předchozí\", 1033: \"Previous\" },\n    \"paging-page\": { 1029: \"Strana\", 1033: \"Page\" },\n    \"paging-nextpage\": { 1029: \"Další\", 1033: \"Next\" },\n    \"paging-lastpage\": { 1029: \"Poslední strana\", 1033: \"Last page\" },\n    \"paging-pages\": { 1029: \"{{start}} - {{end}}\", 1033: \"{{start}} - {{end}}\" },\n    \"paging-pages-totalcount\": { 1029: \"z {{recordcount}}\", 1033: \"of {{recordcount}}\" },\n    \"page-record-count\": { 1029: 'Počet záznamů na stránce', 1033: 'Records per page' }\n}"],"names":[],"mappings":"AAAa,MAAA,yBAAyB,GAAG;IACrC,WAAW,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE;IACtC,kBAAkB,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE;IAChE,qBAAqB,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;IAC9D,aAAa,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE;IAC/C,iBAAiB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE;IAClD,iBAAiB,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE;IACjE,cAAc,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,qBAAqB,EAAE;IAC5E,yBAAyB,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,oBAAoB,EAAE;IACpF,mBAAmB,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE,IAAI,EAAE,kBAAkB,EAAE;;;;;"}

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

@@ -1,2 +1,3 @@
 export * from './DatasetControl';
 export * from './interfaces';
+export * from './Paging';

package/dist/components/DatasetControl/index.js

@@ -1,2 +1,4 @@
 export { DatasetControl } from './DatasetControl.js';
+export { DatasetPaging } from './Paging/DatasetPaging.js';
+export { Paging } from './Paging/Paging.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -6,6 +6,7 @@ import { gridTranslations } from "../Grid/translations";
 import { datasetControlTranslations } from "./translations";
 import { ITextFieldProps } from "@talxis/react-components";
 import React from "react";
+import { IDatasetPaging } from "./Paging";
 export interface IQuickFindProps {
     textFieldProps: ITextFieldProps;
     container: ThemeProviderProps;
@@ -21,6 +22,7 @@ export interface IDatasetControlComponentProps {
         onRender: (renderQuickFind: () => React.ReactElement) => React.ReactElement;
         onGetQuickFindProps: (props: IQuickFindProps) => IQuickFindProps;
     };
+    onRenderPagination: (props: IDatasetPaging, renderPagination: (props: IDatasetPaging) => React.ReactElement<IDatasetPaging>) => React.ReactElement;
 }
 export interface IDatasetControl extends IControl<IGridParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, IDatasetControlComponentProps> {
     /**

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

@@ -4,13 +4,13 @@ export declare const getDatasetControlStyles: (theme: ITheme, height?: string |
         flexGrow?: number | undefined;
         display: string;
         flexDirection: string;
-        gap: number;
     };
     headerRoot: {
         display: string;
         paddingLeft: number;
         paddingTop: number;
         paddingRight: number;
+        marginBottom: number;
     };
     messageBarBtn: {
         minHeight: string;

package/dist/components/DatasetControl/styles.js

@@ -5,7 +5,6 @@ const getDatasetControlStyles = (theme, height) => {
         datasetControlRoot: {
             display: 'flex',
             flexDirection: 'column',
-            gap: 15,
             ...(height === '100%' ? getFullHeightStyles() : {})
         },
         headerRoot: {
@@ -13,6 +12,7 @@ const getDatasetControlStyles = (theme, height) => {
             paddingLeft: 15,
             paddingTop: 15,
             paddingRight: 15,
+            marginBottom: 15
         },
         messageBarBtn: {
             minHeight: 'inherit'

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../src/components/DatasetControl/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { ITheme } from \"@talxis/react-components\";\n\nexport const getDatasetControlStyles = (theme: ITheme, height?: string | null) => {\n    return mergeStyleSets({\n        datasetControlRoot: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 15,\n            ...(height === '100%' ? getFullHeightStyles(theme) : {})\n\n        },\n        headerRoot: {\n            display: 'flex',\n            paddingLeft: 15,\n            paddingTop: 15,\n            paddingRight: 15,\n        },\n        messageBarBtn: {\n            minHeight: 'inherit'\n        }\n    });\n}\n\nconst getFullHeightStyles = (theme: ITheme) => {\n    return {\n        flexGrow: 1\n    }\n}"],"names":[],"mappings":";;MAGa,uBAAuB,GAAG,CAAC,KAAa,EAAE,MAAsB,KAAI;AAC7E,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,kBAAkB,EAAE;AAChB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,IAAI,MAAM,KAAK,MAAM,GAAG,mBAAmB,CAAM,CAAC,GAAG,EAAE,CAAC;AAE3D,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,UAAU,EAAE,EAAE;AACd,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA,CAAC,CAAC;AACP,EAAC;AAED,MAAM,mBAAmB,GAAG,CAAC,KAAa,KAAI;IAC1C,OAAO;AACH,QAAA,QAAQ,EAAE,CAAC;KACd,CAAA;AACL,CAAC;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../src/components/DatasetControl/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { ITheme } from \"@talxis/react-components\";\n\nexport const getDatasetControlStyles = (theme: ITheme, height?: string | null) => {\n    return mergeStyleSets({\n        datasetControlRoot: {\n            display: 'flex',\n            flexDirection: 'column',\n            ...(height === '100%' ? getFullHeightStyles(theme) : {})\n\n        },\n        headerRoot: {\n            display: 'flex',\n            paddingLeft: 15,\n            paddingTop: 15,\n            paddingRight: 15,\n            marginBottom: 15\n        },\n        messageBarBtn: {\n            minHeight: 'inherit'\n        }\n    });\n}\n\nconst getFullHeightStyles = (theme: ITheme) => {\n    return {\n        flexGrow: 1\n    }\n}"],"names":[],"mappings":";;MAGa,uBAAuB,GAAG,CAAC,KAAa,EAAE,MAAsB,KAAI;AAC7E,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,kBAAkB,EAAE;AAChB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,IAAI,MAAM,KAAK,MAAM,GAAG,mBAAmB,CAAM,CAAC,GAAG,EAAE,CAAC;AAE3D,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,UAAU,EAAE,EAAE;AACd,YAAA,YAAY,EAAE,EAAE;AAChB,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;AACD,QAAA,aAAa,EAAE;AACX,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA;AACJ,KAAA,CAAC,CAAC;AACP,EAAC;AAED,MAAM,mBAAmB,GAAG,CAAC,KAAa,KAAI;IAC1C,OAAO;AACH,QAAA,QAAQ,EAAE,CAAC;KACd,CAAA;AACL,CAAC;;;;"}

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

@@ -5,7 +5,6 @@ import { ModuleRegistry } from '@ag-grid-community/core';
 import { useRef, useMemo, useState, useEffect } from 'react';
 import { useGridInstance } from '../../hooks/useGridInstance.js';
 import { getGridStyles } from './styles.js';
-import { Paging } from '../../../paging/components/Paging/Paging.js';
 import { EmptyRecords } from './components/EmptyRecordsOverlay/EmptyRecords.js';
 import { Save } from '../Save/Save.js';
 import { LoadingOverlay } from './components/LoadingOverlay/LoadingOverlay.js';
@@ -194,7 +193,7 @@ const AgGrid = (props) => {
                     jsx(Save, {}), grid.error &&
                     jsx(MessageBar, { messageBarType: MessageBarType.error, children: jsx("span", { dangerouslySetInnerHTML: {
                                 __html: grid.errorMessage
-                            } }) }), jsx(AgGridReact, { ...componentProps.agGrid }), jsx(Paging, {})] }) }));
+                            } }) }), jsx(AgGridReact, { ...componentProps.agGrid })] }) }));
 };
 
 export { AgGrid };

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

@@ -1 +1 @@
-{"version":3,"file":"AgGrid.js","sources":["../../../../../../src/components/Grid/core/components/AgGrid/AgGrid.tsx"],"sourcesContent":["import { AgGridReact } from '@ag-grid-community/react';\nimport { mergeStyles, MessageBar, MessageBarType, useTheme } from \"@fluentui/react\";\nimport { ColDef, ColumnResizedEvent, DomLayoutType, GridApi, GridState, ModuleRegistry, SelectionChangedEvent } from \"@ag-grid-community/core\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useGridInstance } from \"../../hooks/useGridInstance\";\nimport { getGridStyles } from \"./styles\";\nimport { Paging } from \"../../../paging/components/Paging/Paging\";\nimport { EmptyRecords } from \"./components/EmptyRecordsOverlay/EmptyRecords\";\nimport { Save } from \"../Save/Save\";\nimport { LoadingOverlay } from \"./components/LoadingOverlay/LoadingOverlay\";\nimport { IRecord } from '@talxis/client-libraries';\nimport { useDebounce, useDebouncedCallback } from 'use-debounce';\nimport { useGridController } from '../../controllers/useGridController';\nimport { useRerender, useStateValues } from '@talxis/react-components';\nimport { AgGrid as AgGridModel } from './model/AgGrid';\nimport { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';\nimport \"@ag-grid-community/styles/ag-grid.css\";\nimport \"@ag-grid-community/styles/ag-theme-balham.css\";\nimport { AgGridContext } from './context';\nimport { IGrid } from '../../../interfaces';\nimport { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';\nimport { LicenseManager } from '@ag-grid-enterprise/core';\nModuleRegistry.registerModules([ClientSideRowModelModule]);\n\n\nexport const AgGrid = (props: IGrid) => {\n    const grid = useGridInstance();\n    const gridApiRef = useRef<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord>>();\n    const containerWidthRef = useRef(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const theme = useTheme();\n    const styles = useMemo(() => getGridStyles(theme), [theme]);\n    const agGridReadyRef = useRef<boolean>(false);\n    const agGrid = useMemo(() => new AgGridModel(grid, gridApiRef, theme), []);\n    const agGridProviderValue = useMemo(() => agGrid, []);\n    const { columns } = useGridController();\n    const [agColumns, setAgColumns] = useState<ColDef[]>([]);\n    const [stateValuesRef, getNewStateValues, setDefaultStateValues] = useStateValues<GridState>(grid.state as GridState);\n    const records = grid.records;\n    const [gridHeight, setGridHeight] = useState<string | undefined>(grid.getHeightSettings().height);\n    const userChangedColumnSizeRef = useRef(false);\n    const rerender = useRerender();\n    const innerRerenderRef = useRef(true);\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n\n    const debounceUpdateVisualSizeFactor = useDebouncedCallback((e: ColumnResizedEvent<IRecord, any>) => {\n        if (e.source !== 'uiColumnResized') {\n            return;\n        }\n        userChangedColumnSizeRef.current = true;\n        agGrid.updateColumnVisualSizeFactor(e);\n    }, 200);\n\n    const debouncedRefresh = useDebouncedCallback(() => {\n        agGrid.refresh();\n    }, 0);\n\n    if (!grid.isUpdateScheduled()) {\n        debouncedRefresh();\n    }\n\n    const onGridReady = () => {\n        agGridReadyRef.current = true;\n        setDefaultStateValues({\n            scroll: {\n                top: 0,\n                left: 0\n            },\n            ...gridApiRef.current!.getState(),\n        });\n    }\n\n    const sizeColumnsIfSpaceAvailable = () => {\n        //do not autosize if user manually adjusted the column width\n        if (!gridApiRef.current || userChangedColumnSizeRef.current) {\n            return;\n        }\n        if (getCurrentContainerWidth() > grid.getTotalVisibleColumnsWidth()) {\n            gridApiRef.current!.sizeColumnsToFit();\n        }\n    }\n\n    const getCurrentContainerWidth = (): number => {\n        return containerWidthRef.current ?? containerRef.current?.clientWidth\n    }\n\n    const onSelectionChanged = useDebouncedCallback((e: SelectionChangedEvent<any, any>) => {\n        if (e.source.includes('api')) {\n            return;\n        }\n        grid.dataset.setSelectedRecordIds(e.api.getSelectedNodes().map(node => node.data!.getRecordId()));\n    }, 0);\n\n    useEffect(() => {\n        agGrid.toggleOverlay();\n        //scroll to top when data is loaded\n        if (!grid.loading && grid.dataset.sortedRecordIds.length > 0) {\n            gridApiRef.current?.ensureIndexVisible(0);\n        }\n    }, [grid.loading]);\n\n\n    useEffect(() => {\n        //this can be replaced with native functionality if we decide to use ag grid enterprise\n        grid.keyHoldListener.addOnKeyDownHandler((event) => agGrid.copyCellValue(event));\n\n        agGrid.setRerenderCallback(() => {\n            innerRerenderRef.current = true;\n            rerender();\n        });\n        return () => {\n            grid.pcfContext.mode.setControlState(getNewStateValues());\n        }\n    }, []);\n\n    useEffect(() => {\n        const columns = agGrid.getColumns();\n        if (columns.length === 0) {\n            return;\n        }\n        setAgColumns(columns)\n    }, [columns]);\n\n    useEffect(() => {\n        sizeColumnsIfSpaceAvailable()\n    }, [agColumns]);\n\n    useEffect(() => {\n        setTimeout(() => {\n            //we need to set the height of the grid after everything else is rendered to avoid the redraw rows error\n            setGridHeight(grid.getHeightSettings().height);\n        }, 0);\n    }, [records, agColumns])\n\n    innerRerenderRef.current = false;\n\n    const componentProps = onOverrideComponentProps({\n        container: {\n            ref: containerRef,\n            className: `${styles.root} ${mergeStyles({\n                height: gridHeight\n            })} ag-theme-balham`\n        },\n        pagingProps: {},\n        registerRowGroupingModule: false,\n        agGrid: {\n            animateRows: false,\n            domLayout: grid.getHeightSettings().isAutoHeightEnabled ? 'autoHeight' : undefined,\n            rowSelection: grid.selection.type,\n            noRowsOverlayComponent: EmptyRecords,\n            loadingOverlayComponent: LoadingOverlay,\n            suppressNoRowsOverlay: grid.loading,\n            suppressDragLeaveHidesColumns: true,\n            onColumnResized: (e) => debounceUpdateVisualSizeFactor(e),\n            onColumnMoved: (e) => agGrid.updateColumnOrder(e),\n            reactiveCustomComponents: true,\n            //rowMultiSelectWithClick: true,\n            onSelectionChanged: onSelectionChanged,\n            gridOptions: {\n                getRowStyle: (params) => {\n                    return {\n                        backgroundColor: agGrid.getDefaultCellTheme(params.node.childIndex % 2 === 0).semanticColors.bodyBackground\n                    }\n                },\n            },\n            onCellDoubleClicked: (e) => {\n                if (grid.isNavigationEnabled && !grid.isEditable) {\n                    grid.dataset.openDatasetItem(e.data!.getNamedReference())\n                }\n            },\n            getRowId: (params) => params.data.getRecordId(),\n            onGridReady: (e) => {\n                gridApiRef.current = e.api as any;\n                if (grid.loading) {\n                    gridApiRef.current?.showLoadingOverlay();\n                }\n                onGridReady();\n            },\n            onGridSizeChanged: (e) => {\n                containerWidthRef.current = e.clientWidth;\n                sizeColumnsIfSpaceAvailable();\n            },\n            onFirstDataRendered: (e) => {\n                sizeColumnsIfSpaceAvailable();\n                agGrid.refreshRowSelection();\n            },\n            onRowDataUpdated: () => {\n                agGrid.rerenderGlobalCheckBox();\n            },\n            onCellEditingStopped: () => {\n                grid.pcfContext.factory.requestRender();\n            },\n            initialState: stateValuesRef.current,\n            onStateUpdated: (e) => stateValuesRef.current = {\n                ...stateValuesRef.current,\n                ...e.state\n            },\n            columnDefs: agColumns as any,\n            rowData: records,\n            getRowHeight: (params) => agGrid.getRowHeight(params.data!)\n        }\n    });\n\n    useMemo(() => {\n        if (componentProps.registerRowGroupingModule) {\n            ModuleRegistry.register(RowGroupingModule);\n        }\n        if (componentProps.licenseKey) {\n            LicenseManager.setLicenseKey(componentProps.licenseKey);\n        }\n    }, []);\n\n    return (\n        <AgGridContext.Provider value={agGridProviderValue}>\n            <div {...componentProps.container}>\n                {grid.isEditable && grid.dataset.isDirty?.() &&\n                    <Save />\n                }\n                {grid.error &&\n                    <MessageBar messageBarType={MessageBarType.error}>\n                        <span dangerouslySetInnerHTML={{\n                            __html: grid.errorMessage!\n                        }} />\n                    </MessageBar>\n                }\n                <AgGridReact {...componentProps.agGrid}>\n                </AgGridReact>\n                <Paging />\n            </div>\n        </AgGridContext.Provider>\n    );\n}\n"],"names":["AgGridModel","_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"AgGrid.js","sources":["../../../../../../src/components/Grid/core/components/AgGrid/AgGrid.tsx"],"sourcesContent":["import { AgGridReact } from '@ag-grid-community/react';\nimport { mergeStyles, MessageBar, MessageBarType, useTheme } from \"@fluentui/react\";\nimport { ColDef, ColumnResizedEvent, DomLayoutType, GridApi, GridState, ModuleRegistry, SelectionChangedEvent } from \"@ag-grid-community/core\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useGridInstance } from \"../../hooks/useGridInstance\";\nimport { getGridStyles } from \"./styles\";\nimport { EmptyRecords } from \"./components/EmptyRecordsOverlay/EmptyRecords\";\nimport { Save } from \"../Save/Save\";\nimport { LoadingOverlay } from \"./components/LoadingOverlay/LoadingOverlay\";\nimport { IRecord } from '@talxis/client-libraries';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { useGridController } from '../../controllers/useGridController';\nimport { useRerender, useStateValues } from '@talxis/react-components';\nimport { AgGrid as AgGridModel } from './model/AgGrid';\nimport { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';\nimport \"@ag-grid-community/styles/ag-grid.css\";\nimport \"@ag-grid-community/styles/ag-theme-balham.css\";\nimport { AgGridContext } from './context';\nimport { IGrid } from '../../../interfaces';\nimport { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';\nimport { LicenseManager } from '@ag-grid-enterprise/core';\nModuleRegistry.registerModules([ClientSideRowModelModule]);\n\n\nexport const AgGrid = (props: IGrid) => {\n    const grid = useGridInstance();\n    const gridApiRef = useRef<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord>>();\n    const containerWidthRef = useRef(0);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const theme = useTheme();\n    const styles = useMemo(() => getGridStyles(theme), [theme]);\n    const agGridReadyRef = useRef<boolean>(false);\n    const agGrid = useMemo(() => new AgGridModel(grid, gridApiRef, theme), []);\n    const agGridProviderValue = useMemo(() => agGrid, []);\n    const { columns } = useGridController();\n    const [agColumns, setAgColumns] = useState<ColDef[]>([]);\n    const [stateValuesRef, getNewStateValues, setDefaultStateValues] = useStateValues<GridState>(grid.state as GridState);\n    const records = grid.records;\n    const [gridHeight, setGridHeight] = useState<string | undefined>(grid.getHeightSettings().height);\n    const userChangedColumnSizeRef = useRef(false);\n    const rerender = useRerender();\n    const innerRerenderRef = useRef(true);\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n\n    const debounceUpdateVisualSizeFactor = useDebouncedCallback((e: ColumnResizedEvent<IRecord, any>) => {\n        if (e.source !== 'uiColumnResized') {\n            return;\n        }\n        userChangedColumnSizeRef.current = true;\n        agGrid.updateColumnVisualSizeFactor(e);\n    }, 200);\n\n    const debouncedRefresh = useDebouncedCallback(() => {\n        agGrid.refresh();\n    }, 0);\n\n    if (!grid.isUpdateScheduled()) {\n        debouncedRefresh();\n    }\n\n    const onGridReady = () => {\n        agGridReadyRef.current = true;\n        setDefaultStateValues({\n            scroll: {\n                top: 0,\n                left: 0\n            },\n            ...gridApiRef.current!.getState(),\n        });\n    }\n\n    const sizeColumnsIfSpaceAvailable = () => {\n        //do not autosize if user manually adjusted the column width\n        if (!gridApiRef.current || userChangedColumnSizeRef.current) {\n            return;\n        }\n        if (getCurrentContainerWidth() > grid.getTotalVisibleColumnsWidth()) {\n            gridApiRef.current!.sizeColumnsToFit();\n        }\n    }\n\n    const getCurrentContainerWidth = (): number => {\n        return containerWidthRef.current ?? containerRef.current?.clientWidth\n    }\n\n    const onSelectionChanged = useDebouncedCallback((e: SelectionChangedEvent<any, any>) => {\n        if (e.source.includes('api')) {\n            return;\n        }\n        grid.dataset.setSelectedRecordIds(e.api.getSelectedNodes().map(node => node.data!.getRecordId()));\n    }, 0);\n\n    useEffect(() => {\n        agGrid.toggleOverlay();\n        //scroll to top when data is loaded\n        if (!grid.loading && grid.dataset.sortedRecordIds.length > 0) {\n            gridApiRef.current?.ensureIndexVisible(0);\n        }\n    }, [grid.loading]);\n\n\n    useEffect(() => {\n        //this can be replaced with native functionality if we decide to use ag grid enterprise\n        grid.keyHoldListener.addOnKeyDownHandler((event) => agGrid.copyCellValue(event));\n\n        agGrid.setRerenderCallback(() => {\n            innerRerenderRef.current = true;\n            rerender();\n        });\n        return () => {\n            grid.pcfContext.mode.setControlState(getNewStateValues());\n        }\n    }, []);\n\n    useEffect(() => {\n        const columns = agGrid.getColumns();\n        if (columns.length === 0) {\n            return;\n        }\n        setAgColumns(columns)\n    }, [columns]);\n\n    useEffect(() => {\n        sizeColumnsIfSpaceAvailable()\n    }, [agColumns]);\n\n    useEffect(() => {\n        setTimeout(() => {\n            //we need to set the height of the grid after everything else is rendered to avoid the redraw rows error\n            setGridHeight(grid.getHeightSettings().height);\n        }, 0);\n    }, [records, agColumns])\n\n    innerRerenderRef.current = false;\n\n    const componentProps = onOverrideComponentProps({\n        container: {\n            ref: containerRef,\n            className: `${styles.root} ${mergeStyles({\n                height: gridHeight\n            })} ag-theme-balham`\n        },\n        pagingProps: {},\n        registerRowGroupingModule: false,\n        agGrid: {\n            animateRows: false,\n            domLayout: grid.getHeightSettings().isAutoHeightEnabled ? 'autoHeight' : undefined,\n            rowSelection: grid.selection.type,\n            noRowsOverlayComponent: EmptyRecords,\n            loadingOverlayComponent: LoadingOverlay,\n            suppressNoRowsOverlay: grid.loading,\n            suppressDragLeaveHidesColumns: true,\n            onColumnResized: (e) => debounceUpdateVisualSizeFactor(e),\n            onColumnMoved: (e) => agGrid.updateColumnOrder(e),\n            reactiveCustomComponents: true,\n            //rowMultiSelectWithClick: true,\n            onSelectionChanged: onSelectionChanged,\n            gridOptions: {\n                getRowStyle: (params) => {\n                    return {\n                        backgroundColor: agGrid.getDefaultCellTheme(params.node.childIndex % 2 === 0).semanticColors.bodyBackground\n                    }\n                },\n            },\n            onCellDoubleClicked: (e) => {\n                if (grid.isNavigationEnabled && !grid.isEditable) {\n                    grid.dataset.openDatasetItem(e.data!.getNamedReference())\n                }\n            },\n            getRowId: (params) => params.data.getRecordId(),\n            onGridReady: (e) => {\n                gridApiRef.current = e.api as any;\n                if (grid.loading) {\n                    gridApiRef.current?.showLoadingOverlay();\n                }\n                onGridReady();\n            },\n            onGridSizeChanged: (e) => {\n                containerWidthRef.current = e.clientWidth;\n                sizeColumnsIfSpaceAvailable();\n            },\n            onFirstDataRendered: (e) => {\n                sizeColumnsIfSpaceAvailable();\n                agGrid.refreshRowSelection();\n            },\n            onRowDataUpdated: () => {\n                agGrid.rerenderGlobalCheckBox();\n            },\n            onCellEditingStopped: () => {\n                grid.pcfContext.factory.requestRender();\n            },\n            initialState: stateValuesRef.current,\n            onStateUpdated: (e) => stateValuesRef.current = {\n                ...stateValuesRef.current,\n                ...e.state\n            },\n            columnDefs: agColumns as any,\n            rowData: records,\n            getRowHeight: (params) => agGrid.getRowHeight(params.data!)\n        }\n    });\n\n    useMemo(() => {\n        if (componentProps.registerRowGroupingModule) {\n            ModuleRegistry.register(RowGroupingModule);\n        }\n        if (componentProps.licenseKey) {\n            LicenseManager.setLicenseKey(componentProps.licenseKey);\n        }\n    }, []);\n\n    return (\n        <AgGridContext.Provider value={agGridProviderValue}>\n            <div {...componentProps.container}>\n                {grid.isEditable && grid.dataset.isDirty?.() &&\n                    <Save />\n                }\n                {grid.error &&\n                    <MessageBar messageBarType={MessageBarType.error}>\n                        <span dangerouslySetInnerHTML={{\n                            __html: grid.errorMessage!\n                        }} />\n                    </MessageBar>\n                }\n                <AgGridReact {...componentProps.agGrid}>\n                </AgGridReact>\n            </div>\n        </AgGridContext.Provider>\n    );\n}\n"],"names":["AgGridModel","_jsx","_jsxs"],"mappings":"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"}

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

@@ -186,7 +186,8 @@ const ChangeGrid = (props) => {
                                 display: 'none'
                             }
                         }
-                    }
+                    },
+                    onRenderPagination: (props, renderPagination) => React__default.createElement(React__default.Fragment)
                 };
             }, parameters: {
                 Grid: dataset,