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

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

@@ -72,7 +72,7 @@ var Styled$2 = config.styled(config.component) `
 })};
 `;
 
-const component$9 = 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',
@@ -180,7 +180,7 @@ var Styled$1 = config.styled(config.component) `
 })};
 `;
 
-const component$7 = ({ 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,
@@ -196,7 +196,7 @@ const component$7 = ({ contentType, tag, parentDirection, direction, alignX, ali
             extraStyles: extendCss,
         }, ...debugProps, ...props }));
 };
-var component$8 = memo(component$7);
+var component$9 = memo(component$8);
 
 const INLINE_ELEMENTS = {
     span: true,
@@ -252,11 +252,11 @@ const EMPTY_ELEMENTS = {
 const isInlineElement = (tag) => tag ? INLINE_ELEMENTS[tag] : false;
 const getShouldBeEmpty = (tag) => tag ? EMPTY_ELEMENTS[tag] : false;
 
-const defaultBeforeAfterDirection = 'inline';
-const defaultDirection = 'rows';
+const defaultDirection = 'inline';
+const defaultContentDirection = 'rows';
 const defaultAlignX = 'left';
 const defaultAlignY = 'center';
-const component$6 = 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) => {
+const component$7 = 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
     // --------------------------------------------------------
@@ -317,18 +317,18 @@ const component$6 = forwardRef(({ innerRef, tag, label, content, children, befor
     // return simple/empty element like input or image etc.
     // --------------------------------------------------------
     if (shouldBeEmpty) {
-        return React.createElement(component$9, { ...props, ...WRAPPER_PROPS });
+        return React.createElement(component$a, { ...props, ...WRAPPER_PROPS });
     }
     const contentRenderOutput = renderContent(CHILDREN);
-    return (React.createElement(component$9, { ...props, ...WRAPPER_PROPS, isInline: isInline },
-        beforeContent && (React.createElement(component$8, { 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$8, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
-        afterContent && (React.createElement(component$8, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, renderContent(afterContent)))));
+    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$6.displayName = name$4;
-component$6.pkgName = PKG_NAME;
-component$6.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);
@@ -393,7 +393,7 @@ const attachItemProps = ({ i, length, }) => {
         position,
     };
 };
-const component$5 = (props) => {
+const component$6 = (props) => {
     const { itemKey, valueName, children, component, data, wrapComponent: Wrapper, wrapProps, itemProps, } = props;
     const renderedElement = renderContent;
     const injectItemProps = useMemo(() => (typeof itemProps === 'function' ? itemProps : () => itemProps), [itemProps]);
@@ -531,19 +531,19 @@ const component$5 = (props) => {
     };
     return renderItems();
 };
-component$5.isIterator = true;
-component$5.RESERVED_PROPS = RESERVED_PROPS;
+component$6.isIterator = true;
+component$6.RESERVED_PROPS = RESERVED_PROPS;
 
-const component$4 = forwardRef(({ rootElement = false, ...props }, ref) => {
-    const renderedList = React.createElement(component$5, { ...pick(props, component$5.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$6, { ref: ref, ...omit(props, component$5.RESERVED_PROPS) }, renderedList));
+    return (React.createElement(component$7, { ref: ref, ...omit(props, component$6.RESERVED_PROPS) }, renderedList));
 });
 const name$3 = `${PKG_NAME}/List`;
-component$4.displayName = name$3;
-component$4.pkgName = PKG_NAME;
-component$4.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',
@@ -551,7 +551,7 @@ const RESERVED_KEYS = [
     'itemProps',
     'activeItemRequired',
 ];
-const component$3 = (WrappedComponent) => {
+const component$4 = (WrappedComponent) => {
     const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     const Enhanced = (props) => {
         const { type = 'single', activeItemRequired, activeItems, itemProps = {}, ...rest } = props;
@@ -674,7 +674,7 @@ const component$3 = (WrappedComponent) => {
     return Enhanced;
 };
 
-const component$2 = ({ position = undefined, tag = 'div', children, }) => {
+const component$3 = ({ position = undefined, tag = 'div', children, }) => {
     const [element] = useState(undefined);
     if (!position || !element)
         return null;
@@ -687,12 +687,14 @@ const component$2 = ({ position = undefined, tag = 'div', children, }) => {
     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 useOverlayContext = () => useContext(context);
+const { Provider } = context;
+const useOverlayContext = () => useContext(context);
+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
@@ -743,15 +745,37 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
             return undefined;
         window.addEventListener('resize', handleContentPosition, false);
         window.addEventListener('scroll', handleContentPosition, false);
+        if (customScrollListener) {
+            customScrollListener.addEventListener('scroll', handleContentPosition, false);
+        }
         return () => {
             window.removeEventListener('resize', handleContentPosition, false);
             window.removeEventListener('scroll', handleContentPosition, false);
+            if (customScrollListener) {
+                customScrollListener.removeEventListener('scroll', handleContentPosition, false);
+            }
         };
     }, [active, customScrollListener]);
     // make sure scrolling is blocked in case of modal windows or when
     // customScroll is set
     useEffect(() => {
+        if (active) {
+            if (customScrollListener) {
+                // eslint-disable-next-line no-param-reassign
+                customScrollListener.style.overflow = 'hidden';
+            }
+        }
+        else {
+            if (customScrollListener) {
+                // eslint-disable-next-line no-param-reassign
+                customScrollListener.style.overflow = '';
+            }
+        }
         return () => {
+            if (customScrollListener) {
+                // eslint-disable-next-line no-param-reassign
+                customScrollListener.style.overflow = '';
+            }
         };
     }, [active, type, customScrollListener]);
     // only when content is active handle closing
@@ -759,11 +783,17 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
         if (!active)
             return undefined;
         window.addEventListener('scroll', handleVisibility, false);
+        if (customScrollListener) {
+            customScrollListener.addEventListener('scroll', handleVisibility, false);
+        }
         if (closeOnEsc) {
             window.addEventListener('keydown', handleEscKey, false);
         }
         return () => {
             window.removeEventListener('scroll', handleVisibility, false);
+            if (customScrollListener) {
+                customScrollListener.removeEventListener('scroll', handleVisibility, false);
+            }
             if (closeOnEsc) {
                 window.removeEventListener('keydown', handleEscKey, false);
             }
@@ -787,7 +817,7 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
             window.removeEventListener('click', handleClick, false);
             window.removeEventListener('mousemove', handleVisibility, false);
         };
-    }, [openOn, closeOn, blocked, disabled]);
+    }, [openOn, closeOn, blocked, disabled, active]);
     const isNodeOrChild = (ref) => (e) => {
         if (e && e.target && ref.current) {
             return ref.current.contains(e.target) || e.target === ref.current;
@@ -956,8 +986,8 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
         }
     };
     const handleContentPosition = throttle(calculateContentPosition, throttleDelay);
-    const handleClick = useCallback(handleVisibilityByEventType, []);
-    const handleVisibility = useCallback(throttle(handleVisibilityByEventType, throttleDelay), []);
+    const handleClick = handleVisibilityByEventType;
+    const handleVisibility = throttle(handleVisibilityByEventType, throttleDelay);
     const handleEscKey = (e) => {
         if (e.key === 'Escape') {
             hideContent();
@@ -1025,5 +1055,5 @@ component.pkgName = PKG_NAME;
 component.VITUS_LABS__COMPONENT = name;
 component.isText = true;
 
-export { component$6 as Element, component$4 as List, component$1 as Overlay, component$2 as Portal, component as Text, useOverlay, component$3 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { component$7 as Element, component$5 as List, component$1 as Overlay, component$2 as OverlayProvider, component$3 as Portal, component as Text, useOverlay, component$4 as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
 //# sourceMappingURL=vitus-labs-elements.module.js.map