@talxis/base-controls 0.0.1

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/useControlSizing.d.ts

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

package/dist/hooks/useControlSizing.js

@@ -0,0 +1,15 @@
+const useControlSizing = (mode) => {
+    const getAllocationSize = (allocationSize) => {
+        if (!allocationSize || allocationSize === -1) {
+            return undefined;
+        }
+        return allocationSize;
+    };
+    return {
+        height: getAllocationSize(mode.allocatedHeight),
+        width: getAllocationSize(mode.allocatedWidth)
+    };
+};
+
+export { useControlSizing };
+//# sourceMappingURL=useControlSizing.js.map

package/dist/hooks/useControlSizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlSizing.js","sources":["../../src/hooks/useControlSizing.ts"],"sourcesContent":["\nexport const useControlSizing = (mode: ComponentFramework.Mode): {\n    height?: number,\n    width?: number\n} => {\n    const getAllocationSize = (allocationSize?: number) => {\n        if(!allocationSize || allocationSize === -1) {\n            return undefined;\n        }\n        return allocationSize;\n    }\n    return {\n        height: getAllocationSize(mode.allocatedHeight),\n        width: getAllocationSize(mode.allocatedWidth)\n    }\n}"],"names":[],"mappings":"AACa,MAAA,gBAAgB,GAAG,CAAC,IAA6B,KAG1D;AACA,IAAA,MAAM,iBAAiB,GAAG,CAAC,cAAuB,KAAI;AAClD,QAAA,IAAG,CAAC,cAAc,IAAI,cAAc,KAAK,CAAC,CAAC,EAAE;AACzC,YAAA,OAAO,SAAS,CAAC;AACpB,SAAA;AACD,QAAA,OAAO,cAAc,CAAC;AAC1B,KAAC,CAAA;IACD,OAAO;AACH,QAAA,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC;AAC/C,QAAA,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC;KAChD,CAAA;AACL;;;;"}

package/dist/hooks/useFocusIn.d.ts

@@ -0,0 +1 @@
+export declare const useFocusIn: (ref: React.RefObject<HTMLElement>, delay?: number) => boolean;

package/dist/hooks/useFocusIn.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+//triggering the focus state immediately can cause issues in some cases => delay can prevent them
+const useFocusIn = (ref, delay) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const triggerIsFocused = (value) => {
+        if (typeof delay !== 'number') {
+            setIsFocused(value);
+            return;
+        }
+        setTimeout(() => {
+            setIsFocused(value);
+        }, delay);
+    };
+    useEffect(() => {
+        const onFocus = (e) => {
+            triggerIsFocused(true);
+        };
+        const onBlur = (e) => {
+            triggerIsFocused(false);
+        };
+        ref.current?.addEventListener('focusin', (e) => onFocus());
+        ref.current?.addEventListener('focusout', (e) => onBlur());
+        return () => {
+            ref.current?.removeEventListener('focusin', onFocus);
+            ref.current?.removeEventListener('focusout', onBlur);
+        };
+    }, []);
+    return isFocused;
+};
+
+export { useFocusIn };
+//# sourceMappingURL=useFocusIn.js.map

package/dist/hooks/useFocusIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusIn.js","sources":["../../src/hooks/useFocusIn.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n\n//triggering the focus state immediately can cause issues in some cases => delay can prevent them\nexport const useFocusIn = (ref: React.RefObject<HTMLElement>, delay?: number): boolean => {\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    const triggerIsFocused = (value: boolean) => {\n        if(typeof delay !== 'number') {\n            setIsFocused(value);\n            return;\n        }\n        setTimeout(() => {\n            setIsFocused(value);\n        }, delay);\n    }\n\n    useEffect(() => {\n        const onFocus = (e: FocusEvent) => {\n            triggerIsFocused(true);\n        }\n        const onBlur = (e: FocusEvent) => {\n            triggerIsFocused(false);\n        }\n        ref.current?.addEventListener('focusin', (e) => onFocus(e));\n        ref.current?.addEventListener('focusout', (e) => onBlur(e));\n\n        return () => {\n            ref.current?.removeEventListener('focusin', onFocus);\n            ref.current?.removeEventListener('focusout', onBlur);\n        }\n    }, []);\n    return isFocused\n};"],"names":[],"mappings":";;AAGA;MACa,UAAU,GAAG,CAAC,GAAiC,EAAE,KAAc,KAAa;IACrF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;AAE3D,IAAA,MAAM,gBAAgB,GAAG,CAAC,KAAc,KAAI;AACxC,QAAA,IAAG,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC1B,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,OAAO;AACV,SAAA;QACD,UAAU,CAAC,MAAK;YACZ,YAAY,CAAC,KAAK,CAAC,CAAC;SACvB,EAAE,KAAK,CAAC,CAAC;AACd,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YAC9B,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC3B,SAAC,CAAA;AACD,QAAA,MAAM,MAAM,GAAG,CAAC,CAAa,KAAI;YAC7B,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAC5B,SAAC,CAAA;AACD,QAAA,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,KAAK,OAAO,CAAE,CAAC,CAAC,CAAC;AAC5D,QAAA,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,KAAK,MAAM,CAAE,CAAC,CAAC,CAAC;AAE5D,QAAA,OAAO,MAAK;YACR,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACrD,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AACzD,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;AACP,IAAA,OAAO,SAAS,CAAA;AACpB;;;;"}

