@talxis/base-controls 1.2502.1 → 1.2503.1

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

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, ThemeProvider, Text } from '@fluentui/react';
+import { Theming, useThemeGenerator } from '@talxis/react-components';
+import { useMemo } from 'react';
+import { getOptionSetStyles, getColorfulOptionStyles } from './styles.js';
+import { useComponentProps } from '../useComponentProps.js';
+import { DefaultContentRenderer } from '../DefaultContentRenderer/DefaultContentRenderer.js';
+
+const OptionSet = (props) => {
+    const dataType = props.parameters.value.type;
+    const options = props.parameters.value.attributes.Options;
+    const value = props.parameters.value.raw;
+    const styles = useMemo(() => getOptionSetStyles(), []);
+    const componentProps = useComponentProps();
+    const optionSetProps = componentProps.onGetOptionSetProps({
+        containerProps: {
+            className: styles.root
+        },
+        onGetOptionProps: (props) => props
+    });
+    const shouldRenderDefaultLabel = () => {
+        if (!props.parameters.EnableOptionSetColors?.raw || !options.some(option => option.Color)) {
+            return true;
+        }
+        return false;
+    };
+    const getSelectedOptions = () => {
+        let result = value ?? [];
+        switch (dataType) {
+            case 'OptionSet': {
+                result = [value];
+                break;
+            }
+            case 'TwoOptions': {
+                result = [+value];
+                break;
+            }
+        }
+        return options.filter(option => result?.includes(option.Value)) ?? [];
+    };
+    if (shouldRenderDefaultLabel()) {
+        return jsx(DefaultContentRenderer, {});
+    }
+    return (jsx("div", { ...optionSetProps.containerProps, children: getSelectedOptions().map(option => {
+            return jsx(ColorfulOption, { optionSetProps: optionSetProps, option: option, context: props.context }, option.Value);
+        }) }));
+};
+const ColorfulOption = (props) => {
+    const theme = useTheme();
+    const option = props.option;
+    const backgroundColor = option.Color ?? theme.palette.neutralLight;
+    const textColor = Theming.GetTextColorForBackground(backgroundColor);
+    const styles = useMemo(() => getColorfulOptionStyles(), []);
+    const optionTheme = useThemeGenerator(textColor, backgroundColor, textColor, props.context.fluentDesignLanguage?.v8FluentOverrides);
+    const optionProps = props.optionSetProps.onGetOptionProps({
+        containerProps: {
+            className: styles.option,
+            theme: optionTheme
+        },
+        option: option,
+        textProps: {
+            children: option.Label
+        }
+    });
+    return (jsx(ThemeProvider, { ...optionProps.containerProps, children: jsx(Text, { ...optionProps.textProps, children: optionProps.textProps.children }) }));
+};
+
+export { OptionSet };
+//# sourceMappingURL=OptionSet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionSet.js","sources":["../../../../src/components/GridCellRenderer/OptionSet/OptionSet.tsx"],"sourcesContent":["import { DataType } from \"@talxis/client-libraries\";\nimport { IOptionSet } from \"../../OptionSet\"\nimport { IMultiSelectOptionSet } from \"../../MultiSelectOptionSet\";\nimport { ITwoOptions } from \"../../TwoOptions\";\nimport { ThemeProvider, useTheme } from \"@fluentui/react\";\nimport { Theming, useThemeGenerator } from \"@talxis/react-components\";\nimport { Text } from '@fluentui/react';\nimport { IContext } from \"../../../interfaces\";\nimport { useMemo } from \"react\";\nimport { getColorfulOptionStyles, getOptionSetStyles } from \"./styles\";\nimport { useComponentProps } from \"../useComponentProps\";\nimport { IOptionSetProps } from \"../interfaces\";\nimport { DefaultContentRenderer } from \"../DefaultContentRenderer\";\n\nexport const OptionSet = (props: IOptionSet | IMultiSelectOptionSet | ITwoOptions) => {\n    const dataType: DataType = props.parameters.value.type as DataType;\n    const options = props.parameters.value.attributes.Options;\n    const value: any = props.parameters.value.raw;\n    const styles = useMemo(() => getOptionSetStyles(), []);\n    const componentProps = useComponentProps();\n\n    const optionSetProps = componentProps.onGetOptionSetProps({\n        containerProps: {\n            className: styles.root\n        },\n        onGetOptionProps: (props) => props\n    })\n\n    const shouldRenderDefaultLabel = () => {\n        if (!props.parameters.EnableOptionSetColors?.raw || !options.some(option => option.Color)) {\n            return true;\n        }\n        return false;\n    }\n\n    const getSelectedOptions = () => {\n        let result: any = value ?? [];\n        switch (dataType) {\n            case 'OptionSet': {\n                result = [value]\n                break;\n            }\n            case 'TwoOptions': {\n                result = [+value];\n                break;\n            }\n        }\n        return options.filter(option => result?.includes(option.Value)) ?? [];\n    }\n\n    if (shouldRenderDefaultLabel()) {\n        return <DefaultContentRenderer />\n    }\n    return (<div {...optionSetProps.containerProps}>\n        {getSelectedOptions().map(option => {\n            return <ColorfulOption\n                key={option.Value}\n                optionSetProps={optionSetProps}\n                option={option}\n                context={props.context} />\n        })}\n    </div>)\n}\n\nconst ColorfulOption = (props: {\n    option: ComponentFramework.PropertyHelper.OptionMetadata,\n    context: IContext;\n    optionSetProps: IOptionSetProps\n}) => {\n    const theme = useTheme();\n    const option = props.option;\n    const backgroundColor = option.Color ?? theme.palette.neutralLight;\n    const textColor = Theming.GetTextColorForBackground(backgroundColor);\n    const styles = useMemo(() => getColorfulOptionStyles(), []);\n    const optionTheme = useThemeGenerator(textColor, backgroundColor, textColor, props.context.fluentDesignLanguage?.v8FluentOverrides);\n\n    const optionProps = props.optionSetProps.onGetOptionProps({\n        containerProps: {\n            className: styles.option,\n            theme: optionTheme\n        },\n        option: option,\n        textProps: {\n            children: option.Label\n        }\n    })\n\n    return (\n        <ThemeProvider {...optionProps.containerProps}>\n            <Text {...optionProps.textProps}>{optionProps.textProps.children}</Text>\n        </ThemeProvider>\n    )\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/GridCellRenderer/OptionSet/index.d.ts

