@talxis/base-controls 1.2409.1 → 1.2409.2

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

@@ -2,7 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { useTheme, Text } from '@fluentui/react';
 import { optionSetStyles } from './styles.js';
-import color from 'color';
+import Color from 'color';
 import { useGridInstance } from '../../../../hooks/useGridInstance.js';
 import { DataType } from '../../../../enums/DataType.js';
 
@@ -41,7 +41,7 @@ const ReadOnlyOptionSet = (props) => {
         return defaultRender();
     }
     else {
-        return (jsx("div", { className: optionSetStyles.root, children: options.map(x => jsx("div", { title: x.Label, className: optionSetStyles.option, style: { backgroundColor: x.Color ?? defaultColor, color: new color(x.Color ?? defaultColor).isDark() ? 'white' : 'black' }, children: jsx(Text, { children: x.Label }) }, x.Value)) }));
+        return (jsx("div", { className: optionSetStyles.root, children: options.map(x => jsx("div", { title: x.Label, className: optionSetStyles.option, style: { backgroundColor: x.Color ?? defaultColor, color: new Color(x.Color ?? defaultColor).isDark() ? 'white' : 'black' }, children: jsx(Text, { children: x.Label }) }, x.Value)) }));
     }
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ReadOnlyOptionSet.js","sources":["../../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { Text } from '@fluentui/react';\nimport { optionSetStyles } from \"./styles\";\nimport color from 'color';\nimport { useTheme } from \"@fluentui/react\";\nimport { IGridColumn } from \"../../../../interfaces/IGridColumn\";\nimport { useGridInstance } from \"../../../../hooks/useGridInstance\";\nimport { DataType } from \"../../../../enums/DataType\";\n\ninterface IReadOnlyOptionSet {\n    column: IGridColumn;\n    record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;\n    defaultRender: () => ReactElement\n}\n\nexport const ReadOnlyOptionSet = (props: IReadOnlyOptionSet) => {\n    const grid = useGridInstance();\n    const { record, column, defaultRender } = { ...props }\n    const [options, setOptions] = useState<ComponentFramework.PropertyHelper.OptionMetadata[] | null>(null);\n    const theme = useTheme();\n    const defaultColor = theme.palette.neutralLight;\n\n    useEffect(() => {\n        (async () => {\n            const getOptions = async (): Promise<ComponentFramework.PropertyHelper.OptionMetadata[]> => {\n                const [defaultValue, options] = await grid.metadata.getOptions(column);\n                let value: any = record.getValue(column.key);\n                if (column.dataType === DataType.OPTIONSET) {\n                    value = value ? [parseInt(value)] : null;\n                }\n                if (column.dataType === DataType.MULTI_SELECT_OPTIONSET) {\n                    value = value ? value.split(',').map((value: string) => parseInt(value)) : null;\n                }\n                if (column.dataType === DataType.TWO_OPTIONS) {\n                    value = [parseInt(value)];\n                }\n                return options.filter(option => value?.includes(option.Value)) ?? [];\n            }\n            const results = await getOptions();\n            setOptions(results);\n        })();\n    }, [record.getValue(column.key)]);\n\n    //options not loaded yet\n    if (options === null) {\n        return <></>\n    }\n    //options loaded but either no value selected or no colors are present\n    if (options.length === 0 || !options.find(x => x.Color)) {\n        return defaultRender();\n    }\n    else {\n        return (\n            <div className={optionSetStyles.root}>\n                {options.map(x => <div\n                    key={x.Value}\n                    title={x.Label}\n                    className={optionSetStyles.option}\n                    style={{ backgroundColor: x.Color ?? defaultColor, color: new color(x.Color ?? defaultColor).isDark() ? 'white' : 'black' }}>\n                    <Text>{x.Label}</Text>\n                </div>)}\n            </div>\n        )\n    }\n\n}"],"names":["_jsx"],"mappings":";;;;;;;;AAgBa,MAAA,iBAAiB,GAAG,CAAC,KAAyB,KAAI;AAC3D,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAA;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA4D,IAAI,CAAC,CAAC;AACxG,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;IAEhD,SAAS,CAAC,MAAK;QACX,CAAC,YAAW;AACR,YAAA,MAAM,UAAU,GAAG,YAAwE;AACvF,gBAAA,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;gBACvE,IAAI,KAAK,GAAQ,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAC7C,gBAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS,EAAE;AACxC,oBAAA,KAAK,GAAG,KAAK,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;AAC5C,iBAAA;AACD,gBAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,sBAAsB,EAAE;AACrD,oBAAA,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAa,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;AACnF,iBAAA;AACD,gBAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,WAAW,EAAE;AAC1C,oBAAA,KAAK,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7B,iBAAA;AACD,gBAAA,OAAO,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;AACzE,aAAC,CAAA;AACD,YAAA,MAAM,OAAO,GAAG,MAAM,UAAU,EAAE,CAAC;YACnC,UAAU,CAAC,OAAO,CAAC,CAAC;SACvB,GAAG,CAAC;AACT,KAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;IAGlC,IAAI,OAAO,KAAK,IAAI,EAAE;AAClB,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;;AAED,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE;QACrD,OAAO,aAAa,EAAE,CAAC;AAC1B,KAAA;AACI,SAAA;AACD,QAAA,QACIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,IAAI,EAAA,QAAA,EAC/B,OAAO,CAAC,GAAG,CAAC,CAAC,IAAIA,GAEd,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,SAAS,EAAE,eAAe,CAAC,MAAM,EACjC,KAAK,EAAE,EAAE,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,YAAY,EAAE,KAAK,EAAE,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,YAAY,CAAC,CAAC,MAAM,EAAE,GAAG,OAAO,GAAG,OAAO,EAAE,EAC3H,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAE,CAAC,CAAC,KAAK,EAAQ,CAAA,EAAA,EAJjB,CAAC,CAAC,KAAK,CAKV,CAAC,EAAA,CACL,EACT;AACJ,KAAA;AAEL;;;;"}
+{"version":3,"file":"ReadOnlyOptionSet.js","sources":["../../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { Text } from '@fluentui/react';\nimport { optionSetStyles } from \"./styles\";\nimport color from 'color';\nimport { useTheme } from \"@fluentui/react\";\nimport { IGridColumn } from \"../../../../interfaces/IGridColumn\";\nimport { useGridInstance } from \"../../../../hooks/useGridInstance\";\nimport { DataType } from \"../../../../enums/DataType\";\n\ninterface IReadOnlyOptionSet {\n    column: IGridColumn;\n    record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;\n    defaultRender: () => ReactElement\n}\n\nexport const ReadOnlyOptionSet = (props: IReadOnlyOptionSet) => {\n    const grid = useGridInstance();\n    const { record, column, defaultRender } = { ...props }\n    const [options, setOptions] = useState<ComponentFramework.PropertyHelper.OptionMetadata[] | null>(null);\n    const theme = useTheme();\n    const defaultColor = theme.palette.neutralLight;\n\n    useEffect(() => {\n        (async () => {\n            const getOptions = async (): Promise<ComponentFramework.PropertyHelper.OptionMetadata[]> => {\n                const [defaultValue, options] = await grid.metadata.getOptions(column);\n                let value: any = record.getValue(column.key);\n                if (column.dataType === DataType.OPTIONSET) {\n                    value = value ? [parseInt(value)] : null;\n                }\n                if (column.dataType === DataType.MULTI_SELECT_OPTIONSET) {\n                    value = value ? value.split(',').map((value: string) => parseInt(value)) : null;\n                }\n                if (column.dataType === DataType.TWO_OPTIONS) {\n                    value = [parseInt(value)];\n                }\n                return options.filter(option => value?.includes(option.Value)) ?? [];\n            }\n            const results = await getOptions();\n            setOptions(results);\n        })();\n    }, [record.getValue(column.key)]);\n\n    //options not loaded yet\n    if (options === null) {\n        return <></>\n    }\n    //options loaded but either no value selected or no colors are present\n    if (options.length === 0 || !options.find(x => x.Color)) {\n        return defaultRender();\n    }\n    else {\n        return (\n            <div className={optionSetStyles.root}>\n                {options.map(x => <div\n                    key={x.Value}\n                    title={x.Label}\n                    className={optionSetStyles.option}\n                    style={{ backgroundColor: x.Color ?? defaultColor, color: new color(x.Color ?? defaultColor).isDark() ? 'white' : 'black' }}>\n                    <Text>{x.Label}</Text>\n                </div>)}\n            </div>\n        )\n    }\n\n}"],"names":["_jsx","color"],"mappings":"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"}

