@talxis/base-controls 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Grid/core/components/AgGrid/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\n\nexport const getGridStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        root: {\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            '--ag-borders': 'none !important',\n            '.ag-root-wrapper': {\n                maxHeight: '100%',\n                '--ag-selected-row-background-color': theme.palette.themePrimary,\n                '--ag-range-selection-border-color': theme.palette.themePrimary,\n                '--ag-row-hover-color': theme.palette.black,\n                '--ag-row-border-color': theme.semanticColors.menuDivider,\n                '--ag-cell-horizontal-padding': 0,\n                '--ag-input-focus-border-color': theme.semanticColors.inputFocusBorderAlt,\n                borderBottom: `1px solid ${theme.semanticColors.menuDivider}`,\n                '.ag-row::before': {\n                    zIndex: 1\n                },\n                '.ag-row-hover::before': {\n                    opacity: 0.1\n                },\n                '.ag-row-selected::before': {\n                    opacity: 0.2\n                }\n            },\n            '.ag-root': {\n                minHeight: 180\n            },\n            '.ag-body': {\n                borderTop: `1px solid ${theme.semanticColors.menuDivider}`\n            },\n            '.ag-header-viewport': {\n                backgroundColor: `${theme.semanticColors.bodyBackground}`\n            },\n            '.ag-center-cols-container': {\n                minWidth: '100%',\n            },\n            '.ag-layout-auto-height .ag-center-cols-clipper, .ag-layout-auto-height .ag-center-cols-container, .ag-layout-print .ag-center-cols-clipper, .ag-layout-print .ag-center-cols-container': {\n                minHeight: '42px !important'\n            },\n            '.ag-header-cell': {\n                paddingLeft: 0,\n                paddingRight: 0,\n                backgroundColor: `${theme.semanticColors.bodyBackground} !important`\n            },\n            '.ag-cell': {\n                border: 'none !important',\n                borderRadius: 0\n            },\n            '.ag-cell-focus': {\n                zIndex: 2,\n                '::after': {\n                    content: \"''\",\n                    position: 'absolute',\n                    inset: '-1px',\n                    border: `3px solid ${theme.semanticColors.inputFocusBorderAlt}`,\n                    borderRadius: theme.effects.roundedCorner2,\n                    pointerEvents: 'none'\n                }\n            },\n            '.ag-cell-focus:has([data-is-valid=\"false\"])': {\n                '::after': {\n                    borderColor: `${theme.semanticColors.errorIcon} !important`\n                }\n            },\n            '.ag-floating-bottom .ag-row-pinned': {\n                borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n                borderBottom: 'none',\n            }\n        }\n    })\n};"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ICellRendererParams } from "@ag-grid-community/core";
+import { IGridColumn } from "../../interfaces/IGridColumn";
+import { IRecord } from "@talxis/client-libraries";
+import { ICellValues } from "../AgGrid/model/AgGrid";
+export interface ICellProps extends ICellRendererParams {
+    baseColumn: IGridColumn;
+    isCellEditor: boolean;
+    data: IRecord;
+    value: ICellValues;
+}
+export declare const Cell: (props: ICellProps) => JSX.Element;
+export declare const InternalCell: (props: ICellProps) => JSX.Element;

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

@@ -0,0 +1,158 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Constants } from '@talxis/client-libraries';
+import { ThemeProvider, Checkbox, useTheme, Shimmer } from '@fluentui/react';
+import { useMemo, useState, useEffect } from 'react';
+import { getCellStyles, getInnerCellStyles } from './styles.js';
+import { CHECKBOX_COLUMN_KEY } from '../../../constants.js';
+import { useGridInstance } from '../../hooks/useGridInstance.js';
+import { Notifications } from './Notifications/Notifications.js';
+import { CellContent } from './CellContent/CellContent.js';
+import { useThemeGenerator, getClassNames } from '@talxis/react-components';
+import { useControlTheme } from '../../../../../utils/theme/hooks/useControlTheme.js';
+
+const Cell = (props) => {
+    const styles = useMemo(() => getCellStyles(), []);
+    const cellFormatting = props.value.customFormatting;
+    const cellTheme = useThemeGenerator(cellFormatting.primaryColor, cellFormatting.backgroundColor, cellFormatting.textColor, cellFormatting.themeOverride);
+    const grid = useGridInstance();
+    const record = props.data;
+    const column = props.baseColumn;
+    const shouldRenderEmptyCell = () => {
+        if (record.getDataProvider().getSummarizationType() === 'aggregation') {
+            if (column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME || column.name === CHECKBOX_COLUMN_KEY) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const renderContent = () => {
+        if (shouldRenderEmptyCell()) {
+            return jsx(Fragment, {});
+        }
+        switch (props.baseColumn.name) {
+            case CHECKBOX_COLUMN_KEY: {
+                return (jsx(Checkbox, { checked: props.node.isSelected(), onChange: (e, checked) => {
+                        grid.selection.toggle(props.node.id);
+                    }, styles: {
+                        checkbox: styles.checkbox
+                    } }));
+            }
+            default: {
+                return jsx(InternalCell, { ...props });
+            }
+        }
+    };
+    return jsx(ThemeProvider, { theme: cellTheme, className: getClassNames([styles.cellRoot, cellFormatting.className]), children: renderContent() });
+};
+const InternalCell = (props) => {
+    const column = props.baseColumn;
+    const record = props.data;
+    const formatting = props.value.customFormatting;
+    const grid = useGridInstance();
+    const error = props.value.error;
+    const notifications = props.value.notifications;
+    const errorMessage = props.value.errorMessage;
+    const theme = useTheme();
+    const applicationTheme = useControlTheme(grid.pcfContext.fluentDesignLanguage);
+    const [recordCommands, setRecordCommands] = useState(undefined);
+    const shouldShowNotEditableNotification = () => {
+        if (column.isEditable && !record.getColumnInfo(column.name).security.editable) {
+            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: [(column.type !== 'action' || column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) &&
+                    jsx(CellContent, { ...props, recordCommands: recordCommands }), shouldRenderNotifications &&
+                    renderNotifications()] }));
+    };
+    const getFarNotifications = () => {
+        const result = [];
+        const tooltipProps = {
+            tooltipProps: {
+                theme: applicationTheme
+            },
+            calloutProps: {
+                theme: applicationTheme,
+            }
+        };
+        if (shouldShowNotEditableNotification()) {
+            result.push({
+                key: 'noteditable',
+                text: grid.labels['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;
+        }
+        if (column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME && !recordCommands) {
+            return true;
+        }
+        return false;
+    };
+    const shouldRenderNotifications = getShouldRenderNotifications();
+    const styles = useMemo(() => getInnerCellStyles(props.isCellEditor, theme, props.value.columnAlignment), [props.isCellEditor, theme, props.value.columnAlignment]);
+    useEffect(() => {
+        if (column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) {
+            (async () => {
+                //@ts-ignore - typings
+                setRecordCommands(await grid.dataset.retrieveRecordCommand([record.getRecordId()], grid.inlineRibbonButtonIds));
+            })();
+        }
+    }, [record.getValue(column.name)]);
+    return jsx("div", { className: styles.innerCellRoot, "data-is-valid": !error, children: renderContent() });
+};
+
+export { Cell, InternalCell };
+//# sourceMappingURL=Cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../../../../../../src/components/Grid/core/components/Cell/Cell.tsx"],"sourcesContent":["import { ICellRendererParams } from \"@ag-grid-community/core\";\nimport { IGridColumn } from \"../../interfaces/IGridColumn\";\nimport { Constants, IRecord } from \"@talxis/client-libraries\";\nimport { Checkbox, ITooltipHostProps, Shimmer, ThemeProvider, useTheme } from \"@fluentui/react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { getCellStyles, getInnerCellStyles } from \"./styles\";\nimport { CHECKBOX_COLUMN_KEY } from \"../../../constants\";\nimport { useGridInstance } from \"../../hooks/useGridInstance\";\nimport { Notifications } from \"./Notifications/Notifications\";\nimport { CellContent } from \"./CellContent/CellContent\";\nimport { ICellValues } from \"../AgGrid/model/AgGrid\";\nimport { getClassNames, ICommandBarItemProps, useThemeGenerator } from \"@talxis/react-components\";\nimport { useControlTheme } from \"../../../../../utils\";\n\nexport interface ICellProps extends ICellRendererParams {\n    baseColumn: IGridColumn;\n    isCellEditor: boolean;\n    data: IRecord;\n    value: ICellValues;\n}\nexport const Cell = (props: ICellProps) => {\n    const styles = useMemo(() => getCellStyles(), [])\n    const cellFormatting = props.value.customFormatting;\n    const cellTheme = useThemeGenerator(cellFormatting.primaryColor, cellFormatting.backgroundColor, cellFormatting.textColor, cellFormatting.themeOverride);\n    const grid = useGridInstance();\n    const record = props.data;\n    const column = props.baseColumn;\n    \n    const shouldRenderEmptyCell = () => {\n        if(record.getDataProvider().getSummarizationType() === 'aggregation') {\n            if(column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME || column.name === CHECKBOX_COLUMN_KEY) {\n                return true;\n            }\n        }\n        return false;\n    }\n\n    const renderContent = () => {\n        if (shouldRenderEmptyCell()) {\n            return <></>\n        }\n        switch (props.baseColumn.name) {\n            case CHECKBOX_COLUMN_KEY: {\n                return (\n                    <Checkbox\n                        checked={props.node.isSelected()}\n                        onChange={(e, checked) => {\n                            grid.selection.toggle(props.node.id!);\n                        }}\n                        styles={{\n                            checkbox: styles.checkbox\n                        }} />\n                );\n            }\n            default: {\n                return <InternalCell {...props} />\n            }\n        }\n    }\n\n    return <ThemeProvider theme={cellTheme} className={getClassNames([styles.cellRoot, cellFormatting.className])}>\n        {renderContent()}\n    </ThemeProvider>\n}\n\n\nexport const InternalCell = (props: ICellProps) => {\n    const column = props.baseColumn;\n    const record = props.data;\n    const formatting = props.value.customFormatting;\n    const grid = useGridInstance();\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.pcfContext.fluentDesignLanguage);\n    const [recordCommands, setRecordCommands] = useState(undefined);\n\n    const shouldShowNotEditableNotification = () => {\n        if (column.isEditable && !record.getColumnInfo(column.name).security.editable) {\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                {(column.type !== 'action' || column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) &&\n                    <CellContent {...props} recordCommands={recordCommands} />\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.labels['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        if (column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME && !recordCommands) {\n            return true;\n\n        }\n        return false;\n    }\n\n    const shouldRenderNotifications = getShouldRenderNotifications();\n    const styles = useMemo(() => getInnerCellStyles(props.isCellEditor, theme, props.value.columnAlignment), [props.isCellEditor, theme, props.value.columnAlignment]);\n\n    useEffect(() => {\n        if (column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME) {\n            (async () => {\n                //@ts-ignore - typings\n                setRecordCommands(await grid.dataset.retrieveRecordCommand([record.getRecordId()], grid.inlineRibbonButtonIds));\n            })();\n        }\n    }, [record.getValue(column.name)]);\n\n    return <div className={styles.innerCellRoot} data-is-valid={!error}>\n        {renderContent()}\n    </div>\n}"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;AAoBa,MAAA,IAAI,GAAG,CAAC,KAAiB,KAAI;AACtC,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,aAAa,EAAE,EAAE,EAAE,CAAC,CAAA;AACjD,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC;IACpD,MAAM,SAAS,GAAG,iBAAiB,CAAC,cAAc,CAAC,YAAY,EAAE,cAAc,CAAC,eAAe,EAAE,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;AACzJ,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC;AAC1B,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC;IAEhC,MAAM,qBAAqB,GAAG,MAAK;QAC/B,IAAG,MAAM,CAAC,eAAe,EAAE,CAAC,oBAAoB,EAAE,KAAK,aAAa,EAAE;AAClE,YAAA,IAAG,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC,0BAA0B,IAAI,MAAM,CAAC,IAAI,KAAK,mBAAmB,EAAE;AAC5F,gBAAA,OAAO,IAAI,CAAC;AACf,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAA;IAED,MAAM,aAAa,GAAG,MAAK;QACvB,IAAI,qBAAqB,EAAE,EAAE;AACzB,YAAA,OAAOA,iBAAK,CAAA;AACf,SAAA;AACD,QAAA,QAAQ,KAAK,CAAC,UAAU,CAAC,IAAI;YACzB,KAAK,mBAAmB,EAAE;gBACtB,QACIA,IAAC,QAAQ,EAAA,EACL,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,EAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAI;wBACrB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAG,CAAC,CAAC;qBACzC,EACD,MAAM,EAAE;wBACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;AAC5B,qBAAA,EAAA,CAAI,EACX;AACL,aAAA;AACD,YAAA,SAAS;AACL,gBAAA,OAAOA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,KAAK,GAAI,CAAA;AACrC,aAAA;AACJ,SAAA;AACL,KAAC,CAAA;IAED,OAAOA,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC,EACxG,QAAA,EAAA,aAAa,EAAE,EAAA,CACJ,CAAA;AACpB,EAAC;AAGY,MAAA,YAAY,GAAG,CAAC,KAAiB,KAAI;AAC9C,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC;AAChC,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC;AAC1B,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC;AAChD,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;AAChC,IAAA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC;AAChD,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC;AAC9C,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC/E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEhE,MAAM,iCAAiC,GAAG,MAAK;AAC3C,QAAA,IAAI,MAAM,CAAC,UAAU,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE;AAC3E,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAA;IAED,MAAM,4BAA4B,GAAG,MAAc;QAC/C,IAAI,KAAK,CAAC,YAAY,EAAE;AACpB,YAAA,OAAO,KAAK,CAAC;AAChB,SAAA;QACD,IAAI,KAAK,KAAK,IAAI,EAAE;AAChB,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;QACD,IAAI,iCAAiC,EAAE,EAAE;AACrC,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACD,QAAA,IAAI,aAAa,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;AAC3C,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAA;IAED,MAAM,aAAa,GAAG,MAAkB;QACpC,IAAI,SAAS,EAAE,EAAE;AACb,YAAA,QACIA,GAAA,CAAC,OAAO,EAAA,EAAC,MAAM,EAAE;oBACb,cAAc,EAAE,MAAM,CAAC,cAAc;oBACrC,IAAI,EAAE,MAAM,CAAC,WAAW;AAC3B,iBAAA,EAAA,CAAI,EACP;AACL,SAAA;AACD,QAAA,QACIC,IACK,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC,0BAA0B;oBAC9EF,GAAC,CAAA,WAAW,OAAK,KAAK,EAAE,cAAc,EAAE,cAAc,EAAI,CAAA,EAE7D,yBAAyB;oBACtB,mBAAmB,EAAE,CAE1B,EAAA,CAAA,EACN;AACL,KAAC,CAAA;IAED,MAAM,mBAAmB,GAAG,MAA6B;QACrD,MAAM,MAAM,GAA2B,EAAE,CAAC;AAC1C,QAAA,MAAM,YAAY,GAAsB;AACpC,YAAA,YAAY,EAAE;AACV,gBAAA,KAAK,EAAE,gBAAgB;AAC1B,aAAA;AACD,YAAA,YAAY,EAAE;AACV,gBAAA,KAAK,EAAE,gBAAgB;AAC1B,aAAA;SACJ,CAAA;QACD,IAAI,iCAAiC,EAAE,EAAE;YACrC,MAAM,CAAC,IAAI,CAAC;AACR,gBAAA,GAAG,EAAE,aAAa;AAClB,gBAAA,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE;AACzC,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,gBAAgB,EAAE,YAAY;AAC9B,gBAAA,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,MAAM,EAAE;wBACJ,IAAI,EAAE,MAAM,CAAC,kBAAkB;AAClC,qBAAA;AACJ,iBAAA;AACJ,aAAA,CAAC,CAAA;AACL,SAAA;AACD,QAAA,IAAI,KAAK,EAAE;YACP,MAAM,CAAC,IAAI,CAAC;AACR,gBAAA,GAAG,EAAE,OAAO;AACZ,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,IAAI,EAAE,YAAY;AAClB,gBAAA,gBAAgB,EAAE,YAAY;AAC9B,gBAAA,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,MAAM,EAAE;wBACJ,IAAI,EAAE,MAAM,CAAC,aAAa;AAC7B,qBAAA;AACJ,iBAAA;AACJ,aAAA,CAAC,CAAA;AACL,SAAA;AACD,QAAA,OAAO,MAAM,CAAC;AAClB,KAAC,CAAA;IAED,MAAM,mBAAmB,GAAG,MAAkB;AAC1C,QAAA,OAAOA,GAAC,CAAA,aAAa,EACjB,EAAA,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,MAAM,CAAC,IAAI,KAAK,QAAQ,EACxC,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,eAAe,EAC5C,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,mBAAmB,EAAE,GAAI,CAAA;AAC3C,KAAC,CAAA;IAED,MAAM,SAAS,GAAG,MAAK;AACnB,QAAA,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;AACrB,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;QACD,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC,0BAA0B,IAAI,CAAC,cAAc,EAAE;AACzE,YAAA,OAAO,IAAI,CAAC;AAEf,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAA;AAED,IAAA,MAAM,yBAAyB,GAAG,4BAA4B,EAAE,CAAC;AACjE,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IAEnK,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC,0BAA0B,EAAE;YACtD,CAAC,YAAW;;gBAER,iBAAiB,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;aACnH,GAAG,CAAC;AACR,SAAA;AACL,KAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAEnC,IAAA,OAAOA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAAiB,eAAA,EAAA,CAAC,KAAK,EAAA,QAAA,EAC7D,aAAa,EAAE,GACd,CAAA;AACV;;;;"}

package/dist/components/Grid/core/components/Cell/CellContent/CellContent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ICellProps } from '../Cell';
+import { ICommand } from '@talxis/client-libraries';
+interface ICellContentProps extends ICellProps {
+    recordCommands?: ICommand[];
+}
+export declare const CellContent: (props: ICellContentProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,230 @@
+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';
+
+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 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]);
+    //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 getFluentDesignLanguage = (fluentDesignLanguage) => {
+        //@ts-ignore
+        const formatting = agGrid.getCellFormatting(props);
+        const mergedOverrides = merge({}, fluentDesignLanguage?.v8FluentOverrides ?? {}, formatting.themeOverride);
+        const columnAlignment = valueRef.current.columnAlignment;
+        const result = ControlTheme.GenerateFluentDesignLanguage(formatting.primaryColor, formatting.backgroundColor, formatting.textColor, {
+            v8FluentOverrides: merge({}, {
+                semanticColors: {
+                    inputBorder: 'transparent',
+                    inputBorderHovered: 'transparent',
+                    inputBackground: formatting.backgroundColor,
+                    focusBorder: 'transparent',
+                    disabledBorder: 'transparent',
+                    inputFocusBorderAlt: 'transparent',
+                    errorText: 'transparent'
+                },
+                fonts: record.getDataProvider().getSummarizationType() === 'aggregation' ? {
+                    medium: {
+                        fontWeight: 600
+                    }
+                } : {},
+                effects: {
+                    underlined: false
+                },
+                components: {
+                    'TextField': {
+                        styles: {
+                            field: {
+                                textAlign: columnAlignment
+                            }
+                        }
+                    },
+                    'ComboBox': {
+                        styles: {
+                            input: {
+                                textAlign: columnAlignment === 'right' ? 'right' : undefined,
+                                paddingRight: columnAlignment === 'right' ? 8 : undefined,
+                            }
+                        }
+                    },
+                    'DatePicker': {
+                        styles: {
+                            root: {
+                                '.ms-TextField-field': {
+                                    paddingRight: columnAlignment === 'right' ? 8 : undefined,
+                                    textAlign: columnAlignment === 'right' ? 'right' : 'left'
+                                }
+                            }
+                        }
+                    },
+                    'Toggle': {
+                        styles: {
+                            root: {
+                                justifyContent: getJustifyContent(columnAlignment)
+                            }
+                        }
+                    }
+                }
+            }, mergedOverrides),
+            applicationTheme: fluentDesignLanguage?.applicationTheme
+        });
+        return result;
+    };
+    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());
+    };
+    const debouncedNotifyOutputChanged = useDebouncedCallback((outputs) => onNotifyOutputChanged(outputs), 100);
+    React.useEffect(() => {
+        mountedRef.current = true;
+        setShouldRenderNestedControl(true);
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    if (!shouldRenderNestedControl) {
+        return jsx(Fragment, {});
+    }
+    return jsx(NestedControlRenderer, { context: grid.pcfContext, parameters: {
+            ControlName: valueRef.current.customControl.name,
+            LoadingType: 'shimmer',
+            Bindings: grid.getBindings(record, getColumn(), valueRef.current.customControl),
+            ControlStates: {
+                isControlDisabled: !valueRef.current.editing
+            },
+        }, onNotifyOutputChanged: (outputs) => {
+            //talxis portal does not have debounce for notifyoutput
+            //Power Apps does a debounce of 100ms
+            if (getColumn().oneClickEdit && client.isTalxisPortal()) {
+                debouncedNotifyOutputChanged(outputs);
+            }
+            else {
+                onNotifyOutputChanged(outputs);
+            }
+        }, onOverrideComponentProps: (componentProps) => {
+            return {
+                ...componentProps,
+                rootContainerProps: {
+                    ...componentProps.rootContainerProps,
+                    className: styles.controlRoot
+                },
+                controlContainerProps: {
+                    className: styles.controlContainer
+                },
+                overridenControlContainerProps: {
+                    className: styles.overridenControlContainer
+                },
+                messageBarProps: {
+                    ...componentProps.messageBarProps,
+                    styles: {
+                        root: styles.errorMessageRoot,
+                        content: styles.errorMessageContent
+                    }
+                },
+                loadingProps: {
+                    ...componentProps.loadingProps,
+                    shimmerProps: {
+                        ...componentProps.loadingProps.shimmerProps,
+                        styles: {
+                            ...componentProps.loadingProps?.shimmerProps?.styles,
+                            shimmerWrapper: styles.shimmerWrapper
+                        }
+                    },
+                    containerProps: {
+                        ...componentProps.loadingProps?.containerProps,
+                        className: styles.loadingWrapper
+                    }
+                },
+                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
+                        //useful if the custom component is required only for renderer, but not for editor or vice versa
+                        if (result === null) {
+                            return defaultRender();
+                        }
+                        return result;
+                    }
+                    return defaultRender();
+                },
+                onOverrideUnmount: (control, defaultUnmount) => {
+                    if (valueRef.current.customComponent) {
+                        const result = valueRef.current.customComponent.onUnmount(control.getContainer());
+                        //onRender can explicitly return null to force the grid to use native renderer
+                        //useful if the custom component is required only for renderer, but not for editor or vice versa
+                        if (result === null) {
+                            return defaultUnmount();
+                        }
+                        return result;
+                    }
+                    //@ts-ignore - internal types
+                    //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()) {
+                        return;
+                    }
+                    return defaultUnmount();
+                },
+                onOverrideControlProps: (controlProps) => {
+                    //here we always need to fetch the latest parameters
+                    //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)
+                    });
+                    return {
+                        ...controlProps,
+                        context: {
+                            ...controlProps.context,
+                            mode: Object.create(controlProps.context.mode, {
+                                allocatedHeight: {
+                                    value: node.rowHeight - 1
+                                },
+                            }),
+                            parameters: parameters,
+                            fluentDesignLanguage: getFluentDesignLanguage(controlProps.context.fluentDesignLanguage)
+                        },
+                        parameters: parameters
+                    };
+                }
+            };
+        } });
+};
+
+export { CellContent };
+//# sourceMappingURL=CellContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CellContent.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/CellContent/CellContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useGridInstance } from '../../../hooks/useGridInstance';\nimport { ICellProps } from '../Cell';\nimport { getCellContentStyles } from './styles';\nimport { NestedControlRenderer } from '../../../../../NestedControlRenderer/NestedControlRenderer';\nimport { ControlTheme, IFluentDesignState } from '../../../../../../utils';\nimport { IComboBoxStyles, IDatePickerStyles, ITextFieldStyles, IToggleStyles, merge, useTheme } from '@fluentui/react';\nimport { useRerender } from '@talxis/react-components';\nimport { getJustifyContent } from '../styles';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { Client, ICommand } from '@talxis/client-libraries';\nimport { AgGridContext } from '../../AgGrid/context';\n\nconst client = new Client();\n\ninterface ICellContentProps extends ICellProps {\n    recordCommands?: ICommand[];\n}\n\n\nexport const CellContent = (props: ICellContentProps) => {\n    const columnRef = React.useRef(props.baseColumn);\n    const mountedRef = React.useRef(false);\n    const valueRef = React.useRef(props.value);\n    const recordCommands = props.recordCommands;\n    columnRef.current = props.baseColumn;\n    valueRef.current = props.value;\n    const rerender = useRerender();\n    const grid = useGridInstance();\n    const agGrid = React.useContext(AgGridContext);\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), [valueRef.current.columnAlignment]);\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    const getColumn = () => {\n        return columnRef.current;\n    }\n\n    const getFluentDesignLanguage = (fluentDesignLanguage?: IFluentDesignState) => {\n        //@ts-ignore\n        const formatting = agGrid.getCellFormatting(props);\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                    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: record.getDataProvider().getSummarizationType() === 'aggregation' ? {\n                        medium: {\n                            fontWeight: 600 as any\n                        }\n                    }: {},\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            ),\n            applicationTheme: fluentDesignLanguage?.applicationTheme\n        })\n        return result;\n    }\n\n    const onNotifyOutputChanged = (outputs: any) => {\n        let isEditing = props.isCellEditor;\n        //if we are not mounted, set editing to true so requestRender gets run\n        //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\n        if (!mountedRef.current) {\n            isEditing = false;\n        }\n        grid.onNotifyOutputChanged(record, columnRef.current, isEditing, outputs.value, () => rerender())\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\n    return <NestedControlRenderer\n        context={grid.pcfContext}\n        parameters={{\n            ControlName: valueRef.current.customControl.name,\n            LoadingType: 'shimmer',\n            Bindings: grid.getBindings(record, getColumn(), valueRef.current.customControl),\n            ControlStates: {\n                isControlDisabled: !valueRef.current.editing\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() && !grid.getClient().isTalxisPortal()) {\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                        ...controlProps.parameters,\n                        ...grid.getParameters(record, getColumn(), props.isCellEditor, recordCommands)\n                    })\n                    return {\n                        ...controlProps,\n                        context: {\n                            ...controlProps.context,\n                            mode: Object.create(controlProps.context.mode, {\n                                allocatedHeight: {\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/styles.d.ts

