@talxis/base-controls 1.2508.1 → 1.2509.1-alpha.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Ribbon/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getRibbonStyles = () => {\n    return mergeStyleSets({\n        ribbonRoot: {\n            flex: 1\n        },\n        shimmerRoot: {\n            width: '100%',\n        },\n        shimmerWrapper: {\n            height: 44\n        }\n    })\n}"],"names":[],"mappings":";;AAEO,MAAM,eAAe,GAAG,MAAK;AAChC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,UAAU,EAAE;AACR,YAAA,IAAI,EAAE,CAAC;AACV,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,KAAK,EAAE,MAAM;AAChB,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/TextField/TextField.js

@@ -113,7 +113,7 @@ const TextField = (props) => {
             setValue(value);
         }
     });
-    return (jsx(ThemeProvider, { style: isTextArea ? { height: '100%' } : undefined, applyTo: "none", theme: theme, children: jsx(TextField$1, { ...componentProps }) }));
+    return (jsx(ThemeProvider, { applyTo: "none", theme: theme, children: jsx(TextField$1, { ...componentProps }) }));
 };
 
 export { TextField };

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\nimport { DataTypes } from \"@talxis/client-libraries\";\nimport { NestedControlRenderer } from \"../NestedControlRenderer/NestedControlRenderer\";\n\nexport const TextField = (props: ITextField) => {\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n    const getInputType = () => {\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return 'email';\n            }\n            case 'SingleLine.URL': {\n                return 'url';\n            }\n            case 'SingleLine.Phone': {\n                return 'tel';\n            }\n        }\n        return \"text\";\n    }\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (parameters.EnableTypeSuffix?.raw === false) {\n            return undefined;\n        }\n        const disabled = boundValue.error || !boundValue.raw\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return [{\n                    key: 'sendMail',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Mail'\n                    },\n                    href: `mailto:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.Phone': {\n                return [{\n                    key: 'call',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Phone'\n                    },\n                    href: `tel:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.URL': {\n                return [{\n                    key: 'goToPage',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Globe'\n                    },\n                    target: '_blank',\n                    href: boundValue.raw!\n                }]\n            }\n        }\n        return undefined;\n    }\n\n    const isTextArea = (() => {\n        switch(parameters.value.type) {\n            case DataTypes.Multiple:\n            case DataTypes.SingleLineTextArea: {\n                return true;\n            }\n        }\n        return false;\n    })()\n\n    const componentProps = onOverrideComponentProps({\n        readOnly: context.mode.isControlDisabled,\n        resizable: false,\n        type: getInputType(),\n        multiline: isTextArea,\n        autoFocus: parameters.AutoFocus?.raw,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        errorMessage: boundValue.errorMessage,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        suffixItems: getSuffixItems(),\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: () => setValue(undefined)\n        } : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        value: value ?? \"\",\n        onBlur: () => {\n            onNotifyOutputChanged({\n                value: value ?? undefined\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        }\n    })\n    return (\n        <ThemeProvider style={isTextArea ? { height: '100%' } : undefined} applyTo=\"none\" theme={theme}>\n            <TextFieldBase {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx","TextFieldBase"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\nimport { DataTypes } from \"@talxis/client-libraries\";\n\nexport const TextField = (props: ITextField) => {\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n    const getInputType = () => {\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return 'email';\n            }\n            case 'SingleLine.URL': {\n                return 'url';\n            }\n            case 'SingleLine.Phone': {\n                return 'tel';\n            }\n        }\n        return \"text\";\n    }\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (parameters.EnableTypeSuffix?.raw === false) {\n            return undefined;\n        }\n        const disabled = boundValue.error || !boundValue.raw\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return [{\n                    key: 'sendMail',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Mail'\n                    },\n                    href: `mailto:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.Phone': {\n                return [{\n                    key: 'call',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Phone'\n                    },\n                    href: `tel:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.URL': {\n                return [{\n                    key: 'goToPage',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Globe'\n                    },\n                    target: '_blank',\n                    href: boundValue.raw!\n                }]\n            }\n        }\n        return undefined;\n    }\n\n    const isTextArea = (() => {\n        switch(parameters.value.type) {\n            case DataTypes.Multiple:\n            case DataTypes.SingleLineTextArea: {\n                return true;\n            }\n        }\n        return false;\n    })()\n\n    const componentProps = onOverrideComponentProps({\n        readOnly: context.mode.isControlDisabled,\n        resizable: false,\n        type: getInputType(),\n        multiline: isTextArea,\n        autoFocus: parameters.AutoFocus?.raw,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        errorMessage: boundValue.errorMessage,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        suffixItems: getSuffixItems(),\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: () => setValue(undefined)\n        } : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        value: value ?? \"\",\n        onBlur: () => {\n            onNotifyOutputChanged({\n                value: value ?? undefined\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        }\n    })\n    return (\n        <ThemeProvider applyTo=\"none\" theme={theme}>\n            <TextFieldBase {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx","TextFieldBase"],"mappings":"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"}

