@kdcloudjs/table 1.0.0

package/lib/table/pipeline/features/contextMenu.js

@@ -0,0 +1,397 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contextMenu = contextMenu;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _commonViews = require("../../common-views");
+
+var _utils = require("../../utils");
+
+var _others = require("../../utils/others");
+
+var _internals = require("../../internals");
+
+var _styles = require("../../base/styles");
+
+var stateKey = 'contextMenu';
+
+function contextMenu() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function step(pipeline) {
+    var popupParent = opts.popupParent || document.body;
+    var menuHelper = new MenuHelper();
+
+    var addPopup = function addPopup(menu) {
+      var ePopupDiv = document.createElement('div');
+      ePopupDiv.setAttribute('class', 'kd-table-popup');
+      popupParent.appendChild(ePopupDiv);
+      var popupHidden = false;
+      var eventList = ['mousedown', 'contextmenu'];
+
+      var hidePopup = function hidePopup(event) {
+        if (isEventFromCurrentPopup(event, ePopupDiv) || popupHidden) {
+          return;
+        }
+
+        popupHidden = true;
+        popupParent.removeChild(ePopupDiv);
+        eventList.forEach(function (eventType) {
+          window.removeEventListener(eventType, hidePopup, true);
+        });
+      };
+
+      _reactDom.default.render(menu, ePopupDiv, function () {
+        setTimeout(function () {
+          eventList.forEach(function (eventType) {
+            window.addEventListener(eventType, hidePopup, true);
+          });
+        }, 0);
+      });
+
+      return hidePopup;
+    };
+
+    var onContextMenu = function onContextMenu(e) {
+      e.preventDefault();
+      showContextMenu(e);
+    };
+
+    pipeline.addTableProps({
+      onContextMenu: onContextMenu
+    });
+
+    var getContextMenuOptions = function getContextMenuOptions(record, column, value) {
+      var defaultMenuOptions = [];
+
+      if (column) {
+        defaultMenuOptions.push(getCopyItem(value));
+      }
+
+      if (opts.getContextMenuItems) {
+        var params = {
+          record: record,
+          column: column,
+          value: value
+        };
+        return opts.getContextMenuItems(params);
+      }
+
+      return defaultMenuOptions;
+    };
+
+    var hideContextMenu = function hideContextMenu() {
+      menuHelper.destroy();
+    };
+
+    var getPopupParent = function getPopupParent() {
+      return popupParent;
+    };
+
+    var showContextMenu = function showContextMenu(e) {
+      var dataSource = pipeline.getDataSource();
+      var cellEle = getCellEleForEvent(e);
+      var code;
+      var rowIndex;
+
+      if (cellEle) {
+        code = cellEle.getAttribute('data-code'), rowIndex = cellEle.getAttribute('data-rowindex');
+      } else {
+        var rowEle = getRowEleForEvent(e, dataSource);
+        rowIndex = rowEle === null || rowEle === void 0 ? void 0 : rowEle.getAttribute('data-rowindex');
+      }
+
+      var record = dataSource[rowIndex];
+      var column = code !== undefined && (0, _others.findByTree)(pipeline.getColumns(), function (item, index) {
+        return item.code === code ? index : -1;
+      });
+
+      var value = column && record && _internals.internals.safeGetValue(column, record, rowIndex);
+
+      var options = getContextMenuOptions(record, column, value);
+
+      if (options.length === 0) {
+        _utils.console.warn('context menu options is empty');
+
+        return;
+      }
+
+      var position = positionForMenu(e, popupParent);
+
+      var menu = /*#__PURE__*/_react.default.createElement(Menu, {
+        options: options,
+        hideContextMenu: hideContextMenu,
+        position: position,
+        getPopupParent: getPopupParent
+      });
+
+      var _hidePopup = addPopup(menu);
+
+      menuHelper.init(_hidePopup);
+    };
+
+    return pipeline;
+  };
+}
+
+function getMenuItemKey(_ref) {
+  var name = _ref.name,
+      index = _ref.index;
+
+  if (name) {
+    var _context;
+
+    var _key = 0;
+    name = name + '';
+
+    for (var i = 0; i < name.length; i++) {
+      _key += name.charCodeAt(name[i]);
+    }
+
+    return (0, _concat.default)(_context = "".concat(_key, "_")).call(_context, index);
+  }
+
+  return index;
+}
+
+function Menu(props) {
+  var _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
+      hideContextMenu = props.hideContextMenu,
+      position = props.position,
+      getPopupParent = props.getPopupParent;
+  var menuRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (menuRef.current) {
+      var popupParent = getPopupParent();
+      var x = position.x,
+          y = position.y;
+
+      var _keepWithinBounds = keepWithinBounds(popupParent, menuRef.current, x, y),
+          _x = _keepWithinBounds.x,
+          _y = _keepWithinBounds.y;
+
+      menuRef.current.style.left = _x + 'px';
+      menuRef.current.style.top = _y + 'px';
+    }
+  }, [position]);
+  return /*#__PURE__*/_react.default.createElement(_commonViews.ContextMenuStyleWrap, {
+    className: _styles.MenuClasses.menu,
+    ref: menuRef,
+    style: {
+      left: position.x,
+      top: position.y
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.MenuClasses.menuList
+  }, (0, _map.default)(options).call(options, function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(MenuItem, {
+      key: item.key ? item.key : getMenuItemKey({
+        name: item.name,
+        index: index
+      }),
+      name: item.name,
+      action: item.action,
+      hideContextMenu: hideContextMenu
+    });
+  })));
+}
+
+function MenuItem(props) {
+  var name = props.name,
+      action = props.action,
+      disabled = props.disabled,
+      hideContextMenu = props.hideContextMenu;
+  var itemRef = (0, _react.useRef)();
+
+  var handleClick = function handleClick() {
+    hideContextMenu();
+    typeof action === 'function' && action();
+  };
+
+  var handleMouseEnter = function handleMouseEnter(e) {
+    if (disabled) {
+      return;
+    }
+
+    var itemDom = itemRef.current;
+
+    if (itemDom) {
+      itemDom.classList.add(_styles.MenuClasses.menuOptionActive);
+    }
+  };
+
+  var handleMouseLeave = function handleMouseLeave(e) {
+    if (disabled) {
+      return;
+    }
+
+    var itemDom = itemRef.current;
+
+    if (itemDom) {
+      setTimeout(function () {
+        itemDom.classList.remove(_styles.MenuClasses.menuOptionActive);
+      }, 10);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.MenuClasses.menuOption,
+    ref: itemRef,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _styles.MenuClasses.menuOptionText
+  }, name));
+}
+
+var MenuHelper = function MenuHelper() {
+  var _this = this;
+
+  (0, _classCallCheck2.default)(this, MenuHelper);
+
+  this.init = function (hidePopup) {
+    _this.hidePopup = hidePopup;
+  };
+
+  this.destroy = function () {
+    _this.hidePopup && _this.hidePopup();
+    _this.hidePopup = null;
+  };
+};
+/** 是否点击是外部 start */
+
+
+function isEventFromCurrentPopup(event, ele) {
+  if (!event || !ele) {
+    return false;
+  }
+
+  if ((0, _utils.isElementInEventPath)(ele, event)) {
+    return true;
+  }
+
+  return false;
+}
+
+function getCellEleInEventPath(path) {
+  return (0, _utils.getTargetEleInEventPath)(path, function (ele) {
+    return ele && ele.getAttribute('data-role') === 'table-cell';
+  });
+}
+
+function getRowEleInEventPath(path) {
+  return (0, _utils.getTargetEleInEventPath)(path, function (ele) {
+    return ele && ele.getAttribute('data-role') === 'table-row';
+  });
+}
+/** 是否点击是外部 end */
+
+/** 计算位置 start */
+
+
+function calculatePointerRelative(event, popupParent) {
+  var parentRect = popupParent.getBoundingClientRect();
+  var documentRect = document.documentElement.getBoundingClientRect();
+  return {
+    x: event.clientX - (popupParent === document.body ? documentRect.left : parentRect.left),
+    y: event.clientY - (popupParent === document.body ? documentRect.top : parentRect.top)
+  };
+}
+
+function positionForMenu(event, popupParent, params) {
+  var _calculatePointerRela = calculatePointerRelative(event, popupParent),
+      x = _calculatePointerRela.x,
+      y = _calculatePointerRela.y;
+
+  if (params) {
+    var offsetX = params.offsetX,
+        offsetY = params.offsetY;
+
+    if (offsetX) {
+      x -= offsetX;
+    }
+
+    if (offsetY) {
+      y -= offsetY;
+    }
+  }
+
+  return {
+    x: x,
+    y: y
+  };
+}
+
+function keepWithinBounds(popupParent, ePopup, x, y) {
+  var parentRect = popupParent.getBoundingClientRect();
+  var docElement = document.documentElement;
+  var documentRect = docElement.getBoundingClientRect();
+  var ePopupRect = ePopup.getBoundingClientRect();
+  var parentWidth = parentRect.width;
+  var parentHeight = parentRect.height;
+
+  if (popupParent === document.body) {
+    parentWidth = documentRect.width;
+    parentWidth -= Math.abs(documentRect.left - parentRect.left);
+    parentHeight = documentRect.height + docElement.scrollTop;
+    parentHeight -= Math.abs(documentRect.top - parentRect.top);
+  }
+
+  if (x) {
+    var minWidth = Math.min(ePopupRect.width, 120);
+    ePopup.style.minWidth = minWidth + 'px';
+    var maxX = parentWidth - minWidth;
+    x = Math.min(Math.max(x, 0), Math.abs(maxX)); //目前位置，最大支持的位置
+  }
+
+  if (y) {
+    var minHeight = Math.min(ePopupRect.height, 180);
+    var maxY = parentHeight - minHeight;
+    y = Math.min(Math.max(y, 0), Math.abs(maxY)); //目前位置，最大支持的位置
+  }
+
+  return {
+    x: x,
+    y: y
+  };
+}
+/** 计算位置 end */
+
+/** 获得点击的元素 start */
+
+
+function getCellEleForEvent(event) {
+  return getCellEleInEventPath((0, _utils.getEventPath)(event));
+}
+
+function getRowEleForEvent(event, dataSource) {
+  return getRowEleInEventPath((0, _utils.getEventPath)(event));
+}
+/** 获得点击的元素 end */
+
+
+function getCopyItem(v) {
+  return {
+    name: '复制',
+    action: function action() {
+      (0, _utils.executeOnTempElement)((0, _utils.copyDataToClipboard)(v));
+    }
+  };
+}

