@talxis/base-controls 1.2501.3 → 1.2501.5

package/dist/components/Grid/Grid.js

@@ -6,7 +6,7 @@ import { gridTranslations } from './translations.js';
 import { GridContext } from './GridContext.js';
 import { mergeStyleSets, ThemeProvider } from '@fluentui/react';
 import { KeyHoldListener } from './core/services/KeyListener.js';
-import { useControlTheme } from '../../hooks/useControlTheme.js';
+import { useControlTheme } from '../../utils/theme/hooks/useControlTheme.js';
 import { useControl } from '../../hooks/useControl.js';
 
 const styles = mergeStyleSets({

package/dist/hooks/index.d.ts

@@ -3,4 +3,4 @@ export * from './useControlSizing';
 export * from './useFocusIn';
 export * from './useInputBasedControl';
 export * from './useMouseOver';
-export * from './useControlTheme';
+export * from '../utils/theme/hooks/useControlTheme';

package/dist/hooks/index.js

@@ -3,5 +3,5 @@ export { useControlSizing } from './useControlSizing.js';
 export { useFocusIn } from './useFocusIn.js';
 export { useInputBasedControl } from './useInputBasedControl.js';
 export { useMouseOver } from './useMouseOver.js';
-export { useControlTheme } from './useControlTheme.js';
+export { useControlTheme } from '../utils/theme/hooks/useControlTheme.js';
 //# sourceMappingURL=index.js.map

package/dist/hooks/useControl.js

@@ -1,7 +1,7 @@
 import { useRef, useMemo, useEffect } from 'react';
 import { merge } from 'merge-anything';
 import { Liquid } from 'liquidjs';
-import { useControlTheme } from './useControlTheme.js';
+import { useControlTheme } from '../utils/theme/hooks/useControlTheme.js';
 import { useControlSizing } from './useControlSizing.js';
 import deepEqual from 'fast-deep-equal/es6';
 

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 { 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":"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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 \"../utils/theme/hooks/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":"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"}

package/dist/index.d.ts

@@ -67,17 +67,22 @@ interface ILookupProperty extends IProperty, Omit<Partial<ComponentFramework.Pro
 }
 
 interface IFluentDesignState extends ComponentFramework.FluentDesignState {
-    tokenTheme: {
-        [key: string]: any;
-        fluentV8Overrides?: DeepPartial<ITheme>;
-    };
+    /**
+     * Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage
+     */
+    v8FluentOverrides?: DeepPartial<ITheme>;
+    /**
+     * The application's theme may differ from the control's theme. This is often the case when rendering a PCF as a cell customizer with conditional formatting.
+     * This object provides access to the application's theme, enabling you to render elements like callouts and other surfaces accurately.
+     */
+    applicationTheme?: ITheme;
 }
 
 interface IOutputs$1 {
     [key: string]: any;
 }
 interface IContext extends ComponentFramework.Context<any> {
-    fluentDesignLanguage: IFluentDesignState;
+    fluentDesignLanguage?: IFluentDesignState;
 }
 interface IControl<TParameters, TOutputs, TTranslations, TComponentProps> {
     context: IContext;
@@ -194,7 +199,7 @@ declare const useInputBasedControl: <TValue, TParameters extends IInputParameter
 
 declare const useMouseOver: (ref: React.RefObject<HTMLElement>) => boolean;
 
-declare const useControlTheme: (fluentDesignLanguage?: ComponentFramework.FluentDesignState) => ITheme$1;
+declare const useControlTheme: (fluentDesignLanguage?: IFluentDesignState) => ITheme$1;
 
 declare const getDefaultDateTimeTranslations: (dateFormattingInfo: ComponentFramework.UserSettingApi.DateFormattingInfo) => {
     time: {

package/dist/index.js

@@ -3,7 +3,7 @@ export { useControlSizing } from './hooks/useControlSizing.js';
 export { useFocusIn } from './hooks/useFocusIn.js';
 export { useInputBasedControl } from './hooks/useInputBasedControl.js';
 export { useMouseOver } from './hooks/useMouseOver.js';
-export { useControlTheme } from './hooks/useControlTheme.js';
+export { useControlTheme } from './utils/theme/hooks/useControlTheme.js';
 export { DateTime } from './components/DateTime/DateTime.js';
 export { useDateTime } from './components/DateTime/hooks/useDateTime.js';
 export { Decimal } from './components/Decimal/Decimal.js';

package/dist/interfaces/context.d.ts

@@ -4,7 +4,7 @@ export interface IOutputs {
     [key: string]: any;
 }
 export interface IContext extends ComponentFramework.Context<any> {
-    fluentDesignLanguage: IFluentDesignState;
+    fluentDesignLanguage?: IFluentDesignState;
 }
 export interface IControl<TParameters, TOutputs, TTranslations, TComponentProps> {
     context: IContext;

package/dist/utils/index.js

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

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

@@ -0,0 +1,21 @@
+/// <reference types="powerapps-component-framework" />
+import { ITheme } from "@talxis/react-components";
+import { DeepPartial } from "@talxis/client-libraries";
+export interface IFluentDesignState extends ComponentFramework.FluentDesignState {
+    /**
+     * Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage
+     */
+    v8FluentOverrides?: DeepPartial<ITheme>;
+    /**
+     * The application's theme may differ from the control's theme. This is often the case when rendering a PCF as a cell customizer with conditional formatting.
+     * This object provides access to the application's theme, enabling you to render elements like callouts and other surfaces accurately.
+     */
+    applicationTheme?: ITheme;
+}
+export declare class ControlTheme {
+    static GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage?: IFluentDesignState): ITheme;
+    static GenerateFluentDesignLanguage(primaryColor: string, backgroundColor: string, textColor: string, options?: {
+        v8FluentOverrides?: DeepPartial<ITheme>;
+        applicationTheme?: ITheme;
+    }): IFluentDesignState;
+}

package/dist/utils/theme/ControlTheme.js

@@ -0,0 +1,39 @@
+import { getTheme } from '@fluentui/react';
+import { Theming } from '@talxis/react-components';
+import { createV9Theme, createBrandVariants } from '@fluentui/react-migration-v8-v9';
+
+class ControlTheme {
+    static GetV8ThemeFromFluentDesignLanguage(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;
+        }
+        return Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, fluentDesignLanguage?.v8FluentOverrides);
+    }
+    static GenerateFluentDesignLanguage(primaryColor, backgroundColor, textColor, options) {
+        const theme = Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, options?.v8FluentOverrides);
+        const v9 = createV9Theme(theme);
+        const brand = createBrandVariants(theme.palette);
+        return {
+            brand: brand,
+            applicationTheme: options?.applicationTheme,
+            isDarkTheme: Theming.IsDarkColor(theme.semanticColors.bodyBackground),
+            v8FluentOverrides: options?.v8FluentOverrides,
+            tokenTheme: v9
+        };
+    }
+}
+
+export { ControlTheme };
+//# sourceMappingURL=ControlTheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlTheme.js","sources":["../../../src/utils/theme/ControlTheme.ts"],"sourcesContent":["import { getTheme } from \"@fluentui/react\";\nimport { ITheme, Theming } from \"@talxis/react-components\";\nimport { DeepPartial } from \"@talxis/client-libraries\";\nimport { createBrandVariants, createV9Theme } from \"@fluentui/react-migration-v8-v9\";\n\nexport interface IFluentDesignState extends ComponentFramework.FluentDesignState {\n    /**\n     * Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage\n     */\n    v8FluentOverrides?: DeepPartial<ITheme>;\n    /**\n     * The application's theme may differ from the control's theme. This is often the case when rendering a PCF as a cell customizer with conditional formatting.\n     * This object provides access to the application's theme, enabling you to render elements like callouts and other surfaces accurately.\n     */\n    applicationTheme?: ITheme;\n}\n\nexport class ControlTheme {\n    public static GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage?: IFluentDesignState): ITheme {\n        let primaryColor;\n        let backgroundColor;\n        let textColor;\n        const tokenTheme = fluentDesignLanguage?.tokenTheme;\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        return Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, fluentDesignLanguage?.v8FluentOverrides);\n    }\n\n    public static GenerateFluentDesignLanguage(primaryColor: string, backgroundColor: string, textColor: string, options?: {\n        v8FluentOverrides?: DeepPartial<ITheme>;\n        applicationTheme?: ITheme\n    }): IFluentDesignState {\n        const theme = Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, options?.v8FluentOverrides)\n        const v9 = createV9Theme(theme);\n        const brand = createBrandVariants(theme.palette);\n\n        return {\n            brand: brand,\n            applicationTheme: options?.applicationTheme,\n            isDarkTheme: Theming.IsDarkColor(theme.semanticColors.bodyBackground),\n            v8FluentOverrides: options?.v8FluentOverrides,\n            tokenTheme: v9\n        };;\n    }\n}"],"names":[],"mappings":";;;;MAiBa,YAAY,CAAA;IACd,OAAO,kCAAkC,CAAC,oBAAyC,EAAA;AACtF,QAAA,IAAI,YAAY,CAAC;AACjB,QAAA,IAAI,eAAe,CAAC;AACpB,QAAA,IAAI,SAAS,CAAC;AACd,QAAA,MAAM,UAAU,GAAG,oBAAoB,EAAE,UAAU,CAAC;QACpD,IAAI,CAAC,UAAU,EAAE;AACb,YAAA,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC;AAC7B,YAAA,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC;AAC9C,YAAA,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,cAAc,CAAC;AAC1D,YAAA,SAAS,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC;AACjD,SAAA;AACI,aAAA;AACD,YAAA,YAAY,GAAG,UAAU,CAAC,6BAA6B,CAAC;AACxD,YAAA,eAAe,GAAG,UAAU,CAAC,uBAAuB,CAAC;AACrD,YAAA,SAAS,GAAG,UAAU,CAAC,uBAAuB,CAAC;AAClD,SAAA;AACD,QAAA,OAAO,OAAO,CAAC,eAAe,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;KACrH;IAEM,OAAO,4BAA4B,CAAC,YAAoB,EAAE,eAAuB,EAAE,SAAiB,EAAE,OAG5G,EAAA;AACG,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,eAAe,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAA;AAC3G,QAAA,MAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAEjD,OAAO;AACH,YAAA,KAAK,EAAE,KAAK;YACZ,gBAAgB,EAAE,OAAO,EAAE,gBAAgB;YAC3C,WAAW,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;YACrE,iBAAiB,EAAE,OAAO,EAAE,iBAAiB;AAC7C,YAAA,UAAU,EAAE,EAAE;SACjB,CAAC;KACL;AACJ;;;;"}

package/dist/utils/theme/hooks/useControlTheme.d.ts

@@ -0,0 +1,3 @@
+import { ITheme } from "@fluentui/react";
+import { IFluentDesignState } from "../ControlTheme";
+export declare const useControlTheme: (fluentDesignLanguage?: IFluentDesignState) => ITheme;

package/dist/{hooks → utils/theme/hooks}/useControlTheme.js

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

package/dist/utils/theme/hooks/useControlTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlTheme.js","sources":["../../../../src/utils/theme/hooks/useControlTheme.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ITheme } from \"@fluentui/react\";\nimport { ControlTheme, IFluentDesignState } from \"../ControlTheme\";\n\nexport const useControlTheme = (fluentDesignLanguage?: IFluentDesignState): ITheme => {\n    const primaryColor = fluentDesignLanguage?.tokenTheme.colorCompoundBrandForeground1;\n    const backgroundColor = fluentDesignLanguage?.tokenTheme.colorNeutralBackground1;\n    const textColor = fluentDesignLanguage?.tokenTheme.colorNeutralForeground1;\n\n    return useMemo(() => ControlTheme.GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage), [primaryColor, backgroundColor, textColor]);\n};"],"names":[],"mappings":";;;AAIa,MAAA,eAAe,GAAG,CAAC,oBAAyC,KAAY;AACjF,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;IAE3E,OAAO,OAAO,CAAC,MAAM,YAAY,CAAC,kCAAkC,CAAC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC;AAC5I;;;;"}

