@kne/react-filter 1.0.0 → 1.0.2

package/dist/index.modern.js

@@ -34,7 +34,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-var style$1 = {"filter":"kne-react-filter_b3gMw","filter-item-icon":"kne-react-filter_e3V6h","filter-item-option-icon":"kne-react-filter_dLoYj","filter-title":"kne-react-filter_khFt2","filter-title-hidden":"kne-react-filter_j2mP1","ad-filter-title":"kne-react-filter_HptIY","ad-filter-line":"kne-react-filter_7Ob6-","filter-line":"kne-react-filter_Y9XTa","clean-btn":"kne-react-filter_CJ935","filter-item":"kne-react-filter_JpaMr","un-expand":"kne-react-filter_LfQME","ad-filter-selected":"kne-react-filter_pBsaE","filter-label":"kne-react-filter_Bx3s8","filter-item-wrap":"kne-react-filter_Co4Pg","option":"kne-react-filter_G1cRp","is-active":"kne-react-filter_Aab98","is-visited":"kne-react-filter_Ww12R","un-expand-shadow":"kne-react-filter_2ExqW","filter-item-label":"kne-react-filter_JAmeE","filter-item-field":"kne-react-filter_WvRvl","filter-drop-tag":"kne-react-filter_dG8rq","filter-list":"kne-react-filter_qlWu6","filter-list-scroll-wrap":"kne-react-filter_oaIF4","filter-list-scroll":"kne-react-filter_Jq43Q","filter-scroll-next":"kne-react-filter_BdfSI","filter-list-tag":"kne-react-filter_LV2VI","filter-tag":"kne-react-filter_yyR3u","filter-tag-value":"kne-react-filter_8nm8n","filter-value-tag":"kne-react-filter_tWyCr","filter-value-tag-label":"kne-react-filter_XPzrL","filter-value-tag-content":"kne-react-filter_6e79l","pop-util-content":"kne-react-filter_g-hXk","pop-util-body":"kne-react-filter_4n4MP","date-range-picker-popup":"kne-react-filter_6Zx60","pop-util-overlay":"kne-react-filter_m7Csi","pop-util-mask":"kne-react-filter_o2B3k","pop-util-mask-fade-in":"kne-react-filter_oCXiX","pop-util-mask-leave":"kne-react-filter_qGnRO","pop-util-mask-fade-out":"kne-react-filter_cDx1y","field-item-mobile-popup":"kne-react-filter_wq5nf","pop-util-mobile-expand-down":"kne-react-filter_6RxjE","date-picker-popup":"kne-react-filter_iwLs2","pop-util-mobile-collapse-up":"kne-react-filter_009r-","pop-util-footer":"kne-react-filter_iqe8W","pop-util-text":"kne-react-filter_72gGQ","filter-item-inner":"kne-react-filter_cYX12","filter-item-text":"kne-react-filter_cnMY-","filter-item-number-range":"kne-react-filter_Cv2Bw","filter-item-custom":"kne-react-filter_CBczA","filter-item-custom-active":"kne-react-filter_ldxUR","filter-item-number-range-split":"kne-react-filter_4p3C9","filter-item-number-input":"kne-react-filter_yy1y1","range-picker":"kne-react-filter_81zQn","cascader-select-wrap":"kne-react-filter_UHBfi","cascader-dropdown-menu":"kne-react-filter_bY8JQ","filter-advanced":"kne-react-filter_rg45N","filter-advanced-item-other":"kne-react-filter_HcsA8","filter-advanced-item-other-inner":"kne-react-filter_4Bqtz","filter-advanced-more":"kne-react-filter_jVH7z","filter-scroll-next-icon":"kne-react-filter_Fd6ab"};
+var style$1 = {"filter":"kne-react-filter_b3gMw","filter-item-icon":"kne-react-filter_e3V6h","filter-item-option-icon":"kne-react-filter_dLoYj","filter-title":"kne-react-filter_khFt2","filter-title-hidden":"kne-react-filter_j2mP1","ad-filter-title":"kne-react-filter_HptIY","ad-filter-line":"kne-react-filter_7Ob6-","filter-line":"kne-react-filter_Y9XTa","clean-btn":"kne-react-filter_CJ935","filter-item":"kne-react-filter_JpaMr","un-expand":"kne-react-filter_LfQME","ad-filter-selected":"kne-react-filter_pBsaE","filter-label":"kne-react-filter_Bx3s8","filter-item-wrap":"kne-react-filter_Co4Pg","option":"kne-react-filter_G1cRp","is-active":"kne-react-filter_Aab98","is-visited":"kne-react-filter_Ww12R","un-expand-shadow":"kne-react-filter_2ExqW","filter-item-label":"kne-react-filter_JAmeE","filter-item-field":"kne-react-filter_WvRvl","filter-drop-tag":"kne-react-filter_dG8rq","filter-list":"kne-react-filter_qlWu6","filter-list-scroll-wrap":"kne-react-filter_oaIF4","filter-list-scroll":"kne-react-filter_Jq43Q","filter-scroll-next":"kne-react-filter_BdfSI","filter-list-tag":"kne-react-filter_LV2VI","filter-tag":"kne-react-filter_yyR3u","filter-tag-value":"kne-react-filter_8nm8n","filter-value-tag":"kne-react-filter_tWyCr","filter-value-tag-label":"kne-react-filter_XPzrL","filter-value-tag-content":"kne-react-filter_6e79l","pop-util-content":"kne-react-filter_g-hXk","pop-util-body":"kne-react-filter_4n4MP","date-range-picker-popup":"kne-react-filter_6Zx60","pop-util-overlay":"kne-react-filter_m7Csi","pop-util-mask":"kne-react-filter_o2B3k","pop-util-mask-fade-in":"kne-react-filter_oCXiX","pop-util-mask-leave":"kne-react-filter_qGnRO","pop-util-mask-fade-out":"kne-react-filter_cDx1y","field-item-mobile-popup":"kne-react-filter_wq5nf","pop-util-mobile-expand-down":"kne-react-filter_6RxjE","date-picker-popup":"kne-react-filter_iwLs2","pop-util-mobile-collapse-up":"kne-react-filter_009r-","pop-util-footer":"kne-react-filter_iqe8W","pop-util-text":"kne-react-filter_72gGQ","filter-item-inner":"kne-react-filter_cYX12","filter-item-text":"kne-react-filter_cnMY-","filter-item-number-range":"kne-react-filter_Cv2Bw","filter-item-custom":"kne-react-filter_CBczA","filter-item-custom-active":"kne-react-filter_ldxUR","filter-item-number-range-split":"kne-react-filter_4p3C9","filter-item-number-input":"kne-react-filter_yy1y1","range-picker":"kne-react-filter_81zQn","cascader-select-wrap":"kne-react-filter_UHBfi","cascader-dropdown-menu":"kne-react-filter_bY8JQ","filter-advanced":"kne-react-filter_rg45N","filter-advanced-item-other":"kne-react-filter_HcsA8","filter-advanced-item-other-inner":"kne-react-filter_4Bqtz","filter-advanced-more":"kne-react-filter_jVH7z","filter-value-display":"kne-react-filter_8-R34","filter-scroll-next-icon":"kne-react-filter_Fd6ab"};
 
 const context = /*#__PURE__*/createContext({});
 const {
@@ -348,7 +348,7 @@ const FilterValueDisplay = withLocale(({
     moduleName: 'Filter'
   });
   return /*#__PURE__*/jsxs(Space, {
-    className: style$1['filter-title'],
+    className: classnames(style$1['filter-title'], style$1['filter-value-display']),
     align: "top",
     size: 16,
     children: [/*#__PURE__*/jsx("span", {
@@ -544,16 +544,24 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     height: 0
   });
   const triggerRef = useRef(null);
+  const setMobilePopupVariables = 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 = 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]);
   useEffect(() => {
     if (typeof window === 'undefined') return;
     const mediaQuery = window.matchMedia('(max-width: 768px)');
@@ -577,16 +585,14 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     };
   }, [isMobile, open, updatePopupMetrics]);
   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]);
   useEffect(() => {
     if (open && isMobile) {
       setRenderMask(true);
@@ -619,7 +625,9 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
   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;
@@ -651,11 +659,16 @@ const withFieldItem = (WrappedComponent, options = {}) => _ref => {
     popupClassName: classnames(props.popupClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
     dropdownClassName: classnames(props.dropdownClassName, isMobile && style$1['field-item-mobile-popup'], isMobile && FIELD_MOBILE_POPUP_CLASS),
     overlayClassName: classnames(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
   }));
@@ -1009,6 +1022,7 @@ const DatePickerFilterItem = withLocale(withFieldItem(_ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return /*#__PURE__*/jsx(DatePicker, _extends({}, props, {
+    inputReadOnly: true,
     picker: picker,
     classNames: _extends({}, props.classNames, {
       popup: _extends({}, (_props$classNames = props.classNames) == null ? void 0 : _props$classNames.popup, {
@@ -1045,6 +1059,7 @@ const DateRangePickerFilterItem = withLocale(withFieldItem(_ref => {
       value,
       onChange
     }) : header, /*#__PURE__*/jsx(DatePicker.RangePicker, _extends({}, props, {
+      inputReadOnly: true,
       allowEmpty: [false, false],
       classNames: _extends({}, props.classNames, {
         popup: _extends({}, (_props$classNames = props.classNames) == null ? void 0 : _props$classNames.popup, {
@@ -1232,6 +1247,7 @@ const TypeDateRangePickerFilterItem = withLocale(_ref => {
       value,
       onChange
     }) => /*#__PURE__*/jsx(TypeDateRangePickerField, _extends({}, props, {
+      inputReadOnly: true,
       className: style$1['filter-item-text'],
       value: get(value, 'value'),
       onChange: pickerValue => {