@talxis/base-controls 1.2406.12 → 1.2406.13

package/dist/components/Lookup/Lookup.js

@@ -1 +1,14 @@
-export{L as Lookup}from"../../Lookup-85a4c52d.js";import"react/jsx-runtime";import"react";import"@fluentui/react";import"@talxis/react-components/dist/components/TagPicker";import"../../hooks/useMouseOver.js";import"../../hooks/useFocusIn.js";import"../../hooks/useComponentSizing.js";import"../../hooks/useComponent.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"@fluentui/react/lib/Text";import"@fluentui/react/lib/components/Button/CommandBarButton/CommandBarButton";
+export { L as Lookup } from '../../Lookup-85a4c52d.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@fluentui/react';
+import '@talxis/react-components/dist/components/TagPicker';
+import '../../hooks/useMouseOver.js';
+import '../../hooks/useFocusIn.js';
+import '../../hooks/useComponentSizing.js';
+import '../../hooks/useComponent.js';
+import 'fast-deep-equal/es6';
+import 'merge-anything';
+import 'liquidjs';
+import '@fluentui/react/lib/Text';
+import '@fluentui/react/lib/components/Button/CommandBarButton/CommandBarButton';

package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js

@@ -1 +1,72 @@
-import{jsx as e}from"react/jsx-runtime";import{useComponent as o}from"../../hooks/useComponent.js";import{ComboBox as t}from"@talxis/react-components/dist/components/ComboBox";import{useRef as r,useEffect as n}from"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useComponentSizing.js";const i=i=>{var l,a;const{sizing:s,onNotifyOutputChanged:u}=o("MultiSelectOptionSet",i),m=i.parameters,d=m.value,p=r(null),{Options:c}=m.value.attributes,v=i.context,g=c.map((e=>({key:e.Value.toString(),text:e.Label}))),h=e=>{if(!e)return void u({value:void 0});const o=e.key.toString(),t=new Set(d.raw||[]);e.selected?t.add(+o):t.delete(+o);const r=Array.from(t);u({value:r.map((e=>+e))})};return n((()=>{var e,o;(null===(e=m.AutoFocus)||void 0===e?void 0:e.raw)&&(null===(o=p.current)||void 0===o||o.focus(!0))}),[]),e(t,{componentRef:p,borderless:!1===(null===(l=m.EnableBorder)||void 0===l?void 0:l.raw),options:g,allowFreeInput:!0,multiSelect:!0,autoComplete:"on",autofill:!0===(null===(a=m.AutoFocus)||void 0===a?void 0:a.raw)?{autoFocus:!0}:void 0,readOnly:v.mode.isControlDisabled,errorMessage:d.errorMessage,selectedKey:d.raw?d.raw.map((e=>e.toString())):[-1],useComboBoxAsMenuWidth:!0,styles:{root:{height:s.height,width:s.width,display:"flex",alignItems:"center"},callout:{maxHeight:"300px !important"}},deleteButtonProps:{key:"delete",showOnlyOnHover:!1,iconProps:{iconName:"Delete"},onClick:(e,o)=>{h(null)}},onChange:(e,o)=>h(o)})};export{i as MultiSelectOptionSet};
+import { jsx } from 'react/jsx-runtime';
+import { useComponent } from '../../hooks/useComponent.js';
+import { ComboBox } from '@talxis/react-components/dist/components/ComboBox';
+import { useRef, useEffect } from 'react';
+import 'fast-deep-equal/es6';
+import 'merge-anything';
+import 'liquidjs';
+import '../../hooks/useComponentSizing.js';
+
+const MultiSelectOptionSet = (props) => {
+    var _a, _b;
+    const { sizing, onNotifyOutputChanged } = useComponent('MultiSelectOptionSet', props);
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const componentRef = useRef(null);
+    const { Options } = parameters.value.attributes;
+    const context = props.context;
+    const comboBoxOptions = Options.map(option => ({
+        key: option.Value.toString(),
+        text: option.Label,
+    }));
+    const handleChange = (option) => {
+        if (!option) {
+            onNotifyOutputChanged({
+                value: undefined
+            });
+            return;
+        }
+        const optionKey = option.key.toString();
+        const updatedSelectedKeys = new Set(boundValue.raw || []);
+        if (option.selected) {
+            updatedSelectedKeys.add(+optionKey);
+        }
+        else {
+            updatedSelectedKeys.delete(+optionKey);
+        }
+        const updatedSelectedKeysArray = Array.from(updatedSelectedKeys);
+        onNotifyOutputChanged({
+            value: updatedSelectedKeysArray.map(key => +key)
+        });
+    };
+    useEffect(() => {
+        var _a, _b;
+        if ((_a = parameters.AutoFocus) === null || _a === void 0 ? void 0 : _a.raw) {
+            (_b = componentRef.current) === null || _b === void 0 ? void 0 : _b.focus(true);
+        }
+    }, []);
+    return jsx(ComboBox, { componentRef: componentRef, borderless: ((_a = parameters.EnableBorder) === null || _a === void 0 ? void 0 : _a.raw) === false, options: comboBoxOptions, allowFreeInput: true, multiSelect: true, autoComplete: "on", autofill: ((_b = parameters.AutoFocus) === null || _b === void 0 ? void 0 : _b.raw) === true ? {
+            autoFocus: true
+        } : undefined, readOnly: context.mode.isControlDisabled, errorMessage: boundValue.errorMessage, selectedKey: boundValue.raw ? boundValue.raw.map(key => key.toString()) : [-1], useComboBoxAsMenuWidth: true, styles: {
+            root: {
+                height: sizing.height,
+                width: sizing.width,
+                display: 'flex',
+                alignItems: 'center',
+            },
+            callout: {
+                maxHeight: '300px !important'
+            }
+        }, deleteButtonProps: {
+            key: 'delete',
+            showOnlyOnHover: false,
+            iconProps: {
+                iconName: 'Delete'
+            },
+            onClick: (e, value) => {
+                handleChange(null);
+            }
+        }, onChange: (e, option) => handleChange(option) });
+};
+
+export { MultiSelectOptionSet };

