@rio-cloud/rio-uikit 1.13.2 → 2.0.0-beta.2

package/hooks/useClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.js","sources":["../../src/hooks/useClickOutside.ts"],"sourcesContent":["/* eslint-disable prefer-arrow/prefer-arrow-functions */\n// eslint-disable-next-line max-len\n// Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts\n\nimport { useEffect, useRef } from 'react';\n\nexport type EventListenerType = keyof DocumentEventMap;\n\nexport const DEFAULT_EVENT_TYPES: EventListenerType[] = ['mousedown', 'touchstart'];\n\n/**\n * Custom hook to detect clicks outside a specified element.\n *\n * @param callback - The callback function to be called when a click outside the element is detected.\n * @param events - Array of event types to listen for.\n * @param isActive - Flag to only listen for clicks when target element active.\n *\n * @returns A mutable ref object representing the target element.\n */\nconst useClickOutside = <T extends HTMLElement = any>(\n    callback: (event: MouseEvent | TouchEvent) => void,\n    events: EventListenerType[] = DEFAULT_EVENT_TYPES,\n    isActive = true // Only listen when active\n): React.MutableRefObject<T> => {\n    const targetRef = useRef<any>(null);\n\n    useClickOutsideWithRef(targetRef, callback, events, isActive);\n\n    return targetRef;\n};\n\n// Internal use for now - extend it later to be used outside\nexport const useClickOutsideWithRef = <T extends HTMLElement = any>(\n    ref: React.MutableRefObject<HTMLElement | null> | HTMLElement | null,\n    callback: (event: MouseEvent | TouchEvent) => void,\n    events: EventListenerType[] = DEFAULT_EVENT_TYPES,\n    isActive = true\n): void => {\n    useEffect(() => {\n        if (!isActive) {\n            return; // Simply return early if not active, no cleanup needed\n        }\n\n        // In case the ref is actually a state and will be set via the state setter function\n        const element = ref && 'current' in ref ? ref.current : ref;\n\n        // Event listener function to check if the click is outside the target element\n        const listener = (event: Event) => {\n            if (element && !element.contains(event.target as Node)) {\n                callback(event as MouseEvent | TouchEvent);\n            }\n        };\n\n        // Add event listeners for each specified event type\n        events.forEach(eventType => {\n            document.addEventListener(eventType, listener);\n        });\n\n        // Cleanup function to remove event listeners\n        return () => {\n            events.forEach(eventType => {\n                document.removeEventListener(eventType, listener);\n            });\n        };\n    }, [ref, callback, events, isActive]);\n};\n\nexport default useClickOutside;\n"],"names":["DEFAULT_EVENT_TYPES","useClickOutside","callback","events","isActive","targetRef","useRef","useClickOutsideWithRef","ref","useEffect","element","listener","event","eventType"],"mappings":";AAQO,MAAMA,IAA2C,CAAC,aAAa,YAAY,GAW5EC,IAAkB,CACpBC,GACAC,IAA8BH,GAC9BI,IAAW,OACiB;AAC5B,QAAMC,IAAYC,EAAY,IAAI;AAElC,SAAAC,EAAuBF,GAAWH,GAAUC,GAAQC,CAAQ,GAErDC;AACX,GAGaE,IAAyB,CAClCC,GACAN,GACAC,IAA8BH,GAC9BI,IAAW,OACJ;AACP,EAAAK,EAAU,MAAM;AACZ,QAAI,CAACL;AACD;AAIJ,UAAMM,IAAUF,KAAO,aAAaA,IAAMA,EAAI,UAAUA,GAGlDG,IAAW,CAACC,MAAiB;AAC/B,MAAIF,KAAW,CAACA,EAAQ,SAASE,EAAM,MAAc,KACjDV,EAASU,CAAgC;AAAA,IAEjD;AAGA,WAAAT,EAAO,QAAQ,CAAAU,MAAa;AACxB,eAAS,iBAAiBA,GAAWF,CAAQ;AAAA,IACjD,CAAC,GAGM,MAAM;AACT,MAAAR,EAAO,QAAQ,CAAAU,MAAa;AACxB,iBAAS,oBAAoBA,GAAWF,CAAQ;AAAA,MACpD,CAAC;AAAA,IACL;AAAA,EACJ,GAAG,CAACH,GAAKN,GAAUC,GAAQC,CAAQ,CAAC;AACxC;"}

package/hooks/useClipboard.js

