@odigos/ui-kit 0.0.17 → 0.0.19

package/lib/{useTimeAgo-weEj7br6.js → useTransition-bXMKBfST.js}

@@ -1,11 +1,8 @@
-import { c as useNotificationStore, b as useModalStore, u as useDrawerStore, a as useEntityStore, d as useSetupStore } from './useSetupStore-CoYx1UQw.js';
-import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import { F as FORM_ALERTS } from './index-C_0J5P9M.js';
-import { A as ActionType, C as CodeAttributesKeyTypes, P as PayloadCollectionKeyTypes } from './index-RBS1MqCQ.js';
-import { S as StatusType, E as EntityTypes, F as FieldTypes } from './index-BVVVevuY.js';
-import { A as AddNodeTypes } from './index-B72aw6tI.js';
-import { g as getIdFromSseTarget } from './index-Hz7AAE0t.js';
-import { useState, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import './index-BFRz3l_w.js';
+import { f as useNotificationStore } from './index-BazfJyRh.js';
+import { CodeAttributesKeyTypes, PayloadCollectionKeyTypes } from './types.js';
+import styled from 'styled-components';
 
 const useGenericForm = (initialFormData) => {
     function copyInitial() {
@@ -64,341 +61,69 @@ const useGenericForm = (initialFormData) => {
     };
 };
 
-const INITIAL$3 = {
-    // @ts-ignore (TS complains about empty string because we expect an "ActionsType", but it's fine)
-    type: '',
-    name: '',
-    notes: '',
-    signals: [],
-    disabled: false,
-    clusterAttributes: null,
-    renames: null,
-    attributeNamesToDelete: null,
-    piiCategories: null,
-    fallbackSamplingRatio: null,
-    samplingPercentage: null,
-    endpointsFilters: null,
-};
-const useActionFormData = () => {
-    const { addNotification } = useNotificationStore();
-    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL$3);
-    const validateForm = (params) => {
-        const errors = {};
-        let ok = true;
-        Object.entries(formData).forEach(([k, v]) => {
-            switch (k) {
-                case 'type':
-                case 'signals':
-                    if (isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'clusterAttributes':
-                    if (formData.type === ActionType.AddClusterInfo && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'renames':
-                    if (formData.type === ActionType.RenameAttributes && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'attributeNamesToDelete':
-                    if (formData.type === ActionType.DeleteAttributes && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'piiCategories':
-                    if (formData.type === ActionType.PiiMasking && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'fallbackSamplingRatio':
-                    if (formData.type === ActionType.ErrorSampler && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'samplingPercentage':
-                    if (formData.type === ActionType.ProbabilisticSampler && isEmpty(v))
-                        errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                    break;
-                case 'endpointsFilters':
-                    if (formData.type === ActionType.LatencySampler) {
-                        if (isEmpty(v))
-                            errors[k] = FORM_ALERTS.FIELD_IS_REQUIRED;
-                        v?.forEach((endpoint) => {
-                            if (endpoint.httpRoute.charAt(0) !== '/')
-                                errors[k] = FORM_ALERTS.LATENCY_HTTP_ROUTE;
-                        });
-                    }
-                    break;
+const useContainerSize = () => {
+    const ref = useRef(null);
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    useEffect(() => {
+        const resize = () => {
+            if (ref.current) {
+                const { width, height } = ref.current.getBoundingClientRect();
+                setWidth(width);
+                setHeight(height);
             }
-        });
-        ok = !Object.values(errors).length;
-        if (!ok && params?.withAlert) {
-            addNotification({
-                type: StatusType.Warning,
-                title: params.alertTitle,
-                message: FORM_ALERTS.REQUIRED_FIELDS,
-                hideFromHistory: true,
-            });
-        }
-        handleErrorChange(undefined, undefined, errors);
-        return ok;
-    };
-    const loadFormWithDrawerItem = ({ type, spec }) => {
-        const updatedData = {
-            ...INITIAL$3,
-            type,
         };
-        Object.entries(spec).forEach(([k, v]) => {
-            if (!!v) {
-                switch (k) {
-                    case 'actionName': {
-                        updatedData['name'] = v;
-                        break;
-                    }
-                    case 'type':
-                    case 'notes':
-                    case 'signals':
-                    case 'disabled':
-                    case 'collectContainerAttributes':
-                    case 'collectWorkloadId':
-                    case 'collectClusterId':
-                    case 'labelsAttributes':
-                    case 'annotationsAttributes':
-                    case 'clusterAttributes':
-                    case 'attributeNamesToDelete':
-                    case 'renames':
-                    case 'piiCategories':
-                    case 'fallbackSamplingRatio':
-                    case 'samplingPercentage':
-                    case 'endpointsFilters': {
-                        // @ts-ignore
-                        updatedData[k] = v;
-                        break;
-                    }
-                }
-            }
-        });
-        handleFormChange(undefined, undefined, updatedData);
-    };
+        resize();
+        window.addEventListener('resize', resize);
+        return () => window.removeEventListener('resize', resize);
+    }, []);
     return {
-        formData,
-        formErrors,
-        handleFormChange,
-        resetFormData,
-        validateForm,
-        loadFormWithDrawerItem,
-    };
-};
-
-const useClickNode = () => {
-    const { setCurrentModal } = useModalStore();
-    const { setDrawerType, setDrawerEntityId } = useDrawerStore();
-    const onClickNode = (_, object) => {
-        const { data: { id, type }, } = object;
-        switch (type) {
-            case EntityTypes.Source:
-            case EntityTypes.Destination:
-            case EntityTypes.Action:
-            case EntityTypes.InstrumentationRule:
-                setDrawerType(type);
-                setDrawerEntityId(id);
-                break;
-            case AddNodeTypes.AddSource:
-                setCurrentModal(EntityTypes.Source);
-                break;
-            case AddNodeTypes.AddDestination:
-                setCurrentModal(EntityTypes.Destination);
-                break;
-            case AddNodeTypes.AddAction:
-                setCurrentModal(EntityTypes.Action);
-                break;
-            case AddNodeTypes.AddRule:
-                setCurrentModal(EntityTypes.InstrumentationRule);
-                break;
-            default:
-                console.warn('Unhandled node click', object);
-                break;
-        }
+        containerRef: ref,
+        containerWidth: width,
+        containerHeight: height,
     };
-    return { onClickNode };
 };
 
-const useClickNotification = () => {
-    const { setDrawerType, setDrawerEntityId } = useDrawerStore();
-    const { markAsDismissed, markAsSeen } = useNotificationStore();
-    const onClickNotification = (notif, options) => {
-        const { id, crdType, target } = notif;
-        const { dismissToast } = options || {};
-        if (crdType && target) {
-            switch (crdType) {
-                case EntityTypes.InstrumentationRule:
-                    setDrawerType(EntityTypes.InstrumentationRule);
-                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.InstrumentationRule));
-                    break;
-                case EntityTypes.Source:
-                case 'InstrumentationConfig':
-                case 'InstrumentationInstance':
-                    setDrawerType(EntityTypes.Source);
-                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.Source));
-                    break;
-                case EntityTypes.Action:
-                    setDrawerType(EntityTypes.Action);
-                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.Action));
-                    break;
-                case EntityTypes.Destination:
-                case 'Destination':
-                    setDrawerType(EntityTypes.Destination);
-                    setDrawerEntityId(getIdFromSseTarget(target, EntityTypes.Destination));
-                    break;
-                default:
-                    console.warn('notif click not handled for:', { crdType, target });
-                    break;
-            }
-        }
-        markAsSeen(id);
-        if (dismissToast)
-            markAsDismissed(id);
-    };
-    return { onClickNotification };
-};
-
-const INITIAL$2 = {
-    // @ts-ignore form should be initialized with empty values
-    type: '',
-    name: '',
-    exportedSignals: {
-        logs: false,
-        metrics: false,
-        traces: false,
-    },
-    fields: [],
-};
-const buildFormDynamicFields = (fields) => {
-    return fields
-        .filter((f) => !!f)
-        .map((f) => {
-        const { name, componentType, componentProperties, displayName, initialValue, renderCondition } = f;
-        switch (componentType) {
-            case FieldTypes.Dropdown: {
-                const componentPropertiesJson = safeJsonParse(componentProperties, {});
-                const options = Array.isArray(componentPropertiesJson.values)
-                    ? componentPropertiesJson.values.map((value) => ({
-                        id: value,
-                        value,
-                    }))
-                    : Object.entries(componentPropertiesJson.values).map(([key, value]) => ({
-                        id: key,
-                        value,
-                    }));
-                return {
-                    name,
-                    componentType: componentType,
-                    title: displayName,
-                    value: initialValue,
-                    placeholder: componentPropertiesJson.placeholder || 'Select an option',
-                    options,
-                    renderCondition,
-                    ...componentPropertiesJson,
-                };
-            }
-            default: {
-                const componentPropertiesJson = safeJsonParse(componentProperties, {});
-                return {
-                    name,
-                    componentType,
-                    title: displayName,
-                    value: initialValue,
-                    renderCondition,
-                    ...componentPropertiesJson,
-                };
+const useCopy = () => {
+    const [isCopied, setIsCopied] = useState(false);
+    const [copiedIndex, setCopiedIndex] = useState(-1);
+    const clickCopy = async (str, idx) => {
+        if (!isCopied) {
+            setIsCopied(true);
+            if (idx !== undefined)
+                setCopiedIndex(idx);
+            if (navigator?.clipboard && navigator.clipboard.writeText) {
+                try {
+                    await navigator.clipboard.writeText(str);
+                }
+                catch (err) {
+                    console.error('Clipboard write failed:', err);
+                }
             }
-        }
-    });
-};
-const useDestinationFormData = (params) => {
-    const { supportedSignals, preLoadedFields } = params || {};
-    const { addNotification } = useNotificationStore();
-    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL$2);
-    const [yamlFields, setYamlFields] = useState([]);
-    const [dynamicFields, setDynamicFields] = useState([]);
-    useEffect(() => {
-        if (yamlFields) {
-            setDynamicFields(buildFormDynamicFields(yamlFields).map((field) => {
-                // if we have preloaded fields, we need to set the value of the field
-                // (this can be from an odigos-detected-destination during create, or from an existing destination during edit/update)
-                if (!!preLoadedFields) {
-                    const parsedFields = typeof preLoadedFields === 'string' ? safeJsonParse(preLoadedFields, {}) : preLoadedFields;
-                    if (field.name in parsedFields) {
-                        return {
-                            ...field,
-                            // @ts-ignore
-                            value: parsedFields[field.name],
-                        };
-                    }
+            else {
+                // Fallback: Create a temporary textarea
+                const textArea = document.createElement('textarea');
+                textArea.value = str;
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
                 }
-                return field;
-            }));
-        }
-        else {
-            setDynamicFields([]);
-        }
-    }, [yamlFields, preLoadedFields]);
-    useEffect(() => {
-        handleFormChange('fields', dynamicFields.map((field) => ({
-            key: field.name,
-            value: field.value,
-        })));
-    }, [dynamicFields]);
-    useEffect(() => {
-        const { logs, metrics, traces } = supportedSignals || {};
-        handleFormChange('exportedSignals', {
-            logs: logs?.supported || false,
-            metrics: metrics?.supported || false,
-            traces: traces?.supported || false,
-        });
-    }, [supportedSignals]);
-    const validateForm = (params) => {
-        const errors = {};
-        let ok = true;
-        dynamicFields.forEach(({ name, value, required }) => {
-            if (required && !value) {
-                ok = false;
-                errors[name] = FORM_ALERTS.FIELD_IS_REQUIRED;
+                catch (err) {
+                    console.error('execCommand copy failed:', err);
+                }
+                document.body.removeChild(textArea);
             }
-        });
-        if (!ok && params?.withAlert) {
-            addNotification({
-                type: StatusType.Warning,
-                title: params.alertTitle,
-                message: FORM_ALERTS.REQUIRED_FIELDS,
-                hideFromHistory: true,
-            });
+            setTimeout(() => {
+                setIsCopied(false);
+                setCopiedIndex(-1);
+            }, 1000);
         }
-        handleErrorChange(undefined, undefined, errors);
-        return ok;
-    };
-    const loadFormWithDrawerItem = ({ destinationType: { type }, name, exportedSignals, fields }) => {
-        const updatedData = {
-            ...INITIAL$2,
-            type,
-            name,
-            exportedSignals,
-            fields: Object.entries(safeJsonParse(fields, {})).map(([key, value]) => ({ key, value })),
-        };
-        handleFormChange(undefined, undefined, updatedData);
-    };
-    return {
-        formData,
-        formErrors,
-        handleFormChange,
-        resetFormData,
-        validateForm,
-        loadFormWithDrawerItem,
-        yamlFields,
-        setYamlFields,
-        dynamicFields,
-        setDynamicFields,
     };
+    return { isCopied, copiedIndex, clickCopy };
 };
 
-const INITIAL$1 = {
+const INITIAL = {
     ruleName: '',
     notes: '',
     disabled: false,
@@ -421,7 +146,7 @@ const INITIAL$1 = {
 };
 const useInstrumentationRuleFormData = () => {
     const { addNotification } = useNotificationStore();
-    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL$1);
+    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL);
     const validateForm = (params) => {
         const errors = {};
         let ok = true;
@@ -430,7 +155,7 @@ const useInstrumentationRuleFormData = () => {
     };
     const loadFormWithDrawerItem = ({ ruleName, notes, disabled, payloadCollection, codeAttributes }) => {
         const updatedData = {
-            ...INITIAL$1,
+            ...INITIAL,
             ruleName,
             notes,
             disabled,
@@ -465,222 +190,44 @@ const useInstrumentationRuleFormData = () => {
     };
 };
 
-const INITIAL = {
-    otelServiceName: '',
-};
-const useSourceFormData = () => {
-    const { addNotification } = useNotificationStore();
-    const { formData, formErrors, handleFormChange, handleErrorChange, resetFormData } = useGenericForm(INITIAL);
-    const validateForm = (params) => {
-        const errors = {};
-        let ok = true;
-        handleErrorChange(undefined, undefined, errors);
-        return ok;
-    };
-    const loadFormWithDrawerItem = ({ otelServiceName, name }) => {
-        const updatedData = {
-            ...INITIAL,
-            otelServiceName: otelServiceName || name || '',
+const useKeyDown = ({ active, key, withAltKey, withCtrlKey, withShiftKey, withMetaKey }, callback) => {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (active &&
+                key === e.key &&
+                (!withAltKey || (withAltKey && e.altKey)) &&
+                (!withCtrlKey || (withCtrlKey && e.ctrlKey)) &&
+                (!withShiftKey || (withShiftKey && e.shiftKey)) &&
+                (!withMetaKey || (withMetaKey && e.metaKey))) {
+                e.preventDefault();
+                e.stopPropagation();
+                callback(e);
+            }
         };
-        handleFormChange(undefined, undefined, updatedData);
-    };
-    return {
-        formData,
-        formErrors,
-        handleFormChange,
-        resetFormData,
-        validateForm,
-        loadFormWithDrawerItem,
-    };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [key, active, withAltKey, withCtrlKey, withShiftKey, withMetaKey, callback]);
+    return null;
 };
 
-const useSourceSelectionFormData = (params) => {
-    const { namespaces } = useEntityStore();
-    const { selectedNamespace, onSelectNamespace, namespace } = params || {};
-    // only for "onboarding" - get unsaved values and set to state
-    // (this is to persist the values when user navigates back to this page)
-    const { configuredSources, configuredFutureApps, availableSources } = useSetupStore();
-    // Keeps intial values fetched from API, so we can later filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist sources".
-    const [recordedInitialSources, setRecordedInitialSources] = useState(availableSources);
-    const [selectAllForNamespace, setSelectAllForNamespace] = useState('');
-    const [selectedSources, setSelectedSources] = useState(configuredSources);
-    const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
-    useEffect(() => {
-        if (!!namespaces?.length) {
-            // initialize all states (to avoid undefined errors)
-            setRecordedInitialSources((prev) => {
-                const payload = { ...prev };
-                namespaces.forEach(({ name }) => (payload[name] = payload[name] || []));
-                return payload;
-            });
-            setSelectedSources((prev) => {
-                const payload = { ...prev };
-                namespaces.forEach(({ name }) => (payload[name] = payload[name] || []));
-                return payload;
-            });
-            setSelectedFutureApps((prev) => {
-                const payload = { ...prev };
-                namespaces.forEach(({ name, selected }) => (payload[name] = payload[name] || selected || false));
-                return payload;
-            });
-        }
-    }, [namespaces]);
-    useEffect(() => {
-        if (!!namespace) {
-            // initialize sources for this namespace
-            const { name, sources = [] } = namespace;
-            setRecordedInitialSources((prev) => ({
-                ...prev,
-                [name]: sources.map(({ name, kind, selected, numberOfInstances }) => ({
-                    name,
-                    kind,
-                    selected,
-                    numberOfInstances,
-                })),
-            }));
-            setSelectedSources((prev) => ({
-                ...prev,
-                [name]: !!prev[name].length
-                    ? prev[name]
-                    : sources.map(({ name, kind, selected, numberOfInstances }) => ({
-                        name,
-                        kind,
-                        selected,
-                        numberOfInstances,
-                    })),
-            }));
-        }
-    }, [namespace]);
-    // form filters
-    const [searchText, setSearchText] = useState('');
-    const [showSelectedOnly, setShowSelectedOnly] = useState(false);
-    const onSelectAll = useCallback((selected, ns, selectionsByNamespace) => {
-        // When clicking "select all" on a single namespace
-        if (!!ns) {
-            if (!selectionsByNamespace) {
-                // If the sources are not loaded yet, call the onSelectNamespace to load the sources
-                onSelectNamespace?.(selected ? ns : '');
-                // Set the state, so the interval would be able to use the namespace
-                setSelectAllForNamespace(selected ? ns : '');
-            }
-            else if (!!selectionsByNamespace?.[ns]?.length) {
-                // Clear the state, so the interval would stop
-                setSelectAllForNamespace('');
-            }
-            // Set the selected sources
-            setSelectedSources((prev) => ({
-                ...prev,
-                [ns]: selectionsByNamespace?.[ns]?.map((source) => ({
-                    ...source,
-                    selected,
-                })) || [],
-            }));
-            // setSelectedFutureApps((prev) => ({
-            //   ...prev,
-            //   [ns]: !!selectionsByNamespace?.[ns]?.length ? selected : false,
-            // }))
-        }
-        // When clicking "select all" on all namespaces
-        else {
-            setSelectedSources((prev) => {
-                const payload = { ...prev };
-                Object.entries(payload).forEach(([key, sources]) => {
-                    payload[key] = sources.map((source) => ({ ...source, selected }));
-                });
-                return payload;
-            });
-        }
-    }, [selectedSources]);
-    // This is to keep trying "select all" per namespace, until the sources are loaded (allows for 1-click, better UX).
+const useOnClickOutside = (ref, handler) => {
     useEffect(() => {
-        if (!!selectAllForNamespace) {
-            const interval = setInterval(() => onSelectAll(true, selectAllForNamespace, selectedSources), 100);
-            return () => clearInterval(interval);
-        }
-    }, [selectAllForNamespace, onSelectAll]);
-    const onSelectSource = (source, namespace) => {
-        const id = namespace || selectedNamespace;
-        if (!id)
-            return;
-        const arr = [...(selectedSources[id] || [])];
-        const foundIdx = arr.findIndex(({ name, kind }) => name === source.name && kind === source.kind);
-        if (foundIdx !== -1) {
-            // Replace the item with a new object to avoid mutating a possibly read-only object
-            const updatedItem = { ...arr[foundIdx], selected: !arr[foundIdx].selected };
-            arr[foundIdx] = updatedItem;
-        }
-        else {
-            arr.push({ ...source, selected: true });
-        }
-        setSelectedSources((prev) => ({ ...prev, [id]: arr }));
-    };
-    const onSelectFutureApps = (bool, namespace) => {
-        const id = namespace || selectedNamespace;
-        if (!id)
-            return;
-        setSelectedFutureApps((prev) => ({ ...prev, [id]: bool }));
-    };
-    const filterNamespaces = (options) => {
-        const { cancelSearch } = options || {};
-        const namespaces = Object.entries(selectedSources);
-        const isSearchOk = (targetText) => cancelSearch || !searchText || targetText.toLowerCase().includes(searchText);
-        return namespaces.filter(([namespace]) => isSearchOk(namespace));
-    };
-    const filterSources = (namespace, options) => {
-        const { cancelSearch, cancelSelected } = options || {};
-        const id = namespace || selectedNamespace;
-        if (!id)
-            return [];
-        const isSearchOk = (targetText) => cancelSearch || !searchText || targetText.toLowerCase().includes(searchText);
-        const isOnlySelectedOk = (sources, compareKey, target) => cancelSelected || !showSelectedOnly || !!sources.find((item) => item[compareKey] === target && item.selected);
-        return selectedSources[id].filter((source) => isSearchOk(source.name) && isOnlySelectedOk(selectedSources[id], 'name', source.name));
-    };
-    // This is to filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist sources".
-    const getApiSourcesPayload = () => {
-        const payload = {};
-        Object.entries(selectedSources).forEach(([namespace, sources]) => {
-            sources.forEach((source) => {
-                const foundInitial = recordedInitialSources[namespace]?.find((initialSource) => initialSource.name === source.name && initialSource.kind === source.kind);
-                if (foundInitial?.selected !== source.selected) {
-                    if (!payload[namespace])
-                        payload[namespace] = [];
-                    payload[namespace].push({
-                        name: source.name,
-                        kind: source.kind,
-                        selected: source.selected,
-                    });
-                }
-            });
-        });
-        return payload;
-    };
-    // This is to filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist namespaces".
-    const getApiFutureAppsPayload = () => {
-        const payload = {};
-        Object.entries(selectedFutureApps).forEach(([namespace, selected]) => {
-            const foundInitial = namespaces?.find((ns) => ns.name === namespace);
-            if (foundInitial?.selected !== selected) {
-                payload[namespace] = selected;
+        const listener = (event) => {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
             }
-        });
-        return payload;
-    };
-    return {
-        recordedInitialSources,
-        filterNamespaces,
-        filterSources,
-        getApiSourcesPayload,
-        getApiFutureAppsPayload,
-        selectedSources,
-        onSelectSource,
-        selectedFutureApps,
-        onSelectFutureApps,
-        onSelectAll,
-        searchText,
-        setSearchText,
-        showSelectedOnly,
-        setShowSelectedOnly,
-    };
+            handler();
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
 };
 
 // Fallback locale.
@@ -3921,4 +3468,26 @@ const useTimeAgo = () => {
     return timeAgo;
 };
 
-export { useClickNode as a, useClickNotification as b, useDestinationFormData as c, useGenericForm as d, useInstrumentationRuleFormData as e, useSourceFormData as f, useSourceSelectionFormData as g, useTimeAgo as h, useActionFormData as u };
+const useTransition = ({ container, animateIn, animateOut, duration = 300 }) => {
+    const Animated = styled(container) `
+    animation-name: ${({ $isEntering, $isLeaving }) => ($isEntering ? animateIn : $isLeaving ? animateOut : 'none')};
+    animation-duration: ${duration}ms;
+    animation-fill-mode: forwards;
+  `;
+    // !! Do not deprecate this "useCallback" hook, it is necessary for the transition to work properly
+    const Transition = useCallback(({ children, enter, ...props }) => {
+        const [mounted, setMounted] = useState(false);
+        useEffect(() => {
+            const t = setTimeout(() => setMounted(enter), duration + 50); // +50ms to ensure the animation is finished
+            return () => clearTimeout(t);
+        }, [enter, duration]);
+        if (!enter && !mounted)
+            return null;
+        return (React.createElement(Animated, { "$isEntering": enter, "$isLeaving": !enter && mounted, ...props }, children));
+    }, 
+    // !! Do not add dependencies here, it will cause re-renders which we want to avoid
+    []);
+    return Transition;
+};
+
+export { useCopy as a, useGenericForm as b, useInstrumentationRuleFormData as c, useKeyDown as d, useOnClickOutside as e, useTimeAgo as f, useTransition as g, useContainerSize as u };