@@ -0,0 +1,33 @@
+import { IColumn } from "@talxis/client-libraries";
+export declare const getCellContentStyles: (columnAlignment: IColumn['alignment']) => import("@fluentui/react").IProcessedStyleSet<{
+    controlRoot: {
+        height: string;
+        order: number | undefined;
+        minWidth: number;
+        overflow: string;
+        flexGrow: number;
+        border: string;
+    };
+    controlContainer: {
+        height: string;
+    };
+    loadingWrapper: {
+        height: string;
+        display: string;
+        alignItems: string;
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    overridenControlContainer: {
+        height: string;
+    };
+    shimmerWrapper: {
+        height: number;
+    };
+    errorMessageRoot: {
+        height: string;
+    };
+    errorMessageContent: {
+        alignItems: string;
+    };
+}>;

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

@@ -0,0 +1,39 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getCellContentStyles = (columnAlignment) => {
+    return mergeStyleSets({
+        controlRoot: {
+            height: '100%',
+            order: columnAlignment === 'right' ? 2 : undefined,
+            minWidth: 0,
+            overflow: 'hidden',
+            flexGrow: 1,
+            border: '2px solid transparent',
+        },
+        controlContainer: {
+            height: '100%'
+        },
+        loadingWrapper: {
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            paddingLeft: 10,
+            paddingRight: 10
+        },
+        overridenControlContainer: {
+            height: '100%'
+        },
+        shimmerWrapper: {
+            height: 10
+        },
+        errorMessageRoot: {
+            height: '100%'
+        },
+        errorMessageContent: {
+            alignItems: 'center'
+        }
+    });
+};
+
+export { getCellContentStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/Grid/core/components/Cell/CellContent/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/CellContent/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { IColumn } from \"@talxis/client-libraries\"\n\nexport const getCellContentStyles = (columnAlignment: IColumn['alignment']) => {\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        },\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":";;AAGa,MAAA,oBAAoB,GAAG,CAAC,eAAqC,KAAI;AAC1E,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;AACjB,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/Notifications.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ICommandBarItemProps } from "@fluentui/react";
+import { IAddControlNotificationOptions, IColumn, ICustomColumnFormatting } from "@talxis/client-libraries";
+interface INotifications {
+    notifications: IAddControlNotificationOptions[];
+    formatting: Required<ICustomColumnFormatting>;
+    isActionColumn: boolean;
+    columnAlignment: IColumn['alignment'];
+    farItems?: ICommandBarItemProps[];
+}
+export declare const Notifications: (props: INotifications) => JSX.Element;
+export {};