@talxis/base-controls 1.2408.15 → 1.2408.17

package/README.md

@@ -1,18 +1,30 @@
-# Building the components locally
+# Running the controls in local PCF harness
 
 1. Run `npm install` inside the root directory.
-1. Run `npm run sandbox`. This will run the sandbox environment located in `src/sandbox`,
-where you can import and test all of the components (the source code for all components is located in `src/components`).
-1. Optionally, you can run `npm run documentation` to view the current documentation for existing components and use it for testing purposes.
+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.
 
-# Testing the components locally in Portal
+# Running the controls in Portal
 
-1. Run `npm i yalc -g` (only needed once)
-1. Navigate to the shared components root directory.
+1. Navigate to the root directory.
+1. Run `npm install`.
 1. Run `npm run build`.
-1. Run `yalc publish`.
-1. Go to the Portal.Web.Frontend directory and run `yalc add @talxis/react-components`. This will replace the NPM package in `package.json` with the locally built version.
-1. Run the Portal.
+1. Run `npm link`.
+1. Go to `Portal.Web.Frontend` directory.
+1. Add the following prop in the `vite.config.mts` file under `defineConfig`:
+
+```typescript
+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.
+
+> **_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
 
-If you want to see the latest changes applied, repeat steps 2 and 3 and run `yalc update` in the `Portal.Web.Frontend` directory.
-**Don't forget to revert the `package.json` file to the original version before pushing any changes to the Portal repo!**

package/dist/components/Duration/Duration.js

@@ -7,13 +7,13 @@ 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';
 
 const Duration = (props) => {
     const parameters = props.parameters;
     const boundValue = parameters.value;
     const componentRef = useRef(null);
     const context = props.context;
-    const humanizeDuration = require("humanize-duration");
     const formattingInfo = context.userSettings;
     //@ts-ignore - locale is part of UserSettings
     const language = formattingInfo.locale;
@@ -86,7 +86,7 @@ const Duration = (props) => {
     const presetOptions = () => {
         const formattedOptions = durationOptions.map(option => ({
             key: option.Value.toString(),
-            text: formatter(parseInt(option.Label)),
+            text: formatter(parseInt(option.Label)) ?? "",
         }));
         return formattedOptions;
     };

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\";\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 humanizeDuration = require(\"humanize-duration\");\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 = 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 { 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":";;;;;;;;;;;AAWa,MAAA,QAAQ,GAAG,CAAC,KAAgB,KAAI;AACzC,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;AACpC,IAAA,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC;AACpC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAY,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;AAC9B,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC;;AAE5C,IAAA,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAM,CAAC;AACvC,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,oBAAoB,CAAC;AAEnE,IAAA,MAAM,SAAS,GAAG,CAAC,KAAoB,KAAI;;AAEvC,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,YAAA,MAAM,sBAAsB,GAAG,KAAK,GAAG,KAAK,CAAC;AAC7C,YAAA,MAAM,KAAK,GAAW,KAAK,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACzE,YAAA,MAAM,OAAO,GAAG;AACZ,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,gBAAgB,EAAE,CAAC;AACnB,gBAAA,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AAClD,gBAAA,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,oBAAoB,CAAC,sBAAsB;gBACzE,SAAS,EAAE,CAAC,IAAI,CAAC;aACpB,CAAC;AACF,YAAA,OAAO,gBAAgB,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;AAC5D,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAC;AAEF,IAAA,MAAM,cAAc,GAAG,CAAC,GAAkB,KAAiC;;;QAGvE,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;QACjD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;QACnD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7C,MAAM,WAAW,GAAG,IAAI,MAAM,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC;QAC7L,MAAM,SAAS,GAAG,IAAI,MAAM,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC;QACnL,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC;AAE9K,QAAA,IAAI,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,EAAE;YACnB,IAAI,KAAK,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;YACrC,IAAI,IAAI,GAAG,QAAQ,CAAC;AAEpB,YAAA,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACzB,gBAAA,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;AACjD,aAAA;AAAM,iBAAA,IAAI,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAC9B,gBAAA,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;gBAC5C,IAAI,GAAG,MAAM,CAAC;AACjB,aAAA;AAAM,iBAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAC7B,gBAAA,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;gBAC3C,IAAI,GAAG,KAAK,CAAC;AAChB,aAAA;AACD,YAAA,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AACxC,YAAA,IAAI,YAAY,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;AACtC,gBAAA,OAAO,oBAAoB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;AACnD,aAAA;AACD,YAAA,OAAO,GAAG,CAAC;AACd,SAAA;AACD,QAAA,OAAO,SAAS,CAAC;AACrB,KAAC,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,CAAC,KAAa,KAAwB;AACtD,QAAA,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAClC,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,IAAI,SAAS,CAAC;AAC/C,KAAC,CAAC;AAEF,IAAA,MAAM,oBAAoB,GAAG,CAAC,KAAa,EAAE,IAAY,KAAY;AACjE,QAAA,QAAQ,IAAI;AACR,YAAA,KAAK,MAAM;gBACP,OAAO,EAAE,GAAG,KAAK,CAAC;AACtB,YAAA,KAAK,KAAK;AACN,gBAAA,OAAO,EAAE,GAAG,KAAK,GAAG,EAAE,CAAC;AAC3B,YAAA,KAAK,QAAQ,CAAC;AACd,YAAA;AACI,gBAAA,OAAO,KAAK,CAAC;AACpB,SAAA;AACL,KAAC,CAAC;IAEF,MAAM,aAAa,GAAG,MAAwB;QAC1C,MAAM,gBAAgB,GAAG,eAAe,CAAC,GAAG,CAAC,MAAM,KAAK;AACpD,YAAA,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;YAC5B,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE;AAChD,SAAA,CAAC,CAAC,CAAC;AACJ,QAAA,OAAO,gBAAgB,CAAC;AAC5B,KAAC,CAAC;AAEF,IAAA,MAAM,eAAe,GAAsB,aAAa,EAAE,CAAC;AAE3D,IAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,oBAAoB,CAA6F,UAAU,EAAE,KAAK,EAAE;AAC1M,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,cAAc,EAAE,cAAc;QAC9B,mBAAmB,EAAE,8BAA8B,EAAE;AACxD,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,UAAU,CAAC,SAAS,EAAE,GAAG,EAAE;AAC3B,YAAA,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;AACrC,SAAA;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,QACIA,IAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,YAC3CA,GAAC,CAAA,QAAQ,EACL,EAAA,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,eAAe,EACxB,gBAAgB,EAAE,CAAC,UAAU,CAAC,gBAAgB,EAAE,GAAG,EACnD,cAAc,EAAE,IAAI,EACpB,YAAY,EAAC,IAAI,EACjB,QAAQ,EAAE,UAAU,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,GAAG;AAC3C,gBAAA,SAAS,EAAE,IAAI;aAClB,GAAG,SAAS,EACb,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EACxC,sBAAsB,EACtB,IAAA,EAAA,YAAY,EAAE,UAAU,CAAC,YAAY,EACrC,IAAI,EAAE,KAAK,IAAI,EAAE,EACjB,MAAM,EAAE;AACJ,gBAAA,IAAI,EAAE;oBACF,MAAM,EAAE,MAAM,CAAC,MAAM;oBACrB,KAAK,EAAE,MAAM,CAAC,KAAK;AACnB,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA;AACD,gBAAA,OAAO,EAAE;AACL,oBAAA,MAAM,EAAE,GAAG;AACd,iBAAA;AACJ,aAAA,EACD,kBAAkB,EAAE,CAAC,IAAI,KAAI;AACzB,gBAAA,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;AACzB,aAAC,EACD,MAAM,EAAE,CAAC,KAAK,KAAI;AACd,gBAAA,qBAAqB,CAAC;;AAElB,oBAAA,KAAK,EAAE,cAAc,CAAC,KAAK,CAAQ;AACtC,iBAAA,CAAC,CAAC;aACN,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;AACnB,gBAAA,qBAAqB,CAAC;;oBAElB,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,IAAI,IAAI,EAAE,CAAQ;AAClD,iBAAA,CAAC,CAAC;aACN,EAAA,CACH,EACc,CAAA,EAClB;AACN;;;;"}

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

@@ -21,7 +21,7 @@ const AgGrid = () => {
     let { agColumns, records, maxNumberOfVisibleRecords, stateRef, getTotalColumnsWidth, onGridReady } = useAgGridController(gridApiRef);
     const pagingController = usePagingController();
     const styles = getGridStyles(theme, maxNumberOfVisibleRecords, grid.useContainerAsHeight);
-    const resizeTimeOutRef = useRef();
+    useRef();
     const getAvailableWidth = () => {
         const rootWrapper = containerRef.current?.querySelector('.ag-root-wrapper');
         return rootWrapper?.clientWidth ?? 0;
@@ -33,37 +33,46 @@ 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();
+        const idIndexMap = new Map<string, number>();
         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);
+            await grid.dataset.addColumn!(col.name, col.alias, col)
         }
-        grid.pcfContext.factory.requestRender();
+        grid.pcfContext.factory.requestRender(); */
     };
     const updateColumnVisualSizeFactor = async (e) => {
-        if (e.source !== 'uiColumnResized') {
+        /* if(e.source !== 'uiColumnResized') {
             return;
         }
         //@ts-ignore - typings
@@ -71,7 +80,7 @@ const AgGrid = () => {
             //column order from Grid currently not supported in Power Apps
             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) {
@@ -82,20 +91,20 @@ const AgGrid = () => {
             grid.pcfContext.factory.fireEvent('__clearColumns');
             for (const { ...col } of columns) {
                 if (col.name === resizedColumnKey) {
-                    col.visualSizeFactor = e.column?.getActualWidth();
+                    col.visualSizeFactor = e.column?.getActualWidth()!
                 }
                 //@ts-ignore - portal accepts metadata
-                await grid.dataset.addColumn(col.name, col.alias, col);
+                await grid.dataset.addColumn!(col.name, col.alias, col);
             }
             grid.pcfContext.factory.requestRender();
-        }, 200);
+        }, 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(e), onColumnMoved: (e) => {
+                                } }) }), jsx(AgGridReact, { animateRows: true, rowSelection: grid.selection.type, noRowsOverlayComponent: EmptyRecords, loadingOverlayComponent: LoadingOverlay, suppressDragLeaveHidesColumns: true, onColumnResized: (e) => updateColumnVisualSizeFactor(), onColumnMoved: (e) => {
                             if (e.finished) {
                                 updateColumnOrder(e);
                             }

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

@@ -1 +1 @@
-{"version":3,"file":"AgGrid.js","sources":["../../../../../../src/components/Grid/core/components/AgGrid/AgGrid.tsx"],"sourcesContent":["import { AgGridReact } from '@ag-grid-community/react';\nimport { MessageBar, MessageBarType, useTheme } from \"@fluentui/react\";\nimport { ColumnMovedEvent, ColumnResizedEvent, GridApi } from \"@ag-grid-community/core\";\nimport { useEffect, useRef } from \"react\";\nimport { useSelectionController } from \"../../../selection/controllers/useSelectionController\";\nimport { useGridInstance } from \"../../hooks/useGridInstance\";\nimport { getGridStyles } from \"./styles\";\nimport React from 'react';\nimport { useAgGridController } from \"./controllers/useAgGridController\";\nimport { Paging } from \"../../../paging/components/Paging/Paging\";\nimport { EmptyRecords } from \"./components/EmptyRecordsOverlay/EmptyRecords\";\nimport { Save } from \"../Save/Save\";\nimport { LoadingOverlay } from \"./components/LoadingOverlay/LoadingOverlay\";\nimport { usePagingController } from '../../../paging/controllers/usePagingController';\nimport { CHECKBOX_COLUMN_KEY } from '../../../constants';\nimport { IEntityRecord } from '../../../interfaces';\n\nexport const AgGrid = () => {\n    const grid = useGridInstance();\n    const selection = useSelectionController();\n    const gridApiRef = useRef<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord>>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const theme = useTheme();\n    let { agColumns, records, maxNumberOfVisibleRecords, stateRef, getTotalColumnsWidth, onGridReady } = useAgGridController(gridApiRef);\n    const pagingController = usePagingController();\n    const styles = getGridStyles(theme, maxNumberOfVisibleRecords, grid.useContainerAsHeight);\n    const resizeTimeOutRef = useRef<NodeJS.Timeout>();\n\n    const getAvailableWidth = () => {\n        const rootWrapper = containerRef.current?.querySelector('.ag-root-wrapper');\n        return rootWrapper?.clientWidth ?? 0;\n    }\n\n    const sizeColumnsIfSpaceAvailable = () => {\n        const availableWidth = getAvailableWidth();\n        if (availableWidth > getTotalColumnsWidth()) {\n            gridApiRef.current!.sizeColumnsToFit();\n        }\n    }\n\n    const updateColumnOrder = async (e: ColumnMovedEvent<IEntityRecord, any>) => {\n        //@ts-ignore - typings\n        if (!window.TALXIS?.Portal) {\n            //column order from Grid currently not supported in Power Apps\n            return;\n        }\n        if(e.type === 'gridOptionsChanged') {\n            return;\n        }\n        const sortedIds = e.api.getState().columnOrder?.orderedColIds;\n        if (!sortedIds) {\n            return;\n        }\n        const idIndexMap = new Map<string, number>();\n        sortedIds.forEach((id, index) => {\n            idIndexMap.set(id, index);\n        });\n\n        const orderedColumns = [...grid.dataset.columns].sort((a, b) => {\n            const aIndex = idIndexMap.has(a.name) ? idIndexMap.get(a.name)! : sortedIds.length;\n            const bIndex = idIndexMap.has(b.name) ? idIndexMap.get(b.name)! : sortedIds.length;\n            return aIndex - bIndex;\n        });\n        //@ts-ignore: typings\n        grid.pcfContext.factory.fireEvent('__clearColumns');\n        for (const col of orderedColumns) {\n            //@ts-ignore - portal accepts metadata\n            await grid.dataset.addColumn!(col.name, col.alias, col)\n        }\n        grid.pcfContext.factory.requestRender();\n    }\n\n    const updateColumnVisualSizeFactor = async (e: ColumnResizedEvent<IEntityRecord, any>): Promise<void> => {\n        if(e.source !== 'uiColumnResized') {\n            return;\n        }\n        //@ts-ignore - typings\n        if (!window.TALXIS?.Portal) {\n            //column order from Grid currently not supported in Power Apps\n            return;\n        }\n        clearTimeout(resizeTimeOutRef.current)\n        resizeTimeOutRef.current = setTimeout(async () => {\n            const resizedColumnKey = grid.dataset.columns.find(x => x.name === e.column?.getId())?.name;\n            if (!resizedColumnKey) {\n                return;\n            }\n            const columns = grid.dataset.columns;\n            //@ts-ignore: typings\n            grid.pcfContext.factory.fireEvent('__clearColumns');\n            for (const { ...col } of columns) {\n                if (col.name === resizedColumnKey) {\n                    col.visualSizeFactor = e.column?.getActualWidth()!\n                }\n                //@ts-ignore - portal accepts metadata\n                await grid.dataset.addColumn!(col.name, col.alias, col);\n            }\n            grid.pcfContext.factory.requestRender();\n        }, 200);\n    }\n    return (\n        <div\n            ref={containerRef}\n            className={`${styles.root} ag-theme-balham`}\n        >\n            {agColumns.length > 0 &&\n                <>\n                    {((grid.isEditable && grid.parameters.ChangeEditorMode?.raw !== 'edit') || grid.parameters.ChangeEditorMode?.raw === 'read') &&\n                        <Save />\n                    }\n                    {grid.error &&\n                        <MessageBar messageBarType={MessageBarType.error}>\n                            <span dangerouslySetInnerHTML={{\n                                __html: grid.errorMessage!\n                            }} />\n                        </MessageBar>\n                    }\n                    <AgGridReact\n                        animateRows\n                        rowSelection={grid.selection.type}\n                        noRowsOverlayComponent={EmptyRecords}\n                        loadingOverlayComponent={LoadingOverlay}\n                        suppressDragLeaveHidesColumns\n                        onColumnResized={(e) => updateColumnVisualSizeFactor(e)}\n                        onColumnMoved={(e) => {\n                            if (e.finished) {\n                                updateColumnOrder(e);\n                            }\n                        }}\n                        reactiveCustomComponents\n                        onRowSelected={(e) => {\n                            //prevent infinite loop since we are also setting the rows\n                            //when the selection comes from above\n                            if (e.source.includes('api') || e.source === 'gridInitializing') {\n                                return;\n                            }\n                            selection.toggle(e.data!, e.node.isSelected()!)\n                        }}\n                        onCellDoubleClicked={(e) => {\n                            if (grid.isNavigationEnabled && !grid.isEditable) {\n                                grid.openDatasetItem(e.data!.getNamedReference())\n                            }\n                        }}\n                        onCellMouseOver={(e) => {\n                            if (e.colDef.colId === '__checkbox') {\n                                gridApiRef.current?.setGridOption('suppressRowClickSelection', true)\n                            }\n                        }}\n                        onCellMouseOut={(e) => {\n                            gridApiRef.current?.setGridOption('suppressRowClickSelection', false)\n                        }}\n                        getRowId={(params) => params.data.getRecordId()}\n                        onGridReady={(e) => {\n                            gridApiRef.current = e.api as any;\n                            if (grid.loading) {\n                                gridApiRef.current?.showLoadingOverlay();\n                            }\n                            sizeColumnsIfSpaceAvailable();\n                            onGridReady();\n                        }}\n                        initialState={stateRef.current}\n                        onStateUpdated={(e) => stateRef.current = {\n                            ...stateRef.current,\n                            ...e.state\n                        }}\n                        rowHeight={42}\n                        columnDefs={agColumns as any}\n                        rowData={records}\n                    >\n                    </AgGridReact>\n                    {pagingController.isEnabled &&\n                        <Paging />\n                    }\n                </>\n            }\n        </div>\n    );\n}"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"AgGrid.js","sources":["../../../../../../src/components/Grid/core/components/AgGrid/AgGrid.tsx"],"sourcesContent":["import { AgGridReact } from '@ag-grid-community/react';\nimport { MessageBar, MessageBarType, useTheme } from \"@fluentui/react\";\nimport { ColumnMovedEvent, ColumnResizedEvent, GridApi } from \"@ag-grid-community/core\";\nimport { useEffect, useRef } from \"react\";\nimport { useSelectionController } from \"../../../selection/controllers/useSelectionController\";\nimport { useGridInstance } from \"../../hooks/useGridInstance\";\nimport { getGridStyles } from \"./styles\";\nimport React from 'react';\nimport { useAgGridController } from \"./controllers/useAgGridController\";\nimport { Paging } from \"../../../paging/components/Paging/Paging\";\nimport { EmptyRecords } from \"./components/EmptyRecordsOverlay/EmptyRecords\";\nimport { Save } from \"../Save/Save\";\nimport { LoadingOverlay } from \"./components/LoadingOverlay/LoadingOverlay\";\nimport { usePagingController } from '../../../paging/controllers/usePagingController';\nimport { CHECKBOX_COLUMN_KEY } from '../../../constants';\nimport { IEntityRecord } from '../../../interfaces';\n\nexport const AgGrid = () => {\n    const grid = useGridInstance();\n    const selection = useSelectionController();\n    const gridApiRef = useRef<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord>>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const theme = useTheme();\n    let { agColumns, records, maxNumberOfVisibleRecords, stateRef, getTotalColumnsWidth, onGridReady } = useAgGridController(gridApiRef);\n    const pagingController = usePagingController();\n    const styles = getGridStyles(theme, maxNumberOfVisibleRecords, grid.useContainerAsHeight);\n    const resizeTimeOutRef = useRef<NodeJS.Timeout>();\n\n    const getAvailableWidth = () => {\n        const rootWrapper = containerRef.current?.querySelector('.ag-root-wrapper');\n        return rootWrapper?.clientWidth ?? 0;\n    }\n\n    const sizeColumnsIfSpaceAvailable = () => {\n        const availableWidth = getAvailableWidth();\n        if (availableWidth > getTotalColumnsWidth()) {\n            gridApiRef.current!.sizeColumnsToFit();\n        }\n    }\n\n    const updateColumnOrder = async (e: ColumnMovedEvent<IEntityRecord, any>) => {\n        const columOrder = e.api.getState().columnOrder?.orderedColIds.filter(colId => {\n            switch(colId) {\n                case CHECKBOX_COLUMN_KEY:\n            }\n            return true;\n        });\n        if(!columOrder) {\n            return;\n        }\n        //@ts-ignore - typings\n        grid.pcfContext.factory.fireEvent('__updateColumnOrder', columOrder)\n        /* //@ts-ignore - typings\n        if (!window.TALXIS?.Portal) {\n            //column order from Grid currently not supported in Power Apps\n            return;\n        }\n        if(e.type === 'gridOptionsChanged') {\n            return;\n        }\n        const sortedIds = e.api.getState().columnOrder?.orderedColIds;\n        if (!sortedIds) {\n            return;\n        }\n        const idIndexMap = new Map<string, number>();\n        sortedIds.forEach((id, index) => {\n            idIndexMap.set(id, index);\n        });\n\n        const orderedColumns = [...grid.dataset.columns].sort((a, b) => {\n            const aIndex = idIndexMap.has(a.name) ? idIndexMap.get(a.name)! : sortedIds.length;\n            const bIndex = idIndexMap.has(b.name) ? idIndexMap.get(b.name)! : sortedIds.length;\n            return aIndex - bIndex;\n        });\n        //@ts-ignore: typings\n        grid.pcfContext.factory.fireEvent('__clearColumns');\n        for (const col of orderedColumns) {\n            //@ts-ignore - portal accepts metadata\n            await grid.dataset.addColumn!(col.name, col.alias, col)\n        }\n        grid.pcfContext.factory.requestRender(); */\n    }\n\n    const updateColumnVisualSizeFactor = async (e: ColumnResizedEvent<IEntityRecord, any>): Promise<void> => {\n        /* if(e.source !== 'uiColumnResized') {\n            return;\n        }\n        //@ts-ignore - typings\n        if (!window.TALXIS?.Portal) {\n            //column order from Grid currently not supported in Power Apps\n            return;\n        }\n        clearTimeout(resizeTimeOutRef.current)\n        resizeTimeOutRef.current = setTimeout(async () => {\n            const resizedColumnKey = grid.dataset.columns.find(x => x.name === e.column?.getId())?.name;\n            if (!resizedColumnKey) {\n                return;\n            }\n            const columns = grid.dataset.columns;\n            //@ts-ignore: typings\n            grid.pcfContext.factory.fireEvent('__clearColumns');\n            for (const { ...col } of columns) {\n                if (col.name === resizedColumnKey) {\n                    col.visualSizeFactor = e.column?.getActualWidth()!\n                }\n                //@ts-ignore - portal accepts metadata\n                await grid.dataset.addColumn!(col.name, col.alias, col);\n            }\n            grid.pcfContext.factory.requestRender();\n        }, 200); */\n    }\n    return (\n        <div\n            ref={containerRef}\n            className={`${styles.root} ag-theme-balham`}\n        >\n            {agColumns.length > 0 &&\n                <>\n                    {((grid.isEditable && grid.parameters.ChangeEditorMode?.raw !== 'edit') || grid.parameters.ChangeEditorMode?.raw === 'read') &&\n                        <Save />\n                    }\n                    {grid.error &&\n                        <MessageBar messageBarType={MessageBarType.error}>\n                            <span dangerouslySetInnerHTML={{\n                                __html: grid.errorMessage!\n                            }} />\n                        </MessageBar>\n                    }\n                    <AgGridReact\n                        animateRows\n                        rowSelection={grid.selection.type}\n                        noRowsOverlayComponent={EmptyRecords}\n                        loadingOverlayComponent={LoadingOverlay}\n                        suppressDragLeaveHidesColumns\n                        onColumnResized={(e) => updateColumnVisualSizeFactor(e)}\n                        onColumnMoved={(e) => {\n                            if (e.finished) {\n                                updateColumnOrder(e);\n                            }\n                        }}\n                        reactiveCustomComponents\n                        onRowSelected={(e) => {\n                            //prevent infinite loop since we are also setting the rows\n                            //when the selection comes from above\n                            if (e.source.includes('api') || e.source === 'gridInitializing') {\n                                return;\n                            }\n                            selection.toggle(e.data!, e.node.isSelected()!)\n                        }}\n                        onCellDoubleClicked={(e) => {\n                            if (grid.isNavigationEnabled && !grid.isEditable) {\n                                grid.openDatasetItem(e.data!.getNamedReference())\n                            }\n                        }}\n                        onCellMouseOver={(e) => {\n                            if (e.colDef.colId === '__checkbox') {\n                                gridApiRef.current?.setGridOption('suppressRowClickSelection', true)\n                            }\n                        }}\n                        onCellMouseOut={(e) => {\n                            gridApiRef.current?.setGridOption('suppressRowClickSelection', false)\n                        }}\n                        getRowId={(params) => params.data.getRecordId()}\n                        onGridReady={(e) => {\n                            gridApiRef.current = e.api as any;\n                            if (grid.loading) {\n                                gridApiRef.current?.showLoadingOverlay();\n                            }\n                            sizeColumnsIfSpaceAvailable();\n                            onGridReady();\n                        }}\n                        initialState={stateRef.current}\n                        onStateUpdated={(e) => stateRef.current = {\n                            ...stateRef.current,\n                            ...e.state\n                        }}\n                        rowHeight={42}\n                        columnDefs={agColumns as any}\n                        rowData={records}\n                    >\n                    </AgGridReact>\n                    {pagingController.isEnabled &&\n                        <Paging />\n                    }\n                </>\n            }\n        </div>\n    );\n}"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talxis/base-controls",
-  "version": "1.2408.15",
+  "version": "1.2408.17",
   "description": "Set of React components that natively work with Power Apps Component Framework API's",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -21,6 +21,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/color": "^3.0.6",
+    "@types/humanize-duration": "^3.27.4",
     "@types/jest": "^27.4.0",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/node": "^17.0.14",
@@ -33,7 +34,6 @@
     "esbuild": "^0.13.9",
     "glob": "^11.0.0",
     "postcss": "^8.3.11",
-    "react-scripts": "^5.0.0",
     "rollup": "^2.58.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^4.0.0",
@@ -48,10 +48,7 @@
   },
   "scripts": {
     "build": "rollup -c",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
     "documentation": "start-storybook -p 6006",
-    "sandbox": "react-scripts start",
     "build-documentation": "build-storybook",
     "lint": "eslint \"./src/**\"",
     "lint:fix": "eslint \"./src/**\" --fix",
@@ -83,7 +80,7 @@
     "@fluentui/react": "^8.119.1",
     "@fluentui/react-migration-v8-v9": "^9.6.20",
     "@talxis/client-libraries": "1.2407.2",
-    "@talxis/react-components": "1.2408.7",
+    "@talxis/react-components": "1.2408.10",
     "color": "^4.2.3",
     "dayjs": "^1.11.10",
     "external-svg-loader": "^1.7.1",