@talxis/base-controls 1.2410.6 → 1.2411.2

package/dist/components/TextField/TextField.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { TextField as TextField$1 } from '@talxis/react-components';
-import { useMemo } from 'react';
 import { useInputBasedControl } from '../../hooks/useInputBasedControl.js';
 import { ThemeProvider } from '@fluentui/react';
+import { DataTypes } from '@talxis/client-libraries';
 
 const TextField = (props) => {
     const context = props.context;
@@ -64,11 +64,20 @@ const TextField = (props) => {
         }
         return undefined;
     };
+    const isTextArea = (() => {
+        switch (parameters.value.type) {
+            case DataTypes.Multiple:
+            case DataTypes.SingleLineTextArea: {
+                return true;
+            }
+        }
+        return false;
+    })();
     const componentProps = onOverrideComponentProps({
         readOnly: context.mode.isControlDisabled,
         resizable: false,
-        type: useMemo(() => getInputType(), [boundValue.type]),
-        multiline: parameters.value.type === 'Multiple',
+        type: getInputType(),
+        multiline: isTextArea,
         autoFocus: parameters.AutoFocus?.raw,
         styles: {
             fieldGroup: {
@@ -78,7 +87,7 @@ const TextField = (props) => {
         },
         errorMessage: boundValue.errorMessage,
         hideErrorMessage: !parameters.ShowErrorMessage?.raw,
-        suffixItems: useMemo(() => getSuffixItems(), [boundValue.raw, boundValue.error, parameters.EnableTypeSuffix?.raw]),
+        suffixItems: getSuffixItems(),
         deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
             key: 'delete',
             showOnlyOnHover: true,
@@ -104,7 +113,7 @@ const TextField = (props) => {
             setValue(value);
         }
     });
-    return (jsx(ThemeProvider, { style: parameters.value.type === 'Multiple' ? { height: '100%' } : undefined, applyTo: "none", theme: theme, children: jsx(TextField$1, { ...componentProps }) }));
+    return (jsx(ThemeProvider, { style: isTextArea ? { height: '100%' } : undefined, applyTo: "none", theme: theme, children: jsx(TextField$1, { ...componentProps }) }));
 };
 
 export { TextField };

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { ITextFieldProps, TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useMemo, useRef } from 'react';\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport React from 'react';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\n\nexport const TextField = (props: ITextField) => {\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n    const getInputType = () => {\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return 'email';\n            }\n            case 'SingleLine.URL': {\n                return 'url';\n            }\n            case 'SingleLine.Phone': {\n                return 'tel';\n            }\n        }\n        return \"text\";\n    }\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (parameters.EnableTypeSuffix?.raw === false) {\n            return undefined;\n        }\n        const disabled = boundValue.error || !boundValue.raw\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return [{\n                    key: 'sendMail',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Mail'\n                    },\n                    href: `mailto:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.Phone': {\n                return [{\n                    key: 'call',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Phone'\n                    },\n                    href: `tel:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.URL': {\n                return [{\n                    key: 'goToPage',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Globe'\n                    },\n                    target: '_blank',\n                    href: boundValue.raw!\n                }]\n            }\n        }\n        return undefined;\n    }\n    const componentProps = onOverrideComponentProps({\n        readOnly: context.mode.isControlDisabled,\n        resizable: false,\n        type: useMemo(() => getInputType(), [boundValue.type]),\n        multiline: parameters.value.type === 'Multiple',\n        autoFocus: parameters.AutoFocus?.raw,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        errorMessage: boundValue.errorMessage,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        suffixItems: useMemo(() => getSuffixItems(), [boundValue.raw, boundValue.error, parameters.EnableTypeSuffix?.raw]),\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: () => setValue(undefined)\n        } : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        value: value ?? \"\",\n        onBlur: () => {\n            onNotifyOutputChanged({\n                value: value ?? undefined\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        }\n    })\n    return (\n        <ThemeProvider style={parameters.value.type === 'Multiple' ? { height: '100%' } : undefined} applyTo=\"none\" theme={theme}>\n            <TextFieldBase {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx","TextFieldBase"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport React from 'react';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\nimport { DataTypes } from \"@talxis/client-libraries\";\n\nexport const TextField = (props: ITextField) => {\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n    const getInputType = () => {\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return 'email';\n            }\n            case 'SingleLine.URL': {\n                return 'url';\n            }\n            case 'SingleLine.Phone': {\n                return 'tel';\n            }\n        }\n        return \"text\";\n    }\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (parameters.EnableTypeSuffix?.raw === false) {\n            return undefined;\n        }\n        const disabled = boundValue.error || !boundValue.raw\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return [{\n                    key: 'sendMail',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Mail'\n                    },\n                    href: `mailto:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.Phone': {\n                return [{\n                    key: 'call',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Phone'\n                    },\n                    href: `tel:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.URL': {\n                return [{\n                    key: 'goToPage',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Globe'\n                    },\n                    target: '_blank',\n                    href: boundValue.raw!\n                }]\n            }\n        }\n        return undefined;\n    }\n\n    const isTextArea = (() => {\n        switch(parameters.value.type) {\n            case DataTypes.Multiple:\n            case DataTypes.SingleLineTextArea: {\n                return true;\n            }\n        }\n        return false;\n    })()\n\n    const componentProps = onOverrideComponentProps({\n        readOnly: context.mode.isControlDisabled,\n        resizable: false,\n        type: getInputType(),\n        multiline: isTextArea,\n        autoFocus: parameters.AutoFocus?.raw,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        errorMessage: boundValue.errorMessage,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        suffixItems: getSuffixItems(),\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: () => setValue(undefined)\n        } : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        value: value ?? \"\",\n        onBlur: () => {\n            onNotifyOutputChanged({\n                value: value ?? undefined\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        }\n    })\n    return (\n        <ThemeProvider style={isTextArea ? { height: '100%' } : undefined} applyTo=\"none\" theme={theme}>\n            <TextFieldBase {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx","TextFieldBase"],"mappings":"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"}