package/dist/components/OptionSet/OptionSet.js

@@ -1 +1,59 @@
-import{jsx as e}from"react/jsx-runtime";import{useComponent as o}from"../../hooks/useComponent.js";import{ComboBox as t}from"@talxis/react-components/dist/components/ComboBox";import{useRef as r,useEffect as n}from"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useComponentSizing.js";const i=i=>{var s,l,a;const{sizing:m,onNotifyOutputChanged:u}=o("OptionSet",i),p=r(null),d=i.parameters,c=d.value,{Options:g}=d.value.attributes,h=i.context,v=g.map((e=>({key:e.Value.toString(),text:e.Label}))),x=e=>{let o;e&&(o=parseInt(e.key)),u({value:o})};return n((()=>{var e,o;(null===(e=d.AutoFocus)||void 0===e?void 0:e.raw)&&(null===(o=p.current)||void 0===o||o.focus(!0))}),[]),e(t,{componentRef:p,borderless:!1===(null===(s=d.EnableBorder)||void 0===s?void 0:s.raw),options:v,readOnly:h.mode.isControlDisabled,selectedKey:null!==(a=null===(l=c.raw)||void 0===l?void 0:l.toString())&&void 0!==a?a:-1,errorMessage:c.errorMessage,useComboBoxAsMenuWidth:!0,styles:{root:{height:m.height,width:m.width,display:"flex",alignItems:"center"},callout:{maxHeight:"300px !important"}},deleteButtonProps:{key:"delete",showOnlyOnHover:!0,iconProps:{iconName:"Delete"},onClick:(e,o)=>{x(null)}},onChange:(e,o)=>x(o)})};export{i as OptionSet};
+import { jsx } from 'react/jsx-runtime';
+import { useComponent } from '../../hooks/useComponent.js';
+import { ComboBox } from '@talxis/react-components/dist/components/ComboBox';
+import { useRef, useEffect } from 'react';
+import 'fast-deep-equal/es6';
+import 'merge-anything';
+import 'liquidjs';
+import '../../hooks/useComponentSizing.js';
+
+const OptionSet = (props) => {
+    var _a, _b, _c;
+    const { sizing, onNotifyOutputChanged } = useComponent('OptionSet', props);
+    const componentRef = useRef(null);
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const { Options } = parameters.value.attributes;
+    const context = props.context;
+    const comboBoxOptions = Options.map(option => ({
+        key: option.Value.toString(),
+        text: option.Label,
+    }));
+    const handleChange = (option) => {
+        let value = undefined;
+        if (option) {
+            value = parseInt(option.key);
+        }
+        onNotifyOutputChanged({
+            value: value
+        });
+    };
+    useEffect(() => {
+        var _a, _b;
+        if ((_a = parameters.AutoFocus) === null || _a === void 0 ? void 0 : _a.raw) {
+            (_b = componentRef.current) === null || _b === void 0 ? void 0 : _b.focus(true);
+        }
+    }, []);
+    return jsx(ComboBox, { componentRef: componentRef, borderless: ((_a = parameters.EnableBorder) === null || _a === void 0 ? void 0 : _a.raw) === false, options: comboBoxOptions, readOnly: context.mode.isControlDisabled, 
+        //the defaultValue comes in the raw prop directly, no need to look at it
+        selectedKey: (_c = (_b = boundValue.raw) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : -1, errorMessage: boundValue.errorMessage, useComboBoxAsMenuWidth: true, styles: {
+            root: {
+                height: sizing.height,
+                width: sizing.width,
+                display: 'flex',
+                alignItems: 'center',
+            },
+            callout: {
+                maxHeight: '300px !important'
+            }
+        }, deleteButtonProps: {
+            key: 'delete',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Delete'
+            },
+            onClick: (e, value) => { handleChange(null); }
+        }, onChange: (e, option) => handleChange(option) });
+};
+
+export { OptionSet };

