@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/lib/switch/style/index.js

@@ -1,5 +1,218 @@
 "use strict";
 
-require("../../style/default.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-require("./index.less");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _tinycolor = require("@ctrl/tinycolor");
+
+var _internal = require("../../theme/internal");
+
+var _style = require("../../style");
+
+var genSwitchSmallStyle = function genSwitchSmallStyle(token) {
+  var _ref, _ref2, _ref3, _ref6, _ref7;
+
+  var componentCls = token.componentCls;
+  var switchInnerCls = componentCls + "-inner";
+  return (0, _defineProperty2["default"])({}, componentCls, (0, _defineProperty2["default"])({}, "&" + componentCls + "-small", (_ref7 = {
+    minWidth: token.switchMinWidthSM,
+    height: token.switchHeightSM,
+    lineHeight: token.switchHeightSM + "px"
+  }, (0, _defineProperty2["default"])(_ref7, componentCls + "-inner", (_ref = {}, (0, _defineProperty2["default"])(_ref, switchInnerCls + "-checked", {
+    marginInlineStart: "calc(" + token.switchInnerMarginMinSM + "px - 100% + " + (token.switchPinSizeSM + token.switchPadding * 2) + "px)",
+    marginInlineEnd: "calc(" + token.switchInnerMarginMaxSM + "px + 100% - " + (token.switchPinSizeSM + token.switchPadding * 2) + "px)"
+  }), (0, _defineProperty2["default"])(_ref, switchInnerCls + "-unchecked", {
+    marginTop: -token.switchHeightSM,
+    marginInlineStart: token.switchInnerMarginMaxSM,
+    marginInlineEnd: token.switchInnerMarginMinSM
+  }), _ref)), (0, _defineProperty2["default"])(_ref7, componentCls + "-handle", {
+    width: token.switchPinSizeSM,
+    height: token.switchPinSizeSM
+  }), (0, _defineProperty2["default"])(_ref7, componentCls + "-loading-icon", {
+    top: (token.switchPinSizeSM - token.switchLoadingIconSize) / 2,
+    fontSize: token.switchLoadingIconSize
+  }), (0, _defineProperty2["default"])(_ref7, "&" + componentCls + "-checked", (_ref3 = {}, (0, _defineProperty2["default"])(_ref3, componentCls + "-inner", (_ref2 = {}, (0, _defineProperty2["default"])(_ref2, switchInnerCls + "-checked", {
+    marginInlineStart: token.switchInnerMarginMinSM,
+    marginInlineEnd: token.switchInnerMarginMaxSM
+  }), (0, _defineProperty2["default"])(_ref2, switchInnerCls + "-unchecked", {
+    marginInlineStart: "calc(" + token.switchInnerMarginMaxSM + "px + 100% - " + (token.switchPinSizeSM + token.switchPadding * 2) + "px)",
+    marginInlineEnd: "calc(" + token.switchInnerMarginMinSM + "px - 100% + " + (token.switchPinSizeSM + token.switchPadding * 2) + "px)"
+  }), _ref2)), (0, _defineProperty2["default"])(_ref3, componentCls + "-handle", {
+    insetInlineStart: "calc(100% - " + (token.switchPinSizeSM + token.switchPadding) + "px)"
+  }), _ref3)), (0, _defineProperty2["default"])(_ref7, "&:not(" + componentCls + "-disabled):active", (_ref6 = {}, (0, _defineProperty2["default"])(_ref6, "&:not(" + componentCls + "-checked) " + switchInnerCls, (0, _defineProperty2["default"])({}, switchInnerCls + "-unchecked", {
+    marginInlineStart: token.switchInnerMarginMaxSM + token.marginXXS / 2,
+    marginInlineEnd: token.switchInnerMarginMinSM - token.marginXXS / 2
+  })), (0, _defineProperty2["default"])(_ref6, "&" + componentCls + "-checked " + switchInnerCls, (0, _defineProperty2["default"])({}, switchInnerCls + "-checked", {
+    marginInlineStart: token.switchInnerMarginMinSM - token.marginXXS / 2,
+    marginInlineEnd: token.switchInnerMarginMaxSM + token.marginXXS / 2
+  })), _ref6)), _ref7)));
+};
+
+var genSwitchLoadingStyle = function genSwitchLoadingStyle(token) {
+  var _componentCls2;
+
+  var componentCls = token.componentCls;
+  return (0, _defineProperty2["default"])({}, componentCls, (_componentCls2 = {}, (0, _defineProperty2["default"])(_componentCls2, componentCls + "-loading-icon" + token.iconCls, {
+    position: 'relative',
+    top: (token.switchPinSize - token.fontSize) / 2,
+    color: token.switchLoadingIconColor,
+    verticalAlign: 'top'
+  }), (0, _defineProperty2["default"])(_componentCls2, "&" + componentCls + "-checked " + componentCls + "-loading-icon", {
+    color: token.switchColor
+  }), _componentCls2));
+};
+
+var genSwitchHandleStyle = function genSwitchHandleStyle(token) {
+  var _ref10, _componentCls3;
+
+  var componentCls = token.componentCls;
+  var switchHandleCls = componentCls + "-handle";
+  return (0, _defineProperty2["default"])({}, componentCls, (_componentCls3 = {}, (0, _defineProperty2["default"])(_componentCls3, switchHandleCls, {
+    position: 'absolute',
+    top: token.switchPadding,
+    insetInlineStart: token.switchPadding,
+    width: token.switchPinSize,
+    height: token.switchPinSize,
+    transition: "all " + token.switchDuration + " ease-in-out",
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      insetInlineEnd: 0,
+      bottom: 0,
+      insetInlineStart: 0,
+      backgroundColor: token.colorWhite,
+      borderRadius: token.switchPinSize / 2,
+      boxShadow: token.switchHandleShadow,
+      transition: "all " + token.switchDuration + " ease-in-out",
+      content: '""'
+    }
+  }), (0, _defineProperty2["default"])(_componentCls3, "&" + componentCls + "-checked " + switchHandleCls, {
+    insetInlineStart: "calc(100% - " + (token.switchPinSize + token.switchPadding) + "px)"
+  }), (0, _defineProperty2["default"])(_componentCls3, "&:not(" + componentCls + "-disabled):active", (_ref10 = {}, (0, _defineProperty2["default"])(_ref10, switchHandleCls + "::before", {
+    insetInlineEnd: token.switchHandleActiveInset,
+    insetInlineStart: 0
+  }), (0, _defineProperty2["default"])(_ref10, "&" + componentCls + "-checked " + switchHandleCls + "::before", {
+    insetInlineEnd: 0,
+    insetInlineStart: token.switchHandleActiveInset
+  }), _ref10)), _componentCls3));
+};
+
+var genSwitchInnerStyle = function genSwitchInnerStyle(token) {
+  var _switchInnerCls, _ref12, _ref15, _componentCls4;
+
+  var componentCls = token.componentCls;
+  var switchInnerCls = componentCls + "-inner";
+  return (0, _defineProperty2["default"])({}, componentCls, (_componentCls4 = {}, (0, _defineProperty2["default"])(_componentCls4, switchInnerCls, (_switchInnerCls = {
+    display: 'block',
+    overflow: 'hidden',
+    borderRadius: 100,
+    height: '100%'
+  }, (0, _defineProperty2["default"])(_switchInnerCls, switchInnerCls + "-checked, " + switchInnerCls + "-unchecked", {
+    display: 'block',
+    color: token.colorTextLightSolid,
+    fontSize: token.fontSizeSM,
+    transition: "margin-inline-start " + token.switchDuration + " ease-in-out, margin-inline-end " + token.switchDuration + " ease-in-out",
+    pointerEvents: 'none'
+  }), (0, _defineProperty2["default"])(_switchInnerCls, switchInnerCls + "-checked", {
+    marginInlineStart: "calc(" + token.switchInnerMarginMin + "px - 100% + " + (token.switchPinSize + token.switchPadding * 2) + "px)",
+    marginInlineEnd: "calc(" + token.switchInnerMarginMax + "px + 100% - " + (token.switchPinSize + token.switchPadding * 2) + "px)"
+  }), (0, _defineProperty2["default"])(_switchInnerCls, switchInnerCls + "-unchecked", {
+    marginTop: -token.switchHeight,
+    marginInlineStart: token.switchInnerMarginMax,
+    marginInlineEnd: token.switchInnerMarginMin
+  }), _switchInnerCls)), (0, _defineProperty2["default"])(_componentCls4, "&" + componentCls + "-checked " + switchInnerCls, (_ref12 = {}, (0, _defineProperty2["default"])(_ref12, switchInnerCls + "-checked", {
+    marginInlineStart: token.switchInnerMarginMin,
+    marginInlineEnd: token.switchInnerMarginMax
+  }), (0, _defineProperty2["default"])(_ref12, switchInnerCls + "-unchecked", {
+    marginInlineStart: "calc(" + token.switchInnerMarginMax + "px + 100% - " + (token.switchPinSize + token.switchPadding * 2) + "px)",
+    marginInlineEnd: "calc(" + token.switchInnerMarginMin + "px - 100% + " + (token.switchPinSize + token.switchPadding * 2) + "px)"
+  }), _ref12)), (0, _defineProperty2["default"])(_componentCls4, "&:not(" + componentCls + "-disabled):active", (_ref15 = {}, (0, _defineProperty2["default"])(_ref15, "&:not(" + componentCls + "-checked) " + switchInnerCls, (0, _defineProperty2["default"])({}, switchInnerCls + "-unchecked", {
+    marginInlineStart: token.switchInnerMarginMax + token.switchPadding * 2,
+    marginInlineEnd: token.switchInnerMarginMin - token.switchPadding * 2
+  })), (0, _defineProperty2["default"])(_ref15, "&" + componentCls + "-checked " + switchInnerCls, (0, _defineProperty2["default"])({}, switchInnerCls + "-checked", {
+    marginInlineStart: token.switchInnerMarginMin - token.switchPadding * 2,
+    marginInlineEnd: token.switchInnerMarginMax + token.switchPadding * 2
+  })), _ref15)), _componentCls4));
+};
+
+var genSwitchStyle = function genSwitchStyle(token) {
+  var _extends3;
+
+  var componentCls = token.componentCls;
+  return (0, _defineProperty2["default"])({}, componentCls, (0, _extends4["default"])((0, _extends4["default"])((0, _extends4["default"])((0, _extends4["default"])({}, (0, _style.resetComponent)(token)), (0, _defineProperty2["default"])({
+    position: 'relative',
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    minWidth: token.switchMinWidth,
+    height: token.switchHeight,
+    lineHeight: token.switchHeight + "px",
+    verticalAlign: 'middle',
+    background: token.colorTextQuaternary,
+    border: '0',
+    borderRadius: 100,
+    cursor: 'pointer',
+    transition: "all " + token.motionDurationMid,
+    userSelect: 'none'
+  }, "&:hover:not(" + componentCls + "-disabled)", {
+    background: token.colorTextTertiary
+  })), (0, _style.genFocusStyle)(token)), (_extends3 = {}, (0, _defineProperty2["default"])(_extends3, "&" + componentCls + "-checked", (0, _defineProperty2["default"])({
+    background: token.switchColor
+  }, "&:hover:not(" + componentCls + "-disabled)", {
+    background: token.colorPrimaryHover
+  })), (0, _defineProperty2["default"])(_extends3, "&" + componentCls + "-loading, &" + componentCls + "-disabled", {
+    cursor: 'not-allowed',
+    opacity: token.switchDisabledOpacity,
+    '*': {
+      boxShadow: 'none',
+      cursor: 'not-allowed'
+    }
+  }), (0, _defineProperty2["default"])(_extends3, "&" + componentCls + "-rtl", {
+    direction: 'rtl'
+  }), _extends3)));
+}; // ============================== Export ==============================
+
+
+var _default = (0, _internal.genComponentStyleHook)('Switch', function (token) {
+  var switchHeight = token.fontSize * token.lineHeight;
+  var switchHeightSM = token.controlHeight / 2;
+  var switchPadding = 2; // This is magic
+
+  var switchPinSize = switchHeight - switchPadding * 2;
+  var switchPinSizeSM = switchHeightSM - switchPadding * 2;
+  var switchToken = (0, _internal.mergeToken)(token, {
+    switchMinWidth: switchPinSize * 2 + switchPadding * 4,
+    switchHeight: switchHeight,
+    switchDuration: token.motionDurationMid,
+    switchColor: token.colorPrimary,
+    switchDisabledOpacity: token.opacityLoading,
+    switchInnerMarginMin: switchPinSize / 2,
+    switchInnerMarginMax: switchPinSize + switchPadding + switchPadding * 2,
+    switchPadding: switchPadding,
+    switchPinSize: switchPinSize,
+    switchBg: token.colorBgContainer,
+    switchMinWidthSM: switchPinSizeSM * 2 + switchPadding * 2,
+    switchHeightSM: switchHeightSM,
+    switchInnerMarginMinSM: switchPinSizeSM / 2,
+    switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + switchPadding * 2,
+    switchPinSizeSM: switchPinSizeSM,
+    switchHandleShadow: "0 2px 4px 0 " + new _tinycolor.TinyColor('#00230b').setAlpha(0.2).toRgbString(),
+    switchLoadingIconSize: token.fontSizeIcon * 0.75,
+    switchLoadingIconColor: "rgba(0, 0, 0, " + token.opacityLoading + ")",
+    switchHandleActiveInset: '-30%'
+  });
+  return [genSwitchStyle(switchToken), // inner style
+  genSwitchInnerStyle(switchToken), // handle style
+  genSwitchHandleStyle(switchToken), // loading style
+  genSwitchLoadingStyle(switchToken), // small style
+  genSwitchSmallStyle(switchToken)];
+});
+
+exports["default"] = _default;