package/dist/hooks/useControl.js

@@ -3,8 +3,8 @@ import { merge } from 'merge-anything';
 import { Liquid } from 'liquidjs';
 import { useControlTheme } from './useControlTheme.js';
 import { useControlSizing } from './useControlSizing.js';
-import equal from 'fast-deep-equal/es6';
 
+const deepEqual = require('fast-deep-equal/es6');
 /**
  * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
  * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.
@@ -56,7 +56,8 @@ const useControl = (name, props, defaultTranslations) => {
         let isDirty = false;
         for (let [key, outputValue] of Object.entries(outputs)) {
             let parameterValue = parametersRef.current[key]?.raw;
-            if (!equal(parameterValue, outputValue)) {
+            //@ts-ignore - types
+            if (!deepEqual(parameterValue, outputValue)) {
                 if (outputValue === null) {
                     outputValue = undefined;
                     //@ts-ignore

package/dist/hooks/useControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { merge } from 'merge-anything';\nimport { Liquid } from \"liquidjs\";\nimport { useControlTheme } from \"./useControlTheme\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\n\nexport type ITranslation<T> = {\n    [Property in keyof Required<T>]: (variables?: any) => string\n};\n\nexport interface IDefaultTranslations {\n    [LCID: number]: string | string[];\n    [key: string]: any;\n}\n\n\nexport interface IControlController<TTranslations, TOutputs> {\n    labels: Required<ITranslation<TTranslations>>,\n    sizing: {\n        width?: number,\n        height?: number\n    },\n    theme: ITheme;\n    onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n    const parametersRef = useRef<TParameters>(props.parameters);\n    const sizing = useControlSizing(props.context.mode);\n    const context = props.context;\n    const liquid = useMemo(() => new Liquid(), []);\n    const labels = useMemo(() => {\n        const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {}) as TTranslations;\n        return new Proxy(mergedTranslations as any, {\n            get(target, key) {\n                return (variables: any) => getLabel(key as string, mergedTranslations, variables)\n            }\n        }) as any;\n    }, []);\n\n    useEffect(() => {\n        parametersRef.current = props.parameters;\n    }, [props.parameters]);\n\n    const getLabel = (key: string, translations: TTranslations, variables?: any): string | string[] => {\n        const strigify = (value: string | string[]) => {\n            if (typeof value === 'string') {\n                return value;\n            }\n            return JSON.stringify(value);\n        };\n        //@ts-ignore\n        const translation = translations[key];\n        if (!translation) {\n            console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);\n            return key;\n        }\n        if (typeof translation === 'string' || Array.isArray(translation)) {\n            return strigify(translation);\n        }\n        let label = translation[props.context.userSettings.languageId];\n        if (!label) {\n            console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);\n            label = translation[1029];\n        }\n        if (!label) {\n            console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);\n            label = key;\n        }\n\n        return liquid.parseAndRenderSync(strigify(label), variables);\n    };\n\n    const onNotifyOutputChanged = (outputs: TOutputs) => {\n        let isDirty = false;\n        for (let [key, outputValue] of Object.entries(outputs)) {\n            let parameterValue = parametersRef.current[key]?.raw;\n            if (!deepEqual(parameterValue, outputValue)) {\n                if (outputValue === null) {\n                    outputValue = undefined;\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (outputValue === \"\") {\n                    outputValue = undefined\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (parameterValue === null) {\n                    parameterValue = undefined;\n                }\n                if (parameterValue === outputValue) {\n                    continue\n                }\n                isDirty = true;\n                break;\n            }\n        }\n        if (!isDirty) {\n            return;\n        }\n        //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n        props.onNotifyOutputChanged?.(outputs);\n    };\n    return {\n        labels,\n        sizing,\n        theme: useControlTheme(context.fluentDesignLanguage),\n        onNotifyOutputChanged\n    }\n};\n"],"names":["deepEqual"],"mappings":"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"}
+{"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { merge } from 'merge-anything';\nimport { Liquid } from \"liquidjs\";\nimport { useControlTheme } from \"./useControlTheme\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { useControlSizing } from \"./useControlSizing\";\n\nconst deepEqual = require('fast-deep-equal/es6')\n\nexport type ITranslation<T> = {\n    [Property in keyof Required<T>]: (variables?: any) => string\n};\n\nexport interface IDefaultTranslations {\n    [LCID: number]: string | string[];\n    [key: string]: any;\n}\n\n\nexport interface IControlController<TTranslations, TOutputs> {\n    labels: Required<ITranslation<TTranslations>>,\n    sizing: {\n        width?: number,\n        height?: number\n    },\n    theme: ITheme;\n    onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n    const parametersRef = useRef<TParameters>(props.parameters);\n    const sizing = useControlSizing(props.context.mode);\n    const context = props.context;\n    const liquid = useMemo(() => new Liquid(), []);\n    const labels = useMemo(() => {\n        const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {}) as TTranslations;\n        return new Proxy(mergedTranslations as any, {\n            get(target, key) {\n                return (variables: any) => getLabel(key as string, mergedTranslations, variables)\n            }\n        }) as any;\n    }, []);\n\n    useEffect(() => {\n        parametersRef.current = props.parameters;\n    }, [props.parameters]);\n\n    const getLabel = (key: string, translations: TTranslations, variables?: any): string | string[] => {\n        const strigify = (value: string | string[]) => {\n            if (typeof value === 'string') {\n                return value;\n            }\n            return JSON.stringify(value);\n        };\n        //@ts-ignore\n        const translation = translations[key];\n        if (!translation) {\n            console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);\n            return key;\n        }\n        if (typeof translation === 'string' || Array.isArray(translation)) {\n            return strigify(translation);\n        }\n        let label = translation[props.context.userSettings.languageId];\n        if (!label) {\n            console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);\n            label = translation[1029];\n        }\n        if (!label) {\n            console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);\n            label = key;\n        }\n\n        return liquid.parseAndRenderSync(strigify(label), variables);\n    };\n\n    const onNotifyOutputChanged = (outputs: TOutputs) => {\n        let isDirty = false;\n        for (let [key, outputValue] of Object.entries(outputs)) {\n            let parameterValue = parametersRef.current[key]?.raw;\n            //@ts-ignore - types\n            if (!deepEqual(parameterValue, outputValue)) {\n                if (outputValue === null) {\n                    outputValue = undefined;\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (outputValue === \"\") {\n                    outputValue = undefined\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (parameterValue === null) {\n                    parameterValue = undefined;\n                }\n                if (parameterValue === outputValue) {\n                    continue\n                }\n                isDirty = true;\n                break;\n            }\n        }\n        if (!isDirty) {\n            return;\n        }\n        //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n        props.onNotifyOutputChanged?.(outputs);\n    };\n    return {\n        labels,\n        sizing,\n        theme: useControlTheme(context.fluentDesignLanguage),\n        onNotifyOutputChanged\n    }\n};\n"],"names":[],"mappings":"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"}

package/dist/hooks/useRerender.js.map

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

package/dist/index.d.ts

@@ -576,6 +576,10 @@ declare const gridTranslations: {
         1029: string;
         1033: string;
     };
+    "saving-clickreview": {
+        1029: string;
+        1033: string;
+    };
     "saving-save": {
         1029: string;
         1033: string;
@@ -592,6 +596,30 @@ declare const gridTranslations: {
         1029: string;
         1033: string;
     };
+    "saving-save-all": {
+        1029: string;
+        1033: string;
+    };
+    "saving-discard-all": {
+        1029: string;
+        1033: string;
+    };
+    "saving-discard": {
+        1029: string;
+        1033: string;
+    };
+    "saving-discard-changes": {
+        1029: string;
+        1033: string;
+    };
+    "saving-save-changes": {
+        1029: string;
+        1033: string;
+    };
+    "saving-discard-all-confirmation": {
+        1029: string;
+        1033: string;
+    };
     "validation-input-value": {
         1029: string;
         1033: string;
@@ -624,6 +652,14 @@ declare const gridTranslations: {
         1029: string;
         1033: string;
     };
+    "original-value": {
+        1029: string;
+        1033: string;
+    };
+    "new-value": {
+        1029: string;
+        1033: string;
+    };
 };
 
 interface IGrid extends IControl<IGridParameters, IGridOutputs, Partial<ITranslation<typeof gridTranslations>>, AgGridReactProps> {
@@ -635,6 +671,9 @@ interface IGridParameters extends IParameters$1 {
     EnableSorting?: Omit<ITwoOptionsProperty, 'attributes'>;
     EnableNavigation?: Omit<ITwoOptionsProperty, 'attributes'>;
     EnableOptionSetColors?: Omit<ITwoOptionsProperty, 'attributes'>;
+    EnableChangeEditor?: Omit<ITwoOptionsProperty, 'attributes'>;
+    EnableMultiEdit?: Omit<ITwoOptionsProperty, 'attributes'>;
+    RowHeight?: Omit<IWholeNumberProperty, 'attributes'>;
     Height?: IStringProperty;
     InlineRibbonButtonIds?: IStringProperty;
     SelectableRows?: Omit<ComponentFramework.PropertyTypes.EnumProperty<"none" | "single" | "multiple">, 'type'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talxis/base-controls",
-  "version": "1.2410.6",
+  "version": "1.2411.2",
   "description": "Set of React components that natively work with Power Apps Component Framework API's",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -70,10 +70,10 @@
     "@ag-grid-community/core": "^31.3.2",
     "@ag-grid-community/react": "^31.3.2",
     "@ag-grid-community/styles": "^31.3.2",
-    "@fluentui/react": "^8.121.6",
+    "@fluentui/react": "<=8.121.5",
     "@fluentui/react-migration-v8-v9": "^9.6.20",
-    "@talxis/client-libraries": "1.2410.8",
-    "@talxis/react-components": "^1.2409.9",
+    "@talxis/client-libraries": "1.2411.1",
+    "@talxis/react-components": "^1.2411.2",
     "color": "^4.2.3",
     "dayjs": "^1.11.10",
     "external-svg-loader": "^1.7.1",

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

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

package/dist/components/Grid/core/components/AgGrid/components/LoadingOverlay/styles.d.ts

@@ -1,44 +0,0 @@
-import { ITheme } from "@fluentui/react";
-export declare const getLoadingOverlayStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
-    root: {
-        borderWidth: string;
-        position: string;
-        border: string;
-        maskImage: string;
-        backgroundColor: string;
-        color: string;
-        width: number;
-        height: number;
-        animationName: string;
-        animationDuration: string;
-        animationIterationCount: string;
-        animationTimingFunction: string;
-    };
-    tail: {
-        position: string;
-        display: string;
-        width: string;
-        height: string;
-        maskImage: string;
-        animationDuration: string;
-        animationIterationCount: string;
-        animationTimingFunction: string;
-        animationName: string;
-        '::after, ::before': {
-            content: string;
-            position: string;
-            display: string;
-            width: string;
-            height: string;
-            animation: string;
-            backgroundImage: string;
-        };
-        '::after': {
-            animationName: string;
-        };
-        '::before': {
-            maskImage: string;
-            animationName: string;
-        };
-    };
-}>;

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

@@ -1,82 +0,0 @@
-import { keyframes, mergeStyleSets } from '@fluentui/react';
-
-const getSpinnerAnimation = (degValue) => {
-    return keyframes({
-        '0%': {
-            transform: 'rotate(0deg)'
-        },
-        '50%': {
-            transform: `rotate(${degValue}deg)`
-        },
-        '100%': {
-            transform: 'rotate(0deg)'
-        }
-    });
-};
-const counterSpinner = keyframes({
-    '0%': {
-        transform: 'rotate(-135deg)'
-    },
-    '50%': {
-        transform: `rotate(0deg)`
-    },
-    '100%': {
-        transform: 'rotate(225deg)'
-    }
-});
-const rotate = keyframes({
-    '0%': {
-        transform: 'rotate(0deg)'
-    },
-    '100%': {
-        transform: 'rotate(360deg)'
-    }
-});
-const getLoadingOverlayStyles = (theme) => {
-    return mergeStyleSets({
-        root: {
-            borderWidth: '3px',
-            position: 'relative',
-            border: 'none',
-            maskImage: 'radial-gradient(closest-side, transparent calc(100% - 3px), white calc(100% - 3px) calc(100% - 1px), transparent 100%)',
-            backgroundColor: theme.palette.themeLighter,
-            color: theme.palette.themePrimary,
-            width: 36,
-            height: 36,
-            animationName: rotate,
-            animationDuration: '1.5s',
-            animationIterationCount: 'infinite',
-            animationTimingFunction: 'linear'
-        },
-        tail: {
-            position: 'absolute',
-            display: 'block',
-            width: '100%',
-            height: '100%',
-            maskImage: 'conic-gradient(transparent 105deg, white 105deg)',
-            animationDuration: '1.5s',
-            animationIterationCount: 'infinite',
-            animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',
-            animationName: counterSpinner,
-            '::after, ::before': {
-                content: "''",
-                position: 'absolute',
-                display: 'block',
-                width: '100%',
-                height: '100%',
-                animation: 'inherit',
-                backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)',
-            },
-            '::after': {
-                animationName: getSpinnerAnimation(225),
-            },
-            '::before': {
-                maskImage: 'inherit',
-                animationName: getSpinnerAnimation(105)
-            },
-        }
-    });
-};
-
-export { getLoadingOverlayStyles };
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Grid/core/components/AgGrid/components/LoadingOverlay/styles.ts"],"sourcesContent":["import { ITheme, keyframes, mergeStyleSets } from \"@fluentui/react\";\n\nconst getSpinnerAnimation = (degValue: number) => {\n    return keyframes({\n        '0%': {\n            transform: 'rotate(0deg)'\n        },\n        '50%': {\n            transform: `rotate(${degValue}deg)`\n        },\n        '100%': {\n            transform: 'rotate(0deg)'\n        }\n    })\n}\n\nconst counterSpinner = keyframes({\n    '0%': {\n        transform: 'rotate(-135deg)'\n    },\n    '50%': {\n        transform: `rotate(0deg)`\n    },\n    '100%': {\n        transform: 'rotate(225deg)'\n    }\n})\n\nconst rotate = keyframes({\n    '0%': {\n        transform: 'rotate(0deg)'\n    },\n    '100%': {\n        transform: 'rotate(360deg)'\n    }\n})\n\nexport const getLoadingOverlayStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        root: {\n            borderWidth: '3px',\n            position: 'relative',\n            border: 'none',\n            maskImage: 'radial-gradient(closest-side, transparent calc(100% - 3px), white calc(100% - 3px) calc(100% - 1px), transparent 100%)',\n            backgroundColor: theme.palette.themeLighter,\n            color: theme.palette.themePrimary,\n            width: 36,\n            height: 36,\n            animationName: rotate,\n            animationDuration: '1.5s',\n            animationIterationCount: 'infinite',\n            animationTimingFunction: 'linear'\n        },\n        tail: {\n            position: 'absolute',\n            display: 'block',\n            width: '100%',\n            height: '100%',\n            maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n            animationDuration: '1.5s',\n            animationIterationCount: 'infinite',\n            animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n            animationName: counterSpinner,\n            '::after, ::before': {\n                content: \"''\",\n                position: 'absolute',\n                display: 'block',\n                width: '100%',\n                height: '100%',\n                animation: 'inherit',\n                backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)',\n            },\n            '::after': {\n                animationName: getSpinnerAnimation(225),\n            },\n            '::before': {\n                maskImage: 'inherit',\n                animationName: getSpinnerAnimation(105)\n            },\n        }\n    })\n}"],"names":[],"mappings":";;AAEA,MAAM,mBAAmB,GAAG,CAAC,QAAgB,KAAI;AAC7C,IAAA,OAAO,SAAS,CAAC;AACb,QAAA,IAAI,EAAE;AACF,YAAA,SAAS,EAAE,cAAc;AAC5B,SAAA;AACD,QAAA,KAAK,EAAE;YACH,SAAS,EAAE,CAAU,OAAA,EAAA,QAAQ,CAAM,IAAA,CAAA;AACtC,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,SAAS,EAAE,cAAc;AAC5B,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,CAAC,CAAA;AAED,MAAM,cAAc,GAAG,SAAS,CAAC;AAC7B,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,iBAAiB;AAC/B,KAAA;AACD,IAAA,KAAK,EAAE;AACH,QAAA,SAAS,EAAE,CAAc,YAAA,CAAA;AAC5B,KAAA;AACD,IAAA,MAAM,EAAE;AACJ,QAAA,SAAS,EAAE,gBAAgB;AAC9B,KAAA;AACJ,CAAA,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,SAAS,CAAC;AACrB,IAAA,IAAI,EAAE;AACF,QAAA,SAAS,EAAE,cAAc;AAC5B,KAAA;AACD,IAAA,MAAM,EAAE;AACJ,QAAA,SAAS,EAAE,gBAAgB;AAC9B,KAAA;AACJ,CAAA,CAAC,CAAA;AAEW,MAAA,uBAAuB,GAAG,CAAC,KAAa,KAAI;AACrD,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,wHAAwH;AACnI,YAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AAC3C,YAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;AACjC,YAAA,KAAK,EAAE,EAAE;AACT,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,aAAa,EAAE,MAAM;AACrB,YAAA,iBAAiB,EAAE,MAAM;AACzB,YAAA,uBAAuB,EAAE,UAAU;AACnC,YAAA,uBAAuB,EAAE,QAAQ;AACpC,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,kDAAkD;AAC7D,YAAA,iBAAiB,EAAE,MAAM;AACzB,YAAA,uBAAuB,EAAE,UAAU;AACnC,YAAA,uBAAuB,EAAE,6BAA6B;AACtD,YAAA,aAAa,EAAE,cAAc;AAC7B,YAAA,mBAAmB,EAAE;AACjB,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,SAAS,EAAE,SAAS;AACpB,gBAAA,eAAe,EAAE,yDAAyD;AAC7E,aAAA;AACD,YAAA,SAAS,EAAE;AACP,gBAAA,aAAa,EAAE,mBAAmB,CAAC,GAAG,CAAC;AAC1C,aAAA;AACD,YAAA,UAAU,EAAE;AACR,gBAAA,SAAS,EAAE,SAAS;AACpB,gBAAA,aAAa,EAAE,mBAAmB,CAAC,GAAG,CAAC;AAC1C,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/core/components/AgGrid/controllers/useAgGridController.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="powerapps-component-framework" />
-/// <reference types="react" />
-import { ColDef, GridApi, GridState } from "@ag-grid-community/core";
-import "@ag-grid-community/styles/ag-grid.css";
-import "@ag-grid-community/styles/ag-theme-balham.css";
-import { IUpdatedRecord } from "../../../services/RecordUpdateService/model/RecordUpdateService";
-import { IRecord } from "@talxis/client-libraries";
-interface IAgGridController {
-    agColumns: ColDef[];
-    records: IRecord[];
-    stateRef: React.MutableRefObject<IAgGridState>;
-    getTotalColumnsWidth: () => number;
-    onGridReady: () => void;
-}
-interface IAgGridState extends GridState {
-    '__updatedRecords'?: IUpdatedRecord[];
-    initialPageSize?: number;
-}
-export declare const useAgGridController: (gridApiRef: React.MutableRefObject<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord> | undefined>) => IAgGridController;
-export {};

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

@@ -1,173 +0,0 @@
-import { useRef, useMemo, useState, useEffect } from 'react';
-import { useGridController } from '../../../controllers/useGridController.js';
-import { useGridInstance } from '../../../hooks/useGridInstance.js';
-import { EditableCell } from '../../Cell/EditableCell/EditableCell.js';
-import { ReadOnlyCell } from '../../Cell/ReadOnlyCell/ReadOnlyCell.js';
-import { ColumnHeader } from '../../ColumnHeader/ColumnHeader.js';
-import { GlobalCheckBox } from '../../ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js';
-import { AgGrid } from '../model/AgGrid.js';
-import { ModuleRegistry } from '@ag-grid-community/core';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import { useDebounce } from 'use-debounce';
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-balham.css';
-import { usePagingController } from '../../../../paging/controllers/usePagingController.js';
-import { useStateValues } from '@talxis/react-components';
-import { CHECKBOX_COLUMN_KEY } from '../../../../constants.js';
-
-ModuleRegistry.registerModules([ClientSideRowModelModule]);
-const useAgGridController = (gridApiRef) => {
-    const grid = useGridInstance();
-    const pagingController = usePagingController();
-    const agGridReadyRef = useRef(false);
-    const agGrid = useMemo(() => new AgGrid(grid, gridApiRef), []);
-    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
-    const [agRecords] = useDebounce(grid.records, 0);
-    setTimeout(() => {
-        //set timeout to prevent ag grid from refreshing when another refresh is in progress
-        //debounce
-        gridApiRef.current?.refreshCells({
-            rowNodes: gridApiRef.current?.getRenderedNodes(),
-            force: true
-        });
-    }, 0);
-    useEffect(() => {
-        if (!agGridReadyRef.current) {
-            return;
-        }
-        agGrid.selectRows();
-        gridApiRef.current?.refreshHeader();
-    }, [grid.dataset.getSelectedRecordIds().join('')]);
-    useEffect(() => {
-        if (columns.length === 0) {
-            return;
-        }
-        const _agColumns = agGrid.columns;
-        for (const agColumn of _agColumns) {
-            agColumn.cellRenderer = ReadOnlyCell;
-            agColumn.cellEditor = EditableCell;
-            agColumn.headerComponent = ColumnHeader;
-            if (agColumn.field === CHECKBOX_COLUMN_KEY) {
-                agColumn.lockPosition = 'left';
-                agColumn.headerComponent = GlobalCheckBox;
-            }
-        }
-        setAgColumns(_agColumns);
-    }, [columns]);
-    //this might be very Portal centric
-    useEffect(() => {
-        if (!gridApiRef.current) {
-            return;
-        }
-        if (grid.loading) {
-            gridApiRef.current.showLoadingOverlay();
-            return;
-        }
-        gridApiRef.current.hideOverlay();
-        setTimeout(() => {
-            if (grid.records.length === 0) {
-                gridApiRef.current?.showNoRowsOverlay();
-            }
-        }, 0);
-    }, [grid.loading]);
-    useEffect(() => {
-        if (!gridApiRef.current) {
-            return;
-        }
-        gridApiRef.current.ensureIndexVisible(0);
-    }, [pagingController.pageNumber]);
-    useEffect(() => {
-        const onBeforeUnload = (ev) => {
-            if (grid.recordUpdateService.isDirty) {
-                ev.preventDefault();
-                return 'Unsaved changes!';
-            }
-        };
-        window.addEventListener('beforeunload', onBeforeUnload);
-        return () => {
-            window.removeEventListener('beforeunload', onBeforeUnload);
-            if (!gridApiRef.current) {
-                return;
-            }
-            stateValuesRef.current.__updatedRecords = grid.recordUpdateService.updatedRecords;
-            grid.pcfContext.mode.setControlState(getNewStateValues());
-        };
-    }, []);
-    //this can be replaced with native functionality if we decide to use ag grid enterprise
-    useEffect(() => {
-        const onKeyDownHandler = async (event) => {
-            // if control key(windows) or command key(iOS) + S key is clicked
-            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 ?? "");
-            }
-        };
-        window.addEventListener('keydown', onKeyDownHandler);
-        return () => {
-            window.removeEventListener('keydown', onKeyDownHandler);
-        };
-    }, []);
-    //TODO: find a better way to achieve this
-    useEffect(() => {
-        const globalClickHandler = (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) {
-            }
-        };
-        document.addEventListener('click', globalClickHandler);
-        return () => {
-            document.removeEventListener('click', globalClickHandler);
-        };
-    }, []);
-    const onGridReady = () => {
-        agGridReadyRef.current = true;
-        setDefaultStateValues({
-            ...gridApiRef.current.getState(),
-            initialPageSize: undefined,
-            __updatedRecords: []
-        });
-        agGrid.selectRows();
-    };
-    return {
-        agColumns: agColumns,
-        records: agRecords,
-        stateRef: stateValuesRef,
-        getTotalColumnsWidth: () => agGrid.getTotalColumnsWidth(),
-        onGridReady: onGridReady
-    };
-};
-
-export { useAgGridController };
-//# sourceMappingURL=useAgGridController.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useAgGridController.js","sources":["../../../../../../../src/components/Grid/core/components/AgGrid/controllers/useAgGridController.ts"],"sourcesContent":["import { ColDef, GridApi, GridState } from \"@ag-grid-community/core\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useGridController } from \"../../../controllers/useGridController\"\nimport { useGridInstance } from \"../../../hooks/useGridInstance\";\nimport { EditableCell } from \"../../Cell/EditableCell/EditableCell\";\nimport { ReadOnlyCell } from \"../../Cell/ReadOnlyCell/ReadOnlyCell\";\nimport { ColumnHeader } from \"../../ColumnHeader/ColumnHeader\";\nimport { GlobalCheckBox } from \"../../ColumnHeader/components/GlobalCheckbox/GlobalCheckbox\";\nimport { AgGrid } from \"../model/AgGrid\";\nimport { ModuleRegistry } from '@ag-grid-community/core';\nimport { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';\nimport { useDebounce } from 'use-debounce';\nimport \"@ag-grid-community/styles/ag-grid.css\";\nimport \"@ag-grid-community/styles/ag-theme-balham.css\";\nimport { usePagingController } from \"../../../../paging/controllers/usePagingController\";\nimport { useStateValues } from \"@talxis/react-components\";\nimport { IUpdatedRecord } from \"../../../services/RecordUpdateService/model/RecordUpdateService\";\nimport { IRecord } from \"@talxis/client-libraries\";\nimport { CHECKBOX_COLUMN_KEY } from \"../../../../constants\";\nModuleRegistry.registerModules([ClientSideRowModelModule]);\n\ninterface IAgGridController {\n    agColumns: ColDef[],\n    records: IRecord[],\n    stateRef: React.MutableRefObject<IAgGridState>\n    getTotalColumnsWidth: () => number,\n    onGridReady: () => void;\n}\n\ninterface IAgGridState extends GridState {\n    '__updatedRecords'?: IUpdatedRecord[];\n    initialPageSize?: number;\n}\n\nexport const useAgGridController = (gridApiRef: React.MutableRefObject<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord> | undefined>): IAgGridController => {\n    const grid = useGridInstance();\n    const pagingController = usePagingController();\n    const agGridReadyRef = useRef<boolean>(false);\n    const agGrid = useMemo(() => new AgGrid(grid, gridApiRef), [])\n    const { columns } = useGridController();\n    const [agColumns, setAgColumns] = useState<ColDef[]>([]);\n    const [stateValuesRef, getNewStateValues, setDefaultStateValues] = useStateValues<IAgGridState>(grid.state as IAgGridState);\n    //this is to prevent AgGrid from throwing errors in some rerender edge cases - https://github.com/ag-grid/ag-grid/issues/6013\n    const [agRecords] = useDebounce(grid.records, 0);\n\n    setTimeout(() => {\n        //set timeout to prevent ag grid from refreshing when another refresh is in progress\n        //debounce\n        gridApiRef.current?.refreshCells({\n            rowNodes: gridApiRef.current?.getRenderedNodes(),\n            force: true\n        });\n    }, 0);\n\n    useEffect(() => {\n        if (!agGridReadyRef.current) {\n            return;\n        }\n        agGrid.selectRows();\n        gridApiRef.current?.refreshHeader();\n    }, [grid.dataset.getSelectedRecordIds().join('')]);\n\n    useEffect(() => {\n        if (columns.length === 0) {\n            return;\n        }\n        const _agColumns = agGrid.columns;\n        for (const agColumn of _agColumns) {\n            agColumn.cellRenderer = ReadOnlyCell;\n            agColumn.cellEditor = EditableCell;\n            agColumn.headerComponent = ColumnHeader;\n\n            if (agColumn.field === CHECKBOX_COLUMN_KEY) {\n                agColumn.lockPosition = 'left';\n                agColumn.headerComponent = GlobalCheckBox\n            }\n        }\n        setAgColumns(_agColumns);\n    }, [columns]);\n\n    //this might be very Portal centric\n    useEffect(() => {\n        if (!gridApiRef.current) {\n            return;\n        }\n        if (grid.loading) {\n            gridApiRef.current.showLoadingOverlay();\n            return;\n        }\n        gridApiRef.current.hideOverlay();\n        setTimeout(() => {\n            if (grid.records.length === 0) {\n                gridApiRef.current?.showNoRowsOverlay();\n            }\n        }, 0);\n    }, [grid.loading]);\n\n\n    useEffect(() => {\n        if (!gridApiRef.current) {\n            return;\n        }\n        gridApiRef.current.ensureIndexVisible(0)\n    }, [pagingController.pageNumber]);\n\n    useEffect(() => {\n        const onBeforeUnload = (ev: BeforeUnloadEvent) => {\n            if (grid.recordUpdateService.isDirty) {\n                ev.preventDefault();\n                return 'Unsaved changes!'\n            }\n        }\n        window.addEventListener('beforeunload', onBeforeUnload);\n        return () => {\n            window.removeEventListener('beforeunload', onBeforeUnload);\n            if (!gridApiRef.current) {\n                return;\n            }\n            stateValuesRef.current.__updatedRecords = grid.recordUpdateService.updatedRecords;\n            grid.pcfContext.mode.setControlState(getNewStateValues());\n        }\n    }, []);\n\n    //this can be replaced with native functionality if we decide to use ag grid enterprise\n    useEffect(() => {\n        const onKeyDownHandler = async (event: KeyboardEvent) => {\n            // if control key(windows) or command key(iOS) + S key is clicked\n            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {\n                const cell = gridApiRef.current?.getFocusedCell();\n                if (!cell) {\n                    return;\n                }\n                const row = gridApiRef.current?.getDisplayedRowAtIndex(cell.rowIndex);\n                const formattedValue = gridApiRef.current?.getCellValue({\n                    rowNode: row!,\n                    colKey: cell.column.getColId(),\n                    useFormatter: true\n                })\n                navigator.clipboard.writeText(formattedValue ?? \"\");\n            }\n        }\n        window.addEventListener('keydown', onKeyDownHandler)\n        return () => {\n            window.removeEventListener('keydown', onKeyDownHandler);\n        }\n    }, []);\n\n    //TODO: find a better way to achieve this\n    useEffect(() => {\n        const globalClickHandler = (e: MouseEvent) => {\n            const hasAncestorWithClass = (element: HTMLElement, className: string): boolean => {\n                let parent = element;\n                while (!parent.classList.contains('ag-theme-balham')) {\n                    if (parent.classList.contains(className)) {\n                        return true;\n                    }\n                    if (parent.tagName === 'HTML') {\n                        return false;\n                    }\n                    parent = parent.parentElement!;\n                    if (!parent) {\n                        return true;\n                    }\n                }\n                return false;\n            };\n            try {\n                if (!hasAncestorWithClass(e.target as HTMLElement, 'ag-cell')) {\n                    gridApiRef.current?.stopEditing();\n                }\n            }\n            catch (err) {\n            }\n        }\n        document.addEventListener('click', globalClickHandler)\n        return () => {\n            document.removeEventListener('click', globalClickHandler);\n        }\n    }, []);\n\n    const onGridReady = () => {\n        agGridReadyRef.current = true;\n        setDefaultStateValues({\n            ...gridApiRef.current!.getState(),\n            initialPageSize: undefined,\n            __updatedRecords: []\n        });\n        agGrid.selectRows();\n    }\n\n    return {\n        agColumns: agColumns,\n        records: agRecords,\n        stateRef: stateValuesRef,\n        getTotalColumnsWidth: () => agGrid.getTotalColumnsWidth(),\n        onGridReady: onGridReady\n    }\n}"],"names":[],"mappings":"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"}

package/dist/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/RecordGrids.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { IUpdatedRecord } from '../../../../../../services/RecordUpdateService/model/RecordUpdateService';
-interface IRecordGrids {
-    record: IUpdatedRecord;
-}
-export declare const RecordGrids: (props: IRecordGrids) => JSX.Element;
-export {};