package/dist/components/TextField/TextField.js

@@ -1 +1,86 @@
-import{jsx as e}from"react/jsx-runtime";import{TextField as o}from"@talxis/react-components/dist/components/TextField";import{useRef as t,useState as r,useEffect as i}from"react";import{useInputBasedComponent as n}from"../../hooks/useInputBasedComponent.js";import"../../hooks/useComponent.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useComponentSizing.js";const l=l=>{var s,u,a,d,v,p,c;const m=l.context,h=l.parameters,y=h.value,g=t(null),{value:w,sizing:b,setValue:C,onNotifyOutputChanged:f}=n("TextField",l),[x]=((e,o,n)=>{const l=t(!1),[s,u]=r(o||(n?80:void 0)),a=t(!0);return i((()=>{var o;if(!n)return;const t=new ResizeObserver((()=>{a.current||l.current?a.current=!1:(l.current=!0,u(void 0))})),r=null===(o=e.current)||void 0===o?void 0:o.querySelector("textarea");return s&&r.setAttribute("style",`height: ${s}px`),t.observe(r),()=>{t.disconnect()}}),[]),[s]})(g,b.height,null===(s=l.parameters.IsMultiLine)||void 0===s?void 0:s.raw);return e(o,{readOnly:m.mode.isControlDisabled,multiline:null===(u=h.IsMultiLine)||void 0===u?void 0:u.raw,resizable:null===(a=h.isResizable)||void 0===a?void 0:a.raw,autoFocus:null===(d=h.AutoFocus)||void 0===d?void 0:d.raw,elementRef:g,styles:{fieldGroup:{height:x,width:m.mode.allocatedWidth||void 0}},borderless:!1===(null===(v=h.EnableBorder)||void 0===v?void 0:v.raw),errorMessage:y.errorMessage,deleteButtonProps:!0===(null===(p=h.EnableDeleteButton)||void 0===p?void 0:p.raw)?{key:"delete",showOnlyOnHover:!0,iconProps:{iconName:"Delete"},onClick:()=>C(void 0)}:void 0,clickToCopyProps:!0===(null===(c=h.EnableCopyButton)||void 0===c?void 0:c.raw)?{key:"copy",showOnlyOnHover:!0,iconProps:{iconName:"Copy"}}:void 0,value:null!=w?w:"",onBlur:()=>{f({value:null!=w?w:void 0})},onChange:(e,o)=>{C(o)}})};export{l as TextField};
+import { jsx } from 'react/jsx-runtime';
+import { TextField as TextField$1 } from '@talxis/react-components/dist/components/TextField';
+import { useRef, useState, useEffect } from 'react';
+import { useInputBasedComponent } from '../../hooks/useInputBasedComponent.js';
+import '../../hooks/useComponent.js';
+import 'fast-deep-equal/es6';
+import 'merge-anything';
+import 'liquidjs';
+import '../../hooks/useComponentSizing.js';
+
+const useTextFieldHeight = (ref, initialHeight, isMultiline) => {
+    const getInitialHeight = () => {
+        if (initialHeight) {
+            return initialHeight;
+        }
+        if (isMultiline) {
+            return 80;
+        }
+        return undefined;
+    };
+    const hasBeenResizedRef = useRef(false);
+    const [height, setHeight] = useState(getInitialHeight());
+    const firstRenderRef = useRef(true);
+    useEffect(() => {
+        var _a;
+        if (!isMultiline) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            if (firstRenderRef.current || hasBeenResizedRef.current) {
+                firstRenderRef.current = false;
+                return;
+            }
+            hasBeenResizedRef.current = true;
+            setHeight(undefined);
+        });
+        const textarea = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('textarea');
+        if (height) {
+            textarea.setAttribute('style', `height: ${height}px`);
+        }
+        resizeObserver.observe(textarea);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return [height];
+};
+
+const TextField = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const context = props.context;
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const ref = useRef(null);
+    const { value, sizing, setValue, onNotifyOutputChanged } = useInputBasedComponent('TextField', props);
+    const [height] = useTextFieldHeight(ref, sizing.height, (_a = props.parameters.IsMultiLine) === null || _a === void 0 ? void 0 : _a.raw);
+    return (jsx(TextField$1, { readOnly: context.mode.isControlDisabled, 
+        //TODO: should be inherited by the type, eg TextArea = multiline
+        multiline: (_b = parameters.IsMultiLine) === null || _b === void 0 ? void 0 : _b.raw, resizable: (_c = parameters.isResizable) === null || _c === void 0 ? void 0 : _c.raw, autoFocus: (_d = parameters.AutoFocus) === null || _d === void 0 ? void 0 : _d.raw, elementRef: ref, styles: {
+            fieldGroup: {
+                height: height,
+                width: context.mode.allocatedWidth || undefined
+            }
+        }, borderless: ((_e = parameters.EnableBorder) === null || _e === void 0 ? void 0 : _e.raw) === false, errorMessage: boundValue.errorMessage, deleteButtonProps: ((_f = parameters.EnableDeleteButton) === null || _f === void 0 ? void 0 : _f.raw) === true ? {
+            key: 'delete',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Delete'
+            },
+            onClick: () => setValue(undefined)
+        } : undefined, clickToCopyProps: ((_g = parameters.EnableCopyButton) === null || _g === void 0 ? void 0 : _g.raw) === true ? {
+            key: 'copy',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Copy'
+            }
+        } : undefined, value: value !== null && value !== void 0 ? value : "", onBlur: () => {
+            onNotifyOutputChanged({
+                value: value !== null && value !== void 0 ? value : undefined
+            });
+        }, onChange: (e, value) => {
+            setValue(value);
+        } }));
+};
+
+export { TextField };

