@talxis/base-controls 1.2502.1 → 1.2503.2

package/dist/hooks/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

@@ -1,12 +1,6 @@
 import { IControl, IOutputs, IParameters } from "../interfaces";
 import { ITheme } from "@talxis/react-components";
-export type ITranslation<T> = {
-    [Property in keyof Required<T>]: (variables?: any) => string;
-};
-export interface IDefaultTranslations {
-    [LCID: number]: string | string[];
-    [key: string]: any;
-}
+import { IDefaultTranslations, ITranslation } from "./useControlLabels";
 export interface IControlController<TTranslations, TOutputs> {
     labels: Required<ITranslation<TTranslations>>;
     sizing: {

package/dist/hooks/useControl.js

@@ -1,61 +1,33 @@
-import { useRef, useMemo, useEffect } from 'react';
-import { merge } from 'merge-anything';
-import { Liquid } from 'liquidjs';
+import { useRef, useEffect } from 'react';
 import { useControlTheme } from '../utils/theme/hooks/useControlTheme.js';
 import { useControlSizing } from './useControlSizing.js';
 import deepEqual from 'fast-deep-equal/es6';
+import dayjs from 'dayjs';
+import { useControlLabels } from './useControlLabels.js';
 
 /**
  * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
  * 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.
  */
 const useControl = (name, props, defaultTranslations) => {
+    const context = props.context;
     const parametersRef = useRef(props.parameters);
     const sizing = useControlSizing(props.context.mode);
-    const context = props.context;
-    const liquid = useMemo(() => new Liquid(), []);
-    const labels = useMemo(() => {
-        const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {});
-        return new Proxy(mergedTranslations, {
-            get(target, key) {
-                return (variables) => getLabel(key, mergedTranslations, variables);
-            }
-        });
-    }, []);
+    const labels = useControlLabels({
+        languageId: context.userSettings.languageId,
+        translations: props.translations,
+        defaultTranslations
+    });
     useEffect(() => {
         parametersRef.current = props.parameters;
     }, [props.parameters]);
-    const getLabel = (key, translations, variables) => {
-        const strigify = (value) => {
-            if (typeof value === 'string') {
-                return value;
-            }
-            return JSON.stringify(value);
-        };
-        //@ts-ignore
-        const translation = translations[key];
-        if (!translation) {
-            console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);
-            return key;
-        }
-        if (typeof translation === 'string' || Array.isArray(translation)) {
-            return strigify(translation);
-        }
-        let label = translation[props.context.userSettings.languageId];
-        if (!label) {
-            console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);
-            label = translation[1029];
-        }
-        if (!label) {
-            console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);
-            label = key;
-        }
-        return liquid.parseAndRenderSync(strigify(label), variables);
-    };
     const onNotifyOutputChanged = (outputs) => {
         let isDirty = false;
         for (let [key, outputValue] of Object.entries(outputs)) {
             let parameterValue = parametersRef.current[key]?.raw;
+            if (parameterValue instanceof Date) {
+                parameterValue = dayjs(parameterValue).startOf('minute').toDate();
+            }
             if (!deepEqual(parameterValue, outputValue)) {
                 if (outputValue === null) {
                     outputValue = undefined;

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 \"../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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"}
+{"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;;;;"}

package/dist/hooks/useControlLabels.d.ts

@@ -0,0 +1,14 @@
+export type ITranslation<T> = {
+    [Property in keyof Required<T>]: (variables?: any) => string;
+};
+export interface IDefaultTranslations {
+    [LCID: number]: string | string[];
+    [key: string]: any;
+}
+interface ILabelsOptions<TTranslations> {
+    languageId: number;
+    translations?: TTranslations;
+    defaultTranslations?: IDefaultTranslations;
+}
+export declare const useControlLabels: <TTranslations>(options: ILabelsOptions<TTranslations>) => Required<ITranslation<TTranslations>>;
+export {};

package/dist/hooks/useControlLabels.js

@@ -0,0 +1,47 @@
+import { Liquid } from 'liquidjs';
+import { merge } from 'merge-anything';
+import { useMemo } from 'react';
+
+const useControlLabels = (options) => {
+    const { languageId, translations, defaultTranslations } = options;
+    const liquid = useMemo(() => new Liquid(), []);
+    const labels = useMemo(() => {
+        const mergedTranslations = merge(defaultTranslations ?? {}, translations ?? {});
+        return new Proxy(mergedTranslations, {
+            get(target, key) {
+                return (variables) => getLabel(key, mergedTranslations, variables);
+            }
+        });
+    }, []);
+    const getLabel = (key, translations, variables) => {
+        const strigify = (value) => {
+            if (typeof value === 'string') {
+                return value;
+            }
+            return JSON.stringify(value);
+        };
+        //@ts-ignore
+        const translation = translations[key];
+        if (!translation) {
+            console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);
+            return key;
+        }
+        if (typeof translation === 'string' || Array.isArray(translation)) {
+            return strigify(translation);
+        }
+        let label = translation[languageId];
+        if (!label) {
+            console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);
+            label = translation[1029];
+        }
+        if (!label) {
+            console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);
+            label = key;
+        }
+        return liquid.parseAndRenderSync(strigify(label), variables);
+    };
+    return labels;
+};
+
+export { useControlLabels };
+//# sourceMappingURL=useControlLabels.js.map

