@talxis/base-controls 1.2510.1 → 1.2512.1

package/dist/components/Grid/cells/cell/Cell.js

@@ -0,0 +1,231 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider, useTheme, mergeStyleSets, Shimmer, IconButton } from '@fluentui/react';
+import { Constants } from '@talxis/client-libraries';
+import { useRerender, useThemeGenerator, getClassNames } from '@talxis/react-components';
+import { useRef, useCallback, useEffect, useMemo } from 'react';
+import { useGridInstance } from '../../grid/useGridInstance.js';
+import { CellContent } from './content/CellContent.js';
+import { Notifications } from './notifications/Notifications.js';
+import { getCellStyles, getInnerCellStyles } from './styles.js';
+import { useAgGridInstance } from '../../grid/ag-grid/useAgGridInstance.js';
+import ReactDOM from 'react-dom';
+import { GridContext } from '../../grid/GridContext.js';
+import { AgGridContext } from '../../grid/ag-grid/AgGridContext.js';
+import { useEventEmitter } from '../../../../hooks/useEventEmitter.js';
+import { useControlTheme } from '../../../../utils/theme/hooks/useControlTheme.js';
+
+const Cell = (props) => {
+    const containerRef = useRef(null);
+    const memoizedContainerRef = useRef();
+    const { record, node, baseColumn } = props;
+    const column = baseColumn;
+    const grid = useGridInstance();
+    const agGrid = useAgGridInstance();
+    const lastLoadingRefValue = useRef(props.value.loading);
+    const rerender = useRerender();
+    const skipCellRendering = (() => {
+        const dataProvider = record.getDataProvider();
+        const summarizationType = dataProvider.getSummarizationType();
+        switch (true) {
+            case column.type === 'action': {
+                return false;
+            }
+            case props.value.loading: {
+                return false;
+            }
+            case summarizationType === 'grouping': {
+                if (lastLoadingRefValue.current && !props.value.loading) {
+                    return false;
+                }
+                const _column = dataProvider.getColumnsMap()[column.name];
+                if (_column.aggregation?.aggregationFunction && !_column.grouping?.isGrouped) {
+                    return false;
+                }
+                if (grid.getGroupType() === 'nested') {
+                    return dataProvider.grouping.getGroupBys()[0].columnName !== column.name;
+                }
+                return !column.grouping?.isGrouped;
+            }
+            case summarizationType === 'aggregation': {
+                return !dataProvider.getColumnsMap()[column.name]?.aggregation?.aggregationFunction;
+            }
+            case summarizationType === 'none': {
+                return !!column.grouping?.isGrouped;
+            }
+            default: {
+                return false;
+            }
+        }
+    })();
+    lastLoadingRefValue.current = props.value.loading;
+    const onCellClick = useCallback((e) => {
+        if (record.getDataProvider().getSummarizationType() === 'grouping' && !grid.isSelectionModifierKeyPressed()) {
+            e.stopPropagation();
+        }
+        else if (node.isSelected()) {
+            e.stopPropagation();
+        }
+    }, []);
+    const onFieldValueChanged = useCallback(async (columnName) => {
+        if (columnName !== column.name) {
+            return;
+        }
+        props.api.refreshCells({
+            rowNodes: [node]
+        });
+        setTimeout(() => {
+            rerender();
+        }, 0);
+    }, []);
+    const getTopLevelCellWrapperStyles = () => {
+        return mergeStyleSets({
+            cellRoot: {
+                width: '100%',
+                height: (() => {
+                    if (skipCellRendering && column.autoHeight) {
+                        return `${grid.getDefaultRowHeight()}px !important`;
+                    }
+                    return '100% !important';
+                })()
+            }
+        });
+    };
+    useEventEmitter(record, 'onFieldValueChanged', onFieldValueChanged);
+    useEffect(() => {
+        memoizedContainerRef.current = containerRef.current;
+        containerRef.current?.addEventListener('click', onCellClick);
+        return () => {
+            containerRef.current?.removeEventListener('click', onCellClick);
+            ReactDOM.unmountComponentAtNode(memoizedContainerRef.current);
+        };
+    }, []);
+    useEffect(() => {
+        if (skipCellRendering) {
+            ReactDOM.render(jsx(Fragment, {}), containerRef.current);
+        }
+        else {
+            ReactDOM.render(jsx(GridContext.Provider, { value: grid, children: jsx(AgGridContext.Provider, { value: agGrid, children: jsx(CellContentWrapper, { ...props }) }) }), containerRef.current);
+        }
+    });
+    return jsx("div", { className: getTopLevelCellWrapperStyles().cellRoot, ref: containerRef });
+};
+const CellContentWrapper = (props) => {
+    const { value: cellData, record } = props;
+    const { customFormatting } = cellData;
+    const cellTheme = useThemeGenerator(customFormatting.primaryColor, customFormatting.backgroundColor, customFormatting.textColor, customFormatting.themeOverride);
+    const styles = useMemo(() => getCellStyles(), [cellTheme]);
+    const cellRef = useRef(null);
+    const rerender = useRerender();
+    useEventEmitter(record, 'onBeforeSaved', rerender);
+    return jsx(ThemeProvider, { ref: cellRef, theme: cellTheme, className: getClassNames([styles.cellRoot, customFormatting.className]), children: jsx(InternalCell, { ...props }) });
+};
+const InternalCell = (props) => {
+    const column = props.baseColumn;
+    const record = props.record;
+    const node = props.node;
+    const formatting = props.value.customFormatting;
+    const grid = useGridInstance();
+    const agGrid = useAgGridInstance();
+    const error = props.value.error;
+    const notifications = props.value.notifications;
+    const errorMessage = props.value.errorMessage;
+    const theme = useTheme();
+    const applicationTheme = useControlTheme(grid.getPcfContext().fluentDesignLanguage);
+    const rerender = useRerender();
+    const styles = useMemo(() => getInnerCellStyles(props.isCellEditor, theme, props.value.columnAlignment, node.expanded), [props.isCellEditor, theme, props.value.columnAlignment, node.expanded]);
+    const shouldShowNotEditableNotification = () => {
+        if (column.isEditable && !record.getColumnInfo(column.name).security.editable && record.getSummarizationType() === 'none') {
+            return true;
+        }
+        return false;
+    };
+    const getShouldRenderNotifications = () => {
+        if (props.isCellEditor) {
+            return false;
+        }
+        if (error === true) {
+            return true;
+        }
+        if (shouldShowNotEditableNotification()) {
+            return true;
+        }
+        if (notifications && notifications.length > 0) {
+            return true;
+        }
+        return false;
+    };
+    const renderContent = () => {
+        if (isLoading()) {
+            return (jsx(Shimmer, { styles: {
+                    shimmerWrapper: styles.shimmerWrapper,
+                    root: styles.shimmerRoot
+                } }));
+        }
+        return (jsxs(Fragment, { children: [grid.isColumnExpandable(record, column) &&
+                    jsx(IconButton, { iconProps: { iconName: 'ChevronRight' }, styles: {
+                            root: styles.groupToggleButtonRoot,
+                            icon: styles.groupToggleButtonIcon
+                        }, onClick: () => {
+                            agGrid.toggleGroup(node);
+                            rerender();
+                        } }), (column.type !== 'action' || column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) &&
+                    jsx(CellContent, { ...props }), shouldRenderNotifications &&
+                    renderNotifications()] }));
+    };
+    const getFarNotifications = () => {
+        const result = [];
+        const tooltipProps = {
+            tooltipProps: {
+                theme: applicationTheme
+            },
+            calloutProps: {
+                theme: applicationTheme,
+            }
+        };
+        if (shouldShowNotEditableNotification()) {
+            result.push({
+                key: 'noteditable',
+                text: grid.getLabels()['value-not-editable'](),
+                iconOnly: true,
+                disabled: true,
+                tooltipHostProps: tooltipProps,
+                iconProps: {
+                    iconName: 'Uneditable',
+                    styles: {
+                        root: styles.uneditableIconRoot
+                    }
+                }
+            });
+        }
+        if (error) {
+            result.push({
+                key: 'error',
+                iconOnly: true,
+                disabled: true,
+                text: errorMessage,
+                tooltipHostProps: tooltipProps,
+                iconProps: {
+                    iconName: 'Error',
+                    styles: {
+                        root: styles.errorIconRoot
+                    }
+                }
+            });
+        }
+        return result;
+    };
+    const renderNotifications = () => {
+        return jsx(Notifications, { formatting: formatting, isActionColumn: column.type === 'action', columnAlignment: props.value.columnAlignment, notifications: notifications, farItems: getFarNotifications() });
+    };
+    const isLoading = () => {
+        if (props.value.loading) {
+            return true;
+        }
+        return false;
+    };
+    const shouldRenderNotifications = getShouldRenderNotifications();
+    return jsx("div", { className: styles.innerCellRoot, "data-is-loading": isLoading(), "data-is-valid": !error, children: renderContent() });
+};
+
+export { Cell, InternalCell };
+//# sourceMappingURL=Cell.js.map

