@talxis/base-controls 1.2502.1 → 1.2503.2

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 { 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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"}
+{"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        if(value === initialFormattedValue) {\n            return boundValue.raw as number;\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    const initialFormattedValue = useMemo(() => value, []);\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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { ComboBox } from '@talxis/react-components';
-import { useRef, useEffect } from 'react';
+import { useRef, useMemo, useEffect } from 'react';
 import { useInputBasedControl } from '../../hooks/useInputBasedControl.js';
 import { ThemeProvider } from '@fluentui/react';
 import numeral from 'numeral';
@@ -18,6 +18,7 @@ const Duration = (props) => {
     //@ts-ignore - locale is part of UserSettings
     const language = formattingInfo.locale;
     const numberFormatting = context.userSettings.numberFormattingInfo;
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
     const formatter = (value) => {
         //all duration formatting should happen here
         if (typeof value === 'number') {
@@ -37,6 +38,9 @@ const Duration = (props) => {
     const valueExtractor = (str) => {
         //extraction of number of minutes from formatted string should happen here
         // parsing because labels are string that represent array of strings
+        if (initialFormattedValue === str) {
+            return boundValue.raw;
+        }
         const minuteLabels = JSON.parse(labels.minute());
         const minutesLabels = JSON.parse(labels.minutes());
         const hourLabels = JSON.parse(labels.hour());
@@ -96,36 +100,55 @@ const Duration = (props) => {
         valueExtractor: valueExtractor,
         defaultTranslations: getDefaultDurationTranslations(),
     });
+    const initialFormattedValue = useMemo(() => value, []);
     useEffect(() => {
         if (parameters.AutoFocus?.raw) {
             componentRef.current?.focus(true);
         }
     }, []);
-    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", children: jsx(ComboBox, { componentRef: componentRef, options: comboBoxOptions, hideErrorMessage: !parameters.ShowErrorMessage?.raw, allowFreeInput: true, autoComplete: 'on', autofill: parameters.AutoFocus?.raw === true ? {
-                autoFocus: true
-            } : undefined, readOnly: context.mode.isControlDisabled, useComboBoxAsMenuWidth: true, errorMessage: boundValue.errorMessage, text: value ?? '', styles: {
-                root: {
-                    height: sizing.height,
-                    width: sizing.width,
-                    display: 'flex',
-                    alignItems: 'center',
-                },
-                callout: {
-                    height: 300
-                }
-            }, onInputValueChange: (text) => {
-                setValue(text ?? '');
-            }, onBlur: (event) => {
-                onNotifyOutputChanged({
-                    //any is needed here because we can return string in case of error values
-                    value: valueExtractor(value)
-                });
-            }, onChange: (e, value) => {
-                onNotifyOutputChanged({
-                    //any is needed here because we can return string in case of error values
-                    value: valueExtractor(value?.text ?? '')
-                });
-            } }) }));
+    const componentProps = onOverrideComponentProps({
+        componentRef,
+        options: comboBoxOptions,
+        hideErrorMessage: !parameters.ShowErrorMessage?.raw,
+        allowFreeInput: true,
+        autoComplete: 'on',
+        autofill: parameters.AutoFocus?.raw === true ? { autoFocus: true } : undefined,
+        readOnly: context.mode.isControlDisabled,
+        useComboBoxAsMenuWidth: true,
+        errorMessage: boundValue.errorMessage,
+        text: value ?? '',
+        styles: {
+            root: {
+                height: sizing.height,
+                width: sizing.width,
+                display: 'flex',
+                alignItems: 'center',
+            },
+            callout: {
+                height: 300
+            }
+        },
+        calloutProps: {
+            theme: props.context.fluentDesignLanguage?.applicationTheme ?? theme
+        },
+        onRenderContainer: (containerProps, defaultRender) => jsx(ThemeProvider, { theme: props.context.fluentDesignLanguage?.applicationTheme, children: defaultRender?.(containerProps) }),
+        onInputValueChange: (text) => {
+            setValue(text ?? '');
+        },
+        onBlur: (event) => {
+            onNotifyOutputChanged({
+                //any is needed here because we can return string in case of error values
+                value: valueExtractor(value)
+            });
+        },
+        onChange: (e, value) => {
+            onNotifyOutputChanged({
+                //any is needed here because we can return string in case of error values
+                value: valueExtractor(value?.text ?? '')
+            });
+        }
+    });
+    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", children: jsx(ComboBox, { ...componentProps }) }));
 };
 
 export { Duration };

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 { 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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"}
+{"version":3,"file":"Duration.js","sources":["../../../src/components/Duration/Duration.tsx"],"sourcesContent":["import { ComboBox } from \"@talxis/react-components\";\nimport { useEffect, useMemo, 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    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\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        if(initialFormattedValue === str) {\n            return boundValue.raw as number;\n        }\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    const initialFormattedValue = useMemo(() => value, [])\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    const componentProps = onOverrideComponentProps({\n        componentRef,\n        options: comboBoxOptions,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n\n        allowFreeInput: true,\n        autoComplete: 'on',\n        autofill: parameters.AutoFocus?.raw === true ? { autoFocus: true } : undefined,\n        readOnly: context.mode.isControlDisabled,\n        useComboBoxAsMenuWidth: true,\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        calloutProps: {\n            theme: props.context.fluentDesignLanguage?.applicationTheme ?? theme\n        },\n        onRenderContainer: (containerProps, defaultRender) => <ThemeProvider theme={props.context.fluentDesignLanguage?.applicationTheme}>{defaultRender?.(containerProps)}</ThemeProvider>,\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\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <ComboBox {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Grid/Grid.js

@@ -27,7 +27,7 @@ const Grid = (props) => {
     const theme = useControlTheme(props.context.fluentDesignLanguage);
     useEffect(() => {
         return () => {
-            keyHoldListener.destroy();
+            providerValue.gridInstance.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 { 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    \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;AAEN,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;;;;"}
+{"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 { 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\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\n    providerValue.gridInstance.updateDependencies(props);\n    const theme = useControlTheme(props.context.fluentDesignLanguage);\n\n    useEffect(() => {\n        return () => {\n            providerValue.gridInstance.destroy();\n        }\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    )\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;AAGU,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;AAEN,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;AACR,YAAA,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;AACzC,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;AAEP,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,EAE1B;AACL;;;;"}

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

@@ -1,53 +1,60 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { AgGridReact } from '@ag-grid-community/react';
 import { useTheme, MessageBar, MessageBarType } from '@fluentui/react';
 import { ModuleRegistry } from '@ag-grid-community/core';
-import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
-import { useSelectionController } from '../../../selection/controllers/useSelectionController.js';
+import { useRef, useMemo, useState, useEffect } from 'react';
 import { useGridInstance } from '../../hooks/useGridInstance.js';
 import { getGridStyles } from './styles.js';
 import { Paging } from '../../../paging/components/Paging/Paging.js';
 import { EmptyRecords } from './components/EmptyRecordsOverlay/EmptyRecords.js';
 import { Save } from '../Save/Save.js';
 import { LoadingOverlay } from './components/LoadingOverlay/LoadingOverlay.js';
-import { CHECKBOX_COLUMN_KEY } from '../../../constants.js';
 import { useDebounce, useDebouncedCallback } from 'use-debounce';
 import { useGridController } from '../../controllers/useGridController.js';
-import { useStateValues } from '@talxis/react-components';
+import { useStateValues, useRerender } from '@talxis/react-components';
 import { AgGrid as AgGrid$1 } from './model/AgGrid.js';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import '@ag-grid-community/styles/ag-grid.css';
 import '@ag-grid-community/styles/ag-theme-balham.css';
+import { AgGridContext } from './context.js';
+import { CHECKBOX_COLUMN_KEY } from '../../../constants.js';
 
 ModuleRegistry.registerModules([ClientSideRowModelModule]);
 const AgGrid = () => {
     const grid = useGridInstance();
-    const selection = useSelectionController();
     const gridApiRef = useRef();
     const containerWidthRef = useRef(0);
     const containerRef = useRef(null);
     const theme = useTheme();
-    const styles = getGridStyles(theme, grid.height);
+    const styles = useMemo(() => getGridStyles(theme, grid.height), [theme, grid.height]);
     const agGridReadyRef = useRef(false);
-    const agGrid = useMemo(() => new AgGrid$1(grid, gridApiRef), []);
+    const agGrid = useMemo(() => new AgGrid$1(grid, gridApiRef, theme), []);
+    const agGridProviderValue = useMemo(() => agGrid, []);
     const { columns } = useGridController();
     const [agColumns, setAgColumns] = useState([]);
     const [stateValuesRef, getNewStateValues, setDefaultStateValues] = useStateValues(grid.state);
-    //this is to prevent AgGrid from throwing errors in some rerender edge cases - https://github.com/ag-grid/ag-grid/issues/6013
+    //this is to prevent AgGrid from throwing errors in some rerender edge cases - https://github.com/ag-gid/ag-grid/issues/6013
     const [records] = useDebounce(grid.records, 0);
     const userChangedColumnSizeRef = useRef(false);
+    const rerender = useRerender();
+    const innerRerenderRef = useRef(true);
     const debouncedRefresh = useDebouncedCallback(() => {
-        gridApiRef.current?.refreshCells({
-            rowNodes: gridApiRef.current?.getRenderedNodes(),
-            force: true
-        });
-        grid.refreshGlobalCheckBox();
-        agGrid.selectRows();
+        agGrid.refresh();
     }, 0);
     const debouncedSetAgColumns = useDebouncedCallback(() => {
-        setAgColumns(agGrid.columns);
+        innerRerenderRef.current = true;
+        setAgColumns(agGrid.getColumns());
     }, 0);
-    debouncedRefresh();
+    const debounceUpdateVisualSizeFactor = useDebouncedCallback((e) => {
+        if (e.source !== 'uiColumnResized') {
+            return;
+        }
+        userChangedColumnSizeRef.current = true;
+        agGrid.updateColumnVisualSizeFactor(e);
+    }, 200);
+    if (!innerRerenderRef.current) {
+        debouncedRefresh();
+    }
     const onGridReady = () => {
         agGridReadyRef.current = true;
         setDefaultStateValues({
@@ -57,7 +64,6 @@ const AgGrid = () => {
             },
             ...gridApiRef.current.getState(),
         });
-        agGrid.selectRows();
     };
     const sizeColumnsIfSpaceAvailable = () => {
         //do not autosize if user manually adjusted the column width
@@ -68,179 +74,77 @@ const AgGrid = () => {
             gridApiRef.current.sizeColumnsToFit();
         }
     };
-    const updateColumnOrder = async (e) => {
-        if (e.type === 'gridOptionsChanged') {
-            return;
-        }
-        const sortedIds = e.api.getState().columnOrder?.orderedColIds;
-        if (!sortedIds) {
-            return;
-        }
-        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;
-            return aIndex - bIndex;
-        });
-        grid.dataset.setColumns?.(orderedColumns);
-        grid.pcfContext.factory.requestRender();
-    };
-    const globalClickHandler = useCallback((e) => {
-        const hasAncestorWithClass = (element, className) => {
-            let parent = element;
-            while (!parent.classList.contains('ag-theme-balham')) {
-                if (parent.classList.contains(className)) {
-                    return true;
-                }
-                if (parent.tagName === 'HTML') {
-                    return false;
-                }
-                parent = parent.parentElement;
-                if (!parent) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        try {
-            if (!hasAncestorWithClass(e.target, 'ag-cell')) {
-                gridApiRef.current?.stopEditing();
-            }
-        }
-        catch (err) {
-        }
-    }, []);
-    const copyCellValue = useCallback((event) => {
-        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
-            const cell = gridApiRef.current?.getFocusedCell();
-            if (!cell) {
-                return;
-            }
-            const row = gridApiRef.current?.getDisplayedRowAtIndex(cell.rowIndex);
-            const formattedValue = gridApiRef.current?.getCellValue({
-                rowNode: row,
-                colKey: cell.column.getColId(),
-                useFormatter: true
-            });
-            navigator.clipboard.writeText(formattedValue ?? "");
-        }
-    }, []);
-    const toggleOverlay = () => {
-        if (!gridApiRef.current) {
-            return;
-        }
-        if (grid.loading) {
-            gridApiRef.current.showLoadingOverlay();
-            return;
-        }
-        gridApiRef.current.hideOverlay();
-        setTimeout(() => {
-            if (grid.records.length === 0) {
-                gridApiRef.current?.showNoRowsOverlay();
-            }
-        }, 0);
-    };
     const getCurrentContainerWidth = () => {
         return containerWidthRef.current ?? containerRef.current?.clientWidth;
     };
-    const updateColumnVisualSizeFactor = useDebouncedCallback((e) => {
-        if (e.source !== 'uiColumnResized') {
-            return;
-        }
-        const resizedColumnKey = grid.dataset.columns.find(x => x.name === e.column?.getId())?.name;
-        if (!resizedColumnKey) {
-            return;
-        }
-        const columns = grid.dataset.columns;
-        for (let i = 0; i < columns.length; i++) {
-            if (columns[i].name === resizedColumnKey) {
-                columns[i].visualSizeFactor = e.column?.getActualWidth();
-            }
-        }
-        userChangedColumnSizeRef.current = true;
-        grid.dataset.setColumns?.(columns);
-        gridApiRef.current?.resetRowHeights();
-        grid.pcfContext.factory.requestRender();
-    }, 200);
-    //TODO: find a better way to achieve this
-    useEffect(() => {
-        document.addEventListener('click', globalClickHandler);
-        return () => {
-            document.removeEventListener('click', globalClickHandler);
-        };
-    }, []);
     useEffect(() => {
-        toggleOverlay();
-        if (records.length > 0) {
-            gridApiRef.current?.ensureIndexVisible(0);
-        }
+        agGrid.toggleOverlay();
     }, [grid.loading]);
     useEffect(() => {
         //this can be replaced with native functionality if we decide to use ag grid enterprise
-        grid.keyHoldListener.addOnKeyDownHandler((event) => copyCellValue(event));
+        grid.keyHoldListener.addOnKeyDownHandler((event) => agGrid.copyCellValue(event));
+        agGrid.setRerenderCallback(() => {
+            innerRerenderRef.current = true;
+            rerender();
+        });
         return () => {
             grid.pcfContext.mode.setControlState(getNewStateValues());
         };
     }, []);
-    useEffect(() => {
-        agGrid.selectRows();
-    }, [records]);
     useEffect(() => {
         debouncedSetAgColumns();
     }, [columns]);
     useEffect(() => {
         sizeColumnsIfSpaceAvailable();
     }, [agColumns]);
-    return (jsxs("div", { ref: containerRef, className: `${styles.root} ag-theme-balham`, children: [grid.isEditable && grid.dataset.isDirty?.() &&
-                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: 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);
-                    }
-                }, reactiveCustomComponents: true, onRowSelected: (e) => {
-                    //prevent infinite loop since we are also setting the rows
-                    //when the selection comes from above
-                    if (e.source.includes('api') || e.source === 'gridInitializing') {
-                        return;
-                    }
-                    selection.toggle(e.data, e.node.isSelected());
-                }, onCellDoubleClicked: (e) => {
-                    if (grid.isNavigationEnabled && !grid.isEditable) {
-                        grid.openDatasetItem(e.data.getNamedReference());
-                    }
-                }, onCellMouseOver: (e) => {
-                    if (e.colDef.colId === CHECKBOX_COLUMN_KEY) {
-                        gridApiRef.current?.setGridOption('suppressRowClickSelection', true);
-                    }
-                }, onCellMouseOut: (e) => {
-                    gridApiRef.current?.setGridOption('suppressRowClickSelection', false);
-                }, getRowId: (params) => params.data.getRecordId(), onGridReady: (e) => {
-                    gridApiRef.current = e.api;
-                    if (grid.loading) {
-                        gridApiRef.current?.showLoadingOverlay();
-                    }
-                    onGridReady();
-                }, onGridSizeChanged: (e) => {
-                    containerWidthRef.current = e.clientWidth;
-                    sizeColumnsIfSpaceAvailable();
-                }, onFirstDataRendered: (e) => {
-                    sizeColumnsIfSpaceAvailable();
-                }, initialState: stateValuesRef.current, onStateUpdated: (e) => stateValuesRef.current = {
-                    ...stateValuesRef.current,
-                    ...e.state
-                }, suppressAnimationFrame: true, columnDefs: agColumns, rowData: records, getRowHeight: (params) => {
-                    const columnWidths = {};
-                    params.api.getAllGridColumns().map(col => {
-                        columnWidths[col.getColId()] = col.getActualWidth();
-                    });
-                    return params?.data?.ui?.getHeight(columnWidths, grid.rowHeight);
-                } }), grid.paging.isEnabled &&
-                jsx(Paging, {})] }));
+    innerRerenderRef.current = false;
+    return (jsx(AgGridContext.Provider, { value: agGridProviderValue, children: jsxs("div", { ref: containerRef, className: `${styles.root} ag-theme-balham`, children: [grid.isEditable && grid.dataset.isDirty?.() &&
+                    jsx(Save, {}), grid.error &&
+                    jsx(MessageBar, { messageBarType: MessageBarType.error, children: jsx("span", { dangerouslySetInnerHTML: {
+                                __html: grid.errorMessage
+                            } }) }), jsx(AgGridReact, { animateRows: false, 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) => debounceUpdateVisualSizeFactor(e), onColumnMoved: (e) => agGrid.updateColumnOrder(e), reactiveCustomComponents: true, onSelectionChanged: (e) => {
+                        if (e.source.includes('api')) {
+                            return;
+                        }
+                        const cell = e.api.getFocusedCell();
+                        if (cell.column.getColId() === CHECKBOX_COLUMN_KEY) {
+                            const node = e.api.getSelectedNodes().find(node => node.rowIndex === cell.rowIndex);
+                            grid.selection.toggle(node.id);
+                        }
+                        else {
+                            grid.dataset.setSelectedRecordIds(e.api.getSelectedNodes().map(node => node.data.getRecordId()));
+                        }
+                        agGrid.refreshRowSelection();
+                    }, gridOptions: {
+                        getRowStyle: (params) => {
+                            const theme = params.rowIndex % 2 === 0 ? agGrid.evenRowCellTheme : agGrid.oddRowCellTheme;
+                            return {
+                                backgroundColor: theme.semanticColors.bodyBackground
+                            };
+                        },
+                    }, onCellDoubleClicked: (e) => {
+                        if (grid.isNavigationEnabled && !grid.isEditable) {
+                            grid.dataset.openDatasetItem(e.data.getNamedReference());
+                        }
+                    }, getRowId: (params) => params.data.getRecordId(), onGridReady: (e) => {
+                        gridApiRef.current = e.api;
+                        if (grid.loading) {
+                            gridApiRef.current?.showLoadingOverlay();
+                        }
+                        onGridReady();
+                    }, onGridSizeChanged: (e) => {
+                        containerWidthRef.current = e.clientWidth;
+                        sizeColumnsIfSpaceAvailable();
+                    }, onFirstDataRendered: (e) => {
+                        sizeColumnsIfSpaceAvailable();
+                        agGrid.refreshRowSelection();
+                    }, onCellEditingStopped: () => {
+                        grid.pcfContext.factory.requestRender();
+                    }, initialState: stateValuesRef.current, onStateUpdated: (e) => stateValuesRef.current = {
+                        ...stateValuesRef.current,
+                        ...e.state
+                    }, columnDefs: agColumns, rowData: records, getRowHeight: (params) => agGrid.getRowHeight(params.data) }), grid.paging.isEnabled &&
+                    jsx(Paging, {})] }) }));
 };
 
 export { AgGrid };