es-grid-template 0.0.4 → 0.0.7

package/lib/CheckboxFilter.js

@@ -0,0 +1,257 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _FilterSearch = _interopRequireDefault(require("./FilterSearch"));
+var _uiRc = require("ui-rc");
+var _antd = require("antd");
+var _useFilter = require("antd/es/table/hooks/useFilter");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import {flattenKeys} from "ui-rc/dist/table/hooks/useFilter";
+
+// import Empty from "ui-rc/dist/empty";
+// import Tree from "ui-rc/dist/tree";
+
+function searchValueMatched(searchValue, text) {
+  if (typeof text === 'string' || typeof text === 'number') {
+    return text?.toString().toLowerCase().includes(searchValue.trim().toLowerCase());
+  }
+  return false;
+}
+function renderFilterItems({
+  filters,
+  prefixCls,
+  filteredKeys,
+  filterMultiple,
+  searchValue,
+  filterSearch
+}) {
+  return filters.map((filter, index) => {
+    const key = String(filter.value);
+    if (filter.children) {
+      return {
+        key: key || index,
+        label: filter.text,
+        popupClassName: `${prefixCls}-dropdown-submenu`,
+        children: renderFilterItems({
+          filters: filter.children,
+          prefixCls,
+          filteredKeys,
+          filterMultiple,
+          searchValue,
+          filterSearch
+        })
+      };
+    }
+    const Component = filterMultiple ? _uiRc.Checkbox : _uiRc.Radio;
+    const item = {
+      key: filter.value !== undefined ? key : index,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Component, {
+        checked: filteredKeys.includes(key)
+      }), /*#__PURE__*/React.createElement("span", null, filter.text))
+    };
+    if (searchValue.trim()) {
+      if (typeof filterSearch === 'function') {
+        return filterSearch(searchValue, filter) ? item : null;
+      }
+      return searchValueMatched(searchValue, filter.text) ? item : null;
+    }
+    return item;
+  });
+}
+function hasSubMenu(filters) {
+  return filters.some(({
+    children
+  }) => children);
+}
+const CheckboxFilter = props => {
+  const {
+    // column,
+    filterSearch = true,
+    tablePrefixCls = 'ui-rc-table',
+    prefixCls = 'ui-rc-table-filter',
+    dropdownPrefixCls = 'ui-rc-dropdown',
+    filterMultiple,
+    selectedKeys,
+    locale,
+    options,
+    filterMode = 'tree',
+    // open,
+    searchValue,
+    setSearchValue,
+    onSelect
+  } = props;
+
+  // const [searchValue, setSearchValue] = React.useState('');
+
+  const [openKeys, setOpenKeys] = React.useState([]);
+
+  // clear search value after close filter dropdown
+  // React.useEffect(() => {
+  //   // if (visible) {
+  //     setSearchValue('');
+  //   // }
+  // }, [open]);
+
+  const onOpenChange = keys => {
+    setOpenKeys(keys);
+  };
+  const items = renderFilterItems({
+    // filters: column.filters || [],
+    filters: options || [],
+    filterSearch,
+    prefixCls,
+    filteredKeys: selectedKeys ?? [],
+    filterMultiple,
+    searchValue
+  });
+  const dropdownMenuClass = (0, _classnames.default)({
+    // [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(column.filters || []),
+    [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(options || [])
+  });
+  console.log('selectedKeys', selectedKeys);
+  const empty = /*#__PURE__*/React.createElement(_antd.Empty, {
+    image: _antd.Empty.PRESENTED_IMAGE_SIMPLE,
+    description: locale.filterEmptyText,
+    imageStyle: {
+      height: 24
+    },
+    style: {
+      margin: 0,
+      padding: '16px 0'
+    }
+  });
+  const isEmpty = items.every(item => item === null);
+  const onSearch = e => {
+    const {
+      value
+    } = e.target;
+    setSearchValue(value);
+  };
+
+  // if ((column.filters || []).length === 0) {
+  //   return empty;
+  // }
+
+  const getTreeData = ({
+    filters
+  }) => (filters || []).map((filter, index) => {
+    const key = String(filter.value);
+    const item = {
+      title: filter.text,
+      key: filter.value !== undefined ? key : String(index)
+    };
+    if (filter.children) {
+      item.children = getTreeData({
+        filters: filter.children
+      });
+    }
+    return item;
+  });
+  const getFilterData = node => ({
+    ...node,
+    text: node.title,
+    value: node.key,
+    children: node.children?.map(item => getFilterData(item)) || []
+  });
+  const onCheckAll = e => {
+    console.log('e.target.checked', e.target.checked);
+    if (e.target.checked) {
+      const allFilterKeys = (0, _useFilter.flattenKeys)(options).map(key => String(key));
+      console.log('allFilterKeys', allFilterKeys);
+      // setFilteredKeysSync(allFilterKeys);
+      onSelect?.(allFilterKeys);
+    } else {
+      onSelect?.([]);
+      // setFilteredKeysSync([]);
+    }
+  };
+  const onCheck = (keys, {
+    node,
+    checked
+  }) => {
+    if (!filterMultiple) {
+      // onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
+      onSelect?.(checked && node.key ? [node.key] : []);
+    } else {
+      // onSelectKeys({ selectedKeys: keys });
+      onSelect?.(keys);
+    }
+  };
+  if (filterMode === 'tree') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_FilterSearch.default, {
+      filterSearch: filterSearch,
+      value: searchValue,
+      onChange: onSearch,
+      tablePrefixCls: tablePrefixCls,
+      locale: locale
+    }), /*#__PURE__*/React.createElement("div", {
+      className: `${tablePrefixCls}-filter-dropdown-tree`
+    }, filterMultiple ? /*#__PURE__*/React.createElement(_uiRc.Checkbox
+    // checked={selectedKeys.length === flattenKeys(column.filters).length}
+    , {
+      checked: selectedKeys.length === (0, _useFilter.flattenKeys)(options).length
+      // indeterminate={
+      //   selectedKeys.length > 0 &&
+      //   selectedKeys.length < flattenKeys(column.filters).length
+      // }
+      ,
+
+      indeterminate: selectedKeys.length > 0 && selectedKeys.length < (0, _useFilter.flattenKeys)(options).length,
+      className: `${tablePrefixCls}-filter-dropdown-checkall`,
+      onChange: onCheckAll
+    }, locale.filterCheckall) : null, /*#__PURE__*/React.createElement(_antd.Tree, {
+      checkable: true,
+      selectable: false,
+      blockNode: true,
+      multiple: filterMultiple,
+      checkStrictly: !filterMultiple,
+      className: `${dropdownPrefixCls}-menu`,
+      onCheck: onCheck,
+      checkedKeys: selectedKeys,
+      selectedKeys: selectedKeys,
+      showIcon: false
+      // treeData={getTreeData({ filters: column.filters })}
+      ,
+      treeData: getTreeData({
+        filters: options
+      }),
+      autoExpandParent: true,
+      defaultExpandAll: true,
+      filterTreeNode: searchValue.trim() ? node => {
+        if (typeof filterSearch === 'function') {
+          // @ts-ignore
+          return filterSearch(searchValue, getFilterData(node));
+        }
+        return searchValueMatched(searchValue, node.title);
+      } : undefined
+    })));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_FilterSearch.default, {
+    filterSearch: filterSearch,
+    value: searchValue,
+    onChange: onSearch,
+    tablePrefixCls: tablePrefixCls,
+    locale: locale
+  }), isEmpty ? empty : /*#__PURE__*/React.createElement(_uiRc.Menu, {
+    selectable: true,
+    multiple: filterMultiple,
+    prefixCls: `${dropdownPrefixCls}-menu`,
+    className: dropdownMenuClass,
+    onSelect: onSelect,
+    onDeselect: onSelect,
+    selectedKeys: selectedKeys
+    // getPopupContainer={getPopupContainer}
+    ,
+    openKeys: openKeys,
+    onOpenChange: onOpenChange,
+    items: items
+  }));
+};
+var _default = exports.default = CheckboxFilter;