package/dist/components/TwoOptions/TwoOptions.js

@@ -1 +1,40 @@
-import{jsx as o}from"react/jsx-runtime";import{Toggle as t}from"@fluentui/react";import{useComponent as e}from"../../hooks/useComponent.js";import{useRef as i,useEffect as n}from"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"../../hooks/useComponentSizing.js";const r=r=>{var a,s;const u=r.parameters,l=u.value,m=l.attributes.Options,{sizing:p,onNotifyOutputChanged:c}=e("TwoOptions",r);r.context;const d=i(null);n((()=>{var o;!0===(null===(o=u.AutoFocus)||void 0===o?void 0:o.raw)&&d.current.focus()}),[]);return o(t,{styles:{root:{height:p.height,width:p.width},container:{alignItems:"center"}},checked:l.raw,componentRef:d,inlineLabel:!0,onText:(null===(a=m.find((o=>1===o.Value)))||void 0===a?void 0:a.Label)||"Yes",offText:(null===(s=m.find((o=>0===o.Value)))||void 0===s?void 0:s.Label)||"No",onChange:(o,t)=>(o=>{c({value:o})})(t)})};export{r as TwoOptions};
+import { jsx } from 'react/jsx-runtime';
+import { Toggle } from '@fluentui/react';
+import { useComponent } from '../../hooks/useComponent.js';
+import { useRef, useEffect } from 'react';
+import 'fast-deep-equal/es6';
+import 'merge-anything';
+import 'liquidjs';
+import '../../hooks/useComponentSizing.js';
+
+const TwoOptions = (props) => {
+    var _a, _b;
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const options = boundValue.attributes.Options;
+    const { sizing, onNotifyOutputChanged } = useComponent('TwoOptions', props);
+    props.context;
+    const componentRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (((_a = parameters.AutoFocus) === null || _a === void 0 ? void 0 : _a.raw) === true) {
+            componentRef.current.focus();
+        }
+    }, []);
+    const handleChange = (value) => {
+        onNotifyOutputChanged({
+            value: value
+        });
+    };
+    return jsx(Toggle, { styles: {
+            root: {
+                height: sizing.height,
+                width: sizing.width
+            },
+            container: {
+                alignItems: 'center'
+            }
+        }, checked: boundValue.raw, componentRef: componentRef, inlineLabel: true, onText: ((_a = options.find(option => option.Value === 1)) === null || _a === void 0 ? void 0 : _a.Label) || 'Yes', offText: ((_b = options.find(option => option.Value === 0)) === null || _b === void 0 ? void 0 : _b.Label) || 'No', onChange: (e, value) => handleChange(value) });
+};
+
+export { TwoOptions };