package/lib/table/pipeline/features/filter/DefaultFilterContent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DefaultFilterPanelProps } from '../../../interfaces';
+declare function DefaultFilterContent({ setFilterModel, filterModel, hidePanel }: DefaultFilterPanelProps): JSX.Element;
+export default DefaultFilterContent;

package/lib/table/pipeline/features/filter/DefaultFilterContent.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _util = require("./util");
+
+var _styles = require("../../../base/styles");
+
+var _templateObject;
+
+var DefaultFilterContentStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  border-radius: 2px;\n  width: 100%;\n\n  ", "\n  .filter-option-list {\n    display: flex;\n    flex-direction: column;\n    margin-top: 8px;\n    ul {\n      margin: 0;\n      padding: 0;\n      li {\n        display: flex;\n        position: relative;\n        flex-shrink: 0;\n        height: 32px;\n        align-items: center;\n        border-radius: 2px;\n        font-size: 12px;\n        color: var(--color);\n        padding: 0 12px;\n        overflow: hidden;\n        cursor: pointer;\n        &:hover{\n          background-color: var(--primary-color-level1);\n        }\n      }\n      li.active{\n        background-color: var(--primary-color-level1);\n      }\n    }\n  }\n\n  .filter-search {\n    display: flex;\n    padding: 6px 12px;\n\n    .filter-search-inner {\n      width: 100%;\n      font-size: 12px;\n      color: #333333;\n      height: 28px;\n      line-height: 28px;\n      padding: 0 8px;\n      outline: none;\n      background-color: #FAFAFA;\n      border-radius: 2px;\n      border: 1px solid var(--strong-border-color);\n      &:hover{\n        border-color: var(--primary-color)\n      } \n      &:focus{\n        border-color: var(--primary-color)\n      }  \n    }\n  }\n\n  .filter-footer {\n    display: flex;\n    flex-direction: row;\n    padding: 8px 12px;\n    justify-content: space-between;\n\n    .filter-btn {\n      text-align: center;\n      font-size: 12px;\n      width: 60px;\n      height: 24px;\n      line-height: 24px;\n    }\n    \n  }\n"])), _styles.ButtonCSS);
+
+function DefaultFilterContent(_ref) {
+  var _cx2;
+
+  var setFilterModel = _ref.setFilterModel,
+      filterModel = _ref.filterModel,
+      hidePanel = _ref.hidePanel;
+
+  var _React$useState = _react.default.useState((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain'),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      selectedValue = _React$useState2[0],
+      setSelectedValue = _React$useState2[1];
+
+  var _React$useState3 = _react.default.useState((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || ''),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      innerValue = _React$useState4[0],
+      setInnerValue = _React$useState4[1];
+
+  var handleClick = _react.default.useCallback(function (option) {
+    setSelectedValue(option.key);
+  }, []);
+
+  var reset = function reset() {
+    hidePanel();
+    setFilterModel();
+  };
+
+  var confirm = function confirm() {
+    hidePanel();
+    setFilterModel({
+      filter: [innerValue],
+      filterCondition: selectedValue
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
+    setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || '');
+  }, [filterModel]);
+  return /*#__PURE__*/_react.default.createElement(DefaultFilterContentStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'filter-option-list'
+  }, /*#__PURE__*/_react.default.createElement("ul", null, (0, _map.default)(_util.DEFAULT_FILTER_OPTIONS).call(_util.DEFAULT_FILTER_OPTIONS, function (option, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      _react.default.createElement("li", {
+        key: index,
+        className: option.key === selectedValue ? 'active' : '',
+        onClick: function onClick() {
+          return handleClick(option);
+        }
+      }, option.title)
+    );
+  }))), selectedValue !== 'notIsNull' && selectedValue !== 'isNull' && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'filter-search'
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    className: 'filter-search-inner',
+    value: innerValue,
+    onChange: function onChange(e) {
+      setInnerValue(e.target.value);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'filter-footer'
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames.default)((0, _defineProperty2.default)({
+      'filter-btn': true
+    }, _styles.Classes.button, true)),
+    onClick: reset
+  }, "\u91CD\u7F6E"), /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames.default)((_cx2 = {
+      'filter-btn': true
+    }, (0, _defineProperty2.default)(_cx2, _styles.Classes.button, true), (0, _defineProperty2.default)(_cx2, _styles.Classes.buttonPrimary, true), _cx2)),
+    onClick: confirm
+  }, "\u786E\u5B9A")));
+}
+
+var _default = DefaultFilterContent;
+exports.default = _default;

