@talxis/base-controls 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLookup.js","sources":["../../../../src/components/Lookup/hooks/useLookup.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { ITranslation, useControl } from \"../../../hooks\";\nimport { IEntity, ILayout, ILookup } from \"../interfaces\";\nimport { lookupTranslations } from \"../translations\";\nimport { useFetchXml } from \"./useFetchXml\";\nimport { ITheme } from \"@talxis/react-components\";\n\nexport const useLookup = (props: ILookup): [\n    ComponentFramework.LookupValue[],\n    IEntity[],\n    ITranslation<Required<ILookup>['translations']>,\n    {\n        create: (entityName: string) => void,\n        select: (record: ComponentFramework.LookupValue[] | undefined) => void,\n        deselect: (record: ComponentFramework.LookupValue) => void,\n    },\n    (entityName: string | null) => void,\n    (query: string) => Promise<(ComponentFramework.LookupValue & { entityData: { [key: string]: any }, layout: ILayout })[]>,\n    ITheme\n] => {\n\n    const targets = props.parameters.value.attributes.Targets;\n    const boundValue = props.parameters.value.raw;\n    const context = props.context;\n    const { labels, theme, onNotifyOutputChanged } = useControl('Lookup', props, lookupTranslations);\n    const [getFetchXml, applyLookupQuery] = useFetchXml(context);\n\n    const [entities, setEntities] = useState<IEntity[]>(() => {\n        return targets.map(target => {\n            return {\n                entityName: target,\n                selected: targets.length === 1 ? true : false,\n                metadata: props.context.utils.getEntityMetadata(target, []) as any,\n            }\n        })\n    });\n\n    const selectedEntity = entities.find(x => x.selected);\n\n    const selectEntity = (entityName: string | null) => {\n        setEntities([...entities as IEntity[]].map(entity => {\n            return {\n                entityName: entity.entityName,\n                metadata: entity.metadata,\n                selected: entity.entityName === entityName\n            }\n        }))\n    }\n\n    const selectRecords = (records: ComponentFramework.LookupValue[] | undefined) => {\n        onNotifyOutputChanged({\n            value: records\n        })\n    }\n    const getSearchFetchXml = async (entityName: string, query: string, viewIdCallBack: (id: string) => void): Promise<string> => {\n        const response = (await props.parameters.value.getAllViews(entityName)).find(x => x.isDefault);\n        if (!response?.viewId) {\n            throw new Error(`Entity ${entityName} does not have a default view id!`);\n        }\n        viewIdCallBack(response.viewId);\n        let fetchXml = response?.fetchXml\n        if (!fetchXml) {\n            fetchXml = (await getFetchXml(response.viewId)).fetchxml;\n        }\n        return applyLookupQuery(entities.find(x => x.entityName === entityName)!, fetchXml, query);\n\n    }\n    const getSearchResults = async (query: string): Promise<(ComponentFramework.LookupValue & { entityData: { [key: string]: any }, layout: ILayout })[]> => {\n        if (props.onSearch) {\n            return props.onSearch(selectedEntity ? [selectedEntity?.entityName] : targets, query) as any;\n        }\n        const fetchXmlMap = new Map<string, Promise<string>>();\n        const entityViewIdMap = new Map<string, string>();\n        if (selectedEntity) {\n            fetchXmlMap.set(selectedEntity.entityName, getSearchFetchXml(selectedEntity.entityName, query, (viewId) => entityViewIdMap.set(selectedEntity.entityName, viewId)))\n        }\n        else {\n            for (const entity of targets) {\n                fetchXmlMap.set(entity, getSearchFetchXml(entity, query, (viewId) => entityViewIdMap.set(entity, viewId)))\n            }\n        }\n        await Promise.all(fetchXmlMap.values());\n        const responsePromiseMap = new Map<string, Promise<ComponentFramework.WebApi.RetrieveMultipleResponse>>()\n        for (const [entityName, fetchXml] of fetchXmlMap) {\n            responsePromiseMap.set(entityName, context.webAPI.retrieveMultipleRecords(entityName, `?$top=25&fetchXml=${encodeURIComponent((await fetchXml))}`))\n        }\n        await Promise.all(responsePromiseMap.values());\n        const result: (ComponentFramework.LookupValue & { entityData: { [key: string]: any }, layout: ILayout })[] = [];\n        for (const [entityName, response] of responsePromiseMap) {\n            const layout: ILayout = JSON.parse((await getFetchXml(entityViewIdMap.get(entityName)!)).layoutjson ?? \"{}\");\n            for (const entity of (await response).entities) {\n                const entityMetadata = await entities.find(x => x.entityName === entityName)!.metadata;\n                result.push({\n                    entityType: entityName,\n                    id: entity[entityMetadata.PrimaryIdAttribute],\n                    name: entity[layout.Rows?.[0]?.Cells?.[0]?.Name] ?? entity[entityMetadata.PrimaryNameAttribute] ?? labels.noName(),\n                    entityData: entity,\n                    layout: layout\n                });\n            }\n        }\n        return result;\n    }\n\n    const createRecord = async (entityName: string) => {\n        const formParameters = props.onGetOnCreateFormParameters?.(entityName)\n        const result = await context.navigation.openForm({\n            entityName: entityName,\n            useQuickCreateForm: true\n        }, formParameters);\n        if (!result.savedEntityReference) {\n            return;\n        }\n        onNotifyOutputChanged({\n            value: [\n                ...boundValue,\n                ...result.savedEntityReference\n            ]\n        });\n    }\n\n    const deselectRecord = (record: ComponentFramework.LookupValue) => {\n        const map = new Map<string, ComponentFramework.LookupValue>(boundValue.map(value => [value.id, value]));\n        map.delete(record.id);\n        onNotifyOutputChanged({\n            value: [...map.values()]\n        })\n    }\n\n    return [\n        boundValue, entities, labels, {\n            create: createRecord,\n            deselect: deselectRecord,\n            select: selectRecords\n        },\n        selectEntity,\n        getSearchResults,\n        theme\n    ];\n};"],"names":[],"mappings":";;;;;AAOa,MAAA,SAAS,GAAG,CAAC,KAAc,KAYpC;IAEA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;IAC1D,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9C,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;AAC9B,IAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAE,GAAG,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC;IACjG,MAAM,CAAC,WAAW,EAAE,gBAAgB,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;IAE7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAY,MAAK;AACrD,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,IAAG;YACxB,OAAO;AACH,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,QAAQ,EAAE,OAAO,CAAC,MAAM,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK;AAC7C,gBAAA,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,EAAE,EAAE,CAAQ;aACrE,CAAA;AACL,SAAC,CAAC,CAAA;AACN,KAAC,CAAC,CAAC;AAEH,IAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;AAEtD,IAAA,MAAM,YAAY,GAAG,CAAC,UAAyB,KAAI;QAC/C,WAAW,CAAC,CAAC,GAAG,QAAqB,CAAC,CAAC,GAAG,CAAC,MAAM,IAAG;YAChD,OAAO;gBACH,UAAU,EAAE,MAAM,CAAC,UAAU;gBAC7B,QAAQ,EAAE,MAAM,CAAC,QAAQ;AACzB,gBAAA,QAAQ,EAAE,MAAM,CAAC,UAAU,KAAK,UAAU;aAC7C,CAAA;SACJ,CAAC,CAAC,CAAA;AACP,KAAC,CAAA;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,OAAqD,KAAI;AAC5E,QAAA,qBAAqB,CAAC;AAClB,YAAA,KAAK,EAAE,OAAO;AACjB,SAAA,CAAC,CAAA;AACN,KAAC,CAAA;IACD,MAAM,iBAAiB,GAAG,OAAO,UAAkB,EAAE,KAAa,EAAE,cAAoC,KAAqB;QACzH,MAAM,QAAQ,GAAG,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC;AAC/F,QAAA,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE;AACnB,YAAA,MAAM,IAAI,KAAK,CAAC,UAAU,UAAU,CAAA,iCAAA,CAAmC,CAAC,CAAC;AAC5E,SAAA;AACD,QAAA,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAChC,QAAA,IAAI,QAAQ,GAAG,QAAQ,EAAE,QAAQ,CAAA;QACjC,IAAI,CAAC,QAAQ,EAAE;AACX,YAAA,QAAQ,GAAG,CAAC,MAAM,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC;AAC5D,SAAA;QACD,OAAO,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,KAAK,UAAU,CAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AAE/F,KAAC,CAAA;AACD,IAAA,MAAM,gBAAgB,GAAG,OAAO,KAAa,KAA2G;QACpJ,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,OAAO,KAAK,CAAC,QAAQ,CAAC,cAAc,GAAG,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG,OAAO,EAAE,KAAK,CAAQ,CAAC;AAChG,SAAA;AACD,QAAA,MAAM,WAAW,GAAG,IAAI,GAAG,EAA2B,CAAC;AACvD,QAAA,MAAM,eAAe,GAAG,IAAI,GAAG,EAAkB,CAAC;AAClD,QAAA,IAAI,cAAc,EAAE;AAChB,YAAA,WAAW,CAAC,GAAG,CAAC,cAAc,CAAC,UAAU,EAAE,iBAAiB,CAAC,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,MAAM,KAAK,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;AACtK,SAAA;AACI,aAAA;AACD,YAAA,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;gBAC1B,WAAW,CAAC,GAAG,CAAC,MAAM,EAAE,iBAAiB,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,KAAK,eAAe,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;AAC7G,aAAA;AACJ,SAAA;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;AACxC,QAAA,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAAuE,CAAA;QACzG,KAAK,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,WAAW,EAAE;YAC9C,kBAAkB,CAAC,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,uBAAuB,CAAC,UAAU,EAAE,CAAqB,kBAAA,EAAA,kBAAkB,EAAE,MAAM,QAAQ,EAAE,CAAA,CAAE,CAAC,CAAC,CAAA;AACtJ,SAAA;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAC;QAC/C,MAAM,MAAM,GAAiG,EAAE,CAAC;QAChH,KAAK,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,kBAAkB,EAAE;YACrD,MAAM,MAAM,GAAY,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,UAAU,CAAE,CAAC,EAAE,UAAU,IAAI,IAAI,CAAC,CAAC;YAC7G,KAAK,MAAM,MAAM,IAAI,CAAC,MAAM,QAAQ,EAAE,QAAQ,EAAE;AAC5C,gBAAA,MAAM,cAAc,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,KAAK,UAAU,CAAE,CAAC,QAAQ,CAAC;gBACvF,MAAM,CAAC,IAAI,CAAC;AACR,oBAAA,UAAU,EAAE,UAAU;AACtB,oBAAA,EAAE,EAAE,MAAM,CAAC,cAAc,CAAC,kBAAkB,CAAC;AAC7C,oBAAA,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC,oBAAoB,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE;AAClH,oBAAA,UAAU,EAAE,MAAM;AAClB,oBAAA,MAAM,EAAE,MAAM;AACjB,iBAAA,CAAC,CAAC;AACN,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,MAAM,CAAC;AAClB,KAAC,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,UAAkB,KAAI;QAC9C,MAAM,cAAc,GAAG,KAAK,CAAC,2BAA2B,GAAG,UAAU,CAAC,CAAA;QACtE,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC;AAC7C,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,kBAAkB,EAAE,IAAI;SAC3B,EAAE,cAAc,CAAC,CAAC;AACnB,QAAA,IAAI,CAAC,MAAM,CAAC,oBAAoB,EAAE;YAC9B,OAAO;AACV,SAAA;AACD,QAAA,qBAAqB,CAAC;AAClB,YAAA,KAAK,EAAE;AACH,gBAAA,GAAG,UAAU;gBACb,GAAG,MAAM,CAAC,oBAAoB;AACjC,aAAA;AACJ,SAAA,CAAC,CAAC;AACP,KAAC,CAAA;AAED,IAAA,MAAM,cAAc,GAAG,CAAC,MAAsC,KAAI;QAC9D,MAAM,GAAG,GAAG,IAAI,GAAG,CAAyC,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACxG,QAAA,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AACtB,QAAA,qBAAqB,CAAC;AAClB,YAAA,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC;AAC3B,SAAA,CAAC,CAAA;AACN,KAAC,CAAA;IAED,OAAO;AACH,QAAA,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE;AAC1B,YAAA,MAAM,EAAE,YAAY;AACpB,YAAA,QAAQ,EAAE,cAAc;AACxB,YAAA,MAAM,EAAE,aAAa;AACxB,SAAA;QACD,YAAY;QACZ,gBAAgB;QAChB,KAAK;KACR,CAAC;AACN;;;;"}

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