package/dist/components/index.js

@@ -1,10 +1,8 @@
 export { DatasetControl } from './DatasetControl/DatasetControl.js';
-export { DatasetPaging } from './DatasetControl/Paging/DatasetPaging.js';
-export { Paging } from './DatasetControl/Paging/Paging.js';
 export { DateTime } from './DateTime/DateTime.js';
 export { useDateTime } from './DateTime/hooks/useDateTime.js';
 export { Decimal } from './Decimal/Decimal.js';
-export { Grid } from './Grid/Grid.js';
+export { Grid } from './Grid/grid/Grid.js';
 export { GridCellRenderer } from './GridCellRenderer/GridCellRenderer.js';
 export { Lookup } from './Lookup/Lookup.js';
 export { useLookup } from './Lookup/hooks/useLookup.js';

package/dist/components/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/hooks/useControl.d.ts

@@ -7,6 +7,7 @@ export interface IControlController<TTranslations, TOutputs> {
         width?: number;
         height?: number;
     };
+    className: string;
     theme: ITheme;
     onNotifyOutputChanged: (outputs: TOutputs) => void;
 }

package/dist/hooks/useControl.js

@@ -56,6 +56,7 @@ const useControl = (name, props, defaultTranslations) => {
         props.onNotifyOutputChanged?.(outputs);
     };
     return {
+        className: `talxis__baseControl__${name}`,
         labels,
         sizing,
         theme: useControlTheme(context.fluentDesignLanguage),

package/dist/hooks/useControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { useControlTheme } from \"../utils/theme/hooks/useControlTheme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\nimport { ITheme } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport { IDefaultTranslations, ITranslation, useControlLabels } from \"./useControlLabels\";\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 context = props.context;\n    const parametersRef = useRef<TParameters>(props.parameters);\n    const sizing = useControlSizing(props.context.mode);\n    const labels = useControlLabels({\n        languageId: context.userSettings.languageId,\n        translations: props.translations,\n        defaultTranslations\n    });\n\n    useEffect(() => {\n        parametersRef.current = props.parameters;\n    }, [props.parameters]);\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(parameterValue instanceof Date) {\n                parameterValue = dayjs(parameterValue).startOf('minute').toDate();\n            }\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    \n    return {\n        labels,\n        sizing,\n        theme: useControlTheme(context.fluentDesignLanguage),\n        onNotifyOutputChanged\n    }\n};\n"],"names":[],"mappings":";;;;;;;AAkBA;;;AAGG;AACU,MAAA,UAAU,GAAG,CAA4E,IAAY,EAAE,KAA0D,EAAE,mBAA0C,KAAiD;AACvQ,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,aAAa,GAAG,MAAM,CAAc,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,gBAAgB,CAAC;AAC5B,QAAA,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,UAAU;QAC3C,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,mBAAmB;AACtB,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC;AAC7C,KAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AAEvB,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;YACrD,IAAG,cAAc,YAAY,IAAI,EAAE;AAC/B,gBAAA,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAC;AACrE,aAAA;AACD,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;IAEF,OAAO;QACH,MAAM;QACN,MAAM;AACN,QAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC;QACpD,qBAAqB;KACxB,CAAA;AACL;;;;"}
+{"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { useControlTheme } from \"../utils/theme/hooks/useControlTheme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\nimport { ITheme } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport { IDefaultTranslations, ITranslation, useControlLabels } from \"./useControlLabels\";\n\nexport interface IControlController<TTranslations, TOutputs> {\n    labels: Required<ITranslation<TTranslations>>,\n    sizing: {\n        width?: number,\n        height?: number\n    },\n    className: string;\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 context = props.context;\n    const parametersRef = useRef<TParameters>(props.parameters);\n    const sizing = useControlSizing(props.context.mode);\n    const labels = useControlLabels({\n        languageId: context.userSettings.languageId,\n        translations: props.translations,\n        defaultTranslations\n    });\n\n    useEffect(() => {\n        parametersRef.current = props.parameters;\n    }, [props.parameters]);\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(parameterValue instanceof Date) {\n                parameterValue = dayjs(parameterValue).startOf('minute').toDate();\n            }\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    \n    return {\n        className: `talxis__baseControl__${name}`,\n        labels,\n        sizing,\n        theme: useControlTheme(context.fluentDesignLanguage),\n        onNotifyOutputChanged\n    }\n};\n"],"names":[],"mappings":";;;;;;;AAmBA;;;AAGG;AACU,MAAA,UAAU,GAAG,CAA4E,IAAY,EAAE,KAA0D,EAAE,mBAA0C,KAAiD;AACvQ,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,aAAa,GAAG,MAAM,CAAc,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,gBAAgB,CAAC;AAC5B,QAAA,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,UAAU;QAC3C,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,mBAAmB;AACtB,KAAA,CAAC,CAAC;IAEH,SAAS,CAAC,MAAK;AACX,QAAA,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC;AAC7C,KAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AAEvB,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;YACrD,IAAG,cAAc,YAAY,IAAI,EAAE;AAC/B,gBAAA,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,CAAC;AACrE,aAAA;AACD,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;IAEF,OAAO;QACH,SAAS,EAAE,CAAwB,qBAAA,EAAA,IAAI,CAAE,CAAA;QACzC,MAAM;QACN,MAAM;AACN,QAAA,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,oBAAoB,CAAC;QACpD,qBAAqB;KACxB,CAAA;AACL;;;;"}