package/dist/hooks/index.js

@@ -1 +1,6 @@
-export{useComponent}from"./useComponent.js";import"react";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"./useComponentSizing.js";
+export { useComponent } from './useComponent.js';
+import 'react';
+import 'fast-deep-equal/es6';
+import 'merge-anything';
+import 'liquidjs';
+import './useComponentSizing.js';

package/dist/hooks/useComponent.js

@@ -1 +1,83 @@
-import{useRef as e,useMemo as n,useEffect as t}from"react";import o from"fast-deep-equal/es6";import{merge as r}from"merge-anything";import{Liquid as a}from"liquidjs";import{useComponentSizing as i}from"./useComponentSizing.js";const s=(s,l,f)=>{const u=e(l.parameters),c=i(l.context.mode),d=n((()=>new a),[]),m=n((()=>{var e;const n=r(null!=f?f:{},null!==(e=l.translations)&&void 0!==e?e:{});return new Proxy(n,{get:(e,t)=>e=>p(t,n,e)})}),[]);t((()=>{u.current=l.parameters}),[l.parameters]);const p=(e,n,t)=>{const o=e=>"string"==typeof e?e:JSON.stringify(e),r=n[e];if(!r)return console.error(`Translation for the ${e} label of the ${s} component has not been defined!`),e;if("string"==typeof r||Array.isArray(r))return o(r);let a=r[l.context.userSettings.languageId];return a||(console.info(`Translation for the ${e} label of the ${s} component has not been found. Using default Czech label instead.`),a=r[1029]),a||(console.error(`Translation for the ${e} label of the ${s} component does not exists neither for Czech language and current LCID.`),a=e),d.parseAndRenderSync(o(a),t)};return{labels:m,sizing:c,onNotifyOutputChanged:e=>{var n,t;let r=!1;for(let[t,a]of Object.entries(e)){const e=null===(n=u.current[t])||void 0===n?void 0:n.raw;if(!o(e,a)){if(""===a&&(a=null),e==a)continue;r=!0;break}}r&&(null===(t=l.onNotifyOutputChanged)||void 0===t||t.call(l,e))}}};export{s as useComponent};
+import { useRef, useMemo, useEffect } from 'react';
+import equal from 'fast-deep-equal/es6';
+import { merge } from 'merge-anything';
+import { Liquid } from 'liquidjs';
+import { useComponentSizing } from './useComponentSizing.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 useComponent = (name, props, defaultTranslations) => {
+    const parametersRef = useRef(props.parameters);
+    const sizing = useComponentSizing(props.context.mode);
+    const liquid = useMemo(() => new Liquid(), []);
+    const labels = useMemo(() => {
+        var _a;
+        const mergedTranslations = merge(defaultTranslations !== null && defaultTranslations !== void 0 ? defaultTranslations : {}, (_a = props.translations) !== null && _a !== void 0 ? _a : {});
+        return new Proxy(mergedTranslations, {
+            get(target, key) {
+                return (variables) => getLabel(key, mergedTranslations, variables);
+            }
+        });
+    }, []);
+    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);
+        };
+        const translation = translations[key];
+        if (!translation) {
+            console.error(`Translation for the ${key} label of the ${name} component 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} component has not been found. Using default Czech label instead.`);
+            label = translation[1029];
+        }
+        if (!label) {
+            console.error(`Translation for the ${key} label of the ${name} component does not exists neither for Czech language and current LCID.`);
+            label = key;
+        }
+        return liquid.parseAndRenderSync(strigify(label), variables);
+    };
+    const onNotifyOutputChanged = (outputs) => {
+        var _a, _b;
+        let isDirty = false;
+        for (let [key, outputValue] of Object.entries(outputs)) {
+            const parameterValue = (_a = parametersRef.current[key]) === null || _a === void 0 ? void 0 : _a.raw;
+            if (!equal(parameterValue, outputValue)) {
+                if (outputValue === "") {
+                    outputValue = null;
+                }
+                // handles undefined X null
+                if (parameterValue == outputValue) {
+                    continue;
+                }
+                isDirty = true;
+                break;
+            }
+        }
+        if (!isDirty) {
+            return;
+        }
+        //console.log(`Change detected, triggering notifyOutputChanged on component ${name}.`);
+        (_b = props.onNotifyOutputChanged) === null || _b === void 0 ? void 0 : _b.call(props, outputs);
+    };
+    return {
+        labels,
+        sizing,
+        onNotifyOutputChanged
+    };
+};
+
+export { useComponent };

