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

package/lib/vitus-labs-elements.js

@@ -79,7 +79,7 @@ var Styled$2 = core.config.styled(core.config.component) `
 })};
 `;
 
-const component$9 = React.forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
+const component$a = React.forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
     const debugProps = process.env.NODE_ENV !== 'production'
         ? {
             'data-vl-element': 'Element',
@@ -187,7 +187,7 @@ var Styled$1 = core.config.styled(core.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,
@@ -203,7 +203,7 @@ const component$7 = ({ contentType, tag, parentDirection, direction, alignX, ali
             extraStyles: extendCss,
         }, ...debugProps, ...props }));
 };
-var component$8 = React.memo(component$7);
+var component$9 = React.memo(component$8);
 
 const INLINE_ELEMENTS = {
     span: true,
@@ -259,11 +259,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 = React.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 = React.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
     // --------------------------------------------------------
@@ -324,18 +324,18 @@ const component$6 = React.forwardRef(({ innerRef, tag, label, content, children,
     // return simple/empty element like input or image etc.
     // --------------------------------------------------------
     if (shouldBeEmpty) {
-        return React__default["default"].createElement(component$9, { ...props, ...WRAPPER_PROPS });
+        return React__default["default"].createElement(component$a, { ...props, ...WRAPPER_PROPS });
     }
     const contentRenderOutput = core.renderContent(CHILDREN);
-    return (React__default["default"].createElement(component$9, { ...props, ...WRAPPER_PROPS, isInline: isInline },
-        beforeContent && (React__default["default"].createElement(component$8, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(beforeContent))),
-        isSimpleElement ? (contentRenderOutput) : (React__default["default"].createElement(component$8, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
-        afterContent && (React__default["default"].createElement(component$8, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(afterContent)))));
+    return (React__default["default"].createElement(component$a, { ...props, ...WRAPPER_PROPS, isInline: isInline },
+        beforeContent && (React__default["default"].createElement(component$9, { tag: SUB_TAG, contentType: "before", parentDirection: wrapperDirection, extendCss: beforeContentCss, direction: beforeContentDirection, alignX: beforeContentAlignX, alignY: beforeContentAlignY, equalCols: equalCols, gap: gap }, core.renderContent(beforeContent))),
+        isSimpleElement ? (contentRenderOutput) : (React__default["default"].createElement(component$9, { tag: SUB_TAG, contentType: "content", parentDirection: wrapperDirection, extendCss: contentCss, direction: contentDirection, alignX: contentAlignX, alignY: contentAlignY, equalCols: equalCols }, contentRenderOutput)),
+        afterContent && (React__default["default"].createElement(component$9, { tag: SUB_TAG, contentType: "after", parentDirection: wrapperDirection, extendCss: afterContentCss, direction: afterContentDirection, alignX: afterContentAlignX, alignY: afterContentAlignY, equalCols: equalCols, gap: gap }, core.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);
@@ -400,7 +400,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 = core.renderContent;
     const injectItemProps = React.useMemo(() => (typeof itemProps === 'function' ? itemProps : () => itemProps), [itemProps]);
@@ -538,19 +538,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 = React.forwardRef(({ rootElement = false, ...props }, ref) => {
-    const renderedList = React__default["default"].createElement(component$5, { ...core.pick(props, component$5.RESERVED_PROPS) });
+const component$5 = React.forwardRef(({ rootElement = false, ...props }, ref) => {
+    const renderedList = React__default["default"].createElement(component$6, { ...core.pick(props, component$6.RESERVED_PROPS) });
     if (!rootElement)
         return renderedList;
-    return (React__default["default"].createElement(component$6, { ref: ref, ...core.omit(props, component$5.RESERVED_PROPS) }, renderedList));
+    return (React__default["default"].createElement(component$7, { ref: ref, ...core.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',
@@ -558,7 +558,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;
@@ -681,7 +681,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] = React.useState(undefined);
     if (!position || !element)
         return null;
@@ -691,12 +691,14 @@ const component$2 = ({ position = undefined, tag = 'div', children, }) => {
     return reactDom.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 = React.createContext({});
-const useOverlayContext = () => React.useContext(context);
+const { Provider } = context;
+const useOverlayContext = () => React.useContext(context);
+const component$2 = ({ children, blocked, setBlocked, setUnblocked, }) => (React__default["default"].createElement(Provider, { value: { blocked, setBlocked, setUnblocked } }, children));
 
 var useOverlay = ({ isOpen = false, openOn = 'click', // click | hover
 closeOn = 'click', // click | 'clickOnTrigger' | 'clickOutsideContent' | hover | manual
@@ -747,15 +749,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
     React.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
@@ -763,11 +787,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);
             }
@@ -791,7 +821,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;
@@ -960,8 +990,8 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
         }
     };
     const handleContentPosition = core.throttle(calculateContentPosition, throttleDelay);
-    const handleClick = React.useCallback(handleVisibilityByEventType, []);
-    const handleVisibility = React.useCallback(core.throttle(handleVisibilityByEventType, throttleDelay), []);
+    const handleClick = handleVisibilityByEventType;
+    const handleVisibility = core.throttle(handleVisibilityByEventType, throttleDelay);
     const handleEscKey = (e) => {
         if (e.key === 'Escape') {
             hideContent();
@@ -1033,12 +1063,13 @@ Object.defineProperty(exports, 'Provider', {
   enumerable: true,
   get: function () { return unistyle.Provider; }
 });
-exports.Element = component$6;
-exports.List = component$4;
+exports.Element = component$7;
+exports.List = component$5;
 exports.Overlay = component$1;
-exports.Portal = component$2;
+exports.OverlayProvider = component$2;
+exports.Portal = component$3;
 exports.Text = component;
 exports.useOverlay = useOverlay;
-exports.withActiveState = component$3;
+exports.withActiveState = component$4;
 exports.withEqualSizeBeforeAfter = withEqualBeforeAfter;
 //# sourceMappingURL=vitus-labs-elements.js.map