@talxis/base-controls 0.0.1

package/README.md

@@ -0,0 +1,41 @@
+# Running locally build package in PCF
+
+1. Run `npm install` inside the root directory.
+1. Run `npm run build`.
+1. Run `pnpm link --global`
+1. Navigate to the PCF root directory
+1. Run `pnpm link --global @talxis/base-controls`
+1. Run `npm start watch`.
+
+If you make any changes in the package and re-build it with `npm run build`, it will automatically re-build the PCF and show your changes.
+
+# Running locally build package in Portal
+
+1. Run `npm install` inside the root directory.
+1. Run `npm run build`.
+1. Run `npm link`.
+1. Navigate to the `Portal.Web.Frontend` directory.
+1. Add the following prop in the `vite.config.mts` file under `defineConfig`:
+
+```typescript
+optimizeDeps: {
+    exclude: ['@talxis/base-controls']
+}
+```
+8. Run `npm install`
+9. Run `npm link @talxis/base-controls`
+10. Run `npm start`
+
+These steps only need to be done once. If you want to see any future changes you made in the package, you need to run `npm run build` in package root directory and Portal will automatically reload with your changes applied.
+
+**Don't forget to revert the `vite.config.mts` file to the original version before pushing any changes to the Portal repo!**
+
+## Troubleshooting
+
+If your PCF/Portal builds, but you get an `Hooks can only be called inside of the body of a function component` error during runtime, you need to link the version of React from your PCF/Portal to the package:
+
+1. Navigate to the root directory.
+2. Run `npm` link `<path-to-react> <path-to-react-dom>`
+
+Easiest way to do this is drag the `react` and `react-dom` folders from your PCF/Portal `node_modules` folder into the terminal window where you write the `npm link` command.
+

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

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

package/dist/components/DatasetControl/DatasetControl.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+import { ThemeProvider } from '@fluentui/react';
+import { datasetControlTranslations } from './translations.js';
+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();
+const DatasetControl = (props) => {
+    const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);
+    const rerender = useRerender();
+    const dataset = props.parameters.Grid;
+    const injectedContextRef = useRef(props.context);
+    const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    useMemo(() => {
+        if (dataset.isVirtual() || !client.isTalxisPortal()) {
+            dataset.setInterceptor('__onRequestRender', () => rerender());
+        }
+    }, []);
+    //we need to have a way to customize the init behavior from above
+    const componentProps = onOverrideComponentProps({
+        onDatasetInit: () => {
+            if (dataset.isVirtual()) {
+                dataset.paging.loadExactPage(dataset.paging.pageNumber);
+            }
+        },
+        containerProps: {
+            theme: theme,
+            className: styles.datasetControlRoot,
+        },
+        headerProps: {
+            headerContainerProps: {
+                className: styles.headerRoot
+            },
+            onRender: (renderQuickFind) => renderQuickFind(),
+            onGetQuickFindProps: (props) => props
+        },
+        onRenderPagination: (props, renderPagination) => renderPagination(props)
+    });
+    useMemo(() => {
+        //@ts-ignore - private property
+        injectedContextRef.current = dataset._patchContext(props.context);
+    }, [props.context]);
+    useMemo(() => {
+        componentProps.onDatasetInit();
+    }, []);
+    const isQuickFindEnabled = () => {
+        if (dataset.isVirtual() && props.parameters.EnableQuickFind?.raw) {
+            return true;
+        }
+        return false;
+    };
+    return (jsxs(ThemeProvider, { ...componentProps.containerProps, children: [isQuickFindEnabled() &&
+                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 }), componentProps.onRenderPagination({
+                context: injectedContextRef.current, parameters: {
+                    Dataset: dataset,
+                    EnablePagination: props.parameters.EnablePagination,
+                    EnablePageSizeSwitcher: props.parameters.EnablePageSizeSwitcher
+                }
+            }, (paginationProps) => jsx(DatasetPaging, { ...paginationProps }))] }));
+};
+
+export { DatasetControl };
+//# sourceMappingURL=DatasetControl.js.map

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