package/dist/components/OptionSet/OptionSet.js

@@ -1,20 +1,31 @@
 import { jsx } from 'react/jsx-runtime';
-import { ComboBox } from '@talxis/react-components';
+import { ComboBox, ColorfulOption } from '@talxis/react-components';
 import { ThemeProvider } from '@fluentui/react';
-import { useRef, useEffect } from 'react';
+import { useRef, useMemo, useEffect } from 'react';
+import { useComboBoxTheme } from './useComboBoxTheme.js';
+import { getComboBoxStyles } from './styles.js';
 import { useControl } from '../../hooks/useControl.js';
 
 const OptionSet = (props) => {
-    const { sizing, onNotifyOutputChanged, theme } = useControl('OptionSet', props);
     const componentRef = useRef(null);
+    const { sizing, onNotifyOutputChanged, theme } = useControl('OptionSet', props);
+    const styles = useMemo(() => getComboBoxStyles(sizing.width, sizing.height), [sizing.width, sizing.height]);
+    const [colorFeatureEnabled, overridenTheme] = useComboBoxTheme(props, theme);
     const parameters = props.parameters;
     const boundValue = parameters.value;
     const { Options } = parameters.value.attributes;
     const context = props.context;
+    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
     const comboBoxOptions = Options.map(option => ({
         key: option.Value.toString(),
         text: option.Label,
+        title: option.Label
     }));
+    useEffect(() => {
+        if (parameters.AutoFocus?.raw) {
+            componentRef.current?.focus(true);
+        }
+    }, []);
     const handleChange = (option) => {
         let value = undefined;
         if (option) {
@@ -24,35 +35,58 @@ const OptionSet = (props) => {
             value: value
         });
     };
-    useEffect(() => {
-        if (parameters.AutoFocus?.raw) {
-            componentRef.current?.focus(true);
+    const onRenderColorfulOption = (option) => {
+        if (!option) {
+            return null;
         }
-    }, []);
-    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", children: jsx(ComboBox, { componentRef: componentRef, options: comboBoxOptions, readOnly: context.mode.isControlDisabled, selectedKey: boundValue.raw?.toString() ?? null, errorMessage: boundValue.errorMessage, useComboBoxAsMenuWidth: true, hideErrorMessage: !parameters.ShowErrorMessage?.raw, styles: {
-                root: {
-                    height: sizing.height,
-                    width: sizing.width,
-                    display: 'flex',
-                    alignItems: 'center',
-                },
-                callout: {
-                    maxHeight: '300px !important'
-                }
-            }, clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
+        const color = Options.find(item => item.Value.toString() === option.key)?.Color;
+        return jsx(ColorfulOption, { label: option.text, color: color });
+    };
+    const componentProps = onOverrideComponentProps({
+        componentRef: componentRef,
+        options: comboBoxOptions,
+        readOnly: context.mode.isControlDisabled,
+        selectedKey: boundValue.raw?.toString() ?? null,
+        errorMessage: boundValue.errorMessage,
+        useComboBoxAsMenuWidth: true,
+        hideErrorMessage: !parameters.ShowErrorMessage?.raw,
+        styles: { root: styles.root, callout: styles.callout },
+        ...(parameters.EnableCopyButton?.raw === true && {
+            clickToCopyProps: {
                 key: 'copy',
                 showOnlyOnHover: true,
                 iconProps: {
-                    iconName: 'Copy'
-                }
-            } : undefined, deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
+                    iconName: 'Copy',
+                },
+            },
+        }),
+        ...(parameters.EnableDeleteButton?.raw === true && {
+            deleteButtonProps: {
                 key: 'delete',
                 showOnlyOnHover: true,
                 iconProps: {
-                    iconName: 'Cancel'
+                    iconName: 'Cancel',
+                },
+                onClick: (e, value) => {
+                    handleChange(null);
                 },
-                onClick: (e, value) => { handleChange(null); }
-            } : undefined, onChange: (e, option) => handleChange(option) }) }));
+            },
+        }),
+        ...(parameters.EnableOptionSetColors?.raw === true && {
+            affixThemeOverride: {
+                semanticColors: {
+                    successIcon: overridenTheme.semanticColors.inputText,
+                    infoIcon: overridenTheme.semanticColors.inputText
+                },
+                palette: {
+                    themeDarkAlt: overridenTheme.semanticColors.inputText
+                }
+            },
+        }),
+        onChange: (e, option) => handleChange(option),
+        onRenderOption: colorFeatureEnabled ? onRenderColorfulOption : undefined,
+    });
+    return (jsx(ThemeProvider, { theme: overridenTheme, applyTo: "none", children: jsx(ComboBox, { ...componentProps }) }));
 };
 
 export { OptionSet };

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

@@ -1 +1 @@
-{"version":3,"file":"OptionSet.js","sources":["../../../src/components/OptionSet/OptionSet.tsx"],"sourcesContent":["\nimport { IOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\n\nexport const OptionSet = (props: IOptionSet) => {\n    const { sizing, onNotifyOutputChanged, theme } = useControl('OptionSet', props);\n    const componentRef = useRef<IComboBox>(null);\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const { Options } = parameters.value.attributes;\n    const context = props.context;\n    const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n        key: option.Value.toString(),\n        text: option.Label,\n    }));\n\n    const handleChange = (option?: IComboBoxOption | null): void => {\n        let value = undefined;\n        if (option) {\n            value = parseInt(option.key as string);\n        }\n        onNotifyOutputChanged({\n            value: value\n        });\n    };\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <ComboBox\n                componentRef={componentRef}\n                options={comboBoxOptions}\n                readOnly={context.mode.isControlDisabled}\n                selectedKey={boundValue.raw?.toString() ?? null}\n                errorMessage={boundValue.errorMessage}\n                useComboBoxAsMenuWidth\n                hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n                styles={{\n                    root: {\n                        height: sizing.height,\n                        width: sizing.width,\n                        display: 'flex',\n                        alignItems: 'center',\n                    },\n                    callout: {\n                        maxHeight: '300px !important'\n                    }\n                }}\n                clickToCopyProps={parameters.EnableCopyButton?.raw === true ? {\n                    key: 'copy',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Copy'\n                    }\n                } : undefined}\n                deleteButtonProps={parameters.EnableDeleteButton?.raw === true ? {\n                    key: 'delete',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Cancel'\n                    },\n                    onClick: (e, value) => { handleChange(null); }\n                } : undefined}\n                onChange={(e, option) => handleChange(option)}\n            /></ThemeProvider>);\n};"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"OptionSet.js","sources":["../../../src/components/OptionSet/OptionSet.tsx"],"sourcesContent":["\nimport { IOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox, ColorfulOption } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, Icon, ThemeProvider } from '@fluentui/react';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useComboBoxTheme } from './useComboBoxTheme';\nimport { getComboBoxStyles } from './styles';\nimport React from 'react';\n\nexport const OptionSet = (props: IOptionSet) => {\n    const componentRef = useRef<IComboBox>(null);\n    const { sizing, onNotifyOutputChanged, theme } = useControl('OptionSet', props);\n    const styles = useMemo(() => getComboBoxStyles(sizing.width, sizing.height), [sizing.width, sizing.height]);\n    const [colorFeatureEnabled, overridenTheme] = useComboBoxTheme(props, theme);\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const { Options } = parameters.value.attributes;\n    const context = props.context;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n    const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n        key: option.Value.toString(),\n        text: option.Label,\n        title: option.Label\n    }));\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    const handleChange = (option?: IComboBoxOption | null): void => {\n        let value = undefined;\n        if (option) {\n            value = parseInt(option.key as string);\n        }\n        onNotifyOutputChanged({\n            value: value\n        });\n    };\n\n    const onRenderColorfulOption = (option: IComboBoxOption | undefined) => {\n        if (!option) {\n            return null;\n        }\n        const color = Options.find(item => item.Value.toString() === option.key)?.Color;\n        return <ColorfulOption label={option.text} color={color} />\n    };\n\n    const componentProps = onOverrideComponentProps({\n        componentRef: componentRef,\n        options: comboBoxOptions,\n        readOnly: context.mode.isControlDisabled,\n        selectedKey: boundValue.raw?.toString() ?? null,\n        errorMessage: boundValue.errorMessage,\n        useComboBoxAsMenuWidth: true,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        styles: { root: styles.root, callout: styles.callout },\n        ...(parameters.EnableCopyButton?.raw === true && {\n            clickToCopyProps: {\n                key: 'copy',\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: 'Copy',\n                },\n            },\n        }),\n        ...(parameters.EnableDeleteButton?.raw === true && {\n            deleteButtonProps: {\n                key: 'delete',\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: 'Cancel',\n                },\n                onClick: (e, value) => {\n                    handleChange(null);\n                },\n            },\n        }),\n        ...(parameters.EnableOptionSetColors?.raw === true && {\n            affixThemeOverride: {\n                semanticColors: {\n                    successIcon: overridenTheme.semanticColors.inputText,\n                    infoIcon: overridenTheme.semanticColors.inputText\n                },\n                palette: {\n                    themeDarkAlt: overridenTheme.semanticColors.inputText\n                }\n            },\n        }),\n        onChange: (e, option) => handleChange(option),\n        onRenderOption: colorFeatureEnabled ? onRenderColorfulOption : undefined,\n    });\n\n    return (\n        <ThemeProvider theme={overridenTheme} applyTo=\"none\">\n            <ComboBox\n                {...componentProps} />\n        </ThemeProvider>);\n};"],"names":["_jsx"],"mappings":"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"}

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

@@ -1,11 +1,12 @@
 import { IComboBoxProps } from "@talxis/react-components";
-import { IOptionSetProperty } from "../../interfaces";
+import { IOptionSetProperty, ITwoOptionsProperty } from "../../interfaces";
 import { IControl, IOutputs } from "../../interfaces/context";
 import { IInputParameters } from "../../interfaces/parameters";
 export interface IOptionSet extends IControl<IOptionSetParameters, IOptionSetOutputs, any, IComboBoxProps> {
 }
 export interface IOptionSetParameters extends IInputParameters {
     value: IOptionSetProperty;
+    EnableOptionSetColors?: Omit<ITwoOptionsProperty, 'attributes'>;
 }
 export interface IOptionSetOutputs extends IOutputs {
     value?: number;

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

@@ -0,0 +1,11 @@
+export declare const getComboBoxStyles: (width?: number, height?: number) => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        height: number | undefined;
+        width: number | undefined;
+        display: string;
+        alignItems: string;
+    };
+    callout: {
+        maxHeight: string;
+    };
+}>;

package/dist/components/OptionSet/styles.js

@@ -0,0 +1,18 @@
+import { mergeStyleSets } from '@fluentui/react';
+
+const getComboBoxStyles = (width, height) => {
+    return mergeStyleSets({
+        root: {
+            height: height,
+            width: width,
+            display: 'flex',
+            alignItems: 'center',
+        },
+        callout: {
+            maxHeight: '300px !important',
+        },
+    });
+};
+
+export { getComboBoxStyles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/OptionSet/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getComboBoxStyles = (width?: number, height?: number) => {\n    return mergeStyleSets({\n        root: {\n            height: height,\n            width: width,\n            display: 'flex',\n            alignItems: 'center',\n        },\n        callout: {\n            maxHeight: '300px !important',\n        },\n    })\n}"],"names":[],"mappings":";;MAEa,iBAAiB,GAAG,CAAC,KAAc,EAAE,MAAe,KAAI;AACjE,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACvB,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,SAAS,EAAE,kBAAkB;AAChC,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/OptionSet/useComboBoxTheme.d.ts

@@ -0,0 +1,3 @@
+import { IOptionSet } from "./interfaces";
+import { ITheme } from "@fluentui/react";
+export declare const useComboBoxTheme: (props: IOptionSet, theme: ITheme) => [boolean, ITheme];

package/dist/components/OptionSet/useComboBoxTheme.js

@@ -0,0 +1,45 @@
+import { createV9Theme, createBrandVariants } from '@fluentui/react-migration-v8-v9';
+import { ThemeDesigner } from '@talxis/react-components/dist/utilities/ThemeDesigner';
+import React__default, { useMemo } from 'react';
+import Color from 'color';
+import { getControlTheme } from '../../utils/Theme.js';
+
+const useComboBoxTheme = (props, theme) => {
+    const boundValue = props.parameters.value;
+    const { Options } = boundValue.attributes;
+    const isColorFeatureEnabled = () => {
+        if (props.parameters.EnableOptionSetColors?.raw && Options.find(x => x.Color)) {
+            return true;
+        }
+        return false;
+    };
+    const getOverridenFluentDesingLanguge = () => {
+        const isColorEnabled = isColorFeatureEnabled();
+        if (!isColorEnabled) {
+            return props.context.fluentDesignLanguage;
+        }
+        const color = boundValue.attributes.Options.find(x => x.Value === boundValue.raw)?.Color;
+        if (!color) {
+            return props.context.fluentDesignLanguage;
+        }
+        const inputBackground = color;
+        const textColor = Color(color).luminosity() > 0.5 ? '#000000' : '#ffffff';
+        const primaryColor = textColor == '#000000' ? Color(inputBackground).darken(0.5).hex() : Color(inputBackground).lighten(0.5).hex();
+        const customV8Theme = ThemeDesigner.generateTheme({
+            primaryColor: primaryColor,
+            backgroundColor: theme.semanticColors.bodyBackground,
+            textColor: textColor
+        });
+        const customTokenTheme = createV9Theme(customV8Theme);
+        return {
+            brand: createBrandVariants(customV8Theme.palette),
+            tokenTheme: { ...customTokenTheme, inputBackground: inputBackground, inputText: textColor }
+        };
+    };
+    const overridenFluentDesignLanguage = React__default.useMemo(() => getOverridenFluentDesingLanguge(), [boundValue.raw]);
+    const overridenTheme = useMemo(() => getControlTheme(overridenFluentDesignLanguage), [overridenFluentDesignLanguage]);
+    return [isColorFeatureEnabled(), overridenTheme];
+};
+
+export { useComboBoxTheme };
+//# sourceMappingURL=useComboBoxTheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useComboBoxTheme.js","sources":["../../../src/components/OptionSet/useComboBoxTheme.ts"],"sourcesContent":["import { createBrandVariants, createV9Theme } from \"@fluentui/react-migration-v8-v9\";\nimport { ThemeDesigner } from \"@talxis/react-components/dist/utilities/ThemeDesigner\";\nimport { useMemo } from \"react\";\nimport { getControlTheme } from \"../../utils\";\nimport React from \"react\";\nimport { IOptionSet } from \"./interfaces\";\nimport Color from \"color\";\nimport { ITheme } from \"@fluentui/react\";\n\nexport const useComboBoxTheme = (props: IOptionSet, theme: ITheme): [boolean, ITheme] => {\n    const boundValue = props.parameters.value;\n    const { Options } = boundValue.attributes;\n\n    const isColorFeatureEnabled = () => {\n        if(props.parameters.EnableOptionSetColors?.raw && Options.find(x => x.Color)) {\n            return true;\n        }\n        return false;\n    }\n    const getOverridenFluentDesingLanguge = () => {\n        const isColorEnabled = isColorFeatureEnabled();\n        if(!isColorEnabled) {\n            return props.context.fluentDesignLanguage;\n        }\n        const color = boundValue.attributes.Options.find(x => x.Value === boundValue.raw)?.Color;\n        if(!color) {\n            return props.context.fluentDesignLanguage;\n        }\n\n        const inputBackground = color;\n        const textColor = Color(color).luminosity() > 0.5 ? '#000000' : '#ffffff';\n        const primaryColor = textColor == '#000000' ? Color(inputBackground).darken(0.5).hex() : Color(inputBackground).lighten(0.5).hex();\n        \n        const customV8Theme = ThemeDesigner.generateTheme({\n            primaryColor: primaryColor,\n            backgroundColor: theme.semanticColors.bodyBackground,\n            textColor: textColor\n        });\n\n        const customTokenTheme = createV9Theme(customV8Theme);\n        return {\n            brand: createBrandVariants(customV8Theme.palette),\n            tokenTheme: { ...customTokenTheme, inputBackground: inputBackground, inputText: textColor }\n        }\n    }\n    const overridenFluentDesignLanguage = React.useMemo(() => getOverridenFluentDesingLanguge(), [boundValue.raw]);\n    const overridenTheme = useMemo(() => getControlTheme(overridenFluentDesignLanguage), [overridenFluentDesignLanguage])\n    return [isColorFeatureEnabled(), overridenTheme];\n}"],"names":["React"],"mappings":";;;;;;MASa,gBAAgB,GAAG,CAAC,KAAiB,EAAE,KAAa,KAAuB;AACpF,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;AAC1C,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,UAAU,CAAC;IAE1C,MAAM,qBAAqB,GAAG,MAAK;QAC/B,IAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,EAAE,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE;AAC1E,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAA;IACD,MAAM,+BAA+B,GAAG,MAAK;AACzC,QAAA,MAAM,cAAc,GAAG,qBAAqB,EAAE,CAAC;QAC/C,IAAG,CAAC,cAAc,EAAE;AAChB,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC;AAC7C,SAAA;QACD,MAAM,KAAK,GAAG,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;QACzF,IAAG,CAAC,KAAK,EAAE;AACP,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC;AAC7C,SAAA;QAED,MAAM,eAAe,GAAG,KAAK,CAAC;AAC9B,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,UAAU,EAAE,GAAG,GAAG,GAAG,SAAS,GAAG,SAAS,CAAC;AAC1E,QAAA,MAAM,YAAY,GAAG,SAAS,IAAI,SAAS,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;AAEnI,QAAA,MAAM,aAAa,GAAG,aAAa,CAAC,aAAa,CAAC;AAC9C,YAAA,YAAY,EAAE,YAAY;AAC1B,YAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;AACpD,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA,CAAC,CAAC;AAEH,QAAA,MAAM,gBAAgB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;QACtD,OAAO;AACH,YAAA,KAAK,EAAE,mBAAmB,CAAC,aAAa,CAAC,OAAO,CAAC;AACjD,YAAA,UAAU,EAAE,EAAE,GAAG,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE;SAC9F,CAAA;AACL,KAAC,CAAA;AACD,IAAA,MAAM,6BAA6B,GAAGA,cAAK,CAAC,OAAO,CAAC,MAAM,+BAA+B,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/G,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,eAAe,CAAC,6BAA6B,CAAC,EAAE,CAAC,6BAA6B,CAAC,CAAC,CAAA;AACrH,IAAA,OAAO,CAAC,qBAAqB,EAAE,EAAE,cAAc,CAAC,CAAC;AACrD;;;;"}

package/dist/index.d.ts

@@ -786,6 +786,7 @@ interface IOptionSet extends IControl<IOptionSetParameters, IOptionSetOutputs, a
 }
 interface IOptionSetParameters extends IInputParameters {
     value: IOptionSetProperty;
+    EnableOptionSetColors?: Omit<ITwoOptionsProperty, 'attributes'>;
 }
 interface IOptionSetOutputs extends IOutputs$1 {
     value?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talxis/base-controls",
-  "version": "1.2409.1",
+  "version": "1.2409.2",
   "description": "Set of React components that natively work with Power Apps Component Framework API's",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -50,16 +50,8 @@
     "build": "rollup -c",
     "documentation": "start-storybook -p 6006",
     "build-documentation": "build-storybook",
-    "lint": "eslint \"./src/**\"",
-    "lint:fix": "eslint \"./src/**\" --fix",
     "yalc": "rollup -c && yalc publish --sig"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -80,7 +72,7 @@
     "@fluentui/react": "^8.119.1",
     "@fluentui/react-migration-v8-v9": "^9.6.20",
     "@talxis/client-libraries": "1.2407.2",
-    "@talxis/react-components": "1.2408.10",
+    "@talxis/react-components": "^1.2409.8",
     "color": "^4.2.3",
     "dayjs": "^1.11.10",
     "external-svg-loader": "^1.7.1",