package/dist/hooks/useComponentSizing.js

@@ -1 +1,14 @@
-const t=t=>{const e=t=>{if(t&&-1!==t)return t};return{height:e(t.allocatedHeight),width:e(t.allocatedWidth)}};export{t as useComponentSizing};
+const useComponentSizing = (mode) => {
+    const getAllocationSize = (allocationSize) => {
+        if (!allocationSize || allocationSize === -1) {
+            return undefined;
+        }
+        return allocationSize;
+    };
+    return {
+        height: getAllocationSize(mode.allocatedHeight),
+        width: getAllocationSize(mode.allocatedWidth)
+    };
+};
+
+export { useComponentSizing };

package/dist/hooks/useFocusIn.js

@@ -1 +1,24 @@
-import{useState as e,useEffect as r}from"react";const n=n=>{const[t,o]=e(!1);return r((()=>{var e,r;const t=()=>{o(!0)},u=()=>{o(!1)};return null===(e=n.current)||void 0===e||e.addEventListener("focusin",t),null===(r=n.current)||void 0===r||r.addEventListener("focusout",u),()=>{var e,r;null===(e=n.current)||void 0===e||e.removeEventListener("focusin",t),null===(r=n.current)||void 0===r||r.removeEventListener("focusout",u)}}),[]),t};export{n as useFocusIn};
+import { useState, useEffect } from 'react';
+
+const useFocusIn = (ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    useEffect(() => {
+        var _a, _b;
+        const onFocus = () => {
+            setIsFocused(true);
+        };
+        const onBlur = () => {
+            setIsFocused(false);
+        };
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('focusin', onFocus);
+        (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener('focusout', onBlur);
+        return () => {
+            var _a, _b;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', onFocus);
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusout', onBlur);
+        };
+    }, []);
+    return isFocused;
+};
+
+export { useFocusIn };

package/dist/hooks/useInputBasedComponent.js

@@ -1 +1,42 @@
-import{useState as t,useRef as n,useEffect as e}from"react";import{useComponent as o}from"./useComponent.js";import"fast-deep-equal/es6";import"merge-anything";import"liquidjs";import"./useComponentSizing.js";const r=(r,l,u)=>{var a;const{formatter:i,valueExtractor:s}=Object.assign({},u),m=l.parameters.value.raw,[p,d]=t(null!==(a=null==i?void 0:i(m))&&void 0!==a?a:m),v=n(m),{labels:c,sizing:g,onNotifyOutputChanged:f}=o(r,l,null==u?void 0:u.defaultTranslations);return e((()=>{const t=null==i?void 0:i(m);d(null!=t?t:m)}),[m]),e((()=>{v.current=p}),[p]),e((()=>()=>{var t,n;!0===(null===(t=l.parameters.NotifyOutputChangedOnUnmount)||void 0===t?void 0:t.raw)&&f({value:null!==(n=null==s?void 0:s(v.current))&&void 0!==n?n:v.current})}),[]),{value:p,labels:c,sizing:g,onNotifyOutputChanged:f,setValue:d}};export{r as useInputBasedComponent};
+import { useState, useRef, useEffect } from 'react';
+import { useComponent } from './useComponent.js';
+import 'fast-deep-equal/es6';
+import 'merge-anything';
+import 'liquidjs';
+import './useComponentSizing.js';
+
+const useInputBasedComponent = (name, props, options) => {
+    var _a;
+    const { formatter, valueExtractor } = Object.assign({}, options);
+    const rawValue = props.parameters.value.raw;
+    const [value, setValue] = useState((_a = formatter === null || formatter === void 0 ? void 0 : formatter(rawValue)) !== null && _a !== void 0 ? _a : rawValue);
+    const valueRef = useRef(rawValue);
+    const { labels, sizing, onNotifyOutputChanged } = useComponent(name, props, options === null || options === void 0 ? void 0 : options.defaultTranslations);
+    useEffect(() => {
+        const formattedValue = formatter === null || formatter === void 0 ? void 0 : formatter(rawValue);
+        setValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : rawValue);
+        //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);
+    }, [rawValue]);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    useEffect(() => {
+        return () => {
+            var _a, _b;
+            if (((_a = props.parameters.NotifyOutputChangedOnUnmount) === null || _a === void 0 ? void 0 : _a.raw) === true) {
+                onNotifyOutputChanged({
+                    value: (_b = valueExtractor === null || valueExtractor === void 0 ? void 0 : valueExtractor(valueRef.current)) !== null && _b !== void 0 ? _b : valueRef.current
+                });
+            }
+        };
+    }, []);
+    return {
+        value,
+        labels,
+        sizing,
+        onNotifyOutputChanged,
+        setValue
+    };
+};
+
+export { useInputBasedComponent };