@@ -0,0 +1,3 @@
+export * from './Lookup';
+export * from './hooks/useLookup';
+export * from './interfaces';

package/dist/components/Lookup/index.js

@@ -0,0 +1,3 @@
+export { Lookup } from './Lookup.js';
+export { useLookup } from './hooks/useLookup.js';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,75 @@
+/// <reference types="@types/powerapps-component-framework" />
+import { ITagPickerProps } from "@talxis/react-components";
+import { ILookupProperty, ITwoOptionsProperty } from "../../interfaces";
+import { IControl, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+import { lookupTranslations } from "./translations";
+export interface ILookup extends IControl<ILookupParameters, ILookupOutputs, Partial<ITranslations<typeof lookupTranslations>>, ITagPickerProps> {
+    /**
+     * If provided, the Lookup will use the returned values of this function to display search results.
+     * @param {any} entityNames An array of entity names that he Lookup is currently targeting.
+     * @param {any} query: User text input
+     * @returns {any}
+     */
+    onSearch?: (entityNames: string[], query: string) => Promise<ComponentFramework.LookupValue[]>;
+    /**
+     * When new record is being created, this function is called beforehand and its return value is used to populate the form.
+     * @param {any} entityName The name of the entity that is being created.
+     * @returns
+     */
+    onGetOnCreateFormParameters?: (entityName: string) => {
+        [key: string]: string;
+    } | undefined;
+}
+export interface ILookupParameters extends IBaseParameters {
+    IsInlineNewEnabled?: Omit<ITwoOptionsProperty, 'attributes'>;
+    MultipleEnabled?: Omit<ITwoOptionsProperty, 'attributes'>;
+    EnableNavigation?: Omit<ITwoOptionsProperty, 'attributes'>;
+    value: ILookupProperty;
+}
+export interface ILookupOutputs extends IOutputs {
+    value?: ComponentFramework.LookupValue[];
+}
+export interface IMetadata extends ComponentFramework.PropertyHelper.EntityMetadata {
+    DisplayName: string;
+    PrimaryNameAttribute: string;
+    PrimaryIdAttribute: string;
+}
+export interface IEntity {
+    entityName: string;
+    selected: boolean;
+    metadata: Promise<IMetadata>;
+}
+export interface ILayout {
+    Name: string;
+    Object: number;
+    Rows: IRow[];
+    CustomControlDescriptions: any[];
+    Jump: string;
+    Select: boolean;
+    Icon: boolean;
+    Preview: boolean;
+    IconRenderer: string;
+}
+interface IRow {
+    Name: string;
+    Id: string;
+    Cells: ICell[];
+    MultiObjectIdField: string;
+    LayoutStyle: string;
+}
+interface ICell {
+    Name: string;
+    Width: number;
+    RelatedEntityName: string;
+    IsHidden: boolean;
+    ImageProviderWebresource: string;
+    ImageProviderFunctionName: string;
+    DisableSorting?: boolean;
+    AddedBy?: string;
+    Desc?: string;
+    CellType?: string;
+    DisableMetaDataBinding?: boolean;
+    LabelId?: string;
+}
+export {};

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

@@ -0,0 +1,95 @@
+import { ITheme } from "@fluentui/react";
+export declare const getTargetSelectorStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
+    targetSelector: {
+        display: string;
+        paddingLeft: number;
+        paddingRight: number;
+        paddingBottom: number;
+        gap: number;
+        paddingTop: number;
+        '>span': {
+            lineHeight: number;
+            minWidth: string;
+            color: string;
+            fontWeight: number;
+        };
+    };
+    targetSelectorLinks: {
+        display: string;
+        gap: number;
+        flexWrap: string;
+    };
+    targetSelectorLink: {
+        color: string;
+        '&[data-selected="true"]': {
+            color: string;
+            fontWeight: number;
+        };
+    };
+}>;
+export declare const getLookupStyles: (theme: ITheme, isSingleSelect: boolean, height?: number) => import("@fluentui/react").IProcessedStyleSet<{
+    displayName: string;
+    root: {
+        '[data-navigation-enabled="true"]': {
+            '.ms-Button-label': {
+                color: string;
+                fontWeight: number;
+                marginLeft: number;
+            };
+            ':hover': {
+                textDecoration: string;
+                cursor: string;
+            };
+        };
+        '.ms-BasePicker-itemsWrapper .ms-CommandBar.ms-CommandBar': {
+            height: number | undefined;
+        };
+        '.ms-BasePicker-text': {
+            minHeight: number;
+            height: string;
+            paddingRight: number | undefined;
+            alignItems: string;
+            input: {
+                alignSelf: string;
+            };
+        };
+        '.TALXIS__input-buttons__root': {
+            height: string | 0 | undefined;
+        };
+    };
+    createRecordBtn: {
+        height: number;
+        width: string;
+        '.ms-Button-menuIcon': {
+            display: string;
+        };
+        '>.ms-Button-flexContainer.ms-Button-flexContainer': {
+            justifyContent: string;
+        };
+        '.ms-Button-textContainer': {
+            flexGrow: string;
+            '>span': {
+                fontWeight: number;
+            };
+        };
+    };
+}>;
+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;
+            };
+        };
+    };
+}>;