@@ -0,0 +1 @@
+export * from './OptionSet';

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

@@ -0,0 +1,2 @@
+export { OptionSet } from './OptionSet.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/{Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet → GridCellRenderer/OptionSet}/styles.d.ts

@@ -1,22 +1,20 @@
-export declare const optionSetStyles: import("@fluentui/react").IProcessedStyleSet<{
-    root: {
-        display: string;
-        gap: number;
-        overflow: string;
-        '--light': number;
-        '--threshold': number;
-        flexGrow: number;
-    };
+export declare const getColorfulOptionStyles: () => import("@fluentui/react").IProcessedStyleSet<{
     option: {
         borderRadius: number;
+        padding: number;
         paddingLeft: number;
         paddingRight: number;
         overflow: string;
         textOverflow: string;
         flexGrow: number;
+    };
+}>;
+export declare const getOptionSetStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        gap: number;
+        display: string;
+        overflow: string;
+        flexGrow: number;
         textAlign: string;
-        '>span': {
-            color: string;
-        };
     };
 }>;

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/index.d.ts

@@ -0,0 +1 @@
+export * from './GridCellRenderer';

package/dist/components/GridCellRenderer/index.js

@@ -0,0 +1,2 @@
+export { GridCellRenderer } from './GridCellRenderer.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,53 @@
+/// <reference types="@types/powerapps-component-framework" />
+/// <reference types="react" />
+import { IColumn, IDataset, IRecord } from "@talxis/client-libraries";
+import { IControl, IParameters, IStringProperty, ITwoOptionsProperty } from "../../interfaces";
+import { getDefaultGridRendererTranslations } from "./translations";
+import { IIconProps, IImageProps, ILinkProps, ISpinnerProps, ITextProps, ThemeProviderProps } from "@fluentui/react";
+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;
+    Column: {
+        raw: IColumn;
+    };
+    Dataset: {
+        raw: IDataset;
+    };
+    Record: {
+        raw: IRecord;
+    };
+}
+export interface IOptionSetProps {
+    containerProps: React.HTMLAttributes<HTMLDivElement>;
+    onGetOptionProps: (props: IOptionProps) => IOptionProps;
+}
+export interface IOptionProps {
+    containerProps: ThemeProviderProps;
+    option: ComponentFramework.PropertyHelper.OptionMetadata;
+    textProps: ITextProps;
+}
+export interface IGridCellRendererComponentProps {
+    onGetOptionSetProps: (props: IOptionSetProps) => IOptionSetProps;
+    onGetLinkProps: (props: ILinkProps) => ILinkProps;
+    rootContainerProps: ThemeProviderProps;
+    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;
+        };
+    };
+}

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

@@ -0,0 +1,72 @@
+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: {
+        display: string;
+        alignItems: string;
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+        justifyContent: string | undefined;
+        gap: number;
+    };
+    fileWrapper: {
+        display: string;
+        gap: number;
+        overflow: string;
+        textOverflow: string;
+        alignItems: string;
+    };
+    contentWrapper: {
+        flexGrow: number;
+        textAlign: "left" | "right" | "center" | undefined;
+        overflow: string;
+        textOverflow: string;
+    };
+    fileImage: {
+        marginRight: number;
+        flexShrink: number;
+        img: {
+            width: 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;
+    };
+    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;
+    };
+}>;

package/dist/components/GridCellRenderer/styles.js