package/lib/table/ExpandIcon.js

@@ -24,14 +24,14 @@ function renderExpandIcon(locale) {
         record = _ref.record,
         expanded = _ref.expanded,
         expandable = _ref.expandable;
-    var iconPrefix = "".concat(prefixCls, "-row-expand-icon");
+    var iconPrefix = prefixCls + "-row-expand-icon";
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
       onClick: function onClick(e) {
         onExpand(record, e);
         e.stopPropagation();
       },
-      className: (0, _classnames["default"])(iconPrefix, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(iconPrefix, "-spaced"), !expandable), (0, _defineProperty2["default"])(_classNames, "".concat(iconPrefix, "-expanded"), expandable && expanded), (0, _defineProperty2["default"])(_classNames, "".concat(iconPrefix, "-collapsed"), expandable && !expanded), _classNames)),
+      className: (0, _classnames["default"])(iconPrefix, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, iconPrefix + "-spaced", !expandable), (0, _defineProperty2["default"])(_classNames, iconPrefix + "-expanded", expandable && expanded), (0, _defineProperty2["default"])(_classNames, iconPrefix + "-collapsed", expandable && !expanded), _classNames)),
       "aria-label": expanded ? locale.collapse : locale.expand,
       "aria-expanded": expanded
     });

package/lib/table/Table.d.ts