package/dist/components/Lookup/styles.js

@@ -0,0 +1,112 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getTargetSelectorStyles = (theme) => {
+    return mergeStyleSets({
+        targetSelector: {
+            display: 'flex',
+            paddingLeft: 8,
+            paddingRight: 8,
+            paddingBottom: 8,
+            gap: 8,
+            paddingTop: 8,
+            '>span': {
+                lineHeight: 15,
+                minWidth: 'fit-content',
+                color: theme.semanticColors.listText,
+                fontWeight: 600
+            }
+        },
+        targetSelectorLinks: {
+            display: 'flex',
+            gap: 5,
+            flexWrap: 'wrap'
+        },
+        targetSelectorLink: {
+            color: theme.palette.blackTranslucent40,
+            '&[data-selected="true"]': {
+                color: theme.semanticColors.link,
+                fontWeight: 600
+            }
+        },
+    });
+};
+const getHeight = (height) => {
+    if (height === -1 || height === 0) {
+        return undefined;
+    }
+    return height;
+};
+const getLookupStyles = (theme, isSingleSelect, height) => {
+    const _height = getHeight(height);
+    return mergeStyleSets({
+        displayName: 'talxis__lookupControl',
+        root: {
+            '[data-navigation-enabled="true"]': {
+                '.ms-Button-label': {
+                    color: `${theme.semanticColors.link} !important`,
+                    fontWeight: 600,
+                    marginLeft: 2
+                },
+                ':hover': {
+                    textDecoration: 'underline',
+                    cursor: 'pointer !important'
+                }
+            },
+            '.ms-BasePicker-itemsWrapper .ms-CommandBar.ms-CommandBar': {
+                height: _height && isSingleSelect ? _height - 6 : undefined
+            },
+            '.ms-BasePicker-text': {
+                minHeight: _height ?? 32,
+                height: 'min-content',
+                paddingRight: !isSingleSelect ? 36 : undefined,
+                alignItems: 'baseline',
+                'input': {
+                    alignSelf: 'center'
+                },
+            },
+            '.TALXIS__input-buttons__root': {
+                height: _height && `${_height - 3}px !important`
+            }
+        },
+        createRecordBtn: {
+            height: 38,
+            width: '100%',
+            '.ms-Button-menuIcon': {
+                display: 'none'
+            },
+            '>.ms-Button-flexContainer.ms-Button-flexContainer': {
+                justifyContent: 'flex-start'
+            },
+            '.ms-Button-textContainer': {
+                flexGrow: 'initial',
+                '>span': {
+                    fontWeight: 600,
+                }
+            }
+        }
+    });
+};
+const getSuggestionsCalloutStyles = (theme) => {
+    return mergeStyleSets({
+        suggestionsCallout: {
+            '.ms-Suggestions-title': {
+                padding: 0,
+                display: 'flex',
+                flexDirection: 'column',
+            }
+        },
+        suggestionsContainer: {
+            '.ms-Suggestions-item': {
+                ':hover': {
+                    backgroundColor: theme.semanticColors.buttonBackgroundHovered
+                },
+                '>.ms-Button--command[aria-selected="true"]': {
+                    backgroundColor: theme.semanticColors.buttonBackgroundPressed
+                }
+            }
+        },
+    });
+};
+
+export { getLookupStyles, getSuggestionsCalloutStyles, getTargetSelectorStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Lookup/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\n\nexport const getTargetSelectorStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        targetSelector: {\n            display: 'flex',\n            paddingLeft: 8,\n            paddingRight: 8,\n            paddingBottom: 8,\n            gap: 8,\n            paddingTop: 8,\n            '>span': {\n                lineHeight: 15,\n                minWidth: 'fit-content',\n                color: theme.semanticColors.listText,\n                fontWeight: 600\n            }\n        },\n        targetSelectorLinks: {\n            display: 'flex',\n            gap: 5,\n            flexWrap: 'wrap'\n        },\n        targetSelectorLink: {\n            color: theme.palette.blackTranslucent40,\n            '&[data-selected=\"true\"]': {\n                color: theme.semanticColors.link,\n                fontWeight: 600\n            }\n        },\n    })\n}\n\nconst getHeight = (height?: number) => {\n    if(height === -1 || height === 0) {\n        return undefined;\n    }\n    return height;\n}\n\nexport const getLookupStyles = (theme: ITheme, isSingleSelect: boolean, height?: number) => {\n    const _height = getHeight(height);\n    return mergeStyleSets({\n        displayName: 'talxis__lookupControl',\n        root: {\n            '[data-navigation-enabled=\"true\"]': {\n                '.ms-Button-label': {\n                    color: `${theme.semanticColors.link} !important`,\n                    fontWeight: 600,\n                    marginLeft: 2\n                },\n                ':hover': {\n                    textDecoration: 'underline',\n                    cursor: 'pointer !important'\n                }\n            },\n            '.ms-BasePicker-itemsWrapper .ms-CommandBar.ms-CommandBar': {\n                height: _height && isSingleSelect ? _height - 6 : undefined\n            },\n            '.ms-BasePicker-text': {\n                minHeight: _height ?? 32,\n                height: 'min-content',\n                paddingRight: !isSingleSelect ? 36 : undefined,\n                alignItems: 'baseline',\n\n                'input': {\n                    alignSelf: 'center'\n                },\n            },\n            '.TALXIS__input-buttons__root': {\n                height: _height && `${_height - 3}px !important`\n            }\n        },\n        createRecordBtn: {\n            height: 38,\n            width: '100%',\n            '.ms-Button-menuIcon': {\n                display: 'none'\n            },\n            '>.ms-Button-flexContainer.ms-Button-flexContainer': {\n                justifyContent: 'flex-start'\n            },\n            '.ms-Button-textContainer': {\n                flexGrow: 'initial',\n                '>span': {\n                    fontWeight: 600,\n                }\n            }\n        }\n    });\n}\n\nexport const getSuggestionsCalloutStyles = (theme: ITheme) => {\n    return mergeStyleSets({\n        suggestionsCallout: {\n            '.ms-Suggestions-title': {\n                padding: 0,\n                display: 'flex',\n                flexDirection: 'column',\n            }\n        },\n        suggestionsContainer: {\n            '.ms-Suggestions-item': {\n                ':hover': {\n                    backgroundColor: theme.semanticColors.buttonBackgroundHovered\n                },\n                '>.ms-Button--command[aria-selected=\"true\"]': {\n                    backgroundColor: theme.semanticColors.buttonBackgroundPressed\n                }\n            }\n        },\n    })\n}   "],"names":[],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+export declare const lookupTranslations: {
+    search: {
+        1033: string;
+        1029: string;
+    };
+    newRecord: {
+        1033: string;
+        1029: string;
+    };
+    searching: {
+        1033: string;
+        1029: string;
+    };
+    noRecordsFound: {
+        1033: string;
+        1029: string;
+    };
+    resultsFrom: {
+        1033: string;
+        1029: string;
+    };
+    noName: {
+        1033: string;
+        1029: string;
+    };
+    placeholder: {
+        1033: string;
+        1029: string;
+    };
+};

