@kdcloudjs/kdesign 1.6.18 → 1.6.20

package/dist/kdesign.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.6.17
+ *   @kdcloudjs/kdesign v1.6.19
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -20276,10 +20276,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_devwarning__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../_utils/devwarning */ "./components/_utils/devwarning.ts");
 /* harmony import */ var big_js__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! big.js */ "./node_modules/big.js/big.js");
 /* harmony import */ var big_js__WEBPACK_IMPORTED_MODULE_18___default = /*#__PURE__*/__webpack_require__.n(big_js__WEBPACK_IMPORTED_MODULE_18__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_19___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_19__);
 
 
 
-var _excluded = ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "prefix", "suffix", "formatter"];
+var _excluded = ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "prefix", "suffix", "formatter", "className"];
+
 
 
 
@@ -20326,6 +20329,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
       prefix = inputNumberProps.prefix,
       suffix = inputNumberProps.suffix,
       formatter = inputNumberProps.formatter,
+      className = inputNumberProps.className,
       others = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(inputNumberProps, _excluded);
 
   var initVal = value === undefined ? defaultValue : value;
@@ -20605,7 +20609,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     onFocus: handleFocus,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
-    className: inputPrefixCls
+    className: classnames__WEBPACK_IMPORTED_MODULE_19___default()(inputPrefixCls, className)
   }));
 };
 