package/lib/table/pipeline/features/filter/Filter.d.ts

@@ -0,0 +1,17 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { FilterPanel as FilterPanelType, DefaultFilterPanelProps, CustomeFilterPanelProps } from '../../../interfaces';
+interface FilterProps {
+    style?: CSSProperties;
+    className?: string;
+    size?: number;
+    isFilterActive: boolean;
+    FilterPanelContent?: FilterPanelType;
+    filterIcon?: ReactNode;
+    setFilterModel: DefaultFilterPanelProps['setFilterModel'];
+    filterModel: DefaultFilterPanelProps['filterModel'];
+    setFilter: CustomeFilterPanelProps['setFilter'];
+    onClick?: (e: React.MouseEvent) => any;
+    stopClickEventPropagation?: boolean;
+}
+declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation }: FilterProps): JSX.Element;
+export default Filter;

package/lib/table/pipeline/features/filter/Filter.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../../../base/styles");
+
+var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
+
+var _DefaultFilterContent = _interopRequireDefault(require("./DefaultFilterContent"));
+
+var _utils = require("../../../utils");
+
+var _templateObject;
+
+var HEADER_ICON_OFFSET_Y = 6 + 1; //padding-top + border
+
+var HEADER_ICON_OFFSET_X = 16 + 1; //padding-left+ border
+
+var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  cursor: pointer;\n  transform: translateY(-50%);\n  top: 50%;\n  height: 12px; \n"])));
+
+function Filter(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 12 : _ref$size,
+      style = _ref.style,
+      className = _ref.className,
+      FilterPanelContent = _ref.FilterPanelContent,
+      filterIcon = _ref.filterIcon,
+      setFilter = _ref.setFilter,
+      setFilterModel = _ref.setFilterModel,
+      filterModel = _ref.filterModel,
+      isFilterActive = _ref.isFilterActive,
+      stopClickEventPropagation = _ref.stopClickEventPropagation;
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      showPanel = _React$useState2[0],
+      setShowPanel = _React$useState2[1];
+
+  var iconRef = _react.default.useRef(null);
+
+  var hidePanel = function hidePanel() {
+    return setShowPanel(false);
+  };
+
+  var handleMouseDown = function handleMouseDown(e) {
+    e.stopPropagation(); // 阻止触发拖拽
+  };
+
+  var renderPanelContent = function renderPanelContent() {
+    if (FilterPanelContent) {
+      return /*#__PURE__*/_react.default.createElement(FilterPanelContent, {
+        setFilter: setFilter,
+        filterModel: filterModel,
+        isFilterActive: isFilterActive,
+        hidePanel: hidePanel
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_DefaultFilterContent.default, {
+        setFilterModel: setFilterModel,
+        filterModel: filterModel,
+        isFilterActive: isFilterActive,
+        hidePanel: hidePanel
+      });
+    }
+  };
+
+  var renderPanel = function renderPanel(ele) {
+    var position = (0, _utils.calculatePopupRelative)(ele, document.body, {
+      x: HEADER_ICON_OFFSET_X,
+      y: HEADER_ICON_OFFSET_Y
+    });
+    var style = {
+      position: 'absolute',
+      zIndex: 1050
+    };
+    return /*#__PURE__*/_react.default.createElement(_FilterPanel.default, {
+      style: style,
+      onClose: hidePanel,
+      position: position,
+      filterIcon: filterIcon
+    }, renderPanelContent());
+  };
+
+  var handleIconClick = function handleIconClick(e) {
+    if (stopClickEventPropagation) {
+      e.stopPropagation();
+    }
+
+    setShowPanel(true);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
+    style: style,
+    className: className,
+    onMouseDown: handleMouseDown,
+    ref: iconRef
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _styles.Classes.filterIcon,
+    onClick: handleIconClick
+  }, filterIcon || /*#__PURE__*/_react.default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "64 64 896 896",
+    focusable: "false",
+    "data-icon": "filter",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.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__*/(0, _reactDom.createPortal)(renderPanel(iconRef.current), document.body));
+}
+
+var _default = Filter;
+exports.default = _default;

package/lib/table/pipeline/features/filter/FilterPanel.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties, ReactNode } from 'react';
+interface PositionType {
+    x: number;
+    y: number;
+}
+export interface FilterPanel {
+    onClose: () => any;
+    position: PositionType;
+    style?: CSSProperties;
+    filterIcon: ReactNode;
+    children?: ReactNode;
+}
+declare function FilterPanel({ style, children, position, filterIcon, onClose }: {
+    style: any;
+    children: any;
+    position: any;
+    filterIcon: any;
+    onClose: any;
+}): JSX.Element;
+export default FilterPanel;