package/dist/components/Lookup/translations.js

@@ -0,0 +1,33 @@
+const lookupTranslations = {
+    search: {
+        1033: "Search",
+        1029: "Vyhledejte"
+    },
+    newRecord: {
+        1033: "New record",
+        1029: "Nový záznam"
+    },
+    searching: {
+        1033: "Searching...",
+        1029: "Hledám..."
+    },
+    noRecordsFound: {
+        1033: "No records found",
+        1029: "Nebyly nalezeny žádné záznamy"
+    },
+    resultsFrom: {
+        1033: "Results from:",
+        1029: "Výsledky z:"
+    },
+    noName: {
+        1033: "(No Name)",
+        1029: "(Bez názvu)"
+    },
+    placeholder: {
+        1033: "Search",
+        1029: "Vyhledejte"
+    }
+};
+
+export { lookupTranslations };
+//# sourceMappingURL=translations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"translations.js","sources":["../../../src/components/Lookup/translations.ts"],"sourcesContent":["export const lookupTranslations = {\n    search: {\n        1033: \"Search\",\n        1029: \"Vyhledejte\"\n    },\n    newRecord: {\n        1033: \"New record\",\n        1029: \"Nový záznam\"\n    },\n    searching: {\n        1033: \"Searching...\",\n        1029: \"Hledám...\"\n    },\n    noRecordsFound: {\n        1033: \"No records found\",\n        1029: \"Nebyly nalezeny žádné záznamy\"\n    },\n    resultsFrom: {\n        1033: \"Results from:\",\n        1029: \"Výsledky z:\"\n    },\n    noName: {\n        1033: \"(No Name)\",\n        1029: \"(Bez názvu)\"\n    },\n    placeholder: {\n        1033: \"Search\",\n        1029: \"Vyhledejte\"\n    }\n}"],"names":[],"mappings":"AAAa,MAAA,kBAAkB,GAAG;AAC9B,IAAA,MAAM,EAAE;AACJ,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,IAAI,EAAE,YAAY;AACrB,KAAA;AACD,IAAA,SAAS,EAAE;AACP,QAAA,IAAI,EAAE,YAAY;AAClB,QAAA,IAAI,EAAE,aAAa;AACtB,KAAA;AACD,IAAA,SAAS,EAAE;AACP,QAAA,IAAI,EAAE,cAAc;AACpB,QAAA,IAAI,EAAE,WAAW;AACpB,KAAA;AACD,IAAA,cAAc,EAAE;AACZ,QAAA,IAAI,EAAE,kBAAkB;AACxB,QAAA,IAAI,EAAE,+BAA+B;AACxC,KAAA;AACD,IAAA,WAAW,EAAE;AACT,QAAA,IAAI,EAAE,eAAe;AACrB,QAAA,IAAI,EAAE,aAAa;AACtB,KAAA;AACD,IAAA,MAAM,EAAE;AACJ,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,IAAI,EAAE,aAAa;AACtB,KAAA;AACD,IAAA,WAAW,EAAE;AACT,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,IAAI,EAAE,YAAY;AACrB,KAAA;;;;;"}