package/dist/hooks/useInputBasedControl.d.ts

@@ -0,0 +1,37 @@
+import { IControl, IOutputs } from "../interfaces/context";
+import { IControlController } from "./useControl";
+import { IInputParameters } from "../interfaces/parameters";
+import { IDefaultTranslations } from "./useControlLabels";
+/**
+ * Description
+ * @param {any} value:any
+ * @returns {any}
+ */
+interface IControlOptions {
+    defaultTranslations?: IDefaultTranslations;
+    /**
+     * Formatting function that will format the bound value every time a new one comes from the props.
+     */
+    formatter?: (value: any) => any;
+    valueExtractor?: (value: any) => any;
+}
+/**
+ * Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.
+ * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,
+ * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should
+ * be triggered when the user looses focus on the component (`onBlur` event).
+ * @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.
+ * Use this for displaying the up-to-date value to the user.
+ * Second prop contains the translations for this component.
+ *
+ * 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.
+ *
+ * The last prop is a method that will notify the framework that you wish to write changes.
+ * The method will notify the framework only if the provided output differs from the current inputs.
+ */
+interface IInputBasedControlController<TValue, TTranslations, TOutputs> extends IControlController<TTranslations, TOutputs> {
+    value: TValue;
+    setValue: (value: TValue) => void;
+}
+export declare const useInputBasedControl: <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, options?: IControlOptions) => IInputBasedControlController<TValue, TTranslations, TOutputs>;
+export {};

package/dist/hooks/useInputBasedControl.js

@@ -0,0 +1,36 @@
+import { useState, useRef, useEffect } from 'react';
+import { useControl } from './useControl.js';
+
+const useInputBasedControl = (name, props, options) => {
+    const { formatter, valueExtractor } = { ...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);
+    useEffect(() => {
+        const formattedValue = formatter?.(rawValue);
+        setValue(formattedValue ?? rawValue);
+        //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);
+    }, [rawValue]);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    useEffect(() => {
+        return () => {
+            onNotifyOutputChanged({
+                value: valueExtractor?.(valueRef.current) ?? valueRef.current
+            });
+        };
+    }, []);
+    return {
+        value,
+        labels,
+        sizing,
+        theme,
+        onNotifyOutputChanged,
+        setValue
+    };
+};
+
+export { useInputBasedControl };
+//# sourceMappingURL=useInputBasedControl.js.map

package/dist/hooks/useInputBasedControl.js.map

@@ -0,0 +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;;;;"}

package/dist/hooks/useMouseOver.d.ts

@@ -0,0 +1 @@
+export declare const useMouseOver: (ref: React.RefObject<HTMLElement>) => boolean;

package/dist/hooks/useMouseOver.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+const useMouseOver = (ref) => {
+    const [isMouseOver, setIsMouseOver] = useState(false);
+    useEffect(() => {
+        const onMouseEnter = () => {
+            setIsMouseOver(true);
+        };
+        const onMouseLeave = () => {
+            setIsMouseOver(false);
+        };
+        ref.current?.addEventListener('mouseenter', onMouseEnter);
+        ref.current?.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            ref.current?.removeEventListener('mouseenter', onMouseEnter);
+            ref.current?.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, []);
+    return isMouseOver;
+};
+
+export { useMouseOver };
+//# sourceMappingURL=useMouseOver.js.map

package/dist/hooks/useMouseOver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseOver.js","sources":["../../src/hooks/useMouseOver.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport const useMouseOver = (ref: React.RefObject<HTMLElement>): boolean => {\n    const [isMouseOver, setIsMouseOver] = useState<boolean>(false);\n\n    useEffect(() => {\n        const onMouseEnter = () => {\n            setIsMouseOver(true);\n        }\n        const onMouseLeave = () => {\n            setIsMouseOver(false);\n        }\n        ref.current?.addEventListener('mouseenter', onMouseEnter);\n        ref.current?.addEventListener('mouseleave', onMouseLeave);\n\n        return () => {\n            ref.current?.removeEventListener('mouseenter',onMouseEnter);\n            ref.current?.removeEventListener('mouseleave', onMouseLeave);\n        }\n    }, []);\n\n    return isMouseOver;\n};"],"names":[],"mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,GAAiC,KAAa;IACvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE/D,SAAS,CAAC,MAAK;QACX,MAAM,YAAY,GAAG,MAAK;YACtB,cAAc,CAAC,IAAI,CAAC,CAAC;AACzB,SAAC,CAAA;QACD,MAAM,YAAY,GAAG,MAAK;YACtB,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1B,SAAC,CAAA;QACD,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAC1D,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AAE1D,QAAA,OAAO,MAAK;YACR,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAC,YAAY,CAAC,CAAC;YAC5D,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AACjE,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAO,WAAW,CAAC;AACvB;;;;"}

package/dist/hooks/usePrevious.d.ts

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