@@ -0,0 +1,105 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getGridCellLabelStyles = (columnAlignment, dataType, rowHeight, theme) => {
+    return mergeStyleSets({
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            height: rowHeight + 1,
+            paddingLeft: 8,
+            paddingRight: 8,
+            justifyContent: getJustifyContent(columnAlignment),
+            gap: 10,
+        },
+        fileWrapper: {
+            display: 'flex',
+            gap: 5,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            alignItems: 'center'
+        },
+        contentWrapper: {
+            flexGrow: 1,
+            textAlign: columnAlignment,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        },
+        fileImage: {
+            marginRight: 5,
+            flexShrink: 0,
+            'img': {
+                width: 32
+            }
+        },
+        link: {
+            maxWidth: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            ...(isMultiple(dataType) ? getMultilineStyles(rowHeight, theme) : {})
+        },
+        icon: {
+            'img': {
+                width: 20
+            }
+        },
+        fileIcon: {
+            fontSize: 18
+        },
+        loadingSpinnerCircle: {
+            width: 20,
+            height: 20
+        }
+    });
+};
+const getDefaultContentRendererStyles = (theme, dataType, rowHeight) => {
+    return mergeStyleSets({
+        content: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            flexGrow: 1,
+            ...(isMultiple(dataType) ? getMultilineStyles(rowHeight, theme) : {})
+        },
+        placeholder: {
+            color: theme.semanticColors.inputPlaceholderText
+        }
+    });
+};
+const getJustifyContent = (columnAlignment) => {
+    switch (columnAlignment) {
+        case 'left': {
+            return 'flex-start';
+        }
+        case 'center': {
+            return 'center';
+        }
+        case 'right': {
+            return 'flex-end';
+        }
+    }
+};
+const getMultilineStyles = (rowHeight, theme) => {
+    let fontSize = 20;
+    const themeFontSize = theme.fonts.medium.fontSize;
+    theme.fonts.medium.lineHeight;
+    if (typeof themeFontSize === 'number') {
+        fontSize = themeFontSize;
+    }
+    else if (typeof themeFontSize === 'string' && themeFontSize.endsWith('px')) {
+        fontSize = parseInt(themeFontSize.replace('px', ''));
+    }
+    const clamp = Math.floor(rowHeight / fontSize) - 1;
+    return {
+        lineHeight: '1.2',
+        display: '-webkit-box',
+        whiteSpace: 'normal',
+        '-webkit-box-orient': 'vertical',
+        wordBreak: 'break-all',
+        '-webkit-line-clamp': clamp.toString(),
+    };
+};
+const isMultiple = (dataType) => {
+    return dataType === 'Multiple' || dataType === 'SingleLine.TextArea';
+};
+
+export { getDefaultContentRendererStyles, getGridCellLabelStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/GridCellRenderer/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\nimport { DataType, IColumn } from \"@talxis/client-libraries\";\nimport { ITheme } from \"@talxis/react-components\";\n\nexport const getGridCellLabelStyles = (columnAlignment: IColumn['alignment'], dataType: DataType, rowHeight: number, theme: ITheme) => {\n    return mergeStyleSets({\n        root: {\n            display: 'flex',\n            alignItems: 'center',\n            height: rowHeight + 1,\n            paddingLeft: 8,\n            paddingRight: 8,\n            justifyContent: getJustifyContent(columnAlignment),\n            gap: 10,\n        },\n        fileWrapper: {\n            display: 'flex',\n            gap: 5,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            alignItems: 'center'\n        },\n        contentWrapper: {\n            flexGrow: 1,\n            textAlign: columnAlignment,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis'\n        },\n        fileImage: {\n            marginRight: 5,\n            flexShrink: 0,\n            'img': {\n                width: 32\n            }\n        },\n        link: {\n            maxWidth: '100%',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            ...(isMultiple(dataType) ? getMultilineStyles(rowHeight, theme) : {})\n        },\n        icon: {\n            'img': {\n                width: 20\n            }\n        },\n        fileIcon: {\n            fontSize: 18\n        },\n        loadingSpinnerCircle: {\n            width: 20,\n            height: 20\n        }\n    })\n}\nexport const getDefaultContentRendererStyles = (theme: ITheme, dataType: DataType, rowHeight: number) => {\n    return mergeStyleSets({\n        content: {\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            flexGrow: 1,\n            ...(isMultiple(dataType) ? getMultilineStyles(rowHeight, theme) : {})\n        },\n        placeholder: {\n            color: theme.semanticColors.inputPlaceholderText\n        }\n    });\n}\n\nconst getJustifyContent = (columnAlignment: 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}\n\nconst getMultilineStyles = (rowHeight: number, theme: ITheme) => {\n    let fontSize = 20;\n    const themeFontSize = theme.fonts.medium.fontSize;\n    theme.fonts.medium.lineHeight\n    if(typeof themeFontSize === 'number') {\n        fontSize = themeFontSize;\n    }\n    else if(typeof themeFontSize === 'string' && themeFontSize.endsWith('px')) {\n        fontSize = parseInt(themeFontSize.replace('px', ''));\n    }\n    const clamp = Math.floor(rowHeight / fontSize) - 1;\n    return {\n        lineHeight: '1.2',\n        display: '-webkit-box',\n        whiteSpace: 'normal',\n        '-webkit-box-orient': 'vertical',\n        wordBreak: 'break-all',\n        '-webkit-line-clamp': clamp.toString(),\n    };\n}\n\nconst isMultiple = (dataType: DataType) => {\n    return dataType === 'Multiple' || dataType === 'SingleLine.TextArea';\n}\n"],"names":[],"mappings":";;AAIO,MAAM,sBAAsB,GAAG,CAAC,eAAqC,EAAE,QAAkB,EAAE,SAAiB,EAAE,KAAa,KAAI;AAClI,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,SAAS,GAAG,CAAC;AACrB,YAAA,WAAW,EAAE,CAAC;AACd,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,cAAc,EAAE,iBAAiB,CAAC,eAAe,CAAC;AAClD,YAAA,GAAG,EAAE,EAAE;AACV,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,UAAU,EAAE,QAAQ;AACvB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,SAAS,EAAE,eAAe;AAC1B,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACD,QAAA,SAAS,EAAE;AACP,YAAA,WAAW,EAAE,CAAC;AACd,YAAA,UAAU,EAAE,CAAC;AACb,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,EAAE;AACZ,aAAA;AACJ,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,IAAI,UAAU,CAAC,QAAQ,CAAC,GAAG,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC;AACxE,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,KAAK,EAAE;AACH,gBAAA,KAAK,EAAE,EAAE;AACZ,aAAA;AACJ,SAAA;AACD,QAAA,QAAQ,EAAE;AACN,YAAA,QAAQ,EAAE,EAAE;AACf,SAAA;AACD,QAAA,oBAAoB,EAAE;AAClB,YAAA,KAAK,EAAE,EAAE;AACT,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACJ,KAAA,CAAC,CAAA;AACN,EAAC;AACY,MAAA,+BAA+B,GAAG,CAAC,KAAa,EAAE,QAAkB,EAAE,SAAiB,KAAI;AACpG,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,OAAO,EAAE;AACL,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,IAAI,UAAU,CAAC,QAAQ,CAAC,GAAG,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC;AACxE,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB;AACnD,SAAA;AACJ,KAAA,CAAC,CAAC;AACP,EAAC;AAED,MAAM,iBAAiB,GAAG,CAAC,eAAqC,KAAI;AAChE,IAAA,QAAQ,eAAe;QACnB,KAAK,MAAM,EAAE;AACT,YAAA,OAAO,YAAY,CAAC;AACvB,SAAA;QACD,KAAK,QAAQ,EAAE;AACX,YAAA,OAAO,QAAQ,CAAC;AACnB,SAAA;QACD,KAAK,OAAO,EAAE;AACV,YAAA,OAAO,UAAU,CAAC;AACrB,SAAA;AACJ,KAAA;AACL,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,KAAa,KAAI;IAC5D,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;AAClD,IAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAA;AAC7B,IAAA,IAAG,OAAO,aAAa,KAAK,QAAQ,EAAE;QAClC,QAAQ,GAAG,aAAa,CAAC;AAC5B,KAAA;SACI,IAAG,OAAO,aAAa,KAAK,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACvE,QAAA,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AACxD,KAAA;AACD,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IACnD,OAAO;AACH,QAAA,UAAU,EAAE,KAAK;AACjB,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,oBAAoB,EAAE,UAAU;AAChC,QAAA,SAAS,EAAE,WAAW;AACtB,QAAA,oBAAoB,EAAE,KAAK,CAAC,QAAQ,EAAE;KACzC,CAAC;AACN,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,QAAkB,KAAI;AACtC,IAAA,OAAO,QAAQ,KAAK,UAAU,IAAI,QAAQ,KAAK,qBAAqB,CAAC;AACzE,CAAC;;;;"}

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