package/dist/components/MultiSelectOptionSet/ColofulOptions/ColorfulOptions.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IContext, IMultiSelectOptionSetProperty } from "../../../interfaces";
+interface IColorfulOptionsProps {
+    value: IMultiSelectOptionSetProperty;
+    context: IContext;
+}
+export declare const ColorfulOptions: (props: IColorfulOptionsProps) => JSX.Element;
+export {};

package/dist/components/MultiSelectOptionSet/ColofulOptions/ColorfulOptions.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { getColorfulOptionsStyles } from './styles.js';
+import { ThemeProvider, Text, merge } from '@fluentui/react';
+import { Theming, useThemeGenerator } from '@talxis/react-components';
+import { useControlTheme } from '../../../utils/theme/hooks/useControlTheme.js';
+
+const ColorfulOptions = (props) => {
+    const styles = useMemo(() => getColorfulOptionsStyles(), []);
+    const { value } = props;
+    const theme = useControlTheme(props.context.fluentDesignLanguage);
+    const options = value.attributes.Options;
+    const getOptionProperties = (option) => {
+        const backgroundColor = (option && option.Color) ?? theme.palette.neutralLight;
+        const textColor = Theming.GetTextColorForBackground(backgroundColor);
+        const optionTheme = useThemeGenerator(textColor, backgroundColor, textColor, merge({}, {
+            fonts: {
+                medium: {
+                    fontWeight: 600
+                }
+            }
+        }, props.context.fluentDesignLanguage?.v8FluentOverrides));
+        return {
+            containerProps: {
+                className: styles.option,
+                theme: optionTheme,
+            },
+            option: option,
+            textProps: {
+                children: option?.Label,
+            },
+        };
+    };
+    return (jsx("div", { className: styles.root, children: value.raw?.map((value, index) => {
+            const option = options.find(option => option.Value == value);
+            const optionProps = getOptionProperties(option);
+            return (jsx(ThemeProvider, { ...optionProps.containerProps, children: jsx(Text, { ...optionProps.textProps, title: optionProps.textProps.children, children: optionProps.textProps.children }) }, index));
+        }) }));
+};
+
+export { ColorfulOptions };
+//# sourceMappingURL=ColorfulOptions.js.map