package/dist/utils/theme/hooks/useControlThemeGenerator.d.ts

@@ -0,0 +1,14 @@
+import { IFluentDesignState } from "../ControlTheme";
+import { DeepPartial } from "@talxis/client-libraries";
+import { ITheme } from "@fluentui/react";
+export declare const useControlThemeGenerator: (primaryColor: string, backgroundColor: string, textColor: string, options?: {
+    /**
+    * Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage
+    */
+    v8FluentOverrides?: DeepPartial<ITheme>;
+    /**
+     * The application's theme may differ from the control's theme. This is often the case when rendering a PCF as a cell customizer with conditional formatting.
+     * This object allows you to set application theme so PCF's can use it to render surfaces accurately.
+     */
+    applicationTheme?: ITheme;
+}) => IFluentDesignState;

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

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

package/dist/utils/theme/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talxis/base-controls",
-  "version": "1.2501.3",
+  "version": "1.2501.5",
   "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.2501.3",
+    "@talxis/react-components": "^1.2501.8",
     "color": "^4.2.3",
     "dayjs": "^1.11.10",
     "external-svg-loader": "^1.7.1",

package/dist/hooks/useControlTheme.d.ts

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

package/dist/hooks/useControlTheme.js.map

@@ -1 +0,0 @@
-{"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/utils/theme/getControlTheme.d.ts

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

package/dist/utils/theme/getControlTheme.js

@@ -1,25 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/interfaces.d.ts

@@ -1,9 +0,0 @@
-/// <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>;
-    };
-}