@@ -1,45 +1,16 @@
-// Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-clipboard/use-clipboard.ts
-import { useState } from 'react';
-import isNil from 'lodash/fp/isNil';
-/**
- * Custom hook to interact with the clipboard.
- *
- * @param options - Options object for configuring the hook behavior.
- * @returns An object containing functions and state related to clipboard operations.
- */
-const useClipboard = (options) => {
-    const { timeout = 2000 } = options ?? {};
-    const [error, setError] = useState(null);
-    const [copied, setCopied] = useState(false);
-    const [copyTimeout, setCopyTimeout] = useState(null);
-    // Function to handle copy result and set copied status
-    const handleCopyResult = (value) => {
-        if (copyTimeout) {
-            clearTimeout(copyTimeout);
-        }
-        setCopyTimeout(setTimeout(() => setCopied(false), timeout));
-        setCopied(value);
-    };
-    // Function to copy text to clipboard
-    const copy = (valueToCopy) => {
-        if (!isNil(navigator.clipboard)) {
-            navigator.clipboard
-                .writeText(valueToCopy)
-                .then(() => handleCopyResult(true))
-                .catch(writeError => setError(writeError));
-        }
-        else {
-            setError(new Error('useClipboard: navigator.clipboard is not supported'));
-        }
-    };
-    // Function to reset copied status and clear errors
-    const reset = () => {
-        setCopied(false);
-        setError(null);
-        if (copyTimeout) {
-            clearTimeout(copyTimeout);
-        }
-    };
-    return { copy, reset, error, copied };
+import { useState as s } from "react";
+import { isNil as d } from "es-toolkit/compat";
+const y = (i) => {
+  const { timeout: a = 2e3 } = i ?? {}, [l, o] = s(null), [c, t] = s(!1), [e, n] = s(null), p = (r) => {
+    e && clearTimeout(e), n(setTimeout(() => t(!1), a)), t(r);
+  };
+  return { copy: (r) => {
+    d(navigator.clipboard) ? o(new Error("useClipboard: navigator.clipboard is not supported")) : navigator.clipboard.writeText(r).then(() => p(!0)).catch((u) => o(u));
+  }, reset: () => {
+    t(!1), o(null), e && clearTimeout(e);
+  }, error: l, copied: c };
 };
-export default useClipboard;
+export {
+  y as default
+};
+//# sourceMappingURL=useClipboard.js.map

package/hooks/useClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClipboard.js","sources":["../../src/hooks/useClipboard.ts"],"sourcesContent":["// Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-clipboard/use-clipboard.ts\n\nimport { useState } from 'react';\nimport { isNil } from 'es-toolkit/compat';\n\n/**\n * Custom hook to interact with the clipboard.\n *\n * @param options - Options object for configuring the hook behavior.\n * @returns An object containing functions and state related to clipboard operations.\n */\nconst useClipboard = (options?: { timeout: number }) => {\n    const { timeout = 2000 } = options ?? {};\n\n    const [error, setError] = useState<Error | null>(null);\n    const [copied, setCopied] = useState(false);\n    const [copyTimeout, setCopyTimeout] = useState<NodeJS.Timeout | null>(null);\n\n    // Function to handle copy result and set copied status\n    const handleCopyResult = (value: boolean) => {\n        if (copyTimeout) {\n            clearTimeout(copyTimeout);\n        }\n        setCopyTimeout(setTimeout(() => setCopied(false), timeout));\n        setCopied(value);\n    };\n\n    // Function to copy text to clipboard\n    const copy = (valueToCopy: string) => {\n        if (!isNil(navigator.clipboard)) {\n            navigator.clipboard\n                .writeText(valueToCopy)\n                .then(() => handleCopyResult(true))\n                .catch(writeError => setError(writeError));\n        } else {\n            setError(new Error('useClipboard: navigator.clipboard is not supported'));\n        }\n    };\n\n    // Function to reset copied status and clear errors\n    const reset = () => {\n        setCopied(false);\n        setError(null);\n        if (copyTimeout) {\n            clearTimeout(copyTimeout);\n        }\n    };\n\n    return { copy, reset, error, copied };\n};\n\nexport default useClipboard;\n"],"names":["useClipboard","options","timeout","error","setError","useState","copied","setCopied","copyTimeout","setCopyTimeout","handleCopyResult","value","valueToCopy","isNil","writeError"],"mappings":";;AAWA,MAAMA,IAAe,CAACC,MAAkC;AACpD,QAAM,EAAE,SAAAC,IAAU,IAAA,IAASD,KAAW,CAAA,GAEhC,CAACE,GAAOC,CAAQ,IAAIC,EAAuB,IAAI,GAC/C,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAgC,IAAI,GAGpEK,IAAmB,CAACC,MAAmB;AACzC,IAAIH,KACA,aAAaA,CAAW,GAE5BC,EAAe,WAAW,MAAMF,EAAU,EAAK,GAAGL,CAAO,CAAC,GAC1DK,EAAUI,CAAK;AAAA,EACnB;AAuBA,SAAO,EAAE,MApBI,CAACC,MAAwB;AAClC,IAAKC,EAAM,UAAU,SAAS,IAM1BT,EAAS,IAAI,MAAM,oDAAoD,CAAC,IALxE,UAAU,UACL,UAAUQ,CAAW,EACrB,KAAK,MAAMF,EAAiB,EAAI,CAAC,EACjC,MAAM,CAAAI,MAAcV,EAASU,CAAU,CAAC;AAAA,EAIrD,GAWe,OARD,MAAM;AAChB,IAAAP,EAAU,EAAK,GACfH,EAAS,IAAI,GACTI,KACA,aAAaA,CAAW;AAAA,EAEhC,GAEsB,OAAAL,GAAO,QAAAG,EAAA;AACjC;"}

package/hooks/useCount.js

@@ -1,31 +1,14 @@
-import { useMemo } from 'react';
-import { getValueByPath } from '../utils/formatUtils';
-/**
- * Counts how many items in a list match a specific condition at a given path.
- * Supports exact value comparison or custom predicate logic.
- *
- * @param items - The list of objects to evaluate.
- * @param path - Dot-separated path to the target property.
- * @param options - Optional config with `equals` or a custom `match` function.
- * @returns Number of items that satisfy the condition.
- */
-const useCount = (items, path, options = {}) => {
-    const { equals, match } = options;
-    return useMemo(() => {
-        return items.reduce((count, item) => {
-            const value = getValueByPath(item, path);
-            let shouldCount = false;
-            if (typeof match === 'function') {
-                shouldCount = match(value);
-            }
-            else if (equals !== undefined) {
-                shouldCount = value === equals;
-            }
-            else {
-                shouldCount = value != null; // fallback: count all defined values
-            }
-            return shouldCount ? count + 1 : count;
-        }, 0);
-    }, [items, path, equals, match]);
+import { useMemo as a } from "react";
+import { getValueByPath as c } from "../utils/formatUtils.js";
+const d = (r, l, s = {}) => {
+  const { equals: t, match: o } = s;
+  return a(() => r.reduce((n, f) => {
+    const u = c(f, l);
+    let e = !1;
+    return typeof o == "function" ? e = o(u) : t !== void 0 ? e = u === t : e = u != null, e ? n + 1 : n;
+  }, 0), [r, l, t, o]);
 };
-export default useCount;
+export {
+  d as default
+};
+//# sourceMappingURL=useCount.js.map

package/hooks/useCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCount.js","sources":["../../src/hooks/useCount.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { getValueByPath } from '../utils/formatUtils';\n\nexport type UseCountOptions = {\n    /**\n     * Count only values that strictly equal this value.\n     * If omitted and no `match` is provided, any value that is not null or undefined will be counted.\n     */\n    equals?: unknown;\n\n    /**\n     * A custom matcher function. If provided, it overrides the `equals` option.\n     */\n    match?: (value: unknown) => boolean;\n};\n\n/**\n * Counts how many items in a list match a specific condition at a given path.\n * Supports exact value comparison or custom predicate logic.\n *\n * @param items - The list of objects to evaluate.\n * @param path - Dot-separated path to the target property.\n * @param options - Optional config with `equals` or a custom `match` function.\n * @returns Number of items that satisfy the condition.\n */\nconst useCount = (items: unknown[], path: string, options: UseCountOptions = {}): number => {\n    const { equals, match } = options;\n\n    return useMemo(() => {\n        return items.reduce<number>((count, item) => {\n            const value = getValueByPath(item, path);\n\n            let shouldCount = false;\n\n            if (typeof match === 'function') {\n                shouldCount = match(value);\n            } else if (equals !== undefined) {\n                shouldCount = value === equals;\n            } else {\n                shouldCount = value != null; // fallback: count all defined values\n            }\n\n            return shouldCount ? count + 1 : count;\n        }, 0);\n    }, [items, path, equals, match]);\n};\n\nexport default useCount;\n"],"names":["useCount","items","path","options","equals","match","useMemo","count","item","value","getValueByPath","shouldCount"],"mappings":";;AA0BA,MAAMA,IAAW,CAACC,GAAkBC,GAAcC,IAA2B,CAAA,MAAe;AACxF,QAAM,EAAE,QAAAC,GAAQ,OAAAC,EAAA,IAAUF;AAE1B,SAAOG,EAAQ,MACJL,EAAM,OAAe,CAACM,GAAOC,MAAS;AACzC,UAAMC,IAAQC,EAAeF,GAAMN,CAAI;AAEvC,QAAIS,IAAc;AAElB,WAAI,OAAON,KAAU,aACjBM,IAAcN,EAAMI,CAAK,IAClBL,MAAW,SAClBO,IAAcF,MAAUL,IAExBO,IAAcF,KAAS,MAGpBE,IAAcJ,IAAQ,IAAIA;AAAA,EACrC,GAAG,CAAC,GACL,CAACN,GAAOC,GAAME,GAAQC,CAAK,CAAC;AACnC;"}

package/hooks/useDOMNodeCount.js

@@ -1,29 +1,24 @@
-import { useState, useEffect } from 'react';
-const useDOMNodeCount = () => {
-    const [nodeCount, setNodeCount] = useState(0);
-    useEffect(() => {
-        const countNodes = () => {
-            const body = document.body;
-            if (body) {
-                setNodeCount(body.getElementsByTagName('*').length);
-            }
-        };
-        // Initial count
-        countNodes();
-        // Create a MutationObserver to watch for changes in the DOM
-        const observer = new MutationObserver(() => {
-            countNodes();
-        });
-        // Observe the body element for changes in the child list or subtree
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-        // Cleanup on unmount
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-    return nodeCount;
+import { useState as u, useEffect as r } from "react";
+const d = () => {
+  const [n, s] = u(0);
+  return r(() => {
+    const e = () => {
+      const o = document.body;
+      o && s(o.getElementsByTagName("*").length);
+    };
+    e();
+    const t = new MutationObserver(() => {
+      e();
+    });
+    return t.observe(document.body, {
+      childList: !0,
+      subtree: !0
+    }), () => {
+      t.disconnect();
+    };
+  }, []), n;
 };
-export default useDOMNodeCount;
+export {
+  d as default
+};
+//# sourceMappingURL=useDOMNodeCount.js.map

package/hooks/useDOMNodeCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDOMNodeCount.js","sources":["../../src/hooks/useDOMNodeCount.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nconst useDOMNodeCount = () => {\n    const [nodeCount, setNodeCount] = useState(0);\n\n    useEffect(() => {\n        const countNodes = () => {\n            const body = document.body;\n            if (body) {\n                setNodeCount(body.getElementsByTagName('*').length);\n            }\n        };\n\n        // Initial count\n        countNodes();\n\n        // Create a MutationObserver to watch for changes in the DOM\n        const observer = new MutationObserver(() => {\n            countNodes();\n        });\n\n        // Observe the body element for changes in the child list or subtree\n        observer.observe(document.body, {\n            childList: true,\n            subtree: true,\n        });\n\n        // Cleanup on unmount\n        return () => {\n            observer.disconnect();\n        };\n    }, []);\n\n    return nodeCount;\n};\n\nexport default useDOMNodeCount;\n"],"names":["useDOMNodeCount","nodeCount","setNodeCount","useState","useEffect","countNodes","body","observer"],"mappings":";AAEA,MAAMA,IAAkB,MAAM;AAC1B,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,CAAC;AAE5C,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAa,MAAM;AACrB,YAAMC,IAAO,SAAS;AACtB,MAAIA,KACAJ,EAAaI,EAAK,qBAAqB,GAAG,EAAE,MAAM;AAAA,IAE1D;AAGA,IAAAD,EAAA;AAGA,UAAME,IAAW,IAAI,iBAAiB,MAAM;AACxC,MAAAF,EAAA;AAAA,IACJ,CAAC;AAGD,WAAAE,EAAS,QAAQ,SAAS,MAAM;AAAA,MAC5B,WAAW;AAAA,MACX,SAAS;AAAA,IAAA,CACZ,GAGM,MAAM;AACT,MAAAA,EAAS,WAAA;AAAA,IACb;AAAA,EACJ,GAAG,CAAA,CAAE,GAEEN;AACX;"}

package/hooks/useDarkMode.js

@@ -1,38 +1,27 @@
-import { useCallback, useState } from 'react';
-import { THEME_DARK, THEME_DATA_ATTRIBUTE } from '../utils/colorScheme';
-import useEffectOnce from './useEffectOnce';
-import useMutationObserver from './useMutationObserver';
-/**
- * Custom hook to detect if dark mode is enabled.
- *
- * @returns A boolean indicating whether dark mode is enabled.
- */
-const useDarkMode = () => {
-    const [isDarkMode, setIsDarkMode] = useState(false);
-    // Check if dark mode is enabled on initial render
-    useEffectOnce(() => {
-        const html = document.documentElement;
-        // Check if the HTML element has the dark mode theme attribute
-        if (html.getAttribute(THEME_DATA_ATTRIBUTE) === THEME_DARK) {
-            setIsDarkMode(true);
-        }
+import { useState as c, useCallback as i } from "react";
+import { THEME_DATA_ATTRIBUTE as e, THEME_DARK as o } from "../utils/colorScheme.js";
+import n from "./useEffectOnce.js";
+import f from "./useMutationObserver.js";
+const M = () => {
+  const [u, r] = c(!1);
+  n(() => {
+    document.documentElement.getAttribute(e) === o && r(!0);
+  });
+  const a = i((s) => {
+    s.forEach((t) => {
+      if (t.type === "attributes" && t.attributeName === e) {
+        const m = t.target.getAttribute(e);
+        r(m === o);
+      }
     });
-    const handleMutation = useCallback((mutationList) => {
-        mutationList.map((mutation) => {
-            // Check if the mutation is related to the theme attribute
-            if (mutation.type === 'attributes' && mutation.attributeName === THEME_DATA_ATTRIBUTE) {
-                const scheme = mutation.target.getAttribute(THEME_DATA_ATTRIBUTE);
-                // Update dark mode status based on the theme attribute value
-                setIsDarkMode(scheme === THEME_DARK);
-            }
-        });
-    }, []);
-    // Observe mutations in the theme attribute using MutationObserver
-    useMutationObserver(document.documentElement, handleMutation, {
-        attributes: true,
-        childList: false,
-        subtree: false,
-    });
-    return isDarkMode;
+  }, []);
+  return f(document.documentElement, a, {
+    attributes: !0,
+    childList: !1,
+    subtree: !1
+  }), u;
+};
+export {
+  M as default
 };
-export default useDarkMode;
+//# sourceMappingURL=useDarkMode.js.map

package/hooks/useDarkMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDarkMode.js","sources":["../../src/hooks/useDarkMode.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport { THEME_DARK, THEME_DATA_ATTRIBUTE } from '../utils/colorScheme';\nimport useEffectOnce from './useEffectOnce';\nimport useMutationObserver from './useMutationObserver';\n\n/**\n * Custom hook to detect if dark mode is enabled.\n *\n * @returns A boolean indicating whether dark mode is enabled.\n */\nconst useDarkMode = (): boolean => {\n    const [isDarkMode, setIsDarkMode] = useState(false);\n\n    // Check if dark mode is enabled on initial render\n    useEffectOnce(() => {\n        const html = document.documentElement;\n\n        // Check if the HTML element has the dark mode theme attribute\n        if (html.getAttribute(THEME_DATA_ATTRIBUTE) === THEME_DARK) {\n            setIsDarkMode(true);\n        }\n    });\n\n    const handleMutation = useCallback((mutationList: MutationRecord[]) => {\n        mutationList.forEach((mutation: MutationRecord) => {\n            // Check if the mutation is related to the theme attribute\n            if (mutation.type === 'attributes' && mutation.attributeName === THEME_DATA_ATTRIBUTE) {\n                const scheme = (mutation.target as HTMLElement).getAttribute(THEME_DATA_ATTRIBUTE);\n\n                // Update dark mode status based on the theme attribute value\n                setIsDarkMode(scheme === THEME_DARK);\n            }\n        });\n    }, []);\n\n    // Observe mutations in the theme attribute using MutationObserver\n    useMutationObserver(document.documentElement, handleMutation, {\n        attributes: true,\n        childList: false,\n        subtree: false,\n    });\n\n    return isDarkMode;\n};\n\nexport default useDarkMode;\n"],"names":["useDarkMode","isDarkMode","setIsDarkMode","useState","useEffectOnce","THEME_DATA_ATTRIBUTE","THEME_DARK","handleMutation","useCallback","mutationList","mutation","scheme","useMutationObserver"],"mappings":";;;;AAWA,MAAMA,IAAc,MAAe;AAC/B,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK;AAGlD,EAAAC,EAAc,MAAM;AAIhB,IAHa,SAAS,gBAGb,aAAaC,CAAoB,MAAMC,KAC5CJ,EAAc,EAAI;AAAA,EAE1B,CAAC;AAED,QAAMK,IAAiBC,EAAY,CAACC,MAAmC;AACnE,IAAAA,EAAa,QAAQ,CAACC,MAA6B;AAE/C,UAAIA,EAAS,SAAS,gBAAgBA,EAAS,kBAAkBL,GAAsB;AACnF,cAAMM,IAAUD,EAAS,OAAuB,aAAaL,CAAoB;AAGjF,QAAAH,EAAcS,MAAWL,CAAU;AAAA,MACvC;AAAA,IACJ,CAAC;AAAA,EACL,GAAG,CAAA,CAAE;AAGL,SAAAM,EAAoB,SAAS,iBAAiBL,GAAgB;AAAA,IAC1D,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,EAAA,CACZ,GAEMN;AACX;"}

package/hooks/useDebugInfo.d.ts

@@ -1,6 +1,4 @@
-type Props = {
-    [key: string]: any;
-};
+type Props = Record<string, unknown>;
 /**
  * Custom hook to log debug information about a component.
  *

package/hooks/useDebugInfo.js

@@ -1,53 +1,25 @@
-// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/28-useDebugInformation/useDebugInformation.js
-import { useEffect, useRef } from 'react';
-import useRenderCount from './useRenderCount';
-const logStyle = ['color: #4c5667', 'background-color: #e5ebf0', 'padding: 2px 4px', 'border-radius: 2px'].join(';');
-/**
- * Custom hook to log debug information about a component.
- *
- * @param componentName - The name of the component.
- * @param props - The props object of the component.
- *
- * @returns An object containing debug information.
- */
-const useDebugInfo = (componentName, props) => {
-    const renderCount = useRenderCount();
-    const changedProps = useRef({});
-    const previousProps = useRef(props);
-    const lastRenderTimestamp = useRef(Date.now());
-    // Extract prop keys from the current and previous props
-    const propKeys = Object.keys({ ...props, ...previousProps.current });
-    // Compare current props with previous props to find changed props
-    changedProps.current = propKeys.reduce((obj, key) => {
-        if (props[key] === previousProps.current[key]) {
-            return obj;
-        }
-        return {
-            ...obj,
-            [key]: {
-                previous: previousProps.current[key],
-                current: props[key],
-            },
-        };
-    }, {});
-    // Build debug information object
-    const info = {
-        renderCount,
-        changedProps: changedProps.current,
-        timeSinceLastRender: Date.now() - lastRenderTimestamp.current,
-        lastRenderTimestamp: lastRenderTimestamp.current,
-    };
-    // Log debug information on component update
-    useEffect(() => {
-        previousProps.current = props;
-        lastRenderTimestamp.current = Date.now();
-        // Log debug information to console
-        if (console) {
-            console.groupCollapsed(`%c[debug-info] ${componentName}`, logStyle);
-            console.log(info);
-            console.groupEnd();
-        }
-    });
-    return info;
+import { useRef as t, useEffect as l } from "react";
+import f from "./useRenderCount.js";
+const p = ["color: #4c5667", "background-color: #e5ebf0", "padding: 2px 4px", "border-radius: 2px"].join(";"), b = (d, e) => {
+  const a = f(), c = t({}), n = t(e), o = t(Date.now()), i = Object.keys({ ...e, ...n.current });
+  c.current = i.reduce((s, r) => e[r] === n.current[r] ? s : {
+    ...s,
+    [r]: {
+      previous: n.current[r],
+      current: e[r]
+    }
+  }, {});
+  const u = {
+    renderCount: a,
+    changedProps: c.current,
+    timeSinceLastRender: Date.now() - o.current,
+    lastRenderTimestamp: o.current
+  };
+  return l(() => {
+    n.current = e, o.current = Date.now(), console && (console.groupCollapsed(`%c[debug-info] ${d}`, p), console.log(u), console.groupEnd());
+  }), u;
 };
-export default useDebugInfo;
+export {
+  b as default
+};
+//# sourceMappingURL=useDebugInfo.js.map

package/hooks/useDebugInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebugInfo.js","sources":["../../src/hooks/useDebugInfo.ts"],"sourcesContent":["// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/28-useDebugInformation/useDebugInformation.js\nimport { useEffect, useRef } from 'react';\n\nimport useRenderCount from './useRenderCount';\n\ntype Props = Record<string, unknown>;\n\nconst logStyle = ['color: #4c5667', 'background-color: #e5ebf0', 'padding: 2px 4px', 'border-radius: 2px'].join(';');\n\n/**\n * Custom hook to log debug information about a component.\n *\n * @param componentName - The name of the component.\n * @param props - The props object of the component.\n *\n * @returns An object containing debug information.\n */\nconst useDebugInfo = (componentName: string, props: Props) => {\n    const renderCount = useRenderCount();\n    const changedProps = useRef<Props>({});\n    const previousProps = useRef<Props>(props);\n    const lastRenderTimestamp = useRef<number>(Date.now());\n\n    // Extract prop keys from the current and previous props\n    const propKeys = Object.keys({ ...props, ...previousProps.current });\n\n    // Compare current props with previous props to find changed props\n    changedProps.current = propKeys.reduce((obj: Props, key: string) => {\n        if (props[key] === previousProps.current[key]) {\n            return obj;\n        }\n\n        return {\n            ...obj,\n            [key]: {\n                previous: previousProps.current[key],\n                current: props[key],\n            },\n        };\n    }, {});\n\n    // Build debug information object\n    const info = {\n        renderCount,\n        changedProps: changedProps.current,\n        timeSinceLastRender: Date.now() - lastRenderTimestamp.current,\n        lastRenderTimestamp: lastRenderTimestamp.current,\n    };\n\n    // Log debug information on component update\n    useEffect(() => {\n        previousProps.current = props;\n        lastRenderTimestamp.current = Date.now();\n\n        // Log debug information to console\n        if (console) {\n            console.groupCollapsed(`%c[debug-info] ${componentName}`, logStyle);\n            console.log(info);\n            console.groupEnd();\n        }\n    });\n\n    return info;\n};\n\nexport default useDebugInfo;\n"],"names":["logStyle","useDebugInfo","componentName","props","renderCount","useRenderCount","changedProps","useRef","previousProps","lastRenderTimestamp","propKeys","obj","key","info","useEffect"],"mappings":";;AAOA,MAAMA,IAAW,CAAC,kBAAkB,6BAA6B,oBAAoB,oBAAoB,EAAE,KAAK,GAAG,GAU7GC,IAAe,CAACC,GAAuBC,MAAiB;AAC1D,QAAMC,IAAcC,EAAA,GACdC,IAAeC,EAAc,EAAE,GAC/BC,IAAgBD,EAAcJ,CAAK,GACnCM,IAAsBF,EAAe,KAAK,IAAA,CAAK,GAG/CG,IAAW,OAAO,KAAK,EAAE,GAAGP,GAAO,GAAGK,EAAc,SAAS;AAGnE,EAAAF,EAAa,UAAUI,EAAS,OAAO,CAACC,GAAYC,MAC5CT,EAAMS,CAAG,MAAMJ,EAAc,QAAQI,CAAG,IACjCD,IAGJ;AAAA,IACH,GAAGA;AAAA,IACH,CAACC,CAAG,GAAG;AAAA,MACH,UAAUJ,EAAc,QAAQI,CAAG;AAAA,MACnC,SAAST,EAAMS,CAAG;AAAA,IAAA;AAAA,EACtB,GAEL,CAAA,CAAE;AAGL,QAAMC,IAAO;AAAA,IACT,aAAAT;AAAA,IACA,cAAcE,EAAa;AAAA,IAC3B,qBAAqB,KAAK,IAAA,IAAQG,EAAoB;AAAA,IACtD,qBAAqBA,EAAoB;AAAA,EAAA;AAI7C,SAAAK,EAAU,MAAM;AACZ,IAAAN,EAAc,UAAUL,GACxBM,EAAoB,UAAU,KAAK,IAAA,GAG/B,YACA,QAAQ,eAAe,kBAAkBP,CAAa,IAAIF,CAAQ,GAClE,QAAQ,IAAIa,CAAI,GAChB,QAAQ,SAAA;AAAA,EAEhB,CAAC,GAEMA;AACX;"}

package/hooks/useDocumentTitle.js

@@ -1,14 +1,10 @@
-import { useEffect } from 'react';
-/**
- * Custom hook to set the document title.
- *
- * @param title - The new title to set for the document.
- */
-const useDocumentTitle = (title) => {
-    useEffect(() => {
-        if (document) {
-            document.title = title;
-        }
-    }, [title]);
+import { useEffect as t } from "react";
+const u = (e) => {
+  t(() => {
+    document && (document.title = e);
+  }, [e]);
 };
-export default useDocumentTitle;
+export {
+  u as default
+};
+//# sourceMappingURL=useDocumentTitle.js.map

package/hooks/useDocumentTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocumentTitle.js","sources":["../../src/hooks/useDocumentTitle.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Custom hook to set the document title.\n *\n * @param title - The new title to set for the document.\n */\nconst useDocumentTitle = (title: string) => {\n    useEffect(() => {\n        if (document) {\n            document.title = title;\n        }\n    }, [title]);\n};\n\nexport default useDocumentTitle;\n"],"names":["useDocumentTitle","title","useEffect"],"mappings":";AAOA,MAAMA,IAAmB,CAACC,MAAkB;AACxC,EAAAC,EAAU,MAAM;AACZ,IAAI,aACA,SAAS,QAAQD;AAAA,EAEzB,GAAG,CAACA,CAAK,CAAC;AACd;"}

package/hooks/useEffectOnce.d.ts

@@ -1,3 +1,3 @@
-import { type EffectCallback } from 'react';
+import { EffectCallback } from 'react';
 declare const useEffectOnce: (callback: EffectCallback) => void;
 export default useEffectOnce;

package/hooks/useEffectOnce.js

@@ -1,5 +1,8 @@
-import { useEffect } from 'react';
-const useEffectOnce = (callback) => {
-    useEffect(callback, []);
+import { useEffect as f } from "react";
+const c = (e) => {
+  f(e, []);
 };
-export default useEffectOnce;
+export {
+  c as default
+};
+//# sourceMappingURL=useEffectOnce.js.map

package/hooks/useEffectOnce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEffectOnce.js","sources":["../../src/hooks/useEffectOnce.ts"],"sourcesContent":["import { useEffect, type EffectCallback } from 'react';\n\nconst useEffectOnce = (callback: EffectCallback) => {\n    useEffect(callback, []);\n};\n\nexport default useEffectOnce;\n"],"names":["useEffectOnce","callback","useEffect"],"mappings":";AAEA,MAAMA,IAAgB,CAACC,MAA6B;AAChD,EAAAC,EAAUD,GAAU,EAAE;AAC1B;"}

package/hooks/useElapsedTime.js

@@ -1,36 +1,11 @@
-import { useRef, useEffect } from 'react';
-/**
- * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.
- *
- * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.
- * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time
- * or the component's mount time.
- *
- * @example
- * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
- * import Button from '@rio-cloud/rio-uikit/Button';
- *
- * const MyComponent = () => {
- *   const getElapsedTime = useElapsedTime();
- *
- *   const handleClick = () => {
- *     const elapsedTime = getElapsedTime();
- *     console.log(`Elapsed time: ${elapsedTime} ms`);
- *   };
- *
- *   return (
- *       <Button onClick={handleClick}>Get elapsed time</Button>
- *   );
- * };
- */
-const useElapsedTime = (startTime = Date.now()) => {
-    const startTimeRef = useRef(startTime);
-    const getElapsedTime = () => {
-        return Date.now() - startTimeRef.current;
-    };
-    useEffect(() => {
-        startTimeRef.current = startTime;
-    }, [startTime]);
-    return getElapsedTime;
+import { useRef as n, useEffect as o } from "react";
+const u = (e = Date.now()) => {
+  const t = n(e), r = () => Date.now() - t.current;
+  return o(() => {
+    t.current = e;
+  }, [e]), r;
 };
-export default useElapsedTime;
+export {
+  u as default
+};
+//# sourceMappingURL=useElapsedTime.js.map

package/hooks/useElapsedTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElapsedTime.js","sources":["../../src/hooks/useElapsedTime.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\n/**\n * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.\n *\n * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.\n * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time\n * or the component's mount time.\n *\n * @example\n * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';\n * import Button from '@rio-cloud/rio-uikit/Button';\n *\n * const MyComponent = () => {\n *   const getElapsedTime = useElapsedTime();\n *\n *   const handleClick = () => {\n *     const elapsedTime = getElapsedTime();\n *     console.log(`Elapsed time: ${elapsedTime} ms`);\n *   };\n *\n *   return (\n *       <Button onClick={handleClick}>Get elapsed time</Button>\n *   );\n * };\n */\nconst useElapsedTime = (startTime: number = Date.now()): (() => number) => {\n    const startTimeRef = useRef(startTime);\n\n    const getElapsedTime = () => {\n        return Date.now() - startTimeRef.current;\n    };\n\n    useEffect(() => {\n        startTimeRef.current = startTime;\n    }, [startTime]);\n\n    return getElapsedTime;\n};\n\nexport default useElapsedTime;\n"],"names":["useElapsedTime","startTime","startTimeRef","useRef","getElapsedTime","useEffect"],"mappings":";AA0BA,MAAMA,IAAiB,CAACC,IAAoB,KAAK,UAA0B;AACvE,QAAMC,IAAeC,EAAOF,CAAS,GAE/BG,IAAiB,MACZ,KAAK,QAAQF,EAAa;AAGrC,SAAAG,EAAU,MAAM;AACZ,IAAAH,EAAa,UAAUD;AAAA,EAC3B,GAAG,CAACA,CAAS,CAAC,GAEPG;AACX;"}

package/hooks/useElementSize.d.ts

@@ -1,4 +1,4 @@
-import { type RefObject } from 'react';
+import { RefObject } from 'react';
 /**
  * Custom hook to track the size of a DOM element.
  *

package/hooks/useElementSize.js

@@ -1,29 +1,17 @@
-import { useEffect, useState } from 'react';
-/**
- * Custom hook to track the size of a DOM element.
- *
- * @param elementRef - Reference to the DOM element whose size is to be tracked.
- * @returns An array containing the width and height of the element.
- */
-const useElementSize = (elementRef) => {
-    const [width, setWidth] = useState();
-    const [height, setHeight] = useState();
-    useEffect(() => {
-        const resizeObserver = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                if (entry.contentRect) {
-                    setWidth(entry.contentRect.width);
-                    setHeight(entry.contentRect.height);
-                }
-            }
-        });
-        if (elementRef.current) {
-            resizeObserver.observe(elementRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [elementRef]);
-    return [width, height];
+import { useState as n, useEffect as u } from "react";
+const d = (t) => {
+  const [s, c] = n(), [o, i] = n();
+  return u(() => {
+    const r = new ResizeObserver((h) => {
+      for (const e of h)
+        e.contentRect && (c(e.contentRect.width), i(e.contentRect.height));
+    });
+    return t.current && r.observe(t.current), () => {
+      r.disconnect();
+    };
+  }, [t]), [s, o];
 };
-export default useElementSize;
+export {
+  d as default
+};
+//# sourceMappingURL=useElementSize.js.map

package/hooks/useElementSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementSize.js","sources":["../../src/hooks/useElementSize.ts"],"sourcesContent":["import { useEffect, useState, type RefObject } from 'react';\n\n/**\n * Custom hook to track the size of a DOM element.\n *\n * @param elementRef - Reference to the DOM element whose size is to be tracked.\n * @returns An array containing the width and height of the element.\n */\nconst useElementSize = (elementRef: RefObject<HTMLElement>) => {\n    const [width, setWidth] = useState<number | undefined>();\n    const [height, setHeight] = useState<number | undefined>();\n\n    useEffect(() => {\n        const resizeObserver = new ResizeObserver(entries => {\n            for (const entry of entries) {\n                if (entry.contentRect) {\n                    setWidth(entry.contentRect.width);\n                    setHeight(entry.contentRect.height);\n                }\n            }\n        });\n\n        if (elementRef.current) {\n            resizeObserver.observe(elementRef.current);\n        }\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, [elementRef]);\n\n    return [width, height];\n};\n\nexport default useElementSize;\n"],"names":["useElementSize","elementRef","width","setWidth","useState","height","setHeight","useEffect","resizeObserver","entries","entry"],"mappings":";AAQA,MAAMA,IAAiB,CAACC,MAAuC;AAC3D,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAA,GACpB,CAACC,GAAQC,CAAS,IAAIF,EAAA;AAE5B,SAAAG,EAAU,MAAM;AACZ,UAAMC,IAAiB,IAAI,eAAe,CAAAC,MAAW;AACjD,iBAAWC,KAASD;AAChB,QAAIC,EAAM,gBACNP,EAASO,EAAM,YAAY,KAAK,GAChCJ,EAAUI,EAAM,YAAY,MAAM;AAAA,IAG9C,CAAC;AAED,WAAIT,EAAW,WACXO,EAAe,QAAQP,EAAW,OAAO,GAGtC,MAAM;AACT,MAAAO,EAAe,WAAA;AAAA,IACnB;AAAA,EACJ,GAAG,CAACP,CAAU,CAAC,GAER,CAACC,GAAOG,CAAM;AACzB;"}

package/hooks/useEsc.js

@@ -1,10 +1,8 @@
-import useKey from './useKey';
-/**
- * Custom hook to execute a callback when the 'Escape' key is pressed.
- *
- * @param callback - The function to execute when the 'Escape' key is pressed.
- */
-const useEsc = (callback) => {
-    useKey(event => event.key === 'Escape' && callback(event));
+import o from "./useKey.js";
+const c = (e) => {
+  o((s) => s.key === "Escape" && e(s));
 };
-export default useEsc;
+export {
+  c as default
+};
+//# sourceMappingURL=useEsc.js.map

package/hooks/useEsc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEsc.js","sources":["../../src/hooks/useEsc.ts"],"sourcesContent":["import useKey from './useKey';\n\n/**\n * Custom hook to execute a callback when the 'Escape' key is pressed.\n *\n * @param callback - The function to execute when the 'Escape' key is pressed.\n */\nconst useEsc = (callback: (event: KeyboardEvent) => void) => {\n    useKey(event => event.key === 'Escape' && callback(event));\n};\n\nexport default useEsc;\n"],"names":["useEsc","callback","useKey","event"],"mappings":";AAOA,MAAMA,IAAS,CAACC,MAA6C;AACzD,EAAAC,EAAO,OAASC,EAAM,QAAQ,YAAYF,EAASE,CAAK,CAAC;AAC7D;"}

package/hooks/useEvent.js

@@ -1,21 +1,13 @@
-import { useEffect } from 'react';
-/**
- * Custom hook to add event listeners to the specified target.
- *
- * @param eventType - The type of event to listen for.
- * @param callback - The function to execute when the event occurs.
- * @param options - Optional. An object that specifies characteristics about the event listener.
- * @param target - Optional. The target element to which to attach the event listener.
- */
-const useEvent = (eventType, callback, options = false, target = document) => {
-    useEffect(() => {
-        if (!target || !target.addEventListener) {
-            return;
-        }
-        target.addEventListener(eventType, callback, options);
-        return () => {
-            target.removeEventListener(eventType, callback, options);
-        };
-    }, [eventType, options, target]);
+import { useEffect as f } from "react";
+const u = (n, d, r = !1, e = document) => {
+  f(() => {
+    if (!(!e || !e.addEventListener))
+      return e.addEventListener(n, d, r), () => {
+        e.removeEventListener(n, d, r);
+      };
+  }, [n, r, e]);
 };
-export default useEvent;
+export {
+  u as default
+};
+//# sourceMappingURL=useEvent.js.map

package/hooks/useEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvent.js","sources":["../../src/hooks/useEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype WindowEventMapWithFullscreen = {\n    fullscreenchange: Event;\n    webkitfullscreenchange: Event;\n    mozfullscreenchange: Event;\n\n    fullscreenerror: Event;\n    webkitfullscreenerror: Event;\n    mozfullscreenerror: Event;\n};\n\n/**\n * Custom hook to add event listeners to the specified target.\n *\n * @param eventType - The type of event to listen for.\n * @param callback - The function to execute when the event occurs.\n * @param options - Optional. An object that specifies characteristics about the event listener.\n * @param target - Optional. The target element to which to attach the event listener.\n */\nconst useEvent = <\n    K extends keyof WindowEventMap,\n    W extends keyof WindowEventMapWithFullscreen,\n    T extends HTMLElement = HTMLDivElement,\n>(\n    eventType: K | W,\n    callback: EventListener,\n    options: boolean | AddEventListenerOptions = false,\n    target: Document | Window | T | null = document\n) => {\n    useEffect(() => {\n        if (!target || !target.addEventListener) {\n            return;\n        }\n\n        target.addEventListener(eventType, callback, options);\n\n        return () => {\n            target.removeEventListener(eventType, callback, options);\n        };\n    }, [eventType, options, target]);\n};\n\nexport default useEvent;\n"],"names":["useEvent","eventType","callback","options","target","useEffect"],"mappings":";AAoBA,MAAMA,IAAW,CAKbC,GACAC,GACAC,IAA6C,IAC7CC,IAAuC,aACtC;AACD,EAAAC,EAAU,MAAM;AACZ,QAAI,GAACD,KAAU,CAACA,EAAO;AAIvB,aAAAA,EAAO,iBAAiBH,GAAWC,GAAUC,CAAO,GAE7C,MAAM;AACT,QAAAC,EAAO,oBAAoBH,GAAWC,GAAUC,CAAO;AAAA,MAC3D;AAAA,EACJ,GAAG,CAACF,GAAWE,GAASC,CAAM,CAAC;AACnC;"}