@kne/react-filter 1.0.0 → 1.0.1

package/dist/index.js

@@ -562,16 +562,24 @@ const withFieldItem = function (WrappedComponent, options) {
       popupMetrics = _useState5[0],
       setPopupMetrics = _useState5[1];
     const triggerRef = react.useRef(null);
+    const setMobilePopupVariables = react.useCallback(metrics => {
+      if (typeof document === 'undefined') return;
+      document.body.style.setProperty('--react-filter-field-mobile-height', metrics.height + "px");
+      document.body.style.setProperty('--react-filter-popover-mobile-height', metrics.height + "px");
+      document.body.style.setProperty('--react-filter-field-mobile-top', metrics.pageTop + "px");
+    }, []);
     const updatePopupMetrics = react.useCallback(() => {
       if (typeof window === 'undefined' || !triggerRef.current) return;
       const rect = triggerRef.current.getBoundingClientRect();
       const top = Math.max(rect.bottom + MOBILE_POPUP_OFFSET$1, 0);
-      setPopupMetrics({
+      const metrics = {
         top,
         pageTop: top + window.scrollY,
         height: Math.max(window.innerHeight - top, 0)
-      });
-    }, []);
+      };
+      setPopupMetrics(metrics);
+      setMobilePopupVariables(metrics);
+    }, [setMobilePopupVariables]);
     react.useEffect(() => {
       if (typeof window === 'undefined') return;
       const mediaQuery = window.matchMedia('(max-width: 768px)');
@@ -595,16 +603,14 @@ const withFieldItem = function (WrappedComponent, options) {
       };
     }, [isMobile, open, updatePopupMetrics]);
     react.useEffect(() => {
-      if (typeof document === 'undefined' || !isMobile) return;
-      document.body.style.setProperty('--react-filter-field-mobile-height', popupMetrics.height + "px");
-      document.body.style.setProperty('--react-filter-popover-mobile-height', popupMetrics.height + "px");
-      document.body.style.setProperty('--react-filter-field-mobile-top', popupMetrics.pageTop + "px");
+      if (typeof document === 'undefined' || !isMobile || popupMetrics.height <= 0) return;
+      setMobilePopupVariables(popupMetrics);
       return () => {
         document.body.style.removeProperty('--react-filter-field-mobile-height');
         document.body.style.removeProperty('--react-filter-popover-mobile-height');
         document.body.style.removeProperty('--react-filter-field-mobile-top');
       };
-    }, [isMobile, popupMetrics.height, popupMetrics.pageTop]);
+    }, [isMobile, popupMetrics, setMobilePopupVariables]);
     react.useEffect(() => {
       if (open && isMobile) {
         setRenderMask(true);
@@ -637,7 +643,9 @@ const withFieldItem = function (WrappedComponent, options) {
     const mobilePopupStyle = isMobile ? {
       '--react-filter-field-mobile-height': popupMetrics.height + "px",
       '--react-filter-popover-mobile-height': popupMetrics.height + "px",
-      '--react-filter-field-mobile-top': popupMetrics.pageTop + "px"
+      '--react-filter-field-mobile-top': popupMetrics.pageTop + "px",
+      top: popupMetrics.pageTop,
+      left: 0
     } : undefined;
     const mergePopupClassNames = classNames => {
       var _classNames$popup;
@@ -671,11 +679,16 @@ const withFieldItem = function (WrappedComponent, options) {
       popupClassName: classnames__default["default"](props.popupClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
       dropdownClassName: classnames__default["default"](props.dropdownClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
       overlayClassName: classnames__default["default"](props.overlayClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
+      overlayStyle: Object.assign({}, props.overlayStyle, mobilePopupStyle),
       popupStyle: Object.assign({}, props.popupStyle, mobilePopupStyle),
       dropdownStyle: Object.assign({}, props.dropdownStyle, mobilePopupStyle),
       classNames: mergePopupClassNames(props.classNames),
       styles: mergePopupStyles(props.styles),
       transitionName: isMobile ? '' : props.transitionName,
+      autoAdjustOverflow: isMobile ? false : props.autoAdjustOverflow,
+      align: isMobile ? {
+        offset: [0, 0]
+      } : props.align,
       isPopup: options.forcePopup ? true : props.isPopup,
       overlayWidth: isMobile && options.forcePopup ? typeof window === 'undefined' ? props.overlayWidth : window.innerWidth : props.overlayWidth
     }));