package/dist/components/MultiSelectOptionSet/ColofulOptions/ColorfulOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorfulOptions.js","sources":["../../../../src/components/MultiSelectOptionSet/ColofulOptions/ColorfulOptions.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { getColorfulOptionsStyles } from \"./styles\";\nimport { IContext, IMultiSelectOptionSetProperty } from \"../../../interfaces\";\nimport { ThemeProvider, Text, merge, PartialTheme } from \"@fluentui/react\";\nimport { Theming, useThemeGenerator } from \"@talxis/react-components\";\nimport { useControlTheme } from \"../../../utils\";\n\ninterface IColorfulOptionsProps {\n    value: IMultiSelectOptionSetProperty;\n    context: IContext;\n}\n\nexport const ColorfulOptions = (props: IColorfulOptionsProps) => {\n    const styles = useMemo(() => getColorfulOptionsStyles(), []);\n    const { value } = props;\n    const theme = useControlTheme(props.context.fluentDesignLanguage);\n    const options = value.attributes.Options;\n\n    const getOptionProperties = (option: ComponentFramework.PropertyHelper.OptionMetadata | undefined): { containerProps: { className: string; theme: PartialTheme }; option: ComponentFramework.PropertyHelper.OptionMetadata | undefined; textProps: { children: string | undefined }; } => {\n        const backgroundColor = (option && option.Color) ?? theme.palette.neutralLight;\n        const textColor = Theming.GetTextColorForBackground(backgroundColor);\n        const optionTheme = useThemeGenerator(textColor, backgroundColor, textColor, merge({}, {\n            fonts: {\n                medium: {\n                    fontWeight: 600\n                }\n            }\n        } as PartialTheme, props.context.fluentDesignLanguage?.v8FluentOverrides as PartialTheme));\n        return {\n            containerProps: {\n                className: styles.option,\n                theme: optionTheme,\n            },\n            option: option,\n            textProps: {\n                children: option?.Label,\n            },\n        };\n    };\n\n\n    return (\n        <div className={styles.root}>\n            {value.raw?.map((value, index) => {\n                const option = options.find(option => option.Value == value);\n                const optionProps = getOptionProperties(option);\n                return (\n                    <ThemeProvider key={index} {...optionProps.containerProps}>\n                        <Text {...optionProps.textProps} title={optionProps.textProps.children}>{optionProps.textProps.children}</Text>\n                    </ThemeProvider>\n                );\n            })}\n        </div>\n    );\n}\n"],"names":["_jsx"],"mappings":";;;;;;;AAYa,MAAA,eAAe,GAAG,CAAC,KAA4B,KAAI;AAC5D,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,wBAAwB,EAAE,EAAE,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAClE,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,mBAAmB,GAAG,CAAC,MAAoE,KAAwL;AACrR,QAAA,MAAM,eAAe,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;QAC/E,MAAM,SAAS,GAAG,OAAO,CAAC,yBAAyB,CAAC,eAAe,CAAC,CAAC;AACrE,QAAA,MAAM,WAAW,GAAG,iBAAiB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;AACnF,YAAA,KAAK,EAAE;AACH,gBAAA,MAAM,EAAE;AACJ,oBAAA,UAAU,EAAE,GAAG;AAClB,iBAAA;AACJ,aAAA;SACY,EAAE,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,iBAAiC,CAAC,CAAC,CAAC;QAC3F,OAAO;AACH,YAAA,cAAc,EAAE;gBACZ,SAAS,EAAE,MAAM,CAAC,MAAM;AACxB,gBAAA,KAAK,EAAE,WAAW;AACrB,aAAA;AACD,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE;gBACP,QAAQ,EAAE,MAAM,EAAE,KAAK;AAC1B,aAAA;SACJ,CAAC;AACN,KAAC,CAAC;AAGF,IAAA,QACIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,QAAA,EAAA,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AAC7B,YAAA,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;AAC7D,YAAA,MAAM,WAAW,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAChD,YAAA,QACIA,GAAA,CAAC,aAAa,EAAA,EAAA,GAAiB,WAAW,CAAC,cAAc,EACrD,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,WAAW,CAAC,SAAS,EAAE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,QAAQ,YAAG,WAAW,CAAC,SAAS,CAAC,QAAQ,EAAQ,CAAA,EAAA,EAD/F,KAAK,CAET,EAClB;SACL,CAAC,EACA,CAAA,EACR;AACN;;;;"}