@@ -0,0 +1 @@
+{"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/DatasetControl/Paging/DatasetPaging.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 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 = () => {
+        return PAGE_SIZE_OPTIONS.map(size => {
+            return {
+                key: size,
+                text: size,
+                checked: parseInt(size) === paging.pageSize,
+                className: styles.pageSizeOption,
+                onClick: () => paging.setPageSize(parseInt(size))
+            };
+        });
+    };
+    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',
+                                itemType: ContextualMenuItemType.Header,
+                                text: labels['page-record-count'](),
+                            },
+                            {
+                                key: 'divider',
+                                itemType: ContextualMenuItemType.Divider,
+                            },
+                            ...getPageSizeOptions()
+                        ]
+                    } : undefined }) }), paging.isEnabled &&
+                jsx(CommandBar, { className: styles.pagination, items: [], farItems: [{
+                            key: 'FirstPage',
+                            iconOnly: true,
+                            iconProps: { iconName: 'DoubleChevronLeft' },
+                            disabled: !paging.hasPreviousPage || dataset.loading,
+                            onClick: () => paging.reset()
+                        }, {
+                            key: 'PreviousPage',
+                            iconOnly: true,
+                            iconProps: { iconName: 'Back' },
+                            disabled: !paging.hasPreviousPage || dataset.loading,
+                            onClick: () => paging.loadPreviousPage()
+                        }, {
+                            key: 'CurrentPage',
+                            text: `${labels['paging-page']()} ${paging.pageNumber.toString()}`,
+                            className: styles.currentPageBtn,
+                            disabled: true,
+                        }, {
+                            key: 'NextPage',
+                            iconOnly: true,
+                            iconProps: { iconName: 'Forward' },
+                            disabled: !paging.hasNextPage || dataset.loading,
+                            onClick: () => paging.loadNextPage()
+                        }] })] }));
+};
+
+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/DatasetControl/Paging/Paging.d.ts

@@ -0,0 +1,26 @@
+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;
+    get hasPreviousPage(): boolean;
+    get hasNextPage(): boolean;
+    get pageFirstRecordOrder(): number;
+    get formattedTotalResultCount(): string;
+    get pageLastRecordOrder(): string;
+    get isEnabled(): boolean;
+    loadNextPage(): void;
+    loadPreviousPage(): void;
+    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":"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"}

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/DatasetControl/Paging/styles.d.ts

@@ -0,0 +1,35 @@
+import { ITheme } from "@fluentui/react";
+export declare const getPagingStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    datasetPagingRoot: {
+        display: string;
+        flexWrap: string;
+        justifyContent: string;
+    };
+    pagination: {
+        '.ms-CommandBar': {
+            paddingLeft: number;
+            paddingRight: number;
+        };
+    };
+    currentPageBtn: {
+        '.ms-Button-label': {
+            color: string;
+        };
+    };
+    pageSizeBtnWrapper: {
+        flexGrow: number;
+        display: string;
+        '.ms-Button-label': {
+            whiteSpace: string;
+        };
+        '.ms-Button': {
+            height: number;
+        };
+    };
+    pageSizeOption: {
+        '& .is-checked': {
+            backgroundColor: string;
+            fontWeight: number;
+        };
+    };
+}>;

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

@@ -0,0 +1,41 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getPagingStyles = (theme) => {
+    return mergeStyleSets({
+        datasetPagingRoot: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center'
+        },
+        pagination: {
+            '.ms-CommandBar': {
+                paddingLeft: 0,
+                paddingRight: 0,
+            }
+        },
+        currentPageBtn: {
+            '.ms-Button-label': {
+                color: theme.semanticColors.bodyText
+            }
+        },
+        pageSizeBtnWrapper: {
+            flexGrow: 1,
+            display: 'flex',
+            '.ms-Button-label': {
+                whiteSpace: 'nowrap',
+            },
+            '.ms-Button': {
+                height: 44
+            }
+        },
+        pageSizeOption: {
+            '& .is-checked': {
+                backgroundColor: theme.semanticColors.buttonBackgroundHovered,
+                fontWeight: 600
+            }
+        }
+    });
+};
+
+export { getPagingStyles };
+//# sourceMappingURL=styles.js.map

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/QuickFind/QuickFind.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IDataset } from "@talxis/client-libraries";
+import { ITheme } from "@talxis/react-components";
+import { datasetControlTranslations } from "../translations";
+import { ITranslation } from "../../../hooks";
+import { IQuickFindProps } from "../interfaces";
+export interface IQuickFindComponentProps {
+    labels: ITranslation<typeof datasetControlTranslations>;
+    dataset: IDataset;
+    theme: ITheme;
+    onGetQuickFindComponentProps: (props: IQuickFindProps) => IQuickFindProps;
+}
+export declare const QuickFind: (props: IQuickFindComponentProps) => JSX.Element;