package/dist/hooks/useControlSizing.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="@types/powerapps-component-framework" />
+/// <reference types="powerapps-component-framework" />
 export declare const useControlSizing: (mode: ComponentFramework.Mode) => {
     height?: number;
     width?: number;

package/dist/hooks/useEventEmitter.d.ts

@@ -0,0 +1,2 @@
+import { IEventEmitter } from "@talxis/client-libraries";
+export declare const useEventEmitter: <T extends { [K in keyof T]: (...args: any[]) => any; }>(emitter: IEventEmitter<T>, event: keyof T, callback: T[keyof T]) => void;

package/dist/hooks/useEventEmitter.js

@@ -0,0 +1,18 @@
+import { useRef, useCallback, useEffect } from 'react';
+
+const useEventEmitter = (emitter, event, callback) => {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    const memoizedCallback = useCallback((...args) => {
+        callbackRef.current(...args);
+    }, []);
+    useEffect(() => {
+        emitter.addEventListener(event, memoizedCallback);
+        return () => {
+            emitter.removeEventListener(event, memoizedCallback);
+        };
+    }, []);
+};
+
+export { useEventEmitter };
+//# sourceMappingURL=useEventEmitter.js.map

package/dist/hooks/useEventEmitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventEmitter.js","sources":["../../src/hooks/useEventEmitter.ts"],"sourcesContent":["import { IEventEmitter } from \"@talxis/client-libraries\";\nimport { useCallback, useEffect, useRef } from \"react\";\n\nexport const useEventEmitter = <T extends { [K in keyof T]: (...args: any[]) => any }>(emitter: IEventEmitter<T>, event: keyof T, callback: T[keyof T]) => {\n    const callbackRef = useRef(callback);\n    callbackRef.current = callback;\n\n    const memoizedCallback = useCallback((...args) => {\n        callbackRef.current(...args);\n    }, []);\n\n    useEffect(() => {\n        emitter.addEventListener(event, memoizedCallback as T[keyof T]);\n        return () => {\n            emitter.removeEventListener(event, memoizedCallback as T[keyof T]);\n        };\n    }, []);\n};"],"names":[],"mappings":";;AAGa,MAAA,eAAe,GAAG,CAAwD,OAAyB,EAAE,KAAc,EAAE,QAAoB,KAAI;AACtJ,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AACrC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,GAAG,IAAI,KAAI;AAC7C,QAAA,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;KAChC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE,gBAA8B,CAAC,CAAC;AAChE,QAAA,OAAO,MAAK;AACR,YAAA,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,gBAA8B,CAAC,CAAC;AACvE,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;AACX;;;;"}