package/dist/components/Grid/cells/cell/Cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../../../../../src/components/Grid/cells/cell/Cell.tsx"],"sourcesContent":["import { ICellRendererParams } from \"@ag-grid-community/core\";\nimport { ThemeProvider, useTheme, Shimmer, ICommandBarItemProps, ITooltipHostProps, IconButton, mergeStyleSets } from \"@fluentui/react\";\nimport { IRecord, Constants, DataProvider, IRecordEvents } from \"@talxis/client-libraries\";\nimport { useThemeGenerator, getClassNames, useRerender } from \"@talxis/react-components\";\nimport { useMemo, useEffect, useRef, useCallback } from \"react\";\nimport { useControlTheme } from \"../../../../utils\";\nimport { ICellValues } from \"../../grid/ag-grid/AgGridModel\";\nimport { IGridColumn } from \"../../grid/GridModel\";\nimport { useGridInstance } from \"../../grid/useGridInstance\";\nimport { CellContent } from \"./content/CellContent\";\nimport { Notifications } from \"./notifications/Notifications\";\nimport { getCellStyles, getInnerCellStyles } from \"./styles\";\nimport { useAgGridInstance } from \"../../grid/ag-grid/useAgGridInstance\";\nimport ReactDOM from \"react-dom\";\nimport { GridContext } from \"../../grid/GridContext\";\nimport { AgGridContext } from \"../../grid/ag-grid/AgGridContext\";\nimport { useEventEmitter } from \"../../../../hooks/useEventEmitter\";\n\nexport interface ICellProps extends ICellRendererParams {\n    baseColumn: IGridColumn;\n    isCellEditor: boolean;\n    record: IRecord;\n    value: ICellValues;\n}\n\nexport const Cell = (props: ICellProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const memoizedContainerRef = useRef<HTMLDivElement | null>();\n    const { record, node, baseColumn } = props;\n    const column = baseColumn;\n    const grid = useGridInstance();\n    const agGrid = useAgGridInstance();\n    const lastLoadingRefValue = useRef<boolean>(props.value.loading);\n    const rerender = useRerender();\n\n    const skipCellRendering = (() => {\n        const dataProvider = record.getDataProvider();\n        const summarizationType = dataProvider.getSummarizationType();\n        switch (true) {\n            case column.type === 'action': {\n                return false;\n            }\n            case props.value.loading: {\n                return false;\n            }\n            case summarizationType === 'grouping': {\n                if (lastLoadingRefValue.current && !props.value.loading) {\n                    return false;\n                }\n                const _column = dataProvider.getColumnsMap()[column.name]!;\n                if (_column.aggregation?.aggregationFunction && !_column.grouping?.isGrouped) {\n                    return false;\n                }\n                if (grid.getGroupType() === 'nested') {\n                    return dataProvider.grouping.getGroupBys()[0].columnName !== column.name\n                }\n                return !column.grouping?.isGrouped;\n            }\n            case summarizationType === 'aggregation': {\n                return !dataProvider.getColumnsMap()[column.name]?.aggregation?.aggregationFunction;\n            }\n            case summarizationType === 'none': {\n                return !!column.grouping?.isGrouped\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n    lastLoadingRefValue.current = props.value.loading;\n\n    const onCellClick = useCallback((e: MouseEvent) => {\n        if (record.getDataProvider().getSummarizationType() === 'grouping' && !grid.isSelectionModifierKeyPressed()) {\n            e.stopPropagation();\n        }\n        else if (node.isSelected()) {\n            e.stopPropagation();\n        }\n    }, []);\n\n    const onFieldValueChanged = useCallback(async (columnName: string) => {\n        if (columnName !== column.name) {\n            return;\n        }\n        props.api.refreshCells({\n            rowNodes: [node]\n        })\n        setTimeout(() => {\n            rerender();\n        }, 0);\n    }, []);\n\n\n    const getTopLevelCellWrapperStyles = () => {\n        return mergeStyleSets({\n            cellRoot: {\n                width: '100%',\n                height: (() => {\n                    if (skipCellRendering && column.autoHeight) {\n                        return `${grid.getDefaultRowHeight()}px !important`;\n                    }\n                    return '100% !important';\n                })()\n            }\n        })\n    }\n    useEventEmitter<IRecordEvents>(record, 'onFieldValueChanged', onFieldValueChanged);\n\n    useEffect(() => {\n        memoizedContainerRef.current = containerRef.current;\n        containerRef.current?.addEventListener('click', onCellClick);\n        return () => {\n            containerRef.current?.removeEventListener('click', onCellClick);\n            ReactDOM.unmountComponentAtNode(memoizedContainerRef.current!);\n        }\n    }, []);\n\n\n    useEffect(() => {\n        if (skipCellRendering) {\n            ReactDOM.render(<></>, containerRef.current)\n        }\n        else {\n            ReactDOM.render(\n                <GridContext.Provider value={grid}>\n                    <AgGridContext.Provider value={agGrid}>\n                        <CellContentWrapper {...props} />\n                    </AgGridContext.Provider>\n                </GridContext.Provider>,\n                containerRef.current\n            );\n        }\n    });\n    return <div className={getTopLevelCellWrapperStyles().cellRoot} ref={containerRef} />\n}\n\nconst CellContentWrapper = (props: ICellProps) => {\n    const { value: cellData, record } = props;\n    const { customFormatting } = cellData;\n    const cellTheme = useThemeGenerator(customFormatting.primaryColor, customFormatting.backgroundColor, customFormatting.textColor, customFormatting.themeOverride);\n    const styles = useMemo(() => getCellStyles(cellTheme), [cellTheme])\n    const cellRef = useRef<HTMLDivElement>(null);\n    const rerender = useRerender();\n    useEventEmitter<IRecordEvents>(record, 'onBeforeSaved', rerender);\n\n    return <ThemeProvider\n        ref={cellRef}\n        theme={cellTheme}\n        className={getClassNames([styles.cellRoot, customFormatting.className])}>\n        <InternalCell {...props} />\n    </ThemeProvider>\n}\n\n\nexport const InternalCell = (props: ICellProps) => {\n    const column = props.baseColumn;\n    const record = props.record;\n    const node = props.node;\n    const formatting = props.value.customFormatting;\n    const grid = useGridInstance();\n    const agGrid = useAgGridInstance();\n    const error = props.value.error;\n    const notifications = props.value.notifications;\n    const errorMessage = props.value.errorMessage;\n    const theme = useTheme();\n    const applicationTheme = useControlTheme(grid.getPcfContext().fluentDesignLanguage);\n    const rerender = useRerender();\n    const styles = useMemo(() => getInnerCellStyles(\n        props.isCellEditor,\n        theme,\n        props.value.columnAlignment,\n        node.expanded\n    ), [props.isCellEditor, theme, props.value.columnAlignment, node.expanded]);\n\n    const shouldShowNotEditableNotification = () => {\n        if (column.isEditable && !record.getColumnInfo(column.name).security.editable && record.getSummarizationType() === 'none') {\n            return true;\n        }\n        return false;\n    }\n\n    const getShouldRenderNotifications = (): boolean => {\n        if (props.isCellEditor) {\n            return false;\n        }\n        if (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    const renderContent = (): JSX.Element => {\n        if (isLoading()) {\n            return (\n                <Shimmer styles={{\n                    shimmerWrapper: styles.shimmerWrapper,\n                    root: styles.shimmerRoot\n                }} />\n            );\n        }\n        return (\n            <>\n                {grid.isColumnExpandable(record, column) &&\n                    <IconButton\n                        iconProps={{ iconName: 'ChevronRight' }}\n                        styles={{\n                            root: styles.groupToggleButtonRoot,\n                            icon: styles.groupToggleButtonIcon\n                        }}\n                        onClick={() => {\n                            agGrid.toggleGroup(node);\n                            rerender();\n                        }} />\n                }\n                {(column.type !== 'action' || column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) &&\n                    <CellContent {...props} />\n                }\n                {shouldRenderNotifications &&\n                    renderNotifications()\n                }\n            </>\n        )\n    }\n\n    const getFarNotifications = (): ICommandBarItemProps[] => {\n        const result: ICommandBarItemProps[] = [];\n        const tooltipProps: ITooltipHostProps = {\n            tooltipProps: {\n                theme: applicationTheme\n            },\n            calloutProps: {\n                theme: applicationTheme,\n            }\n        }\n        if (shouldShowNotEditableNotification()) {\n            result.push({\n                key: 'noteditable',\n                text: grid.getLabels()['value-not-editable'](),\n                iconOnly: true,\n                disabled: true,\n                tooltipHostProps: tooltipProps,\n                iconProps: {\n                    iconName: 'Uneditable',\n                    styles: {\n                        root: styles.uneditableIconRoot\n                    }\n                }\n            })\n        }\n        if (error) {\n            result.push({\n                key: 'error',\n                iconOnly: true,\n                disabled: true,\n                text: errorMessage,\n                tooltipHostProps: tooltipProps,\n                iconProps: {\n                    iconName: 'Error',\n                    styles: {\n                        root: styles.errorIconRoot\n                    }\n                }\n            })\n        }\n        return result;\n    }\n\n    const renderNotifications = (): JSX.Element => {\n        return <Notifications\n            formatting={formatting}\n            isActionColumn={column.type === 'action'}\n            columnAlignment={props.value.columnAlignment}\n            notifications={notifications}\n            farItems={getFarNotifications()} />\n    }\n\n    const isLoading = () => {\n        if (props.value.loading) {\n            return true;\n        }\n        return false;\n    }\n    const shouldRenderNotifications = getShouldRenderNotifications();\n\n    return <div\n        className={styles.innerCellRoot}\n        data-is-loading={isLoading()}\n        data-is-valid={!error}>\n        {renderContent()}\n    </div>\n}"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/dist/components/Grid/cells/cell/content/CellContent.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICellProps } from "../Cell";
+export declare const CellContent: (props: ICellProps) => JSX.Element;

