@talxis/base-controls 1.2410.5 → 1.2411.1

package/dist/components/Grid/core/components/Cell/EditableCell/EditableCell.js

@@ -1,122 +1,55 @@
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
 import { DataType } from '../../../enums/DataType.js';
-import { useGridInstance } from '../../../hooks/useGridInstance.js';
-import { useRecordUpdateServiceController } from '../../../services/RecordUpdateService/controllers/useRecordUpdateServiceController.js';
 import { Component } from '../../Component/Component.js';
+import { useGridInstance } from '../../../hooks/useGridInstance.js';
+import { useRerender } from '../../../../../../hooks/useRerender.js';
 
-const EditableCell = (props) => {
+const EditableCell = (editableCellProps) => {
     const grid = useGridInstance();
-    const column = props.baseColumn;
-    const recordUpdateService = useRecordUpdateServiceController();
-    const mountedRef = React.useRef(true);
-    const hasBeenUpdatedRef = React.useRef(false);
-    const record = (() => {
-        //this is so we can load the updated record values from state
-        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get();
-        return updatedRecord ?? props.data;
-    })();
-    const valueRef = React.useRef(record.getValue(column.name));
-    const [value, setValue] = React.useState(valueRef.current);
-    React.useEffect(() => {
-        return () => {
-            mountedRef.current = false;
-            if (!hasBeenUpdatedRef.current) {
-                return;
-            }
-            recordUpdateService.record(record.getRecordId()).setValue(column.name, getRecordValue(valueRef.current));
-        };
-    }, []);
-    const getComponentValue = (value) => {
-        //already is component value;
-        if (hasBeenUpdatedRef.current) {
-            return value;
-        }
-        switch (column.dataType) {
-            case DataType.TWO_OPTIONS: {
-                value = value === '1' ? true : false;
-                break;
-            }
-            case DataType.OPTIONSET: {
-                value = value ? parseInt(value) : null;
-                break;
-            }
-            case DataType.MULTI_SELECT_OPTIONSET: {
-                value = value ? value.split(',').map((value) => parseInt(value)) : null;
-                break;
-            }
-            case DataType.LOOKUP_SIMPLE:
-            case DataType.LOOKUP_CUSTOMER:
-            case DataType.LOOKUP_OWNER: {
-                if (value && !Array.isArray(value)) {
-                    value = [value];
-                }
-                value = value?.map((x) => {
-                    return {
-                        entityType: x.etn,
-                        id: x.id.guid,
-                        name: x.name
-                    };
-                });
-                break;
-            }
-        }
-        return value;
-    };
-    //this is just so the setValue API in Power Apps accepts the values that come from the components
-    const getRecordValue = (value) => {
-        switch (column.dataType) {
-            case DataType.TWO_OPTIONS: {
-                value = value === true ? '1' : '0';
-                break;
-            }
-            case DataType.LOOKUP_SIMPLE:
-            case DataType.LOOKUP_CUSTOMER:
-            case DataType.LOOKUP_OWNER: {
-                value = value?.map((x) => {
-                    return {
-                        entityName: x.entityType,
-                        name: x.name,
-                        id: x.id
-                    };
-                })?.[0];
-                break;
-            }
-        }
-        return value;
-    };
+    const column = editableCellProps.baseColumn;
+    const record = editableCellProps.data;
+    const rerender = useRerender();
     const onNotifyOutputChanged = (value) => {
-        valueRef.current = value;
-        hasBeenUpdatedRef.current = true;
-        if (!mountedRef.current) {
-            recordUpdateService.record(record.getRecordId()).setValue(column.name, getRecordValue(valueRef.current));
-            return;
-        }
         switch (column.dataType) {
             case DataType.OPTIONSET:
-            case DataType.DATE_AND_TIME_DATE_ONLY: {
-                props.stopEditing();
-                return;
+            case DataType.DATE_AND_TIME_DATE_ONLY:
+            case DataType.WHOLE_DURATION: {
+                editableCellProps.stopEditing();
+                break;
             }
             case DataType.LOOKUP_OWNER:
             case DataType.LOOKUP_SIMPLE:
             case DataType.LOOKUP_CUSTOMER: {
                 if (value?.length > 0) {
-                    props.stopEditing();
-                    return;
+                    editableCellProps.stopEditing();
                 }
+                break;
             }
         }
-        setValue(valueRef.current);
+        if (grid.parameters.EnableMultiEdit?.raw && grid.dataset.getSelectedRecordIds().includes(record.getRecordId())) {
+            const records = grid.records.filter(record => grid.dataset.getSelectedRecordIds().includes(record.getRecordId()));
+            records.map(record => setValue(record, value));
+        }
+        else {
+            setValue(record, value);
+        }
+        grid.pcfContext.factory.requestRender();
+        rerender();
+    };
+    const setValue = (record, value) => {
+        record.setValue(column.name, value);
+        editableCellProps.api.resetRowHeights();
     };
-    return jsx(Component, { column: column, value: getComponentValue(value), formattedValue: record.getFormattedValue(column.name) ?? undefined, onNotifyOutputChanged: onNotifyOutputChanged, onOverrideControlProps: (props) => {
+    return jsx(Component, { column: column, record: record, onNotifyOutputChanged: onNotifyOutputChanged, onOverrideControlProps: (props) => {
             return {
                 ...props,
                 context: {
                     ...props.context,
                     mode: {
                         ...props.context.mode,
-                        allocatedHeight: 41
+                        allocatedHeight: (() => {
+                            return editableCellProps.node.rowHeight;
+                        })()
                     },
                     fluentDesignLanguage: props.context.fluentDesignLanguage ? {
                         ...props.context.fluentDesignLanguage,
@@ -136,6 +69,9 @@ const EditableCell = (props) => {
                     },
                     IsInlineNewEnabled: {
                         raw: false
+                    },
+                    EnableTypeSuffix: {
+                        raw: false
                     }
                 }
             };

package/dist/components/Grid/core/components/Cell/EditableCell/EditableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableCell.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/EditableCell/EditableCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DataType } from '../../../enums/DataType';\nimport { useGridInstance } from '../../../hooks/useGridInstance';\nimport { IGridColumn } from '../../../interfaces/IGridColumn';\nimport { useRecordUpdateServiceController } from '../../../services/RecordUpdateService/controllers/useRecordUpdateServiceController';\nimport { Component } from '../../Component/Component';\nimport { ICellEditorParams } from '@ag-grid-community/core';\nimport { IRecord } from '@talxis/client-libraries';\n\ninterface ICell extends ICellEditorParams {\n    baseColumn: IGridColumn;\n    data: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;\n}\n\nexport const EditableCell = (props: ICell) => {\n    const grid = useGridInstance();\n    const column = props.baseColumn;\n    const recordUpdateService = useRecordUpdateServiceController();\n    const mountedRef = React.useRef(true);\n    const hasBeenUpdatedRef = React.useRef<boolean>(false);\n    const record: IRecord = (() => {\n        //this is so we can load the updated record values from state\n        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get() as any;\n        return updatedRecord ?? props.data;\n    })();\n    const valueRef = React.useRef(record.getValue(column.name));\n    const [value, setValue] = React.useState(valueRef.current);\n\n    React.useEffect(() => {\n        return () => {\n            mountedRef.current = false;\n            if (!hasBeenUpdatedRef.current) {\n                return;\n            }\n            recordUpdateService.record(record.getRecordId()).setValue(column.name, getRecordValue(valueRef.current))\n        }\n    }, []);\n\n    const getComponentValue = (value: any) => {\n        //already is component value;\n        if(hasBeenUpdatedRef.current) {\n            return value;\n        }\n        switch(column.dataType) {\n            case DataType.TWO_OPTIONS: {\n                value = value === '1' ? true : false\n                break;\n            }\n            case DataType.OPTIONSET: {\n                value = value ? parseInt(value) : null;\n                break;\n\n            }\n            case DataType.MULTI_SELECT_OPTIONSET: {\n                value = value ? value.split(',').map((value: string) => parseInt(value)) : null;\n                break;\n            }\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_CUSTOMER:\n            case DataType.LOOKUP_OWNER: {\n                if(value && !Array.isArray(value)) {\n                    value = [value];\n                }\n                value = value?.map((x: any) => {\n                    return {\n                        entityType: x.etn,\n                        id: x.id.guid,\n                        name: x.name\n                    }\n                })\n                break;\n            }\n        }\n        return value;\n    }\n    //this is just so the setValue API in Power Apps accepts the values that come from the components\n    const getRecordValue = (value: any) => {\n        switch (column.dataType) {\n            case DataType.TWO_OPTIONS: {\n                value = value === true ? '1' : '0';\n                break;\n            }\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_CUSTOMER:\n            case DataType.LOOKUP_OWNER: {\n                value = value?.map((x: any) => {\n                    return {\n                        entityName: x.entityType,\n                        name: x.name,\n                        id: x.id\n                    }\n                })?.[0];\n                break;\n            }\n        }\n        return value;\n    }\n\n    const onNotifyOutputChanged = (value: any) => {\n        valueRef.current = value;\n        hasBeenUpdatedRef.current = true;\n        if(!mountedRef.current) {\n            recordUpdateService.record(record.getRecordId()).setValue(column.name, getRecordValue(valueRef.current))\n            return;\n        }\n        switch(column.dataType) {\n            case DataType.OPTIONSET:\n            case DataType.DATE_AND_TIME_DATE_ONLY: {\n                props.stopEditing();\n                return;\n            }\n            case DataType.LOOKUP_OWNER:\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_CUSTOMER: {\n                if(value?.length > 0) {\n                    props.stopEditing();\n                    return;\n                }\n            }\n        }\n        setValue(valueRef.current);\n    }\n\n    return <Component\n        column={column}\n        value={getComponentValue(value)}\n        formattedValue={record.getFormattedValue(column.name) ?? undefined}\n        onNotifyOutputChanged={onNotifyOutputChanged}\n        onOverrideControlProps={(props) => {\n            return {\n                ...props,\n                context: {\n                    ...props.context,\n                    mode: {\n                        ...props.context.mode,\n                        allocatedHeight: 41\n                    },\n                    fluentDesignLanguage: props.context.fluentDesignLanguage ? {\n                        ...props.context.fluentDesignLanguage,\n                        tokenTheme: {\n                            ...props.context.fluentDesignLanguage.tokenTheme,\n                            underlined: false,\n                        }\n                    } : undefined\n                },\n                parameters: {\n                    ...props.parameters,\n                    AutoFocus: {\n                        raw: true\n                    },\n                    EnableNavigation: {\n                        raw: false\n                    },\n                    IsInlineNewEnabled: {\n                        raw: false\n                    }\n                }\n            }\n        }}\n    />\n}"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"EditableCell.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/EditableCell/EditableCell.tsx"],"sourcesContent":["import { DataType } from '../../../enums/DataType';\nimport { IGridColumn } from '../../../interfaces/IGridColumn';\nimport { Component } from '../../Component/Component';\nimport { ICellEditorParams } from '@ag-grid-community/core';\nimport { IRecord } from '@talxis/client-libraries';\nimport { useGridInstance } from '../../../hooks/useGridInstance';\nimport { useRerender } from '../../../../../../hooks/useRerender';\n\ninterface ICell extends ICellEditorParams {\n    baseColumn: IGridColumn;\n    data: IRecord\n}\n\nexport const EditableCell = (editableCellProps: ICell) => {\n    const grid = useGridInstance();\n    const column = editableCellProps.baseColumn;\n    const record = editableCellProps.data;\n    const rerender = useRerender();\n\n    const onNotifyOutputChanged = (value: any) => {\n        switch(column.dataType) {\n            case DataType.OPTIONSET:\n            case DataType.DATE_AND_TIME_DATE_ONLY:\n            case DataType.WHOLE_DURATION: {\n                editableCellProps.stopEditing();\n                break;\n            }\n            case DataType.LOOKUP_OWNER:\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_CUSTOMER: {\n                if(value?.length > 0) {\n                    editableCellProps.stopEditing();\n                }\n                break;\n            }\n        }\n        if(grid.parameters.EnableMultiEdit?.raw && grid.dataset.getSelectedRecordIds().includes(record.getRecordId())) {\n            const records = grid.records.filter(record => grid.dataset.getSelectedRecordIds().includes(record.getRecordId()))\n            records.map(record => setValue(record, value))\n        }\n        else {\n            setValue(record, value)\n        }\n        grid.pcfContext.factory.requestRender();\n        rerender();\n    }\n\n    const setValue = (record: IRecord, value: any) => {\n        record.setValue(column.name, value);\n        editableCellProps.api.resetRowHeights();\n    }\n\n    return <Component\n        column={column}\n        record={record}\n        onNotifyOutputChanged={onNotifyOutputChanged}\n        onOverrideControlProps={(props) => {\n            return {\n                ...props,\n                context: {\n                    ...props.context,\n                    mode: {\n                        ...props.context.mode,\n                        allocatedHeight: (() => {\n                            return editableCellProps.node.rowHeight!\n                        })()\n                    },\n                    fluentDesignLanguage: props.context.fluentDesignLanguage ? {\n                        ...props.context.fluentDesignLanguage,\n                        tokenTheme: {\n                            ...props.context.fluentDesignLanguage.tokenTheme,\n                            underlined: false,\n                        }\n                    } : undefined\n                },\n                parameters: {\n                    ...props.parameters,\n                    AutoFocus: {\n                        raw: true\n                    },\n                    EnableNavigation: {\n                        raw: false\n                    },\n                    IsInlineNewEnabled: {\n                        raw: false\n                    },\n                    EnableTypeSuffix: {\n                        raw: false\n                    }\n                }\n            }\n        }}\n    />\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/Notifications/Notifications.js

@@ -62,28 +62,29 @@ const Notifications = forwardRef((props, ref) => {
         }
         setSelectedNotification(notification);
     };
-    return jsxs("div", { className: `${styles.root}${props.className ? ` ${props.className}` : ''}`, children: [jsx(ThemeProvider, { theme: overridenTheme, applyTo: "none", children: jsx(CommandBar, { theme: overridenTheme, id: iconId, componentRef: commandBarRef, items: notifications.map(x => {
-                        const icon = getIconName(x);
-                        return {
-                            key: x.uniqueId,
-                            text: x.title,
-                            title: x.title,
-                            onClick: () => onNotificationClick(x),
-                            buttonStyles: {
-                                textContainer: {
-                                    display: x.compact ? 'none' : undefined
-                                }
-                            },
-                            iconProps: icon ? {
-                                iconName: icon,
-                                styles: {
-                                    root: {
-                                        color: x.notificationLevel === 'ERROR' ? `${theme.semanticColors.errorIcon} !important` : undefined
-                                    }
-                                }
-                            } : undefined
-                        };
-                    }) }) }), selectedNotification &&
+    const getCommandBarItem = (notification) => {
+        const icon = getIconName(notification);
+        return {
+            key: notification.uniqueId,
+            text: notification.title,
+            title: notification.title,
+            onClick: () => onNotificationClick(notification),
+            buttonStyles: {
+                textContainer: {
+                    display: notification.compact ? 'none' : undefined
+                }
+            },
+            iconProps: notification ? {
+                iconName: icon,
+                styles: {
+                    root: {
+                        color: notification.notificationLevel === 'ERROR' ? `${theme.semanticColors.errorIcon} !important` : undefined
+                    }
+                }
+            } : undefined
+        };
+    };
+    return jsxs("div", { className: `${styles.root}${props.className ? ` ${props.className}` : ''}`, children: [jsx(ThemeProvider, { theme: overridenTheme, applyTo: "none", children: jsx(CommandBar, { overflowItems: notifications.filter(x => x.renderedInOverflow).map(y => getCommandBarItem(y)), theme: overridenTheme, id: iconId, componentRef: commandBarRef, items: notifications.filter(x => !x.renderedInOverflow).map(y => getCommandBarItem(y)) }) }), selectedNotification &&
                 jsxs(Callout, { hidden: !selectedNotification, className: styles.callout, onDismiss: () => setSelectedNotification(null), target: `#${iconId}`, children: [selectedNotification.title &&
                             jsx(Text, { title: selectedNotification.title, className: styles.calloutTitle, variant: selectedNotification.messages.length > 0 ? 'xLarge' : undefined, children: selectedNotification.title }), jsx(Text, { children: selectedNotification.messages[0] }), selectedNotification.actions &&
                             renderActions(selectedNotification.actions)] })] });

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/Notifications/Notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notifications.js","sources":["../../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/Notifications/Notifications.tsx"],"sourcesContent":["import { Icon, useTheme, Text, Callout, PrimaryButton, DefaultButton, Link, ICommandBar, ThemeProvider } from \"@fluentui/react\"\nimport { getNotificationIconStyles } from \"./styles\";\nimport { forwardRef, useImperativeHandle, useMemo, useRef, useState } from \"react\";\nimport { IAddControlNotificationOptions, IControlNotificationAction } from \"@talxis/client-libraries\";\nimport { CommandBar } from \"@talxis/react-components\";\nimport { useThemeOverride } from \"../../../../../../../hooks/useThemeOverride\";\n\ninterface INotifications {\n    notifications: IAddControlNotificationOptions[],\n    className?: string;\n}\n\nexport interface INotificationsRef {\n    remeasureCommandBar: () => void;\n}\n\n\nexport const Notifications = forwardRef<INotificationsRef, INotifications>((props, ref) => {\n    const { notifications } = { ...props };\n    const theme = useTheme();\n    const styles = getNotificationIconStyles(theme);\n    const iconId = useMemo(() => `icon${crypto.randomUUID()}`, []);\n    const [selectedNotification, setSelectedNotification] = useState<IAddControlNotificationOptions | null>(null);\n    const commandBarRef = useRef<ICommandBar>(null);\n    const overridenTheme = useThemeOverride(theme.palette.themePrimary, 'transparent', theme.semanticColors.bodyText)\n\n    useImperativeHandle(ref, () => {\n        return {\n            remeasureCommandBar: () => {\n                commandBarRef.current?.remeasure();\n            }\n        }\n    })\n\n    const getIconName = (notification: IAddControlNotificationOptions): string | undefined => {\n        if (notification.iconName) {\n            return notification.iconName;\n        }\n        return notification.notificationLevel === 'ERROR' ? 'Error' : undefined;\n    }\n\n    const renderActionButton = (action: IControlNotificationAction, buttonType: 'primary' | 'default') => {\n        const Button = buttonType === 'primary' ? PrimaryButton : DefaultButton;\n        return <Button\n            text={action.message}\n            iconProps={action?.iconName ? {\n                iconName: action.iconName\n            } : undefined}\n            onClick={() => action.actions.map(callback => callback())} />\n    }\n\n    const renderActions = (actions: IControlNotificationAction[]): JSX.Element => {\n        if (actions.length === 0) {\n            return <></>\n        }\n        //render actions as buttons\n        if (actions.length < 3) {\n            return <div className={styles.buttons}>\n                {actions.map((action, i) => renderActionButton(action, i === 0 ? 'primary' : 'default'))}\n            </div>\n        }\n        return <CommandBar items={actions.map((action, i) => {\n            return {\n                key: i.toString(),\n                text: action.message,\n                commandBarButtonAs: () => <Link onClick={() => action.actions.map(callback => callback())} className={styles.link}>\n                    {action.iconName &&\n                        <Icon iconName={action.iconName} />\n                    }\n                    {action.message}\n                </Link>,\n                iconProps: {\n                    iconName: action.iconName\n                },\n                onClick: () => {\n                    action.actions.map(callback => callback())\n                }\n            }\n        })} />\n    }\n\n    const onNotificationClick = (notification: IAddControlNotificationOptions) => {\n        if (notification.actions?.length === 1) {\n            notification.actions[0].actions.map(callback => callback());\n            return;\n        }\n        setSelectedNotification(notification);\n    }\n\n    return <div className={`${styles.root}${props.className ? ` ${props.className}` : ''}`}>\n        <ThemeProvider theme={overridenTheme} applyTo=\"none\">\n            <CommandBar theme={overridenTheme} id={iconId} componentRef={commandBarRef} items={notifications.map(x => {\n                const icon = getIconName(x);\n                return {\n                    key: x.uniqueId,\n                    text: x.title,\n                    title: x.title,\n                    onClick: () => onNotificationClick(x),\n                    buttonStyles: {\n                        textContainer: {\n                            display: x.compact ? 'none' : undefined\n                        }\n                    },\n                    iconProps: icon ? {\n                        iconName: icon,\n                        styles: {\n                            root: {\n                                color: x.notificationLevel === 'ERROR' ? `${theme.semanticColors.errorIcon} !important` : undefined\n                            }\n                        }\n                    } : undefined\n                }\n            })} />\n        </ThemeProvider>\n        {selectedNotification &&\n            <Callout\n                hidden={!selectedNotification}\n                className={styles.callout}\n                onDismiss={() => setSelectedNotification(null)}\n                target={`#${iconId}`}>\n                {selectedNotification.title &&\n                    <Text title={selectedNotification.title} className={styles.calloutTitle} variant={selectedNotification.messages.length > 0 ? 'xLarge' : undefined}>{selectedNotification.title}</Text>\n                }\n                <Text>{selectedNotification.messages[0]}</Text>\n                {selectedNotification.actions &&\n                    renderActions(selectedNotification.actions)\n                }\n            </Callout>\n        }\n    </div>\n});"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Notifications.js","sources":["../../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/Notifications/Notifications.tsx"],"sourcesContent":["import { Icon, useTheme, Text, Callout, PrimaryButton, DefaultButton, Link, ICommandBar, ThemeProvider } from \"@fluentui/react\"\nimport { getNotificationIconStyles } from \"./styles\";\nimport { forwardRef, useImperativeHandle, useMemo, useRef, useState } from \"react\";\nimport { IAddControlNotificationOptions, IControlNotificationAction } from \"@talxis/client-libraries\";\nimport { CommandBar } from \"@talxis/react-components\";\nimport { useThemeOverride } from \"../../../../../../../hooks/useThemeOverride\";\n\ninterface INotifications {\n    notifications: IAddControlNotificationOptions[],\n    className?: string;\n}\n\nexport interface INotificationsRef {\n    remeasureCommandBar: () => void;\n}\n\n\nexport const Notifications = forwardRef<INotificationsRef, INotifications>((props, ref) => {\n    const { notifications } = { ...props };\n    const theme = useTheme();\n    const styles = getNotificationIconStyles(theme);\n    const iconId = useMemo(() => `icon${crypto.randomUUID()}`, []);\n    const [selectedNotification, setSelectedNotification] = useState<IAddControlNotificationOptions | null>(null);\n    const commandBarRef = useRef<ICommandBar>(null);\n    const overridenTheme = useThemeOverride(theme.palette.themePrimary, 'transparent', theme.semanticColors.bodyText)\n\n    useImperativeHandle(ref, () => {\n        return {\n            remeasureCommandBar: () => {\n                commandBarRef.current?.remeasure();\n            }\n        }\n    })\n\n    const getIconName = (notification: IAddControlNotificationOptions): string | undefined => {\n        if (notification.iconName) {\n            return notification.iconName;\n        }\n        return notification.notificationLevel === 'ERROR' ? 'Error' : undefined;\n    }\n\n    const renderActionButton = (action: IControlNotificationAction, buttonType: 'primary' | 'default') => {\n        const Button = buttonType === 'primary' ? PrimaryButton : DefaultButton;\n        return <Button\n            text={action.message}\n            iconProps={action?.iconName ? {\n                iconName: action.iconName\n            } : undefined}\n            onClick={() => action.actions.map(callback => callback())} />\n    }\n\n    const renderActions = (actions: IControlNotificationAction[]): JSX.Element => {\n        if (actions.length === 0) {\n            return <></>\n        }\n        //render actions as buttons\n        if (actions.length < 3) {\n            return <div className={styles.buttons}>\n                {actions.map((action, i) => renderActionButton(action, i === 0 ? 'primary' : 'default'))}\n            </div>\n        }\n        return <CommandBar items={actions.map((action, i) => {\n            return {\n                key: i.toString(),\n                text: action.message,\n                commandBarButtonAs: () => <Link onClick={() => action.actions.map(callback => callback())} className={styles.link}>\n                    {action.iconName &&\n                        <Icon iconName={action.iconName} />\n                    }\n                    {action.message}\n                </Link>,\n                iconProps: {\n                    iconName: action.iconName\n                },\n                onClick: () => {\n                    action.actions.map(callback => callback())\n                }\n            }\n        })} />\n    }\n\n    const onNotificationClick = (notification: IAddControlNotificationOptions) => {\n        if (notification.actions?.length === 1) {\n            notification.actions[0].actions.map(callback => callback());\n            return;\n        }\n        setSelectedNotification(notification);\n    };\n\n    const getCommandBarItem = (notification: IAddControlNotificationOptions) => {\n        const icon = getIconName(notification);\n        return {\n            key: notification.uniqueId,\n            text: notification.title,\n            title: notification.title,\n            onClick: () => onNotificationClick(notification),\n            buttonStyles: {\n                textContainer: {\n                    display: notification.compact ? 'none' : undefined\n                }\n            },\n            iconProps: notification ? {\n                iconName: icon,\n                styles: {\n                    root: {\n                        color: notification.notificationLevel === 'ERROR' ? `${theme.semanticColors.errorIcon} !important` : undefined\n                    }\n                }\n            } : undefined\n        }\n    };\n\n    return <div className={`${styles.root}${props.className ? ` ${props.className}` : ''}`}>\n        <ThemeProvider theme={overridenTheme} applyTo=\"none\">\n            <CommandBar\n                overflowItems={notifications.filter(x => x.renderedInOverflow).map(y => getCommandBarItem(y))}\n                theme={overridenTheme}\n                id={iconId}\n                componentRef={commandBarRef}\n                items={notifications.filter(x => !x.renderedInOverflow).map(y => getCommandBarItem(y))} />\n        </ThemeProvider>\n        {selectedNotification &&\n            <Callout\n                hidden={!selectedNotification}\n                className={styles.callout}\n                onDismiss={() => setSelectedNotification(null)}\n                target={`#${iconId}`}>\n                {selectedNotification.title &&\n                    <Text title={selectedNotification.title} className={styles.calloutTitle} variant={selectedNotification.messages.length > 0 ? 'xLarge' : undefined}>{selectedNotification.title}</Text>\n                }\n                <Text>{selectedNotification.messages[0]}</Text>\n                {selectedNotification.actions &&\n                    renderActions(selectedNotification.actions)\n                }\n            </Callout>\n        }\n    </div>\n});"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.js

@@ -1,12 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useTheme, Shimmer, Checkbox, Image, Icon, Link, Text } from '@fluentui/react';
-import { getReadOnlyCellStyles } from './styles.js';
+import { useTheme, Checkbox, Shimmer, Image, Icon, Link, Text } from '@fluentui/react';
+import { getReadOnlyCellStyles, getMultilineStyle } from './styles.js';
 import { Commands } from '../Commands/Commands.js';
-import { Constants, FileAttribute } from '@talxis/client-libraries';
+import { Constants, DataTypes, FileAttribute } from '@talxis/client-libraries';
 import { ReadOnlyOptionSet } from './ReadOnlyOptionSet/ReadOnlyOptionSet.js';
 import { DataType } from '../../../enums/DataType.js';
-import { useColumnValidationController } from '../../../../validation/controllers/useRecordValidationController.js';
 import { useGridInstance } from '../../../hooks/useGridInstance.js';
 import { useSelectionController } from '../../../../selection/controllers/useSelectionController.js';
 import { CHECKBOX_COLUMN_KEY } from '../../../../constants.js';
@@ -14,14 +13,17 @@ import { Notifications } from './Notifications/Notifications.js';
 import { useDebouncedCallback } from 'use-debounce';
 
 const ReadOnlyCell = (props) => {
-    const grid = useGridInstance();
+    const selection = useSelectionController();
     const column = props.baseColumn;
     const record = props.data;
     const theme = useTheme();
     const styles = React.useMemo(() => getReadOnlyCellStyles(theme), [theme]);
-    const selection = useSelectionController();
-    const notifications = record.ui?.getNotifications(column.name);
-    const notificationRef = React.useRef(null);
+    if (column.name === CHECKBOX_COLUMN_KEY) {
+        return jsx("div", { className: styles.cellContent, children: jsx(Checkbox, { checked: props.node.isSelected(), onChange: (e, checked) => {
+                    e?.stopPropagation();
+                    selection.toggle(record, checked);
+                } }) });
+    }
     const MemoizedNotifications = React.useMemo(() => {
         return React.memo(Notifications, (prevProps, nextProps) => {
             const previousIds = prevProps.notifications.map(x => x.uniqueId).join(';');
@@ -32,18 +34,19 @@ const ReadOnlyCell = (props) => {
             return true;
         });
     }, []);
+    const grid = useGridInstance();
+    const notifications = record.ui.getNotifications?.(column.name);
+    const notificationRef = React.useRef(null);
+    //TODO: only do this if editable
+    const validation = record.getColumnInfo(column.name);
     const debounceNotificationRemeasure = useDebouncedCallback(() => {
         if (notifications && notifications.length > 0) {
             notificationRef.current?.remeasureCommandBar();
         }
     }, 10);
-    const [isValid, errorMessage] = useColumnValidationController({
-        column: column,
-        record: record,
-    });
     debounceNotificationRemeasure();
     const shouldShowNotEditableNotification = () => {
-        if (column.isEditable && record.ui?.isEditable(column.name) === false) {
+        if (column.isEditable && !record.getColumnInfo(column.name).security.editable) {
             return true;
         }
         return false;
@@ -53,7 +56,7 @@ const ReadOnlyCell = (props) => {
         if (notifications && notifications.length > 0) {
             count++;
         }
-        if (!isValid) {
+        if (validation?.error === true) {
             count++;
         }
         if (shouldShowNotEditableNotification()) {
@@ -62,7 +65,7 @@ const ReadOnlyCell = (props) => {
         return count * 40;
     };
     const shouldRenderNotificationsWrapper = () => {
-        if (!isValid) {
+        if (validation?.error === true) {
             return true;
         }
         if (shouldShowNotEditableNotification()) {
@@ -82,29 +85,21 @@ const ReadOnlyCell = (props) => {
     if (record.ui?.isLoading(column.name)) {
         return jsx(Shimmer, { className: styles.loading });
     }
-    switch (column.name) {
-        case CHECKBOX_COLUMN_KEY: {
-            return jsx("div", { className: styles.cellContent, children: jsx(Checkbox, { checked: props.node.isSelected(), onChange: (e, checked) => {
-                        e?.stopPropagation();
-                        selection.toggle(record, checked);
-                    } }) });
-        }
-        case Constants.RIBBON_BUTTONS_COLUMN_NAME: {
-            return jsx("div", { className: styles.cellContent, children: jsx(Commands, { record: record }) });
-        }
+    if (column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) {
+        return jsx("div", { className: styles.cellContent, children: jsx(Commands, { record: record }) });
     }
     return (jsxs("div", { style: {
             '--test': `${calculateNotificationsWrapperMinWidth()}px`
-        }, className: styles.root, "data-is-valid": isValid, children: [jsx("div", { className: styles.cellContentWrapper, children: jsx("div", { className: styles.cellContent, children: jsx(InternalReadOnlyCell, { ...props }) }) }), shouldRenderNotificationsWrapper() &&
+        }, className: styles.root, "data-is-valid": !validation || validation.error === false, children: [jsx("div", { className: styles.cellContentWrapper, children: jsx("div", { className: styles.cellContent, children: jsx(InternalReadOnlyCell, { ...props }) }) }), shouldRenderNotificationsWrapper() &&
                 jsxs("div", { className: styles.notificationsWrapper, children: [notifications && notifications.length > 0 &&
-                            jsx(MemoizedNotifications, { className: styles.notifications, ref: notificationRef, notifications: notifications }), !isValid &&
+                            jsx(MemoizedNotifications, { className: styles.notifications, ref: notificationRef, notifications: notifications }), validation?.error === true &&
                             jsx(MemoizedNotifications, { notifications: [
                                     {
                                         notificationLevel: 'ERROR',
                                         messages: [],
                                         iconName: 'Error',
                                         uniqueId: column.name,
-                                        title: errorMessage,
+                                        title: validation.errorMessage,
                                         compact: true
                                     }
                                 ] }), shouldShowNotEditableNotification() &&
@@ -122,11 +117,7 @@ const InternalReadOnlyCell = (props) => {
     const column = props.baseColumn;
     const theme = useTheme();
     const styles = getReadOnlyCellStyles(theme);
-    const record = (() => {
-        //this is so we can load the updated record values from state
-        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get();
-        return updatedRecord ?? props.data;
-    })();
+    const record = props.data;
     const formattedValue = record.getFormattedValue(column.name);
     const renderLink = (props, formattedValue) => {
         switch (column.dataType) {
@@ -141,7 +132,14 @@ const InternalReadOnlyCell = (props) => {
         if (!formattedValue) {
             return jsx(Fragment, {});
         }
-        return (jsx(Link, { ...props, className: styles.link, title: formattedValue, children: formattedValue }));
+        let className = styles.link;
+        switch (column.dataType) {
+            case DataTypes.Multiple:
+            case DataTypes.SingleLineTextArea: {
+                className += ` ${getMultilineStyle(props.node.rowHeight)}`;
+            }
+        }
+        return (jsx(Link, { ...props, className: className, title: formattedValue, children: formattedValue }));
     };
     const renderText = () => {
         if (column.isPrimary && grid.isNavigationEnabled) {
@@ -149,7 +147,14 @@ const InternalReadOnlyCell = (props) => {
                 onClick: () => grid.openDatasetItem(record.getNamedReference())
             }, formattedValue);
         }
-        return jsx(Text, { className: `${styles.text} talxis-cell-text`, title: formattedValue, children: formattedValue });
+        let className = `${styles.text} talxis-cell-text`;
+        switch (column.dataType) {
+            case DataTypes.Multiple:
+            case DataTypes.SingleLineTextArea: {
+                className += ` ${getMultilineStyle(props.node.rowHeight)}`;
+            }
+        }
+        return jsx(Text, { className: className, title: formattedValue, children: formattedValue });
     };
     const downloadFile = () => {
         const storage = new FileAttribute(grid.pcfContext.webAPI);
@@ -179,7 +184,7 @@ const InternalReadOnlyCell = (props) => {
         case DataType.LOOKUP_OWNER:
         case DataType.LOOKUP_CUSTOMER: {
             return renderLink({
-                onClick: () => grid.openDatasetItem(record.getValue(column.name))
+                onClick: () => grid.openDatasetItem(record.getValue(column.name)[0])
             }, formattedValue);
         }
         case DataType.FILE: {

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReadOnlyCell.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ILinkProps, Shimmer } from '@fluentui/react';\nimport { Link } from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { getReadOnlyCellStyles } from './styles';\nimport { Commands } from '../Commands/Commands';\nimport { Checkbox, Icon, useTheme, Image } from '@fluentui/react';\nimport { Constants, FileAttribute, IRecord } from '@talxis/client-libraries';\nimport { ReadOnlyOptionSet } from './ReadOnlyOptionSet/ReadOnlyOptionSet';\nimport { IGridColumn } from '../../../interfaces/IGridColumn';\nimport { DataType } from '../../../enums/DataType';\nimport { useColumnValidationController } from '../../../../validation/controllers/useRecordValidationController';\nimport { useGridInstance } from '../../../hooks/useGridInstance';\nimport { useSelectionController } from '../../../../selection/controllers/useSelectionController';\nimport { ICellRendererParams } from '@ag-grid-community/core';\nimport { CHECKBOX_COLUMN_KEY } from '../../../../constants';\nimport { INotificationsRef, Notifications } from './Notifications/Notifications';\nimport { useDebouncedCallback } from 'use-debounce';\n\ninterface ICellProps extends ICellRendererParams {\n    baseColumn: IGridColumn;\n    data: IRecord;\n    [key: string]: any;\n}\n\nexport const ReadOnlyCell = (props: ICellProps) => {\n    const grid = useGridInstance();\n    const column = props.baseColumn;\n    const record = props.data;\n    const theme = useTheme();\n    const styles = React.useMemo(() => getReadOnlyCellStyles(theme), [theme]);\n    const selection = useSelectionController();\n    const notifications = record.ui?.getNotifications(column.name);\n    const notificationRef = React.useRef<INotificationsRef>(null);\n\n    const MemoizedNotifications = React.useMemo(() => {\n        return React.memo(Notifications, (prevProps, nextProps) => {\n            const previousIds = prevProps.notifications.map(x => x.uniqueId).join(';');\n            const nextIds = nextProps.notifications.map(x => x.uniqueId).join(';');\n            if (previousIds !== nextIds) {\n                return false;\n            }\n            return true;\n        });\n    }, []);\n\n    const debounceNotificationRemeasure = useDebouncedCallback(() => {\n        if (notifications && notifications.length > 0) {\n            notificationRef.current?.remeasureCommandBar();\n        }\n    }, 10)\n\n    const [isValid, errorMessage] = useColumnValidationController({\n        column: column,\n        record: record,\n    });\n\n    debounceNotificationRemeasure();\n\n    const shouldShowNotEditableNotification = (): boolean => {\n        if (column.isEditable && record.ui?.isEditable(column.name) === false) {\n            return true;\n        }\n        return false;\n    }\n\n    const calculateNotificationsWrapperMinWidth = (): number => {\n        let count = 0;\n        if (notifications && notifications.length > 0) {\n            count++\n        }\n        if (!isValid) {\n            count++;\n        }\n        if (shouldShowNotEditableNotification()) {\n            count++;\n        }\n        return count * 40;\n    }\n\n    const shouldRenderNotificationsWrapper = (): boolean => {\n        if (!isValid) {\n            return true;\n        }\n        if (shouldShowNotEditableNotification()) {\n            return true;\n        }\n        if (notifications && notifications.length > 0) {\n            return true;\n        }\n        return false;\n    }\n\n    React.useEffect(() => {\n        const resizeObserver = new ResizeObserver(() => {\n            debounceNotificationRemeasure();\n        })\n        resizeObserver.observe(props.eGridCell);\n    }, []);\n\n\n    if (record.ui?.isLoading(column.name)) {\n        return <Shimmer className={styles.loading} />\n    }\n    switch (column.name) {\n        case CHECKBOX_COLUMN_KEY: {\n            return <div className={styles.cellContent}>\n                <Checkbox\n                    checked={props.node.isSelected()}\n                    onChange={(e, checked) => {\n                        e?.stopPropagation()\n                        selection.toggle(record, checked!)\n                    }} />\n            </div>\n        }\n        case Constants.RIBBON_BUTTONS_COLUMN_NAME: {\n            return <div className={styles.cellContent}>\n                <Commands record={record} />\n            </div>\n        }\n    }\n\n    return (\n        <div style={{\n            '--test': `${calculateNotificationsWrapperMinWidth()}px`\n        } as React.CSSProperties} className={styles.root} data-is-valid={isValid}>\n            <div className={styles.cellContentWrapper}>\n                <div className={styles.cellContent}>\n                    <InternalReadOnlyCell {...props} />\n                </div>\n            </div>\n            {shouldRenderNotificationsWrapper() &&\n                <div className={styles.notificationsWrapper}>\n                    {notifications && notifications.length > 0 &&\n                        <MemoizedNotifications className={styles.notifications} ref={notificationRef} notifications={notifications} />\n                    }\n                    {!isValid &&\n                        <MemoizedNotifications notifications={[\n                            {\n                                notificationLevel: 'ERROR',\n                                messages: [],\n                                iconName: 'Error',\n                                uniqueId: column.name,\n                                title: errorMessage,\n                                compact: true\n                            }\n                        ]} />\n                    }\n                    {\n                        shouldShowNotEditableNotification() &&\n                        <MemoizedNotifications className={styles.uneditableNotification} notifications={[{\n                            iconName: 'Uneditable',\n                            notificationLevel: 'RECOMMENDATION',\n                            uniqueId: column.name,\n                            title: grid.labels['value-not-editable'](),\n                            compact: true,\n                            messages: []\n                        }]} />\n                    }\n                </div>\n            }\n        </div>\n    )\n};\n\nconst InternalReadOnlyCell = (props: ICellProps) => {\n    const grid = useGridInstance();\n    const column = props.baseColumn;\n    const theme = useTheme();\n    const styles = getReadOnlyCellStyles(theme);\n    const record: IRecord = (() => {\n        //this is so we can load the updated record values from state\n        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get() as any;\n        return updatedRecord ?? props.data;\n    })();\n    const formattedValue = record.getFormattedValue(column.name);\n\n    const renderLink = (props: ILinkProps, formattedValue: string | null): JSX.Element => {\n        switch (column.dataType) {\n            case DataType.LOOKUP_OWNER:\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_CUSTOMER: {\n                if (!grid.isNavigationEnabled) {\n                    return renderText();\n                }\n            }\n        }\n        if (!formattedValue) {\n            return <></>\n        }\n        return (\n            <Link {...props} className={styles.link} title={formattedValue}>\n                {formattedValue}\n            </Link>\n        );\n    };\n    const renderText = (): JSX.Element => {\n        if (column.isPrimary && grid.isNavigationEnabled) {\n            return renderLink({\n                onClick: () => grid.openDatasetItem(record.getNamedReference())\n            }, formattedValue);\n        }\n        return <Text className={`${styles.text} talxis-cell-text`} title={formattedValue!}>{formattedValue}</Text>\n    }\n    const downloadFile = () => {\n        const storage = new FileAttribute(grid.pcfContext.webAPI);\n        const namedReference = record.getNamedReference();\n        storage.downloadFileFromAttribute({\n            //@ts-ignore - PowerApps do not follow the typings\n            entityName: namedReference.etn ?? namedReference.entityName,\n            recordId: record.getRecordId(),\n            fileAttribute: column.name,\n        }, true)\n    }\n\n    switch (column.dataType) {\n        case DataType.SINGLE_LINE_EMAIL: {\n            return renderLink({ href: `mailto:${formattedValue}` }, formattedValue);\n        }\n        case DataType.SINGLE_LINE_PHONE: {\n            return renderLink({ href: `tel:${formattedValue}` }, formattedValue);\n        }\n        case DataType.SINGLE_LINE_URL: {\n            return renderLink({\n                href: formattedValue ?? \"\",\n                target: '_blank',\n                rel: 'noopener noreferrer'\n            }, formattedValue);\n        }\n        case DataType.LOOKUP_SIMPLE:\n        case DataType.LOOKUP_OWNER:\n        case DataType.LOOKUP_CUSTOMER: {\n            return renderLink({\n                onClick: () => grid.openDatasetItem(record.getValue(column.name) as any)\n            }, formattedValue);\n        }\n        case DataType.FILE: {\n            if (!formattedValue) {\n                return <></>\n            }\n            return (\n                <div className={styles.fileWrapper}>\n                    <Icon iconName='Attach' />\n                    {\n                        renderLink({\n                            onClick: downloadFile\n                        }, grid.labels.download())\n                    }\n                </div>\n            )\n        }\n        case DataType.IMAGE: {\n            if (!formattedValue) {\n                return <></>\n            }\n            return (\n                <div className={styles.fileWrapper}>\n                    <Image className={styles.image} src={`data:image/png;base64,${formattedValue}`} />\n                    {\n                        renderLink({\n                            onClick: downloadFile\n                        }, 'Download')\n                    }\n                </div>\n            )\n        }\n        case DataType.OPTIONSET:\n        case DataType.MULTI_SELECT_OPTIONSET:\n        case DataType.TWO_OPTIONS: {\n            if (grid.enableOptionSetColors) {\n                return <ReadOnlyOptionSet\n                    column={column}\n                    record={record}\n                    defaultRender={renderText} />\n            }\n            return renderText();\n        }\n        default: {\n            return renderText()\n        }\n\n    }\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ReadOnlyCell.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ILinkProps, Shimmer } from '@fluentui/react';\nimport { Link } from '@fluentui/react';\nimport { Text } from '@fluentui/react';\nimport { getMultilineStyle, getReadOnlyCellStyles } from './styles';\nimport { Commands } from '../Commands/Commands';\nimport { Checkbox, Icon, useTheme, Image } from '@fluentui/react';\nimport { Constants, DataTypes, FileAttribute, IRecord } from '@talxis/client-libraries';\nimport { ReadOnlyOptionSet } from './ReadOnlyOptionSet/ReadOnlyOptionSet';\nimport { IGridColumn } from '../../../interfaces/IGridColumn';\nimport { DataType } from '../../../enums/DataType';\nimport { useGridInstance } from '../../../hooks/useGridInstance';\nimport { useSelectionController } from '../../../../selection/controllers/useSelectionController';\nimport { ICellRendererParams } from '@ag-grid-community/core';\nimport { CHECKBOX_COLUMN_KEY } from '../../../../constants';\nimport { INotificationsRef, Notifications } from './Notifications/Notifications';\nimport { useDebouncedCallback } from 'use-debounce';\n\ninterface ICellProps extends ICellRendererParams {\n    baseColumn: IGridColumn;\n    data: IRecord;\n    [key: string]: any;\n}\n\nexport const ReadOnlyCell = (props: ICellProps) => {\n    const selection = useSelectionController();\n    const column = props.baseColumn;\n    const record = props.data;\n    const theme = useTheme();\n    const styles = React.useMemo(() => getReadOnlyCellStyles(theme), [theme]);\n\n    if(column.name === CHECKBOX_COLUMN_KEY) {\n        return <div className={styles.cellContent}>\n        <Checkbox\n            checked={props.node.isSelected()}\n            onChange={(e, checked) => {\n                e?.stopPropagation()\n                selection.toggle(record, checked!)\n            }} />\n    </div>\n    }\n    const MemoizedNotifications = React.useMemo(() => {\n        return React.memo(Notifications, (prevProps, nextProps) => {\n            const previousIds = prevProps.notifications.map(x => x.uniqueId).join(';');\n            const nextIds = nextProps.notifications.map(x => x.uniqueId).join(';');\n            if (previousIds !== nextIds) {\n                return false;\n            }\n            return true;\n        });\n    }, []);\n    \n    const grid = useGridInstance();\n    const notifications = record.ui.getNotifications?.(column.name);\n    const notificationRef = React.useRef<INotificationsRef>(null);\n    //TODO: only do this if editable\n    const validation = record.getColumnInfo(column.name);\n\n    const debounceNotificationRemeasure = useDebouncedCallback(() => {\n        if (notifications && notifications.length > 0) {\n            notificationRef.current?.remeasureCommandBar();\n        }\n    }, 10)\n\n    debounceNotificationRemeasure();\n\n    const shouldShowNotEditableNotification = (): boolean => {\n        if (column.isEditable && !record.getColumnInfo(column.name).security.editable) {\n            return true;\n        }\n        return false;\n    }\n\n    const calculateNotificationsWrapperMinWidth = (): number => {\n        let count = 0;\n        if (notifications && notifications.length > 0) {\n            count++\n        }\n        if (validation?.error === true) {\n            count++;\n        }\n        if (shouldShowNotEditableNotification()) {\n            count++;\n        }\n        return count * 40;\n    }\n\n    const shouldRenderNotificationsWrapper = (): boolean => {\n        if (validation?.error === true) {\n            return true;\n        }\n        if (shouldShowNotEditableNotification()) {\n            return true;\n        }\n        if (notifications && notifications.length > 0) {\n            return true;\n        }\n        return false;\n    }\n\n    React.useEffect(() => {\n        const resizeObserver = new ResizeObserver(() => {\n            debounceNotificationRemeasure();\n        })\n        resizeObserver.observe(props.eGridCell);\n    }, []);\n\n\n    if (record.ui?.isLoading(column.name)) {\n        return <Shimmer className={styles.loading} />\n    }\n    if(column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) {\n        return <div className={styles.cellContent}>\n        <Commands record={record} />\n    </div>\n    }\n    return (\n        <div style={{\n            '--test': `${calculateNotificationsWrapperMinWidth()}px`\n        } as React.CSSProperties} className={styles.root} data-is-valid={!validation || validation.error === false}>\n            <div className={styles.cellContentWrapper}>\n                <div className={styles.cellContent}>\n                    <InternalReadOnlyCell {...props} />\n                </div>\n            </div>\n            {shouldRenderNotificationsWrapper() &&\n                <div className={styles.notificationsWrapper}>\n                    {notifications && notifications.length > 0 &&\n                        <MemoizedNotifications className={styles.notifications} ref={notificationRef} notifications={notifications} />\n                    }\n                    {validation?.error === true &&\n                        <MemoizedNotifications notifications={[\n                            {\n                                notificationLevel: 'ERROR',\n                                messages: [],\n                                iconName: 'Error',\n                                uniqueId: column.name,\n                                title: validation.errorMessage,\n                                compact: true\n                            }\n                        ]} />\n                    }\n                    {\n                        shouldShowNotEditableNotification() &&\n                        <MemoizedNotifications className={styles.uneditableNotification} notifications={[{\n                            iconName: 'Uneditable',\n                            notificationLevel: 'RECOMMENDATION',\n                            uniqueId: column.name,\n                            title: grid.labels['value-not-editable'](),\n                            compact: true,\n                            messages: []\n                        }]} />\n                    }\n                </div>\n            }\n        </div>\n    )\n};\n\nconst InternalReadOnlyCell = (props: ICellProps) => {\n    const grid = useGridInstance();\n    const column = props.baseColumn;\n    const theme = useTheme();\n    const styles = getReadOnlyCellStyles(theme);\n    const record = props.data;\n    const formattedValue = record.getFormattedValue(column.name);\n\n    const renderLink = (props: ILinkProps, formattedValue: string | null): JSX.Element => {\n        switch (column.dataType) {\n            case DataType.LOOKUP_OWNER:\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_CUSTOMER: {\n                if (!grid.isNavigationEnabled) {\n                    return renderText();\n                }\n            }\n        }\n        if (!formattedValue) {\n            return <></>\n        }\n        let className = styles.link;\n        switch(column.dataType) {\n            case DataTypes.Multiple:\n            case DataTypes.SingleLineTextArea: {\n               className += ` ${getMultilineStyle(props.node.rowHeight!)}`\n            }\n        }\n        return (\n            <Link {...props} className={className} title={formattedValue}>\n                {formattedValue}\n            </Link>\n        );\n    };\n    const renderText = (): JSX.Element => {\n        if (column.isPrimary && grid.isNavigationEnabled) {\n            return renderLink({\n                onClick: () => grid.openDatasetItem(record.getNamedReference())\n            }, formattedValue);\n        }\n        let className = `${styles.text} talxis-cell-text`\n        switch(column.dataType) {\n            case DataTypes.Multiple:\n            case DataTypes.SingleLineTextArea: {\n               className += ` ${getMultilineStyle(props.node.rowHeight!)}`\n            }\n        }\n        return <Text className={className} title={formattedValue!}>{formattedValue}</Text>\n    }\n    const downloadFile = () => {\n        const storage = new FileAttribute(grid.pcfContext.webAPI);\n        const namedReference = record.getNamedReference();\n        storage.downloadFileFromAttribute({\n            //@ts-ignore - PowerApps do not follow the typings\n            entityName: namedReference.etn ?? namedReference.entityName,\n            recordId: record.getRecordId(),\n            fileAttribute: column.name,\n        }, true)\n    }\n\n    switch (column.dataType) {\n        case DataType.SINGLE_LINE_EMAIL: {\n            return renderLink({ href: `mailto:${formattedValue}` }, formattedValue);\n        }\n        case DataType.SINGLE_LINE_PHONE: {\n            return renderLink({ href: `tel:${formattedValue}` }, formattedValue);\n        }\n        case DataType.SINGLE_LINE_URL: {\n            return renderLink({\n                href: formattedValue ?? \"\",\n                target: '_blank',\n                rel: 'noopener noreferrer'\n            }, formattedValue);\n        }\n        case DataType.LOOKUP_SIMPLE:\n        case DataType.LOOKUP_OWNER:\n        case DataType.LOOKUP_CUSTOMER: {\n            return renderLink({\n                onClick: () => grid.openDatasetItem(record.getValue(column.name)[0])\n            }, formattedValue);\n        }\n        case DataType.FILE: {\n            if (!formattedValue) {\n                return <></>\n            }\n            return (\n                <div className={styles.fileWrapper}>\n                    <Icon iconName='Attach' />\n                    {\n                        renderLink({\n                            onClick: downloadFile\n                        }, grid.labels.download())\n                    }\n                </div>\n            )\n        }\n        case DataType.IMAGE: {\n            if (!formattedValue) {\n                return <></>\n            }\n            return (\n                <div className={styles.fileWrapper}>\n                    <Image className={styles.image} src={`data:image/png;base64,${formattedValue}`} />\n                    {\n                        renderLink({\n                            onClick: downloadFile\n                        }, 'Download')\n                    }\n                </div>\n            )\n        }\n        case DataType.OPTIONSET:\n        case DataType.MULTI_SELECT_OPTIONSET:\n        case DataType.TWO_OPTIONS: {\n            if (grid.enableOptionSetColors) {\n                return <ReadOnlyOptionSet\n                    column={column}\n                    record={record}\n                    defaultRender={renderText} />\n            }\n            return renderText();\n        }\n        default: {\n            return renderText()\n        }\n\n    }\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/styles.d.ts

@@ -91,4 +91,9 @@ export declare const getReadOnlyCellStyles: (theme: ITheme) => import("@fluentui
         backgroundSize: string;
         background: string;
     };
+    multiline: {
+        alignSelf: string;
+        whiteSpace: string;
+    };
 }>;
+export declare const getMultilineStyle: (height: number) => string;

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/styles.js

@@ -1,4 +1,4 @@
-import { keyframes, mergeStyleSets } from '@fluentui/react';
+import { keyframes, mergeStyleSets, mergeStyles } from '@fluentui/react';
 
 const shimmer = keyframes({
     '100%': {
@@ -23,7 +23,7 @@ const getReadOnlyCellStyles = (theme) => {
         text: {
             fontSize: 14,
             overflow: 'hidden',
-            textOverflow: 'ellipsis'
+            textOverflow: 'ellipsis',
         },
         link: {
             fontSize: 14,
@@ -98,8 +98,26 @@ const getReadOnlyCellStyles = (theme) => {
             backgroundSize: '1000px 100%',
             background: `linear-gradient(to right, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 4%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 5%) 25%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 36%)`
         },
+        multiline: {
+            alignSelf: 'baseline',
+            whiteSpace: 'normal'
+        }
+    });
+};
+const getMultilineStyle = (height) => {
+    const clamp = Math.floor(height / 20);
+    return mergeStyles({
+        alignSelf: 'baseline',
+        whiteSpace: 'normal',
+        display: '-webkit-box',
+        textAlign: 'left',
+        overflowWrap: 'break-word',
+        lineHeight: "1.2",
+        paddingTop: 2,
+        '-webkit-line-clamp': clamp.toString(),
+        '-webkit-box-orient': 'vertical'
     });
 };
 
-export { getReadOnlyCellStyles };
+export { getMultilineStyle, getReadOnlyCellStyles };
 //# sourceMappingURL=styles.js.map