@talxis/base-controls 1.2410.3 → 1.2410.4

package/README.md

@@ -1,17 +1,20 @@
-# Running the controls in local PCF harness
+# Running locally build package in PCF
 
 1. Run `npm install` inside the root directory.
-1. Navigate to `examples` folder which contains a PCF wrapper for each Base Control.
-1. Navigate to the desired control folder and run `npm install` again.
-1. Run `npm start watch`. This will open the local PCF harness. If you make any changes in the Base Control being used by the wrapper, it will automatically re-build the PCF and show your changes.
+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`.
 
-# Running the controls in Portal
+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.
 
-1. Navigate to the root directory.
-1. Run `npm install`.
+# Running locally build package in Portal
+
+1. Run `npm install` inside the root directory.
 1. Run `npm run build`.
 1. Run `npm link`.
-1. Go to `Portal.Web.Frontend` directory.
+1. Navigate to the `Portal.Web.Frontend` directory.
 1. Add the following prop in the `vite.config.mts` file under `defineConfig`:
 
 ```typescript
@@ -19,14 +22,20 @@ optimizeDeps: {
     exclude: ['@talxis/base-controls']
 }
 ```
-7. Delete `node_modules`
 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 Base Control package, you need to run `npm run build` in Base Control root directory and Portal will automatically reload with your changes applied.
+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!**
 
-> **_NOTE:_**  If Portal starts to complain that there is a mismatch in React versions, you need to delete the `react` and `react-dom` packages from the `node_modules` folder in Base Controls
+## 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,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useMemo } from 'react';
+import { ThemeProvider } from '@fluentui/react';
+import { TextField } from '@talxis/react-components';
+import { datasetControlTranslations } from './translations.js';
+import { getDatasetControlStyles } from './styles.js';
+import { useRerender } from './hooks/useRerender.js';
+import { Grid } from '../Grid/Grid.js';
+import { useControl } from '../../hooks/useControl.js';
+
+const DatasetControl = (props) => {
+    const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);
+    const [query, setQuery] = useState("");
+    const rerender = useRerender();
+    const dataset = props.parameters.Grid;
+    const injectedContextRef = useRef(props.context);
+    const styles = useMemo(() => getDatasetControlStyles(), []);
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    //@ts-ignore - need to edit the types
+    dataset._setRenderer(() => rerender());
+    //we need to have a way to customize the init behavior from above
+    const componentProps = onOverrideComponentProps({
+        onDatasetInit: () => dataset.refresh()
+    });
+    useMemo(() => {
+        //@ts-ignore - need to edit the types
+        injectedContextRef.current = dataset.injectContext(props.context);
+    }, [props.context]);
+    useMemo(() => {
+        componentProps.onDatasetInit();
+    }, []);
+    const onSearch = (query) => {
+        //@ts-ignore - need to edit the types
+        dataset.setSearchQuery(query);
+        dataset.refresh();
+    };
+    return (jsxs(ThemeProvider, { theme: theme, applyTo: "none", className: styles.root, children: [props.parameters.EnableQuickFind?.raw &&
+                jsx(TextField, { className: styles.quickFind, value: query, 
+                    //@ts-ignore - displaycollectionanem is string
+                    placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`, deleteButtonProps: query ? {
+                        key: 'delete',
+                        iconProps: {
+                            iconName: 'Cancel'
+                        },
+                        onClick: () => {
+                            setQuery("");
+                            onSearch(undefined);
+                        }
+                    } : undefined, suffixItems: [{
+                            key: 'search',
+                            iconProps: {
+                                iconName: 'Search'
+                            },
+                            onClick: () => onSearch(query)
+                        }], onKeyUp: (e) => {
+                        if (e.key === 'Enter') {
+                            onSearch(query);
+                        }
+                    }, onChange: (e, newValue) => setQuery(newValue) }), jsx(Grid, { ...props, context: injectedContextRef.current })] }));
+};
+
+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, useState } from \"react\";\nimport { Grid } from \"../Grid\";\nimport { useControl } from \"../../hooks\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { TextField } from \"@talxis/react-components\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { useRerender } from \"./hooks/useRerender\";\n\nexport const DatasetControl = (props: IDatasetControl) => {\n    const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n    const [query, setQuery] = useState<string | undefined>(\"\");\n    const rerender = useRerender();\n    const dataset = props.parameters.Grid;\n    const injectedContextRef = useRef(props.context);\n    const styles = useMemo(() => getDatasetControlStyles(), []);\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    //@ts-ignore - need to edit the types\n    dataset._setRenderer(() => rerender());\n\n    //we need to have a way to customize the init behavior from above\n    const componentProps = onOverrideComponentProps({\n        onDatasetInit: () => dataset.refresh()\n    })\n\n    useMemo(() => {\n        //@ts-ignore - need to edit the types\n        injectedContextRef.current = dataset.injectContext(props.context);\n    }, [props.context]);\n\n    useMemo(() => {\n        componentProps.onDatasetInit();\n    }, []);\n\n    const onSearch = (query?: string) => {\n        //@ts-ignore - need to edit the types\n        dataset.setSearchQuery(query);\n        dataset.refresh();\n    }\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\" className={styles.root}>\n            {props.parameters.EnableQuickFind?.raw &&\n                <TextField\n                    className={styles.quickFind}\n                    value={query}\n                    //@ts-ignore - displaycollectionanem is string\n                    placeholder={`${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`}\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                    onKeyUp={(e) => {\n                        if (e.key === 'Enter') {\n                            onSearch(query);\n                        }\n                    }}\n                    onChange={(e, newValue) => setQuery(newValue)} />\n            }\n            <Grid {...props} context={injectedContextRef.current} />\n        </ThemeProvider>\n    )\n}"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export declare const useRerender: () => () => void;

package/dist/components/DatasetControl/hooks/useRerender.js

@@ -0,0 +1,9 @@
+import { useState } from 'react';
+
+const useRerender = () => {
+    const [_, toggle] = useState(false);
+    return () => toggle(!_);
+};
+
+export { useRerender };
+//# sourceMappingURL=useRerender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useRerender.js","sources":["../../../../src/components/DatasetControl/hooks/useRerender.ts"],"sourcesContent":["import { useState } from \"react\"\n\nexport const useRerender = () => {\n    const [_, toggle] = useState<boolean>(false);\n\n    return () => toggle(!_);\n}"],"names":[],"mappings":";;AAEO,MAAM,WAAW,GAAG,MAAK;IAC5B,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE7C,OAAO,MAAM,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAC5B;;;;"}

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

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