package/dist/components/Grid/{core/components/Cell/CellContent → cells/cell/content}/CellContent.js

@@ -1,44 +1,60 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import { useGridInstance } from '../../../hooks/useGridInstance.js';
-import { getCellContentStyles } from './styles.js';
-import { NestedControlRenderer } from '../../../../../NestedControlRenderer/NestedControlRenderer.js';
 import { useTheme, merge } from '@fluentui/react';
-import { useRerender } from '@talxis/react-components';
-import { getJustifyContent } from '../styles.js';
-import { useDebouncedCallback } from 'use-debounce';
 import { Client } from '@talxis/client-libraries';
-import { AgGridContext } from '../../AgGrid/context.js';
-import { ControlTheme } from '../../../../../../utils/theme/ControlTheme.js';
+import React from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { getJustifyContent } from '../../../grid/styles.js';
+import { useGridInstance } from '../../../grid/useGridInstance.js';
+import { getCellContentStyles } from './styles.js';
+import { useAgGridInstance } from '../../../grid/ag-grid/useAgGridInstance.js';
+import { NestedControlRenderer } from '../../../../NestedControlRenderer/NestedControlRenderer.js';
+import { ControlTheme } from '../../../../../utils/theme/ControlTheme.js';
 
 const client = new Client();
 const CellContent = (props) => {
     const columnRef = React.useRef(props.baseColumn);
     const mountedRef = React.useRef(false);
     const valueRef = React.useRef(props.value);
-    const recordCommands = props.recordCommands;
     columnRef.current = props.baseColumn;
     valueRef.current = props.value;
-    const rerender = useRerender();
     const grid = useGridInstance();
-    const agGrid = React.useContext(AgGridContext);
+    const agGrid = useAgGridInstance();
     const record = props.data;
     const node = props.node;
     const themeRef = React.useRef(useTheme());
     themeRef.current = useTheme();
-    const styles = React.useMemo(() => getCellContentStyles(valueRef.current.columnAlignment), [valueRef.current.columnAlignment]);
+    const styles = React.useMemo(() => getCellContentStyles(valueRef.current.columnAlignment, node.rowHeight), [valueRef.current.columnAlignment, node.rowHeight]);
     //defer loading of the nested control to solve edge case where the changed values from onNotifyOutputChanged triggered by unmount would not be available straight away
     const [shouldRenderNestedControl, setShouldRenderNestedControl] = React.useState(false);
     const getColumn = () => {
         return columnRef.current;
     };
+    const getThemeId = () => {
+        if (valueRef.current.aggregatedValue != null) {
+            return `${valueRef.current.aggregatedValue}`;
+        }
+        return null;
+    };
+    const getFonts = () => {
+        if (valueRef.current.aggregatedValue != null) {
+            return {
+                medium: {
+                    fontSize: 15,
+                    fontWeight: 600
+                }
+            };
+        }
+        else {
+            return {};
+        }
+    };
     const getFluentDesignLanguage = (fluentDesignLanguage) => {
-        //@ts-ignore
-        const formatting = agGrid.getCellFormatting(props);
+        const formatting = grid.getFieldFormatting(record, getColumn().name);
         const mergedOverrides = merge({}, fluentDesignLanguage?.v8FluentOverrides ?? {}, formatting.themeOverride);
         const columnAlignment = valueRef.current.columnAlignment;
         const result = ControlTheme.GenerateFluentDesignLanguage(formatting.primaryColor, formatting.backgroundColor, formatting.textColor, {
             v8FluentOverrides: merge({}, {
+                id: getThemeId(),
                 semanticColors: {
                     inputBorder: 'transparent',
                     inputBorderHovered: 'transparent',
@@ -48,11 +64,7 @@ const CellContent = (props) => {
                     inputFocusBorderAlt: 'transparent',
                     errorText: 'transparent'
                 },
-                fonts: record.getDataProvider().getSummarizationType() === 'aggregation' ? {
-                    medium: {
-                        fontWeight: 600
-                    }
-                } : {},
+                fonts: getFonts(),
                 effects: {
                     underlined: false
                 },
@@ -95,14 +107,11 @@ const CellContent = (props) => {
         });
         return result;
     };
+    const isControlDisabled = () => {
+        return !valueRef.current.editable;
+    };
     const onNotifyOutputChanged = (outputs) => {
-        let isEditing = props.isCellEditor;
-        //if we are not mounted, set editing to true so requestRender gets run
-        //if this is not present, a PCF editor might trigger this too late and we would not see the current value in renderer until next
-        if (!mountedRef.current) {
-            isEditing = false;
-        }
-        grid.onNotifyOutputChanged(record, columnRef.current, isEditing, outputs.value, () => rerender());
+        agGrid.onNotifyOutputChanged(record, columnRef.current.name, outputs.value, valueRef.current.parameters);
     };
     const debouncedNotifyOutputChanged = useDebouncedCallback((outputs) => onNotifyOutputChanged(outputs), 100);
     React.useEffect(() => {
@@ -115,12 +124,12 @@ const CellContent = (props) => {
     if (!shouldRenderNestedControl) {
         return jsx(Fragment, {});
     }
-    return jsx(NestedControlRenderer, { context: grid.pcfContext, parameters: {
+    return jsx(NestedControlRenderer, { context: grid.getPcfContext(), parameters: {
             ControlName: valueRef.current.customControl.name,
             LoadingType: 'shimmer',
             Bindings: grid.getBindings(record, getColumn(), valueRef.current.customControl),
             ControlStates: {
-                isControlDisabled: !valueRef.current.editable
+                isControlDisabled: isControlDisabled()
             },
         }, onNotifyOutputChanged: (outputs) => {
             //talxis portal does not have debounce for notifyoutput
@@ -166,9 +175,6 @@ const CellContent = (props) => {
                     }
                 },
                 onOverrideRender: (control, isCustomPcfComponent, defaultRender) => {
-                    if (isCustomPcfComponent) {
-                        grid.setUsesNestedPcfs();
-                    }
                     if (valueRef.current.customComponent) {
                         const result = valueRef.current.customComponent.onRender(control.getProps(), themeRef.current, control.getContainer());
                         //onRender can explicitly return null to force the grid to use native renderer
@@ -194,7 +200,9 @@ const CellContent = (props) => {
                     //skip the unmounting for custom PCF's in Power Apps
                     // PCF unmount in Power Apps causes other nested PCF's to reinitialize which causes flickering
                     //umounting of nested PCF's happens on grid destroy to prevent memory leaks (currently done by refreshing the page as no better method was found)
-                    if (control.isMountedPcfComponent() && !grid.getClient().isTalxisPortal()) {
+                    if (control.isMountedPcfComponent() && !client.isTalxisPortal()) {
+                        //we can atleast destroy the react component
+                        control.getControlInstance()?.destroy();
                         return;
                     }
                     return defaultUnmount();
@@ -204,8 +212,8 @@ const CellContent = (props) => {
                     //we still might have old one's cached in valueRef
                     const columnInfo = record.getColumnInfo(getColumn().name);
                     const parameters = columnInfo.ui.getControlParameters({
-                        ...controlProps.parameters,
-                        ...grid.getParameters(record, getColumn(), props.isCellEditor, recordCommands)
+                        ...grid.getFieldBindingParameters(record, getColumn(), props.isCellEditor),
+                        ...controlProps.parameters
                     });
                     return {
                         ...controlProps,
@@ -213,6 +221,7 @@ const CellContent = (props) => {
                             ...controlProps.context,
                             mode: Object.create(controlProps.context.mode, {
                                 allocatedHeight: {
+                                    //-4 is needed to offset the auto size behavior
                                     value: node.rowHeight - 1
                                 },
                             }),

package/dist/components/Grid/cells/cell/content/CellContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellContent.js","sources":["../../../../../../src/components/Grid/cells/cell/content/CellContent.tsx"],"sourcesContent":["import { useTheme, ITextFieldStyles, IComboBoxStyles, IDatePickerStyles, IToggleStyles, mergeThemes, merge } from \"@fluentui/react\";\nimport { Client, DataProvider, ICommand, IRecord } from \"@talxis/client-libraries\";\nimport React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IFluentDesignState, ControlTheme } from \"../../../../../utils\";\nimport { NestedControlRenderer } from \"../../../../NestedControlRenderer\";\nimport { getJustifyContent } from \"../../../grid/styles\";\nimport { useGridInstance } from \"../../../grid/useGridInstance\";\nimport { ICellProps } from \"../Cell\";\nimport { getCellContentStyles } from \"./styles\";\nimport { useAgGridInstance } from \"../../../grid/ag-grid/useAgGridInstance\";\n\nconst client = new Client();\n\n\nexport const CellContent = (props: ICellProps) => {\n    const columnRef = React.useRef(props.baseColumn);\n    const mountedRef = React.useRef(false);\n    const valueRef = React.useRef(props.value);\n    columnRef.current = props.baseColumn;\n    valueRef.current = props.value\n    const grid = useGridInstance();\n    const agGrid = useAgGridInstance();\n    const record = props.data;\n    const node = props.node;\n    const themeRef = React.useRef(useTheme());\n    themeRef.current = useTheme();\n    const styles = React.useMemo(() => getCellContentStyles(valueRef.current.columnAlignment, node.rowHeight!), [valueRef.current.columnAlignment, node.rowHeight]);\n    //defer loading of the nested control to solve edge case where the changed values from onNotifyOutputChanged triggered by unmount would not be available straight away\n    const [shouldRenderNestedControl, setShouldRenderNestedControl] = React.useState(false);\n\n    const getColumn = () => {\n        return columnRef.current;\n    }\n\n    const getThemeId = () => {\n        if (valueRef.current.aggregatedValue != null) {\n            return `${valueRef.current.aggregatedValue}`\n        }\n        return null;\n    }\n\n    const getFonts = () => {\n        if (valueRef.current.aggregatedValue != null) {\n            return {\n                medium: {\n                    fontSize: 15,\n                    fontWeight: 600\n                }\n            }\n        }\n        else {\n            return {};\n        }\n    }\n\n    const getFluentDesignLanguage = (fluentDesignLanguage?: IFluentDesignState) => {\n        const formatting = grid.getFieldFormatting(record, getColumn().name);\n        const mergedOverrides: any = merge({}, fluentDesignLanguage?.v8FluentOverrides ?? {}, formatting.themeOverride);\n        const columnAlignment = valueRef.current.columnAlignment;\n        const result = ControlTheme.GenerateFluentDesignLanguage(formatting.primaryColor, formatting.backgroundColor, formatting.textColor, {\n            v8FluentOverrides: merge({},\n                {\n                    id: getThemeId(),\n                    semanticColors: {\n                        inputBorder: 'transparent',\n                        inputBorderHovered: 'transparent',\n                        inputBackground: formatting.backgroundColor,\n                        focusBorder: 'transparent',\n                        disabledBorder: 'transparent',\n                        inputFocusBorderAlt: 'transparent',\n                        errorText: 'transparent'\n\n                    },\n                    fonts: getFonts(),\n                    effects: {\n                        underlined: false\n                    },\n                    components: {\n                        'TextField': {\n                            styles: {\n                                field: {\n                                    textAlign: columnAlignment\n                                }\n\n                            } as ITextFieldStyles\n                        },\n                        'ComboBox': {\n                            styles: {\n                                input: {\n                                    textAlign: columnAlignment === 'right' ? 'right' : undefined,\n                                    paddingRight: columnAlignment === 'right' ? 8 : undefined,\n                                }\n                            } as IComboBoxStyles\n                        },\n                        'DatePicker': {\n                            styles: {\n                                root: {\n                                    '.ms-TextField-field': {\n                                        paddingRight: columnAlignment === 'right' ? 8 : undefined,\n                                        textAlign: columnAlignment === 'right' ? 'right' : 'left'\n                                    }\n                                } as any\n                            } as IDatePickerStyles\n                        },\n                        'Toggle': {\n                            styles: {\n                                root: {\n                                    justifyContent: getJustifyContent(columnAlignment)\n                                }\n                            } as IToggleStyles\n                        }\n                    }\n                },\n                mergedOverrides\n            ) as any,\n            applicationTheme: fluentDesignLanguage?.applicationTheme\n        })\n        return result;\n    }\n\n    const isControlDisabled = () => {\n        return !valueRef.current.editable;\n    }\n\n    const onNotifyOutputChanged = (outputs: any) => {\n        agGrid.onNotifyOutputChanged(record, columnRef.current.name, outputs.value, valueRef.current.parameters)\n    }\n    const debouncedNotifyOutputChanged = useDebouncedCallback((outputs) => onNotifyOutputChanged(outputs), 100);\n\n    React.useEffect(() => {\n        mountedRef.current = true;\n        setShouldRenderNestedControl(true);\n        return () => {\n            mountedRef.current = false;\n        }\n    }, []);\n\n    if (!shouldRenderNestedControl) {\n        return <></>\n    }\n    return <NestedControlRenderer\n        context={grid.getPcfContext()}\n        parameters={{\n            ControlName: valueRef.current.customControl.name,\n            LoadingType: 'shimmer',\n            Bindings: grid.getBindings(record, getColumn(), valueRef.current.customControl),\n            ControlStates: {\n                isControlDisabled: isControlDisabled()\n            },\n        }}\n        onNotifyOutputChanged={(outputs) => {\n            //talxis portal does not have debounce for notifyoutput\n            //Power Apps does a debounce of 100ms\n            if (getColumn().oneClickEdit && client.isTalxisPortal()) {\n                debouncedNotifyOutputChanged(outputs);\n            }\n            else {\n                onNotifyOutputChanged(outputs);\n            }\n        }}\n        onOverrideComponentProps={(componentProps) => {\n            return {\n                ...componentProps,\n                rootContainerProps: {\n                    ...componentProps.rootContainerProps,\n                    className: styles.controlRoot\n                },\n                controlContainerProps: {\n                    className: styles.controlContainer\n                },\n                overridenControlContainerProps: {\n                    className: styles.overridenControlContainer\n                },\n                messageBarProps: {\n                    ...componentProps.messageBarProps,\n                    styles: {\n                        root: styles.errorMessageRoot,\n                        content: styles.errorMessageContent\n                    }\n                },\n                loadingProps: {\n                    ...componentProps.loadingProps,\n                    shimmerProps: {\n                        ...componentProps.loadingProps.shimmerProps,\n                        styles: {\n                            ...componentProps.loadingProps?.shimmerProps?.styles,\n                            shimmerWrapper: styles.shimmerWrapper\n                        }\n                    },\n                    containerProps: {\n                        ...componentProps.loadingProps?.containerProps,\n                        className: styles.loadingWrapper\n                    }\n                },\n                onOverrideRender: (control, isCustomPcfComponent, defaultRender) => {\n                    if (isCustomPcfComponent) {\n                        //grid.setUsesNestedPcfs();\n                    }\n                    if (valueRef.current.customComponent) {\n                        const result = valueRef.current.customComponent.onRender(control.getProps(), themeRef.current, control.getContainer())\n                        //onRender can explicitly return null to force the grid to use native renderer\n                        //useful if the custom component is required only for renderer, but not for editor or vice versa\n                        if (result === null) {\n                            return defaultRender();\n                        }\n                        return result;\n                    }\n                    return defaultRender();\n                },\n                onOverrideUnmount: (control, defaultUnmount) => {\n                    if (valueRef.current.customComponent) {\n                        const result = valueRef.current.customComponent.onUnmount(control.getContainer());\n                        //onRender can explicitly return null to force the grid to use native renderer\n                        //useful if the custom component is required only for renderer, but not for editor or vice versa\n                        if (result === null) {\n                            return defaultUnmount();\n                        }\n                        return result;\n                    }\n                    //@ts-ignore - internal types\n                    //skip the unmounting for custom PCF's in Power Apps\n                    // PCF unmount in Power Apps causes other nested PCF's to reinitialize which causes flickering\n                    //umounting of nested PCF's happens on grid destroy to prevent memory leaks (currently done by refreshing the page as no better method was found)\n                    if (control.isMountedPcfComponent() && !client.isTalxisPortal()) {\n                        //we can atleast destroy the react component\n                        control.getControlInstance()?.destroy();\n                        return;\n                    }\n                    return defaultUnmount();\n                },\n                onOverrideControlProps: (controlProps) => {\n                    //here we always need to fetch the latest parameters\n                    //we still might have old one's cached in valueRef\n                    const columnInfo = record.getColumnInfo(getColumn().name);\n                    const parameters = columnInfo.ui.getControlParameters({\n                        ...grid.getFieldBindingParameters(record, getColumn(), props.isCellEditor),\n                        ...controlProps.parameters\n                    })\n                    return {\n                        ...controlProps,\n                        context: {\n                            ...controlProps.context,\n                            mode: Object.create(controlProps.context.mode, {\n                                allocatedHeight: {\n                                    //-4 is needed to offset the auto size behavior\n                                    value: node.rowHeight! - 1\n                                },\n\n                            }),\n                            parameters: parameters,\n                            fluentDesignLanguage: getFluentDesignLanguage(controlProps.context.fluentDesignLanguage)\n                        },\n                        parameters: parameters\n                    }\n                }\n            }\n        }}\n    />\n}\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Grid/{core/components/Cell/CellContent → cells/cell/content}/styles.d.ts

@@ -1,5 +1,5 @@
 import { IColumn } from "@talxis/client-libraries";
-export declare const getCellContentStyles: (columnAlignment: IColumn['alignment']) => import("@fluentui/react").IProcessedStyleSet<{
+export declare const getCellContentStyles: (columnAlignment: IColumn['alignment'], height: number) => import("@fluentui/react").IProcessedStyleSet<{
     controlRoot: {
         height: string;
         order: number | undefined;
@@ -10,6 +10,9 @@ export declare const getCellContentStyles: (columnAlignment: IColumn['alignment'
     };
     controlContainer: {
         height: string;
+        '.ms-TextField--multiline .ms-TextField-fieldGroup': {
+            height: string;
+        };
     };
     loadingWrapper: {
         height: string;

package/dist/components/Grid/{core/components/Cell/CellContent → cells/cell/content}/styles.js

@@ -1,6 +1,6 @@
 import { mergeStyleSets } from '@fluentui/react';
 
-const getCellContentStyles = (columnAlignment) => {
+const getCellContentStyles = (columnAlignment, height) => {
     return mergeStyleSets({
         controlRoot: {
             height: '100%',
@@ -8,10 +8,15 @@ const getCellContentStyles = (columnAlignment) => {
             minWidth: 0,
             overflow: 'hidden',
             flexGrow: 1,
-            border: '2px solid transparent',
+            border: '2px solid transparent'
         },
         controlContainer: {
-            height: '100%'
+            height: '100%',
+            //TODO: this should be fixed in the control itself
+            '.ms-TextField--multiline .ms-TextField-fieldGroup': {
+                height: `${height}px !important`
+            }
+            //TODO: remove this, this should be fixed in the multiline textfield itself
         },
         loadingWrapper: {
             height: '100%',

package/dist/components/Grid/cells/cell/content/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/cells/cell/content/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { IColumn } from \"@talxis/client-libraries\"\n\nexport const getCellContentStyles = (columnAlignment: IColumn['alignment'], height: number) => {\n    return mergeStyleSets({\n        controlRoot: {\n            height: '100%',\n            order: columnAlignment === 'right' ? 2 : undefined,\n            minWidth: 0,\n            overflow: 'hidden',\n            flexGrow: 1,\n            border: '2px solid transparent'\n        },\n        controlContainer: {\n            height: '100%',\n            //TODO: this should be fixed in the control itself\n            '.ms-TextField--multiline .ms-TextField-fieldGroup': {\n                height: `${height}px !important`\n            }\n            //TODO: remove this, this should be fixed in the multiline textfield itself\n        },\n        loadingWrapper: {\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            paddingLeft: 10,\n            paddingRight: 10\n        },\n        overridenControlContainer: {\n            height: '100%'\n        },\n        shimmerWrapper: {\n            height: 10\n        },\n        errorMessageRoot: {\n            height: '100%'\n        },\n        errorMessageContent: {\n            alignItems: 'center'\n        }\n    })\n}"],"names":[],"mappings":";;MAGa,oBAAoB,GAAG,CAAC,eAAqC,EAAE,MAAc,KAAI;AAC1F,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,WAAW,EAAE;AACT,YAAA,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,eAAe,KAAK,OAAO,GAAG,CAAC,GAAG,SAAS;AAClD,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,MAAM,EAAE,uBAAuB;AAClC,SAAA;AACD,QAAA,gBAAgB,EAAE;AACd,YAAA,MAAM,EAAE,MAAM;;AAEd,YAAA,mDAAmD,EAAE;gBACjD,MAAM,EAAE,CAAG,EAAA,MAAM,CAAe,aAAA,CAAA;AACnC,aAAA;;AAEJ,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;AACD,QAAA,yBAAyB,EAAE;AACvB,YAAA,MAAM,EAAE,MAAM;AACjB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,gBAAgB,EAAE;AACd,YAAA,MAAM,EAAE,MAAM;AACjB,SAAA;AACD,QAAA,mBAAmB,EAAE;AACjB,YAAA,UAAU,EAAE,QAAQ;AACvB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/Grid/{core/components/Cell/Notifications → cells/cell/notifications}/Notifications.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ICommandBarItemProps } from "@fluentui/react";
-import { IAddControlNotificationOptions, IColumn, ICustomColumnFormatting } from "@talxis/client-libraries";
+import { IAddControlNotificationOptions, ICustomColumnFormatting, IColumn } from "@talxis/client-libraries";
 interface INotifications {
     notifications: IAddControlNotificationOptions[];
     formatting: Required<ICustomColumnFormatting>;

package/dist/components/Grid/{core/components/Cell/Notifications → cells/cell/notifications}/Notifications.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useTheme, ThemeProvider, Callout, Text, Link, Icon, PrimaryButton, DefaultButton } from '@fluentui/react';
-import { getNotificationStyles } from './styles.js';
-import { useMemo, useState, useRef, useEffect } from 'react';
 import { useResizeObserver, useThemeGenerator, CommandBar } from '@talxis/react-components';
-import { useGridInstance } from '../../../hooks/useGridInstance.js';
-import { useControlTheme } from '../../../../../../utils/theme/hooks/useControlTheme.js';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { useGridInstance } from '../../../grid/useGridInstance.js';
+import { getNotificationStyles } from './styles.js';
+import { useControlTheme } from '../../../../../utils/theme/hooks/useControlTheme.js';
 
 const Notifications = (props) => {
     const { notifications, formatting, farItems, isActionColumn, columnAlignment } = { ...props };
@@ -93,7 +93,7 @@ const Notifications = (props) => {
             overflowItems: overflowItems
         };
     };
-    const contextualMenuTheme = useControlTheme(grid.pcfContext.fluentDesignLanguage);
+    const contextualMenuTheme = useControlTheme(grid.getPcfContext().fluentDesignLanguage);
     const { items, overflowItems } = getCommandBarItems();
     useEffect(() => {
         if (isActionColumn) {

package/dist/components/Grid/cells/cell/notifications/Notifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.js","sources":["../../../../../../src/components/Grid/cells/cell/notifications/Notifications.tsx"],"sourcesContent":["import { ICommandBarItemProps, useTheme, ICommandBar, PrimaryButton, DefaultButton, Link, Icon, ThemeProvider, Callout, Text } from \"@fluentui/react\";\nimport { IAddControlNotificationOptions, ICustomColumnFormatting, IControlNotificationAction, IColumn } from \"@talxis/client-libraries\";\nimport { CommandBar, useResizeObserver, useThemeGenerator } from \"@talxis/react-components\";\nimport { useMemo, useState, useRef, useEffect } from \"react\";\nimport { useControlTheme } from \"../../../../../utils\";\nimport { useGridInstance } from \"../../../grid/useGridInstance\";\nimport { getNotificationStyles } from \"./styles\";\n\ninterface INotifications {\n    notifications: IAddControlNotificationOptions[],\n    formatting: Required<ICustomColumnFormatting>,\n    isActionColumn: boolean;\n    columnAlignment: IColumn['alignment'],\n    farItems?: ICommandBarItemProps[]\n}\n\n\nexport const Notifications = (props: INotifications) => {\n    const { notifications, formatting, farItems, isActionColumn, columnAlignment } = { ...props };\n    const grid = useGridInstance();\n    const theme = useTheme();\n    const styles = getNotificationStyles(isActionColumn, columnAlignment);\n    const iconId = useMemo(() => `icon${crypto.randomUUID()}`, []);\n    const [selectedNotification, setSelectedNotification] = useState<IAddControlNotificationOptions | null>(null);\n    const commandBarRef = useRef<ICommandBar>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const observe = useResizeObserver(() => {\n        commandBarRef.current?.remeasure();\n    })\n    const overridenTheme = useThemeGenerator(theme.semanticColors.bodyText, theme.semanticColors.bodyBackground, theme.semanticColors.bodyText, formatting.themeOverride);\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.calloutButtons}>\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.calloutLink}>\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\n    const getCommandBarItems = (): { items: ICommandBarItemProps[], overflowItems: ICommandBarItemProps[] } => {\n        const items: ICommandBarItemProps[] = [];\n        const overflowItems: ICommandBarItemProps[] = [];\n\n        notifications.map(notification => {\n            const item: ICommandBarItemProps = {\n                key: notification.uniqueId,\n                text: notification.text,\n                tooltipHostProps: {\n                    ...notification.buttonProps?.tooltipHostProps,\n                    calloutProps: {\n                        theme: contextualMenuTheme\n                    },\n                    tooltipProps: {\n                        theme: contextualMenuTheme\n                    },\n                },\n                iconProps: notification.iconName ? {\n                    iconName: notification.iconName,\n                    ...notification.buttonProps?.iconProps\n                } : undefined,\n                ...notification.buttonProps,\n                onClick: (e) => {\n                    notification.buttonProps?.onClick?.(e);\n                    onNotificationClick(notification);\n                }\n            }\n            if (notification.buttonProps?.renderedInOverflow) {\n                overflowItems.push(item);\n            }\n            else {\n                items.push(item);\n            }\n        })\n        return {\n            items: items,\n            overflowItems: overflowItems\n        }\n    }\n\n    const contextualMenuTheme = useControlTheme(grid.getPcfContext().fluentDesignLanguage);\n    const { items, overflowItems } = getCommandBarItems();\n\n    useEffect(() => {\n        if (isActionColumn) {\n            observe(containerRef.current!);\n        }\n    }, [isActionColumn]);\n\n\n    return <div ref={containerRef} className={styles.notificationsRoot}>\n        <ThemeProvider theme={overridenTheme}>\n            <CommandBar\n                contextualMenuTheme={contextualMenuTheme}\n                id={iconId}\n                componentRef={commandBarRef}\n                styles={{\n                    primarySet: styles.notificationsPrimarySet\n                }}\n                items={items}\n                overflowItems={overflowItems}\n                farItems={farItems} />\n        </ThemeProvider>\n        {selectedNotification &&\n            <Callout\n                theme={contextualMenuTheme}\n                hidden={!selectedNotification}\n                className={styles.callout}\n                onDismiss={() => setSelectedNotification(null)}\n                target={`#${iconId}`}>\n                <ThemeProvider className={styles.calloutContent} theme={contextualMenuTheme}>\n                    {selectedNotification.text &&\n                        <Text title={selectedNotification.text} className={styles.calloutTitle} variant={selectedNotification.messages.length > 0 ? 'xLarge' : undefined}>{selectedNotification.text}</Text>\n                    }\n                    <Text>{selectedNotification.messages[0]}</Text>\n                    {selectedNotification.actions &&\n                        renderActions(selectedNotification.actions)\n                    }\n                </ThemeProvider>\n            </Callout>\n        }\n    </div>\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Grid/{core/components/Cell/Notifications → cells/cell/notifications}/styles.js

@@ -1,5 +1,5 @@
 import { mergeStyleSets } from '@fluentui/react';
-import { getJustifyContent } from '../styles.js';
+import { getJustifyContent } from '../../../grid/styles.js';
 
 const getNotificationStyles = (isActionColumn, columnAlignment) => {
     return mergeStyleSets({

package/dist/components/Grid/cells/cell/notifications/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/cells/cell/notifications/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { IColumn } from \"@talxis/client-libraries\"\nimport { getJustifyContent } from \"../../../grid/styles\"\n\nexport const getNotificationStyles = (isActionColumn: boolean, columnAlignment: Required<IColumn['alignment']>) => {\n    return mergeStyleSets({\n        callout: {\n            width: 320,\n            padding: '20px 24px',\n        },\n        calloutContent: {\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 20,\n            '.ms-CommandBar-primaryCommand': {\n                gap: 10\n            }\n        },\n        calloutTitle: {\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        calloutLink: {\n            'i': {\n                position: 'relative',\n                top: 1,\n                marginRight: 3\n            }\n        },\n        calloutButtons: {\n            display: 'flex',\n            justifyContent: 'flex-end',\n            gap: 8\n        },\n        notificationsRoot: {\n            minWidth: isActionColumn ? 0 : undefined,\n            flex: isActionColumn ? 1 : undefined,\n        },\n        notificationsPrimarySet: {\n            order: 2,\n            justifyContent: isActionColumn ? getJustifyContent(columnAlignment) : undefined\n        }\n    })\n}"],"names":[],"mappings":";;;MAIa,qBAAqB,GAAG,CAAC,cAAuB,EAAE,eAA+C,KAAI;AAC9G,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,OAAO,EAAE;AACL,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,OAAO,EAAE,WAAW;AACvB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,+BAA+B,EAAE;AAC7B,gBAAA,GAAG,EAAE,EAAE;AACV,aAAA;AACJ,SAAA;AACD,QAAA,YAAY,EAAE;AACV,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,GAAG,EAAE;AACD,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,WAAW,EAAE,CAAC;AACjB,aAAA;AACJ,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,UAAU;AAC1B,YAAA,GAAG,EAAE,CAAC;AACT,SAAA;AACD,QAAA,iBAAiB,EAAE;YACf,QAAQ,EAAE,cAAc,GAAG,CAAC,GAAG,SAAS;YACxC,IAAI,EAAE,cAAc,GAAG,CAAC,GAAG,SAAS;AACvC,SAAA;AACD,QAAA,uBAAuB,EAAE;AACrB,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,cAAc,EAAE,cAAc,GAAG,iBAAiB,CAAC,eAAe,CAAC,GAAG,SAAS;AAClF,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}