@@ -0,0 +1,6 @@
+export declare const getDefaultGridRendererTranslations: () => {
+    download: {
+        1029: string;
+        1033: string;
+    };
+};

package/dist/components/GridCellRenderer/translations.js

@@ -0,0 +1,11 @@
+const getDefaultGridRendererTranslations = () => {
+    return {
+        download: {
+            1029: 'Stáhnout',
+            1033: 'Download'
+        }
+    };
+};
+
+export { getDefaultGridRendererTranslations };
+//# sourceMappingURL=translations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sources":["../../../src/components/GridCellRenderer/translations.ts"],"sourcesContent":["export const getDefaultGridRendererTranslations = () => {\n    return {\n        download: {\n            1029: 'Stáhnout',\n            1033: 'Download'\n        }\n    }\n};"],"names":[],"mappings":"AAAO,MAAM,kCAAkC,GAAG,MAAK;IACnD,OAAO;AACH,QAAA,QAAQ,EAAE;AACN,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,IAAI,EAAE,UAAU;AACnB,SAAA;KACJ,CAAA;AACL;;;;"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IGridCellRendererComponentProps } from "./interfaces";
+export declare const ComponentPropsContext: import("react").Context<{
+    current: IGridCellRendererComponentProps;
+}>;
+export declare const useComponentProps: () => IGridCellRendererComponentProps;

package/dist/components/GridCellRenderer/useComponentProps.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+const ComponentPropsContext = createContext({});
+const useComponentProps = () => {
+    const context = useContext(ComponentPropsContext);
+    return context.current;
+};
+
+export { ComponentPropsContext, useComponentProps };
+//# sourceMappingURL=useComponentProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentProps.js","sources":["../../../src/components/GridCellRenderer/useComponentProps.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { IGridCellRendererComponentProps } from \"./interfaces\";\n\n\nexport const ComponentPropsContext = createContext<{\n    current: IGridCellRendererComponentProps\n}>({} as any);\n\nexport const useComponentProps = () => {\n    const context = useContext(ComponentPropsContext);\n    return context.current;\n}"],"names":[],"mappings":";;MAIa,qBAAqB,GAAG,aAAa,CAE/C,EAAS,EAAE;AAEP,MAAM,iBAAiB,GAAG,MAAK;AAClC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAClD,OAAO,OAAO,CAAC,OAAO,CAAC;AAC3B;;;;"}

package/dist/components/Lookup/Lookup.js

@@ -1,11 +1,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useLookup } from './hooks/useLookup.js';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useMemo, useState, useEffect } from 'react';
 import { ThemeProvider } from '@fluentui/react';
 import { TagPicker } from '@talxis/react-components';
 import { TargetSelector } from './components/TargetSelector.js';
 import { useMouseOver } from '../../hooks/useMouseOver.js';
