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

package/lib/table/hooks/useSelection.js

@@ -396,7 +396,7 @@ function useSelection(rowSelection, config) {
           })
         };
         customizeSelections = /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-selection-extra")
+          className: prefixCls + "-selection-extra"
         }, /*#__PURE__*/React.createElement(_dropdown["default"], {
           menu: menu,
           getPopupContainer: getPopupContainer
@@ -423,7 +423,7 @@ function useSelection(rowSelection, config) {
         return checked;
       });
       title = !hideSelectAll && /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-selection")
+        className: prefixCls + "-selection"
       }, /*#__PURE__*/React.createElement(_checkbox["default"], {
         checked: !allDisabled ? !!flattedData.length && checkedCurrentAll : allDisabledAndChecked,
         indeterminate: !allDisabled ? !checkedCurrentAll && checkedCurrentSome : !allDisabledAndChecked && allDisabledSomeChecked,
@@ -632,11 +632,11 @@ function useSelection(rowSelection, config) {
     var selectionColumn = (0, _defineProperty2["default"])({
       fixed: mergedFixed,
       width: selectionColWidth,
-      className: "".concat(prefixCls, "-selection-column"),
+      className: prefixCls + "-selection-column",
       title: rowSelection.columnTitle || title,
       render: renderSelectionCell
     }, _rcTable.INTERNAL_COL_DEFINE, {
-      className: "".concat(prefixCls, "-selection-col")
+      className: prefixCls + "-selection-col"
     });
     return cloneColumns.map(function (col) {
       return col === SELECTION_COLUMN ? selectionColumn : col;

package/lib/table/hooks/useSorter.js

@@ -121,13 +121,13 @@ function injectSorter(prefixCls, columns, sorterStates, triggerSorter, defaultSo
       var sorterOrder = sorterState ? sorterState.sortOrder : null;
       var nextSortOrder = nextSortDirection(sortDirections, sorterOrder);
       var upNode = sortDirections.includes(ASCEND) && /*#__PURE__*/React.createElement(_CaretUpOutlined["default"], {
-        className: (0, _classnames["default"])("".concat(prefixCls, "-column-sorter-up"), {
+        className: (0, _classnames["default"])(prefixCls + "-column-sorter-up", {
           active: sorterOrder === ASCEND
         }),
         role: "presentation"
       });
       var downNode = sortDirections.includes(DESCEND) && /*#__PURE__*/React.createElement(_CaretDownOutlined["default"], {
-        className: (0, _classnames["default"])("".concat(prefixCls, "-column-sorter-down"), {
+        className: (0, _classnames["default"])(prefixCls + "-column-sorter-down", {
           active: sorterOrder === DESCEND
         }),
         role: "presentation"
@@ -150,16 +150,16 @@ function injectSorter(prefixCls, columns, sorterStates, triggerSorter, defaultSo
         title: sortTip
       };
       newColumn = (0, _extends3["default"])((0, _extends3["default"])({}, newColumn), {
-        className: (0, _classnames["default"])(newColumn.className, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-column-sort"), sorterOrder)),
+        className: (0, _classnames["default"])(newColumn.className, (0, _defineProperty2["default"])({}, prefixCls + "-column-sort", sorterOrder)),
         title: function title(renderProps) {
           var renderSortTitle = /*#__PURE__*/React.createElement("div", {
-            className: "".concat(prefixCls, "-column-sorters")
+            className: prefixCls + "-column-sorters"
           }, /*#__PURE__*/React.createElement("span", {
-            className: "".concat(prefixCls, "-column-title")
+            className: prefixCls + "-column-title"
           }, (0, _util.renderColumnTitle)(column.title, renderProps)), /*#__PURE__*/React.createElement("span", {
-            className: (0, _classnames["default"])("".concat(prefixCls, "-column-sorter"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-column-sorter-full"), !!(upNode && downNode)))
+            className: (0, _classnames["default"])(prefixCls + "-column-sorter", (0, _defineProperty2["default"])({}, prefixCls + "-column-sorter-full", !!(upNode && downNode)))
           }, /*#__PURE__*/React.createElement("span", {
-            className: "".concat(prefixCls, "-column-sorter-inner")
+            className: prefixCls + "-column-sorter-inner"
           }, upNode, downNode)));
           return showSorterTooltip ? /*#__PURE__*/React.createElement(_tooltip["default"], (0, _extends3["default"])({}, tooltipProps), renderSortTitle) : renderSortTitle;
         },
@@ -196,10 +196,10 @@ function injectSorter(prefixCls, columns, sorterStates, triggerSorter, defaultSo
           if (sorterOrder) {
             cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending';
           } else {
-            cell['aria-label'] = "".concat(displayTitle ? "this column's title is ".concat(displayTitle, ",") : '', "this column is sortable");
+            cell['aria-label'] = (displayTitle ? "this column's title is " + displayTitle + "," : '') + "this column is sortable";
           }
 
-          cell.className = (0, _classnames["default"])(cell.className, "".concat(prefixCls, "-column-has-sorters"));
+          cell.className = (0, _classnames["default"])(cell.className, prefixCls + "-column-has-sorters");
           cell.tabIndex = 0;
 
           if (column.ellipsis) {

package/lib/table/index.d.ts

@@ -1,5 +1,5 @@
-import Table, { TablePaginationConfig, TableProps } from './Table';
-export { ColumnProps } from './Column';
-export { ColumnGroupType, ColumnsType, ColumnType } from './interface';
-export { TableProps, TablePaginationConfig };
+import Table, { type TablePaginationConfig, type TableProps } from './Table';
+export type { ColumnProps } from './Column';
+export type { ColumnGroupType, ColumnsType, ColumnType } from './interface';
+export type { TableProps, TablePaginationConfig };
 export default Table;

package/lib/table/interface.d.ts

@@ -93,20 +93,14 @@ export interface ColumnType<RecordType> extends Omit<RcColumnType<RecordType>, '
     filterMode?: 'menu' | 'tree';
     filterSearch?: FilterSearchType<ColumnFilterItem>;
     onFilter?: (value: string | number | boolean, record: RecordType) => boolean;
-    /**
-     * @deprecated `filterDropdownVisible` is deprecated which will be removed in next major version.
-     *   Please use `filterDropdownOpen` instead.
-     */
-    filterDropdownVisible?: boolean;
     filterDropdownOpen?: boolean;
-    /**
-     * @deprecated `onFilterDropdownVisibleChange` is deprecated which will be removed in next major
-     *   version. Please use `onFilterDropdownOpenChange` instead.
-     */
-    onFilterDropdownVisibleChange?: (visible: boolean) => void;
-    onFilterDropdownOpenChange?: (open: boolean) => void;
+    onFilterDropdownOpenChange?: (visible: boolean) => void;
     filterResetToDefaultFilteredValue?: boolean;
     responsive?: Breakpoint[];
+    /** @deprecated Please use `filterDropdownOpen` instead */
+    filterDropdownVisible?: boolean;
+    /** @deprecated Please use `onFilterDropdownOpenChange` instead */
+    onFilterDropdownVisibleChange?: (visible: boolean) => void;
 }
 export interface ColumnGroupType<RecordType> extends Omit<ColumnType<RecordType>, 'dataIndex'> {
     children: ColumnsType<RecordType>;

package/lib/table/style/bordered.d.ts

@@ -0,0 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../theme/internal';
+import type { TableToken } from './index';
+declare const genBorderedStyle: GenerateStyle<TableToken, CSSObject>;
+export default genBorderedStyle;

package/lib/table/style/bordered.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+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 genBorderedStyle = function genBorderedStyle(token) {
+  var _table, _ref4, _extends2, _ref6, _ref7;
+
+  var componentCls = token.componentCls;
+  var tableBorder = token.lineWidth + "px " + token.lineType + " " + token.tableBorderColor;
+
+  var getSizeBorderStyle = function getSizeBorderStyle(size, paddingVertical, paddingHorizontal) {
+    return (0, _defineProperty2["default"])({}, "&" + componentCls + "-" + size, (0, _defineProperty2["default"])({}, "> " + componentCls + "-container", (0, _defineProperty2["default"])({}, "> " + componentCls + "-content, > " + componentCls + "-body", {
+      '> table > tbody > tr > td': (0, _defineProperty2["default"])({}, "> " + componentCls + "-expanded-row-fixed", {
+        margin: "-" + paddingVertical + "px -" + (paddingHorizontal + token.lineWidth) + "px"
+      })
+    })));
+  };
+
+  return (0, _defineProperty2["default"])({}, componentCls + "-wrapper", (_ref7 = {}, (0, _defineProperty2["default"])(_ref7, "" + componentCls + componentCls + "-bordered", (0, _extends4["default"])((0, _extends4["default"])((0, _extends4["default"])((_extends2 = {}, (0, _defineProperty2["default"])(_extends2, "> " + componentCls + "-title", {
+    border: tableBorder,
+    borderBottom: 0
+  }), (0, _defineProperty2["default"])(_extends2, "> " + componentCls + "-container", (_ref4 = {
+    borderInlineStart: tableBorder
+  }, (0, _defineProperty2["default"])(_ref4, "\n            > " + componentCls + "-content,\n            > " + componentCls + "-header,\n            > " + componentCls + "-body,\n            > " + componentCls + "-summary\n          ", {
+    '> table': (_table = {}, (0, _defineProperty2["default"])(_table, "\n                > thead > tr > th,\n                > tbody > tr > td,\n                > tfoot > tr > th,\n                > tfoot > tr > td\n              ", {
+      borderInlineEnd: tableBorder
+    }), (0, _defineProperty2["default"])(_table, '> thead', {
+      '> tr:not(:last-child) > th': {
+        borderBottom: tableBorder
+      },
+      '> tr > th::before': {
+        backgroundColor: 'transparent !important'
+      }
+    }), (0, _defineProperty2["default"])(_table, "\n                > thead > tr,\n                > tbody > tr,\n                > tfoot > tr\n              ", (0, _defineProperty2["default"])({}, "> " + componentCls + "-cell-fix-right-first::after", {
+      borderInlineEnd: tableBorder
+    })), (0, _defineProperty2["default"])(_table, '> table > tbody > tr > td', (0, _defineProperty2["default"])({}, "> " + componentCls + "-expanded-row-fixed", {
+      margin: "-" + token.tablePaddingVertical + "px -" + (token.tablePaddingHorizontal + token.lineWidth) + "px",
+      '&::after': {
+        position: 'absolute',
+        top: 0,
+        insetInlineEnd: token.lineWidth,
+        bottom: 0,
+        borderInlineEnd: tableBorder,
+        content: '""'
+      }
+    })), _table)
+  }), (0, _defineProperty2["default"])(_ref4, "\n            > " + componentCls + "-content,\n            > " + componentCls + "-header\n          ", {
+    '> table': {
+      borderTop: tableBorder
+    }
+  }), _ref4)), (0, _defineProperty2["default"])(_extends2, "&" + componentCls + "-scroll-horizontal", (0, _defineProperty2["default"])({}, "> " + componentCls + "-container > " + componentCls + "-body", {
+    '> table > tbody': (0, _defineProperty2["default"])({}, "\n                > tr" + componentCls + "-expanded-row,\n                > tr" + componentCls + "-placeholder\n              ", {
+      '> td': {
+        borderInlineEnd: 0
+      }
+    })
+  })), _extends2), getSizeBorderStyle('middle', token.tablePaddingVerticalMiddle, token.tablePaddingHorizontalMiddle)), getSizeBorderStyle('small', token.tablePaddingVerticalSmall, token.tablePaddingHorizontalSmall)), (0, _defineProperty2["default"])({}, "> " + componentCls + "-footer", {
+    border: tableBorder,
+    borderTop: 0
+  }))), (0, _defineProperty2["default"])(_ref7, componentCls + "-cell", (_ref6 = {}, (0, _defineProperty2["default"])(_ref6, componentCls + "-container:first-child", {
+    // :first-child to avoid the case when bordered and title is set
+    borderTop: 0
+  }), (0, _defineProperty2["default"])(_ref6, '&-scrollbar:not([rowspan])', {
+    boxShadow: "0 " + token.lineWidth + "px 0 " + token.lineWidth + "px " + token.tableHeaderBg
+  }), _ref6)), _ref7));
+};
+
+var _default = genBorderedStyle;
+exports["default"] = _default;

package/lib/table/style/ellipsis.d.ts

@@ -0,0 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../theme/internal';
+import type { TableToken } from './index';
+declare const genEllipsisStyle: GenerateStyle<TableToken, CSSObject>;
+export default genEllipsisStyle;

package/lib/table/style/ellipsis.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _style = require("../../style");
+
+var genEllipsisStyle = function genEllipsisStyle(token) {
+  var _extends2;
+
+  var componentCls = token.componentCls;
+  return (0, _defineProperty2["default"])({}, componentCls + "-wrapper", (0, _defineProperty2["default"])({}, componentCls + "-cell-ellipsis", (0, _extends3["default"])((0, _extends3["default"])({}, _style.textEllipsis), (_extends2 = {
+    wordBreak: 'keep-all'
+  }, (0, _defineProperty2["default"])(_extends2, "\n          &" + componentCls + "-cell-fix-left-last,\n          &" + componentCls + "-cell-fix-right-first\n        ", (0, _defineProperty2["default"])({
+    overflow: 'visible'
+  }, componentCls + "-cell-content", {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  })), (0, _defineProperty2["default"])(_extends2, componentCls + "-column-title", {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    wordBreak: 'keep-all'
+  }), _extends2))));
+};
+
+var _default = genEllipsisStyle;
+exports["default"] = _default;

package/lib/table/style/empty.d.ts

@@ -0,0 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../theme/internal';
+import type { TableToken } from './index';
+declare const genEmptyStyle: GenerateStyle<TableToken, CSSObject>;
+export default genEmptyStyle;

package/lib/table/style/empty.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); // ========================= Placeholder ==========================
+
+
+var genEmptyStyle = function genEmptyStyle(token) {
+  var componentCls = token.componentCls;
+  return (0, _defineProperty2["default"])({}, componentCls + "-wrapper", (0, _defineProperty2["default"])({}, componentCls + "-tbody > tr" + componentCls + "-placeholder", {
+    textAlign: 'center',
+    color: token.colorTextDisabled,
+    '&:hover > td': {
+      background: token.colorBgContainer
+    }
+  }));
+};
+
+var _default = genEmptyStyle;
+exports["default"] = _default;

package/lib/table/style/expand.d.ts

@@ -0,0 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../theme/internal';
+import type { TableToken } from './index';
+declare const genExpandStyle: GenerateStyle<TableToken, CSSObject>;
+export default genExpandStyle;

package/lib/table/style/expand.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _style = require("../../style");
+
+var genExpandStyle = function genExpandStyle(token) {
+  var _extends2, _ref3;
+
+  var componentCls = token.componentCls,
+      antCls = token.antCls,
+      checkboxSize = token.controlInteractiveSize,
+      motionDurationSlow = token.motionDurationSlow,
+      lineWidth = token.lineWidth,
+      paddingXS = token.paddingXS,
+      lineType = token.lineType,
+      tableBorderColor = token.tableBorderColor,
+      tableExpandIconBg = token.tableExpandIconBg,
+      tableExpandColumnWidth = token.tableExpandColumnWidth,
+      borderRadius = token.borderRadius,
+      fontSize = token.fontSize,
+      fontSizeSM = token.fontSizeSM,
+      lineHeight = token.lineHeight,
+      tablePaddingVertical = token.tablePaddingVertical,
+      tablePaddingHorizontal = token.tablePaddingHorizontal,
+      tableExpandedRowBg = token.tableExpandedRowBg,
+      paddingXXS = token.paddingXXS;
+  var halfInnerSize = checkboxSize / 2 - lineWidth; // must be odd number, unless it cannot align center
+
+  var expandIconSize = halfInnerSize * 2 + lineWidth * 3;
+  var tableBorder = lineWidth + "px " + lineType + " " + tableBorderColor;
+  var expandIconLineOffset = paddingXXS - lineWidth;
+  return (0, _defineProperty2["default"])({}, componentCls + "-wrapper", (_ref3 = {}, (0, _defineProperty2["default"])(_ref3, componentCls + "-expand-icon-col", {
+    width: tableExpandColumnWidth
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-row-expand-icon-cell", (0, _defineProperty2["default"])({
+    textAlign: 'center'
+  }, componentCls + "-row-expand-icon", {
+    display: 'inline-flex',
+    "float": 'none',
+    verticalAlign: 'sub'
+  })), (0, _defineProperty2["default"])(_ref3, componentCls + "-row-indent", {
+    height: 1,
+    "float": 'left'
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-row-expand-icon", (0, _extends3["default"])((0, _extends3["default"])({}, (0, _style.operationUnit)(token)), (_extends2 = {
+    position: 'relative',
+    "float": 'left',
+    boxSizing: 'border-box',
+    width: expandIconSize,
+    height: expandIconSize,
+    padding: 0,
+    color: 'inherit',
+    lineHeight: expandIconSize + "px",
+    background: tableExpandIconBg,
+    border: tableBorder,
+    borderRadius: borderRadius,
+    transform: "scale(" + checkboxSize / expandIconSize + ")",
+    transition: "all " + motionDurationSlow,
+    userSelect: 'none'
+  }, (0, _defineProperty2["default"])(_extends2, "&:focus, &:hover, &:active", {
+    borderColor: 'currentcolor'
+  }), (0, _defineProperty2["default"])(_extends2, "&::before, &::after", {
+    position: 'absolute',
+    background: 'currentcolor',
+    transition: "transform " + motionDurationSlow + " ease-out",
+    content: '""'
+  }), (0, _defineProperty2["default"])(_extends2, '&::before', {
+    top: halfInnerSize,
+    insetInlineEnd: expandIconLineOffset,
+    insetInlineStart: expandIconLineOffset,
+    height: lineWidth
+  }), (0, _defineProperty2["default"])(_extends2, '&::after', {
+    top: expandIconLineOffset,
+    bottom: expandIconLineOffset,
+    insetInlineStart: halfInnerSize,
+    width: lineWidth,
+    transform: 'rotate(90deg)'
+  }), (0, _defineProperty2["default"])(_extends2, '&-collapsed::before', {
+    transform: 'rotate(-180deg)'
+  }), (0, _defineProperty2["default"])(_extends2, '&-collapsed::after', {
+    transform: 'rotate(0deg)'
+  }), (0, _defineProperty2["default"])(_extends2, '&-spaced', {
+    '&::before, &::after': {
+      display: 'none',
+      content: 'none'
+    },
+    background: 'transparent',
+    border: 0,
+    visibility: 'hidden'
+  }), _extends2))), (0, _defineProperty2["default"])(_ref3, componentCls + "-row-indent + " + componentCls + "-row-expand-icon", {
+    marginTop: (fontSize * lineHeight - lineWidth * 3) / 2 - Math.ceil((fontSizeSM * 1.4 - lineWidth * 3) / 2),
+    marginInlineEnd: paddingXS
+  }), (0, _defineProperty2["default"])(_ref3, "tr" + componentCls + "-expanded-row", (0, _defineProperty2["default"])({
+    '&, &:hover': {
+      '> td': {
+        background: tableExpandedRowBg
+      }
+    }
+  }, antCls + "-descriptions-view", {
+    display: 'flex',
+    table: {
+      flex: 'auto',
+      width: 'auto'
+    }
+  })), (0, _defineProperty2["default"])(_ref3, componentCls + "-expanded-row-fixed", {
+    position: 'relative',
+    margin: "-" + tablePaddingVertical + "px -" + tablePaddingHorizontal + "px",
+    padding: tablePaddingVertical + "px " + tablePaddingHorizontal + "px"
+  }), _ref3));
+};
+
+var _default = genExpandStyle;
+exports["default"] = _default;

package/lib/table/style/filter.d.ts

@@ -0,0 +1,4 @@
+import type { GenerateStyle } from '../../theme/internal';
+import type { TableToken } from './index';
+declare const genFilterStyle: GenerateStyle<TableToken>;
+export default genFilterStyle;

package/lib/table/style/filter.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _style = require("../../style");
+
+var genFilterStyle = function genFilterStyle(token) {
+  var _ref, _ref3, _extends2, _ref6;
+
+  var componentCls = token.componentCls,
+      antCls = token.antCls,
+      iconCls = token.iconCls,
+      tableFilterDropdownWidth = token.tableFilterDropdownWidth,
+      tableFilterDropdownSearchWidth = token.tableFilterDropdownSearchWidth,
+      paddingXXS = token.paddingXXS,
+      paddingXS = token.paddingXS,
+      colorText = token.colorText,
+      lineWidth = token.lineWidth,
+      lineType = token.lineType,
+      tableBorderColor = token.tableBorderColor,
+      tableHeaderIconColor = token.tableHeaderIconColor,
+      fontSizeSM = token.fontSizeSM,
+      tablePaddingHorizontal = token.tablePaddingHorizontal,
+      borderRadius = token.borderRadius,
+      motionDurationSlow = token.motionDurationSlow,
+      colorTextDescription = token.colorTextDescription,
+      colorPrimary = token.colorPrimary,
+      colorPrimaryActive = token.colorPrimaryActive,
+      tableHeaderFilterActiveBg = token.tableHeaderFilterActiveBg,
+      colorTextDisabled = token.colorTextDisabled,
+      tableFilterDropdownBg = token.tableFilterDropdownBg,
+      tableFilterDropdownHeight = token.tableFilterDropdownHeight,
+      controlItemBgHover = token.controlItemBgHover,
+      boxShadow = token.boxShadow;
+  var dropdownPrefixCls = antCls + "-dropdown";
+  var tableFilterDropdownPrefixCls = componentCls + "-filter-dropdown";
+  var treePrefixCls = antCls + "-tree";
+  var tableBorder = lineWidth + "px " + lineType + " " + tableBorderColor;
+  return [(0, _defineProperty2["default"])({}, componentCls + "-wrapper", (_ref = {}, (0, _defineProperty2["default"])(_ref, componentCls + "-filter-column", {
+    display: 'flex',
+    justifyContent: 'space-between'
+  }), (0, _defineProperty2["default"])(_ref, componentCls + "-filter-trigger", {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    marginBlock: -paddingXXS,
+    marginInline: paddingXXS + "px " + -tablePaddingHorizontal / 2 + "px",
+    padding: "0 " + paddingXXS + "px",
+    color: tableHeaderIconColor,
+    fontSize: fontSizeSM,
+    borderRadius: borderRadius,
+    cursor: 'pointer',
+    transition: "all " + motionDurationSlow,
+    '&:hover': {
+      color: colorTextDescription,
+      background: tableHeaderFilterActiveBg
+    },
+    '&.active': {
+      color: colorPrimary
+    }
+  }), _ref)), (0, _defineProperty2["default"])({}, antCls + "-dropdown", (0, _defineProperty2["default"])({}, tableFilterDropdownPrefixCls, (0, _extends3["default"])((0, _extends3["default"])({}, (0, _style.resetComponent)(token)), (_extends2 = {
+    minWidth: tableFilterDropdownWidth,
+    backgroundColor: tableFilterDropdownBg,
+    borderRadius: borderRadius,
+    boxShadow: boxShadow
+  }, (0, _defineProperty2["default"])(_extends2, dropdownPrefixCls + "-menu", {
+    // https://github.com/ant-design/ant-design/issues/4916
+    // https://github.com/ant-design/ant-design/issues/19542
+    maxHeight: tableFilterDropdownHeight,
+    overflowX: 'hidden',
+    border: 0,
+    boxShadow: 'none',
+    '&:empty::after': {
+      display: 'block',
+      padding: paddingXS + "px 0",
+      color: colorTextDisabled,
+      fontSize: fontSizeSM,
+      textAlign: 'center',
+      content: '"Not Found"'
+    }
+  }), (0, _defineProperty2["default"])(_extends2, tableFilterDropdownPrefixCls + "-tree", (_ref3 = {
+    paddingBlock: paddingXS + "px 0",
+    paddingInline: paddingXS
+  }, (0, _defineProperty2["default"])(_ref3, treePrefixCls, {
+    padding: 0
+  }), (0, _defineProperty2["default"])(_ref3, treePrefixCls + "-treenode " + treePrefixCls + "-node-content-wrapper:hover", {
+    backgroundColor: controlItemBgHover
+  }), (0, _defineProperty2["default"])(_ref3, treePrefixCls + "-treenode-checkbox-checked " + treePrefixCls + "-node-content-wrapper", {
+    '&, &:hover': {
+      backgroundColor: colorPrimaryActive
+    }
+  }), _ref3)), (0, _defineProperty2["default"])(_extends2, tableFilterDropdownPrefixCls + "-search", {
+    padding: paddingXS,
+    borderBottom: tableBorder,
+    '&-input': (0, _defineProperty2["default"])({
+      input: {
+        minWidth: tableFilterDropdownSearchWidth
+      }
+    }, iconCls, {
+      color: colorTextDisabled
+    })
+  }), (0, _defineProperty2["default"])(_extends2, tableFilterDropdownPrefixCls + "-checkall", {
+    width: '100%',
+    marginBottom: paddingXXS,
+    marginInlineStart: paddingXXS
+  }), (0, _defineProperty2["default"])(_extends2, tableFilterDropdownPrefixCls + "-btns", {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: paddingXS - lineWidth + "px " + paddingXS + "px",
+    overflow: 'hidden',
+    backgroundColor: 'inherit',
+    borderTop: tableBorder
+  }), _extends2)))), // Dropdown Menu & SubMenu
+  (0, _defineProperty2["default"])({}, antCls + "-dropdown " + tableFilterDropdownPrefixCls + ", " + tableFilterDropdownPrefixCls + "-submenu", (_ref6 = {}, (0, _defineProperty2["default"])(_ref6, antCls + "-checkbox-wrapper + span", {
+    paddingInlineStart: paddingXS,
+    color: colorText
+  }), (0, _defineProperty2["default"])(_ref6, "> ul", {
+    maxHeight: 'calc(100vh - 130px)',
+    overflowX: 'hidden',
+    overflowY: 'auto'
+  }), _ref6))];
+};
+
+var _default = genFilterStyle;
+exports["default"] = _default;

package/lib/table/style/fixed.d.ts

@@ -0,0 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '../../theme/internal';
+import type { TableToken } from './index';
+declare const genFixedStyle: GenerateStyle<TableToken, CSSObject>;
+export default genFixedStyle;

package/lib/table/style/fixed.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var genFixedStyle = function genFixedStyle(token) {
+  var _ref, _ref2, _ref3;
+
+  var componentCls = token.componentCls,
+      lineWidth = token.lineWidth,
+      colorSplit = token.colorSplit,
+      motionDurationSlow = token.motionDurationSlow,
+      zIndexTableFixed = token.zIndexTableFixed,
+      tableBg = token.tableBg;
+  var shadowColor = colorSplit; // Follow style is magic of shadow which should not follow token:
+
+  return (0, _defineProperty2["default"])({}, componentCls + "-wrapper", (_ref3 = {}, (0, _defineProperty2["default"])(_ref3, "\n        " + componentCls + "-cell-fix-left,\n        " + componentCls + "-cell-fix-right\n      ", {
+    position: 'sticky !important',
+    zIndex: zIndexTableFixed,
+    background: tableBg
+  }), (0, _defineProperty2["default"])(_ref3, "\n        " + componentCls + "-cell-fix-left-first::after,\n        " + componentCls + "-cell-fix-left-last::after\n      ", {
+    position: 'absolute',
+    top: 0,
+    right: {
+      _skip_check_: true,
+      value: 0
+    },
+    bottom: -lineWidth,
+    width: 30,
+    transform: 'translateX(100%)',
+    transition: "box-shadow " + motionDurationSlow,
+    content: '""',
+    pointerEvents: 'none'
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-cell-fix-left-all::after", {
+    display: 'none'
+  }), (0, _defineProperty2["default"])(_ref3, "\n        " + componentCls + "-cell-fix-right-first::after,\n        " + componentCls + "-cell-fix-right-last::after\n      ", {
+    position: 'absolute',
+    top: 0,
+    bottom: -lineWidth,
+    left: {
+      _skip_check_: true,
+      value: 0
+    },
+    width: 30,
+    transform: 'translateX(-100%)',
+    transition: "box-shadow " + motionDurationSlow,
+    content: '""',
+    pointerEvents: 'none'
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-container", {
+    '&::before, &::after': {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      zIndex: zIndexTableFixed,
+      width: 30,
+      transition: "box-shadow " + motionDurationSlow,
+      content: '""',
+      pointerEvents: 'none'
+    },
+    '&::before': {
+      insetInlineStart: 0
+    },
+    '&::after': {
+      insetInlineEnd: 0
+    }
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-ping-left", (_ref = {}, (0, _defineProperty2["default"])(_ref, "&:not(" + componentCls + "-has-fix-left) " + componentCls + "-container", {
+    position: 'relative',
+    '&::before': {
+      boxShadow: "inset 10px 0 8px -8px " + shadowColor
+    }
+  }), (0, _defineProperty2["default"])(_ref, "\n          " + componentCls + "-cell-fix-left-first::after,\n          " + componentCls + "-cell-fix-left-last::after\n        ", {
+    boxShadow: "inset 10px 0 8px -8px " + shadowColor
+  }), (0, _defineProperty2["default"])(_ref, componentCls + "-cell-fix-left-last::before", {
+    backgroundColor: 'transparent !important'
+  }), _ref)), (0, _defineProperty2["default"])(_ref3, componentCls + "-ping-right", (_ref2 = {}, (0, _defineProperty2["default"])(_ref2, "&:not(" + componentCls + "-has-fix-right) " + componentCls + "-container", {
+    position: 'relative',
+    '&::after': {
+      boxShadow: "inset -10px 0 8px -8px " + shadowColor
+    }
+  }), (0, _defineProperty2["default"])(_ref2, "\n          " + componentCls + "-cell-fix-right-first::after,\n          " + componentCls + "-cell-fix-right-last::after\n        ", {
+    boxShadow: "inset -10px 0 8px -8px " + shadowColor
+  }), _ref2)), _ref3));
+};
+
+var _default = genFixedStyle;
+exports["default"] = _default;