@talxis/base-controls 1.2502.1 → 1.2503.2

package/dist/index.js

@@ -3,19 +3,24 @@ 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 { useControlLabels } from './hooks/useControlLabels.js';
 export { useControlTheme } from './utils/theme/hooks/useControlTheme.js';
 export { ControlTheme } from './utils/theme/ControlTheme.js';
 export { useControlThemeGenerator } from './utils/theme/hooks/useControlThemeGenerator.js';
+export { ThemeWrapper } from './utils/theme/components/ThemeWrapper.js';
+export { BaseControls } from './utils/BaseControls.js';
+export { DatasetControl } from './components/DatasetControl/DatasetControl.js';
 export { DateTime } from './components/DateTime/DateTime.js';
 export { useDateTime } from './components/DateTime/hooks/useDateTime.js';
 export { Decimal } from './components/Decimal/Decimal.js';
-export { Duration } from './components/Duration/Duration.js';
 export { Grid } from './components/Grid/Grid.js';
+export { GridCellRenderer } from './components/GridCellRenderer/GridCellRenderer.js';
 export { Lookup } from './components/Lookup/Lookup.js';
 export { useLookup } from './components/Lookup/hooks/useLookup.js';
 export { MultiSelectOptionSet } from './components/MultiSelectOptionSet/MultiSelectOptionSet.js';
+export { NestedControlRenderer } from './components/NestedControlRenderer/NestedControlRenderer.js';
 export { OptionSet } from './components/OptionSet/OptionSet.js';
 export { TextField } from './components/TextField/TextField.js';
 export { TwoOptions } from './components/TwoOptions/TwoOptions.js';
-export { DatasetControl } from './components/DatasetControl/DatasetControl.js';
+export { Duration } from './components/Duration/Duration.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/interfaces/context.d.ts

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

package/dist/interfaces/index.d.ts

@@ -5,5 +5,5 @@ export interface IOutputs {
     [key: string]: any;
 }
 export interface IParameters {
-    [key: string]: IProperty | undefined;
+    [key: string]: IProperty | undefined | any;
 }

package/dist/interfaces/property.d.ts

@@ -5,6 +5,10 @@ export interface IProperty extends Omit<Partial<ComponentFramework.PropertyTypes
 export interface IStringProperty extends IProperty, Partial<ComponentFramework.PropertyTypes.StringProperty> {
     raw: string | null;
 }