package/lib/ColumnsChoose.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch, SetStateAction } from "react";
+import React from "react";
+import type { TableColumnsType } from "ui-rc";
+export declare const BoxInputFilterColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export type IColumnsChoose<RecordType> = {
+    columns: any[];
+    setColumns: Dispatch<SetStateAction<TableColumnsType<RecordType>>>;
+    t?: any;
+};
+export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;

package/lib/ColumnsChoose.js

@@ -0,0 +1,223 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnsChoose = exports.BoxInputFilterColumn = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _hooks = require("./hooks");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const {
+  Search
+} = _antd.Input;
+
+// const RowStyle = styled.div`
+//   padding: 6px 0;
+//
+//   height: 35px;
+//
+//   .ellipsis {
+//     overflow: hidden;
+//     white-space: nowrap;
+//     text-overflow: ellipsis;
+//     word-break: keep-all;
+//   }
+// `
+
+const BoxAction = _styledComponents.default.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-1k89i9w-0"
+})(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
+const BoxInputFilterColumn = exports.BoxInputFilterColumn = _styledComponents.default.div.withConfig({
+  displayName: "BoxInputFilterColumn",
+  componentId: "es-grid-template__sc-1k89i9w-1"
+})(["display:flex;position:relative;align-items:center;.input__value{z-index:1;border-radius:0;border-top:0;border-left:0;border-right:0;&:focus{box-shadow:none !important;}&.is-clearable{padding-right:25px !important;}}.input__clear-icon{cursor:pointer;position:absolute;right:5px;z-index:10;}"]);
+const ColumnsChoose = props => {
+  const {
+    columns: propsColumns,
+    setColumns: changeHiddenColumn
+    // t,
+    // columnsGrouped,
+    // onChangeDisplay
+    // frozen
+  } = props;
+
+  // const dataList: { key: React.Key; title: string }[] = [];
+
+  const defaultColumns = (0, _react.useMemo)(() => {
+    const rs = propsColumns.filter(it => it.key || it.dataIndex);
+    return rs;
+  }, [propsColumns]);
+  const defaultSelectedKeys = (0, _react.useMemo)(() => {
+    return (0, _hooks.getVisibleColumnKeys)(propsColumns);
+  }, [propsColumns]);
+
+  // const columnsChooseRef: any = useRef()
+  // const searchRef: any = useRef()
+
+  const [columns] = (0, _react.useState)(defaultColumns);
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const [autoExpandParent, setAutoExpandParent] = (0, _react.useState)(true);
+  // const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [selectedKeys, setSelectedKeys] = (0, _react.useState)(defaultSelectedKeys);
+  const treeData = (0, _react.useMemo)(() => {
+    const loop = data => data.map(item => {
+      const strTitle = item.title;
+      const index = strTitle.indexOf(searchValue);
+      const beforeStr = strTitle.substring(0, index);
+      const afterStr = strTitle.slice(index + searchValue.length);
+      const title = index > -1 ? /*#__PURE__*/_react.default.createElement("span", {
+        key: item.key
+      }, beforeStr, /*#__PURE__*/_react.default.createElement("span", {
+        className: "site-tree-search-value"
+      }, searchValue), afterStr) : /*#__PURE__*/_react.default.createElement("span", {
+        key: item.key
+      }, strTitle);
+      if (item.children) {
+        return {
+          title,
+          key: item.key,
+          children: loop(item.children)
+        };
+      }
+      return {
+        title,
+        key: item.key
+      };
+    });
+
+    // return loop(defaultData);
+    return loop(columns);
+  }, [searchValue]);
+  const hide = () => {
+    setClicked(false);
+  };
+  const handleClickChange = open => {
+    setClicked(open);
+  };
+  const onExpand = () => {
+    // setExpandedKeys(newExpandedKeys)
+    setAutoExpandParent(false);
+  };
+
+  // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
+  //   let parentKey: React.Key
+  //   for (let i = 0; i < tree.length; i++) {
+  //     const node = tree[i]
+  //     if (node.children) {
+  //       if (node.children.some((item) => item.key === key)) {
+  //         parentKey = node.key
+  //       } else if (getParentKey(key, node.children)) {
+  //         parentKey = getParentKey(key, node.children)
+  //       }
+  //     }
+  //   }
+  //   return parentKey!
+  // }
+
+  const onChange = e => {
+    const {
+      value
+    } = e.target;
+    // const newExpandedKeys = dataList
+    //   .map((item) => {
+    //     if (item.title.indexOf(value) > -1) {
+    //       return getParentKey(item.key, defaultData)
+    //     }
+    //     return null
+    //   })
+    //   .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
+    // setExpandedKeys(newExpandedKeys)
+    setSearchValue(value);
+    setAutoExpandParent(true);
+  };
+  const onCheck = keys => {
+    setSelectedKeys(keys);
+  };
+  const handleAccept = () => {
+    const rs1 = (0, _hooks.updateColumns)(columns, selectedKeys);
+    changeHiddenColumn(rs1);
+    hide();
+  };
+  const handleCancel = () => {
+    setSelectedKeys(defaultSelectedKeys);
+    hide();
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
+    placement: 'bottomLeft',
+    content: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        minWidth: 250
+      }
+    }, /*#__PURE__*/_react.default.createElement(Search, {
+      style: {
+        marginBottom: 8
+      },
+      placeholder: "Search",
+      onChange: onChange
+    }), /*#__PURE__*/_react.default.createElement(_antd.Tree, {
+      onExpand: onExpand
+      // expandedKeys={expandedKeys}
+      ,
+      autoExpandParent: autoExpandParent,
+      treeData: treeData,
+      defaultExpandAll: true,
+      checkable: true
+      // onSelect={(keys, info) => {
+      //   const key = info.node.key
+      //   console.log('selectedKeys', keys)
+      //   console.log('info', info)
+      //
+      //   const find = findItemByKey(columns, 'key', key)
+      //
+      //   // const tmpColumn
+      //
+      //   // if (selectedKeys.includes(key as string)) {
+      //   //   const rssss  = findKeyPath(columns, key as string)
+      //   //   const rs = selectedKeys.filter(item => !rssss.includes(item));
+      //   //
+      //   //   setSelectedKeys(rs)
+      //   // } else {
+      //
+      //     // const rs  = [...selectedKeys, keys[0]]
+      //
+      //     // console.log('rs', rs)
+      //     // setSelectedKeys(keys)
+      //   // }
+      // }}
+      ,
+      onCheck: keys => onCheck(keys),
+      multiple: true,
+      checkedKeys: selectedKeys,
+      defaultCheckedKeys: selectedKeys,
+      selectedKeys: [],
+      height: window.innerHeight - 200
+    }), /*#__PURE__*/_react.default.createElement(BoxAction, {
+      className: 'px-1'
+    }, /*#__PURE__*/_react.default.createElement(_antd.Button
+    // className={classnames('btn-action btn-action-submit', {
+    //   // disable: !columns.find((item) => item.visible !== false || item.visible)
+    // })}
+    , {
+      onClick: handleAccept
+      // disabled={!columns.find((item) => item.visible !== false || item.visible)}
+    }, 'OK'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      className: 'btn-action btn-action-cancel',
+      onClick: handleCancel
+    }, 'Cancel'))),
+    trigger: "click",
+    open: clicked,
+    onOpenChange: handleClickChange,
+    arrow: false
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    arrow: false,
+    title: 'Cài đặt'
+  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
+};
+exports.ColumnsChoose = ColumnsChoose;