package/dist/components/DatasetControl/index.js

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

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

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

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

@@ -0,0 +1,10 @@
+import { ITranslation } from "../../hooks";
+import { IControl, ITwoOptionsProperty } from "../../interfaces";
+import { IGridOutputs, IGridParameters } from "../Grid";
+import { gridTranslations } from "../Grid/translations";
+import { datasetControlTranslations } from "./translations";
+export interface IDatasetControl extends IControl<IGridParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, any & {
+    onDatasetInit: () => void;
+}> {
+    EnableQuickFind?: Omit<ITwoOptionsProperty, 'attributes'>;
+}

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

@@ -0,0 +1,8 @@
+export declare const getDatasetControlStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        display: string;
+        flexDirection: string;
+        gap: number;
+    };
+    quickFind: {};
+}>;

package/dist/components/DatasetControl/styles.js

@@ -0,0 +1,17 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getDatasetControlStyles = () => {
+    return mergeStyleSets({
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 15
+        },
+        quickFind: {
+        //alignSelf: 'flex-end'
+        }
+    });
+};
+
+export { getDatasetControlStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/DatasetControl/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getDatasetControlStyles = () => {\n    return mergeStyleSets({\n        root: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 15\n        },\n        quickFind: {\n            //alignSelf: 'flex-end'\n        }\n    });\n}"],"names":[],"mappings":";;AAEO,MAAM,uBAAuB,GAAG,MAAK;AACxC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,SAAS,EAAE;;AAEV,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}

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

@@ -0,0 +1,10 @@
+export declare const datasetControlTranslations: {
+    search: {
+        1029: string;
+        1033: string;
+    };
+    records: {
+        1029: string;
+        1033: string;
+    };
+};

package/dist/components/DatasetControl/translations.js

@@ -0,0 +1,7 @@
+const datasetControlTranslations = {
+    "search": { 1029: "Vyhledat", 1033: "Search" },
+    "records": { 1029: "záznamy", 1033: "records" }
+};
+
+export { datasetControlTranslations };
+//# sourceMappingURL=translations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sources":["../../../src/components/DatasetControl/translations.ts"],"sourcesContent":["export const datasetControlTranslations = {\n    \"search\": { 1029: \"Vyhledat\", 1033: \"Search\" },\n    \"records\": { 1029: \"záznamy\", 1033: \"records\" }\n};\n   \n"],"names":[],"mappings":"AAAa,MAAA,0BAA0B,GAAG;IACtC,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE;IAC9C,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;;;;;"}

package/dist/components/Decimal/Decimal.js

@@ -3,10 +3,10 @@ import { TextField } from '@talxis/react-components';
 import { useInputBasedControl } from '../../hooks/useInputBasedControl.js';
 import { useRef, useEffect, useMemo } from 'react';
 import numeral from 'numeral';
-import { Numeral } from '../../utils/Numeral.js';
 import { CURRENCY_POSITIVE_PATTERN, CURRENCY_NEGATIVE_PATTERN, NUMBER_NEGATIVE_PATTERN } from '../../constants.js';
 import { ThemeProvider } from '@fluentui/react';
 import { ArrowButtons } from './components/ArrowButtons.js';
+import { Numeral } from '@talxis/client-libraries';
 
 const Decimal = (props) => {
     const arrowButtonsRef = useRef(null);

package/dist/components/Decimal/Decimal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Decimal.js","sources":["../../../src/components/Decimal/Decimal.tsx"],"sourcesContent":["import { TextField } from \"@talxis/react-components\";\nimport { useInputBasedControl } from \"../../hooks/useInputBasedControl\";\nimport { IDecimal, IDecimalOutputs, IDecimalParameters } from \"./interfaces\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport numeral from \"numeral\";\nimport { Numeral } from \"../../utils/Numeral\";\nimport { CURRENCY_NEGATIVE_PATTERN, CURRENCY_POSITIVE_PATTERN, NUMBER_NEGATIVE_PATTERN } from \"../../constants\";\nimport { ICommandBarItemProps, ThemeProvider } from \"@fluentui/react\";\nimport { ArrowButtons, IArrowButtons } from \"./components/ArrowButtons\";\n\nexport const Decimal = (props: IDecimal) => {\n    const arrowButtonsRef = useRef<IArrowButtons>(null);\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const numberFormatting = context.userSettings.numberFormattingInfo;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n    const formatter = (value: string | number | null): string | undefined | null => {\n        if (typeof value === 'number') {\n            if (props.parameters.value.type === 'Decimal') {\n                return context.formatting.formatDecimal(value, boundValue.attributes?.Precision);\n            }\n            if (props.parameters.value.type === 'Currency') {\n                //the layer above has information about the symbol, so we can use the formatted string\n                if (props.parameters.value.formatted) {\n                    return props.parameters.value.formatted;\n                }\n                return context.formatting.formatCurrency(value, boundValue.attributes?.Precision);\n            }\n            return context.formatting.formatInteger(value);\n        }\n        return value;\n    };\n\n    const createNumberPattern = (pattern: string, numberPattern: string) => {\n        return new RegExp(`^${escapeRegExp(pattern).replace('n', numberPattern)}$`.replace(/\\s/g, ''));\n    };\n\n    const createCurrencyPattern = (pattern: string, numberPattern: string) => {\n        const escapedPattern = escapeRegExp(pattern);\n        const escapedCurrencySymbolPattern = `(${escapeRegExp(numberFormatting.currencySymbol)})?`;\n        const finalPattern = escapedPattern.replace('\\\\$', escapedCurrencySymbolPattern).replace('n', numberPattern);\n        return new RegExp(`^${finalPattern.replace(/\\s/g, '')}$`);\n    };\n\n    const escapeRegExp = (string: string) => {\n        return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n    };\n\n    const extractNumericPart = (value: any): number | undefined => {\n        // Currency control just sends the string up and lets the framework decide whether the value is correct\n        // It only tries to parse the number based on the current user format\n        // This means that the value will also pass if the user inputs his own currency even though\n        // the currency is different on the field\n        if (typeof value === 'number') {\n            return value\n        }\n        const str = value?.replace(/\\s/g, '');\n        Numeral.decimal(numberFormatting);\n        let positivePattern: any;\n        let negativePattern: any;\n\n        switch (props.parameters.value.type) {\n            case 'Whole.None': {\n                const numberPattern = `\\\\d{1,}(${numberFormatting.numberGroupSeparator}\\\\d{1,})*`;\n                positivePattern = createNumberPattern('n', numberPattern);\n                negativePattern = createNumberPattern(NUMBER_NEGATIVE_PATTERN[numberFormatting.numberNegativePattern], numberPattern);\n                break;\n            }\n            case 'Decimal': {\n                const numberPattern = `\\\\d{1,}(${numberFormatting.numberGroupSeparator}\\\\d{1,})*(\\\\${numberFormatting.numberDecimalSeparator}\\\\d+)?`;\n                positivePattern = createNumberPattern('n', numberPattern);\n                negativePattern = createNumberPattern(NUMBER_NEGATIVE_PATTERN[numberFormatting.numberNegativePattern], numberPattern);\n                break;\n            }\n            case 'Currency': {\n                Numeral.currency(numberFormatting);\n                const numberPattern = `\\\\d{1,}(${numberFormatting.currencyGroupSeparator}\\\\d{1,})*(\\\\${numberFormatting.currencyDecimalSeparator}\\\\d+)?`;\n                positivePattern = createCurrencyPattern(CURRENCY_POSITIVE_PATTERN[numberFormatting.currencyPositivePattern], numberPattern);\n                negativePattern = createCurrencyPattern(CURRENCY_NEGATIVE_PATTERN[numberFormatting.currencyNegativePattern], numberPattern);\n                break;\n            }\n        }\n        if (positivePattern.test(str)) {\n            return numeral(str).value() ?? undefined;\n        }\n        if (negativePattern.test(str)) {\n            const value = numeral(str).value()!;\n            if (value > 0) {\n                return value * -1;\n            }\n            return value;\n        }\n        return value;\n    };\n\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, IDecimalParameters, IDecimalOutputs, any>('Decimal', props, {\n        formatter: formatter,\n        valueExtractor: extractNumericPart\n    });\n\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (context.mode.isControlDisabled || !parameters.EnableSpinButton?.raw) {\n            return undefined;\n        }\n        return [\n            {\n                key: 'arrows',\n                onRender: () => <ArrowButtons\n                    ref={arrowButtonsRef}\n                    onDecrement={() => makeStep('decrement')}\n                    onIncrement={() => makeStep('increment')} />\n            }\n        ]\n    }\n\n    const makeStep = (type: 'increment' | 'decrement') => {\n        const value = boundValue.raw ?? 0;\n        if (typeof value !== 'number') {\n            return;\n        }\n        const precision = Math.pow(10, boundValue.attributes?.Precision ?? 0);\n        const adjustment = type === 'increment' ? 1 : -1;\n        const newValue = parseFloat(((value) + adjustment / precision).toFixed(boundValue.attributes?.Precision ?? 0));\n        onNotifyOutputChanged({ value: newValue });\n\n    }\n\n    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (context.mode.isControlDisabled) {\n            return;\n        }\n        switch (e.key) {\n            case 'ArrowDown': {\n                e.preventDefault();\n                makeStep('decrement');\n                arrowButtonsRef.current?.setActiveBtn('down');\n                break;\n            }\n            case 'ArrowUp': {\n                e.preventDefault();\n                makeStep('increment');\n                arrowButtonsRef.current?.setActiveBtn('up');\n                break;\n            }\n        }\n    }\n\n    const getInputMode = () => {\n        switch (props.parameters.value.type) {\n            case 'Whole.None': {\n                return 'numeric';\n            }\n            case 'Decimal':\n            case 'Currency': {\n                return 'decimal';\n            }\n        }\n    }\n    useEffect(() => {\n        if (boundValue.type === 'Currency') {\n            setValue(boundValue.formatted);\n        }\n    }, [boundValue.formatted]);\n\n    const componentProps = onOverrideComponentProps({\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        readOnly: context.mode.isControlDisabled,\n        inputMode: useMemo(() => getInputMode(), [props.parameters.value.type]),\n        suffixItems: getSuffixItems(),\n        autoFocus: parameters.AutoFocus?.raw,\n        errorMessage: boundValue.errorMessage,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true\n            ? {\n                key: \"delete\",\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: \"Cancel\",\n                },\n                onClick: () => setValue(undefined),\n            }\n            : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true\n            ? {\n                key: \"copy\",\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: \"Copy\",\n                },\n            }\n            : undefined,\n        value: value ?? \"\",\n        onBlur: (event) => {\n            onNotifyOutputChanged({\n                value: extractNumericPart(event.target.value)\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        },\n        onKeyDown: onKeyDown,\n    });\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <TextField {...componentProps} />\n        </ThemeProvider>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Decimal.js","sources":["../../../src/components/Decimal/Decimal.tsx"],"sourcesContent":["import { TextField } from \"@talxis/react-components\";\nimport { useInputBasedControl } from \"../../hooks/useInputBasedControl\";\nimport { IDecimal, IDecimalOutputs, IDecimalParameters } from \"./interfaces\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport numeral from \"numeral\";\nimport { CURRENCY_NEGATIVE_PATTERN, CURRENCY_POSITIVE_PATTERN, NUMBER_NEGATIVE_PATTERN } from \"../../constants\";\nimport { ICommandBarItemProps, ThemeProvider } from \"@fluentui/react\";\nimport { ArrowButtons, IArrowButtons } from \"./components/ArrowButtons\";\nimport { Numeral } from \"@talxis/client-libraries\";\n\nexport const Decimal = (props: IDecimal) => {\n    const arrowButtonsRef = useRef<IArrowButtons>(null);\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const numberFormatting = context.userSettings.numberFormattingInfo;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n    const formatter = (value: string | number | null): string | undefined | null => {\n        if (typeof value === 'number') {\n            if (props.parameters.value.type === 'Decimal') {\n                return context.formatting.formatDecimal(value, boundValue.attributes?.Precision);\n            }\n            if (props.parameters.value.type === 'Currency') {\n                //the layer above has information about the symbol, so we can use the formatted string\n                if (props.parameters.value.formatted) {\n                    return props.parameters.value.formatted;\n                }\n                return context.formatting.formatCurrency(value, boundValue.attributes?.Precision);\n            }\n            return context.formatting.formatInteger(value);\n        }\n        return value;\n    };\n\n    const createNumberPattern = (pattern: string, numberPattern: string) => {\n        return new RegExp(`^${escapeRegExp(pattern).replace('n', numberPattern)}$`.replace(/\\s/g, ''));\n    };\n\n    const createCurrencyPattern = (pattern: string, numberPattern: string) => {\n        const escapedPattern = escapeRegExp(pattern);\n        const escapedCurrencySymbolPattern = `(${escapeRegExp(numberFormatting.currencySymbol)})?`;\n        const finalPattern = escapedPattern.replace('\\\\$', escapedCurrencySymbolPattern).replace('n', numberPattern);\n        return new RegExp(`^${finalPattern.replace(/\\s/g, '')}$`);\n    };\n\n    const escapeRegExp = (string: string) => {\n        return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n    };\n\n    const extractNumericPart = (value: any): number | undefined => {\n        // Currency control just sends the string up and lets the framework decide whether the value is correct\n        // It only tries to parse the number based on the current user format\n        // This means that the value will also pass if the user inputs his own currency even though\n        // the currency is different on the field\n        if (typeof value === 'number') {\n            return value\n        }\n        const str = value?.replace(/\\s/g, '');\n        Numeral.decimal(numberFormatting);\n        let positivePattern: any;\n        let negativePattern: any;\n\n        switch (props.parameters.value.type) {\n            case 'Whole.None': {\n                const numberPattern = `\\\\d{1,}(${numberFormatting.numberGroupSeparator}\\\\d{1,})*`;\n                positivePattern = createNumberPattern('n', numberPattern);\n                negativePattern = createNumberPattern(NUMBER_NEGATIVE_PATTERN[numberFormatting.numberNegativePattern], numberPattern);\n                break;\n            }\n            case 'Decimal': {\n                const numberPattern = `\\\\d{1,}(${numberFormatting.numberGroupSeparator}\\\\d{1,})*(\\\\${numberFormatting.numberDecimalSeparator}\\\\d+)?`;\n                positivePattern = createNumberPattern('n', numberPattern);\n                negativePattern = createNumberPattern(NUMBER_NEGATIVE_PATTERN[numberFormatting.numberNegativePattern], numberPattern);\n                break;\n            }\n            case 'Currency': {\n                Numeral.currency(numberFormatting);\n                const numberPattern = `\\\\d{1,}(${numberFormatting.currencyGroupSeparator}\\\\d{1,})*(\\\\${numberFormatting.currencyDecimalSeparator}\\\\d+)?`;\n                positivePattern = createCurrencyPattern(CURRENCY_POSITIVE_PATTERN[numberFormatting.currencyPositivePattern], numberPattern);\n                negativePattern = createCurrencyPattern(CURRENCY_NEGATIVE_PATTERN[numberFormatting.currencyNegativePattern], numberPattern);\n                break;\n            }\n        }\n        if (positivePattern.test(str)) {\n            return numeral(str).value() ?? undefined;\n        }\n        if (negativePattern.test(str)) {\n            const value = numeral(str).value()!;\n            if (value > 0) {\n                return value * -1;\n            }\n            return value;\n        }\n        return value;\n    };\n\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, IDecimalParameters, IDecimalOutputs, any>('Decimal', props, {\n        formatter: formatter,\n        valueExtractor: extractNumericPart\n    });\n\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (context.mode.isControlDisabled || !parameters.EnableSpinButton?.raw) {\n            return undefined;\n        }\n        return [\n            {\n                key: 'arrows',\n                onRender: () => <ArrowButtons\n                    ref={arrowButtonsRef}\n                    onDecrement={() => makeStep('decrement')}\n                    onIncrement={() => makeStep('increment')} />\n            }\n        ]\n    }\n\n    const makeStep = (type: 'increment' | 'decrement') => {\n        const value = boundValue.raw ?? 0;\n        if (typeof value !== 'number') {\n            return;\n        }\n        const precision = Math.pow(10, boundValue.attributes?.Precision ?? 0);\n        const adjustment = type === 'increment' ? 1 : -1;\n        const newValue = parseFloat(((value) + adjustment / precision).toFixed(boundValue.attributes?.Precision ?? 0));\n        onNotifyOutputChanged({ value: newValue });\n\n    }\n\n    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (context.mode.isControlDisabled) {\n            return;\n        }\n        switch (e.key) {\n            case 'ArrowDown': {\n                e.preventDefault();\n                makeStep('decrement');\n                arrowButtonsRef.current?.setActiveBtn('down');\n                break;\n            }\n            case 'ArrowUp': {\n                e.preventDefault();\n                makeStep('increment');\n                arrowButtonsRef.current?.setActiveBtn('up');\n                break;\n            }\n        }\n    }\n\n    const getInputMode = () => {\n        switch (props.parameters.value.type) {\n            case 'Whole.None': {\n                return 'numeric';\n            }\n            case 'Decimal':\n            case 'Currency': {\n                return 'decimal';\n            }\n        }\n    }\n    useEffect(() => {\n        if (boundValue.type === 'Currency') {\n            setValue(boundValue.formatted);\n        }\n    }, [boundValue.formatted]);\n\n    const componentProps = onOverrideComponentProps({\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        readOnly: context.mode.isControlDisabled,\n        inputMode: useMemo(() => getInputMode(), [props.parameters.value.type]),\n        suffixItems: getSuffixItems(),\n        autoFocus: parameters.AutoFocus?.raw,\n        errorMessage: boundValue.errorMessage,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true\n            ? {\n                key: \"delete\",\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: \"Cancel\",\n                },\n                onClick: () => setValue(undefined),\n            }\n            : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true\n            ? {\n                key: \"copy\",\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: \"Copy\",\n                },\n            }\n            : undefined,\n        value: value ?? \"\",\n        onBlur: (event) => {\n            onNotifyOutputChanged({\n                value: extractNumericPart(event.target.value)\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        },\n        onKeyDown: onKeyDown,\n    });\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <TextField {...componentProps} />\n        </ThemeProvider>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Duration/Duration.js

@@ -4,10 +4,10 @@ import { useRef, useEffect } from 'react';
 import { useInputBasedControl } from '../../hooks/useInputBasedControl.js';
 import { ThemeProvider } from '@fluentui/react';
 import numeral from 'numeral';
-import { Numeral } from '../../utils/Numeral.js';
 import { getDefaultDurationTranslations } from './translations.js';
 import { durationOptions } from './durationOptions.js';
 import humanizeDuration from 'humanize-duration';
+import { Numeral } from '@talxis/client-libraries';
 
 const Duration = (props) => {
     const parameters = props.parameters;

package/dist/components/Duration/Duration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duration.js","sources":["../../../src/components/Duration/Duration.tsx"],"sourcesContent":["import { ComboBox } from \"@talxis/react-components\";\nimport React, { useEffect, useRef } from 'react';\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { IDuration, IDurationOutputs, IDurationParameters } from './interfaces';\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport numeral from \"numeral\";\nimport { Numeral } from '../../utils/Numeral';\nimport { getDefaultDurationTranslations } from './translations';\nimport { durationOptions } from \"./durationOptions\";\nimport humanizeDuration, { Unit } from \"humanize-duration\";\n\nexport const Duration = (props: IDuration) => {\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const componentRef = useRef<IComboBox>(null);\n    const context = props.context;\n    const formattingInfo = context.userSettings;\n    //@ts-ignore - locale is part of UserSettings\n    const language = formattingInfo.locale;\n    const numberFormatting = context.userSettings.numberFormattingInfo;\n\n    const formatter = (value: number | null) => {\n        //all duration formatting should happen here\n        if (typeof value === 'number') {\n            const durationInMilliseconds = value * 60000;\n            const units: Unit[] = value < 60 ? ['m'] : value >= 1440 ? ['d'] : ['h'];\n            const options = {\n                units: units,\n                maxDecimalPoints: 2,\n                language: language.slice(0, language.indexOf(\"-\")),\n                decimal: context.userSettings.numberFormattingInfo.numberDecimalSeparator,\n                fallbacks: [\"en\"]\n            };\n            return humanizeDuration(durationInMilliseconds, options);\n        }\n        return value;\n    };\n\n    const valueExtractor = (str: string | null): number | undefined | string => {\n        //extraction of number of minutes from formatted string should happen here\n        // parsing because labels are string that represent array of strings\n        const minuteLabels = JSON.parse(labels.minute());\n        const minutesLabels = JSON.parse(labels.minutes());\n        const hourLabels = JSON.parse(labels.hour());\n        const hoursLabels = JSON.parse(labels.hours());\n        const dayLabels = JSON.parse(labels.day());\n        const daysLabels = JSON.parse(labels.days());\n        const minuteRegex = new RegExp(\"^(\" + minuteLabels.join('|') + \")\\\\s|\\\\s(\" + minuteLabels.join('|') + \")$|^(\" + minutesLabels.join('|') + \")\\\\s|\\\\s(\" + minutesLabels.join('|') + \")$\", \"i\");\n        const hourRegex = new RegExp(\"^(\" + hourLabels.join('|') + \")\\\\s|\\\\s(\" + hourLabels.join('|') + \")$|^(\" + hoursLabels.join('|') + \")\\\\s|\\\\s(\" + hoursLabels.join('|') + \")$\", \"i\");\n        const dayRegex = new RegExp(\"^(\" + dayLabels.join('|') + \")\\\\s|\\\\s(\" + dayLabels.join('|') + \")$|^(\" + daysLabels.join('|') + \")\\\\s|\\\\s(\" + daysLabels.join('|') + \")$\", \"i\");\n\n        if (str && str.trim()) {\n            let input = str.trim().toLowerCase();\n            let unit = 'minute';\n\n            if (minuteRegex.test(input)) {\n                input = input.replace(minuteRegex, \"\").trim();\n            } else if (hourRegex.test(input)) {\n                input = input.replace(hourRegex, \"\").trim();\n                unit = 'hour';\n            } else if (dayRegex.test(input)) {\n                input = input.replace(dayRegex, \"\").trim();\n                unit = 'day';\n            }\n            const parsedNumber = parseNumber(input);\n            if (parsedNumber && !isNaN(parsedNumber)) {\n                return getDurationInMinutes(parsedNumber, unit);\n            }\n            return str;\n        }\n        return undefined;\n    };\n\n    const parseNumber = (input: string): number | undefined => {\n        Numeral.decimal(numberFormatting);\n        return numeral(input).value() ?? undefined;\n    };\n\n    const getDurationInMinutes = (value: number, unit: string): number => {\n        switch (unit) {\n            case 'hour':\n                return 60 * value;\n            case 'day':\n                return 60 * value * 24;\n            case 'minute':\n            default:\n                return value;\n        }\n    };\n\n    const presetOptions = (): IComboBoxOption[] => {\n        const formattedOptions = durationOptions.map(option => ({\n            key: option.Value.toString(),\n            text: formatter(parseInt(option.Label)) ?? \"\",\n        }));\n        return formattedOptions;\n    };\n\n    const comboBoxOptions: IComboBoxOption[] = presetOptions();\n\n    const { value, labels, sizing, setValue, onNotifyOutputChanged, theme } = useInputBasedControl<string | null, IDurationParameters, IDurationOutputs,  Required<IDuration>['translations']>('Duration', props, {\n        formatter: formatter,\n        valueExtractor: valueExtractor,\n        defaultTranslations: getDefaultDurationTranslations(),\n    });\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n        <ComboBox\n            componentRef={componentRef}\n            options={comboBoxOptions}\n            hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n            allowFreeInput={true}\n            autoComplete='on'\n            autofill={parameters.AutoFocus?.raw === true ? {\n                autoFocus: true\n            } : undefined}\n            readOnly={context.mode.isControlDisabled}\n            useComboBoxAsMenuWidth\n            errorMessage={boundValue.errorMessage}\n            text={value ?? ''}\n            styles={{\n                root: {\n                    height: sizing.height,\n                    width: sizing.width,\n                    display: 'flex',\n                    alignItems: 'center',\n                },\n                callout: {\n                    height: 300\n                }\n            }}\n            onInputValueChange={(text) => {\n                setValue(text ?? '');\n            }}\n            onBlur={(event) => {\n                onNotifyOutputChanged({\n                    //any is needed here because we can return string in case of error values\n                    value: valueExtractor(value) as any\n                });\n            }}\n            onChange={(e, value) => {\n                onNotifyOutputChanged({\n                    //any is needed here because we can return string in case of error values\n                    value: valueExtractor(value?.text ?? '') as any\n                });\n            }}\n        />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Duration.js","sources":["../../../src/components/Duration/Duration.tsx"],"sourcesContent":["import { ComboBox } from \"@talxis/react-components\";\nimport React, { useEffect, useRef } from 'react';\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { IDuration, IDurationOutputs, IDurationParameters } from './interfaces';\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport numeral from \"numeral\";\nimport { getDefaultDurationTranslations } from './translations';\nimport { durationOptions } from \"./durationOptions\";\nimport humanizeDuration, { Unit } from \"humanize-duration\";\nimport { Numeral } from \"@talxis/client-libraries\";\n\nexport const Duration = (props: IDuration) => {\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const componentRef = useRef<IComboBox>(null);\n    const context = props.context;\n    const formattingInfo = context.userSettings;\n    //@ts-ignore - locale is part of UserSettings\n    const language = formattingInfo.locale;\n    const numberFormatting = context.userSettings.numberFormattingInfo;\n\n    const formatter = (value: number | null) => {\n        //all duration formatting should happen here\n        if (typeof value === 'number') {\n            const durationInMilliseconds = value * 60000;\n            const units: Unit[] = value < 60 ? ['m'] : value >= 1440 ? ['d'] : ['h'];\n            const options = {\n                units: units,\n                maxDecimalPoints: 2,\n                language: language.slice(0, language.indexOf(\"-\")),\n                decimal: context.userSettings.numberFormattingInfo.numberDecimalSeparator,\n                fallbacks: [\"en\"]\n            };\n            return humanizeDuration(durationInMilliseconds, options);\n        }\n        return value;\n    };\n\n    const valueExtractor = (str: string | null): number | undefined | string => {\n        //extraction of number of minutes from formatted string should happen here\n        // parsing because labels are string that represent array of strings\n        const minuteLabels = JSON.parse(labels.minute());\n        const minutesLabels = JSON.parse(labels.minutes());\n        const hourLabels = JSON.parse(labels.hour());\n        const hoursLabels = JSON.parse(labels.hours());\n        const dayLabels = JSON.parse(labels.day());\n        const daysLabels = JSON.parse(labels.days());\n        const minuteRegex = new RegExp(\"^(\" + minuteLabels.join('|') + \")\\\\s|\\\\s(\" + minuteLabels.join('|') + \")$|^(\" + minutesLabels.join('|') + \")\\\\s|\\\\s(\" + minutesLabels.join('|') + \")$\", \"i\");\n        const hourRegex = new RegExp(\"^(\" + hourLabels.join('|') + \")\\\\s|\\\\s(\" + hourLabels.join('|') + \")$|^(\" + hoursLabels.join('|') + \")\\\\s|\\\\s(\" + hoursLabels.join('|') + \")$\", \"i\");\n        const dayRegex = new RegExp(\"^(\" + dayLabels.join('|') + \")\\\\s|\\\\s(\" + dayLabels.join('|') + \")$|^(\" + daysLabels.join('|') + \")\\\\s|\\\\s(\" + daysLabels.join('|') + \")$\", \"i\");\n\n        if (str && str.trim()) {\n            let input = str.trim().toLowerCase();\n            let unit = 'minute';\n\n            if (minuteRegex.test(input)) {\n                input = input.replace(minuteRegex, \"\").trim();\n            } else if (hourRegex.test(input)) {\n                input = input.replace(hourRegex, \"\").trim();\n                unit = 'hour';\n            } else if (dayRegex.test(input)) {\n                input = input.replace(dayRegex, \"\").trim();\n                unit = 'day';\n            }\n            const parsedNumber = parseNumber(input);\n            if (parsedNumber && !isNaN(parsedNumber)) {\n                return getDurationInMinutes(parsedNumber, unit);\n            }\n            return str;\n        }\n        return undefined;\n    };\n\n    const parseNumber = (input: string): number | undefined => {\n        Numeral.decimal(numberFormatting);\n        return numeral(input).value() ?? undefined;\n    };\n\n    const getDurationInMinutes = (value: number, unit: string): number => {\n        switch (unit) {\n            case 'hour':\n                return 60 * value;\n            case 'day':\n                return 60 * value * 24;\n            case 'minute':\n            default:\n                return value;\n        }\n    };\n\n    const presetOptions = (): IComboBoxOption[] => {\n        const formattedOptions = durationOptions.map(option => ({\n            key: option.Value.toString(),\n            text: formatter(parseInt(option.Label)) ?? \"\",\n        }));\n        return formattedOptions;\n    };\n\n    const comboBoxOptions: IComboBoxOption[] = presetOptions();\n\n    const { value, labels, sizing, setValue, onNotifyOutputChanged, theme } = useInputBasedControl<string | null, IDurationParameters, IDurationOutputs,  Required<IDuration>['translations']>('Duration', props, {\n        formatter: formatter,\n        valueExtractor: valueExtractor,\n        defaultTranslations: getDefaultDurationTranslations(),\n    });\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n        <ComboBox\n            componentRef={componentRef}\n            options={comboBoxOptions}\n            hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n            allowFreeInput={true}\n            autoComplete='on'\n            autofill={parameters.AutoFocus?.raw === true ? {\n                autoFocus: true\n            } : undefined}\n            readOnly={context.mode.isControlDisabled}\n            useComboBoxAsMenuWidth\n            errorMessage={boundValue.errorMessage}\n            text={value ?? ''}\n            styles={{\n                root: {\n                    height: sizing.height,\n                    width: sizing.width,\n                    display: 'flex',\n                    alignItems: 'center',\n                },\n                callout: {\n                    height: 300\n                }\n            }}\n            onInputValueChange={(text) => {\n                setValue(text ?? '');\n            }}\n            onBlur={(event) => {\n                onNotifyOutputChanged({\n                    //any is needed here because we can return string in case of error values\n                    value: valueExtractor(value) as any\n                });\n            }}\n            onChange={(e, value) => {\n                onNotifyOutputChanged({\n                    //any is needed here because we can return string in case of error values\n                    value: valueExtractor(value?.text ?? '') as any\n                });\n            }}\n        />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Grid/Grid.js

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { Grid as Grid$1 } from './core/model/Grid.js';
 import { AgGrid } from './core/components/AgGrid/AgGrid.js';
 import { gridTranslations } from './translations.js';
 import { GridContext } from './GridContext.js';
 import { mergeStyleSets, ThemeProvider } from '@fluentui/react';
+import { KeyHoldListener } from './core/services/KeyListener.js';
 import { useControlTheme } from '../../hooks/useControlTheme.js';
 import { useControl } from '../../hooks/useControl.js';
 
@@ -16,13 +17,19 @@ const styles = mergeStyleSets({
 });
 const Grid = (props) => {
     const { labels } = useControl('Grid', props, gridTranslations);
+    const keyHoldListener = useMemo(() => new KeyHoldListener(), []);
     const providerValue = useMemo(() => {
         return {
-            gridInstance: new Grid$1(props, labels)
+            gridInstance: new Grid$1(props, labels, keyHoldListener)
         };
     }, []);
     providerValue.gridInstance.updateDependencies(props);
     const theme = useControlTheme(props.context.fluentDesignLanguage);
+    useEffect(() => {
+        return () => {
+            keyHoldListener.destroy();
+        };
+    }, []);
     return (jsx(GridContext.Provider, { value: providerValue, children: jsx(ThemeProvider, { className: `talxis__gridControl ${styles.root}`, theme: theme, applyTo: 'none', children: jsx(AgGrid, {}) }) }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useControl, useControlTheme } from \"../../hooks\"\nimport { IGridContext } from \"./core/interfaces/IGridContext\";\nimport { Grid as GridModel } from \"./core/model/Grid\";\nimport { IGrid } from \"./interfaces\";\nimport { AgGrid } from './core/components/AgGrid/AgGrid';\nimport React from 'react';\nimport { gridTranslations } from './translations';\nimport { GridContext } from \"./GridContext\";\nimport { mergeStyleSets, ThemeProvider } from \"@fluentui/react\";\n\nconst styles = mergeStyleSets({\n    root: {\n        displayName: 'talxis__gridControl',\n        height: '100%'\n    }\n});\n\nexport const Grid = (props: IGrid) => {\n    const { labels } = useControl('Grid', props, gridTranslations);\n    const providerValue: IGridContext = useMemo(() => {\n        return {\n            gridInstance: new GridModel(props, labels)\n        }\n    }, [])\n    providerValue.gridInstance.updateDependencies(props);\n    const theme = useControlTheme(props.context.fluentDesignLanguage);\n    return (\n        <GridContext.Provider value={providerValue}>\n            <ThemeProvider className={`talxis__gridControl ${styles.root}`} theme={theme} applyTo='none'>\n                <AgGrid />\n            </ThemeProvider>\n        </GridContext.Provider>\n    )\n}"],"names":["GridModel","_jsx"],"mappings":";;;;;;;;;;AAWA,MAAM,MAAM,GAAG,cAAc,CAAC;AAC1B,IAAA,IAAI,EAAE;AACF,QAAA,WAAW,EAAE,qBAAqB;AAClC,QAAA,MAAM,EAAE,MAAM;AACjB,KAAA;AACJ,CAAA,CAAC,CAAC;AAEU,MAAA,IAAI,GAAG,CAAC,KAAY,KAAI;AACjC,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC;AAC/D,IAAA,MAAM,aAAa,GAAiB,OAAO,CAAC,MAAK;QAC7C,OAAO;AACH,YAAA,YAAY,EAAE,IAAIA,MAAS,CAAC,KAAK,EAAE,MAAM,CAAC;SAC7C,CAAA;KACJ,EAAE,EAAE,CAAC,CAAA;AACN,IAAA,aAAa,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACrD,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAClE,IAAA,QACIC,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,aAAa,YACtCA,GAAC,CAAA,aAAa,EAAC,EAAA,SAAS,EAAE,CAAuB,oBAAA,EAAA,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,EAAA,QAAA,EACxFA,IAAC,MAAM,EAAA,EAAA,CAAG,EACE,CAAA,EAAA,CACG,EAC1B;AACL;;;;"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useControl, useControlTheme } from \"../../hooks\"\nimport { IGridContext } from \"./core/interfaces/IGridContext\";\nimport { Grid as GridModel } from \"./core/model/Grid\";\nimport { IGrid } from \"./interfaces\";\nimport { AgGrid } from './core/components/AgGrid/AgGrid';\nimport React from 'react';\nimport { gridTranslations } from './translations';\nimport { GridContext } from \"./GridContext\";\nimport { mergeStyleSets, ThemeProvider } from \"@fluentui/react\";\nimport { KeyHoldListener } from \"./core/services/KeyListener\";\n\nconst styles = mergeStyleSets({\n    root: {\n        displayName: 'talxis__gridControl',\n        height: '100%'\n    }\n});\n\nexport const Grid = (props: IGrid) => {\n    const { labels } = useControl('Grid', props, gridTranslations);\n    const keyHoldListener = useMemo(() => new KeyHoldListener(), []);\n    const providerValue: IGridContext = useMemo(() => {\n        return {\n            gridInstance: new GridModel(props, labels, keyHoldListener)\n        }\n    }, [])\n    providerValue.gridInstance.updateDependencies(props);\n    const theme = useControlTheme(props.context.fluentDesignLanguage);\n\n    useEffect(() => {\n        return () => {\n            keyHoldListener.destroy();\n        }\n    }, []);\n    return (\n        <GridContext.Provider value={providerValue}>\n            <ThemeProvider className={`talxis__gridControl ${styles.root}`} theme={theme} applyTo='none'>\n                <AgGrid />\n            </ThemeProvider>\n        </GridContext.Provider>\n    )\n}"],"names":["GridModel","_jsx"],"mappings":";;;;;;;;;;;AAYA,MAAM,MAAM,GAAG,cAAc,CAAC;AAC1B,IAAA,IAAI,EAAE;AACF,QAAA,WAAW,EAAE,qBAAqB;AAClC,QAAA,MAAM,EAAE,MAAM;AACjB,KAAA;AACJ,CAAA,CAAC,CAAC;AAEU,MAAA,IAAI,GAAG,CAAC,KAAY,KAAI;AACjC,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC;AAC/D,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,IAAI,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;AACjE,IAAA,MAAM,aAAa,GAAiB,OAAO,CAAC,MAAK;QAC7C,OAAO;YACH,YAAY,EAAE,IAAIA,MAAS,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC;SAC9D,CAAA;KACJ,EAAE,EAAE,CAAC,CAAA;AACN,IAAA,aAAa,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACrD,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAElE,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;YACR,eAAe,CAAC,OAAO,EAAE,CAAC;AAC9B,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;AACP,IAAA,QACIC,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,aAAa,YACtCA,GAAC,CAAA,aAAa,EAAC,EAAA,SAAS,EAAE,CAAuB,oBAAA,EAAA,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,EAAA,QAAA,EACxFA,IAAC,MAAM,EAAA,EAAA,CAAG,EACE,CAAA,EAAA,CACG,EAC1B;AACL;;;;"}

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

@@ -11,6 +11,7 @@ import { EmptyRecords } from './components/EmptyRecordsOverlay/EmptyRecords.js';
 import { Save } from '../Save/Save.js';
 import { LoadingOverlay } from './components/LoadingOverlay/LoadingOverlay.js';
 import { usePagingController } from '../../../paging/controllers/usePagingController.js';
+import { ROW_HEIGHT } from '../../constants.js';
 
 const AgGrid = () => {
     const grid = useGridInstance();
@@ -18,10 +19,10 @@ const AgGrid = () => {
     const gridApiRef = useRef();
     const containerRef = useRef(null);
     const theme = useTheme();
-    let { agColumns, records, maxNumberOfVisibleRecords, stateRef, getTotalColumnsWidth, onGridReady } = useAgGridController(gridApiRef);
+    let { agColumns, stateRef, getTotalColumnsWidth, onGridReady } = useAgGridController(gridApiRef);
     const pagingController = usePagingController();
-    const styles = getGridStyles(theme, maxNumberOfVisibleRecords, grid.useContainerAsHeight);
-    useRef();
+    const styles = getGridStyles(theme, grid.height);
+    const resizeTimeOutRef = useRef();
     const getAvailableWidth = () => {
         const rootWrapper = containerRef.current?.querySelector('.ag-root-wrapper');
         return rootWrapper?.clientWidth ?? 0;
@@ -33,78 +34,52 @@ const AgGrid = () => {
         }
     };
     const updateColumnOrder = async (e) => {
-        const columOrder = e.api.getState().columnOrder?.orderedColIds.filter(colId => {
-            return true;
-        });
-        if (!columOrder) {
-            return;
-        }
-        //@ts-ignore - typings
-        grid.pcfContext.factory.fireEvent('__updateColumnOrder', columOrder);
-        /* //@ts-ignore - typings
-        if (!window.TALXIS?.Portal) {
-            //column order from Grid currently not supported in Power Apps
-            return;
-        }
-        if(e.type === 'gridOptionsChanged') {
+        if (e.type === 'gridOptionsChanged') {
             return;
         }
         const sortedIds = e.api.getState().columnOrder?.orderedColIds;
         if (!sortedIds) {
             return;
         }
-        const idIndexMap = new Map<string, number>();
+        const idIndexMap = new Map();
         sortedIds.forEach((id, index) => {
             idIndexMap.set(id, index);
         });
-
         const orderedColumns = [...grid.dataset.columns].sort((a, b) => {
-            const aIndex = idIndexMap.has(a.name) ? idIndexMap.get(a.name)! : sortedIds.length;
-            const bIndex = idIndexMap.has(b.name) ? idIndexMap.get(b.name)! : sortedIds.length;
+            const aIndex = idIndexMap.has(a.name) ? idIndexMap.get(a.name) : sortedIds.length;
+            const bIndex = idIndexMap.has(b.name) ? idIndexMap.get(b.name) : sortedIds.length;
             return aIndex - bIndex;
         });
-        //@ts-ignore: typings
-        grid.pcfContext.factory.fireEvent('__clearColumns');
-        for (const col of orderedColumns) {
-            //@ts-ignore - portal accepts metadata
-            await grid.dataset.addColumn!(col.name, col.alias, col)
-        }
-        grid.pcfContext.factory.requestRender(); */
+        //@ts-ignore
+        grid.dataset.setColumns?.(orderedColumns);
+        grid.dataset.paging.loadExactPage(grid.paging.pageNumber);
     };
     const updateColumnVisualSizeFactor = async (e) => {
-        /* if(e.source !== 'uiColumnResized') {
-            return;
-        }
-        //@ts-ignore - typings
-        if (!window.TALXIS?.Portal) {
-            //column order from Grid currently not supported in Power Apps
+        if (e.source !== 'uiColumnResized') {
             return;
         }
-        clearTimeout(resizeTimeOutRef.current)
+        clearTimeout(resizeTimeOutRef.current);
         resizeTimeOutRef.current = setTimeout(async () => {
             const resizedColumnKey = grid.dataset.columns.find(x => x.name === e.column?.getId())?.name;
             if (!resizedColumnKey) {
                 return;
             }
             const columns = grid.dataset.columns;
-            //@ts-ignore: typings
-            grid.pcfContext.factory.fireEvent('__clearColumns');
-            for (const { ...col } of columns) {
-                if (col.name === resizedColumnKey) {
-                    col.visualSizeFactor = e.column?.getActualWidth()!
+            for (let i = 0; i < columns.length; i++) {
+                if (columns[i].name === resizedColumnKey) {
+                    columns[i].visualSizeFactor = e.column?.getActualWidth();
                 }
-                //@ts-ignore - portal accepts metadata
-                await grid.dataset.addColumn!(col.name, col.alias, col);
             }
-            grid.pcfContext.factory.requestRender();
-        }, 200); */
+            //@ts-ignore
+            grid.dataset.setColumns?.(columns);
+        }, 200);
     };
     return (jsx("div", { ref: containerRef, className: `${styles.root} ag-theme-balham`, children: agColumns.length > 0 &&
             jsxs(Fragment, { children: [((grid.isEditable && grid.parameters.ChangeEditorMode?.raw !== 'edit') || grid.parameters.ChangeEditorMode?.raw === 'read') &&
                         jsx(Save, {}), grid.error &&
                         jsx(MessageBar, { messageBarType: MessageBarType.error, children: jsx("span", { dangerouslySetInnerHTML: {
                                     __html: grid.errorMessage
-                                } }) }), jsx(AgGridReact, { animateRows: true, rowSelection: grid.selection.type, noRowsOverlayComponent: EmptyRecords, loadingOverlayComponent: LoadingOverlay, suppressDragLeaveHidesColumns: true, onColumnResized: (e) => updateColumnVisualSizeFactor(), onColumnMoved: (e) => {
+                                } }) }), jsx(AgGridReact, { animateRows: true, rowSelection: grid.selection.type, noRowsOverlayComponent: Object.keys(grid.dataset.sortedRecordIds.length === 0) && !grid.loading ? EmptyRecords : undefined, loadingOverlayComponent: grid.loading ? LoadingOverlay : undefined, suppressDragLeaveHidesColumns: true, onColumnResized: (e) => updateColumnVisualSizeFactor(e), onColumnMoved: (e) => {
                             if (e.finished) {
                                 updateColumnOrder(e);
                             }
@@ -135,7 +110,7 @@ const AgGrid = () => {
                         }, initialState: stateRef.current, onStateUpdated: (e) => stateRef.current = {
                             ...stateRef.current,
                             ...e.state
-                        }, rowHeight: 42, columnDefs: agColumns, rowData: records }), pagingController.isEnabled &&
+                        }, rowHeight: ROW_HEIGHT, columnDefs: agColumns, rowData: grid.records }), pagingController.isEnabled &&
                         jsx(Paging, {})] }) }));
 };