+export interface IFileProperty extends IProperty {
+    raw: ComponentFramework.FileObject | null;
+    formatted: string;
+}
 export interface ITwoOptionsProperty extends IProperty, Omit<Partial<ComponentFramework.PropertyTypes.TwoOptionsProperty>, 'attributes'> {
     raw: boolean;
     attributes: Omit<Partial<ComponentFramework.PropertyHelper.FieldPropertyMetadata.OptionSetMetadata>, 'DefaultValue'> & {
@@ -19,6 +23,7 @@ export interface IDecimalNumberProperty extends IProperty, Omit<Partial<Componen
 }
 export interface IWholeNumberProperty extends IProperty, Omit<Partial<ComponentFramework.PropertyTypes.WholeNumberProperty>, 'attributes'> {
     raw: number | null;
+    attributes?: Partial<ComponentFramework.PropertyHelper.FieldPropertyMetadata.DecimalNumberMetadata>;
 }
 export interface IDateTimeProperty extends IProperty, Partial<ComponentFramework.PropertyTypes.DateTimeProperty> {
     raw: Date | null;

package/dist/utils/BaseControls.d.ts

@@ -0,0 +1,16 @@
+import { DataType } from "@talxis/client-libraries";
+export type BaseControl = 'TextField' | 'OptionSet' | 'MultiSelectOptionSet' | 'DateTime' | 'Decimal' | 'Duration' | 'GridCellRenderer' | 'Lookup' | 'TwoOptions' | 'GridCellRenderer' | 'Grid' | 'DatasetControl' | 'NestedControl';
+export declare class BaseControls {
+    static get TextField(): 'TextField';
+    static get OptionSet(): 'OptionSet';
+    static get MultiSelectOptionSet(): 'MultiSelectOptionSet';
+    static get DateTime(): 'DateTime';
+    static get Decimal(): 'Decimal';
+    static get Duration(): 'Duration';
+    static get GridCellRenderer(): 'GridCellRenderer';
+    static get Lookup(): 'Lookup';
+    static get TwoOptions(): 'TwoOptions';
+    static GetControlNameForDataType(dataType: DataType): "Decimal" | "TextField" | "OptionSet" | "MultiSelectOptionSet" | "DateTime" | "Duration" | "Lookup" | "TwoOptions";
+    static GetAll(): BaseControl[];
+    static IsBaseControl(name: string): boolean;
+}

package/dist/utils/BaseControls.js

@@ -0,0 +1,82 @@
+class BaseControls {
+    static get TextField() {
+        return 'TextField';
+    }
+    static get OptionSet() {
+        return 'OptionSet';
+    }
+    static get MultiSelectOptionSet() {
+        return 'MultiSelectOptionSet';
+    }
+    static get DateTime() {
+        return 'DateTime';
+    }
+    static get Decimal() {
+        return 'Decimal';
+    }
+    static get Duration() {
+        return 'Duration';
+    }
+    static get GridCellRenderer() {
+        return 'GridCellRenderer';
+    }
+    static get Lookup() {
+        return 'Lookup';
+    }
+    static get TwoOptions() {
+        return 'TwoOptions';
+    }
+    static GetControlNameForDataType(dataType) {
+        switch (dataType) {
+            case 'Currency':
+            case 'Whole.None':
+            case 'Decimal': {
+                return BaseControls.Decimal;
+            }
+            case 'DateAndTime.DateAndTime':
+            case 'DateAndTime.DateOnly': {
+                return BaseControls.DateTime;
+            }
+            case 'Lookup.Customer':
+            case 'Lookup.Owner':
+            case 'Lookup.Regarding':
+            case 'Lookup.Simple': {
+                return BaseControls.Lookup;
+            }
+            case 'OptionSet': {
+                return BaseControls.OptionSet;
+            }
+            case 'MultiSelectPicklist': {
+                return BaseControls.MultiSelectOptionSet;
+            }
+            case 'TwoOptions': {
+                return BaseControls.TwoOptions;
+            }
+            case 'Whole.Duration': {
+                return BaseControls.Duration;
+            }
+            default: {
+                return BaseControls.TextField;
+            }
+        }
+    }
+    static GetAll() {
+        return [
+            BaseControls.Decimal,
+            BaseControls.DateTime,
+            BaseControls.Lookup,
+            BaseControls.OptionSet,
+            BaseControls.MultiSelectOptionSet,
+            BaseControls.TwoOptions,
+            BaseControls.Duration,
+            BaseControls.TextField,
+            BaseControls.GridCellRenderer
+        ];
+    }
+    static IsBaseControl(name) {
+        return this.GetAll().includes(name);
+    }
+}
+
+export { BaseControls };
+//# sourceMappingURL=BaseControls.js.map

package/dist/utils/BaseControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseControls.js","sources":["../../src/utils/BaseControls.ts"],"sourcesContent":["import { DataType } from \"@talxis/client-libraries\";\n\nexport type BaseControl =\n    | 'TextField'\n    | 'OptionSet'\n    | 'MultiSelectOptionSet'\n    | 'DateTime'\n    | 'Decimal'\n    | 'Duration'\n    | 'GridCellRenderer'\n    | 'Lookup'\n    | 'TwoOptions'\n    | 'GridCellRenderer'\n    | 'Grid'\n    | 'DatasetControl'\n    | 'NestedControl'\n\nexport class BaseControls {\n    public static get TextField(): 'TextField' {\n        return 'TextField';\n    }\n\n    public static get OptionSet(): 'OptionSet' {\n        return 'OptionSet';\n    }\n\n    public static get MultiSelectOptionSet(): 'MultiSelectOptionSet' {\n        return 'MultiSelectOptionSet';\n    }\n\n    public static get DateTime(): 'DateTime' {\n        return 'DateTime';\n    }\n\n    public static get Decimal(): 'Decimal' {\n        return 'Decimal';\n    }\n\n    public static get Duration(): 'Duration' {\n        return 'Duration';\n    }\n\n    public static get GridCellRenderer(): 'GridCellRenderer' {\n        return 'GridCellRenderer';\n    }\n\n    public static get Lookup(): 'Lookup' {\n        return 'Lookup';\n    }\n    \n    public static get TwoOptions(): 'TwoOptions' {\n        return 'TwoOptions';\n    }\n\n    public static GetControlNameForDataType(dataType: DataType) {\n        switch(dataType) {\n            case 'Currency':\n            case 'Whole.None':\n            case 'Decimal': {\n                return BaseControls.Decimal;\n            }\n            case 'DateAndTime.DateAndTime':\n            case 'DateAndTime.DateOnly': {\n                return BaseControls.DateTime;\n            }\n            case 'Lookup.Customer':\n            case 'Lookup.Owner':\n            case 'Lookup.Regarding':\n            case 'Lookup.Simple': {\n                return BaseControls.Lookup;\n            }\n            case 'OptionSet': {\n                return BaseControls.OptionSet;\n            }\n            case 'MultiSelectPicklist': {\n                return BaseControls.MultiSelectOptionSet;\n            }\n            case 'TwoOptions': {\n                return BaseControls.TwoOptions;\n            }\n            case 'Whole.Duration': {\n                return BaseControls.Duration;\n            }\n            default: {\n                return BaseControls.TextField;\n            }\n        }\n    }\n    public static GetAll(): BaseControl[] {\n        return [\n            BaseControls.Decimal,\n            BaseControls.DateTime,\n            BaseControls.Lookup,\n            BaseControls.OptionSet,\n            BaseControls.MultiSelectOptionSet,\n            BaseControls.TwoOptions,\n            BaseControls.Duration,\n            BaseControls.TextField,\n            BaseControls.GridCellRenderer\n        ]\n    }\n    public static IsBaseControl(name: string) {\n        return this.GetAll().includes(name as BaseControl);\n    }\n}"],"names":[],"mappings":"MAiBa,YAAY,CAAA;AACd,IAAA,WAAW,SAAS,GAAA;AACvB,QAAA,OAAO,WAAW,CAAC;KACtB;AAEM,IAAA,WAAW,SAAS,GAAA;AACvB,QAAA,OAAO,WAAW,CAAC;KACtB;AAEM,IAAA,WAAW,oBAAoB,GAAA;AAClC,QAAA,OAAO,sBAAsB,CAAC;KACjC;AAEM,IAAA,WAAW,QAAQ,GAAA;AACtB,QAAA,OAAO,UAAU,CAAC;KACrB;AAEM,IAAA,WAAW,OAAO,GAAA;AACrB,QAAA,OAAO,SAAS,CAAC;KACpB;AAEM,IAAA,WAAW,QAAQ,GAAA;AACtB,QAAA,OAAO,UAAU,CAAC;KACrB;AAEM,IAAA,WAAW,gBAAgB,GAAA;AAC9B,QAAA,OAAO,kBAAkB,CAAC;KAC7B;AAEM,IAAA,WAAW,MAAM,GAAA;AACpB,QAAA,OAAO,QAAQ,CAAC;KACnB;AAEM,IAAA,WAAW,UAAU,GAAA;AACxB,QAAA,OAAO,YAAY,CAAC;KACvB;IAEM,OAAO,yBAAyB,CAAC,QAAkB,EAAA;AACtD,QAAA,QAAO,QAAQ;AACX,YAAA,KAAK,UAAU,CAAC;AAChB,YAAA,KAAK,YAAY,CAAC;YAClB,KAAK,SAAS,EAAE;gBACZ,OAAO,YAAY,CAAC,OAAO,CAAC;AAC/B,aAAA;AACD,YAAA,KAAK,yBAAyB,CAAC;YAC/B,KAAK,sBAAsB,EAAE;gBACzB,OAAO,YAAY,CAAC,QAAQ,CAAC;AAChC,aAAA;AACD,YAAA,KAAK,iBAAiB,CAAC;AACvB,YAAA,KAAK,cAAc,CAAC;AACpB,YAAA,KAAK,kBAAkB,CAAC;YACxB,KAAK,eAAe,EAAE;gBAClB,OAAO,YAAY,CAAC,MAAM,CAAC;AAC9B,aAAA;YACD,KAAK,WAAW,EAAE;gBACd,OAAO,YAAY,CAAC,SAAS,CAAC;AACjC,aAAA;YACD,KAAK,qBAAqB,EAAE;gBACxB,OAAO,YAAY,CAAC,oBAAoB,CAAC;AAC5C,aAAA;YACD,KAAK,YAAY,EAAE;gBACf,OAAO,YAAY,CAAC,UAAU,CAAC;AAClC,aAAA;YACD,KAAK,gBAAgB,EAAE;gBACnB,OAAO,YAAY,CAAC,QAAQ,CAAC;AAChC,aAAA;AACD,YAAA,SAAS;gBACL,OAAO,YAAY,CAAC,SAAS,CAAC;AACjC,aAAA;AACJ,SAAA;KACJ;AACM,IAAA,OAAO,MAAM,GAAA;QAChB,OAAO;AACH,YAAA,YAAY,CAAC,OAAO;AACpB,YAAA,YAAY,CAAC,QAAQ;AACrB,YAAA,YAAY,CAAC,MAAM;AACnB,YAAA,YAAY,CAAC,SAAS;AACtB,YAAA,YAAY,CAAC,oBAAoB;AACjC,YAAA,YAAY,CAAC,UAAU;AACvB,YAAA,YAAY,CAAC,QAAQ;AACrB,YAAA,YAAY,CAAC,SAAS;AACtB,YAAA,YAAY,CAAC,gBAAgB;SAChC,CAAA;KACJ;IACM,OAAO,aAAa,CAAC,IAAY,EAAA;QACpC,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,IAAmB,CAAC,CAAC;KACtD;AACJ;;;;"}

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './theme';
+export * from './BaseControls';

