@talxis/base-controls 1.2509.1-alpha.6 → 1.2509.2

package/dist/components/GridCellRenderer/OptionSet/styles.js

@@ -0,0 +1,29 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getColorfulOptionStyles = () => {
+    return mergeStyleSets({
+        option: {
+            borderRadius: 5,
+            padding: 2,
+            paddingLeft: 4,
+            paddingRight: 4,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            flexGrow: 1,
+        }
+    });
+};
+const getOptionSetStyles = () => {
+    return mergeStyleSets({
+        root: {
+            gap: 5,
+            display: 'flex',
+            overflow: 'hidden',
+            flexGrow: 1,
+            textAlign: 'center'
+        }
+    });
+};
+
+export { getColorfulOptionStyles, getOptionSetStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/GridCellRenderer/OptionSet/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/GridCellRenderer/OptionSet/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getColorfulOptionStyles = () => {\n    return mergeStyleSets({\n        option: {\n            borderRadius: 5,\n            padding: 2,\n            paddingLeft: 4,\n            paddingRight: 4,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            flexGrow: 1,\n        }\n    })\n}\n\nexport const getOptionSetStyles = () => {\n    return mergeStyleSets({\n        root: {\n            gap: 5,\n            display: 'flex',\n            overflow: 'hidden',\n            flexGrow: 1,\n            textAlign: 'center'\n        }\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,uBAAuB,GAAG,MAAK;AACxC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,MAAM,EAAE;AACJ,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,WAAW,EAAE,CAAC;AACd,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,QAAQ,EAAE,CAAC;AACd,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAM,kBAAkB,GAAG,MAAK;AACnC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,SAAS,EAAE,QAAQ;AACtB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/GridCellRenderer/RecordCommands/Icon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import 'external-svg-loader';
+interface IIcon {
+    name: string;
+}
+export declare const Icon: import("react").MemoExoticComponent<({ name }: IIcon) => JSX.Element>;
+export {};

package/dist/components/GridCellRenderer/RecordCommands/Icon.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo, useMemo } from 'react';
+import 'external-svg-loader';
+import { Client } from '@talxis/client-libraries';
+import { mergeStyleSets } from '@fluentui/react';
+
+const client = new Client();
+const styles = mergeStyleSets({
+    icon: {
+        width: 16,
+        height: 16,
+        marginLeft: 4,
+        marginRight: 4,
+    }
+});
+const IconComponent = ({ name }) => {
+    const getWebResourceUrl = () => {
+        if (client.isTalxisPortal()) {
+            return name;
+        }
+        const array = name.split('$webresource:');
+        return `https://${window.location.host}${window.Xrm.Utility.getGlobalContext().getWebResourceUrl(array[1] ?? name)}`;
+    };
+    const src = useMemo(() => {
+        return getWebResourceUrl();
+    }, [name]);
+    return (jsx("svg", { "data-src": src, className: styles.icon }));
+};
+const Icon = memo(IconComponent);
+
+export { Icon };
+//# sourceMappingURL=Icon.js.map

package/dist/components/GridCellRenderer/RecordCommands/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../../src/components/GridCellRenderer/RecordCommands/Icon.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport 'external-svg-loader';\nimport { Client } from '@talxis/client-libraries';\nimport { mergeStyleSets } from '@fluentui/react';\n\ninterface IIcon {\n    name: string\n}\n\nconst client = new Client();\n\nconst styles = mergeStyleSets({\n    icon: {\n        width: 16,\n        height: 16,\n        marginLeft: 4,\n        marginRight: 4,\n    }\n})\n\nconst IconComponent = ({ name }: IIcon) => {\n\n    const getWebResourceUrl = () => {\n        if(client.isTalxisPortal()) {\n            return name;\n        }\n        const array = name.split('$webresource:');\n        return `https://${window.location.host}${window.Xrm.Utility.getGlobalContext().getWebResourceUrl(array[1] ?? name)}`\n    }\n\n    const src = useMemo(() => {\n        return getWebResourceUrl();\n    }, [name]);\n\n    return (\n        <svg data-src={src} className={styles.icon} />\n    );\n};\n\nexport const Icon = memo(IconComponent);\n"],"names":["_jsx"],"mappings":";;;;;;AASA,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAE5B,MAAM,MAAM,GAAG,cAAc,CAAC;AAC1B,IAAA,IAAI,EAAE;AACF,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,UAAU,EAAE,CAAC;AACb,QAAA,WAAW,EAAE,CAAC;AACjB,KAAA;AACJ,CAAA,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAS,KAAI;IAEtC,MAAM,iBAAiB,GAAG,MAAK;AAC3B,QAAA,IAAG,MAAM,CAAC,cAAc,EAAE,EAAE;AACxB,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;QACD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC1C,OAAO,CAAA,QAAA,EAAW,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAA,EAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAA,CAAE,CAAA;AACxH,KAAC,CAAA;AAED,IAAA,MAAM,GAAG,GAAG,OAAO,CAAC,MAAK;QACrB,OAAO,iBAAiB,EAAE,CAAC;AAC/B,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,QACIA,GAAe,CAAA,KAAA,EAAA,EAAA,UAAA,EAAA,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAI,CAAA,EAChD;AACN,CAAC,CAAC;MAEW,IAAI,GAAG,IAAI,CAAC,aAAa;;;;"}

package/dist/components/GridCellRenderer/RecordCommands/RecordCommands.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ITheme } from "@talxis/react-components";
+import { PartialTheme } from "@fluentui/react";
+import { IColumn, ICommand } from "@talxis/client-libraries";
+interface IRecordCommands {
+    commands: ICommand[];
+    theme: ITheme;
+    applicationTheme: ITheme;
+    alignment: Required<IColumn['alignment']>;
+    themeOverride?: PartialTheme;
+}
+export declare const RecordCommands: (props: IRecordCommands) => JSX.Element;
+export {};

package/dist/components/GridCellRenderer/RecordCommands/RecordCommands.js

@@ -0,0 +1,103 @@
+import { jsx } from 'react/jsx-runtime';
+import { useThemeGenerator, useRerender, useResizeObserver, CommandBar } from '@talxis/react-components';
+import { useComponentProps } from '../useComponentProps.js';
+import { Icon } from './Icon.js';
+import { ThemeProvider } from '@fluentui/react';
+import { useRef, useMemo, useEffect } from 'react';
+import { getRecordCommandsStyles } from './styles.js';
+
+const fluentIconMap = {
+    'Activate': 'ActivateOrders',
+    'DeActivate': 'DeactivateOrders',
+    'ExportToExcel': 'ExcelDocument',
+    'ConnectionToOther': 'Assign',
+    'EmailLink': 'Link',
+    'Flows': 'Dataflows',
+    'RunReport': 'CRMReport',
+    'Report': 'CRMReport',
+    'Remove': 'Delete',
+    'WordTemplates': 'WordDocument',
+    'DocumentTemplates': 'ExcelDocument',
+    'New': 'Add',
+};
+const RecordCommands = (props) => {
+    const commands = props.commands;
+    const commandBarRef = useRef(null);
+    const containerRef = useRef(null);
+    const styles = useMemo(() => getRecordCommandsStyles(props.alignment), [props.alignment]);
+    const theme = useThemeGenerator(props.theme.semanticColors.bodyText, props.theme.semanticColors.bodyBackground, props.theme.semanticColors.bodyText, props.themeOverride);
+    const contextualMenuTheme = useThemeGenerator(props.applicationTheme.semanticColors.bodyText, props.applicationTheme.semanticColors.bodyBackground, props.applicationTheme.semanticColors.bodyText, props.themeOverride);
+    const pendingActionsSet = useRef(new Set());
+    const rerender = useRerender();
+    const observe = useResizeObserver(() => {
+        commandBarRef.current?.remeasure();
+    });
+    const getCommandBarItems = (commands) => {
+        const result = [];
+        commands.map(command => {
+            //@ts-ignore - portal internal types
+            if (!command.shouldBeVisible || (command.__isInline !== undefined && command.__isInline === false)) {
+                return;
+            }
+            let iconName = command.icon;
+            if (fluentIconMap[iconName]) {
+                iconName = fluentIconMap[iconName];
+            }
+            result.push({
+                key: command.commandId,
+                text: command.label,
+                disabled: !command.canExecute || pendingActionsSet.current.has(command.commandId),
+                ["data-id"]: command?.commandButtonId,
+                ["data-command"]: command?.commandId,
+                title: command?.tooltip,
+                iconProps: {
+                    iconName: iconName
+                },
+                onClick: () => {
+                    (async () => {
+                        pendingActionsSet.current.add(command.commandId);
+                        rerender();
+                        try {
+                            await command.execute();
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                        finally {
+                            pendingActionsSet.current.delete(command.commandId);
+                            rerender();
+                        }
+                    })();
+                },
+                onRenderIcon: iconName?.includes('svg') ? () => jsx(Icon, { name: iconName }) : undefined,
+            });
+        });
+        return result;
+    };
+    const getComponentProps = () => {
+        return {
+            containerProps: {
+                theme: theme,
+                ref: containerRef,
+                className: styles.recordCommandsContainer
+            },
+            commandBarProps: {
+                componentRef: commandBarRef,
+                className: styles.recordCommandsRoot,
+                contextualMenuTheme: contextualMenuTheme,
+                styles: {
+                    primarySet: styles.recordCommandsPrimarySet
+                },
+                items: getCommandBarItems(commands)
+            }
+        };
+    };
+    const componentProps = useComponentProps().onGetRecordCommandsProps(getComponentProps());
+    useEffect(() => {
+        observe(containerRef.current);
+    }, []);
+    return jsx(ThemeProvider, { ...componentProps.containerProps, children: jsx(CommandBar, { ...componentProps.commandBarProps }) });
+};
+
+export { RecordCommands };
+//# sourceMappingURL=RecordCommands.js.map

package/dist/components/GridCellRenderer/RecordCommands/RecordCommands.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordCommands.js","sources":["../../../../src/components/GridCellRenderer/RecordCommands/RecordCommands.tsx"],"sourcesContent":["import { CommandBar, ICommandBarItemProps, ITheme, useRerender, useResizeObserver, useThemeGenerator, withButtonLoading } from \"@talxis/react-components\";\nimport { useComponentProps } from \"../useComponentProps\";\nimport { IRecordCommandsProps } from \"../interfaces\";\nimport { Icon } from \"./Icon\";\nimport { ICommandBar, PartialTheme, ThemeProvider } from \"@fluentui/react\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { getRecordCommandsStyles } from \"./styles\";\nimport { IColumn, ICommand } from \"@talxis/client-libraries\";\n\ninterface IRecordCommands {\n    commands: ICommand[];\n    theme: ITheme;\n    applicationTheme: ITheme;\n    alignment: Required<IColumn['alignment']>;\n    themeOverride?: PartialTheme;\n}\n\nconst fluentIconMap: { [key: string]: string } = {\n    'Activate': 'ActivateOrders',\n    'DeActivate': 'DeactivateOrders',\n    'ExportToExcel': 'ExcelDocument',\n    'ConnectionToOther': 'Assign',\n    'EmailLink': 'Link',\n    'Flows': 'Dataflows',\n    'RunReport': 'CRMReport',\n    'Report': 'CRMReport',\n    'Remove': 'Delete',\n    'WordTemplates': 'WordDocument',\n    'DocumentTemplates': 'ExcelDocument',\n    'New': 'Add',\n}\n\nexport const RecordCommands = (props: IRecordCommands) => {\n    const commands = props.commands;\n    const commandBarRef = useRef<ICommandBar>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const styles = useMemo(() => getRecordCommandsStyles(props.alignment), [props.alignment])\n    const theme = useThemeGenerator(props.theme.semanticColors.bodyText, props.theme.semanticColors.bodyBackground, props.theme.semanticColors.bodyText, props.themeOverride);\n    const contextualMenuTheme = useThemeGenerator(props.applicationTheme.semanticColors.bodyText, props.applicationTheme.semanticColors.bodyBackground, props.applicationTheme.semanticColors.bodyText, props.themeOverride);\n    const pendingActionsSet = useRef<Set<string>>(new Set());\n    const rerender = useRerender();\n\n    const observe = useResizeObserver(() => {\n        commandBarRef.current?.remeasure();\n    });\n\n    const getCommandBarItems = (commands: ICommand[]): ICommandBarItemProps[] => {\n        const result: ICommandBarItemProps[] = [];\n        commands.map(command => {\n            //@ts-ignore - portal internal types\n            if (!command.shouldBeVisible || (command.__isInline !== undefined && command.__isInline === false)) {\n                return;\n            }\n            let iconName = command.icon;\n            if (fluentIconMap[iconName]) {\n                iconName = fluentIconMap[iconName];\n            }\n            result.push({\n                key: command.commandId,\n                text: command.label,\n                disabled: !command.canExecute || pendingActionsSet.current.has(command.commandId),\n                [\"data-id\"]: command?.commandButtonId,\n                [\"data-command\"]: command?.commandId,\n                title: command?.tooltip,\n                iconProps: {\n                    iconName: iconName\n                },\n                onClick: () => {\n                    (async () => {\n                        pendingActionsSet.current.add(command.commandId);\n                        rerender();\n                        try {\n                            await command.execute();\n                        }\n                        catch (err) {\n                            console.error(err);\n                        }\n                        finally {\n                            pendingActionsSet.current.delete(command.commandId);\n                            rerender();\n                        }\n                    })();\n                },\n                onRenderIcon: iconName?.includes('svg') ? () => <Icon name={iconName} /> : undefined,\n            })\n        })\n        return result;\n    }\n\n    const getComponentProps = (): IRecordCommandsProps => {\n        return {\n            containerProps: {\n                theme: theme,\n                ref: containerRef,\n                className: styles.recordCommandsContainer\n            },\n            commandBarProps: {\n                componentRef: commandBarRef,\n                className: styles.recordCommandsRoot,\n                contextualMenuTheme: contextualMenuTheme,\n                styles: {\n                    primarySet: styles.recordCommandsPrimarySet\n                },\n                items: getCommandBarItems(commands)\n            }\n        }\n    }\n\n    const componentProps = useComponentProps().onGetRecordCommandsProps(getComponentProps());\n\n    useEffect(() => {\n        observe(containerRef.current!);\n    }, []);\n\n    return <ThemeProvider {...componentProps.containerProps}><CommandBar {...componentProps.commandBarProps} /></ThemeProvider>\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/GridCellRenderer/RecordCommands/styles.d.ts

@@ -0,0 +1,13 @@
+import { IColumn } from "@talxis/client-libraries";
+export declare const getRecordCommandsStyles: (alignment: Required<IColumn['alignment']>) => import("@fluentui/react").IProcessedStyleSet<{
+    recordCommandsRoot: {};
+    recordCommandsPrimarySet: {
+        justifyContent: string | undefined;
+    };
+    recordCommandsContainer: {
+        display: string;
+        flexDirection: string;
+        height: string;
+        justifyContent: string;
+    };
+}>;

package/dist/components/GridCellRenderer/RecordCommands/styles.js

@@ -0,0 +1,32 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getRecordCommandsStyles = (alignment) => {
+    return mergeStyleSets({
+        recordCommandsRoot: {},
+        recordCommandsPrimarySet: {
+            justifyContent: getJustifyContent(alignment)
+        },
+        recordCommandsContainer: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            justifyContent: 'center'
+        }
+    });
+};
+const getJustifyContent = (columnAlignment) => {
+    switch (columnAlignment) {
+        case 'left': {
+            return 'flex-start';
+        }
+        case 'center': {
+            return 'center';
+        }
+        case 'right': {
+            return 'flex-end';
+        }
+    }
+};
+
+export { getRecordCommandsStyles };
+//# sourceMappingURL=styles.js.map

package/dist/components/GridCellRenderer/RecordCommands/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/GridCellRenderer/RecordCommands/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { IColumn } from \"@talxis/client-libraries\"\n\nexport const getRecordCommandsStyles = (alignment: Required<IColumn['alignment']>) => {\n    return mergeStyleSets({\n        recordCommandsRoot: {\n\n        },\n        recordCommandsPrimarySet: {\n            justifyContent: getJustifyContent(alignment)\n        },\n        recordCommandsContainer: {\n            display: 'flex',\n            flexDirection: 'column',\n            height: '100%',\n            justifyContent: 'center'\n        }   \n    })\n}\n\nconst getJustifyContent = (columnAlignment: Required<IColumn['alignment']>) => {\n    switch(columnAlignment) {\n        case 'left': {\n            return 'flex-start'\n        }\n        case 'center': {\n            return 'center'\n        }\n        case 'right': {\n            return 'flex-end'\n        }\n    }\n}"],"names":[],"mappings":";;AAGa,MAAA,uBAAuB,GAAG,CAAC,SAAyC,KAAI;AACjF,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,kBAAkB,EAAE,EAEnB;AACD,QAAA,wBAAwB,EAAE;AACtB,YAAA,cAAc,EAAE,iBAAiB,CAAC,SAAS,CAAC;AAC/C,SAAA;AACD,QAAA,uBAAuB,EAAE;AACrB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,cAAc,EAAE,QAAQ;AAC3B,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,EAAC;AAED,MAAM,iBAAiB,GAAG,CAAC,eAA+C,KAAI;AAC1E,IAAA,QAAO,eAAe;QAClB,KAAK,MAAM,EAAE;AACT,YAAA,OAAO,YAAY,CAAA;AACtB,SAAA;QACD,KAAK,QAAQ,EAAE;AACX,YAAA,OAAO,QAAQ,CAAA;AAClB,SAAA;QACD,KAAK,OAAO,EAAE;AACV,YAAA,OAAO,UAAU,CAAA;AACpB,SAAA;AACJ,KAAA;AACL,CAAC;;;;"}