package/dist/hooks/useMouseOver.js

@@ -1 +1,24 @@
-import{useState as e,useEffect as r}from"react";const n=n=>{const[t,o]=e(!1);return r((()=>{var e,r;const t=()=>{o(!0)},u=()=>{o(!1)};return null===(e=n.current)||void 0===e||e.addEventListener("mouseenter",t),null===(r=n.current)||void 0===r||r.addEventListener("mouseleave",u),()=>{var e,r;null===(e=n.current)||void 0===e||e.removeEventListener("mouseenter",t),null===(r=n.current)||void 0===r||r.removeEventListener("mouseleave",u)}}),[]),t};export{n as useMouseOver};
+import { useState, useEffect } from 'react';
+
+const useMouseOver = (ref) => {
+    const [isMouseOver, setIsMouseOver] = useState(false);
+    useEffect(() => {
+        var _a, _b;
+        const onMouseEnter = () => {
+            setIsMouseOver(true);
+        };
+        const onMouseLeave = () => {
+            setIsMouseOver(false);
+        };
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', onMouseEnter);
+        (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            var _a, _b;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', onMouseEnter);
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, []);
+    return isMouseOver;
+};
+
+export { useMouseOver };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talxis/base-controls",
-  "version": "1.2406.12",
+  "version": "1.2406.13",
   "description": "Set of React components that natively work with Power Apps Component Framework API's",
   "main": "dist/index.js",
   "module": "dist/index.js",