package/lib/ContextMenu.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { MenuProps } from "antd";
+import type { ContextInfo } from "./type";
+export declare const findItemByKey: (array: any[], key: string, value: any) => any;
+type Props<RecordType> = {
+    rowData: RecordType | null;
+    contextMenuItems: MenuProps["items"];
+    contextMenuClick?: (args: ContextInfo<RecordType>) => void;
+    open: boolean;
+    menuRef?: any;
+    setOpen: (open: boolean) => void;
+    pos: {
+        x: number;
+        y: number;
+        viewportWidth: number;
+        viewportHeight: number;
+    };
+};
+declare const ContextMenu: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default ContextMenu;

package/lib/ContextMenu.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findItemByKey = exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const findItemByKey = (array, key, value) => {
+  for (let i = 0; i < array.length; i++) {
+    const item = array[i];
+    if (item[key] === value) {
+      return item;
+    }
+    if (item.children && item.children.length > 0) {
+      const foundInChildren = findItemByKey(item.children, key, value);
+      if (foundInChildren) {
+        return foundInChildren;
+      }
+    }
+  }
+  return null;
+};
+exports.findItemByKey = findItemByKey;
+const ContextMenu = props => {
+  const {
+    menuRef,
+    open,
+    setOpen,
+    pos,
+    contextMenuClick,
+    contextMenuItems,
+    rowData
+  } = props;
+
+  // const addPopupOffset = (items: MenuProps["items"]) : any => {
+  //   return items?.map(item =>
+  //     item && "children" in item
+  //       ? {
+  //     ...item,
+  //         // popupOffset: [0, 30],
+  //         children: addPopupOffset(item.children) }
+  //       : item
+  //   );
+  // };
+
+  // const newItems = React.useMemo(() => {
+  //   return addPopupOffset(items)
+  // }, [items])
+
+  return (
+    /*#__PURE__*/
+    // <div>
+    //   {open && (
+    //     <div
+    //       ref={menuRef}
+    //       style={{
+    //         position: "absolute",
+    //         top: pos.y,
+    //         left: pos.x,
+    //         zIndex: 1000,
+    //         background: "white",
+    //         border: "1px solid #ddd",
+    //         boxShadow: "2px 2px 5px rgba(0,0,0,0.2)",
+    //       }}
+    //       // onClick={() => setOpen(false)}
+    //     >
+    //       <Menu
+    //         items={contextMenuItems}
+    //         style={{ minWidth: 200, maxWidth: 400, maxHeight: pos.viewportHeight  - 20 , width: 200 }}
+    //         rootClassName={'popup-context-menu'}
+    //
+    //         onClick={(e) => {
+    //           contextMenuClick?.({
+    //             rowInfo: {
+    //               rowData
+    //             },
+    //             event: e.domEvent,
+    //             item: {
+    //               ...findItemByKey(contextMenuItems as any[], 'key', e.key ),
+    //               id: e.key
+    //             }
+    //           })
+    //         }} >
+    //       </Menu>
+    //     </div>
+    //   )}
+    // </div>
+    React.createElement(_antd.Dropdown, {
+      placement: 'topRight',
+      open: open,
+      overlayStyle: {
+        left: `${pos.x}px`,
+        top: `${pos.y}px`
+      },
+      dropdownRender: () => {
+        return /*#__PURE__*/React.createElement("div", {
+          ref: menuRef
+        }, /*#__PURE__*/React.createElement(_antd.Menu, {
+          items: contextMenuItems,
+          style: {
+            minWidth: 200,
+            maxWidth: 400,
+            maxHeight: pos.viewportHeight - 20,
+            width: 200
+          },
+          rootClassName: 'popup-context-menu',
+          onClick: e => {
+            setOpen(false);
+            contextMenuClick?.({
+              rowInfo: {
+                rowData
+              },
+              event: e.domEvent,
+              item: {
+                ...findItemByKey(contextMenuItems, 'key', e.key),
+                id: e.key
+              }
+            });
+
+            // if (!open) {
+            //   document.addEventListener(`click`, function onClickOutside() {
+            //     setOpen(false);
+            //     document.removeEventListener(`click`, onClickOutside);
+            //   });
+            // }
+          }
+        }));
+      }
+    }, /*#__PURE__*/React.createElement(React.Fragment, null))
+  );
+};
+var _default = exports.default = ContextMenu;

package/lib/FilterSearch.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { FilterSearchType, TableLocale } from "antd/es/table/interface";
+import type { AnyObject } from "./type";
+interface FilterSearchProps<RecordType = AnyObject> {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    filterSearch: FilterSearchType<RecordType>;
+    tablePrefixCls: string;
+    locale: TableLocale;
+}
+declare const FilterSearch: <RecordType extends AnyObject = AnyObject>(props: FilterSearchProps<RecordType>) => React.JSX.Element;
+export default FilterSearch;