package/dist/components/GridCellRenderer/interfaces.d.ts

@@ -1,77 +1,66 @@
 /// <reference types="@types/powerapps-component-framework" />
 /// <reference types="react" />
-import { AggregationFunction, IColumn, IDataset, IRecord } from "@talxis/client-libraries";
-import { IControl, IDecimalNumberProperty, IParameters, IStringProperty, ITwoOptionsProperty, IWholeNumberProperty } from "../../interfaces";
+import { AggregationFunction, IColumn, ICommand, IDataset, IRecord } from "@talxis/client-libraries";
+import { IControl, IParameters, IStringProperty, ITwoOptionsProperty } from "../../interfaces";
+import { getDefaultGridRendererTranslations } from "./translations";
 import { IIconProps, IImageProps, ILabelProps, ILinkProps, ISpinnerProps, ITextProps, ThemeProviderProps } from "@fluentui/react";
-import { gridGroupCellRendererTranslations } from "./translations";
-export interface IGridCellRenderer extends IControl<IGridCellRendererParameters, {}, typeof gridGroupCellRendererTranslations, IGridCellRendererComponentProps> {
+import { ICommandBarProps } from "@talxis/react-components";
+export interface IGridCellRenderer extends IControl<IGridCellRendererParameters, {}, ReturnType<typeof getDefaultGridRendererTranslations>, IGridCellRendererComponentProps> {
 }
 export interface IGridCellRendererParameters extends IParameters {
     value: any;
     ColumnAlignment: Omit<ComponentFramework.PropertyTypes.EnumProperty<"left" | "center" | "right">, 'type'>;
     CellType: Omit<ComponentFramework.PropertyTypes.EnumProperty<"renderer" | "editor">, 'type'>;
     EnableNavigation: Omit<ITwoOptionsProperty, 'attributes'>;
+    PrefixIcon?: IStringProperty;
+    SuffixIcon?: IStringProperty;
     AggregationFunction: Omit<ComponentFramework.PropertyTypes.EnumProperty<AggregationFunction | null>, 'type'>;
-    AggregatedValue: IDecimalNumberProperty | IWholeNumberProperty;
     Column: {
         raw: IColumn;
     };
-    /**
-     * This dataset instance is always the main dataset, even if the current cell is being rendered via a child data provider.
-     * You can access the child DataProvider via the `getDataProvider()` method on the record instance.
-     */
     Dataset: {
         raw: IDataset;
     };
     Record: {
         raw: IRecord;
     };
-    PrefixIcon: IStringProperty;
-    SuffixIcon: IStringProperty;
-}
-export interface IGridCellRendererComponentProps {
-    onRender: (props: IComponentProps, defaultRender: (props: IComponentProps) => React.ReactElement) => React.ReactElement;
-}
-interface IComponentProps {
-    container: ThemeProviderProps;
-    onRenderContentContainer: (props: IContentContainerProps, defaultRender: (props: IContentContainerProps) => React.ReactElement) => React.ReactElement;
-    onRenderAggregationLabel: (props: ILabelProps, defaultRender: (props: ILabelProps) => React.ReactElement) => React.ReactElement;
-}
-interface IContentContainerProps {
-    container: React.HTMLAttributes<HTMLDivElement>;
-    onRenderPrefixIcon: (props: IIconProps, defaultRender: (props: IIconProps) => React.ReactElement) => React.ReactElement;
-    onRenderSuffixIcon: (props: IIconProps, defaultRender: (props: IIconProps) => React.ReactElement) => React.ReactElement;
-    onRenderInnerContainer: (props: IInnerContentContainerProps, defaultRender: (props: IInnerContentContainerProps) => React.ReactElement) => React.ReactElement;
-}
-interface IInnerContentContainerProps {
-    container: React.HTMLAttributes<HTMLDivElement>;
-    onRenderAggregatedValue: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
-    onRenderValueContainer: (props: IValueContainerProps, defaultRender: (props: IValueContainerProps) => React.ReactElement) => React.ReactElement;
-}
-interface IValueContainerProps {
-    container: React.HTMLAttributes<HTMLDivElement>;
-    onRenderValue: (props: IValueRendererProps, defaultRender: (props: IValueRendererProps) => React.ReactElement) => React.ReactElement;
+    RecordCommands?: {
+        raw: ICommand[];
+    };
 }
-export interface IValueRendererProps {
-    onRenderPlaceholder: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
-    onRenderText: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
-    onRenderLink: (props: ILinkProps, defaultRender: (props: ILinkProps) => React.ReactElement) => React.ReactElement;
-    onRenderFile: (props: IFileRendererProps, defaultRender: (props: IFileRendererProps) => React.ReactElement) => React.ReactElement;
-    onRenderColorfulOptionSet: (props: IColorfulOptionSetValueRendererProps, defaultRender: (props: IColorfulOptionSetValueRendererProps) => React.ReactElement) => React.ReactElement;
+export interface IOptionSetProps {
+    containerProps: React.HTMLAttributes<HTMLDivElement>;
+    onGetOptionProps: (props: IOptionProps) => IOptionProps;
 }
-export interface IColorfulOptionSetValueRendererProps {
-    container: React.HTMLAttributes<HTMLDivElement>;
-    onRenderOption: (props: IColorfulOptionValueRendererProps, defaultRender: (props: IColorfulOptionValueRendererProps) => React.ReactElement) => React.ReactElement;
+export interface IOptionProps {
+    containerProps: ThemeProviderProps;
+    option: ComponentFramework.PropertyHelper.OptionMetadata;
+    textProps: ITextProps;
 }
-export interface IColorfulOptionValueRendererProps {
-    container: ThemeProviderProps;
-    onRenderText: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
+export interface IRecordCommandsProps {
+    containerProps: ThemeProviderProps;
+    commandBarProps: ICommandBarProps;
 }
-export interface IFileRendererProps {
-    container: React.HTMLAttributes<HTMLDivElement>;
-    onRenderFileAttachmentIcon: (props: IIconProps, defaultRender: (props: IIconProps) => React.ReactElement) => React.ReactElement;
-    onRenderImageThumbnail: (props: IImageProps, defaultRender: (props: IImageProps) => React.ReactElement) => React.ReactElement;
-    onRenderLoading: (props: ISpinnerProps, defaultRender: (props: ISpinnerProps) => React.ReactElement) => React.ReactElement;
-    onRenderLink: (props: ILinkProps, defaultRender: (props: ILinkProps) => React.ReactElement) => React.ReactElement;
+export interface IGridCellRendererComponentProps {
+    onGetOptionSetProps: (props: IOptionSetProps) => IOptionSetProps;
+    onGetLinkProps: (props: ILinkProps) => ILinkProps;
+    onGetRecordCommandsProps: (props: IRecordCommandsProps) => IRecordCommandsProps;
+    onRenderContent: (defaultRenderer: () => JSX.Element) => JSX.Element;
+    onRenderAggregationLabel: (props: ILabelProps, defaultRenderer: (props: ILabelProps) => React.ReactElement) => React.ReactElement;
+    rootContainerProps: ThemeProviderProps;
+    prefixSuffixWrapperProps: React.HTMLAttributes<HTMLDivElement>;
+    contentWrapperProps: React.HTMLAttributes<HTMLDivElement>;
+    textProps: ITextProps;
+    fileProps: {
+        containerProps: React.HTMLAttributes<HTMLDivElement>;
+        iconProps: Omit<IIconProps, 'iconName'> & {
+            onGetIconName: (iconName: string) => string;
+        };
+        imageProps: Omit<IImageProps, 'src'> & {
+            onGetSrc: (src: string) => string;
+        };
+        loadingProps: {
+            spinnerProps: ISpinnerProps;
+        };
+    };
 }
-export {};

package/dist/components/GridCellRenderer/styles.d.ts

@@ -1,59 +1,85 @@
-import { IColumn } from "@talxis/client-libraries";
-import { GridCellRendererModel } from "./GridCellRendererModel";
-export declare const getGridCellRendererStyles: (model: GridCellRendererModel, height?: number) => import("@fluentui/react").IProcessedStyleSet<{
-    gridCellRendererRoot: {
-        height: string;
-        minHeight: number | undefined;
+import { DataType, IColumn } from "@talxis/client-libraries";
+import { ITheme } from "@talxis/react-components";
+export declare const getGridCellLabelStyles: (columnAlignment: IColumn['alignment'], dataType: DataType, rowHeight: number, theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        height: number;
         paddingLeft: number;
         paddingRight: number;
         display: string;
-        alignItems: string;
-        justifyContent: string | undefined;
         flexDirection: string;
+    };
+    aggregationLabel: {
+        lineHeight: number;
+        textAlign: "left" | "right" | "center" | undefined;
+        color: string;
+        fontSize: number;
         overflow: string;
-        resize: string | undefined;
+        textOverflow: string;
     };
-    contentContainer: {
+    prefixSuffixContentWrapper: {
         display: string;
-        minWidth: number;
-        gap: number;
         flexGrow: number;
-        width: string;
         alignItems: string;
+        justifyContent: string | undefined;
+        gap: number;
     };
-    innerContentContainer: {
+    fileWrapper: {
         display: string;
-        overflow: string;
-        justifyContent: string | undefined;
-        flexGrow: number;
         gap: number;
+        overflow: string;
+        textOverflow: string;
+        alignItems: string;
     };
-    aggregationLabel: {
-        lineHeight: string;
-        fontSize: string | number | undefined;
-        width: string;
-        textAlign: string;
-        color: string;
+    contentWrapper: {
+        flexGrow: number;
+        textAlign: "left" | "right" | "center" | undefined;
         overflow: string;
         textOverflow: string;
-        padding: string;
-        paddingTop: number;
     };
-    aggregatedValue: {
-        overflow?: string | undefined;
-        textOverflow?: string | undefined;
+    fileImage: {
+        marginRight: number;
+        flexShrink: number;
+        img: {
+            width: number;
+        };
     };
-    valueContainer: {
-        minWidth: number;
+    link: {
+        lineHeight?: string | undefined;
+        display?: string | undefined;
+        whiteSpace?: string | undefined;
+        '-webkit-box-orient'?: string | undefined;
+        wordBreak?: string | undefined;
+        '-webkit-line-clamp'?: string | undefined;
+        maxWidth: string;
         overflow: string;
         textOverflow: string;
-        flexGrow: number;
-        textAlign: "left" | "right" | "center";
     };
-    affixIconRoot: {
+    icon: {
         img: {
             width: number;
         };
     };
+    fileIcon: {
+        fontSize: number;
+    };
+    loadingSpinnerCircle: {
+        width: number;
+        height: number;
+    };
+}>;
+export declare const getDefaultContentRendererStyles: (theme: ITheme, dataType: DataType, rowHeight: number) => import("@fluentui/react").IProcessedStyleSet<{
+    content: {
+        lineHeight?: string | undefined;
+        display?: string | undefined;
+        whiteSpace?: string | undefined;
+        '-webkit-box-orient'?: string | undefined;
+        wordBreak?: string | undefined;
+        '-webkit-line-clamp'?: string | undefined;
+        overflow: string;
+        textOverflow: string;
+        flexGrow: number;
+    };
+    placeholder: {
+        color: string;
+    };
 }>;
-export declare const getJustifyContent: (columnAlignment: IColumn['alignment']) => "center" | "flex-start" | "flex-end" | undefined;