@@ -7,9 +7,8 @@ import type { TooltipProps } from '../tooltip';
 import Column from './Column';
 import ColumnGroup from './ColumnGroup';
 import { SELECTION_COLUMN } from './hooks/useSelection';
-import type { FilterValue, GetPopupContainer, SorterResult, SortOrder, TableCurrentDataSource, TableLocale, TableRowSelection } from './interface';
-import { ColumnsType, TablePaginationConfig } from './interface';
-export { ColumnsType, TablePaginationConfig };
+import type { FilterValue, GetPopupContainer, SorterResult, SortOrder, TableCurrentDataSource, TableLocale, TableRowSelection, ColumnsType, TablePaginationConfig } from './interface';
+export type { ColumnsType, TablePaginationConfig };
 export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'transformColumns' | 'internalHooks' | 'internalRefs' | 'data' | 'columns' | 'scroll' | 'emptyText'> {
     dropdownPrefixCls?: string;
     dataSource?: RcTableProps<RecordType>['data'];
@@ -34,7 +33,7 @@ declare const ForwardTable: <RecordType extends object = any>(props: TableProps<
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => React.ReactElement;
 type InternalTableType = typeof ForwardTable;
-interface TableInterface extends InternalTableType {
+type CompoundedComponent = InternalTableType & {
     SELECTION_COLUMN: typeof SELECTION_COLUMN;
     EXPAND_COLUMN: typeof RcTable.EXPAND_COLUMN;
     SELECTION_ALL: 'SELECT_ALL';
@@ -43,6 +42,6 @@ interface TableInterface extends InternalTableType {
     Column: typeof Column;
     ColumnGroup: typeof ColumnGroup;
     Summary: typeof Summary;
-}
-declare const Table: TableInterface;
+};
+declare const Table: CompoundedComponent;
 export default Table;

package/lib/table/Table.js

@@ -13,10 +13,10 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _rcTable = _interopRequireWildcard(require("rc-table"));
@@ -65,6 +65,8 @@ var _useSorter3 = _interopRequireWildcard(require("./hooks/useSorter"));
 
 var _useTitleColumns3 = _interopRequireDefault(require("./hooks/useTitleColumns"));
 
+var _style = _interopRequireDefault(require("./style"));
+
 var EMPTY_LIST = [];
 
 function InternalTable(props, ref) {
@@ -98,14 +100,11 @@ function InternalTable(props, ref) {
       locale = props.locale,
       _props$showSorterTool = props.showSorterTooltip,
       showSorterTooltip = _props$showSorterTool === void 0 ? true : _props$showSorterTool;
-  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(typeof rowKey === 'function' && rowKey.length > 1), 'Table', '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.') : void 0;
-  [['filterDropdownVisible', 'filterDropdownOpen'], ['onFilterDropdownVisibleChange', 'onFilterDropdownOpenChange']].forEach(function (_ref) {
-    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
-        deprecatedName = _ref2[0],
-        newName = _ref2[1];
-
-    process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(deprecatedName in props), 'Table', "`".concat(deprecatedName, "` is deprecated which will be removed in next major version.Please use `").concat(newName, "` instead. ")) : void 0;
-  });
+
+  if (process.env.NODE_ENV !== 'production') {
+    process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(typeof rowKey === 'function' && rowKey.length > 1), 'Table', '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.') : void 0;
+  }
+
   var baseColumns = React.useMemo(function () {
     return columns || (0, _useColumns.convertChildrenToColumns)(children);
   }, [columns, children]);
@@ -355,7 +354,7 @@ function InternalTable(props, ref) {
       mergedRowClassName = (0, _classnames["default"])(rowClassName);
     }
 
-    return (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-row-selected"), selectedKeySet.has(getRowKey(record, index))), mergedRowClassName);
+    return (0, _classnames["default"])((0, _defineProperty2["default"])({}, prefixCls + "-row-selected", selectedKeySet.has(getRowKey(record, index))), mergedRowClassName);
   }; // ========================== Expandable ==========================
   // Pass origin render status into `rc-table`, this can be removed when refactor with `rc-table`
 
@@ -393,7 +392,7 @@ function InternalTable(props, ref) {
 
     var renderPagination = function renderPagination(position) {
       return /*#__PURE__*/React.createElement(_pagination["default"], (0, _extends2["default"])({}, mergedPagination, {
-        className: (0, _classnames["default"])("".concat(prefixCls, "-pagination ").concat(prefixCls, "-pagination-").concat(position), mergedPagination.className),
+        className: (0, _classnames["default"])(prefixCls + "-pagination " + prefixCls + "-pagination-" + position, mergedPagination.className),
         size: paginationSize
       }));
     };
@@ -409,7 +408,7 @@ function InternalTable(props, ref) {
         return p.includes('bottom');
       });
       var isDisable = position.every(function (p) {
-        return "".concat(p) === 'none';
+        return "" + p === 'none';
       });
 
       if (!topPos && !bottomPos && !isDisable) {
@@ -439,10 +438,16 @@ function InternalTable(props, ref) {
     spinProps = (0, _extends2["default"])({
       spinning: true
     }, loading);
-  }
+  } // Style
+
+
+  var _useStyle = (0, _style["default"])(prefixCls),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
 
-  var wrapperClassNames = (0, _classnames["default"])("".concat(prefixCls, "-wrapper"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-wrapper-rtl"), direction === 'rtl'), className);
-  return /*#__PURE__*/React.createElement("div", {
+  var wrapperClassNames = (0, _classnames["default"])(prefixCls + "-wrapper", (0, _defineProperty2["default"])({}, prefixCls + "-wrapper-rtl", direction === 'rtl'), className, hashId);
+  return wrapSSR( /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: wrapperClassNames,
     style: style
@@ -453,7 +458,7 @@ function InternalTable(props, ref) {
     direction: direction,
     expandable: mergedExpandable,
     prefixCls: prefixCls,
-    className: (0, _classnames["default"])((_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-middle"), mergedSize === 'middle'), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-small"), mergedSize === 'small'), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-bordered"), bordered), (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-empty"), rawData.length === 0), _classNames3)),
+    className: (0, _classnames["default"])((_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, prefixCls + "-middle", mergedSize === 'middle'), (0, _defineProperty2["default"])(_classNames3, prefixCls + "-small", mergedSize === 'small'), (0, _defineProperty2["default"])(_classNames3, prefixCls + "-bordered", bordered), (0, _defineProperty2["default"])(_classNames3, prefixCls + "-empty", rawData.length === 0), _classNames3)),
     data: pageData,
     rowKey: getRowKey,
     rowClassName: internalRowClassName,
@@ -462,7 +467,7 @@ function InternalTable(props, ref) {
     internalHooks: _Table.INTERNAL_HOOKS,
     internalRefs: internalRefs,
     transformColumns: transformColumns
-  })), bottomPaginationNode));
+  })), bottomPaginationNode)));
 }
 
 var ForwardTable = /*#__PURE__*/React.forwardRef(InternalTable);

