@vitus-labs/elements 0.22.0 → 0.23.0-alpha.2

package/lib/vitus-labs-elements.browser.js

@@ -1,8 +1,8 @@
 import { makeItResponsive, alignContent, extendCss, value } from '@vitus-labs/unistyle';
 export { Provider } from '@vitus-labs/unistyle';
-import React, { forwardRef, memo, useMemo, createRef, Children, useState, useEffect, createContext, useContext, useRef, useCallback } from 'react';
+import React, { forwardRef, memo, useMemo, createRef, useCallback, Children, useState, useEffect, createContext, useContext, useRef } from 'react';
 import { config, renderContent, get, isEmpty, pick, omit, context as context$1, throttle } from '@vitus-labs/core';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 
 // eslint-disable-next-line import/prefer-default-export
 const PKG_NAME = '@vitus-labs/elements';
@@ -33,7 +33,7 @@ const styles$2 = ({ theme: t, css }) => css `
       `};
   `};
 
-  ${t.contentAlignY === 'block' &&
+  ${t.alignY === 'block' &&
     css `
     height: 100%;
   `};
@@ -51,10 +51,7 @@ const styles$2 = ({ theme: t, css }) => css `
 
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
-const platformStyles = config.css `
-    box-sizing: border-box;
-  `
-    ;
+const platformStyles = 'box-sizing: border-box;' ;
 var Styled$2 = config.styled(config.component) `
   position: relative;
   ${platformStyles};
@@ -75,7 +72,7 @@ var Styled$2 = config.styled(config.component) `
 })};
 `;
 
-const component$7 = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
+const component$a = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
     const debugProps = process.env.NODE_ENV !== 'production'
         ? {
             'data-vl-element': 'Element',
@@ -89,6 +86,8 @@ const component$7 = forwardRef(({ children, tag, block, extendCss, direction, al
     };
     const needsFix = !props.dangerouslySetInnerHTML && tag && isWebFixNeeded(tag)
         ;
+    // eslint-disable-next-line no-nested-ternary
+    const asTag = (isInline ? 'span' : 'div') ;
     if (!needsFix || false) {
         return (React.createElement(Styled$2, { ...COMMON_PROPS, "$element": {
                 block,
@@ -103,7 +102,7 @@ const component$7 = forwardRef(({ children, tag, block, extendCss, direction, al
             block,
             extraStyles: extendCss,
         } },
-        React.createElement(Styled$2, { as: isInline ? 'span' : 'div', "$childFix": true, "$element": {
+        React.createElement(Styled$2, { as: asTag, "$childFix": true, "$element": {
                 direction,
                 alignX,
                 alignY,
@@ -181,7 +180,7 @@ var Styled$1 = config.styled(config.component) `
 })};
 `;
 
-const component$5 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+const component$8 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
     const debugProps = process.env.NODE_ENV !== 'production'
         ? {
             'data-vl-element': contentType,
@@ -197,7 +196,7 @@ const component$5 = ({ contentType, tag, parentDirection, direction, alignX, ali
             extraStyles: extendCss,
         }, ...debugProps, ...props }));
 };
-var component$6 = memo(component$5);
+var component$9 = memo(component$8);
 
 const INLINE_ELEMENTS = {
     span: true,
@@ -253,35 +252,17 @@ const EMPTY_ELEMENTS = {
 const isInlineElement = (tag) => tag ? INLINE_ELEMENTS[tag] : false;
 const getShouldBeEmpty = (tag) => tag ? EMPTY_ELEMENTS[tag] : false;
 
-const defaultDirection = 'inline';
-const defaultContentDirection = 'rows';
+const defaultBeforeAfterDirection = 'inline';
+const defaultDirection = 'rows';
 const defaultAlignX = 'left';
 const defaultAlignY = 'center';
-const component$4 = forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, block, equalCols, gap, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultContentDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }, ref) => {
+const component$7 = forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, block, equalCols, gap, direction = defaultDirection, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultBeforeAfterDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultBeforeAfterDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }, ref) => {
     // --------------------------------------------------------
     // check if should render only single element
     // --------------------------------------------------------
     const shouldBeEmpty = !!props.dangerouslySetInnerHTML ||
         (tag && getShouldBeEmpty(tag));
     // --------------------------------------------------------
-    // common wrapper props
-    // --------------------------------------------------------
-    const WRAPPER_PROPS = {
-        ref: ref || innerRef,
-        extendCss: css,
-        tag,
-        block,
-        contentDirection,
-        alignX: contentAlignX,
-        alignY: contentAlignY,
-        as: undefined, // reset styled-components `as` prop
-    };
-    // --------------------------------------------------------
-    // return simple/empty element like input
-    // --------------------------------------------------------
-    if (shouldBeEmpty)
-        return React.createElement(component$7, { ...WRAPPER_PROPS, ...props });
-    // --------------------------------------------------------
     // if not single element, calculate values
     // --------------------------------------------------------
     const isSimpleElement = !beforeContent && !afterContent;
@@ -291,8 +272,8 @@ const component$4 = forwardRef(({ innerRef, tag, label, content, children, befor
     // --------------------------------------------------------
     // direction & alignX & alignY calculations
     // --------------------------------------------------------
-    const calculateDirection = useMemo(() => {
-        let wrapperDirection;
+    const { wrapperDirection, wrapperAlignX, wrapperAlignY } = useMemo(() => {
+        let wrapperDirection = direction;
         let wrapperAlignX = alignX;
         let wrapperAlignY = alignY;
         if (isSimpleElement) {
@@ -315,21 +296,39 @@ const component$4 = forwardRef(({ innerRef, tag, label, content, children, befor
         contentDirection,
         contentAlignX,
         contentAlignY,
+        alignX,
+        alignY,
         direction,
     ]);
-    const { wrapperDirection, wrapperAlignX, wrapperAlignY } = calculateDirection;
-    const beforeContentRenderOutput = useMemo(() => renderContent(beforeContent), [beforeContent]);
-    const afterContentRenderOutput = useMemo(() => renderContent(afterContent), [afterContent]);
-    const contentRenderOutput = useMemo(() => renderContent(CHILDREN), [CHILDREN]);
-    return (React.createElement(component$7, { ...props, ...WRAPPER_PROPS, isInline: isInline, direction: wrapperDirection, alignX: wrapperAlignX, alignY: wrapperAlignY },
-        beforeContent && (React.createElement(component$6, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, beforeContentRenderOutput)),
-        isSimpleElement ? (contentRenderOutput) : (React.createElement(component$6, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
-        afterContent && (React.createElement(component$6, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, afterContentRenderOutput))));
+    // --------------------------------------------------------
+    // common wrapper props
+    // --------------------------------------------------------
+    const WRAPPER_PROPS = {
+        ref: ref || innerRef,
+        extendCss: css,
+        tag,
+        block,
+        direction: wrapperDirection,
+        alignX: wrapperAlignX,
+        alignY: wrapperAlignY,
+        as: undefined, // reset styled-components `as` prop
+    };
+    // --------------------------------------------------------
+    // return simple/empty element like input or image etc.
+    // --------------------------------------------------------
+    if (shouldBeEmpty) {
+        return React.createElement(component$a, { ...props, ...WRAPPER_PROPS });
+    }
+    const contentRenderOutput = renderContent(CHILDREN);
+    return (React.createElement(component$a, { ...props, ...WRAPPER_PROPS, isInline: isInline },
+        beforeContent && (React.createElement(component$9, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, renderContent(beforeContent))),
+        isSimpleElement ? (contentRenderOutput) : (React.createElement(component$9, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
+        afterContent && (React.createElement(component$9, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, renderContent(afterContent)))));
 });
 const name$4 = `${PKG_NAME}/Element`;
-component$4.displayName = name$4;
-component$4.pkgName = PKG_NAME;
-component$4.VITUS_LABS__COMPONENT = name$4;
+component$7.displayName = name$4;
+component$7.pkgName = PKG_NAME;
+component$7.VITUS_LABS__COMPONENT = name$4;
 
 /* eslint-disable no-param-reassign */
 const isNumber = (a, b) => Number.isInteger(a) && Number.isInteger(b);
@@ -394,15 +393,16 @@ const attachItemProps = ({ i, length, }) => {
         position,
     };
 };
-const component$3 = (props) => {
+const component$6 = (props) => {
     const { itemKey, valueName, children, component, data, wrapComponent: Wrapper, wrapProps, itemProps, } = props;
-    const renderedElement = (component, props) => renderContent(component, props);
-    const injectItemProps = typeof itemProps === 'function'
-        ? (props, extendedProps) => itemProps(props, extendedProps)
-        : () => itemProps;
-    const injectWrapItemProps = typeof wrapProps === 'function'
-        ? (props, extendedProps) => wrapProps(props, extendedProps)
-        : () => wrapProps;
+    const renderedElement = renderContent;
+    const injectItemProps = useMemo(() => (typeof itemProps === 'function' ? itemProps : () => itemProps), [itemProps]);
+    const injectWrapItemProps = useMemo(() => (typeof wrapProps === 'function' ? wrapProps : () => wrapProps), [wrapProps]);
+    const getKey = useCallback((item, index) => {
+        if (typeof itemKey === 'function')
+            return itemKey(item, index);
+        return index;
+    }, []);
     // --------------------------------------------------------
     // render children
     // --------------------------------------------------------
@@ -436,18 +436,11 @@ const component$3 = (props) => {
     // render array of strings or numbers
     // --------------------------------------------------------
     const renderSimpleArray = (data) => {
-        const renderData = data.filter((item) => item !== null || item !== undefined // remove empty values
-        );
-        const { length } = renderData;
-        // if it's empty
-        if (renderData.length === 0)
+        const { length } = data;
+        // if the data array is empty
+        if (data.length === 0)
             return null;
-        const getKey = (item, index) => {
-            if (typeof itemKey === 'function')
-                return itemKey(item, index);
-            return index;
-        };
-        return renderData.map((item, i) => {
+        return data.map((item, i) => {
             const key = getKey(item, i);
             const keyName = valueName || 'children';
             const extendedProps = attachItemProps({
@@ -521,11 +514,11 @@ const component$3 = (props) => {
         // render props component + data
         // --------------------------------------------------------
         if (component && Array.isArray(data)) {
-            const clearData = data.filter((item) => item !== null && item !== undefined);
-            const isSimpleArray = clearData.every((item) => typeof item === 'string' || typeof item === 'number');
+            const clearData = useMemo(() => data.filter((item) => item !== null && item !== undefined), [data]);
+            const isSimpleArray = useMemo(() => clearData.every((item) => typeof item === 'string' || typeof item === 'number'), [clearData]);
             if (isSimpleArray)
                 return renderSimpleArray(clearData);
-            const isComplexArray = clearData.every((item) => typeof item === 'object');
+            const isComplexArray = useMemo(() => clearData.every((item) => typeof item === 'object'), [clearData]);
             if (isComplexArray)
                 return renderComplexArray(clearData);
             return null;
@@ -538,19 +531,19 @@ const component$3 = (props) => {
     };
     return renderItems();
 };
-component$3.isIterator = true;
-component$3.RESERVED_PROPS = RESERVED_PROPS;
+component$6.isIterator = true;
+component$6.RESERVED_PROPS = RESERVED_PROPS;
 
-const Component$2 = forwardRef(({ rootElement = false, ...props }, ref) => {
-    const renderedList = React.createElement(component$3, { ...pick(props, component$3.RESERVED_PROPS) });
+const component$5 = forwardRef(({ rootElement = false, ...props }, ref) => {
+    const renderedList = React.createElement(component$6, { ...pick(props, component$6.RESERVED_PROPS) });
     if (!rootElement)
         return renderedList;
-    return (React.createElement(component$4, { ref: ref, ...omit(props, component$3.RESERVED_PROPS) }, renderedList));
+    return (React.createElement(component$7, { ref: ref, ...omit(props, component$6.RESERVED_PROPS) }, renderedList));
 });
 const name$3 = `${PKG_NAME}/List`;
-Component$2.displayName = name$3;
-Component$2.pkgName = PKG_NAME;
-Component$2.VITUS_LABS__COMPONENT = name$3;
+component$5.displayName = name$3;
+component$5.pkgName = PKG_NAME;
+component$5.VITUS_LABS__COMPONENT = name$3;
 
 const RESERVED_KEYS = [
     'type',
@@ -558,7 +551,7 @@ const RESERVED_KEYS = [
     'itemProps',
     'activeItemRequired',
 ];
-const Component$1 = (WrappedComponent) => {
+const component$4 = (WrappedComponent) => {
     const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     const Enhanced = (props) => {
         const { type = 'single', activeItemRequired, activeItems, itemProps = {}, ...rest } = props;
@@ -677,11 +670,11 @@ const Component$1 = (WrappedComponent) => {
         return React.createElement(WrappedComponent, { ...rest, itemProps: attachItemProps });
     };
     Enhanced.RESERVED_KEYS = RESERVED_KEYS;
-    Enhanced.displayName = `vitus-labs/elements/List/withActiveState(${displayName})`;
+    Enhanced.displayName = `@vitus-labs/elements/List/withActiveState(${displayName})`;
     return Enhanced;
 };
 
-const component$2 = ({ position = document.body , tag = 'div', children, }) => {
+const component$3 = ({ position = document.body , tag = 'div', children, }) => {
     const [element] = useState(document.createElement(tag) );
     if (!position || !element)
         return null;
@@ -691,17 +684,17 @@ const component$2 = ({ position = document.body , tag = 'div', children, }) => {
             position.removeChild(element);
         };
     }, []);
-    return ReactDOM.createPortal(children, element);
+    return createPortal(children, element);
 };
 const name$2 = `${PKG_NAME}/Portal`;
-component$2.displayName = name$2;
-component$2.pkgName = PKG_NAME;
-component$2.VITUS_LABS__COMPONENT = name$2;
+component$3.displayName = name$2;
+component$3.pkgName = PKG_NAME;
+component$3.VITUS_LABS__COMPONENT = name$2;
 
 const context = createContext({});
 const { Provider } = context;
 const useOverlayContext = () => useContext(context);
-const component$1 = ({ children, blocked, setBlocked, setUnblocked, }) => (React.createElement(Provider, { value: { blocked, setBlocked, setUnblocked } }, children));
+const component$2 = ({ children, blocked, setBlocked, setUnblocked, }) => (React.createElement(Provider, { value: { blocked, setBlocked, setUnblocked } }, children));
 
 var useOverlay = ({ isOpen = false, openOn = 'click', // click | hover
 closeOn = 'click', // click | 'clickOnTrigger' | 'clickOutsideContent' | hover | manual
@@ -710,11 +703,11 @@ align = 'bottom', // * main align prop * top | left | bottom | right
 position = 'fixed', // absolute | fixed | relative | static
 alignX = 'left', // left | center | right
 alignY = 'bottom', // top | center | bottom
-offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc = true, disabled, }) => {
+offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc = true, disabled, onOpen, onClose, }) => {
     const { rootSize } = useContext(context$1);
     const ctx = useOverlayContext();
     const [blocked, handleBlocked] = useState(false);
-    const [visible, setVisible] = useState(isOpen);
+    const [active, handleActive] = useState(isOpen);
     const [innerAlign, setInnerAlign] = useState(align);
     const [innerAlignX, setInnerAlignX] = useState(alignX);
     const [innerAlignY, setInnerAlignY] = useState(alignY);
@@ -722,116 +715,126 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
     const contentRef = useRef();
     const setBlocked = useCallback(() => handleBlocked(true), []);
     const setUnblocked = useCallback(() => handleBlocked(false), []);
+    const showContent = useCallback(() => {
+        handleActive(true);
+    }, []);
+    const hideContent = useCallback(() => {
+        handleActive(false);
+    }, []);
+    const hasCustomListener = !!customScrollListener;
     // if an Overlay has an Overlay child, this will prevent closing parent child
+    // + calculate correct position when an Overlay is opened
     useEffect(() => {
-        if (visible && ctx?.setBlocked)
-            ctx.setBlocked();
-        else if (!visible && ctx?.setUnblocked)
-            ctx.setUnblocked();
-    }, [visible]);
-    // calculate correct position when an Overlay is opened
-    useEffect(() => {
-        if (visible)
+        if (active) {
             calculateContentPosition();
-    }, [visible]);
-    // handles calculationg correct position of content
+            if (ctx?.setBlocked)
+                ctx.setBlocked();
+            if (onOpen)
+                onOpen();
+        }
+        else {
+            if (ctx?.setUnblocked)
+                ctx.setUnblocked();
+            if (onClose)
+                onClose();
+        }
+    }, [active]);
+    // handles calculating correct position of content
     // on document events (or custom scroll if set)
     useEffect(() => {
-        if (visible) {
-            window.addEventListener('resize', handleContentPosition, false);
-            window.addEventListener('scroll', handleContentPosition, false);
-            if (customScrollListener) {
-                customScrollListener.addEventListener('scroll', handleContentPosition, false);
-            }
+        if (!active)
+            return undefined;
+        window.addEventListener('resize', handleContentPosition, false);
+        window.addEventListener('scroll', handleContentPosition, false);
+        if (hasCustomListener) {
+            customScrollListener.addEventListener('scroll', handleContentPosition, false);
         }
         return () => {
             window.removeEventListener('resize', handleContentPosition, false);
             window.removeEventListener('scroll', handleContentPosition, false);
-            if (customScrollListener) {
+            if (hasCustomListener) {
                 customScrollListener.removeEventListener('scroll', handleContentPosition, false);
             }
         };
-    }, [visible, customScrollListener]);
+    }, [active, customScrollListener]);
     // make sure scrolling is blocked in case of modal windows or when
     // customScroll is set
     useEffect(() => {
-        if (visible) {
-            if (customScrollListener) {
+        const shouldSetOverflow = type === 'modal' && document.body;
+        if (active) {
+            if (hasCustomListener) {
                 // eslint-disable-next-line no-param-reassign
                 customScrollListener.style.overflow = 'hidden';
             }
-            else if (type === 'modal' && document.body) {
+            if (shouldSetOverflow) {
                 document.body.style.overflow = 'hidden';
             }
         }
         return () => {
-            if (customScrollListener) {
+            if (hasCustomListener) {
                 // eslint-disable-next-line no-param-reassign
                 customScrollListener.style.overflow = '';
             }
-            else if (type === 'modal' && document.body) {
+            if (shouldSetOverflow) {
                 document.body.style.overflow = '';
             }
         };
-    }, [visible, type, customScrollListener]);
+    }, [active, type, customScrollListener]);
+    // only when content is active handle closing
     useEffect(() => {
-        // enable overlay manipulation only when the state is NOT blocked=true
-        // nor in disabled state
-        if (!blocked || !disabled) {
-            if (openOn === 'click' ||
-                closeOn === 'click' ||
-                closeOn === 'clickOnTrigger' ||
-                closeOn === 'clickOutsideContent') {
-                window.addEventListener('click', handleVisibilityByEventType, false);
-            }
-            if (openOn === 'hover' || closeOn === 'hover') {
-                window.addEventListener('mousemove', handleMouseMove, false);
-            }
-            // only when content is visible
-            if (visible) {
-                if (customScrollListener) {
-                    customScrollListener.addEventListener('scroll', handleMouseMove, false);
-                }
-                window.addEventListener('scroll', handleMouseMove, false);
-                if (closeOnEsc) {
-                    window.addEventListener('keydown', handleEscKey);
-                }
-            }
+        if (!active)
+            return undefined;
+        window.addEventListener('scroll', handleVisibility, false);
+        if (hasCustomListener) {
+            customScrollListener.addEventListener('scroll', handleVisibility, false);
+        }
+        if (closeOnEsc) {
+            window.addEventListener('keydown', handleEscKey, false);
         }
         return () => {
-            window.removeEventListener('scroll', handleMouseMove, false);
-            window.removeEventListener('click', handleVisibilityByEventType, false);
-            window.removeEventListener('mousemove', handleMouseMove, false);
-            if (closeOnEsc) {
-                window.removeEventListener('keydown', handleEscKey);
+            window.removeEventListener('scroll', handleVisibility, false);
+            if (hasCustomListener) {
+                customScrollListener.removeEventListener('scroll', handleVisibility, false);
             }
-            if (customScrollListener) {
-                customScrollListener.removeEventListener('scroll', handleMouseMove, false);
+            if (closeOnEsc) {
+                window.removeEventListener('keydown', handleEscKey, false);
             }
         };
-    }, [openOn, closeOn, visible, blocked, disabled]);
-    const observeTrigger = (e) => {
-        if (e && e.target && triggerRef.current) {
-            return (triggerRef.current.contains(e.target) || e.target === triggerRef.current);
+    }, [active, customScrollListener]);
+    useEffect(() => {
+        // enable overlay manipulation only when the state is NOT blocked=true
+        // nor in disabled state
+        if (blocked || disabled)
+            return undefined;
+        if (openOn === 'click' ||
+            closeOn === 'click' ||
+            closeOn === 'clickOnTrigger' ||
+            closeOn === 'clickOutsideContent') {
+            window.addEventListener('click', handleClick, false);
         }
-        return false;
-    };
-    const observeContent = (e) => {
-        if (e && e.target && contentRef.current) {
-            return (contentRef.current.contains(e.target) || e.target === contentRef.current);
+        if (openOn === 'hover' || closeOn === 'hover') {
+            window.addEventListener('mousemove', handleVisibility, false);
+        }
+        return () => {
+            window.removeEventListener('click', handleClick, false);
+            window.removeEventListener('mousemove', handleVisibility, false);
+        };
+    }, [openOn, closeOn, blocked, disabled]);
+    const isNodeOrChild = (ref) => (e) => {
+        if (e && e.target && ref.current) {
+            return ref.current.contains(e.target) || e.target === ref.current;
         }
         return false;
     };
-    const showContent = useCallback(() => {
-        setVisible(true);
-    }, []);
-    const hideContent = useCallback(() => {
-        setVisible(false);
-    }, []);
+    const isTrigger = isNodeOrChild(triggerRef);
+    const isContent = isNodeOrChild(contentRef);
     const calculateContentPosition = () => {
-        if (!visible)
+        if (!active)
             return;
         if (!triggerRef.current || !contentRef.current) {
+            if (process.env.NODE_ENV === 'development') {
+                console.warn('Cannot access `ref` of trigger or content component.');
+            }
             return;
         }
         const triggerDimensions = triggerRef.current.getBoundingClientRect();
@@ -952,21 +955,17 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
         contentRef.current.style.right = value([overlayPosition.right], rootSize);
     };
     const handleVisibilityByEventType = (e) => {
-        if (!visible && !disabled) {
-            if (openOn === 'hover' && e.type === 'mousemove') {
-                if (observeTrigger(e)) {
-                    showContent();
-                }
-            }
-            if (openOn === 'click' && e.type === 'click') {
-                if (observeTrigger(e)) {
+        if (!active) {
+            if ((openOn === 'hover' && e.type === 'mousemove') ||
+                (openOn === 'click' && e.type === 'click')) {
+                if (isTrigger(e)) {
                     showContent();
                 }
             }
         }
-        if (visible) {
+        if (active) {
             if (closeOn === 'hover' && e.type === 'mousemove') {
-                if (!observeTrigger(e) && !observeContent(e)) {
+                if (!isTrigger(e) && !isContent(e)) {
                     hideContent();
                 }
             }
@@ -977,19 +976,20 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
                 hideContent();
             }
             if (closeOn === 'clickOnTrigger' && e.type === 'click') {
-                if (observeTrigger(e)) {
+                if (isTrigger(e)) {
                     hideContent();
                 }
             }
             if (closeOn === 'clickOutsideContent' && e.type === 'click') {
-                if (!observeContent(e)) {
+                if (!isContent(e)) {
                     hideContent();
                 }
             }
         }
     };
     const handleContentPosition = throttle(calculateContentPosition, throttleDelay);
-    const handleMouseMove = throttle(handleVisibilityByEventType, throttleDelay);
+    const handleClick = useCallback(handleVisibilityByEventType, []);
+    const handleVisibility = useCallback(throttle(handleVisibilityByEventType, throttleDelay), []);
     const handleEscKey = (e) => {
         if (e.key === 'Escape') {
             hideContent();
@@ -998,7 +998,7 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
     return {
         triggerRef,
         contentRef,
-        active: visible,
+        active,
         align: innerAlign,
         alignX: innerAlignX,
         alignY: innerAlignY,
@@ -1010,19 +1010,20 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
     };
 };
 
-const Component = ({ children, trigger, DOMLocation, triggerRefName = 'ref', contentRefName = 'ref', ...props }) => {
+const component$1 = ({ children, trigger, DOMLocation, triggerRefName = 'ref', contentRefName = 'ref', ...props }) => {
     const { active, triggerRef, contentRef, showContent, hideContent, align, alignX, alignY, ...ctx } = useOverlay(props);
-    const passHandlers = useMemo(() => props.openOn === 'manual' ||
-        props.closeOn === 'manual' ||
-        props.closeOn === 'clickOutsideContent', [props.openOn, props.closeOn]);
+    const { openOn, closeOn } = props;
+    const passHandlers = useMemo(() => openOn === 'manual' ||
+        closeOn === 'manual' ||
+        closeOn === 'clickOutsideContent', [openOn, closeOn]);
     return (React.createElement(React.Fragment, null,
         renderContent(trigger, {
             [triggerRefName]: triggerRef,
             active,
             ...(passHandlers ? { showContent, hideContent } : {}),
         }),
-        active && (React.createElement(component$2, { position: DOMLocation },
-            React.createElement(component$1, { ...ctx }, renderContent(children, {
+        active && (React.createElement(component$3, { position: DOMLocation },
+            React.createElement(component$2, { ...ctx }, renderContent(children, {
                 [contentRefName]: contentRef,
                 active,
                 align,
@@ -1031,10 +1032,10 @@ const Component = ({ children, trigger, DOMLocation, triggerRefName = 'ref', con
                 ...(passHandlers ? { showContent, hideContent } : {}),
             }))))));
 };
-const name$1 = `${PKG_NAME}/Ovelay`;
-Component.displayName = name$1;
-Component.pkgName = PKG_NAME;
-Component.VITUS_LABS__COMPONENT = name$1;
+const name$1 = `${PKG_NAME}/Overlay`;
+component$1.displayName = name$1;
+component$1.pkgName = PKG_NAME;
+component$1.VITUS_LABS__COMPONENT = name$1;
 
 const styles = ({ css, theme: t }) => css `
   ${t.extraStyles && extendCss(t.extraStyles)};
@@ -1064,5 +1065,5 @@ component.pkgName = PKG_NAME;
 component.VITUS_LABS__COMPONENT = name;
 component.isText = true;
 
-export { component$4 as Element, Component$2 as List, Component as Overlay, component$2 as Portal, component as Text, useOverlay, Component$1 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { component$7 as Element, component$5 as List, component$1 as Overlay, component$3 as Portal, component as Text, useOverlay, component$4 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
 //# sourceMappingURL=vitus-labs-elements.browser.js.map