package/dist/components/DatasetControl/QuickFind/QuickFind.js

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import { TextField } from '@talxis/react-components';
+import { useState, useMemo, useEffect } from 'react';
+import { ThemeProvider } from '@fluentui/react';
+import { getQuickFindStyles } from './styles.js';
+
+const QuickFind = (props) => {
+    const { dataset, labels, theme } = { ...props };
+    const [query, setQuery] = useState('');
+    const styles = useMemo(() => getQuickFindStyles(), []);
+    const quickFindProps = props.onGetQuickFindComponentProps({
+        container: {
+            theme: theme,
+            className: styles.quickFindRoot
+        },
+        textFieldProps: {
+            value: query,
+            styles: {
+                fieldGroup: styles.fieldGroup
+            },
+            placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,
+            onChange: (e, newValue) => setQuery(newValue ?? ''),
+            onKeyUp: (e) => {
+                if (e.key === 'Enter') {
+                    onSearch(query);
+                }
+            },
+            deleteButtonProps: query ? {
+                key: 'delete',
+                iconProps: {
+                    iconName: 'Cancel'
+                },
+                onClick: () => {
+                    setQuery("");
+                    onSearch(undefined);
+                }
+            } : undefined,
+            suffixItems: [{
+                    key: 'search',
+                    iconProps: {
+                        iconName: 'Search'
+                    },
+                    onClick: () => onSearch(query)
+                }]
+        }
+    });
+    const onSearch = (query) => {
+        dataset.setSearchQuery?.(query ?? "");
+        dataset.refresh();
+    };
+    useEffect(() => {
+        setQuery(dataset.getSearchQuery?.() ?? '');
+    }, [dataset.getSearchQuery?.()]);
+    //needs to be wrapped within ThemeProvider because the theme context can be lost if we are overriding the header render
+    return jsx(ThemeProvider, { ...quickFindProps.container, children: jsx(TextField, { ...quickFindProps.textFieldProps }) });
+};
+
+export { QuickFind };
+//# sourceMappingURL=QuickFind.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickFind.js","sources":["../../../../src/components/DatasetControl/QuickFind/QuickFind.tsx"],"sourcesContent":["import { IDataset } from \"@talxis/client-libraries\";\nimport { ITextFieldProps, ITheme, TextField } from \"@talxis/react-components\";\nimport { datasetControlTranslations } from \"../translations\";\nimport { ITranslation } from \"../../../hooks\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { IQuickFindProps } from \"../interfaces\";\nimport { getQuickFindStyles } from \"./styles\";\n\nexport interface IQuickFindComponentProps {\n    labels: ITranslation<typeof datasetControlTranslations>\n    dataset: IDataset;\n    theme: ITheme;\n    onGetQuickFindComponentProps: (props: IQuickFindProps) => IQuickFindProps;\n}\n\nexport const QuickFind = (props: IQuickFindComponentProps) => {\n    const { dataset, labels, theme } = { ...props };\n    const [query, setQuery] = useState<string>('');\n    const styles = useMemo(() => getQuickFindStyles(), [])\n\n    const quickFindProps = props.onGetQuickFindComponentProps({\n        container: {\n            theme: theme,\n            className: styles.quickFindRoot\n        },\n        textFieldProps: {\n            value: query,\n            styles: {\n                fieldGroup: styles.fieldGroup\n            },\n            placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,\n            onChange: (e, newValue) => setQuery(newValue ?? ''),\n            onKeyUp: (e) => {\n                if (e.key === 'Enter') {\n                    onSearch(query);\n                }\n            },\n            deleteButtonProps: query ? {\n                key: 'delete',\n                iconProps: {\n                    iconName: 'Cancel'\n                },\n                onClick: () => {\n                    setQuery(\"\");\n                    onSearch(undefined);\n                }\n            } : undefined,\n            suffixItems: [{\n                key: 'search',\n                iconProps: {\n                    iconName: 'Search'\n                },\n                onClick: () => onSearch(query)\n            }]\n        }\n    })\n    const onSearch = (query?: string) => {\n        dataset.setSearchQuery?.(query ?? \"\");\n        dataset.refresh();\n    }\n\n    useEffect(() => {\n        setQuery(dataset.getSearchQuery?.() ?? '');\n    }, [dataset.getSearchQuery?.()])\n    //needs to be wrapped within ThemeProvider because the theme context can be lost if we are overriding the header render\n    return <ThemeProvider {...quickFindProps.container}><TextField {...quickFindProps.textFieldProps} /></ThemeProvider>\n}"],"names":["_jsx"],"mappings":";;;;;;AAgBa,MAAA,SAAS,GAAG,CAAC,KAA+B,KAAI;AACzD,IAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;AAC/C,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,kBAAkB,EAAE,EAAE,EAAE,CAAC,CAAA;AAEtD,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,4BAA4B,CAAC;AACtD,QAAA,SAAS,EAAE;AACP,YAAA,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,MAAM,CAAC,aAAa;AAClC,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,MAAM,EAAE;gBACJ,UAAU,EAAE,MAAM,CAAC,UAAU;AAChC,aAAA;AACD,YAAA,WAAW,EAAE,CAAG,EAAA,MAAM,CAAC,MAAM,EAAE,IAAI,OAAO,CAAC,WAAW,EAAE,EAAE,qBAAqB,IAAI,MAAM,CAAC,OAAO,EAAE,CAAK,GAAA,CAAA;AACxG,YAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC;AACnD,YAAA,OAAO,EAAE,CAAC,CAAC,KAAI;AACX,gBAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnB,iBAAA;aACJ;AACD,YAAA,iBAAiB,EAAE,KAAK,GAAG;AACvB,gBAAA,GAAG,EAAE,QAAQ;AACb,gBAAA,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,QAAQ;AACrB,iBAAA;gBACD,OAAO,EAAE,MAAK;oBACV,QAAQ,CAAC,EAAE,CAAC,CAAC;oBACb,QAAQ,CAAC,SAAS,CAAC,CAAC;iBACvB;aACJ,GAAG,SAAS;AACb,YAAA,WAAW,EAAE,CAAC;AACV,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,SAAS,EAAE;AACP,wBAAA,QAAQ,EAAE,QAAQ;AACrB,qBAAA;AACD,oBAAA,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC;iBACjC,CAAC;AACL,SAAA;AACJ,KAAA,CAAC,CAAA;AACF,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAc,KAAI;QAChC,OAAO,CAAC,cAAc,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC;QACtC,OAAO,CAAC,OAAO,EAAE,CAAC;AACtB,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EAAE,CAAC,CAAC;KAC9C,EAAE,CAAC,OAAO,CAAC,cAAc,IAAI,CAAC,CAAC,CAAA;;AAEhC,IAAA,OAAOA,GAAC,CAAA,aAAa,EAAK,EAAA,GAAA,cAAc,CAAC,SAAS,EAAA,QAAA,EAAEA,GAAC,CAAA,SAAS,OAAK,cAAc,CAAC,cAAc,EAAA,CAAI,GAAgB,CAAA;AACxH;;;;"}

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

@@ -0,0 +1,8 @@
+export declare const getQuickFindStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    quickFindRoot: {
+        marginLeft: string;
+    };
+    fieldGroup: {
+        width: number;
+    };
+}>;

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

@@ -0,0 +1,15 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getQuickFindStyles = () => {
+    return mergeStyleSets({
+        quickFindRoot: {
+            marginLeft: 'auto'
+        },
+        fieldGroup: {
+            width: 230
+        }
+    });
+};
+
+export { getQuickFindStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/DatasetControl/QuickFind/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getQuickFindStyles = () => {\n    return mergeStyleSets({\n        quickFindRoot: {\n            marginLeft: 'auto'\n        },\n        fieldGroup: {\n            width: 230\n        }\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,kBAAkB,GAAG,MAAK;AACnC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,aAAa,EAAE;AACX,YAAA,UAAU,EAAE,MAAM;AACrB,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,KAAK,EAAE,GAAG;AACb,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}