package/dist/components/MultiSelectOptionSet/ColofulOptions/styles.d.ts

@@ -0,0 +1,17 @@
+export declare const getColorfulOptionsStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        gap: string;
+        display: string;
+        overflow: string;
+        textAlign: string;
+    };
+    option: {
+        borderRadius: number;
+        padding: number;
+        paddingLeft: number;
+        paddingRight: number;
+        overflow: string;
+        textOverflow: string;
+        flexGrow: number;
+    };
+}>;

package/dist/components/MultiSelectOptionSet/ColofulOptions/styles.js

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

package/dist/components/MultiSelectOptionSet/ColofulOptions/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/MultiSelectOptionSet/ColofulOptions/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getColorfulOptionsStyles = () => {\n    return mergeStyleSets({\n        root: {\n            gap: '5px',\n            display: 'flex',\n            overflow: 'hidden',\n            textAlign: 'center'\n        },\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}"],"names":[],"mappings":";;AAEO,MAAM,wBAAwB,GAAG,MAAK;AACzC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,SAAS,EAAE,QAAQ;AACtB,SAAA;AACD,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;;;;"}

package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.d.ts

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

package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js

@@ -0,0 +1,132 @@
+import { jsx } from 'react/jsx-runtime';
+import { ComboBox } from '@talxis/react-components';
+import { ThemeProvider } from '@fluentui/react';
+import React__default, { useRef, useMemo, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { ColorfulOptions } from './ColofulOptions/ColorfulOptions.js';
+import { getIsColorFeatureEnabled, onRenderColorfulOption } from '../OptionSet/shared.js';
+import { getComboBoxStyles } from './styles.js';
+import { useControl } from '../../hooks/useControl.js';
+
+const MultiSelectOptionSet = (props) => {
+    const { sizing, onNotifyOutputChanged, theme } = useControl('MultiSelectOptionSet', props);
+    const ref = useRef(null);
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const componentRef = useRef(null);
+    const { Options } = parameters.value.attributes;
+    const context = props.context;
+    const applicationTheme = props.context.fluentDesignLanguage?.applicationTheme;
+    const isColorFeatureEnabled = useMemo(() => getIsColorFeatureEnabled(props.parameters.EnableOptionSetColors?.raw, Options), [props.parameters.EnableOptionSetColors?.raw, Options]);
+    const comboBoxOptions = Options.map(option => ({
+        key: option.Value.toString(),
+        text: option.Label,
+    }));
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    const handleChange = (option) => {
+        if (!option) {
+            onNotifyOutputChanged({
+                value: undefined
+            });
+            return;
+        }
+        const optionKey = option.key.toString();
+        const updatedSelectedKeys = new Set(boundValue.raw || []);
+        if (option.selected) {
+            updatedSelectedKeys.add(+optionKey);
+        }
+        else {
+            updatedSelectedKeys.delete(+optionKey);
+        }
+        const updatedSelectedKeysArray = Array.from(updatedSelectedKeys);
+        onNotifyOutputChanged({
+            value: updatedSelectedKeysArray.map(key => +key)
+        });
+    };
+    const isEmptyValue = () => {
+        if (!boundValue.raw) {
+            return true;
+        }
+        if (boundValue.raw.length === 0) {
+            return true;
+        }
+        return false;
+    };
+    const renderColorfulOptions = () => {
+        const className = 'talxis__multiSelectOptionSet__colorfulOptions';
+        const parent = ref.current?.querySelector('.ms-ComboBox');
+        const container = document.createElement('div');
+        container.setAttribute('class', `${className} ${styles.colorfulOptionsWrapper}`);
+        container.onclick = () => componentRef.current?.focus(true);
+        ReactDOM.render(React__default.createElement(ColorfulOptions, {
+            value: boundValue,
+            context: props.context
+        }), container);
+        const existingContainer = parent.querySelector(`:scope>.${className}`);
+        if (existingContainer && isEmptyValue()) {
+            //clear the container if no values are selected
+            parent.removeChild(existingContainer);
+        }
+        if (!existingContainer) {
+            parent.prepend(container);
+        }
+        else {
+            existingContainer.replaceWith(container);
+        }
+    };
+    useEffect(() => {
+        if (parameters.AutoFocus?.raw) {
+            componentRef.current?.focus(true);
+        }
+    }, []);
+    useEffect(() => {
+        if (isColorFeatureEnabled) {
+            renderColorfulOptions();
+        }
+    }, [boundValue.raw]);
+    const styles = getComboBoxStyles(isColorFeatureEnabled, isEmptyValue(), sizing.width, sizing.height);
+    const componentProps = onOverrideComponentProps({
+        componentRef: componentRef,
+        ref: ref,
+        options: comboBoxOptions,
+        allowFreeInput: true,
+        multiSelect: true,
+        autoComplete: "on",
+        autofill: parameters.AutoFocus?.raw === true ? {
+            autoFocus: true,
+        } : undefined,
+        onRenderContainer: (containerProps, defaultRender) => jsx(ThemeProvider, { theme: props.context.fluentDesignLanguage?.applicationTheme, children: defaultRender?.(containerProps) }),
+        onRenderOption: isColorFeatureEnabled ? (option) => onRenderColorfulOption(Options, option, theme) : undefined,
+        calloutProps: applicationTheme ? {
+            theme: applicationTheme
+        } : undefined,
+        readOnly: context.mode.isControlDisabled,
+        errorMessage: boundValue.errorMessage,
+        selectedKey: boundValue.raw ? boundValue.raw.map(key => key.toString()) : null,
+        useComboBoxAsMenuWidth: true,
+        hideErrorMessage: !parameters.ShowErrorMessage?.raw,
+        styles: { root: styles.root, callout: styles.callout },
+        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
+            key: 'copy',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Copy'
+            }
+        } : undefined,
+        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
+            key: 'delete',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Cancel'
+            },
+            onClick: (e, value) => {
+                handleChange(null);
+            }
+        } : undefined,
+        onChange: (e, option) => handleChange(option),
+    });
+    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", children: jsx(ComboBox, { ...componentProps }) }));
+};
+
+export { MultiSelectOptionSet };
+//# sourceMappingURL=MultiSelectOptionSet.js.map