package/dist/utils/index.js

@@ -1,4 +1,6 @@
+export { BaseControls } from './BaseControls.js';
 export { ControlTheme } from './theme/ControlTheme.js';
 export { useControlTheme } from './theme/hooks/useControlTheme.js';
 export { useControlThemeGenerator } from './theme/hooks/useControlThemeGenerator.js';
+export { ThemeWrapper } from './theme/components/ThemeWrapper.js';
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

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

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

@@ -1,6 +1,6 @@
 /// <reference types="@types/powerapps-component-framework" />
-import { ITheme } from "@talxis/react-components";
 import { DeepPartial } from "@talxis/client-libraries";
+import { ITheme } from "@talxis/react-components";
 export interface IFluentDesignState extends ComponentFramework.FluentDesignState {
     /**
      * Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage

package/dist/utils/theme/ControlTheme.js

@@ -1,6 +1,6 @@
 import { getTheme } from '@fluentui/react';
-import { Theming } from '@talxis/react-components';
 import { createV9Theme, createBrandVariants } from '@fluentui/react-migration-v8-v9';
+import { Theming } from '@talxis/react-components';
 
 class ControlTheme {
     static GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage) {

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

@@ -1 +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;;;;"}
+{"version":3,"file":"ControlTheme.js","sources":["../../../src/utils/theme/ControlTheme.ts"],"sourcesContent":["import { getTheme } from \"@fluentui/react\";\nimport { DeepPartial } from \"@talxis/client-libraries\";\nimport { createBrandVariants, createV9Theme } from \"@fluentui/react-migration-v8-v9\";\nimport { ITheme, Theming } from \"@talxis/react-components\";\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/components/ThemeWrapper.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="@types/powerapps-component-framework" />
+import React from 'react';
+import { ThemeProviderProps } from '@fluentui/react';
+interface IThemeWrapper extends ThemeProviderProps {
+    fluentDesignLanguage?: ComponentFramework.FluentDesignState;
+    children?: React.ReactNode;
+}
+export declare const ThemeWrapper: React.FC<IThemeWrapper>;
+export {};

package/dist/utils/theme/components/ThemeWrapper.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { ThemeProvider } from '@fluentui/react';
+import { useControlTheme } from '../hooks/useControlTheme.js';
+
+const ThemeWrapper = (props) => {
+    const theme = useControlTheme(props.fluentDesignLanguage);
+    return (jsx(ThemeProvider, { theme: theme, ...props, children: props.children }));
+};
+
+export { ThemeWrapper };
+//# sourceMappingURL=ThemeWrapper.js.map

package/dist/utils/theme/components/ThemeWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeWrapper.js","sources":["../../../../src/utils/theme/components/ThemeWrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { ThemeProvider, ThemeProviderProps } from '@fluentui/react';\nimport { useControlTheme } from '../hooks';\n\ninterface IThemeWrapper extends ThemeProviderProps {\n    fluentDesignLanguage?: ComponentFramework.FluentDesignState;\n    children?: React.ReactNode;\n}\n\nexport const ThemeWrapper: React.FC<IThemeWrapper> = (props: IThemeWrapper) => {\n    const theme = useControlTheme(props.fluentDesignLanguage);\n    return (\n        <ThemeProvider theme={theme} {...props}>\n            {props.children}\n        </ThemeProvider>\n    );\n};"],"names":["_jsx"],"mappings":";;;;AASa,MAAA,YAAY,GAA4B,CAAC,KAAoB,KAAI;IAC1E,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;AAC1D,IAAA,QACIA,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,EAAM,GAAA,KAAK,YACjC,KAAK,CAAC,QAAQ,EAAA,CACH,EAClB;AACN;;;;"}

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

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

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

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

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

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

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

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

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

@@ -1 +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;;;;"}
+{"version":3,"file":"useControlTheme.js","sources":["../../../../src/utils/theme/hooks/useControlTheme.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ControlTheme, IFluentDesignState } from \"../ControlTheme\";\nimport { ITheme } from \"@talxis/react-components\";\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};\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/index.d.ts

@@ -1,2 +1,3 @@
 export * from './ControlTheme';
 export * from './hooks';
+export * from './components';

package/dist/utils/theme/index.js

@@ -1,4 +1,5 @@
 export { ControlTheme } from './ControlTheme.js';
 export { useControlTheme } from './hooks/useControlTheme.js';
 export { useControlThemeGenerator } from './hooks/useControlThemeGenerator.js';
+export { ThemeWrapper } from './components/ThemeWrapper.js';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talxis/base-controls",
-  "version": "1.2502.1",
+  "version": "1.2503.2",
   "description": "Set of React components that natively work with Power Apps Component Framework API's",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -85,8 +85,8 @@
   "peerDependencies": {
     "react": "^16.8.6 || ^17.0.2",
     "react-dom": "^16.8.6 || ^17.0.2",
-    "@talxis/react-components": "^1.2502.5",
-    "@talxis/client-libraries": "^1.2502.2",
+    "@talxis/react-components": "^1.2503.1",
+    "@talxis/client-libraries": "^1.2503.3",
     "@fluentui/react": "<=8.121.5"
   }
 }

package/dist/components/Grid/core/components/Cell/EditableCell/EditableCell.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { IGridColumn } from '../../../interfaces/IGridColumn';
-import { ICellEditorParams } from '@ag-grid-community/core';
-import { IRecord } from '@talxis/client-libraries';
-interface ICell extends ICellEditorParams {
-    baseColumn: IGridColumn;
-    data: IRecord;
-}
-export declare const EditableCell: (editableCellProps: ICell) => JSX.Element;
-export {};

package/dist/components/Grid/core/components/Cell/EditableCell/EditableCell.js

@@ -1,82 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { DataType } from '../../../enums/DataType.js';
-import { Component } from '../../Component/Component.js';
-import { useGridInstance } from '../../../hooks/useGridInstance.js';
-import { useRerender } from '../../../../../../hooks/useRerender.js';
-
-const EditableCell = (editableCellProps) => {
-    const grid = useGridInstance();
-    const column = editableCellProps.baseColumn;
-    const record = editableCellProps.data;
-    const rerender = useRerender();
-    const onNotifyOutputChanged = (value) => {
-        switch (column.dataType) {
-            case DataType.OPTIONSET:
-            case DataType.DATE_AND_TIME_DATE_ONLY:
-            case DataType.WHOLE_DURATION: {
-                editableCellProps.stopEditing();
-                break;
-            }
-            case DataType.LOOKUP_OWNER:
-            case DataType.LOOKUP_SIMPLE:
-            case DataType.LOOKUP_CUSTOMER: {
-                if (value?.length > 0) {
-                    editableCellProps.stopEditing();
-                }
-                break;
-            }
-        }
-        if (grid.parameters.EnableMultiEdit?.raw && grid.dataset.getSelectedRecordIds().includes(record.getRecordId())) {
-            const records = grid.records.filter(record => grid.dataset.getSelectedRecordIds().includes(record.getRecordId()));
-            records.map(record => setValue(record, value));
-        }
-        else {
-            setValue(record, value);
-        }
-        grid.pcfContext.factory.requestRender();
-        rerender();
-    };
-    const setValue = (record, value) => {
-        record.setValue(column.name, value);
-        editableCellProps.api.resetRowHeights();
-    };
-    return jsx(Component, { column: column, record: record, onNotifyOutputChanged: onNotifyOutputChanged, onOverrideControlProps: (props) => {
-            return {
-                ...props,
-                context: {
-                    ...props.context,
-                    mode: {
-                        ...props.context.mode,
-                        allocatedHeight: (() => {
-                            return editableCellProps.node.rowHeight;
-                        })()
-                    },
-                    fluentDesignLanguage: props.context.fluentDesignLanguage ? {
-                        ...props.context.fluentDesignLanguage,
-                        tokenTheme: {
-                            ...props.context.fluentDesignLanguage.tokenTheme,
-                            underlined: false,
-                        }
-                    } : undefined
-                },
-                parameters: {
-                    ...props.parameters,
-                    AutoFocus: {
-                        raw: true
-                    },
-                    EnableNavigation: {
-                        raw: false
-                    },
-                    IsInlineNewEnabled: {
-                        raw: false
-                    },
-                    EnableTypeSuffix: {
-                        raw: false
-                    }
-                }
-            };
-        } });
-};
-
-export { EditableCell };
-//# sourceMappingURL=EditableCell.js.map

package/dist/components/Grid/core/components/Cell/EditableCell/EditableCell.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableCell.js","sources":["../../../../../../../src/components/Grid/core/components/Cell/EditableCell/EditableCell.tsx"],"sourcesContent":["import { DataType } from '../../../enums/DataType';\nimport { IGridColumn } from '../../../interfaces/IGridColumn';\nimport { Component } from '../../Component/Component';\nimport { ICellEditorParams } from '@ag-grid-community/core';\nimport { IRecord } from '@talxis/client-libraries';\nimport { useGridInstance } from '../../../hooks/useGridInstance';\nimport { useRerender } from '../../../../../../hooks/useRerender';\n\ninterface ICell extends ICellEditorParams {\n    baseColumn: IGridColumn;\n    data: IRecord\n}\n\nexport const EditableCell = (editableCellProps: ICell) => {\n    const grid = useGridInstance();\n    const column = editableCellProps.baseColumn;\n    const record = editableCellProps.data;\n    const rerender = useRerender();\n\n    const onNotifyOutputChanged = (value: any) => {\n        switch(column.dataType) {\n            case DataType.OPTIONSET:\n            case DataType.DATE_AND_TIME_DATE_ONLY:\n            case DataType.WHOLE_DURATION: {\n                editableCellProps.stopEditing();\n                break;\n            }\n            case DataType.LOOKUP_OWNER:\n            case DataType.LOOKUP_SIMPLE:\n            case DataType.LOOKUP_CUSTOMER: {\n                if(value?.length > 0) {\n                    editableCellProps.stopEditing();\n                }\n                break;\n            }\n        }\n        if(grid.parameters.EnableMultiEdit?.raw && grid.dataset.getSelectedRecordIds().includes(record.getRecordId())) {\n            const records = grid.records.filter(record => grid.dataset.getSelectedRecordIds().includes(record.getRecordId()))\n            records.map(record => setValue(record, value))\n        }\n        else {\n            setValue(record, value)\n        }\n        grid.pcfContext.factory.requestRender();\n        rerender();\n    }\n\n    const setValue = (record: IRecord, value: any) => {\n        record.setValue(column.name, value);\n        editableCellProps.api.resetRowHeights();\n    }\n\n    return <Component\n        column={column}\n        record={record}\n        onNotifyOutputChanged={onNotifyOutputChanged}\n        onOverrideControlProps={(props) => {\n            return {\n                ...props,\n                context: {\n                    ...props.context,\n                    mode: {\n                        ...props.context.mode,\n                        allocatedHeight: (() => {\n                            return editableCellProps.node.rowHeight!\n                        })()\n                    },\n                    fluentDesignLanguage: props.context.fluentDesignLanguage ? {\n                        ...props.context.fluentDesignLanguage,\n                        tokenTheme: {\n                            ...props.context.fluentDesignLanguage.tokenTheme,\n                            underlined: false,\n                        }\n                    } : undefined\n                },\n                parameters: {\n                    ...props.parameters,\n                    AutoFocus: {\n                        raw: true\n                    },\n                    EnableNavigation: {\n                        raw: false\n                    },\n                    IsInlineNewEnabled: {\n                        raw: false\n                    },\n                    EnableTypeSuffix: {\n                        raw: false\n                    }\n                }\n            }\n        }}\n    />\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Grid/core/components/Cell/ReadOnlyCell/Notifications/Notifications.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { IAddControlNotificationOptions } from "@talxis/client-libraries";
-interface INotifications {
-    notifications: IAddControlNotificationOptions[];
-    className?: string;
-}
-export interface INotificationsRef {
-    remeasureCommandBar: () => void;
-}
-export declare const Notifications: import("react").ForwardRefExoticComponent<INotifications & import("react").RefAttributes<INotificationsRef>>;
-export {};

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

@@ -1,93 +0,0 @@
-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 { useThemeGenerator, CommandBar } from '@talxis/react-components';
-
-const Notifications = forwardRef((props, ref) => {
-    const { notifications } = { ...props };
-    const theme = useTheme();
-    const styles = getNotificationIconStyles();
-    const iconId = useMemo(() => `icon${crypto.randomUUID()}`, []);
-    const [selectedNotification, setSelectedNotification] = useState(null);
-    const commandBarRef = useRef(null);
-    const overridenTheme = useThemeGenerator(theme.palette.themePrimary, 'transparent', theme.semanticColors.bodyText);
-    useImperativeHandle(ref, () => {
-        return {
-            remeasureCommandBar: () => {
-                commandBarRef.current?.remeasure();
-            }
-        };
-    });
-    const getIconName = (notification) => {
-        if (notification.iconName) {
-            return notification.iconName;
-        }
-        return notification.notificationLevel === 'ERROR' ? 'Error' : undefined;
-    };
-    const renderActionButton = (action, buttonType) => {
-        const Button = buttonType === 'primary' ? PrimaryButton : DefaultButton;
-        return jsx(Button, { text: action.message, iconProps: action?.iconName ? {
-                iconName: action.iconName
-            } : undefined, onClick: () => action.actions.map(callback => callback()) });
-    };
-    const renderActions = (actions) => {
-        if (actions.length === 0) {
-            return jsx(Fragment, {});
-        }
-        //render actions as buttons
-        if (actions.length < 3) {
-            return jsx("div", { className: styles.buttons, children: actions.map((action, i) => renderActionButton(action, i === 0 ? 'primary' : 'default')) });
-        }
-        return jsx(CommandBar, { items: actions.map((action, i) => {
-                return {
-                    key: i.toString(),
-                    text: action.message,
-                    commandBarButtonAs: () => jsxs(Link, { onClick: () => action.actions.map(callback => callback()), className: styles.link, children: [action.iconName &&
-                                jsx(Icon, { iconName: action.iconName }), action.message] }),
-                    iconProps: {
-                        iconName: action.iconName
-                    },
-                    onClick: () => {
-                        action.actions.map(callback => callback());
-                    }
-                };
-            }) });
-    };
-    const onNotificationClick = (notification) => {
-        if (notification.actions?.length === 1) {
-            notification.actions[0].actions.map(callback => callback());
-            return;
-        }
-        setSelectedNotification(notification);
-    };
-    const getCommandBarItem = (notification) => {
-        const icon = getIconName(notification);
-        return {
-            key: notification.uniqueId,
-            text: notification.title,
-            title: notification.title,
-            onClick: () => onNotificationClick(notification),
-            buttonStyles: {
-                textContainer: {
-                    display: notification.compact ? 'none' : undefined
-                }
-            },
-            iconProps: notification ? {
-                iconName: icon,
-                styles: {
-                    root: {
-                        color: notification.notificationLevel === 'ERROR' ? `${theme.semanticColors.errorIcon} !important` : undefined
-                    }
-                }
-            } : undefined
-        };
-    };
-    return jsxs("div", { className: `${styles.root}${props.className ? ` ${props.className}` : ''}`, children: [jsx(ThemeProvider, { theme: overridenTheme, applyTo: "none", children: jsx(CommandBar, { overflowItems: notifications.filter(x => x.renderedInOverflow).map(y => getCommandBarItem(y)), theme: overridenTheme, id: iconId, componentRef: commandBarRef, items: notifications.filter(x => !x.renderedInOverflow).map(y => getCommandBarItem(y)) }) }), selectedNotification &&
-                jsxs(Callout, { hidden: !selectedNotification, className: styles.callout, onDismiss: () => setSelectedNotification(null), target: `#${iconId}`, children: [selectedNotification.title &&
-                            jsx(Text, { title: selectedNotification.title, className: styles.calloutTitle, variant: selectedNotification.messages.length > 0 ? 'xLarge' : undefined, children: selectedNotification.title }), jsx(Text, { children: selectedNotification.messages[0] }), selectedNotification.actions &&
-                            renderActions(selectedNotification.actions)] })] });
-});
-
-export { Notifications };
-//# sourceMappingURL=Notifications.js.map

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

@@ -1 +0,0 @@
-{"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/core/components/Cell/ReadOnlyCell/Notifications/styles.d.ts

@@ -1,36 +0,0 @@
-import { ITheme } from "@fluentui/react";
-export declare const getNotificationIconStyles: (theme: ITheme) => import("@fluentui/react").IProcessedStyleSet<{
-    callout: {
-        width: number;
-        padding: string;
-        '.ms-Callout-main': {
-            display: string;
-            flexDirection: string;
-            gap: number;
-            '.ms-CommandBar-primaryCommand': {
-                gap: number;
-            };
-        };
-    };
-    calloutTitle: {
-        overflow: string;
-        textOverflow: string;
-    };
-    link: {
-        i: {
-            position: string;
-            top: number;
-            marginRight: number;
-        };
-    };
-    buttons: {
-        display: string;
-        justifyContent: string;
-        gap: number;
-    };
-    root: {
-        '.ms-CommandBar-primaryCommand': {
-            justifyContent: string;
-        };
-    };
-}>;