@vitus-labs/elements 0.64.0 → 0.66.0

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

@@ -74,7 +74,7 @@ var Styled$2 = config.styled(config.component) `
 })};
 `;
 
-const component$5 = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
+const component$4 = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
     const debugProps = process.env.NODE_ENV !== 'production'
         ? {
             'data-vl-element': 'Element',
@@ -179,7 +179,7 @@ var Styled$1 = config.styled(config.component) `
 })};
 `;
 
-const Component$5 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+const Component$6 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
     const debugProps = process.env.NODE_ENV !== 'production'
         ? {
             'data-vl-element': contentType,
@@ -196,7 +196,7 @@ const Component$5 = ({ contentType, tag, parentDirection, direction, alignX, ali
             extraStyles: extendCss,
         }, ...debugProps, ...props }));
 };
-var component$4 = memo(Component$5);
+var component$3 = memo(Component$6);
 
 const INLINE_ELEMENTS = {
     span: true,
@@ -264,7 +264,7 @@ const defaultDirection = 'inline';
 const defaultContentDirection = '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$5 = 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) => {
     // --------------------------------------------------------
     // check if should render only single element
     // --------------------------------------------------------
@@ -325,18 +325,18 @@ const Component$4 = forwardRef(({ innerRef, tag, label, content, children, befor
     // return simple/empty element like input or image etc.
     // --------------------------------------------------------
     if (shouldBeEmpty) {
-        return React.createElement(component$5, { ...props, ...WRAPPER_PROPS });
+        return React.createElement(component$4, { ...props, ...WRAPPER_PROPS });
     }
     const contentRenderOutput = render(CHILDREN);
-    return (React.createElement(component$5, { ...props, ...WRAPPER_PROPS, isInline: isInline },
-        beforeContent && (React.createElement(component$4, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, render(beforeContent))),
-        isSimpleElement ? (contentRenderOutput) : (React.createElement(component$4, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
-        afterContent && (React.createElement(component$4, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, render(afterContent)))));
+    return (React.createElement(component$4, { ...props, ...WRAPPER_PROPS, isInline: isInline },
+        beforeContent && (React.createElement(component$3, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, render(beforeContent))),
+        isSimpleElement ? (contentRenderOutput) : (React.createElement(component$3, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
+        afterContent && (React.createElement(component$3, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, render(afterContent)))));
 });
 const name$5 = `${PKG_NAME}/Element`;
-Component$4.displayName = name$5;
-Component$4.pkgName = PKG_NAME;
-Component$4.VITUS_LABS__COMPONENT = name$5;
+Component$5.displayName = name$5;
+Component$5.pkgName = PKG_NAME;
+Component$5.VITUS_LABS__COMPONENT = name$5;
 
 // @ts-nocheck
 const isNumber = (a, b) => Number.isInteger(a) && Number.isInteger(b);
@@ -401,7 +401,7 @@ const attachItemProps = ({ i, length, }) => {
         position,
     };
 };
-const Component$3 = (props) => {
+const Component$4 = (props) => {
     const { itemKey, valueName, children, component, data, wrapComponent: Wrapper, wrapProps, itemProps, } = props;
     const injectItemProps = useMemo(() => (typeof itemProps === 'function' ? itemProps : () => itemProps), [itemProps]);
     const injectWrapItemProps = useMemo(() => (typeof wrapProps === 'function' ? wrapProps : () => wrapProps), [wrapProps]);
@@ -547,19 +547,19 @@ const Component$3 = (props) => {
     };
     return renderItems();
 };
-Component$3.isIterator = true;
-Component$3.RESERVED_PROPS = RESERVED_PROPS;
+Component$4.isIterator = true;
+Component$4.RESERVED_PROPS = RESERVED_PROPS;
 
-const component$3 = forwardRef(({ rootElement = false, ...props }, ref) => {
-    const renderedList = React.createElement(Component$3, { ...pick(props, Component$3.RESERVED_PROPS) });
+const component$2 = forwardRef(({ rootElement = false, ...props }, ref) => {
+    const renderedList = React.createElement(Component$4, { ...pick(props, Component$4.RESERVED_PROPS) });
     if (!rootElement)
         return renderedList;
-    return (React.createElement(Component$4, { ref: ref, ...omit(props, Component$3.RESERVED_PROPS) }, renderedList));
+    return (React.createElement(Component$5, { ref: ref, ...omit(props, Component$4.RESERVED_PROPS) }, renderedList));
 });
 const name$4 = `${PKG_NAME}/List`;
-component$3.displayName = name$4;
-component$3.pkgName = PKG_NAME;
-component$3.VITUS_LABS__COMPONENT = name$4;
+component$2.displayName = name$4;
+component$2.pkgName = PKG_NAME;
+component$2.VITUS_LABS__COMPONENT = name$4;
 
 // @ts-nocheck
 const RESERVED_KEYS = [
@@ -568,7 +568,7 @@ const RESERVED_KEYS = [
     'itemProps',
     'activeItemRequired',
 ];
-const component$2 = (WrappedComponent) => {
+const component$1 = (WrappedComponent) => {
     const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     const Enhanced = (props) => {
         const { type = 'single', activeItemRequired, activeItems, itemProps = {}, ...rest } = props;
@@ -691,7 +691,7 @@ const component$2 = (WrappedComponent) => {
     return Enhanced;
 };
 
-const Component$2 = ({ DOMLocation, tag = 'div', children, }) => {
+const Component$3 = ({ DOMLocation, tag = 'div', children, }) => {
     const [element, setElement] = useState();
     useEffect(() => {
         if (!tag)
@@ -709,17 +709,24 @@ const Component$2 = ({ DOMLocation, tag = 'div', children, }) => {
     return createPortal(children, element);
 };
 const name$3 = `${PKG_NAME}/Portal`;
-Component$2.displayName = name$3;
-Component$2.pkgName = PKG_NAME;
-Component$2.VITUS_LABS__COMPONENT = name$3;
+Component$3.displayName = name$3;
+Component$3.pkgName = PKG_NAME;
+Component$3.VITUS_LABS__COMPONENT = name$3;
 
 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, }) => {
+    const ctx = useMemo(() => ({
+        blocked,
+        setBlocked,
+        setUnblocked,
+    }), [blocked, setBlocked, setUnblocked]);
+    return React.createElement(Provider, { value: ctx }, children);
+};
 
 /* eslint-disable no-console */
-var useOverlay = ({ isOpen = false, openOn = 'click', // click | hover
+const useOverlay = ({ isOpen = false, openOn = 'click', // click | hover
 closeOn = 'click', // click | 'clickOnTrigger' | 'clickOutsideContent' | hover | manual
 type = 'dropdown', // dropdown | tooltip | popover | modal
 position = 'fixed', // absolute | fixed | relative | static
@@ -746,7 +753,7 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
     }, []);
     const calculateContentPosition = useCallback(() => {
         const overlayPosition = {};
-        if (!active)
+        if (!active || !isContentLoaded)
             return overlayPosition;
         if (!triggerRef.current || !contentRef.current) {
             if (process.env.NODE_ENV === 'development') {
@@ -892,13 +899,14 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
         }
         return overlayPosition;
     }, [
+        isContentLoaded,
         active,
-        type,
         align,
         alignX,
         alignY,
         offsetX,
         offsetY,
+        type,
         triggerRef,
         contentRef,
     ]);
@@ -907,12 +915,17 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
             return;
         const setValue = (param) => value(param, rootSize);
         // ADD POSITION STYLES TO CONTENT
+        // eslint-disable-next-line no-param-reassign
         contentRef.current.style.position = position;
+        // eslint-disable-next-line no-param-reassign
         contentRef.current.style.top = setValue(values.top);
+        // eslint-disable-next-line no-param-reassign
         contentRef.current.style.bottom = setValue(values.bottom);
+        // eslint-disable-next-line no-param-reassign
         contentRef.current.style.left = setValue(values.left);
+        // eslint-disable-next-line no-param-reassign
         contentRef.current.style.right = setValue(values.right);
-    }, [rootSize, position, contentRef]);
+    }, [position, rootSize, contentRef]);
     const setContentPosition = useCallback(() => {
         const currentPosition = calculateContentPosition();
         assignContentPosition(currentPosition);
@@ -923,11 +936,11 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
         }
         return false;
     };
-    const isTrigger = isNodeOrChild(triggerRef);
-    const isContent = isNodeOrChild(contentRef);
     const handleVisibilityByEventType = useCallback((e) => {
         if (blocked || disabled)
             return;
+        const isTrigger = isNodeOrChild(triggerRef);
+        const isContent = isNodeOrChild(contentRef);
         // showing content observing
         if (!active) {
             if ((openOn === 'hover' && e.type === 'mousemove') ||
@@ -969,18 +982,13 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
         openOn,
         closeOn,
         hideContent,
-        isContent,
-        isTrigger,
         showContent,
+        triggerRef,
+        contentRef,
     ]);
     const handleContentPosition = throttle(setContentPosition, throttleDelay);
     const handleClick = handleVisibilityByEventType;
     const handleVisibility = throttle(handleVisibilityByEventType, throttleDelay);
-    const handleEscKey = (e) => {
-        if (e.key === 'Escape') {
-            hideContent();
-        }
-    };
     // --------------------------------------------------------------------------
     // useEffects
     // --------------------------------------------------------------------------
@@ -990,7 +998,13 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
         if (disabled) {
             hideContent();
         }
-    }, [disabled, alignX, alignY]);
+    }, [disabled, alignX, alignY, hideContent]);
+    useEffect(() => {
+        if (active && isContentLoaded) {
+            setContentPosition();
+            setContentPosition();
+        }
+    }, [active, isContentLoaded, setContentPosition]);
     // if an Overlay has an Overlay child, this will prevent closing parent child
     // and calculates correct position when an Overlay is opened
     useEffect(() => {
@@ -999,40 +1013,49 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
                 onOpen();
             if (ctx.setBlocked)
                 ctx.setBlocked();
-            showContent();
         }
-        else {
-            setContentLoaded(false);
+        return () => {
             if (onClose)
                 onClose();
             if (ctx.setUnblocked)
                 ctx.setUnblocked();
-        }
-    }, [active, onOpen, onClose, ctx.setBlocked, ctx.setUnblocked]);
+            setContentLoaded(false);
+        };
+    }, [active, onOpen, onClose, showContent, ctx]);
+    // handle closing only when content is active
     useEffect(() => {
-        if (isContentLoaded) {
-            setContentPosition();
-            setContentPosition();
-        }
-    }, [isContentLoaded]);
+        if (!closeOnEsc || !active || blocked)
+            return undefined;
+        const handleEscKey = (e) => {
+            if (e.key === 'Escape') {
+                hideContent();
+            }
+        };
+        window.addEventListener('keydown', handleEscKey);
+        return () => {
+            window.removeEventListener('keydown', handleEscKey);
+        };
+    }, [active, blocked, closeOnEsc, hideContent]);
     // handles repositioning of content on document events
     useEffect(() => {
         if (!active)
             return undefined;
         const shouldSetOverflow = type === 'modal';
+        const onScroll = (e) => {
+            handleContentPosition();
+            handleVisibility(e);
+        };
         if (shouldSetOverflow)
             document.body.style.overflow = 'hidden';
-        window.addEventListener('resize', handleContentPosition, false);
-        window.addEventListener('scroll', handleContentPosition, false);
-        window.addEventListener('scroll', handleVisibility, false);
+        window.addEventListener('resize', handleContentPosition);
+        window.addEventListener('scroll', onScroll);
         return () => {
             if (shouldSetOverflow)
                 document.body.style.overflow = '';
-            window.removeEventListener('scroll', handleVisibility, false);
-            window.removeEventListener('resize', handleContentPosition, false);
-            window.removeEventListener('scroll', handleContentPosition, false);
+            window.removeEventListener('resize', handleContentPosition);
+            window.removeEventListener('scroll', onScroll);
         };
-    }, [active, type]);
+    }, [active, type, handleVisibility, handleContentPosition]);
     // handles repositioning of content on a custom element if defined
     useEffect(() => {
         if (!active || !parentContainer)
@@ -1040,24 +1063,23 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
         // eslint-disable-next-line no-param-reassign
         if (closeOn !== 'hover')
             parentContainer.style.overflow = 'hidden';
-        parentContainer.addEventListener('scroll', handleContentPosition, false);
-        parentContainer.addEventListener('scroll', handleVisibility, false);
+        const onScroll = (e) => {
+            handleContentPosition();
+            handleVisibility(e);
+        };
+        parentContainer.addEventListener('scroll', onScroll);
         return () => {
             // eslint-disable-next-line no-param-reassign
             parentContainer.style.overflow = '';
-            parentContainer.removeEventListener('scroll', handleVisibility, false);
-            parentContainer.removeEventListener('scroll', handleContentPosition, false);
+            parentContainer.removeEventListener('scroll', onScroll);
         };
-    }, [active, parentContainer, closeOn]);
-    // only when content is active handle closing
-    useEffect(() => {
-        if (!closeOnEsc || !active || blocked)
-            return undefined;
-        window.addEventListener('keydown', handleEscKey, false);
-        return () => {
-            window.removeEventListener('keydown', handleEscKey, false);
-        };
-    }, [active, blocked, closeOnEsc]);
+    }, [
+        active,
+        parentContainer,
+        closeOn,
+        handleContentPosition,
+        handleVisibility,
+    ]);
     // enable overlay manipulation only when the state is NOT blocked
     // nor in disabled state
     useEffect(() => {
@@ -1067,29 +1089,32 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
         const enabledClick = openOn === 'click' ||
             ['click', 'clickOnTrigger', 'clickOutsideContent'].includes(closeOn);
         if (enabledClick) {
-            window.addEventListener('click', handleClick, false);
+            window.addEventListener('click', handleClick);
         }
         if (enabledMouseMove) {
-            window.addEventListener('mousemove', handleVisibility, false);
+            window.addEventListener('mousemove', handleVisibility);
         }
         return () => {
-            if (enabledClick) {
-                window.removeEventListener('click', handleClick, false);
-            }
-            if (enabledMouseMove) {
-                window.removeEventListener('mousemove', handleVisibility, false);
-            }
+            window.removeEventListener('click', handleClick);
+            window.removeEventListener('mousemove', handleVisibility);
         };
-    }, [openOn, closeOn, blocked, disabled, active]);
-    // hask-ish way to load contet correctly on the first load
+    }, [
+        openOn,
+        closeOn,
+        blocked,
+        disabled,
+        active,
+        handleClick,
+        handleVisibility,
+    ]);
+    // hack-ish way to load contet correctly on the first load
     // as `contentRef` is loaded dynamically
-    const contentRefCallback = (node) => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (node)
+    const contentRefCallback = useCallback((node) => {
+        if (node) {
             contentRef.current = node;
-        setContentLoaded(true);
-    };
+            setContentLoaded(true);
+        }
+    }, []);
     return {
         triggerRef,
         contentRef: contentRefCallback,
@@ -1102,7 +1127,7 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = tru
         blocked,
         setBlocked,
         setUnblocked,
-        Provider: component$1,
+        Provider: Component$2,
     };
 };
 
@@ -1165,5 +1190,5 @@ Component.displayName = name;
 Component.pkgName = PKG_NAME;
 Component.VITUS_LABS__COMPONENT = name;
 
-export { Component$4 as Element, component$3 as List, Component$1 as Overlay, component$1 as OverlayProvider, Component$2 as Portal, component as Text, Component as Util, useOverlay, component$2 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { Component$5 as Element, component$2 as List, Component$1 as Overlay, Component$2 as OverlayProvider, Component$3 as Portal, component as Text, Component as Util, useOverlay, component$1 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
 //# sourceMappingURL=vitus-labs-elements.module.js.map