-import { getLookupStyles } from './styles.js';
+import { getLookupStyles, getSuggestionsCalloutStyles } from './styles.js';
 import { RecordCreator } from './components/RecordCreator.js';
 import { useFocusIn } from '../../hooks/useFocusIn.js';
 import { useControlSizing } from '../../hooks/useControlSizing.js';
@@ -19,6 +19,8 @@ const Lookup = (props) => {
     const { height } = useControlSizing(props.context.mode);
     const [value, entities, labels, records, selectEntity, getSearchResults, theme] = useLookup(props);
     const styles = getLookupStyles(theme, itemLimit === 1, height);
+    const suggestionsCalloutTheme = props.context.fluentDesignLanguage?.applicationTheme ?? theme;
+    const suggestionsCalloutStyles = useMemo(() => getSuggestionsCalloutStyles(suggestionsCalloutTheme), [suggestionsCalloutTheme]);
     const mouseOver = useMouseOver(ref);
     const isFocused = useFocusIn(ref, 100);
     const firstRenderRef = useRef(true);
@@ -135,7 +137,8 @@ const Lookup = (props) => {
             layerProps: {
                 eventBubblingEnabled: true
             },
-            className: styles.suggestions
+            className: suggestionsCalloutStyles.suggestionsCallout,
+            theme: suggestionsCalloutTheme,
         },
         inputProps: {
             placeholder: placeholder,
@@ -151,7 +154,9 @@ const Lookup = (props) => {
         },
         pickerSuggestionsProps: {
             loadingText: labels.searching(),
+            theme: suggestionsCalloutTheme,
             noResultsFoundText: labels.noRecordsFound(),
+            className: suggestionsCalloutStyles.suggestionsContainer,
             // @ts-ignore
             suggestionsHeaderText: (jsxs(Fragment, { children: [props.parameters.IsInlineNewEnabled?.raw !== false && (jsx(RecordCreator, { labels: labels, entities: entities, onCreateRecord: records.create })), props.parameters.value.attributes.Targets.length > 1 && (jsx(TargetSelector, { labels: labels, entities: entities, onEntitySelected: (entityName) => {
                             selectEntity(entityName);

package/dist/components/Lookup/Lookup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lookup.js","sources":["../../../src/components/Lookup/Lookup.tsx"],"sourcesContent":["\nimport { ILayout, ILookup, IMetadata } from \"./interfaces\";\nimport { useLookup } from \"./hooks/useLookup\";\nimport React, { useEffect, useRef, useState } from 'react';\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { IItemProps, TagPicker } from \"@talxis/react-components\";\nimport { TargetSelector } from \"./components/TargetSelector\";\nimport { useMouseOver } from \"../../hooks/useMouseOver\";\nimport { getLookupStyles } from \"./styles\";\nimport { IBasePicker } from \"@fluentui/react/lib/components/pickers/BasePicker.types\";\nimport { ITag } from \"@fluentui/react/lib/components/pickers/TagPicker/TagPicker.types\";\nimport { RecordCreator } from \"./components/RecordCreator\";\nimport { useFocusIn } from \"../../hooks/useFocusIn\";\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\nimport dayjs from \"dayjs\";\n\nexport const Lookup = (props: ILookup) => {\n    const context = props.context;\n    const ref = useRef<HTMLDivElement>(null);\n    const componentRef = useRef<IBasePicker<ITag>>(null);\n    const itemLimit = props.parameters.MultipleEnabled?.raw === true ? Infinity : 1\n    const { height } = useControlSizing(props.context.mode);\n    const [value, entities, labels, records, selectEntity, getSearchResults, theme] = useLookup(props);\n    const styles = getLookupStyles(theme, itemLimit === 1, height);\n    const mouseOver = useMouseOver(ref);\n    const isFocused = useFocusIn(ref, 100);\n    const firstRenderRef = useRef(true);\n    const shouldFocusRef = useRef(false);\n    const [placeholder, setPlaceholder] = useState('---');\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n\n    useEffect(() => {\n        if (firstRenderRef.current) {\n            firstRenderRef.current = false;\n            return;\n        }\n        //@ts-ignore\n        if (componentRef.current.state.suggestionsVisible) {\n            //if the suggestions callout is open and the selected target changes, refresh the results\n            forceSearch();\n        }\n    }, [entities])\n\n    useEffect(() => {\n        const onKeyPress = (ev: KeyboardEvent) => {\n            if (context.mode.isControlDisabled) {\n                return;\n            }\n            if (ev.key === 'Backspace') {\n                const picker = ref.current?.querySelector('[class*=\"TALXIS__tag-picker__root\"]');\n                if ((document.activeElement === picker) && value.length === 1) {\n                    records.select(undefined);\n                    setTimeout(() => {\n                        componentRef.current?.focusInput()\n                    }, 200)\n                }\n            }\n        }\n        document.addEventListener('keydown', onKeyPress)\n        return () => {\n            document.removeEventListener('keydown', onKeyPress);\n        }\n    }, [value]);\n\n    useEffect(() => {\n        if (props.parameters.AutoFocus?.raw === true) {\n            focus();\n        }\n    }, []);\n\n    const focus = () => {\n        if (componentRef.current?.items?.length === itemLimit) {\n            const el = ref.current?.querySelector(':scope>div') as HTMLDivElement;\n            el?.click();\n            el?.focus();\n            return;\n        }\n        componentRef.current?.focusInput();\n    }\n\n    const forceSearch = async () => {\n        //@ts-ignore - We need to use internal methods to show and fill the suggestions on entity change\n        componentRef.current.suggestionStore.updateSuggestions([]);\n        //@ts-ignore - ^^same as above\n        componentRef.current.setState({\n            suggestionsVisible: true,\n            suggestionsLoading: true,\n        });\n        //@ts-ignore - ^^same as above\n        const results = await onResolveSuggestions(componentRef.current.input.current.value)\n        //@ts-ignore - ^^same as above\n        componentRef.current.updateSuggestionsList(results);\n        //@ts-ignore - ^^same above\n        componentRef.current.setState({\n            isMostRecentlyUsedVisible: false,\n            suggestionsVisible: true,\n            moreSuggestionsAvailable: false,\n        });\n    }\n\n    const isComponentActive = () => {\n        return mouseOver || isFocused;\n    }\n\n    const getSecondaryName = (result: ComponentFramework.LookupValue & {\n        entityData: {\n            [key: string]: any;\n        };\n        layout: ILayout;\n    }, metadata?: IMetadata) => {\n        //polymorphic, selected all\n        if (!entities.find(x => x.selected)) {\n            return metadata?.DisplayName;\n        }\n        else {\n            let text: string | undefined = result.entityData[result.layout?.Rows?.[0]?.Cells?.[1]?.Name];\n            const dateRegex = /\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}Z/;\n            if(typeof text === 'string' && text.match(dateRegex)) {\n                text = props.context.formatting.formatTime(dayjs(text).toDate(), 1);\n            }\n            return text;\n        }\n    }\n\n    const onResolveSuggestions = async (filter: string, selectedItems?: IItemProps[] | undefined): Promise<IItemProps[]> => {\n        //TODO: onResolveSuggestions gets called when the record gets selected resulting in unnecessary call\n        const results = await getSearchResults(filter);\n        const suggestions: IItemProps[] = [];\n        for (const result of results) {\n            if (selectedItems?.find(x => x.key === result.id)) {\n                continue;\n            }\n            const metadata = await entities.find(x => x.entityName === result.entityType)?.metadata;\n            suggestions.push({\n                key: result.id,\n                text: result.name,\n                secondaryText: getSecondaryName(result, metadata),\n                'data-entity': result.entityType\n            })\n        }\n        return suggestions;\n    }\n    const componentProps = onOverrideComponentProps({\n        ref: componentRef,\n        readOnly: context.mode.isControlDisabled,\n        resolveDelay: 200,\n        stackItems: itemLimit === 1,\n        errorMessage: props.parameters.value.errorMessage,\n        hideErrorMessage: !props.parameters.ShowErrorMessage?.raw,\n        pickerCalloutProps: {\n            layerProps: {\n                eventBubblingEnabled: true\n            },\n            className: styles.suggestions\n        },\n\n        inputProps: {\n            placeholder: placeholder,\n            onMouseEnter: () => {\n                if (context.mode.isControlDisabled) {\n                    return;\n                }\n                setPlaceholder(`${labels.placeholder()} ${props.parameters.value.attributes.DisplayName}`);\n            },\n            onMouseLeave: () => {\n                setPlaceholder(\"---\");\n            }\n        },\n        pickerSuggestionsProps: {\n            loadingText: labels.searching(),\n            noResultsFoundText: labels.noRecordsFound(),\n            // @ts-ignore\n            suggestionsHeaderText: (\n                <>\n                    {props.parameters.IsInlineNewEnabled?.raw !== false && (\n                        <RecordCreator labels={labels} entities={entities} onCreateRecord={records.create} />\n                    )}\n                    {props.parameters.value.attributes.Targets.length > 1 && (\n                        <TargetSelector\n                            labels={labels}\n                            entities={entities}\n                            onEntitySelected={(entityName) => {\n                                selectEntity(entityName);\n                            }}\n                        />\n                    )}\n                </>\n            )\n        },\n        transparent: itemLimit === 1,\n        onChange: (items) => {\n            records.select(\n                items?.map((item) => {\n                    return {\n                        entityType: item['data-entity'],\n                        id: item.key,\n                        name: item.text\n                    };\n                })\n            );\n        },\n        searchBtnProps: {\n            key: 'search',\n            iconProps: {\n                iconName: 'Search'\n            },\n            showOnlyOnHover: true\n        },\n        selectedItems: value.map((lookup) => {\n            return {\n                key: lookup.id,\n                text: lookup.name || labels.noName(),\n                'data-entity': lookup.entityType,\n                'data-navigation-enabled': props.parameters.EnableNavigation?.raw !== false,\n                onClick: () => {\n                    if (props.parameters.EnableNavigation?.raw === false) {\n                        return;\n                    }\n                    context.navigation.openForm({\n                        entityName: lookup.entityType,\n                        entityId: lookup.id\n                    });\n                },\n                deleteButtonProps:\n                    isComponentActive() || itemLimit > 1\n                        ? {\n                            key: 'delete',\n                            iconProps: {\n                                iconName: 'Cancel',\n                            },\n                            onClick: () => {\n                                shouldFocusRef.current = false;\n                                records.deselect(lookup);\n                                setTimeout(() => {\n                                    focus();\n                                }, 200);\n                            }\n                        }\n                        : undefined\n            };\n        }),\n        itemLimit: itemLimit,\n        onEmptyResolveSuggestions: !context.mode.isControlDisabled ? (selectedItems) => onResolveSuggestions(\"\", selectedItems as IItemProps[]) as any : undefined,\n        onResolveSuggestions: onResolveSuggestions\n    });\n\n    return (\n        <ThemeProvider applyTo=\"none\" theme={theme} className={`talxis__lookupControl ${styles.root}`} ref={ref}>\n            <TagPicker {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"Lookup.js","sources":["../../../src/components/Lookup/Lookup.tsx"],"sourcesContent":["\nimport { ILayout, ILookup, IMetadata } from \"./interfaces\";\nimport { useLookup } from \"./hooks/useLookup\";\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { IItemProps, TagPicker } from \"@talxis/react-components\";\nimport { TargetSelector } from \"./components/TargetSelector\";\nimport { useMouseOver } from \"../../hooks/useMouseOver\";\nimport { getLookupStyles, getSuggestionsCalloutStyles } from \"./styles\";\nimport { IBasePicker } from \"@fluentui/react/lib/components/pickers/BasePicker.types\";\nimport { ITag } from \"@fluentui/react/lib/components/pickers/TagPicker/TagPicker.types\";\nimport { RecordCreator } from \"./components/RecordCreator\";\nimport { useFocusIn } from \"../../hooks/useFocusIn\";\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\nimport dayjs from \"dayjs\";\n\nexport const Lookup = (props: ILookup) => {\n    const context = props.context;\n    const ref = useRef<HTMLDivElement>(null);\n    const componentRef = useRef<IBasePicker<ITag>>(null);\n    const itemLimit = props.parameters.MultipleEnabled?.raw === true ? Infinity : 1\n    const { height } = useControlSizing(props.context.mode);\n    const [value, entities, labels, records, selectEntity, getSearchResults, theme] = useLookup(props);\n    const styles = getLookupStyles(theme, itemLimit === 1, height);\n    const suggestionsCalloutTheme = props.context.fluentDesignLanguage?.applicationTheme ?? theme;\n    const suggestionsCalloutStyles = useMemo(() => getSuggestionsCalloutStyles(suggestionsCalloutTheme), [suggestionsCalloutTheme])\n    const mouseOver = useMouseOver(ref);\n    const isFocused = useFocusIn(ref, 100);\n    const firstRenderRef = useRef(true);\n    const shouldFocusRef = useRef(false);\n    const [placeholder, setPlaceholder] = useState('---');\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n\n    useEffect(() => {\n        if (firstRenderRef.current) {\n            firstRenderRef.current = false;\n            return;\n        }\n        //@ts-ignore\n        if (componentRef.current.state.suggestionsVisible) {\n            //if the suggestions callout is open and the selected target changes, refresh the results\n            forceSearch();\n        }\n    }, [entities])\n\n    useEffect(() => {\n        const onKeyPress = (ev: KeyboardEvent) => {\n            if (context.mode.isControlDisabled) {\n                return;\n            }\n            if (ev.key === 'Backspace') {\n                const picker = ref.current?.querySelector('[class*=\"TALXIS__tag-picker__root\"]');\n                if ((document.activeElement === picker) && value.length === 1) {\n                    records.select(undefined);\n                    setTimeout(() => {\n                        componentRef.current?.focusInput()\n                    }, 200)\n                }\n            }\n        }\n        document.addEventListener('keydown', onKeyPress)\n        return () => {\n            document.removeEventListener('keydown', onKeyPress);\n        }\n    }, [value]);\n\n    useEffect(() => {\n        if (props.parameters.AutoFocus?.raw === true) {\n            focus();\n        }\n    }, []);\n\n    const focus = () => {\n        if (componentRef.current?.items?.length === itemLimit) {\n            const el = ref.current?.querySelector(':scope>div') as HTMLDivElement;\n            el?.click();\n            el?.focus();\n            return;\n        }\n        componentRef.current?.focusInput();\n    }\n\n    const forceSearch = async () => {\n        //@ts-ignore - We need to use internal methods to show and fill the suggestions on entity change\n        componentRef.current.suggestionStore.updateSuggestions([]);\n        //@ts-ignore - ^^same as above\n        componentRef.current.setState({\n            suggestionsVisible: true,\n            suggestionsLoading: true,\n        });\n        //@ts-ignore - ^^same as above\n        const results = await onResolveSuggestions(componentRef.current.input.current.value)\n        //@ts-ignore - ^^same as above\n        componentRef.current.updateSuggestionsList(results);\n        //@ts-ignore - ^^same above\n        componentRef.current.setState({\n            isMostRecentlyUsedVisible: false,\n            suggestionsVisible: true,\n            moreSuggestionsAvailable: false,\n        });\n    }\n\n    const isComponentActive = () => {\n        return mouseOver || isFocused;\n    }\n\n    const getSecondaryName = (result: ComponentFramework.LookupValue & {\n        entityData: {\n            [key: string]: any;\n        };\n        layout: ILayout;\n    }, metadata?: IMetadata) => {\n        //polymorphic, selected all\n        if (!entities.find(x => x.selected)) {\n            return metadata?.DisplayName;\n        }\n        else {\n            let text: string | undefined = result.entityData[result.layout?.Rows?.[0]?.Cells?.[1]?.Name];\n            const dateRegex = /\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}Z/;\n            if(typeof text === 'string' && text.match(dateRegex)) {\n                text = props.context.formatting.formatTime(dayjs(text).toDate(), 1);\n            }\n            return text;\n        }\n    }\n\n    const onResolveSuggestions = async (filter: string, selectedItems?: IItemProps[] | undefined): Promise<IItemProps[]> => {\n        //TODO: onResolveSuggestions gets called when the record gets selected resulting in unnecessary call\n        const results = await getSearchResults(filter);\n        const suggestions: IItemProps[] = [];\n        for (const result of results) {\n            if (selectedItems?.find(x => x.key === result.id)) {\n                continue;\n            }\n            const metadata = await entities.find(x => x.entityName === result.entityType)?.metadata;\n            suggestions.push({\n                key: result.id,\n                text: result.name,\n                secondaryText: getSecondaryName(result, metadata),\n                'data-entity': result.entityType\n            })\n        }\n        return suggestions;\n    }\n    const componentProps = onOverrideComponentProps({\n        ref: componentRef,\n        readOnly: context.mode.isControlDisabled,\n        resolveDelay: 200,\n        stackItems: itemLimit === 1,\n        errorMessage: props.parameters.value.errorMessage,\n        hideErrorMessage: !props.parameters.ShowErrorMessage?.raw,\n        pickerCalloutProps: {\n            layerProps: {\n                eventBubblingEnabled: true\n            },\n            className: suggestionsCalloutStyles.suggestionsCallout,\n            theme: suggestionsCalloutTheme,\n            \n        },\n        inputProps: {\n            placeholder: placeholder,\n            onMouseEnter: () => {\n                if (context.mode.isControlDisabled) {\n                    return;\n                }\n                setPlaceholder(`${labels.placeholder()} ${props.parameters.value.attributes.DisplayName}`);\n            },\n            onMouseLeave: () => {\n                setPlaceholder(\"---\");\n            }\n\n        },\n        pickerSuggestionsProps: {\n            loadingText: labels.searching(),\n            theme: suggestionsCalloutTheme,\n            noResultsFoundText: labels.noRecordsFound(),\n            className: suggestionsCalloutStyles.suggestionsContainer,\n            // @ts-ignore\n            suggestionsHeaderText: (\n                <>\n                    {props.parameters.IsInlineNewEnabled?.raw !== false && (\n                        <RecordCreator labels={labels} entities={entities} onCreateRecord={records.create} />\n                    )}\n                    {props.parameters.value.attributes.Targets.length > 1 && (\n                        <TargetSelector\n                            labels={labels}\n                            entities={entities}\n                            onEntitySelected={(entityName) => {\n                                selectEntity(entityName);\n                            }}\n                        />\n                    )}\n                </>\n            )\n        },\n        transparent: itemLimit === 1,\n        onChange: (items) => {\n            records.select(\n                items?.map((item) => {\n                    return {\n                        entityType: item['data-entity'],\n                        id: item.key,\n                        name: item.text\n                    };\n                })\n            );\n        },\n        searchBtnProps: {\n            key: 'search',\n            iconProps: {\n                iconName: 'Search'\n            },\n            showOnlyOnHover: true\n        },\n        selectedItems: value.map((lookup) => {\n            return {\n                key: lookup.id,\n                text: lookup.name || labels.noName(),\n                'data-entity': lookup.entityType,\n                'data-navigation-enabled': props.parameters.EnableNavigation?.raw !== false,\n                onClick: () => {\n                    if (props.parameters.EnableNavigation?.raw === false) {\n                        return;\n                    }\n                    context.navigation.openForm({\n                        entityName: lookup.entityType,\n                        entityId: lookup.id\n                    });\n                },\n                deleteButtonProps:\n                    isComponentActive() || itemLimit > 1\n                        ? {\n                            key: 'delete',\n                            iconProps: {\n                                iconName: 'Cancel',\n                            },\n                            onClick: () => {\n                                shouldFocusRef.current = false;\n                                records.deselect(lookup);\n                                setTimeout(() => {\n                                    focus();\n                                }, 200);\n                            }\n                        }\n                        : undefined\n            };\n        }),\n        itemLimit: itemLimit,\n        onEmptyResolveSuggestions: !context.mode.isControlDisabled ? (selectedItems) => onResolveSuggestions(\"\", selectedItems as IItemProps[]) as any : undefined,\n        onResolveSuggestions: onResolveSuggestions\n    });\n\n    return (\n        <ThemeProvider applyTo=\"none\" theme={theme} className={`talxis__lookupControl ${styles.root}`} ref={ref}>\n            <TagPicker {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

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

@@ -57,13 +57,6 @@ export declare const getLookupStyles: (theme: ITheme, isSingleSelect: boolean, h
             height: string | 0 | undefined;
         };
     };
-    suggestions: {
-        '.ms-Suggestions-title': {
-            padding: number;
-            display: string;
-            flexDirection: string;
-        };
-    };
     createRecordBtn: {
         height: number;
         width: string;
@@ -81,3 +74,22 @@ export declare const getLookupStyles: (theme: ITheme, isSingleSelect: boolean, h
         };
     };
 }>;
+export declare const getSuggestionsCalloutStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    suggestionsCallout: {
+        '.ms-Suggestions-title': {
+            padding: number;
+            display: string;
+            flexDirection: string;
+        };
+    };
+    suggestionsContainer: {
+        '.ms-Suggestions-item': {
+            ':hover': {
+                backgroundColor: string;
+            };
+            '>.ms-Button--command[aria-selected="true"]': {
+                backgroundColor: string;
+            };
+        };
+    };
+}>;