@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/utils/components/FieldLabel/index.js

@@ -1,63 +1,59 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldLabel = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var FieldLabelFunction = function FieldLabelFunction(props, ref) {
-  var _ConfigProvider$useCo, _ref2, _props$size;
-  var label = props.label,
-    onClear = props.onClear,
-    value = props.value,
-    disabled = props.disabled,
-    onLabelClick = props.onLabelClick,
-    ellipsis = props.ellipsis,
-    placeholder = props.placeholder,
-    className = props.className,
-    formatter = props.formatter,
-    variant = props.variant,
-    style = props.style,
-    downIcon = props.downIcon,
-    _props$allowClear = props.allowClear,
-    allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
-    _props$valueMaxLength = props.valueMaxLength,
-    valueMaxLength = _props$valueMaxLength === void 0 ? 41 : _props$valueMaxLength;
-  var _ref = (_antd.ConfigProvider === null || _antd.ConfigProvider === void 0 || (_ConfigProvider$useCo = _antd.ConfigProvider.useConfig) === null || _ConfigProvider$useCo === void 0 ? void 0 : _ConfigProvider$useCo.call(_antd.ConfigProvider)) || {
-      componentSize: 'middle'
-    },
-    componentSize = _ref.componentSize;
-  var size = componentSize;
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-core-field-label');
-  var _useStyle = (0, _style.useStyle)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var intl = (0, _provider.useIntl)();
-  var clearRef = (0, _react.useRef)(null);
-  var labelRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      labelRef: labelRef,
-      clearRef: clearRef
-    };
-  });
-  var wrapElements = function wrapElements(array) {
-    if (array.every(function (item) {
-      return typeof item === 'string';
-    })) return array.join(',');
-    return array.map(function (item, index) {
-      var comma = index === array.length - 1 ? '' : ',';
+const FieldLabelFunction = (props, ref) => {
+  const {
+    label,
+    onClear,
+    value,
+    disabled,
+    onLabelClick,
+    ellipsis,
+    placeholder,
+    className,
+    formatter,
+    variant,
+    style,
+    downIcon,
+    allowClear = true,
+    valueMaxLength = 41
+  } = props;
+  const {
+    componentSize
+  } = _antd.ConfigProvider?.useConfig?.() || {
+    componentSize: 'middle'
+  };
+  const size = componentSize;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-core-field-label');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(prefixCls);
+  const intl = (0, _provider.useIntl)();
+  const clearRef = (0, _react.useRef)(null);
+  const labelRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    labelRef,
+    clearRef
+  }));
+  const wrapElements = array => {
+    if (array.every(item => typeof item === 'string')) return array.join(',');
+    return array.map((item, index) => {
+      const comma = index === array.length - 1 ? '' : ',';
       if (typeof item === 'string') {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
           children: [item, comma]
@@ -71,23 +67,22 @@ var FieldLabelFunction = function FieldLabelFunction(props, ref) {
       }, index);
     });
   };
-  var formatterText = function formatterText(aValue) {
+  const formatterText = aValue => {
     if (formatter) {
       return formatter(aValue);
     }
     return Array.isArray(aValue) ? wrapElements(aValue) : aValue;
   };
-  var getTextByValue = function getTextByValue(aLabel, aValue) {
+  const getTextByValue = (aLabel, aValue) => {
     if (aValue !== undefined && aValue !== null && aValue !== '' && (!Array.isArray(aValue) || aValue.length)) {
-      var _str$toString, _str$toString$slice;
-      var prefix = aLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        onClick: function onClick() {
-          onLabelClick === null || onLabelClick === void 0 || onLabelClick();
+      const prefix = aLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        onClick: () => {
+          onLabelClick?.();
         },
-        className: "".concat(prefixCls, "-text"),
+        className: `${prefixCls}-text`,
         children: [aLabel, ': ']
       }) : '';
-      var str = formatterText(aValue);
+      const str = formatterText(aValue);
       if (!ellipsis) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
           style: {
@@ -97,15 +92,15 @@ var FieldLabelFunction = function FieldLabelFunction(props, ref) {
           children: [prefix, formatterText(aValue)]
         });
       }
-      var getText = function getText() {
-        var isArrayValue = Array.isArray(aValue) && aValue.length > 1;
-        var unitText = intl.getMessage('form.lightFilter.itemUnit', '项');
+      const getText = () => {
+        const isArrayValue = Array.isArray(aValue) && aValue.length > 1;
+        const unitText = intl.getMessage('form.lightFilter.itemUnit', '项');
         if (typeof str === 'string' && str.length > valueMaxLength && isArrayValue) {
-          return "...".concat(aValue.length).concat(unitText);
+          return `...${aValue.length}${unitText}`;
         }
         return '';
       };
-      var tail = getText();
+      const tail = getText();
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
         title: typeof str === 'string' ? str : undefined,
         style: {
@@ -117,32 +112,36 @@ var FieldLabelFunction = function FieldLabelFunction(props, ref) {
             paddingInlineStart: 4,
             display: 'flex'
           },
-          children: typeof str === 'string' ? str === null || str === void 0 || (_str$toString = str.toString()) === null || _str$toString === void 0 || (_str$toString$slice = _str$toString.slice) === null || _str$toString$slice === void 0 ? void 0 : _str$toString$slice.call(_str$toString, 0, valueMaxLength) : str
+          children: typeof str === 'string' ? str?.toString()?.slice?.(0, valueMaxLength) : str
         }), tail]
       });
     }
     return aLabel || placeholder;
   };
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-    className: (0, _classnames.default)(prefixCls, hashId, "".concat(prefixCls, "-").concat((_ref2 = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : size) !== null && _ref2 !== void 0 ? _ref2 : 'middle'), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-active"), (Array.isArray(value) ? value.length > 0 : !!value) || value === 0), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-bordered"), variant !== 'borderless'), "".concat(prefixCls, "-allow-clear"), allowClear), className),
+    className: (0, _clsx.clsx)(prefixCls, hashId, `${prefixCls}-${props.size ?? size ?? 'middle'}`, {
+      [`${prefixCls}-active`]: (Array.isArray(value) ? value.length > 0 : !!value) || value === 0,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-bordered`]: variant !== 'borderless',
+      [`${prefixCls}-allow-clear`]: allowClear
+    }, className),
     style: style,
     ref: labelRef,
-    onClick: function onClick() {
-      var _props$onClick;
-      props === null || props === void 0 || (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
+    onClick: () => {
+      props?.onClick?.();
     },
     children: [getTextByValue(label, value), (value || value === 0) && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseCircleFilled, {
       role: "button",
       title: intl.getMessage('form.lightFilter.clear', '清除'),
-      className: (0, _classnames.default)("".concat(prefixCls, "-icon"), hashId, "".concat(prefixCls, "-close")),
-      onClick: function onClick(e) {
-        if (!disabled) onClear === null || onClear === void 0 || onClear();
+      className: (0, _clsx.clsx)(`${prefixCls}-icon`, hashId, `${prefixCls}-close`),
+      onClick: e => {
+        if (!disabled) onClear?.();
         e.stopPropagation();
       },
       ref: clearRef
-    }), downIcon !== false ? downIcon !== null && downIcon !== void 0 ? downIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {
-      className: (0, _classnames.default)("".concat(prefixCls, "-icon"), hashId, "".concat(prefixCls, "-arrow"))
+    }), downIcon !== false ? downIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {
+      className: (0, _clsx.clsx)(`${prefixCls}-icon`, hashId, `${prefixCls}-arrow`)
     }) : null]
   }));
 };
-var FieldLabel = exports.FieldLabel = /*#__PURE__*/_react.default.forwardRef(FieldLabelFunction);
+const FieldLabel = exports.FieldLabel = /*#__PURE__*/_react.default.forwardRef(FieldLabelFunction);

package/lib/utils/components/FieldLabel/style.js

@@ -1,96 +1,118 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genProStyle = function genProStyle(token) {
-  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    display: 'inline-flex',
-    gap: token.marginXXS,
-    alignItems: 'center',
-    height: '30px',
-    paddingBlock: 0,
-    paddingInline: 8,
-    fontSize: token.fontSize,
-    lineHeight: '30px',
-    borderRadius: '2px',
-    cursor: 'pointer',
-    '&:hover': {
-      backgroundColor: token.colorBgTextHover
-    },
-    '&-active': (0, _defineProperty2.default)({
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      display: 'inline-flex',
+      gap: token.marginXXS,
+      alignItems: 'center',
+      height: '30px',
       paddingBlock: 0,
       paddingInline: 8,
-      backgroundColor: token.colorBgTextHover
-    }, "&".concat(token.componentCls, "-allow-clear:hover:not(").concat(token.componentCls, "-disabled)"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.componentCls, "-arrow"), {
-      display: 'none'
-    }), "".concat(token.componentCls, "-close"), {
-      display: 'inline-flex'
-    }))
-  }, "".concat(token.antCls, "-select"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-select-clear"), {
-    borderRadius: '50%'
-  })), "".concat(token.antCls, "-picker"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-picker-clear"), {
-    borderRadius: '50%'
-  })), '&-icon', (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    color: token.colorIcon,
-    transition: 'color 0.3s',
-    fontSize: 12,
-    verticalAlign: 'middle'
-  }, "&".concat(token.componentCls, "-close"), {
-    display: 'none',
-    fontSize: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: token.colorTextPlaceholder,
-    borderRadius: '50%'
-  }), '&:hover', {
-    color: token.colorIconHover
-  })), '&-disabled', (0, _defineProperty2.default)({
-    color: token.colorTextPlaceholder,
-    cursor: 'not-allowed'
-  }, "".concat(token.componentCls, "-icon"), {
-    color: token.colorTextPlaceholder
-  })), '&-small', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    height: '24px',
-    paddingBlock: 0,
-    paddingInline: 4,
-    fontSize: token.fontSizeSM,
-    lineHeight: '24px'
-  }, "&".concat(token.componentCls, "-active"), {
-    paddingBlock: 0,
-    paddingInline: 8
-  }), "".concat(token.componentCls, "-icon"), {
-    paddingBlock: 0,
-    paddingInline: 0
-  }), "".concat(token.componentCls, "-close"), {
-    marginBlockStart: '-2px',
-    paddingBlock: 4,
-    paddingInline: 4,
-    fontSize: '6px'
-  })), '&-bordered', {
-    height: '32px',
-    paddingBlock: 0,
-    paddingInline: 8,
-    border: "".concat(token.lineWidth, "px solid ").concat(token.colorBorder),
-    borderRadius: '@border-radius-base'
-  }), '&-bordered&-small', {
-    height: '24px',
-    paddingBlock: 0,
-    paddingInline: 8
-  }), '&-bordered&-active', {
-    backgroundColor: token.colorBgContainer
-  }));
+      fontSize: token.fontSize,
+      lineHeight: '30px',
+      borderRadius: '2px',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: token.colorBgTextHover
+      },
+      '&-active': {
+        paddingBlock: 0,
+        paddingInline: 8,
+        backgroundColor: token.colorBgTextHover,
+        [`&${token.componentCls}-allow-clear:hover:not(${token.componentCls}-disabled)`]: {
+          [`${token.componentCls}-arrow`]: {
+            display: 'none'
+          },
+          [`${token.componentCls}-close`]: {
+            display: 'inline-flex'
+          }
+        }
+      },
+      [`${token.antCls}-select`]: {
+        [`${token.antCls}-select-clear`]: {
+          borderRadius: '50%'
+        }
+      },
+      [`${token.antCls}-picker`]: {
+        [`${token.antCls}-picker-clear`]: {
+          borderRadius: '50%'
+        }
+      },
+      '&-icon': {
+        color: token.colorIcon,
+        transition: 'color 0.3s',
+        fontSize: 12,
+        verticalAlign: 'middle',
+        [`&${token.componentCls}-close`]: {
+          display: 'none',
+          fontSize: 12,
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: token.colorTextPlaceholder,
+          borderRadius: '50%'
+        },
+        '&:hover': {
+          color: token.colorIconHover
+        }
+      },
+      '&-disabled': {
+        color: token.colorTextPlaceholder,
+        cursor: 'not-allowed',
+        [`${token.componentCls}-icon`]: {
+          color: token.colorTextPlaceholder
+        }
+      },
+      '&-small': {
+        height: '24px',
+        paddingBlock: 0,
+        paddingInline: 4,
+        fontSize: token.fontSizeSM,
+        lineHeight: '24px',
+        [`&${token.componentCls}-active`]: {
+          paddingBlock: 0,
+          paddingInline: 8
+        },
+        [`${token.componentCls}-icon`]: {
+          paddingBlock: 0,
+          paddingInline: 0
+        },
+        [`${token.componentCls}-close`]: {
+          marginBlockStart: '-2px',
+          paddingBlock: 4,
+          paddingInline: 4,
+          fontSize: '6px'
+        }
+      },
+      '&-bordered': {
+        height: '32px',
+        paddingBlock: 0,
+        paddingInline: 8,
+        border: `${token.lineWidth}px solid ${token.colorBorder}`,
+        borderRadius: '@border-radius-base'
+      },
+      '&-bordered&-small': {
+        height: '24px',
+        paddingBlock: 0,
+        paddingInline: 8
+      },
+      '&-bordered&-active': {
+        backgroundColor: token.colorBgContainer
+      }
+    }
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('FieldLabel', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('FieldLabel', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

package/lib/utils/components/FilterDropdown/index.d.ts

@@ -1,3 +1,4 @@
+import type { PopoverProps } from 'antd';
 import type { TooltipPlacement } from 'antd/lib/tooltip';
 import React from 'react';
 import type { DropdownFooterProps } from '../DropdownFooter';
@@ -11,6 +12,16 @@ export type DropdownProps = {
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
     placement?: TooltipPlacement;
+    /**
+     * @name 透传给 Popover 的属性
+     *
+     * @description
+     * 用于给弹层（portal 到 body 的容器）设置自定义类名/样式等，例如通过 classNames.root 控制样式范围。
+     *
+     * @example
+     * popoverProps={{ classNames: { root: 'my-lightfilter-popover' } } }
+     */
+    popoverProps?: Omit<PopoverProps, 'children' | 'content' | 'trigger' | 'open' | 'onOpenChange' | 'placement'>;
     children?: React.ReactNode;
 };
 declare const FilterDropdown: React.FC<DropdownProps>;

package/lib/utils/components/FilterDropdown/index.js

@@ -1,64 +1,75 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FilterDropdown = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _DropdownFooter = require("../DropdownFooter");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var FilterDropdown = exports.FilterDropdown = function FilterDropdown(props) {
-  var children = props.children,
-    label = props.label,
-    footer = props.footer,
-    open = props.open,
-    onOpenChange = props.onOpenChange,
-    disabled = props.disabled,
-    footerRender = props.footerRender,
-    placement = props.placement;
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = getPrefixCls('pro-core-field-dropdown');
-  var _useStyle = (0, _style.useStyle)(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var htmlRef = (0, _react.useRef)(null);
+const FilterDropdown = props => {
+  const {
+    children,
+    label,
+    footer,
+    open,
+    onOpenChange,
+    disabled,
+    footerRender,
+    placement,
+    popoverProps
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-core-field-dropdown');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(prefixCls);
+  const htmlRef = (0, _react.useRef)(null);
+  const styles = (0, _react.useMemo)(() => ({
+    container: {
+      padding: 0,
+      ...(popoverProps?.styles?.container || {})
+    },
+    ...(popoverProps?.styles || {})
+  }), [popoverProps?.styles]);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
+    ...popoverProps,
     placement: placement,
     trigger: ['click'],
     open: open || false,
     onOpenChange: onOpenChange,
-    styles: {
-      container: {
-        padding: 0
-      }
-    },
+    styles: styles,
     content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: htmlRef,
-      className: (0, _classnames.default)("".concat(prefixCls, "-overlay"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-overlay-").concat(placement), placement), "hashId", hashId)),
+      className: (0, _clsx.clsx)(`${prefixCls}-overlay`, {
+        [`${prefixCls}-overlay-${placement}`]: placement,
+        hashId
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
-        getPopupContainer: function getPopupContainer() {
+        getPopupContainer: () => {
           return htmlRef.current || document.body;
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefixCls, "-content ").concat(hashId).trim(),
+          className: `${prefixCls}-content ${hashId}`.trim(),
           children: children
         })
-      }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownFooter.DropdownFooter, (0, _objectSpread2.default)({
+      }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownFooter.DropdownFooter, {
         disabled: disabled,
-        footerRender: footerRender
-      }, footer))]
+        footerRender: footerRender,
+        ...footer
+      })]
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "".concat(prefixCls, "-label ").concat(hashId).trim(),
+      className: `${prefixCls}-label ${hashId}`.trim(),
       children: label
     })
   }));
-};
+};
+exports.FilterDropdown = FilterDropdown;

package/lib/utils/components/FilterDropdown/style.js

@@ -1,29 +1,31 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genProStyle = function genProStyle(token) {
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.componentCls, "-label"), {
-    cursor: 'pointer'
-  }), "".concat(token.componentCls, "-overlay"), {
-    minWidth: '200px',
-    marginBlockStart: '4px'
-  }), "".concat(token.componentCls, "-content"), {
-    paddingBlock: 16,
-    paddingInline: 16
-  });
+const genProStyle = token => {
+  return {
+    [`${token.componentCls}-label`]: {
+      cursor: 'pointer'
+    },
+    [`${token.componentCls}-overlay`]: {
+      minWidth: '200px',
+      marginBlockStart: '4px'
+    },
+    [`${token.componentCls}-content`]: {
+      paddingBlock: 16,
+      paddingInline: 16
+    }
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('FilterDropdown', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('FilterDropdown', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }