@talxis/base-controls 1.2412.2 → 1.2501.3

package/dist/components/DateTime/hooks/useDateTime.d.ts

@@ -1,6 +1,6 @@
 import { IDateTime } from "../interfaces";
 import { ITranslation } from "../../../hooks";
-import { ITheme } from "../../../interfaces/theme";
+import { ITheme } from "@talxis/react-components";
 export declare const useDateTime: (props: IDateTime, ref: React.RefObject<HTMLDivElement>) => [boolean, ITheme, ITranslation<Partial<import("../../..").ITranslations<{
     time: {
         1029: string;

package/dist/components/DateTime/hooks/useDateTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDateTime.js","sources":["../../../../src/components/DateTime/hooks/useDateTime.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters} from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport {ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"../../../interfaces/theme\";\n\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [\n    boolean,\n    ITheme,\n    ITranslation<Required<IDateTime>['translations']>,\n    {\n        get: () => Date | undefined;\n        getFormatted: () => string | undefined;\n        set: (date?: Date, time?: string) => void;\n        setDateString: (value: string | undefined) => void;\n        clear: () => void;\n    },\n    {\n        shortDatePattern: string\n        shortTimePattern: string;\n        fullDateTimePattern: string;\n    },\n] => {\n\n    const boundValue = props.parameters.value;\n    const context = props.context;\n    const behavior = boundValue.attributes.Behavior;\n    const format = boundValue.attributes.Format;\n    const dateFormattingInfo = context.userSettings.dateFormattingInfo;\n    const lastValidDateRef = useRef<Date | undefined>(undefined);\n    \n    const isDateTime = (() => {\n        switch (format) {\n            case 'DateAndTime':\n            case 'Date and Time':\n            case 'DateAndTime.DateAndTime':\n            case 'datetime': {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n\n    //MS returns the pattern without correct separator and they do this during formatting\n    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n    const formatting = (() => {\n        if (isDateTime) {\n            return `${shortDatePattern} ${shortTimePattern}`;\n        }\n        return shortDatePattern;\n    })();\n\n    const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n        if (date instanceof Date) {\n            if (isDateTime) {\n                //should handle the time zone conversion\n                return context.formatting.formatTime(date, behavior);\n            }\n            return context.formatting.formatDateShort(date);\n        }\n        return date;\n    };\n\n    const {value, labels, theme, setValue, onNotifyOutputChanged} = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n        formatter: formatDate,\n        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\n    });\n\n    useEffect(() => {\n        const onBlur = () => {\n            onNotifyOutputChanged({\n                value: dateExtractor(value!) as any\n            });\n        };\n        const input = ref.current?.querySelector('input');\n        input?.addEventListener('blur', onBlur);\n        return () => {\n            input?.removeEventListener('blur', onBlur);\n        };\n    }, [value]);\n\n    useEffect(() => {\n        if (boundValue.raw instanceof Date) {\n            lastValidDateRef.current = boundValue.raw;\n        }\n    }, [boundValue.raw]);\n\n    const getDate = (): Date | undefined => {\n        if (boundValue.raw instanceof Date) {\n            if (behavior === 3) {\n                //the date in javascript gets automatically adjusted to local time zone\n                //this will make it think that the date already came in local time, thus not adjusting the time\n                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n                return date;\n            }\n            return boundValue.raw;\n        }\n        if(boundValue.error) {\n            return lastValidDateRef.current;\n        }\n        return undefined;\n    };\n\n    const dateExtractor = (value: string | Date): Date | string => {\n        if (value instanceof Date) {\n            return value;\n        }\n        const dayjsDate = dayjs(value, formatting, true);\n        if (!dayjsDate.isValid()) {\n            const dayJsDateNoWhiteSpace = dayjs(value?.replaceAll(' ', ''), formatting.replaceAll(' ', ''));\n            if(!dayJsDateNoWhiteSpace.isValid()) {\n                return value;\n            }\n            else {\n                return dayJsDateNoWhiteSpace.toDate();\n            }\n        }\n        return dayjsDate.toDate();\n    };\n\n    const clearDate = () => {\n        onNotifyOutputChanged({\n            value: undefined\n        });\n    };\n\n    const selectDate = (date?: Date, time?: string) => {\n        //onSelectDate can trigger on initial click with empty date, do not continue in this case\n        //for clearing dates, date.clear should be used\n        if(!date && !time) {\n            return;\n        }\n        let dayjsDate = dayjs(date ?? getDate());\n        //date selected from calendar, keep the original time\n        if (!time) {\n            time = dayjs(getDate()).format(shortTimePattern);\n        }\n        const dayjsTime = dayjs(time, shortTimePattern, true);\n        let invalidDateString;\n        if(!dayjsTime.isValid()) {\n            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n        }\n        dayjsDate = dayjsDate.hour(dayjsTime.hour());\n        dayjsDate = dayjsDate.minute(dayjsTime.minute());\n        onNotifyOutputChanged({\n            value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n        });\n    };\n    return [\n        isDateTime,\n        theme,\n        labels,\n        {\n            get: getDate,\n            clear: clearDate,\n            getFormatted: () => value,\n            set: selectDate,\n            setDateString: setValue\n        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDateTime.js","sources":["../../../../src/components/DateTime/hooks/useDateTime.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters} from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport {ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"@talxis/react-components\";\n\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [\n    boolean,\n    ITheme,\n    ITranslation<Required<IDateTime>['translations']>,\n    {\n        get: () => Date | undefined;\n        getFormatted: () => string | undefined;\n        set: (date?: Date, time?: string) => void;\n        setDateString: (value: string | undefined) => void;\n        clear: () => void;\n    },\n    {\n        shortDatePattern: string\n        shortTimePattern: string;\n        fullDateTimePattern: string;\n    },\n] => {\n\n    const boundValue = props.parameters.value;\n    const context = props.context;\n    const behavior = boundValue.attributes.Behavior;\n    const format = boundValue.attributes.Format;\n    const dateFormattingInfo = context.userSettings.dateFormattingInfo;\n    const lastValidDateRef = useRef<Date | undefined>(undefined);\n    \n    const isDateTime = (() => {\n        switch (format) {\n            case 'DateAndTime':\n            case 'Date and Time':\n            case 'DateAndTime.DateAndTime':\n            case 'datetime': {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n\n    //MS returns the pattern without correct separator and they do this during formatting\n    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n    const formatting = (() => {\n        if (isDateTime) {\n            return `${shortDatePattern} ${shortTimePattern}`;\n        }\n        return shortDatePattern;\n    })();\n\n    const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n        if (date instanceof Date) {\n            if (isDateTime) {\n                //should handle the time zone conversion\n                return context.formatting.formatTime(date, behavior);\n            }\n            return context.formatting.formatDateShort(date);\n        }\n        return date;\n    };\n\n    const {value, labels, theme, setValue, onNotifyOutputChanged} = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n        formatter: formatDate,\n        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\n    });\n\n    useEffect(() => {\n        const onBlur = () => {\n            onNotifyOutputChanged({\n                value: dateExtractor(value!) as any\n            });\n        };\n        const input = ref.current?.querySelector('input');\n        input?.addEventListener('blur', onBlur);\n        return () => {\n            input?.removeEventListener('blur', onBlur);\n        };\n    }, [value]);\n\n    useEffect(() => {\n        if (boundValue.raw instanceof Date) {\n            lastValidDateRef.current = boundValue.raw;\n        }\n    }, [boundValue.raw]);\n\n    const getDate = (): Date | undefined => {\n        if (boundValue.raw instanceof Date) {\n            if (behavior === 3) {\n                //the date in javascript gets automatically adjusted to local time zone\n                //this will make it think that the date already came in local time, thus not adjusting the time\n                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n                return date;\n            }\n            return boundValue.raw;\n        }\n        if(boundValue.error) {\n            return lastValidDateRef.current;\n        }\n        return undefined;\n    };\n\n    const dateExtractor = (value: string | Date): Date | string => {\n        if (value instanceof Date) {\n            return value;\n        }\n        const dayjsDate = dayjs(value, formatting, true);\n        if (!dayjsDate.isValid()) {\n            const dayJsDateNoWhiteSpace = dayjs(value?.replaceAll(' ', ''), formatting.replaceAll(' ', ''));\n            if(!dayJsDateNoWhiteSpace.isValid()) {\n                return value;\n            }\n            else {\n                return dayJsDateNoWhiteSpace.toDate();\n            }\n        }\n        return dayjsDate.toDate();\n    };\n\n    const clearDate = () => {\n        onNotifyOutputChanged({\n            value: undefined\n        });\n    };\n\n    const selectDate = (date?: Date, time?: string) => {\n        //onSelectDate can trigger on initial click with empty date, do not continue in this case\n        //for clearing dates, date.clear should be used\n        if(!date && !time) {\n            return;\n        }\n        let dayjsDate = dayjs(date ?? getDate());\n        //date selected from calendar, keep the original time\n        if (!time) {\n            time = dayjs(getDate()).format(shortTimePattern);\n        }\n        const dayjsTime = dayjs(time, shortTimePattern, true);\n        let invalidDateString;\n        if(!dayjsTime.isValid()) {\n            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n        }\n        dayjsDate = dayjsDate.hour(dayjsTime.hour());\n        dayjsDate = dayjsDate.minute(dayjsTime.minute());\n        onNotifyOutputChanged({\n            value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n        });\n    };\n    return [\n        isDateTime,\n        theme,\n        labels,\n        {\n            get: getDate,\n            clear: clearDate,\n            getFormatted: () => value,\n            set: selectDate,\n            setDateString: setValue\n        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}

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

@@ -2,8 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useTheme, ThemeProvider, Callout, Text, Link, Icon, PrimaryButton, DefaultButton } from '@fluentui/react';
 import { getNotificationIconStyles } from './styles.js';
 import { forwardRef, useMemo, useState, useRef, useImperativeHandle } from 'react';
-import { CommandBar } from '@talxis/react-components';
-import { useThemeOverride } from '../../../../../../../hooks/useThemeOverride.js';
+import { useThemeGenerator, CommandBar } from '@talxis/react-components';
 
 const Notifications = forwardRef((props, ref) => {
     const { notifications } = { ...props };
@@ -12,7 +11,7 @@ const Notifications = forwardRef((props, ref) => {
     const iconId = useMemo(() => `icon${crypto.randomUUID()}`, []);
     const [selectedNotification, setSelectedNotification] = useState(null);
     const commandBarRef = useRef(null);
-    const overridenTheme = useThemeOverride(theme.palette.themePrimary, 'transparent', theme.semanticColors.bodyText);
+    const overridenTheme = useThemeGenerator(theme.palette.themePrimary, 'transparent', theme.semanticColors.bodyText);
     useImperativeHandle(ref, () => {
         return {
             remeasureCommandBar: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"Notifications.js","sources":["../../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/Notifications/Notifications.tsx"],"sourcesContent":["import { Icon, useTheme, Text, Callout, PrimaryButton, DefaultButton, Link, ICommandBar, ThemeProvider } from \"@fluentui/react\"\nimport { getNotificationIconStyles } from \"./styles\";\nimport { forwardRef, useImperativeHandle, useMemo, useRef, useState } from \"react\";\nimport { IAddControlNotificationOptions, IControlNotificationAction } from \"@talxis/client-libraries\";\nimport { CommandBar } from \"@talxis/react-components\";\nimport { useThemeOverride } from \"../../../../../../../hooks/useThemeOverride\";\n\ninterface INotifications {\n    notifications: IAddControlNotificationOptions[],\n    className?: string;\n}\n\nexport interface INotificationsRef {\n    remeasureCommandBar: () => void;\n}\n\n\nexport const Notifications = forwardRef<INotificationsRef, INotifications>((props, ref) => {\n    const { notifications } = { ...props };\n    const theme = useTheme();\n    const styles = getNotificationIconStyles(theme);\n    const iconId = useMemo(() => `icon${crypto.randomUUID()}`, []);\n    const [selectedNotification, setSelectedNotification] = useState<IAddControlNotificationOptions | null>(null);\n    const commandBarRef = useRef<ICommandBar>(null);\n    const overridenTheme = useThemeOverride(theme.palette.themePrimary, 'transparent', theme.semanticColors.bodyText)\n\n    useImperativeHandle(ref, () => {\n        return {\n            remeasureCommandBar: () => {\n                commandBarRef.current?.remeasure();\n            }\n        }\n    })\n\n    const getIconName = (notification: IAddControlNotificationOptions): string | undefined => {\n        if (notification.iconName) {\n            return notification.iconName;\n        }\n        return notification.notificationLevel === 'ERROR' ? 'Error' : undefined;\n    }\n\n    const renderActionButton = (action: IControlNotificationAction, buttonType: 'primary' | 'default') => {\n        const Button = buttonType === 'primary' ? PrimaryButton : DefaultButton;\n        return <Button\n            text={action.message}\n            iconProps={action?.iconName ? {\n                iconName: action.iconName\n            } : undefined}\n            onClick={() => action.actions.map(callback => callback())} />\n    }\n\n    const renderActions = (actions: IControlNotificationAction[]): JSX.Element => {\n        if (actions.length === 0) {\n            return <></>\n        }\n        //render actions as buttons\n        if (actions.length < 3) {\n            return <div className={styles.buttons}>\n                {actions.map((action, i) => renderActionButton(action, i === 0 ? 'primary' : 'default'))}\n            </div>\n        }\n        return <CommandBar items={actions.map((action, i) => {\n            return {\n                key: i.toString(),\n                text: action.message,\n                commandBarButtonAs: () => <Link onClick={() => action.actions.map(callback => callback())} className={styles.link}>\n                    {action.iconName &&\n                        <Icon iconName={action.iconName} />\n                    }\n                    {action.message}\n                </Link>,\n                iconProps: {\n                    iconName: action.iconName\n                },\n                onClick: () => {\n                    action.actions.map(callback => callback())\n                }\n            }\n        })} />\n    }\n\n    const onNotificationClick = (notification: IAddControlNotificationOptions) => {\n        if (notification.actions?.length === 1) {\n            notification.actions[0].actions.map(callback => callback());\n            return;\n        }\n        setSelectedNotification(notification);\n    };\n\n    const getCommandBarItem = (notification: IAddControlNotificationOptions) => {\n        const icon = getIconName(notification);\n        return {\n            key: notification.uniqueId,\n            text: notification.title,\n            title: notification.title,\n            onClick: () => onNotificationClick(notification),\n            buttonStyles: {\n                textContainer: {\n                    display: notification.compact ? 'none' : undefined\n                }\n            },\n            iconProps: notification ? {\n                iconName: icon,\n                styles: {\n                    root: {\n                        color: notification.notificationLevel === 'ERROR' ? `${theme.semanticColors.errorIcon} !important` : undefined\n                    }\n                }\n            } : undefined\n        }\n    };\n\n    return <div className={`${styles.root}${props.className ? ` ${props.className}` : ''}`}>\n        <ThemeProvider theme={overridenTheme} applyTo=\"none\">\n            <CommandBar\n                overflowItems={notifications.filter(x => x.renderedInOverflow).map(y => getCommandBarItem(y))}\n                theme={overridenTheme}\n                id={iconId}\n                componentRef={commandBarRef}\n                items={notifications.filter(x => !x.renderedInOverflow).map(y => getCommandBarItem(y))} />\n        </ThemeProvider>\n        {selectedNotification &&\n            <Callout\n                hidden={!selectedNotification}\n                className={styles.callout}\n                onDismiss={() => setSelectedNotification(null)}\n                target={`#${iconId}`}>\n                {selectedNotification.title &&\n                    <Text title={selectedNotification.title} className={styles.calloutTitle} variant={selectedNotification.messages.length > 0 ? 'xLarge' : undefined}>{selectedNotification.title}</Text>\n                }\n                <Text>{selectedNotification.messages[0]}</Text>\n                {selectedNotification.actions &&\n                    renderActions(selectedNotification.actions)\n                }\n            </Callout>\n        }\n    </div>\n});"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Notifications.js","sources":["../../../../../../../../src/components/Grid/core/components/Cell/ReadOnlyCell/Notifications/Notifications.tsx"],"sourcesContent":["import { Icon, useTheme, Text, Callout, PrimaryButton, DefaultButton, Link, ICommandBar, ThemeProvider } from \"@fluentui/react\"\nimport { getNotificationIconStyles } from \"./styles\";\nimport { forwardRef, useImperativeHandle, useMemo, useRef, useState } from \"react\";\nimport { IAddControlNotificationOptions, IControlNotificationAction } from \"@talxis/client-libraries\";\nimport { CommandBar, useThemeGenerator } from \"@talxis/react-components\";\n\ninterface INotifications {\n    notifications: IAddControlNotificationOptions[],\n    className?: string;\n}\n\nexport interface INotificationsRef {\n    remeasureCommandBar: () => void;\n}\n\n\nexport const Notifications = forwardRef<INotificationsRef, INotifications>((props, ref) => {\n    const { notifications } = { ...props };\n    const theme = useTheme();\n    const styles = getNotificationIconStyles(theme);\n    const iconId = useMemo(() => `icon${crypto.randomUUID()}`, []);\n    const [selectedNotification, setSelectedNotification] = useState<IAddControlNotificationOptions | null>(null);\n    const commandBarRef = useRef<ICommandBar>(null);\n    const overridenTheme = useThemeGenerator(theme.palette.themePrimary, 'transparent', theme.semanticColors.bodyText);\n\n    useImperativeHandle(ref, () => {\n        return {\n            remeasureCommandBar: () => {\n                commandBarRef.current?.remeasure();\n            }\n        }\n    })\n\n    const getIconName = (notification: IAddControlNotificationOptions): string | undefined => {\n        if (notification.iconName) {\n            return notification.iconName;\n        }\n        return notification.notificationLevel === 'ERROR' ? 'Error' : undefined;\n    }\n\n    const renderActionButton = (action: IControlNotificationAction, buttonType: 'primary' | 'default') => {\n        const Button = buttonType === 'primary' ? PrimaryButton : DefaultButton;\n        return <Button\n            text={action.message}\n            iconProps={action?.iconName ? {\n                iconName: action.iconName\n            } : undefined}\n            onClick={() => action.actions.map(callback => callback())} />\n    }\n\n    const renderActions = (actions: IControlNotificationAction[]): JSX.Element => {\n        if (actions.length === 0) {\n            return <></>\n        }\n        //render actions as buttons\n        if (actions.length < 3) {\n            return <div className={styles.buttons}>\n                {actions.map((action, i) => renderActionButton(action, i === 0 ? 'primary' : 'default'))}\n            </div>\n        }\n        return <CommandBar items={actions.map((action, i) => {\n            return {\n                key: i.toString(),\n                text: action.message,\n                commandBarButtonAs: () => <Link onClick={() => action.actions.map(callback => callback())} className={styles.link}>\n                    {action.iconName &&\n                        <Icon iconName={action.iconName} />\n                    }\n                    {action.message}\n                </Link>,\n                iconProps: {\n                    iconName: action.iconName\n                },\n                onClick: () => {\n                    action.actions.map(callback => callback())\n                }\n            }\n        })} />\n    }\n\n    const onNotificationClick = (notification: IAddControlNotificationOptions) => {\n        if (notification.actions?.length === 1) {\n            notification.actions[0].actions.map(callback => callback());\n            return;\n        }\n        setSelectedNotification(notification);\n    };\n\n    const getCommandBarItem = (notification: IAddControlNotificationOptions) => {\n        const icon = getIconName(notification);\n        return {\n            key: notification.uniqueId,\n            text: notification.title,\n            title: notification.title,\n            onClick: () => onNotificationClick(notification),\n            buttonStyles: {\n                textContainer: {\n                    display: notification.compact ? 'none' : undefined\n                }\n            },\n            iconProps: notification ? {\n                iconName: icon,\n                styles: {\n                    root: {\n                        color: notification.notificationLevel === 'ERROR' ? `${theme.semanticColors.errorIcon} !important` : undefined\n                    }\n                }\n            } : undefined\n        }\n    };\n\n    return <div className={`${styles.root}${props.className ? ` ${props.className}` : ''}`}>\n        <ThemeProvider theme={overridenTheme} applyTo=\"none\">\n            <CommandBar\n                overflowItems={notifications.filter(x => x.renderedInOverflow).map(y => getCommandBarItem(y))}\n                theme={overridenTheme}\n                id={iconId}\n                componentRef={commandBarRef}\n                items={notifications.filter(x => !x.renderedInOverflow).map(y => getCommandBarItem(y))} />\n        </ThemeProvider>\n        {selectedNotification &&\n            <Callout\n                hidden={!selectedNotification}\n                className={styles.callout}\n                onDismiss={() => setSelectedNotification(null)}\n                target={`#${iconId}`}>\n                {selectedNotification.title &&\n                    <Text title={selectedNotification.title} className={styles.calloutTitle} variant={selectedNotification.messages.length > 0 ? 'xLarge' : undefined}>{selectedNotification.title}</Text>\n                }\n                <Text>{selectedNotification.messages[0]}</Text>\n                {selectedNotification.actions &&\n                    renderActions(selectedNotification.actions)\n                }\n            </Callout>\n        }\n    </div>\n});"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Grid/filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionOperator.js","sources":["../../../../../../../../src/components/Grid/filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.tsx"],"sourcesContent":["import { ComboBox } from \"@talxis/react-components\";\nimport { DataType } from '../../../../../core/enums/DataType';\nimport { IComboBoxOption, useTheme } from '@fluentui/react';\nimport { FilteringUtils } from '../../../../utils/FilteringUtilts';\nimport { useGridInstance } from '../../../../../core/hooks/useGridInstance';\nimport { useColumnFilterConditionController } from '../../../../controller/useColumnFilterConditionController';\nimport { IGridColumn } from '../../../../../core/interfaces/IGridColumn';\nimport { DatasetConditionOperator } from '../../../../../core/enums/ConditionOperator';\nimport React from 'react';\nimport { ITheme } from \"../../../../../../../interfaces/theme\";\n\ninterface IConditionOperator {\n    column: IGridColumn;\n}\nexport const ConditionOperator = (props: IConditionOperator) => {\n    const { column } = { ...props };\n    const operatorUtils = FilteringUtils.condition().operator();\n    const grid = useGridInstance();\n    const condition = useColumnFilterConditionController(column);\n\n    //TODO: add missing text operator (begins with, ends with)\n    const getOptions = (): IComboBoxOption[] => {\n        let operators = operatorUtils.textFieldOperators;\n        switch (column.dataType) {\n            case DataType.WHOLE_NONE:\n            case DataType.DECIMAL:\n            case DataType.FP:\n            case DataType.WHOLE_DURATION:\n            case DataType.CURRENCY:\n                operators = operatorUtils.numberOperators;\n                break;\n            case DataType.DATE_AND_TIME_DATE_AND_TIME:\n            case DataType.DATE_AND_TIME_DATE_ONLY:\n                operators = operatorUtils.dateOperators;\n                break;\n            case DataType.MULTI_SELECT_OPTIONSET:\n                operators = operatorUtils.multipleOptionSetOperators;\n                break;\n            case DataType.FILE:\n            case DataType.IMAGE: {\n                operators = operatorUtils.fileOperators;\n            }\n        }\n        return operators.map(operator => {\n            return {\n                key: operator.type,\n                text: grid.labels[operator.key]()\n            };\n        });\n    };\n    if(!condition) {\n        return <></>\n    }\n    return <ComboBox\n        {...props}\n        selectedKey={condition.operator.get()}\n        shouldRestoreFocus={false}\n        options={getOptions()}\n        useComboBoxAsMenuWidth\n        styles={{\n            callout: {\n                maxHeight: '300px !important'\n            }\n        }}\n        onChange={(e, option) => {\n            condition.operator.set(option!.key as DatasetConditionOperator)\n        }} />;\n}"],"names":["_jsx"],"mappings":";;;;;;;AAca,MAAA,iBAAiB,GAAG,CAAC,KAAyB,KAAI;IAC3D,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC;IAChC,MAAM,aAAa,GAAG,cAAc,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC;AAC5D,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,SAAS,GAAG,kCAAkC,CAAC,MAAM,CAAC,CAAC;;IAG7D,MAAM,UAAU,GAAG,MAAwB;AACvC,QAAA,IAAI,SAAS,GAAG,aAAa,CAAC,kBAAkB,CAAC;QACjD,QAAQ,MAAM,CAAC,QAAQ;YACnB,KAAK,QAAQ,CAAC,UAAU,CAAC;YACzB,KAAK,QAAQ,CAAC,OAAO,CAAC;YACtB,KAAK,QAAQ,CAAC,EAAE,CAAC;YACjB,KAAK,QAAQ,CAAC,cAAc,CAAC;YAC7B,KAAK,QAAQ,CAAC,QAAQ;AAClB,gBAAA,SAAS,GAAG,aAAa,CAAC,eAAe,CAAC;gBAC1C,MAAM;YACV,KAAK,QAAQ,CAAC,2BAA2B,CAAC;YAC1C,KAAK,QAAQ,CAAC,uBAAuB;AACjC,gBAAA,SAAS,GAAG,aAAa,CAAC,aAAa,CAAC;gBACxC,MAAM;YACV,KAAK,QAAQ,CAAC,sBAAsB;AAChC,gBAAA,SAAS,GAAG,aAAa,CAAC,0BAA0B,CAAC;gBACrD,MAAM;YACV,KAAK,QAAQ,CAAC,IAAI,CAAC;AACnB,YAAA,KAAK,QAAQ,CAAC,KAAK,EAAE;AACjB,gBAAA,SAAS,GAAG,aAAa,CAAC,aAAa,CAAC;AAC3C,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,IAAG;YAC5B,OAAO;gBACH,GAAG,EAAE,QAAQ,CAAC,IAAI;gBAClB,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;aACpC,CAAC;AACN,SAAC,CAAC,CAAC;AACP,KAAC,CAAC;IACF,IAAG,CAAC,SAAS,EAAE;AACX,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;IACD,OAAOA,GAAA,CAAC,QAAQ,EAAA,EAAA,GACR,KAAK,EACT,WAAW,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,EACrC,kBAAkB,EAAE,KAAK,EACzB,OAAO,EAAE,UAAU,EAAE,EACrB,sBAAsB,EACtB,IAAA,EAAA,MAAM,EAAE;AACJ,YAAA,OAAO,EAAE;AACL,gBAAA,SAAS,EAAE,kBAAkB;AAChC,aAAA;AACJ,SAAA,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAI;YACpB,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAO,CAAC,GAA+B,CAAC,CAAA;AACnE,SAAC,GAAI,CAAC;AACd;;;;"}
+{"version":3,"file":"ConditionOperator.js","sources":["../../../../../../../../src/components/Grid/filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.tsx"],"sourcesContent":["import { ComboBox } from \"@talxis/react-components\";\nimport { DataType } from '../../../../../core/enums/DataType';\nimport { IComboBoxOption, useTheme } from '@fluentui/react';\nimport { FilteringUtils } from '../../../../utils/FilteringUtilts';\nimport { useGridInstance } from '../../../../../core/hooks/useGridInstance';\nimport { useColumnFilterConditionController } from '../../../../controller/useColumnFilterConditionController';\nimport { IGridColumn } from '../../../../../core/interfaces/IGridColumn';\nimport { DatasetConditionOperator } from '../../../../../core/enums/ConditionOperator';\nimport React from 'react';\n\ninterface IConditionOperator {\n    column: IGridColumn;\n}\nexport const ConditionOperator = (props: IConditionOperator) => {\n    const { column } = { ...props };\n    const operatorUtils = FilteringUtils.condition().operator();\n    const grid = useGridInstance();\n    const condition = useColumnFilterConditionController(column);\n\n    //TODO: add missing text operator (begins with, ends with)\n    const getOptions = (): IComboBoxOption[] => {\n        let operators = operatorUtils.textFieldOperators;\n        switch (column.dataType) {\n            case DataType.WHOLE_NONE:\n            case DataType.DECIMAL:\n            case DataType.FP:\n            case DataType.WHOLE_DURATION:\n            case DataType.CURRENCY:\n                operators = operatorUtils.numberOperators;\n                break;\n            case DataType.DATE_AND_TIME_DATE_AND_TIME:\n            case DataType.DATE_AND_TIME_DATE_ONLY:\n                operators = operatorUtils.dateOperators;\n                break;\n            case DataType.MULTI_SELECT_OPTIONSET:\n                operators = operatorUtils.multipleOptionSetOperators;\n                break;\n            case DataType.FILE:\n            case DataType.IMAGE: {\n                operators = operatorUtils.fileOperators;\n            }\n        }\n        return operators.map(operator => {\n            return {\n                key: operator.type,\n                text: grid.labels[operator.key]()\n            };\n        });\n    };\n    if(!condition) {\n        return <></>\n    }\n    return <ComboBox\n        {...props}\n        selectedKey={condition.operator.get()}\n        shouldRestoreFocus={false}\n        options={getOptions()}\n        useComboBoxAsMenuWidth\n        styles={{\n            callout: {\n                maxHeight: '300px !important'\n            }\n        }}\n        onChange={(e, option) => {\n            condition.operator.set(option!.key as DatasetConditionOperator)\n        }} />;\n}"],"names":["_jsx"],"mappings":";;;;;;;AAaa,MAAA,iBAAiB,GAAG,CAAC,KAAyB,KAAI;IAC3D,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC;IAChC,MAAM,aAAa,GAAG,cAAc,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC;AAC5D,IAAA,MAAM,IAAI,GAAG,eAAe,EAAE,CAAC;AAC/B,IAAA,MAAM,SAAS,GAAG,kCAAkC,CAAC,MAAM,CAAC,CAAC;;IAG7D,MAAM,UAAU,GAAG,MAAwB;AACvC,QAAA,IAAI,SAAS,GAAG,aAAa,CAAC,kBAAkB,CAAC;QACjD,QAAQ,MAAM,CAAC,QAAQ;YACnB,KAAK,QAAQ,CAAC,UAAU,CAAC;YACzB,KAAK,QAAQ,CAAC,OAAO,CAAC;YACtB,KAAK,QAAQ,CAAC,EAAE,CAAC;YACjB,KAAK,QAAQ,CAAC,cAAc,CAAC;YAC7B,KAAK,QAAQ,CAAC,QAAQ;AAClB,gBAAA,SAAS,GAAG,aAAa,CAAC,eAAe,CAAC;gBAC1C,MAAM;YACV,KAAK,QAAQ,CAAC,2BAA2B,CAAC;YAC1C,KAAK,QAAQ,CAAC,uBAAuB;AACjC,gBAAA,SAAS,GAAG,aAAa,CAAC,aAAa,CAAC;gBACxC,MAAM;YACV,KAAK,QAAQ,CAAC,sBAAsB;AAChC,gBAAA,SAAS,GAAG,aAAa,CAAC,0BAA0B,CAAC;gBACrD,MAAM;YACV,KAAK,QAAQ,CAAC,IAAI,CAAC;AACnB,YAAA,KAAK,QAAQ,CAAC,KAAK,EAAE;AACjB,gBAAA,SAAS,GAAG,aAAa,CAAC,aAAa,CAAC;AAC3C,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,IAAG;YAC5B,OAAO;gBACH,GAAG,EAAE,QAAQ,CAAC,IAAI;gBAClB,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;aACpC,CAAC;AACN,SAAC,CAAC,CAAC;AACP,KAAC,CAAC;IACF,IAAG,CAAC,SAAS,EAAE;AACX,QAAA,OAAOA,iBAAK,CAAA;AACf,KAAA;IACD,OAAOA,GAAA,CAAC,QAAQ,EAAA,EAAA,GACR,KAAK,EACT,WAAW,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,EACrC,kBAAkB,EAAE,KAAK,EACzB,OAAO,EAAE,UAAU,EAAE,EACrB,sBAAsB,EACtB,IAAA,EAAA,MAAM,EAAE;AACJ,YAAA,OAAO,EAAE;AACL,gBAAA,SAAS,EAAE,kBAAkB;AAChC,aAAA;AACJ,SAAA,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAI;YACpB,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAO,CAAC,GAA+B,CAAC,CAAA;AACnE,SAAC,GAAI,CAAC;AACd;;;;"}

package/dist/components/Lookup/hooks/useLookup.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="powerapps-component-framework" />
 import { ITranslation } from "../../../hooks";
-import { ITheme } from "../../../interfaces/theme";
 import { IEntity, ILayout, ILookup } from "../interfaces";
+import { ITheme } from "@talxis/react-components";
 export declare const useLookup: (props: ILookup) => [ComponentFramework.LookupValue[], IEntity[], ITranslation<Partial<import("../../..").ITranslations<{
     search: {
         1033: string;

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

@@ -1 +1 @@
-{"version":3,"file":"useLookup.js","sources":["../../../../src/components/Lookup/hooks/useLookup.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { ITranslation, useControl } from \"../../../hooks\";\nimport { ITheme } from \"../../../interfaces/theme\";\nimport { IEntity, ILayout, ILookup } from \"../interfaces\";\nimport { lookupTranslations } from \"../translations\";\nimport { useFetchXml } from \"./useFetchXml\";\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 result = await context.navigation.openForm({\n            entityName: entityName,\n            useQuickCreateForm: true\n        });\n        if (!result.savedEntityReference) {\n            return;\n        }\n        onNotifyOutputChanged({\n            value: result.savedEntityReference\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":"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"}
+{"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 result = await context.navigation.openForm({\n            entityName: entityName,\n            useQuickCreateForm: true\n        });\n        if (!result.savedEntityReference) {\n            return;\n        }\n        onNotifyOutputChanged({\n            value: result.savedEntityReference\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":"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"}

package/dist/components/OptionSet/OptionSet.js

@@ -51,6 +51,10 @@ const OptionSet = (props) => {
         useComboBoxAsMenuWidth: true,
         hideErrorMessage: !parameters.ShowErrorMessage?.raw,
         styles: { root: styles.root, callout: styles.callout },
+        onRenderContainer: (props, defaultRender) => jsx(ThemeProvider, { theme: theme, children: defaultRender?.(props) }),
+        calloutProps: {
+            theme: theme
+        },
         ...(parameters.EnableCopyButton?.raw === true && {
             clickToCopyProps: {
                 key: 'copy',
@@ -72,17 +76,6 @@ const OptionSet = (props) => {
                 },
             },
         }),
-        ...(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,
     });

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, 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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"}
+{"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, 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        onRenderContainer: (props, defaultRender) => <ThemeProvider theme={theme}>{defaultRender?.(props)}</ThemeProvider>,\n        calloutProps: {\n            theme: theme\n        },\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        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/useComboBoxTheme.js

@@ -1,44 +1,53 @@
-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 { useThemeGenerator, Theming } from '@talxis/react-components';
 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 = () => {
+    const selectedOptionColor = boundValue.attributes.Options.find(x => x.Value === boundValue.raw)?.Color;
+    const getColors = (colorFeatureEnabled) => {
+        const colors = {
+            backgroundColor: theme.semanticColors.bodyBackground,
+            textColor: theme.semanticColors.bodyText,
+            primaryColor: theme.palette.themePrimary
+        };
+        if (!colorFeatureEnabled || !selectedOptionColor) {
+            colors.backgroundColor = theme.semanticColors.bodyBackground;
+            colors.textColor = theme.semanticColors.bodyText;
+            colors.primaryColor = theme.palette.themePrimary;
+        }
+        else {
+            colors.backgroundColor = selectedOptionColor;
+            colors.textColor = Theming.GetTextColorForBackground(selectedOptionColor);
+            if (Theming.IsDarkColor(colors.textColor)) {
+                colors.primaryColor = Color(colors.backgroundColor).darken(0.5).hex();
+            }
+            else {
+                colors.primaryColor = Color(colors.backgroundColor).lighten(0.5).hex();
+            }
+        }
+        return colors;
+    };
+    const getIsColorFeatureEnabled = () => {
         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;
+    /**
+     * Since we are creating new theme for combobox, we need to add the overrides in cases where there is no color feature enabled or no color is selected.
+     */
+    const getThemeOverride = (colorFeatureEnabled) => {
+        if (!colorFeatureEnabled || !selectedOptionColor) {
+            return props.context.fluentDesignLanguage?.tokenTheme?.fluentV8Overrides;
         }
-        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 }
-        };
+        return undefined;
     };
-    const overridenFluentDesignLanguage = React__default.useMemo(() => getOverridenFluentDesingLanguge(), [boundValue.raw]);
-    const overridenTheme = useMemo(() => getControlTheme(overridenFluentDesignLanguage), [overridenFluentDesignLanguage]);
-    return [isColorFeatureEnabled(), overridenTheme];
+    const isColorFeatureEnabled = getIsColorFeatureEnabled();
+    const colors = getColors(isColorFeatureEnabled);
+    const override = getThemeOverride(isColorFeatureEnabled);
+    const currentTheme = useThemeGenerator(colors.primaryColor, colors.backgroundColor, colors.textColor, override);
+    return [isColorFeatureEnabled, currentTheme];
 };
 
 export { useComboBoxTheme };

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

@@ -1 +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;;;;"}
+{"version":3,"file":"useComboBoxTheme.js","sources":["../../../src/components/OptionSet/useComboBoxTheme.ts"],"sourcesContent":["import { IOptionSet } from \"./interfaces\";\nimport { ITheme } from \"@fluentui/react\";\nimport { Theming, useThemeGenerator } from \"@talxis/react-components\";\nimport Color from \"color\";\n\nexport const useComboBoxTheme = (props: IOptionSet, theme: ITheme): [boolean, ITheme] => {\n    const boundValue = props.parameters.value;\n    const { Options } = boundValue.attributes;\n    const selectedOptionColor = boundValue.attributes.Options.find(x => x.Value === boundValue.raw)?.Color;\n\n    const getColors = (colorFeatureEnabled: boolean) => {\n        const colors = {\n            backgroundColor: theme.semanticColors.bodyBackground,\n            textColor: theme.semanticColors.bodyText,\n            primaryColor: theme.palette.themePrimary\n        }\n        if(!colorFeatureEnabled || !selectedOptionColor) {\n            colors.backgroundColor = theme.semanticColors.bodyBackground;\n            colors.textColor = theme.semanticColors.bodyText;\n            colors.primaryColor = theme.palette.themePrimary;\n        }\n        else {\n            colors.backgroundColor = selectedOptionColor;\n            colors.textColor = Theming.GetTextColorForBackground(selectedOptionColor);\n            if(Theming.IsDarkColor(colors.textColor)) {\n                colors.primaryColor = Color(colors.backgroundColor).darken(0.5).hex()\n            }\n            else {\n                colors.primaryColor = Color(colors.backgroundColor).lighten(0.5).hex()\n            }\n        }\n        return colors;\n    }\n    const getIsColorFeatureEnabled = () => {\n        if (props.parameters.EnableOptionSetColors?.raw && Options.find(x => x.Color)) {\n            return true;\n        }\n        return false;\n    }\n\n    /**\n     * Since we are creating new theme for combobox, we need to add the overrides in cases where there is no color feature enabled or no color is selected.\n     */\n    const getThemeOverride = (colorFeatureEnabled: boolean) => {\n        if(!colorFeatureEnabled || !selectedOptionColor) {\n            return props.context.fluentDesignLanguage?.tokenTheme?.fluentV8Overrides;\n        }\n        return undefined;\n    }\n\n    const isColorFeatureEnabled = getIsColorFeatureEnabled();\n    const colors = getColors(isColorFeatureEnabled);\n    const override = getThemeOverride(isColorFeatureEnabled);\n\n    const currentTheme = useThemeGenerator(colors.primaryColor, colors.backgroundColor, colors.textColor, override)\n    return [isColorFeatureEnabled, currentTheme];\n}"],"names":[],"mappings":";;;MAKa,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;IAC1C,MAAM,mBAAmB,GAAG,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;AAEvG,IAAA,MAAM,SAAS,GAAG,CAAC,mBAA4B,KAAI;AAC/C,QAAA,MAAM,MAAM,GAAG;AACX,YAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;AACpD,YAAA,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;AACxC,YAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAC3C,CAAA;AACD,QAAA,IAAG,CAAC,mBAAmB,IAAI,CAAC,mBAAmB,EAAE;YAC7C,MAAM,CAAC,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;YAC7D,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;YACjD,MAAM,CAAC,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;AACpD,SAAA;AACI,aAAA;AACD,YAAA,MAAM,CAAC,eAAe,GAAG,mBAAmB,CAAC;YAC7C,MAAM,CAAC,SAAS,GAAG,OAAO,CAAC,yBAAyB,CAAC,mBAAmB,CAAC,CAAC;YAC1E,IAAG,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;AACtC,gBAAA,MAAM,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;AACxE,aAAA;AACI,iBAAA;AACD,gBAAA,MAAM,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;AACzE,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,MAAM,CAAC;AAClB,KAAC,CAAA;IACD,MAAM,wBAAwB,GAAG,MAAK;QAClC,IAAI,KAAK,CAAC,UAAU,CAAC,qBAAqB,EAAE,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE;AAC3E,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;AACjB,KAAC,CAAA;AAED;;AAEG;AACH,IAAA,MAAM,gBAAgB,GAAG,CAAC,mBAA4B,KAAI;AACtD,QAAA,IAAG,CAAC,mBAAmB,IAAI,CAAC,mBAAmB,EAAE;YAC7C,OAAO,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,UAAU,EAAE,iBAAiB,CAAC;AAC5E,SAAA;AACD,QAAA,OAAO,SAAS,CAAC;AACrB,KAAC,CAAA;AAED,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE,CAAC;AACzD,IAAA,MAAM,MAAM,GAAG,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAChD,IAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;AAEzD,IAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;AAC/G,IAAA,OAAO,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC;AACjD;;;;"}

package/dist/hooks/useControl.d.ts

@@ -1,5 +1,5 @@
 import { IControl, IOutputs, IParameters } from "../interfaces";
-import { ITheme } from "../interfaces/theme";
+import { ITheme } from "@talxis/react-components";
 export type ITranslation<T> = {
     [Property in keyof Required<T>]: (variables?: any) => string;
 };

package/dist/hooks/useControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { merge } from 'merge-anything';\nimport { Liquid } from \"liquidjs\";\nimport { useControlTheme } from \"./useControlTheme\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\n\nexport type ITranslation<T> = {\n    [Property in keyof Required<T>]: (variables?: any) => string\n};\n\nexport interface IDefaultTranslations {\n    [LCID: number]: string | string[];\n    [key: string]: any;\n}\n\n\nexport interface IControlController<TTranslations, TOutputs> {\n    labels: Required<ITranslation<TTranslations>>,\n    sizing: {\n        width?: number,\n        height?: number\n    },\n    theme: ITheme;\n    onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n    const parametersRef = useRef<TParameters>(props.parameters);\n    const sizing = useControlSizing(props.context.mode);\n    const context = props.context;\n    const liquid = useMemo(() => new Liquid(), []);\n    const labels = useMemo(() => {\n        const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {}) as TTranslations;\n        return new Proxy(mergedTranslations as any, {\n            get(target, key) {\n                return (variables: any) => getLabel(key as string, mergedTranslations, variables)\n            }\n        }) as any;\n    }, []);\n\n    useEffect(() => {\n        parametersRef.current = props.parameters;\n    }, [props.parameters]);\n\n    const getLabel = (key: string, translations: TTranslations, variables?: any): string | string[] => {\n        const strigify = (value: string | string[]) => {\n            if (typeof value === 'string') {\n                return value;\n            }\n            return JSON.stringify(value);\n        };\n        //@ts-ignore\n        const translation = translations[key];\n        if (!translation) {\n            console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);\n            return key;\n        }\n        if (typeof translation === 'string' || Array.isArray(translation)) {\n            return strigify(translation);\n        }\n        let label = translation[props.context.userSettings.languageId];\n        if (!label) {\n            console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);\n            label = translation[1029];\n        }\n        if (!label) {\n            console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);\n            label = key;\n        }\n\n        return liquid.parseAndRenderSync(strigify(label), variables);\n    };\n\n    const onNotifyOutputChanged = (outputs: TOutputs) => {\n        let isDirty = false;\n        for (let [key, outputValue] of Object.entries(outputs)) {\n            let parameterValue = parametersRef.current[key]?.raw;\n            if (!deepEqual(parameterValue, outputValue)) {\n                if (outputValue === null) {\n                    outputValue = undefined;\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (outputValue === \"\") {\n                    outputValue = undefined\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (parameterValue === null) {\n                    parameterValue = undefined;\n                }\n                if (parameterValue === outputValue) {\n                    continue\n                }\n                isDirty = true;\n                break;\n            }\n        }\n        if (!isDirty) {\n            return;\n        }\n        //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n        props.onNotifyOutputChanged?.(outputs);\n    };\n    return {\n        labels,\n        sizing,\n        theme: useControlTheme(context.fluentDesignLanguage),\n        onNotifyOutputChanged\n    }\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { merge } from 'merge-anything';\nimport { Liquid } from \"liquidjs\";\nimport { useControlTheme } from \"./useControlTheme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\nimport { ITheme } from \"@talxis/react-components\";\n\nexport type ITranslation<T> = {\n    [Property in keyof Required<T>]: (variables?: any) => string\n};\n\nexport interface IDefaultTranslations {\n    [LCID: number]: string | string[];\n    [key: string]: any;\n}\n\n\nexport interface IControlController<TTranslations, TOutputs> {\n    labels: Required<ITranslation<TTranslations>>,\n    sizing: {\n        width?: number,\n        height?: number\n    },\n    theme: ITheme;\n    onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n    const parametersRef = useRef<TParameters>(props.parameters);\n    const sizing = useControlSizing(props.context.mode);\n    const context = props.context;\n    const liquid = useMemo(() => new Liquid(), []);\n    const labels = useMemo(() => {\n        const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {}) as TTranslations;\n        return new Proxy(mergedTranslations as any, {\n            get(target, key) {\n                return (variables: any) => getLabel(key as string, mergedTranslations, variables)\n            }\n        }) as any;\n    }, []);\n\n    useEffect(() => {\n        parametersRef.current = props.parameters;\n    }, [props.parameters]);\n\n    const getLabel = (key: string, translations: TTranslations, variables?: any): string | string[] => {\n        const strigify = (value: string | string[]) => {\n            if (typeof value === 'string') {\n                return value;\n            }\n            return JSON.stringify(value);\n        };\n        //@ts-ignore\n        const translation = translations[key];\n        if (!translation) {\n            console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);\n            return key;\n        }\n        if (typeof translation === 'string' || Array.isArray(translation)) {\n            return strigify(translation);\n        }\n        let label = translation[props.context.userSettings.languageId];\n        if (!label) {\n            console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);\n            label = translation[1029];\n        }\n        if (!label) {\n            console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);\n            label = key;\n        }\n\n        return liquid.parseAndRenderSync(strigify(label), variables);\n    };\n\n    const onNotifyOutputChanged = (outputs: TOutputs) => {\n        let isDirty = false;\n        for (let [key, outputValue] of Object.entries(outputs)) {\n            let parameterValue = parametersRef.current[key]?.raw;\n            if (!deepEqual(parameterValue, outputValue)) {\n                if (outputValue === null) {\n                    outputValue = undefined;\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (outputValue === \"\") {\n                    outputValue = undefined\n                    //@ts-ignore\n                    outputs[key] = undefined;\n                }\n                if (parameterValue === null) {\n                    parameterValue = undefined;\n                }\n                if (parameterValue === outputValue) {\n                    continue\n                }\n                isDirty = true;\n                break;\n            }\n        }\n        if (!isDirty) {\n            return;\n        }\n        //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n        props.onNotifyOutputChanged?.(outputs);\n    };\n    return {\n        labels,\n        sizing,\n        theme: useControlTheme(context.fluentDesignLanguage),\n        onNotifyOutputChanged\n    }\n};\n"],"names":[],"mappings":";;;;;;;AA4BA;;;AAGG;AACU,MAAA,UAAU,GAAG,CAA4E,IAAY,EAAE,KAA0D,EAAE,mBAA0C,KAAiD;IACvQ,MAAM,aAAa,GAAG,MAAM,CAAc,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AACpD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;AAC9B,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;AAC/C,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;AACxB,QAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC,mBAAmB,IAAI,EAAE,EAAE,KAAK,CAAC,YAAY,IAAI,EAAE,CAAkB,CAAC;AACvG,QAAA,OAAO,IAAI,KAAK,CAAC,kBAAyB,EAAE;YACxC,GAAG,CAAC,MAAM,EAAE,GAAG,EAAA;AACX,gBAAA,OAAO,CAAC,SAAc,KAAK,QAAQ,CAAC,GAAa,EAAE,kBAAkB,EAAE,SAAS,CAAC,CAAA;aACpF;AACJ,SAAA,CAAQ,CAAC;KACb,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC;AAC7C,KAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvB,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,YAA2B,EAAE,SAAe,KAAuB;AAC9F,QAAA,MAAM,QAAQ,GAAG,CAAC,KAAwB,KAAI;AAC1C,YAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,gBAAA,OAAO,KAAK,CAAC;AAChB,aAAA;AACD,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACjC,SAAC,CAAC;;AAEF,QAAA,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,CAAA,oBAAA,EAAuB,GAAG,CAAiB,cAAA,EAAA,IAAI,CAAgC,8BAAA,CAAA,CAAC,CAAC;AAC/F,YAAA,OAAO,GAAG,CAAC;AACd,SAAA;QACD,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;AAC/D,YAAA,OAAO,QAAQ,CAAC,WAAW,CAAC,CAAC;AAChC,SAAA;AACD,QAAA,IAAI,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC/D,IAAI,CAAC,KAAK,EAAE;YACR,OAAO,CAAC,IAAI,CAAC,CAAA,oBAAA,EAAuB,GAAG,CAAiB,cAAA,EAAA,IAAI,CAAiE,+DAAA,CAAA,CAAC,CAAC;AAC/H,YAAA,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;AAC7B,SAAA;QACD,IAAI,CAAC,KAAK,EAAE;YACR,OAAO,CAAC,KAAK,CAAC,CAAA,oBAAA,EAAuB,GAAG,CAAiB,cAAA,EAAA,IAAI,CAAuE,qEAAA,CAAA,CAAC,CAAC;YACtI,KAAK,GAAG,GAAG,CAAC;AACf,SAAA;QAED,OAAO,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AACjE,KAAC,CAAC;AAEF,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAiB,KAAI;QAChD,IAAI,OAAO,GAAG,KAAK,CAAC;AACpB,QAAA,KAAK,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACpD,IAAI,cAAc,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC;AACrD,YAAA,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;gBACzC,IAAI,WAAW,KAAK,IAAI,EAAE;oBACtB,WAAW,GAAG,SAAS,CAAC;;AAExB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,WAAW,KAAK,EAAE,EAAE;oBACpB,WAAW,GAAG,SAAS,CAAA;;AAEvB,oBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5B,iBAAA;gBACD,IAAI,cAAc,KAAK,IAAI,EAAE;oBACzB,cAAc,GAAG,SAAS,CAAC;AAC9B,iBAAA;gBACD,IAAI,cAAc,KAAK,WAAW,EAAE;oBAChC,SAAQ;AACX,iBAAA;gBACD,OAAO,GAAG,IAAI,CAAC;gBACf,MAAM;AACT,aAAA;AACJ,SAAA;QACD,IAAI,CAAC,OAAO,EAAE;YACV,OAAO;AACV,SAAA;;AAED,QAAA,KAAK,CAAC,qBAAqB,GAAG,OAAO,CAAC,CAAC;AAC3C,KAAC,CAAC;IACF,OAAO;QACH,MAAM;QACN,MAAM;AACN,QAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC;QACpD,qBAAqB;KACxB,CAAA;AACL;;;;"}

package/dist/hooks/useControlTheme.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="powerapps-component-framework" />
-import { ITheme } from "../interfaces/theme";
+import { ITheme } from "@fluentui/react";
 export declare const useControlTheme: (fluentDesignLanguage?: ComponentFramework.FluentDesignState) => ITheme;

package/dist/hooks/useControlTheme.js

@@ -1,8 +1,11 @@
 import { useMemo } from 'react';
-import { getControlTheme } from '../utils/Theme.js';
+import { getControlTheme } from '../utils/theme/getControlTheme.js';
 
 const useControlTheme = (fluentDesignLanguage) => {
-    return useMemo(() => getControlTheme(fluentDesignLanguage), []);
+    const primaryColor = fluentDesignLanguage?.tokenTheme.colorCompoundBrandForeground1;
+    const backgroundColor = fluentDesignLanguage?.tokenTheme.colorNeutralBackground1;
+    const textColor = fluentDesignLanguage?.tokenTheme.colorNeutralForeground1;
+    return useMemo(() => getControlTheme(fluentDesignLanguage), [primaryColor, backgroundColor, textColor]);
 };
 
 export { useControlTheme };

package/dist/hooks/useControlTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlTheme.js","sources":["../../src/hooks/useControlTheme.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { getControlTheme } from \"../utils/Theme\";\n\nexport const useControlTheme = (fluentDesignLanguage?: ComponentFramework.FluentDesignState): ITheme => {\n    return useMemo(() => getControlTheme(fluentDesignLanguage), [])\n};"],"names":[],"mappings":";;;AAIa,MAAA,eAAe,GAAG,CAAC,oBAA2D,KAAY;AACnG,IAAA,OAAO,OAAO,CAAC,MAAM,eAAe,CAAC,oBAAoB,CAAC,EAAE,EAAE,CAAC,CAAA;AACnE;;;;"}
+{"version":3,"file":"useControlTheme.js","sources":["../../src/hooks/useControlTheme.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { getControlTheme } from \"../utils/theme/getControlTheme\";\nimport { ITheme } from \"@fluentui/react\";\n\nexport const useControlTheme = (fluentDesignLanguage?: ComponentFramework.FluentDesignState): ITheme => {\n    const primaryColor = fluentDesignLanguage?.tokenTheme.colorCompoundBrandForeground1;\n    const backgroundColor = fluentDesignLanguage?.tokenTheme.colorNeutralBackground1;\n    const textColor = fluentDesignLanguage?.tokenTheme.colorNeutralForeground1;\n\n    return useMemo(() => getControlTheme(fluentDesignLanguage), [primaryColor, backgroundColor, textColor]);\n};"],"names":[],"mappings":";;;AAIa,MAAA,eAAe,GAAG,CAAC,oBAA2D,KAAY;AACnG,IAAA,MAAM,YAAY,GAAG,oBAAoB,EAAE,UAAU,CAAC,6BAA6B,CAAC;AACpF,IAAA,MAAM,eAAe,GAAG,oBAAoB,EAAE,UAAU,CAAC,uBAAuB,CAAC;AACjF,IAAA,MAAM,SAAS,GAAG,oBAAoB,EAAE,UAAU,CAAC,uBAAuB,CAAC;AAE3E,IAAA,OAAO,OAAO,CAAC,MAAM,eAAe,CAAC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC;AAC5G;;;;"}

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="powerapps-component-framework" />
 /// <reference types="react" />
+import { ITheme, IDatePickerProps, ITextFieldProps, IComboBoxProps, ITagPickerProps } from '@talxis/react-components';
+import { DeepPartial, IDataset } from '@talxis/client-libraries';
 import { ITheme as ITheme$1, IToggleProps } from '@fluentui/react';
-import { IDatePickerProps, ITextFieldProps, IComboBoxProps, ITagPickerProps } from '@talxis/react-components';
 import { AgGridReactProps } from '@ag-grid-community/react';
-import { IDataset } from '@talxis/client-libraries';
 
 type ExcludedProps = Pick<ComponentFramework.PropertyTypes.Property, 'formatted'>;
 interface IProperty extends Omit<Partial<ComponentFramework.PropertyTypes.Property>, keyof ExcludedProps | 'attributes'> {
@@ -66,11 +66,21 @@ interface ILookupProperty extends IProperty, Omit<Partial<ComponentFramework.Pro
     }[]>;
 }
 
+interface IFluentDesignState extends ComponentFramework.FluentDesignState {
+    tokenTheme: {
+        [key: string]: any;
+        fluentV8Overrides?: DeepPartial<ITheme>;
+    };
+}
+
 interface IOutputs$1 {
     [key: string]: any;
 }
+interface IContext extends ComponentFramework.Context<any> {
+    fluentDesignLanguage: IFluentDesignState;
+}
 interface IControl<TParameters, TOutputs, TTranslations, TComponentProps> {
-    context: ComponentFramework.Context<any>;
+    context: IContext;
     parameters: TParameters;
     translations?: TTranslations;
     state?: ComponentFramework.Dictionary;
@@ -95,12 +105,6 @@ interface IParameters$1 {
     [key: string]: IProperty | undefined;
 }
 
-interface ITheme extends ITheme$1 {
-    effects: ITheme$1['effects'] & {
-        underlined?: boolean;
-    };
-}
-
 type ITranslation<T> = {
     [Property in keyof Required<T>]: (variables?: any) => string;
 };
@@ -190,7 +194,7 @@ declare const useInputBasedControl: <TValue, TParameters extends IInputParameter
 
 declare const useMouseOver: (ref: React.RefObject<HTMLElement>) => boolean;
 
-declare const useControlTheme: (fluentDesignLanguage?: ComponentFramework.FluentDesignState) => ITheme;
+declare const useControlTheme: (fluentDesignLanguage?: ComponentFramework.FluentDesignState) => ITheme$1;
 
 declare const getDefaultDateTimeTranslations: (dateFormattingInfo: ComponentFramework.UserSettingApi.DateFormattingInfo) => {
     time: {
@@ -885,4 +889,4 @@ interface IDatasetControl extends IControl<IGridParameters, IGridOutputs, Partia
 
 declare const DatasetControl: (props: IDatasetControl) => JSX.Element;
 
-export { DatasetControl, DateTime, Decimal, Duration, Grid, IControl, IControlController, IDatasetControl, IDateTime, IDateTimeOutputs, IDateTimeParameters, IDateTimeProperty, IDecimal, IDecimalNumberProperty, IDecimalOutputs, IDecimalParameters, IDefaultTranslations, IDuration, IDurationOutputs, IDurationParameters, IEntity, IGrid, IGridOutputs, IGridParameters, ILayout, ILookup, ILookupOutputs, ILookupParameters, ILookupProperty, IMetadata, IMultiSelectOptionSet, IMultiSelectOptionSetOutputs, IMultiSelectOptionSetParameters, IMultiSelectOptionSetProperty, IOptionSet, IOptionSetOutputs, IOptionSetParameters, IOptionSetProperty, IOutputs, IParameters$1 as IParameters, IProperty, IStringProperty, ITextField, ITextFieldOutputs, ITextFieldParameters, ITranslation, ITranslations, ITwoOptions, ITwoOptionsOutputs, ITwoOptionsParameters, ITwoOptionsProperty, IWholeNumberProperty, Lookup, MultiSelectOptionSet, OptionSet, TextField, TwoOptions, useControl, useControlSizing, useControlTheme, useDateTime, useFocusIn, useInputBasedControl, useLookup, useMouseOver };
+export { DatasetControl, DateTime, Decimal, Duration, Grid, IContext, IControl, IControlController, IDatasetControl, IDateTime, IDateTimeOutputs, IDateTimeParameters, IDateTimeProperty, IDecimal, IDecimalNumberProperty, IDecimalOutputs, IDecimalParameters, IDefaultTranslations, IDuration, IDurationOutputs, IDurationParameters, IEntity, IGrid, IGridOutputs, IGridParameters, ILayout, ILookup, ILookupOutputs, ILookupParameters, ILookupProperty, IMetadata, IMultiSelectOptionSet, IMultiSelectOptionSetOutputs, IMultiSelectOptionSetParameters, IMultiSelectOptionSetProperty, IOptionSet, IOptionSetOutputs, IOptionSetParameters, IOptionSetProperty, IOutputs, IParameters$1 as IParameters, IProperty, IStringProperty, ITextField, ITextFieldOutputs, ITextFieldParameters, ITranslation, ITranslations, ITwoOptions, ITwoOptionsOutputs, ITwoOptionsParameters, ITwoOptionsProperty, IWholeNumberProperty, Lookup, MultiSelectOptionSet, OptionSet, TextField, TwoOptions, useControl, useControlSizing, useControlTheme, useDateTime, useFocusIn, useInputBasedControl, useLookup, useMouseOver };

package/dist/interfaces/context.d.ts

@@ -1,9 +1,13 @@
 /// <reference types="powerapps-component-framework" />
+import { IFluentDesignState } from "../utils";
 export interface IOutputs {
     [key: string]: any;
 }
+export interface IContext extends ComponentFramework.Context<any> {
+    fluentDesignLanguage: IFluentDesignState;
+}
 export interface IControl<TParameters, TOutputs, TTranslations, TComponentProps> {
-    context: ComponentFramework.Context<any>;
+    context: IContext;
     parameters: TParameters;
     translations?: TTranslations;
     state?: ComponentFramework.Dictionary;

package/dist/utils/index.d.ts

@@ -1 +1 @@
-export * from './Theme';
+export * from './theme';

package/dist/utils/index.js

@@ -1,2 +1,2 @@
-export { getControlTheme, normalizeComponentStyling } from './Theme.js';
+export { getControlTheme } from './theme/getControlTheme.js';
 //# sourceMappingURL=index.js.map

package/dist/utils/theme/getControlTheme.d.ts

@@ -0,0 +1,3 @@
+import { ITheme } from '@talxis/react-components';
+import { IFluentDesignState } from './interfaces';
+export declare const getControlTheme: (fluentDesignLanguage?: IFluentDesignState) => ITheme;

package/dist/utils/theme/getControlTheme.js

@@ -0,0 +1,25 @@
+import { getTheme } from '@fluentui/react';
+import { Theming } from '@talxis/react-components/dist/utilities/theming/Theming';
+
+const getControlTheme = (fluentDesignLanguage) => {
+    let primaryColor;
+    let backgroundColor;
+    let textColor;
+    const tokenTheme = fluentDesignLanguage?.tokenTheme;
+    if (!tokenTheme) {
+        const baseTheme = getTheme();
+        primaryColor = baseTheme.palette.themePrimary;
+        backgroundColor = baseTheme.semanticColors.bodyBackground;
+        textColor = baseTheme.semanticColors.bodyText;
+    }
+    else {
+        primaryColor = tokenTheme.colorCompoundBrandForeground1;
+        backgroundColor = tokenTheme.colorNeutralBackground1;
+        textColor = tokenTheme.colorNeutralForeground1;
+    }
+    const theme = Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, tokenTheme?.fluentV8Overrides);
+    return theme;
+};
+
+export { getControlTheme };
+//# sourceMappingURL=getControlTheme.js.map

package/dist/utils/theme/getControlTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getControlTheme.js","sources":["../../../src/utils/theme/getControlTheme.ts"],"sourcesContent":["import { getTheme } from '@fluentui/react';\nimport { ITheme } from '@talxis/react-components';\nimport { Theming } from '@talxis/react-components/dist/utilities/theming/Theming'\nimport { IFluentDesignState } from './interfaces';\n\nexport const getControlTheme = (fluentDesignLanguage?: IFluentDesignState): ITheme => {\n    let primaryColor;\n    let backgroundColor;\n    let textColor;\n    const tokenTheme = fluentDesignLanguage?.tokenTheme;\n\n    if (!tokenTheme) {\n        const baseTheme = getTheme();\n        primaryColor = baseTheme.palette.themePrimary;\n        backgroundColor = baseTheme.semanticColors.bodyBackground;\n        textColor = baseTheme.semanticColors.bodyText;\n    }\n    else {\n        primaryColor = tokenTheme.colorCompoundBrandForeground1;\n        backgroundColor = tokenTheme.colorNeutralBackground1;\n        textColor = tokenTheme.colorNeutralForeground1;\n    }\n    const theme = Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, tokenTheme?.fluentV8Overrides);\n    return theme;\n}\n"],"names":[],"mappings":";;;AAKa,MAAA,eAAe,GAAG,CAAC,oBAAyC,KAAY;AACjF,IAAA,IAAI,YAAY,CAAC;AACjB,IAAA,IAAI,eAAe,CAAC;AACpB,IAAA,IAAI,SAAS,CAAC;AACd,IAAA,MAAM,UAAU,GAAG,oBAAoB,EAAE,UAAU,CAAC;IAEpD,IAAI,CAAC,UAAU,EAAE;AACb,QAAA,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC;AAC7B,QAAA,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC;AAC9C,QAAA,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,cAAc,CAAC;AAC1D,QAAA,SAAS,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC;AACjD,KAAA;AACI,SAAA;AACD,QAAA,YAAY,GAAG,UAAU,CAAC,6BAA6B,CAAC;AACxD,QAAA,eAAe,GAAG,UAAU,CAAC,uBAAuB,CAAC;AACrD,QAAA,SAAS,GAAG,UAAU,CAAC,uBAAuB,CAAC;AAClD,KAAA;AACD,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,eAAe,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,iBAAiB,CAAC,CAAC;AAC/G,IAAA,OAAO,KAAK,CAAC;AACjB;;;;"}

package/dist/utils/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './getControlTheme';
+export * from './interfaces';

package/dist/utils/theme/index.js

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

package/dist/utils/theme/index.js.map

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

package/dist/utils/theme/interfaces.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="powerapps-component-framework" />
+import { DeepPartial } from "@talxis/client-libraries";
+import { ITheme } from "@talxis/react-components";
+export interface IFluentDesignState extends ComponentFramework.FluentDesignState {
+    tokenTheme: {
+        [key: string]: any;
+        fluentV8Overrides?: DeepPartial<ITheme>;
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talxis/base-controls",
-  "version": "1.2412.2",
+  "version": "1.2501.3",
   "description": "Set of React components that natively work with Power Apps Component Framework API's",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -73,7 +73,7 @@
     "@fluentui/react": "<=8.121.5",
     "@fluentui/react-migration-v8-v9": "^9.6.20",
     "@talxis/client-libraries": "1.2412.2",
-    "@talxis/react-components": "^1.2411.2",
+    "@talxis/react-components": "^1.2501.3",
     "color": "^4.2.3",
     "dayjs": "^1.11.10",
     "external-svg-loader": "^1.7.1",

package/dist/hooks/useThemeOverride.d.ts

@@ -1 +0,0 @@
-export declare const useThemeOverride: (primaryColor: string, backgroundColor: string, textColor: string) => import("../interfaces/theme").ITheme;

package/dist/hooks/useThemeOverride.js

@@ -1,23 +0,0 @@
-import { createV9Theme, createBrandVariants } from '@fluentui/react-migration-v8-v9';
-import { ThemeDesigner } from '@talxis/react-components/dist/utilities/ThemeDesigner';
-import React__default from 'react';
-import { useControlTheme } from './useControlTheme.js';
-
-const useThemeOverride = (primaryColor, backgroundColor, textColor) => {
-    const overridenFluentDesignLanguage = React__default.useMemo(() => {
-        const customV8Theme = ThemeDesigner.generateTheme({
-            primaryColor: primaryColor,
-            backgroundColor: backgroundColor,
-            textColor: textColor
-        });
-        const customTokenTheme = createV9Theme(customV8Theme);
-        return {
-            brand: createBrandVariants(customV8Theme.palette),
-            tokenTheme: customTokenTheme
-        };
-    }, []);
-    return useControlTheme(overridenFluentDesignLanguage);
-};
-
-export { useThemeOverride };
-//# sourceMappingURL=useThemeOverride.js.map

package/dist/hooks/useThemeOverride.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useThemeOverride.js","sources":["../../src/hooks/useThemeOverride.ts"],"sourcesContent":["import { createBrandVariants, createV9Theme } from \"@fluentui/react-migration-v8-v9\";\nimport { ThemeDesigner } from \"@talxis/react-components/dist/utilities/ThemeDesigner\";\nimport React from \"react\";\nimport { useControlTheme } from \"./useControlTheme\";\n\nexport const useThemeOverride = (primaryColor: string, backgroundColor: string, textColor: string) => {\n    const overridenFluentDesignLanguage = React.useMemo(() => {\n        const customV8Theme = ThemeDesigner.generateTheme({\n            primaryColor: primaryColor,\n            backgroundColor: backgroundColor,\n            textColor: textColor\n        });\n        const customTokenTheme = createV9Theme(customV8Theme);\n        return {\n            brand: createBrandVariants(customV8Theme.palette),\n            tokenTheme: customTokenTheme\n        }\n    }, []\n    );\n    return useControlTheme(overridenFluentDesignLanguage);\n}"],"names":["React"],"mappings":";;;;;AAKa,MAAA,gBAAgB,GAAG,CAAC,YAAoB,EAAE,eAAuB,EAAE,SAAiB,KAAI;AACjG,IAAA,MAAM,6BAA6B,GAAGA,cAAK,CAAC,OAAO,CAAC,MAAK;AACrD,QAAA,MAAM,aAAa,GAAG,aAAa,CAAC,aAAa,CAAC;AAC9C,YAAA,YAAY,EAAE,YAAY;AAC1B,YAAA,eAAe,EAAE,eAAe;AAChC,YAAA,SAAS,EAAE,SAAS;AACvB,SAAA,CAAC,CAAC;AACH,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,gBAAgB;SAC/B,CAAA;KACJ,EAAE,EAAE,CACJ,CAAC;AACF,IAAA,OAAO,eAAe,CAAC,6BAA6B,CAAC,CAAC;AAC1D;;;;"}

package/dist/interfaces/theme.d.ts

@@ -1,6 +0,0 @@
-import { ITheme as IFluentTheme } from '@fluentui/react';
-export interface ITheme extends IFluentTheme {
-    effects: IFluentTheme['effects'] & {
-        underlined?: boolean;
-    };
-}

package/dist/utils/Theme.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="powerapps-component-framework" />
-import { ITheme } from '../interfaces/theme';
-export declare const getControlTheme: (fluentDesignLanguage?: ComponentFramework.FluentDesignState) => ITheme;
-export declare const normalizeComponentStyling: (theme: ITheme) => ITheme;

package/dist/utils/Theme.js

@@ -1,98 +0,0 @@
-import { createTheme, getTheme } from '@fluentui/react';
-import { createV8Theme } from '@fluentui/react-migration-v8-v9';
-
-const lightTheme = createTheme({
-    palette: {
-        white: '#ffffff'
-    },
-});
-const getControlTheme = (fluentDesignLanguage) => {
-    const fluentTheme = getTheme();
-    if (!fluentDesignLanguage) {
-        return {
-            ...fluentTheme, effects: {
-                ...fluentTheme.effects,
-                underlined: false
-            },
-            semanticColors: {
-                ...fluentTheme.semanticColors,
-                inputBorder: 'transparent',
-            }
-        };
-    }
-    const v8Theme = createV8Theme(fluentDesignLanguage.brand, fluentDesignLanguage.tokenTheme);
-    v8Theme.semanticColors.inputBackground = fluentDesignLanguage.tokenTheme.inputBackground ?? fluentDesignLanguage.tokenTheme.colorNeutralBackground1Hover;
-    v8Theme.semanticColors.inputBorder = fluentDesignLanguage.tokenTheme.inputBorder ?? 'transparent';
-    v8Theme.semanticColors.inputBorderHovered = fluentDesignLanguage.tokenTheme.inputBorderHovered ?? v8Theme.semanticColors.inputBorder;
-    v8Theme.semanticColors.inputText = fluentDesignLanguage.tokenTheme.inputText ?? v8Theme.semanticColors.inputText;
-    v8Theme.semanticColors.inputPlaceholderText = fluentDesignLanguage.tokenTheme.inputPlaceholderText ?? v8Theme.semanticColors.inputText;
-    v8Theme.semanticColors.inputTextHovered = fluentDesignLanguage.tokenTheme.inputTextHovered ?? v8Theme.semanticColors.inputText;
-    v8Theme.effects.underlined = fluentDesignLanguage.tokenTheme.underlined ?? true;
-    return normalizeComponentStyling(v8Theme);
-};
-const normalizeComponentStyling = (theme) => {
-    theme.components = {
-        //@ts-ignore
-        CommandBarButton: {
-            styles: {
-                root: {
-                    backgroundColor: 'transparent'
-                },
-                rootHovered: {
-                    backgroundColor: theme.semanticColors.buttonBackgroundHovered
-                },
-                rootPressed: {
-                    backgroundColor: theme.semanticColors.buttonBackgroundPressed
-                },
-                rootExpanded: {
-                    backgroundColor: theme.semanticColors.buttonBackgroundHovered
-                },
-                rootChecked: {
-                    backgroundColor: theme.semanticColors.buttonBackgroundChecked
-                },
-                rootCheckedPressed: {
-                    backgroundColor: theme.semanticColors.buttonBackgroundPressed
-                },
-                rootExpandedHovered: {
-                    backgroundColor: theme.semanticColors.buttonBackgroundPressed
-                }
-            }
-        },
-        Checkbox: {
-            styles: (props) => {
-                return {
-                    root: {
-                        ':hover .ms-Checkbox-checkbox': {
-                            borderColor: !props.checked ? 'inherit' : undefined
-                        }
-                    }
-                };
-            }
-        },
-        Toggle: {
-            styles: (props) => {
-                return {
-                    pill: {
-                        backgroundColor: !props.checked ? theme.semanticColors.inputBackground : undefined,
-                        ':hover': {
-                            borderColor: !props.checked ? props.theme.semanticColors.smallInputBorder : undefined
-                        },
-                    }
-                };
-            }
-        }
-    };
-    const originalSemanticColors = { ...theme.semanticColors };
-    const baseTheme = lightTheme;
-    for (const key of Object.keys(baseTheme.semanticColors)) {
-        if (key.startsWith('menu') || key.startsWith('list')) {
-            //@ts-ignore - a
-            theme.semanticColors[key] = baseTheme.semanticColors[key];
-        }
-    }
-    theme.semanticColors.menuIcon = originalSemanticColors.menuIcon;
-    return theme;
-};
-
-export { getControlTheme, normalizeComponentStyling };
-//# sourceMappingURL=Theme.js.map

package/dist/utils/Theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Theme.js","sources":["../../src/utils/Theme.ts"],"sourcesContent":["import { createTheme, getTheme, ICheckboxStyleProps, IToggleStyleProps } from '@fluentui/react';\nimport { createV8Theme } from '@fluentui/react-migration-v8-v9';\nimport { ITheme } from '../interfaces/theme';\n\nconst lightTheme = createTheme({\n    palette: {\n        white: '#ffffff'\n    },\n})\n\n\nexport const getControlTheme = (fluentDesignLanguage?: ComponentFramework.FluentDesignState): ITheme => {\n    const fluentTheme = getTheme();\n    if (!fluentDesignLanguage) {\n        return {\n            ...fluentTheme, effects: {\n                ...fluentTheme.effects,\n                underlined: false\n            },\n            semanticColors: {\n                ...fluentTheme.semanticColors,\n                inputBorder: 'transparent',\n            }\n        }\n    }\n    const v8Theme: ITheme = createV8Theme(fluentDesignLanguage.brand, fluentDesignLanguage.tokenTheme);\n    v8Theme.semanticColors.inputBackground = fluentDesignLanguage.tokenTheme.inputBackground ?? fluentDesignLanguage.tokenTheme.colorNeutralBackground1Hover;\n    v8Theme.semanticColors.inputBorder = fluentDesignLanguage.tokenTheme.inputBorder ?? 'transparent';\n    v8Theme.semanticColors.inputBorderHovered = fluentDesignLanguage.tokenTheme.inputBorderHovered ?? v8Theme.semanticColors.inputBorder;\n    v8Theme.semanticColors.inputText = fluentDesignLanguage.tokenTheme.inputText ?? v8Theme.semanticColors.inputText;\n    v8Theme.semanticColors.inputPlaceholderText = fluentDesignLanguage.tokenTheme.inputPlaceholderText ?? v8Theme.semanticColors.inputText\n    v8Theme.semanticColors.inputTextHovered = fluentDesignLanguage.tokenTheme.inputTextHovered ?? v8Theme.semanticColors.inputText;\n    v8Theme.effects.underlined = fluentDesignLanguage.tokenTheme.underlined ?? true;\n    return normalizeComponentStyling(v8Theme);\n}\n\nexport const normalizeComponentStyling = (theme: ITheme) => {\n    theme.components = {\n        //@ts-ignore\n        CommandBarButton: {\n            styles: {\n                root: {\n                    backgroundColor: 'transparent'\n                },\n                rootHovered: {\n                    backgroundColor: theme.semanticColors.buttonBackgroundHovered\n                },\n                rootPressed: {\n                    backgroundColor: theme.semanticColors.buttonBackgroundPressed\n                },\n                rootExpanded: {\n                    backgroundColor: theme.semanticColors.buttonBackgroundHovered\n                },\n                rootChecked: {\n                    backgroundColor: theme.semanticColors.buttonBackgroundChecked\n                },\n                rootCheckedPressed: {\n                    backgroundColor: theme.semanticColors.buttonBackgroundPressed\n                },\n                rootExpandedHovered: {\n                    backgroundColor: theme.semanticColors.buttonBackgroundPressed\n                }\n            }\n        },\n        Checkbox: {\n            styles: (props: ICheckboxStyleProps) => {\n                return {\n                    root: {\n                        ':hover .ms-Checkbox-checkbox': {\n                            borderColor: !props.checked ? 'inherit' : undefined\n                        }\n                    }\n                }\n            }\n        },\n        Toggle: {\n            styles: (props: IToggleStyleProps) => {\n                return {\n                    pill: {\n                        backgroundColor: !props.checked ? theme.semanticColors.inputBackground : undefined,\n                        ':hover': {\n                            borderColor: !props.checked ? props.theme.semanticColors.smallInputBorder : undefined\n                        },\n                    }\n                };\n            }\n        }\n    };\n    const originalSemanticColors = { ...theme.semanticColors };\n    const baseTheme = lightTheme;\n    for (const key of Object.keys(baseTheme.semanticColors)) {\n        if (key.startsWith('menu') || key.startsWith('list')) {\n            //@ts-ignore - a\n            theme.semanticColors[key] = baseTheme.semanticColors[key];\n        }\n    }\n    theme.semanticColors.menuIcon = originalSemanticColors.menuIcon;\n    return theme;\n}\n"],"names":[],"mappings":"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"}