package/dist/hooks/useInputBasedControl.js

@@ -6,7 +6,7 @@ const useInputBasedControl = (name, props, options) => {
     const rawValue = props.parameters.value.raw;
     const [value, setValue] = useState(formatter?.(rawValue) ?? rawValue);
     const valueRef = useRef(rawValue);
-    const { labels, sizing, theme, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);
+    const { labels, sizing, theme, className, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);
     useEffect(() => {
         const formattedValue = formatter?.(rawValue);
         setValue(formattedValue ?? rawValue);
@@ -23,6 +23,7 @@ const useInputBasedControl = (name, props, options) => {
         };
     }, []);
     return {
+        className: className,
         value,
         labels,
         sizing,

package/dist/hooks/useInputBasedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInputBasedControl.js","sources":["../../src/hooks/useInputBasedControl.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { IControl, IOutputs } from \"../interfaces/context\";\nimport { IControlController, useControl } from \"./useControl\";\nimport { IInputParameters } from \"../interfaces/parameters\";\nimport { IDefaultTranslations } from \"./useControlLabels\";\n\n/**\n * Description\n * @param {any} value:any\n * @returns {any}\n */\ninterface IControlOptions {\n    defaultTranslations?: IDefaultTranslations;\n    /**\n     * Formatting function that will format the bound value every time a new one comes from the props.\n     */\n    formatter?: (value: any) => any,\n    valueExtractor?: (value: any) => any\n}\n\n/**\n * Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.\n * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,\n * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should\n * be triggered when the user looses focus on the component (`onBlur` event).\n * @returns {[]} The hook returns an array with three props. First `value` prop is a value that will will always be in sync with the value that comes from the `value` parameter. \n * Use this for displaying the up-to-date value to the user.\n * Second prop contains the translations for this component.\n * \n * Third prop is a method that can be used to change the current value. The new value will get propagated to the `value` variable returned from this hook. This method wont propagate the value to the framework.\n * \n * The last prop is a method that will notify the framework that you wish to write changes.  \n * The method will notify the framework only if the provided output differs from the current inputs.\n */\n\ninterface IInputBasedControlController<TValue, TTranslations, TOutputs> extends IControlController<TTranslations, TOutputs> {\n    value: TValue,\n    setValue: (value: TValue) => void\n}\n\nexport const useInputBasedControl = <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, options?: IControlOptions): IInputBasedControlController<TValue, TTranslations, TOutputs> => {\n    const { formatter, valueExtractor } = { ...options };\n    const rawValue = props.parameters.value.raw;\n    const [value, setValue] = useState<TValue>(formatter?.(rawValue) ?? rawValue);\n    const valueRef = useRef<TValue>(rawValue);\n    const { labels, sizing, theme, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);\n\n    useEffect(() => {\n        const formattedValue = formatter?.(rawValue);\n        setValue(formattedValue ?? rawValue);\n        //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);\n    }, [rawValue]);\n\n    useEffect(() => {\n        valueRef.current = value;\n    }, [value]);\n\n    useEffect(() => {\n        return () => {\n            onNotifyOutputChanged({\n                value: valueExtractor?.(valueRef.current) ?? valueRef.current\n            } as any);\n        };\n    }, []);\n    return {\n        value,\n        labels,\n        sizing,\n        theme,\n        onNotifyOutputChanged,\n        setValue\n    }\n};"],"names":[],"mappings":";;;AAwCa,MAAA,oBAAoB,GAAG,CAAyF,IAAY,EAAE,KAA0D,EAAE,OAAyB,KAAmE;IAC/R,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC;AAC5C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,SAAS,GAAG,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAS,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC;IAE/G,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAC7C,QAAA,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,CAAC;;AAEzC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;AACR,YAAA,qBAAqB,CAAC;gBAClB,KAAK,EAAE,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO;AACzD,aAAA,CAAC,CAAC;AACd,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;IACP,OAAO;QACH,KAAK;QACL,MAAM;QACN,MAAM;QACN,KAAK;QACL,qBAAqB;QACrB,QAAQ;KACX,CAAA;AACL;;;;"}
+{"version":3,"file":"useInputBasedControl.js","sources":["../../src/hooks/useInputBasedControl.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { IControl, IOutputs } from \"../interfaces/context\";\nimport { IControlController, useControl } from \"./useControl\";\nimport { IInputParameters } from \"../interfaces/parameters\";\nimport { IDefaultTranslations } from \"./useControlLabels\";\n\n/**\n * Description\n * @param {any} value:any\n * @returns {any}\n */\ninterface IControlOptions {\n    defaultTranslations?: IDefaultTranslations;\n    /**\n     * Formatting function that will format the bound value every time a new one comes from the props.\n     */\n    formatter?: (value: any) => any,\n    valueExtractor?: (value: any) => any\n}\n\n/**\n * Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.\n * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,\n * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should\n * be triggered when the user looses focus on the component (`onBlur` event).\n * @returns {[]} The hook returns an array with three props. First `value` prop is a value that will will always be in sync with the value that comes from the `value` parameter. \n * Use this for displaying the up-to-date value to the user.\n * Second prop contains the translations for this component.\n * \n * Third prop is a method that can be used to change the current value. The new value will get propagated to the `value` variable returned from this hook. This method wont propagate the value to the framework.\n * \n * The last prop is a method that will notify the framework that you wish to write changes.  \n * The method will notify the framework only if the provided output differs from the current inputs.\n */\n\ninterface IInputBasedControlController<TValue, TTranslations, TOutputs> extends IControlController<TTranslations, TOutputs> {\n    value: TValue,\n    setValue: (value: TValue) => void\n}\n\nexport const useInputBasedControl = <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, options?: IControlOptions): IInputBasedControlController<TValue, TTranslations, TOutputs> => {\n    const { formatter, valueExtractor } = { ...options };\n    const rawValue = props.parameters.value.raw;\n    const [value, setValue] = useState<TValue>(formatter?.(rawValue) ?? rawValue);\n    const valueRef = useRef<TValue>(rawValue);\n    const { labels, sizing, theme, className, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);\n\n    useEffect(() => {\n        const formattedValue = formatter?.(rawValue);\n        setValue(formattedValue ?? rawValue);\n        //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);\n    }, [rawValue]);\n\n    useEffect(() => {\n        valueRef.current = value;\n    }, [value]);\n\n    useEffect(() => {\n        return () => {\n            onNotifyOutputChanged({\n                value: valueExtractor?.(valueRef.current) ?? valueRef.current\n            } as any);\n        };\n    }, []);\n    return {\n        className: className,\n        value,\n        labels,\n        sizing,\n        theme,\n        onNotifyOutputChanged,\n        setValue\n    }\n};"],"names":[],"mappings":";;;AAwCa,MAAA,oBAAoB,GAAG,CAAyF,IAAY,EAAE,KAA0D,EAAE,OAAyB,KAAmE;IAC/R,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC;AAC5C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,SAAS,GAAG,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAS,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,qBAAqB,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC;IAE1H,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAC7C,QAAA,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,CAAC;;AAEzC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;AACR,YAAA,qBAAqB,CAAC;gBAClB,KAAK,EAAE,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO;AACzD,aAAA,CAAC,CAAC;AACd,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;IACP,OAAO;AACH,QAAA,SAAS,EAAE,SAAS;QACpB,KAAK;QACL,MAAM;QACN,MAAM;QACN,KAAK;QACL,qBAAqB;QACrB,QAAQ;KACX,CAAA;AACL;;;;"}