@@ -28861,7 +28865,7 @@ var InternalSelect = function InternalSelect(props, ref) {
 
   Object(react__WEBPACK_IMPORTED_MODULE_18__["useEffect"])(function () {
     if (isMultiple) {
-      multipleRef.current.selectedVal = initValue || [];
+      multipleRef.current.selectedVal = Array.isArray(initValue) ? _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default()(initValue) : initValue || [];
 
       if (Array.isArray(initValue)) {
         if (realChildren !== null && realChildren !== void 0 && realChildren.length) {
@@ -29131,8 +29135,8 @@ var InternalSelect = function InternalSelect(props, ref) {
         selectedVal = _multipleRef$current3.selectedVal,
         selectMulOpts = _multipleRef$current3.selectMulOpts;
 
-    if ((realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) !== selectedVal.length) {
-      realChildren.map(function (child) {
+    if ((filledOptions === null || filledOptions === void 0 ? void 0 : filledOptions.length) !== selectedVal.length) {
+      filledOptions.map(function (child) {
         var _ref = child.props || child,
             value = _ref.value;
 
@@ -29145,6 +29149,7 @@ var InternalSelect = function InternalSelect(props, ref) {
         }
       });
       setMulOptions(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default()(selectMulOpts));
+      setSearchValue('');
     } else {
       multipleRef.current.selectedVal = selectedVal = [];
       multipleRef.current.selectMulOpts = selectMulOpts = [];
@@ -29257,10 +29262,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     return (filledOptions === null || filledOptions === void 0 ? void 0 : filledOptions.length) === 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
       className: emptyListCls
     }, emptyContent);
-  }; // const isShowSearch = useCallback(() => {
-  //   return !showSearch ? false : !!searchValue
-  // }, [showSearch, searchValue])
-
+  };
 
   var isShowSearch = Object(react__WEBPACK_IMPORTED_MODULE_18__["useMemo"])(function () {
     return lodash_isBoolean__WEBPACK_IMPORTED_MODULE_20___default()(showSearch) ? showSearch : isMultiple;
@@ -29292,8 +29294,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       height: '30px',
       background: 'none'
     };
-    var indeterminate = mulOptions.length > 0 && mulOptions.length < realChildren.length;
-    var checked = mulOptions.length === realChildren.length;
+    var indeterminate = mulOptions.length > 0 && mulOptions.length < filledOptions.length;
+    var checked = mulOptions.length === filledOptions.length;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_18___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_18___default.a.createElement("div", {
       className: dropDownCls,
       style: dropDownStyle,
@@ -31357,6 +31359,7 @@ var InternalStepper = function InternalStepper(props, ref) {
 
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(_input_number__WEBPACK_IMPORTED_MODULE_8__["default"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, Object(_utils_omit__WEBPACK_IMPORTED_MODULE_14__["omit"])(inputNumberProps, ['step', 'type', 'stepBtnClassName', 'value', 'defaultValue']), {
     ref: inputNumberRef,
+    className: "".concat(inputPrefixCls, "-stepper"),
     stepperrref: stepperrref,
     value: value,
     prefix: getStepPrefix(),
@@ -43658,7 +43661,7 @@ var defaultCSSVariables = {
   '--primary-color': '#5582F3',
   '--primary-color-level1': 'rgb(242, 248, 255)',
   '--primary-color-level2': 'rgb(135, 173, 255)',
-  '--icon-color': '#bfbfbf',
+  '--icon-color': '#666666',
   '--strong-border-color': '#d9d9d9',
   '--header-row-height': '32px',
   '--header-color': '#333',
@@ -43677,7 +43680,7 @@ var defaultCSSVariables = {
   '--header-cell-border-horizontal': '1px solid #dfe3e8'
 };
 var variableConst = getCssVariableText(defaultCSSVariables);
-var StyledArtTableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3__["default"].div(_templateObject2 || (_templateObject2 = _babel_runtime_corejs3_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  :root {\n    ", "\n  }\n  ", "\n\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  cursor: default;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  position: relative;\n\n  // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n  &.use-outer-border {\n    ", ";\n  }\n\n  .no-scrollbar {\n    ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .", " {\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .", " {\n    overflow: hidden;\n    background: var(--header-bgcolor);\n    display: flex;\n    flex-shrink: 0;\n    border-bottom: var(--header-cell-border-horizontal);\n  }\n\n  .", " {\n    display: flex;\n    // justify-content: flex-start;\n    align-items: center;\n    height: inherit;\n  }\n\n  .", " {\n     overflow-x:auto;\n     flex-shrink: 0;\n     flex-grow: 0;\n     scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n     & {\n       ::-webkit-scrollbar {\n         display:none;\n       }\n     }\n   }\n\n  .", " {\n    display: flex;\n    flex: none;\n  }\n  .", ", .", " {\n    background: var(--bgcolor);\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-anchor: none;\n    position:relative;\n    &.empty {\n      position: relative;\n    }\n  }\n\n  .", " {\n    position: relative;\n  }\n  .", ", .", "  {\n    .", "{\n      background-color: #e6effb !important;\n    }\n    .", "{\n      border-top: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-left: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-bottom: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-right: 1px solid #0E5FD8 !important;\n    }\n  }\n  \n  .", " {\n    user-select:none;\n  }\n\n\n  &.sticky-header .", " {\n    position: sticky;\n    top: 0;\n    z-index: ", ";\n  }\n\n  &.sticky-footer .", " {\n    position: sticky;\n    bottom: 0;\n    z-index: ", ";\n  }\n\n  table {\n    width: 0;\n    table-layout: fixed;\n    border-collapse: separate;\n    border-spacing: 0;\n    display: table;\n    margin: 0;\n    padding: 0;\n    flex-shrink: 0;\n    flex-grow: 0;\n    position:relative;\n  }\n\n  // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n  tr:not(.no-hover):hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n  tr:not(.no-hover).row-hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border:1px solid transparent;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right:none\n  }\n\n  th.", " {\n    border-right: none;\n    border-bottom: none;\n  }\n\n  tr.", " th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.", " {\n    border-left: var(--header-cell-border-vertical);\n  }\n\n  td {\n    padding: var(--cell-padding);\n    background: var(--bgcolor);\n    height: var(--row-height);\n    border:1px solid transparent;\n    border-right: var(--cell-border-vertical);\n    border-bottom: var(--cell-border-horizontal);\n    word-break: break-all;\n  }\n  td.", " {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.", " td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.", " td {\n    border-bottom: none;\n  }\n\n  .", ",\n  .", " {\n    z-index: ", ";\n  }\n\n  //#region \u9501\u5217\u9634\u5F71\n  .", " {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: ", ";\n    pointer-events: none;\n    overflow: hidden;\n\n    .", " {\n      height: 100%;\n    }\n\n    .", " {\n      margin-right: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-right: var(--cell-border-vertical);\n      }\n    }\n\n    .", " {\n      margin-left: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-left: var(--cell-border-vertical);\n      }\n    }\n  }\n  //#endregion\n\n  //#region \u7A7A\u8868\u683C\u5C55\u73B0\n  .", " {\n    pointer-events: none;\n    color: #99a3b3;\n    font-size: 12px;\n    text-align: center;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    .empty-image {\n      width: 50px;\n      height: 50px;\n    }\n\n    .empty-tips {\n      margin-top: 16px;\n      line-height: 1.5;\n    }\n  }\n  //#endregion\n\n  //#region IE\u517C\u5BB9\n  &.ie-polyfill-wrapper {\n    //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n    .", " {\n      overflow-x: hidden;\n    }\n    .", ", .", " {\n      position:relative;\n    }\n    .", " {\n      overflow: hidden;\n    }\n    .", " {\n      position: relative;\n    }\n\n    .", " {\n      overflow: auto;\n      overflow-x: hidden;\n      overflow-anchor: none;\n    }\n\n    .", ", .", "{\n      position: absolute;\n      z-index: ", ";\n      top: 0;\n    }\n    .", "{\n      left:0;\n    }\n    .", "{\n      right:0;\n    }\n\n    .", "{\n      .", "{\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: ", ";\n      }\n    }\n\n    tr:not(.no-hover).row-hover > td {\n      background: var(--hover-bgcolor);\n    }\n  }\n  //#endregion\n\n  //#region \u7C98\u6027\u6EDA\u52A8\u6761\n  .", " {\n    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 0;\n    flex-grow: 0;\n    border-top: 1px solid var(--border-color);\n    background: var(--bgcolor);\n  }\n\n  .", " {\n    // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n    height: 1px;\n    visibility: hidden;\n  }\n  //#endregion\n\n  //#region \u52A0\u8F7D\u6837\u5F0F\n  .", " {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    .", " {\n      filter: none;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n      display: flex;\n      position: relative;\n      flex-direction: column;\n    }\n\n    .", " {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      pointer-events: none;\n    }\n\n    .", " {\n      position: sticky;\n      z-index: ", ";\n      transform: translateY(-50%);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u8FC7\u6EE4\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u6392\u5E8F\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n  .", " {\n    visibility: hidden;\n    flex-shrink: 0;\n  }\n  .", " .", " {\n    border-top: var(--cell-border-horizontal);\n  }\n  //#endregion\n  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);
+var StyledArtTableWrapper = styled_components__WEBPACK_IMPORTED_MODULE_3__["default"].div(_templateObject2 || (_templateObject2 = _babel_runtime_corejs3_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  :root {\n    ", "\n  }\n  ", "\n\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  cursor: default;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  position: relative;\n\n  // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n  &.use-outer-border {\n    ", ";\n  }\n\n  .no-scrollbar {\n    ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .", " {\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .", " {\n    overflow: hidden;\n    background: var(--header-bgcolor);\n    display: flex;\n    flex-shrink: 0;\n    border-bottom: var(--header-cell-border-horizontal);\n  }\n\n  .", " {\n    display: flex;\n    // justify-content: flex-start;\n    align-items: center;\n    height: inherit;\n  }\n\n  .", " {\n     overflow-x:auto;\n     flex-shrink: 0;\n     flex-grow: 0;\n     scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n     & {\n       ::-webkit-scrollbar {\n         display:none;\n       }\n     }\n   }\n\n  .", " {\n    display: flex;\n    flex: none;\n  }\n  .", ", .", " {\n    background: var(--bgcolor);\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-anchor: none;\n    position:relative;\n    &.empty {\n      position: relative;\n    }\n  }\n\n  .", " {\n    position: relative;\n  }\n  .", ", .", "  {\n    .", "{\n      background-color: #e6effb !important;\n    }\n    .", "{\n      border-top: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-left: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-bottom: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-right: 1px solid #0E5FD8 !important;\n    }\n  }\n  \n  .", " {\n    user-select:none;\n  }\n\n\n  &.sticky-header .", " {\n    position: sticky;\n    top: 0;\n    z-index: ", ";\n  }\n\n  &.sticky-footer .", " {\n    position: sticky;\n    bottom: 0;\n    z-index: ", ";\n  }\n\n  table {\n    width: 0;\n    table-layout: fixed;\n    border-collapse: separate;\n    border-spacing: 0;\n    display: table;\n    margin: 0;\n    padding: 0;\n    flex-shrink: 0;\n    flex-grow: 0;\n    position:relative;\n  }\n\n  // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n  tr:not(.no-hover):hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n  tr:not(.no-hover).row-hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border:1px solid transparent;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right:none\n  }\n\n  th.", " {\n    border-right: none;\n    border-bottom: none;\n  }\n\n  tr.", " th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.", " {\n    border-left: var(--header-cell-border-vertical);\n  }\n\n  td {\n    padding: var(--cell-padding);\n    background: var(--bgcolor);\n    height: var(--row-height);\n    border:1px solid transparent;\n    border-right: var(--cell-border-vertical);\n    border-bottom: var(--cell-border-horizontal);\n    word-break: break-all;\n  }\n  td.", " {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.", " td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.", " td {\n    border-bottom: none;\n  }\n\n  .", ",\n  .", " {\n    z-index: ", ";\n  }\n\n  //#region \u9501\u5217\u9634\u5F71\n  .", " {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: ", ";\n    pointer-events: none;\n    overflow: hidden;\n\n    .", " {\n      height: 100%;\n    }\n\n    .", " {\n      margin-right: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-right: var(--cell-border-vertical);\n      }\n    }\n\n    .", " {\n      margin-left: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-left: var(--cell-border-vertical);\n      }\n    }\n  }\n  //#endregion\n\n  //#region \u7A7A\u8868\u683C\u5C55\u73B0\n  .", " {\n    pointer-events: none;\n    color: #99a3b3;\n    font-size: 12px;\n    text-align: center;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    .empty-image {\n      width: 50px;\n      height: 50px;\n    }\n\n    .empty-tips {\n      margin-top: 16px;\n      line-height: 1.5;\n    }\n  }\n  //#endregion\n\n  //#region IE\u517C\u5BB9\n  &.ie-polyfill-wrapper {\n    //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n    .", " {\n      overflow-x: hidden;\n    }\n    .", ", .", " {\n      position:relative;\n    }\n    .", " {\n      overflow: hidden;\n    }\n    .", " {\n      position: relative;\n    }\n\n    .", " {\n      overflow: auto;\n      overflow-x: hidden;\n      overflow-anchor: none;\n    }\n\n    .", ", .", "{\n      position: absolute;\n      z-index: ", ";\n      top: 0;\n    }\n    .", "{\n      left:0;\n    }\n    .", "{\n      right:0;\n    }\n\n    .", "{\n      .", "{\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: ", ";\n      }\n    }\n\n    tr:not(.no-hover).row-hover > td {\n      background: var(--hover-bgcolor);\n    }\n  }\n  //#endregion\n\n  //#region \u7C98\u6027\u6EDA\u52A8\u6761\n  .", " {\n    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 0;\n    flex-grow: 0;\n    border-top: 1px solid var(--border-color);\n    background: var(--bgcolor);\n  }\n\n  .", " {\n    // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n    height: 1px;\n    visibility: hidden;\n  }\n  //#endregion\n\n  //#region \u52A0\u8F7D\u6837\u5F0F\n  .", " {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    .", " {\n      filter: none;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n      display: flex;\n      position: relative;\n      flex-direction: column;\n    }\n\n    .", " {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      pointer-events: none;\n    }\n\n    .", " {\n      position: sticky;\n      z-index: ", ";\n      transform: translateY(-50%);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u8FC7\u6EE4\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n    padding: 6px 4px;\n    &:hover{\n      background-color: #e5e5e5;\n    }\n  }\n  .", " {\n    display: flex\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u6392\u5E8F\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n  .", " {\n    visibility: hidden;\n    flex-shrink: 0;\n  }\n  .", " .", " {\n    border-top: var(--cell-border-horizontal);\n  }\n  //#endregion\n  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.filterIcon, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);
 var ButtonCSS = Object(styled_components__WEBPACK_IMPORTED_MODULE_3__["css"])(_templateObject3 || (_templateObject3 = _babel_runtime_corejs3_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  ", "\n  //#region \u6309\u94AE\n  .", "{\n    color: var(--color);\n    background:#ffffff;\n    border:1px solid var(--strong-border-color);\n    border-radius: 2px;\n    cursor: pointer;\n    &:hover{\n      color: var(--primary-color);\n      border:1px solid var(--primary-color);\n    }\n  }\n  .", " {\n    color:#ffffff;\n    background-color: var(--primary-color);\n    border:none;\n    &:hover{\n      color:#ffffff;\n      background-color: var(--primary-color-level2);\n      border:none;\n    }\n  }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
 
 function getCssVariableText(obj) {
@@ -45426,7 +45429,7 @@ function columnDrag() {
         },
         headerCellProps: Object(_utils__WEBPACK_IMPORTED_MODULE_4__["mergeCellProps"])(col.headerCellProps, {
           onMouseDown: !isLeaf || path.length > 1 ? undefined : function (e) {
-            if (e.button !== 0) {
+            if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
               return;
             }
 
@@ -46927,6 +46930,41 @@ function DefaultFilterContent(_ref) {
 
 /***/ }),
 
+/***/ "./node_modules/@kdcloudjs/table/es/table/pipeline/features/filter/DefaultFilterIcon.js":
+/*!**********************************************************************************************!*\
+  !*** ./node_modules/@kdcloudjs/table/es/table/pipeline/features/filter/DefaultFilterIcon.js ***!
+  \**********************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return DefaultFilterIcon; });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+function DefaultFilterIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("svg", {
+    width: width,
+    height: height,
+    style: {
+      verticalAlign: 'middle'
+    },
+    viewBox: "0 0 1024 1024",
+    focusable: "false",
+    "data-icon": "filter",
+    fill: "currentColor",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path", {
+    d: "M891.448889 159.573333L626.460444 460.231111v443.221333c0 32.881778-25.429333 63.658667-55.864888 63.658667l-170.268445-172.942222V456.419556L132.266667 159.857778A59.619556 59.619556 0 0 1 173.511111 56.888889h676.977778c32.995556 0 59.733333 26.680889 59.733333 59.562667 0 17.066667-7.224889 32.312889-18.773333 43.121777z"
+  }));
+}
+
+/***/ }),
+
 /***/ "./node_modules/@kdcloudjs/table/es/table/pipeline/features/filter/Filter.js":
 /*!***********************************************************************************!*\
   !*** ./node_modules/@kdcloudjs/table/es/table/pipeline/features/filter/Filter.js ***!
@@ -46950,10 +46988,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _base_styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../base/styles */ "./node_modules/@kdcloudjs/table/es/table/base/styles.js");
 /* harmony import */ var _FilterPanel__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./FilterPanel */ "./node_modules/@kdcloudjs/table/es/table/pipeline/features/filter/FilterPanel.js");
 /* harmony import */ var _DefaultFilterContent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./DefaultFilterContent */ "./node_modules/@kdcloudjs/table/es/table/pipeline/features/filter/DefaultFilterContent.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../utils */ "./node_modules/@kdcloudjs/table/es/table/utils/index.js");
-/* harmony import */ var _base_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../base/utils */ "./node_modules/@kdcloudjs/table/es/table/base/utils.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_11__);
+/* harmony import */ var _DefaultFilterIcon__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./DefaultFilterIcon */ "./node_modules/@kdcloudjs/table/es/table/pipeline/features/filter/DefaultFilterIcon.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../utils */ "./node_modules/@kdcloudjs/table/es/table/utils/index.js");
+/* harmony import */ var _base_utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../base/utils */ "./node_modules/@kdcloudjs/table/es/table/base/utils.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_12__);
 
 
 
@@ -46969,7 +47008,8 @@ var _templateObject;
 
 
 
-var HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border
+
+var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
 
 var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
 
@@ -46982,7 +47022,7 @@ function Panel(_ref) {
       renderPanelContent = _ref.renderPanelContent;
   var filterPanelRef = react__WEBPACK_IMPORTED_MODULE_3___default.a.useRef(null);
 
-  var _React$useState = react__WEBPACK_IMPORTED_MODULE_3___default.a.useState(Object(_utils__WEBPACK_IMPORTED_MODULE_9__["calculatePopupRelative"])(ele, document.body, {
+  var _React$useState = react__WEBPACK_IMPORTED_MODULE_3___default.a.useState(Object(_utils__WEBPACK_IMPORTED_MODULE_10__["calculatePopupRelative"])(ele, document.body, {
     x: HEADER_ICON_OFFSET_X,
     y: HEADER_ICON_OFFSET_Y
   })),
@@ -46996,14 +47036,14 @@ function Panel(_ref) {
   };
 
   var handleFilterPanelResize = function handleFilterPanelResize(resize) {
-    setPosition(Object(_utils__WEBPACK_IMPORTED_MODULE_9__["calculatePopupRelative"])(ele, document.body, {
+    setPosition(Object(_utils__WEBPACK_IMPORTED_MODULE_10__["calculatePopupRelative"])(ele, document.body, {
       x: HEADER_ICON_OFFSET_X,
       y: HEADER_ICON_OFFSET_Y
     }));
   };
 
   Object(react__WEBPACK_IMPORTED_MODULE_3__["useEffect"])(function () {
-    var resizeObserver = Object(_base_utils__WEBPACK_IMPORTED_MODULE_10__["addResizeObserver"])(filterPanelRef.current.children[0], handleFilterPanelResize);
+    var resizeObserver = Object(_base_utils__WEBPACK_IMPORTED_MODULE_11__["addResizeObserver"])(filterPanelRef.current.children[0], handleFilterPanelResize);
     return function () {
       resizeObserver && resizeObserver.disconnect();
     };
@@ -47044,10 +47084,6 @@ function Filter(_ref2) {
     return setShowPanel(false);
   };
 
-  var handleMouseDown = function handleMouseDown(e) {
-    e.stopPropagation(); // 阻止触发拖拽
-  };
-
   var renderPanelContent = function renderPanelContent() {
     if (FilterPanelContent) {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(FilterPanelContent, {
@@ -47067,6 +47103,12 @@ function Filter(_ref2) {
   };
 
   var handleIconClick = function handleIconClick(e) {
+    // 只有当icon区域点击会触发面板展开
+    // 防止 createPortal 区域的点击触发该事件
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
     if (stopClickEventPropagation) {
       e.stopPropagation();
     }
@@ -47074,28 +47116,21 @@ function Filter(_ref2) {
     setShowPanel(true);
   };
 
-  var iconClassName = classnames__WEBPACK_IMPORTED_MODULE_11___default()((_cx = {}, _babel_runtime_corejs3_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_cx, className, true), _babel_runtime_corejs3_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_cx, 'filter-panel-open', showPanel), _cx));
+  var iconClassName = classnames__WEBPACK_IMPORTED_MODULE_12___default()((_cx = {}, _babel_runtime_corejs3_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_cx, className, true), _babel_runtime_corejs3_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(_cx, 'filter-panel-open', showPanel), _cx));
+  var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(FilterIconSpanStyle, {
     style: style,
     className: iconClassName,
-    onMouseDown: handleMouseDown,
-    ref: iconRef
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("span", {
-    className: _base_styles__WEBPACK_IMPORTED_MODULE_6__["Classes"].filterIcon,
     onClick: handleIconClick
-  }, filterIcon || /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("svg", {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("span", {
+    ref: iconRef,
+    className: _base_styles__WEBPACK_IMPORTED_MODULE_6__["Classes"].filterIcon
+  }, displayFilterIcon || /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_DefaultFilterIcon__WEBPACK_IMPORTED_MODULE_9__["default"], {
     width: size,
-    height: size,
-    viewBox: "64 64 896 896",
-    focusable: "false",
-    "data-icon": "filter",
-    fill: "currentColor",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("path", {
-    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
-  }))), showPanel && /*#__PURE__*/Object(react_dom__WEBPACK_IMPORTED_MODULE_4__["createPortal"])( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Panel, {
+    height: size
+  })), showPanel && /*#__PURE__*/Object(react_dom__WEBPACK_IMPORTED_MODULE_4__["createPortal"])( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(Panel, {
     ele: iconRef.current,
-    filterIcon: filterIcon,
+    filterIcon: displayFilterIcon,
     hidePanel: hidePanel,
     renderPanelContent: renderPanelContent
   }), document.body));
@@ -47124,6 +47159,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! styled-components */ "./node_modules/styled-components/dist/styled-components.browser.esm.js");
 /* harmony import */ var _utils___WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/ */ "./node_modules/@kdcloudjs/table/es/table/utils/index.js");
+/* harmony import */ var _DefaultFilterIcon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./DefaultFilterIcon */ "./node_modules/@kdcloudjs/table/es/table/pipeline/features/filter/DefaultFilterIcon.js");
 
 
 
@@ -47133,16 +47169,17 @@ var _templateObject;
 
 
 
-var FilterPanelStyle = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject || (_templateObject = _babel_runtime_corejs3_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .popup-header {\n    display: flex;\n    background-color: #ebedf1;\n\n    .popup-header-icon {\n      color:#666;\n      background-color: #fff;\n      padding: 6px 16px 6px 16px;\n      display: inline-block;\n      border-right: 1px solid transparent;\n      border-left: 1px solid transparent;\n      border-top: 1px solid transparent;\n      border-top-right-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  }\n\n  .popup-body {\n    display: flex;\n  }\n"])));
+
+var FilterPanelStyle = styled_components__WEBPACK_IMPORTED_MODULE_4__["default"].div(_templateObject || (_templateObject = _babel_runtime_corejs3_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_2___default()(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .popup-header {\n    display: flex;\n    background-color: #ebedf1;\n\n    .popup-header-icon {\n      display: flex;\n      color:#666;\n      background-color: #fff;\n      padding: 8px 16px 8px 16px;\n      border-right: 1px solid transparent;\n      border-left: 1px solid transparent;\n      border-top: 1px solid transparent;\n      border-top-right-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  }\n\n  .popup-body {\n    display: flex;\n  }\n"])));
 
 var useWindowEvents = function useWindowEvents(func, evens) {
   react__WEBPACK_IMPORTED_MODULE_3___default.a.useEffect(function () {
     evens.forEach(function (event) {
-      return window.addEventListener(event, func, true);
+      return window.addEventListener(event, func);
     });
     return function () {
       return evens.forEach(function (event) {
-        return window.removeEventListener(event, func, true);
+        return window.removeEventListener(event, func);
       });
     };
   }, [evens, func]);
@@ -47175,8 +47212,22 @@ function FilterPanel(_ref) {
     setPerfectPosition(Object(_utils___WEBPACK_IMPORTED_MODULE_5__["keepWithinBounds"])(document.body, ref.current, position.x, position.y, true));
     setVisible(true);
   }, [position]);
+  var hasPopupMouseDown = Object(react__WEBPACK_IMPORTED_MODULE_3__["useRef"])(false);
+  var mouseDownTimeout = Object(react__WEBPACK_IMPORTED_MODULE_3__["useRef"])();
+
+  var handleMouseDown = function handleMouseDown(e) {
+    // 当弹出的过滤面板内部发生鼠标按下事件时，标记当前事件，并在下个周期清除标记，用来确定鼠标按下发生在过滤面板内部
+    // 利用了React.createPortal冒泡是根据React Tree的特性：
+    // https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1
+    hasPopupMouseDown.current = true;
+    clearTimeout(mouseDownTimeout.current);
+    mouseDownTimeout.current = window.setTimeout(function () {
+      hasPopupMouseDown.current = false;
+    }, 0);
+  };
+
   useWindowEvents(function (e) {
-    return !isContainPanel(e) && onClose();
+    !isContainPanel(e) && !hasPopupMouseDown.current && onClose();
   }, ['mousedown']);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(FilterPanelStyle, {
     style: _babel_runtime_corejs3_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()(_babel_runtime_corejs3_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, style), {
@@ -47184,22 +47235,16 @@ function FilterPanel(_ref) {
       top: visible ? perfectPosition.y : 0,
       opacity: visible ? 1 : 0
     }),
+    onMouseDown: handleMouseDown,
     ref: ref
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", {
     className: 'popup-header'
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("span", {
     className: 'popup-header-icon'
-  }, filterIcon || /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("svg", {
-    width: 14,
-    height: 14,
-    viewBox: "64 64 896 896",
-    focusable: "false",
-    "data-icon": "filter",
-    fill: "currentColor",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("path", {
-    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
-  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", {
+  }, filterIcon || /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(_DefaultFilterIcon__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    width: 12,
+    height: 12
+  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("div", {
     className: "popup-body"
   }, children));
 }