package/lib/table/hooks/useFilter/FilterDropdown.js

@@ -49,6 +49,8 @@ var _FilterSearch = _interopRequireDefault(require("./FilterSearch"));
 
 var _FilterWrapper = _interopRequireDefault(require("./FilterWrapper"));
 
+var _warning = _interopRequireDefault(require("../../../_util/warning"));
+
 function hasSubMenu(filters) {
   return filters.some(function (_ref) {
     var children = _ref.children;
@@ -78,7 +80,7 @@ function renderFilterItems(_ref2) {
       return {
         key: key || index,
         label: filter.text,
-        popupClassName: "".concat(prefixCls, "-dropdown-submenu"),
+        popupClassName: prefixCls + "-dropdown-submenu",
         children: renderFilterItems({
           filters: filter.children,
           prefixCls: prefixCls,
@@ -111,7 +113,7 @@ function renderFilterItems(_ref2) {
 }
 
 function FilterDropdown(props) {
-  var _a;
+  var _a, _b;
 
   var tablePrefixCls = props.tablePrefixCls,
       prefixCls = props.prefixCls,
@@ -130,10 +132,10 @@ function FilterDropdown(props) {
       getPopupContainer = props.getPopupContainer;
   var filterDropdownOpen = column.filterDropdownOpen,
       onFilterDropdownOpenChange = column.onFilterDropdownOpenChange,
-      filterDropdownVisible = column.filterDropdownVisible,
-      onFilterDropdownVisibleChange = column.onFilterDropdownVisibleChange,
       filterResetToDefaultFilteredValue = column.filterResetToDefaultFilteredValue,
-      defaultFilteredValue = column.defaultFilteredValue;
+      defaultFilteredValue = column.defaultFilteredValue,
+      filterDropdownVisible = column.filterDropdownVisible,
+      onFilterDropdownVisibleChange = column.onFilterDropdownVisibleChange;
 
   var _React$useState = React.useState(false),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -148,14 +150,18 @@ function FilterDropdown(props) {
     onFilterDropdownVisibleChange === null || onFilterDropdownVisibleChange === void 0 ? void 0 : onFilterDropdownVisibleChange(newVisible);
   };
 
-  var mergedVisible;
+  if (process.env.NODE_ENV !== 'production') {
+    [['filterDropdownVisible', 'filterDropdownOpen', filterDropdownVisible], ['onFilterDropdownVisibleChange', 'onFilterDropdownOpenChange', onFilterDropdownVisibleChange]].forEach(function (_ref3) {
+      var _ref4 = (0, _slicedToArray2["default"])(_ref3, 3),
+          deprecatedName = _ref4[0],
+          newName = _ref4[1],
+          prop = _ref4[2];
 
-  if (typeof filterDropdownOpen === 'boolean') {
-    mergedVisible = filterDropdownOpen;
-  } else {
-    mergedVisible = typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible;
-  } // ===================== Select Keys =====================
+      process.env.NODE_ENV !== "production" ? (0, _warning["default"])(prop === undefined || prop === null, 'Table', "`" + deprecatedName + "` is deprecated. Please use `" + newName + "` instead.") : void 0;
+    });
+  }
 
+  var mergedVisible = (_b = filterDropdownOpen !== null && filterDropdownOpen !== void 0 ? filterDropdownOpen : filterDropdownVisible) !== null && _b !== void 0 ? _b : visible; // ===================== Select Keys =====================
 
   var propFilteredKeys = filterState === null || filterState === void 0 ? void 0 : filterState.filteredKeys;
 
@@ -164,14 +170,14 @@ function FilterDropdown(props) {
       getFilteredKeysSync = _useSyncState2[0],
       setFilteredKeysSync = _useSyncState2[1];
 
-  var onSelectKeys = function onSelectKeys(_ref3) {
-    var selectedKeys = _ref3.selectedKeys;
+  var onSelectKeys = function onSelectKeys(_ref5) {
+    var selectedKeys = _ref5.selectedKeys;
     setFilteredKeysSync(selectedKeys);
   };
 
-  var onCheck = function onCheck(keys, _ref4) {
-    var node = _ref4.node,
-        checked = _ref4.checked;
+  var onCheck = function onCheck(keys, _ref6) {
+    var node = _ref6.node,
+        checked = _ref6.checked;
 
     if (!filterMultiple) {
       onSelectKeys({
@@ -245,12 +251,12 @@ function FilterDropdown(props) {
   };
 
   var onReset = function onReset() {
-    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       confirm: false,
       closeDropdown: false
     },
-        confirm = _ref5.confirm,
-        closeDropdown = _ref5.closeDropdown;
+        confirm = _ref7.confirm,
+        closeDropdown = _ref7.closeDropdown;
 
     if (confirm) {
       internalTriggerFilter([]);
@@ -272,10 +278,10 @@ function FilterDropdown(props) {
   };
 
   var doFilter = function doFilter() {
-    var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       closeDropdown: true
     },
-        closeDropdown = _ref6.closeDropdown;
+        closeDropdown = _ref8.closeDropdown;
 
     if (closeDropdown) {
       triggerVisible(false);
@@ -298,7 +304,7 @@ function FilterDropdown(props) {
   }; // ======================== Style ========================
 
 
-  var dropdownMenuClass = (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(dropdownPrefixCls, "-menu-without-submenu"), !hasSubMenu(column.filters || [])));
+  var dropdownMenuClass = (0, _classnames["default"])((0, _defineProperty2["default"])({}, dropdownPrefixCls + "-menu-without-submenu", !hasSubMenu(column.filters || [])));
 
   var onCheckAll = function onCheckAll(e) {
     if (e.target.checked) {
@@ -311,8 +317,8 @@ function FilterDropdown(props) {
     }
   };
 
-  var getTreeData = function getTreeData(_ref7) {
-    var filters = _ref7.filters;
+  var getTreeData = function getTreeData(_ref9) {
+    var filters = _ref9.filters;
     return (filters || []).map(function (filter, index) {
       var key = String(filter.value);
       var item = {
@@ -346,7 +352,7 @@ function FilterDropdown(props) {
 
   if (typeof column.filterDropdown === 'function') {
     dropdownContent = column.filterDropdown({
-      prefixCls: "".concat(dropdownPrefixCls, "-custom"),
+      prefixCls: dropdownPrefixCls + "-custom",
       setSelectedKeys: function setSelectedKeys(selectedKeys) {
         return onSelectKeys({
           selectedKeys: selectedKeys
@@ -389,11 +395,11 @@ function FilterDropdown(props) {
           tablePrefixCls: tablePrefixCls,
           locale: locale
         }), /*#__PURE__*/React.createElement("div", {
-          className: "".concat(tablePrefixCls, "-filter-dropdown-tree")
+          className: tablePrefixCls + "-filter-dropdown-tree"
         }, filterMultiple ? /*#__PURE__*/React.createElement(_checkbox["default"], {
           checked: selectedKeys.length === (0, _.flattenKeys)(column.filters).length,
           indeterminate: selectedKeys.length > 0 && selectedKeys.length < (0, _.flattenKeys)(column.filters).length,
-          className: "".concat(tablePrefixCls, "-filter-dropdown-checkall"),
+          className: tablePrefixCls + "-filter-dropdown-checkall",
           onChange: onCheckAll
         }, locale.filterCheckall) : null, /*#__PURE__*/React.createElement(_tree["default"], {
           checkable: true,
@@ -401,7 +407,7 @@ function FilterDropdown(props) {
           blockNode: true,
           multiple: filterMultiple,
           checkStrictly: !filterMultiple,
-          className: "".concat(dropdownPrefixCls, "-menu"),
+          className: dropdownPrefixCls + "-menu",
           onCheck: onCheck,
           checkedKeys: selectedKeys,
           selectedKeys: selectedKeys,
@@ -430,7 +436,7 @@ function FilterDropdown(props) {
       }), /*#__PURE__*/React.createElement(_menu["default"], {
         selectable: true,
         multiple: filterMultiple,
-        prefixCls: "".concat(dropdownPrefixCls, "-menu"),
+        prefixCls: dropdownPrefixCls + "-menu",
         className: dropdownMenuClass,
         onSelect: onSelectKeys,
         onDeselect: onSelectKeys,
@@ -460,7 +466,7 @@ function FilterDropdown(props) {
     };
 
     dropdownContent = /*#__PURE__*/React.createElement(React.Fragment, null, getFilterComponent(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-dropdown-btns")
+      className: prefixCls + "-dropdown-btns"
     }, /*#__PURE__*/React.createElement(_button["default"], {
       type: "link",
       size: "small",
@@ -484,7 +490,7 @@ function FilterDropdown(props) {
 
   var menu = function menu() {
     return /*#__PURE__*/React.createElement(_FilterWrapper["default"], {
-      className: "".concat(prefixCls, "-dropdown")
+      className: prefixCls + "-dropdown"
     }, dropdownContent);
   };
 
@@ -502,9 +508,9 @@ function FilterDropdown(props) {
       direction = _React$useContext.direction;
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-column")
+    className: prefixCls + "-column"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(tablePrefixCls, "-column-title")
+    className: tablePrefixCls + "-column-title"
   }, children), /*#__PURE__*/React.createElement(_dropdown["default"], {
     dropdownRender: menu,
     trigger: ['click'],
@@ -515,7 +521,7 @@ function FilterDropdown(props) {
   }, /*#__PURE__*/React.createElement("span", {
     role: "button",
     tabIndex: -1,
-    className: (0, _classnames["default"])("".concat(prefixCls, "-trigger"), {
+    className: (0, _classnames["default"])(prefixCls + "-trigger", {
       active: filtered
     }),
     onClick: function onClick(e) {

package/lib/table/hooks/useFilter/FilterSearch.js

@@ -27,7 +27,7 @@ function FilterSearch(_ref) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(tablePrefixCls, "-filter-dropdown-search")
+    className: tablePrefixCls + "-filter-dropdown-search"
   }, /*#__PURE__*/React.createElement(_input["default"], {
     prefix: /*#__PURE__*/React.createElement(_SearchOutlined["default"], null),
     placeholder: locale.filterSearchPlaceholder,
@@ -35,7 +35,7 @@ function FilterSearch(_ref) {
     value: value,
     // for skip min-width of input
     htmlSize: 1,
-    className: "".concat(tablePrefixCls, "-filter-dropdown-search-input")
+    className: tablePrefixCls + "-filter-dropdown-search-input"
   }));
 }
 

package/lib/table/hooks/useFilter/index.js

@@ -84,7 +84,7 @@ function injectFilter(prefixCls, dropdownPrefixCls, columns, filterStates, trigg
         title: function title(renderProps) {
           return /*#__PURE__*/React.createElement(_FilterDropdown["default"], {
             tablePrefixCls: prefixCls,
-            prefixCls: "".concat(prefixCls, "-filter"),
+            prefixCls: prefixCls + "-filter",
             dropdownPrefixCls: dropdownPrefixCls,
             column: newColumn,
             columnKey: columnKey,
@@ -188,6 +188,11 @@ function useFilter(_ref4) {
 
   var mergedFilterStates = React.useMemo(function () {
     var collectedStates = collectFilterStates(mergedColumns, false);
+
+    if (collectedStates.length === 0) {
+      return collectedStates;
+    }
+
     var filteredKeysIsAllNotControlled = true;
     var filteredKeysIsAllControlled = true;
     collectedStates.forEach(function (_ref5) {
@@ -201,7 +206,14 @@ function useFilter(_ref4) {
     }); // Return if not controlled
 
     if (filteredKeysIsAllNotControlled) {
-      return filterStates;
+      // Filter column may have been removed
+      var keyList = (mergedColumns || []).map(function (column, index) {
+        return (0, _util.getColumnKey)(column, (0, _util.getColumnPos)(index));
+      });
+      return filterStates.filter(function (_ref6) {
+        var key = _ref6.key;
+        return keyList.includes(key);
+      });
     }
 
     process.env.NODE_ENV !== "production" ? (0, _warning["default"])(filteredKeysIsAllControlled, 'Table', 'Columns should all contain `filteredValue` or not contain `filteredValue`.') : void 0;
@@ -212,8 +224,8 @@ function useFilter(_ref4) {
   }, [mergedFilterStates]);
 
   var triggerFilter = function triggerFilter(filterState) {
-    var newFilterStates = mergedFilterStates.filter(function (_ref6) {
-      var key = _ref6.key;
+    var newFilterStates = mergedFilterStates.filter(function (_ref7) {
+      var key = _ref7.key;
       return key !== filterState.key;
     });
     newFilterStates.push(filterState);