package/dist/hooks/useControlLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlLabels.js","sources":["../../src/hooks/useControlLabels.ts"],"sourcesContent":["import { Liquid } from \"liquidjs\";\nimport { merge } from \"merge-anything\";\nimport { useMemo } from \"react\";\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\ninterface ILabelsOptions<TTranslations> {\n    languageId: number;\n    translations?: TTranslations;\n    defaultTranslations?: IDefaultTranslations;\n}\nexport const useControlLabels = <TTranslations>(options: ILabelsOptions<TTranslations>): Required<ITranslation<TTranslations>>  => {\n    const { languageId, translations, defaultTranslations } = options;\n    const liquid = useMemo(() => new Liquid(), []);\n    const labels = useMemo(() => {\n        const mergedTranslations = merge(defaultTranslations ?? {}, 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    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[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    return labels;\n}"],"names":[],"mappings":";;;;AAkBa,MAAA,gBAAgB,GAAG,CAAgB,OAAsC,KAA4C;IAC9H,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,mBAAmB,EAAE,GAAG,OAAO,CAAC;AAClE,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;AAC/C,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;AACxB,QAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC,mBAAmB,IAAI,EAAE,EAAE,YAAY,IAAI,EAAE,CAAkB,CAAC;AACjG,QAAA,OAAO,IAAI,KAAK,CAAC,kBAAyB,EAAE;YACxC,GAAG,CAAC,MAAM,EAAE,GAAG,EAAA;AACX,gBAAA,OAAO,CAAC,SAAc,KAAK,QAAQ,CAAC,GAAa,EAAE,kBAAkB,EAAE,SAAS,CAAC,CAAA;aACpF;AACJ,SAAA,CAAQ,CAAC;KACb,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,YAA2B,EAAE,SAAe,KAAuB;AAC9F,QAAA,MAAM,QAAQ,GAAG,CAAC,KAAwB,KAAI;AAC1C,YAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,gBAAA,OAAO,KAAK,CAAC;AAChB,aAAA;AACD,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACjC,SAAC,CAAC;;AAEF,QAAA,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,CAAA,oBAAA,EAAuB,GAAG,CAAiB,cAAA,EAAA,IAAI,CAAgC,8BAAA,CAAA,CAAC,CAAC;AAC/F,YAAA,OAAO,GAAG,CAAC;AACd,SAAA;QACD,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;AAC/D,YAAA,OAAO,QAAQ,CAAC,WAAW,CAAC,CAAC;AAChC,SAAA;AACD,QAAA,IAAI,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,EAAE;YACR,OAAO,CAAC,IAAI,CAAC,CAAA,oBAAA,EAAuB,GAAG,CAAiB,cAAA,EAAA,IAAI,CAAiE,+DAAA,CAAA,CAAC,CAAC;AAC/H,YAAA,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;AAC7B,SAAA;QACD,IAAI,CAAC,KAAK,EAAE;YACR,OAAO,CAAC,KAAK,CAAC,CAAA,oBAAA,EAAuB,GAAG,CAAiB,cAAA,EAAA,IAAI,CAAuE,qEAAA,CAAA,CAAC,CAAC;YACtI,KAAK,GAAG,GAAG,CAAC;AACf,SAAA;QAED,OAAO,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AACjE,KAAC,CAAC;AACF,IAAA,OAAO,MAAM,CAAC;AAClB;;;;"}

package/dist/hooks/useInputBasedControl.d.ts

@@ -1,6 +1,7 @@
 import { IControl, IOutputs } from "../interfaces/context";
-import { IControlController, IDefaultTranslations } from "./useControl";
+import { IControlController } from "./useControl";
 import { IInputParameters } from "../interfaces/parameters";
+import { IDefaultTranslations } from "./useControlLabels";
 /**
  * Description
  * @param {any} value:any

package/dist/hooks/useInputBasedControl.js

@@ -17,11 +17,9 @@ const useInputBasedControl = (name, props, options) => {
     }, [value]);
     useEffect(() => {
         return () => {
-            if (props.parameters.NotifyOutputChangedOnUnmount?.raw === true) {
-                onNotifyOutputChanged({
-                    value: valueExtractor?.(valueRef.current) ?? valueRef.current
-                });
-            }
+            onNotifyOutputChanged({
+                value: valueExtractor?.(valueRef.current) ?? valueRef.current
+            });
         };
     }, []);
     return {

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, IDefaultTranslations, useControl } from \"./useControl\";\nimport React from 'react';\nimport { IInputParameters } from \"../interfaces/parameters\";\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            if(props.parameters.NotifyOutputChangedOnUnmount?.raw === true) {\n                onNotifyOutputChanged({\n                    value: valueExtractor?.(valueRef.current) ?? valueRef.current\n                } as any);\n            }\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,EAAC,SAAS,EAAE,cAAc,EAAC,GAAG,EAAC,GAAG,OAAO,EAAC,CAAC;IACjD,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,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAC,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC;IAE7G,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;YACR,IAAG,KAAK,CAAC,UAAU,CAAC,4BAA4B,EAAE,GAAG,KAAK,IAAI,EAAE;AAC5D,gBAAA,qBAAqB,CAAC;oBAClB,KAAK,EAAE,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO;AACzD,iBAAA,CAAC,CAAC;AACb,aAAA;AACL,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, 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;;;;"}

package/dist/hooks/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: <T>(value: T) => T | undefined;