@chaoswise/ui 3.1.6 → 3.1.8

package/lib/Antd5/input/style/variants.js

@@ -135,13 +135,14 @@ export var genBorderlessStyle = function genBorderlessStyle(token, extraStyles)
 };
 /* ============== Filled ============== */
 var genBaseFilledStyle = function genBaseFilledStyle(token, options) {
+  var _options$inputColor;
   return {
     background: options.bg,
     borderWidth: token.lineWidth,
     borderStyle: token.lineType,
     borderColor: 'transparent',
     'input&, & input, textarea&, & textarea': {
-      color: options === null || options === void 0 ? void 0 : options.inputColor
+      color: (_options$inputColor = options === null || options === void 0 ? void 0 : options.inputColor) !== null && _options$inputColor !== void 0 ? _options$inputColor : 'unset'
     },
     '&:hover': {
       background: options.hoverBg
@@ -189,18 +190,12 @@ var genFilledGroupStatusStyle = function genFilledGroupStatusStyle(token, option
 };
 export var genFilledGroupStyle = function genFilledGroupStyle(token) {
   return {
-    '&-filled': _objectSpread(_objectSpread(_objectSpread(_defineProperty({}, "".concat(token.componentCls, "-group"), _defineProperty({
-      '&-addon': {
-        background: token.colorFillTertiary
-      }
-    }, "".concat(token.componentCls, "-filled:not(:focus):not(:focus-within)"), {
-      '&:not(:first-child)': {
-        borderInlineStart: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorSplit)
-      },
-      '&:not(:last-child)': {
-        borderInlineEnd: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorSplit)
+    '&-filled': _objectSpread(_objectSpread(_objectSpread(_defineProperty({}, "".concat(token.componentCls, "-group-addon"), {
+      background: token.colorFillTertiary,
+      '&:last-child': {
+        position: 'static'
       }
-    })), genFilledGroupStatusStyle(token, {
+    }), genFilledGroupStatusStyle(token, {
       status: 'error',
       addonBg: token.colorErrorBg,
       addonColor: token.colorErrorText
@@ -225,4 +220,64 @@ export var genFilledGroupStyle = function genFilledGroupStyle(token) {
       }
     })))
   };
+};
+/* ============== Underlined ============== */
+// https://github.com/ant-design/ant-design/issues/51379
+export var genBaseUnderlinedStyle = function genBaseUnderlinedStyle(token, options) {
+  return {
+    background: token.colorBgContainer,
+    borderWidth: "".concat(unit(token.lineWidth), " 0"),
+    borderStyle: "".concat(token.lineType, " none"),
+    borderColor: "transparent transparent ".concat(options.borderColor, " transparent"),
+    borderRadius: 0,
+    '&:hover': {
+      borderColor: "transparent transparent ".concat(options.borderColor, " transparent"),
+      backgroundColor: token.hoverBg
+    },
+    '&:focus, &:focus-within': {
+      borderColor: "transparent transparent ".concat(options.borderColor, " transparent"),
+      outline: 0,
+      backgroundColor: token.activeBg
+    }
+  };
+};
+var genUnderlinedStatusStyle = function genUnderlinedStatusStyle(token, options) {
+  return _defineProperty(_defineProperty({}, "&".concat(token.componentCls, "-status-").concat(options.status, ":not(").concat(token.componentCls, "-disabled)"), _objectSpread(_objectSpread({}, genBaseUnderlinedStyle(token, options)), {}, _defineProperty({}, "".concat(token.componentCls, "-prefix, ").concat(token.componentCls, "-suffix"), {
+    color: options.affixColor
+  }))), "&".concat(token.componentCls, "-status-").concat(options.status).concat(token.componentCls, "-disabled"), {
+    borderColor: "transparent transparent ".concat(options.borderColor, " transparent")
+  });
+};
+export var genUnderlinedStyle = function genUnderlinedStyle(token, extraStyles) {
+  return {
+    '&-underlined': _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, genBaseUnderlinedStyle(token, {
+      borderColor: token.colorBorder,
+      hoverBorderColor: token.hoverBorderColor,
+      activeBorderColor: token.activeBorderColor,
+      activeShadow: token.activeShadow
+    })), {}, _defineProperty(_defineProperty({}, "&".concat(token.componentCls, "-disabled, &[disabled]"), {
+      color: token.colorTextDisabled,
+      boxShadow: 'none',
+      cursor: 'not-allowed',
+      '&:hover': {
+        borderColor: "transparent transparent ".concat(token.colorBorder, " transparent")
+      }
+    }), 'input[disabled], textarea[disabled]', {
+      cursor: 'not-allowed'
+    }), genUnderlinedStatusStyle(token, {
+      status: 'error',
+      borderColor: token.colorError,
+      hoverBorderColor: token.colorErrorBorderHover,
+      activeBorderColor: token.colorError,
+      activeShadow: token.errorActiveShadow,
+      affixColor: token.colorError
+    })), genUnderlinedStatusStyle(token, {
+      status: 'warning',
+      borderColor: token.colorWarning,
+      hoverBorderColor: token.colorWarningBorderHover,
+      activeBorderColor: token.colorWarning,
+      activeShadow: token.warningActiveShadow,
+      affixColor: token.colorWarning
+    })), extraStyles)
+  };
 };

package/lib/Antd5/input-number/index.js

@@ -132,7 +132,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classNames: {
       input: inputNumberClass,
       variant: classNames(_defineProperty({}, "".concat(prefixCls, "-").concat(variant), enableVariantCls), getStatusClassNames(prefixCls, mergedStatus, hasFeedback)),
-      affixWrapper: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-affix-wrapper-sm"), mergedSize === 'small'), "".concat(prefixCls, "-affix-wrapper-lg"), mergedSize === 'large'), "".concat(prefixCls, "-affix-wrapper-rtl"), direction === 'rtl'), "".concat(prefixCls, "-affix-wrapper-without-controls"), controls === false), hashId),
+      affixWrapper: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-affix-wrapper-sm"), mergedSize === 'small'), "".concat(prefixCls, "-affix-wrapper-lg"), mergedSize === 'large'), "".concat(prefixCls, "-affix-wrapper-rtl"), direction === 'rtl'), "".concat(prefixCls, "-affix-wrapper-without-controls"), controls === false || mergedDisabled), hashId),
       wrapper: classNames(_defineProperty({}, "".concat(wrapperClassName, "-rtl"), direction === 'rtl'), hashId),
       groupWrapper: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-group-wrapper-sm"), mergedSize === 'small'), "".concat(prefixCls, "-group-wrapper-lg"), mergedSize === 'large'), "".concat(prefixCls, "-group-wrapper-rtl"), direction === 'rtl'), "".concat(prefixCls, "-group-wrapper-").concat(variant), enableVariantCls), getStatusClassNames("".concat(prefixCls, "-group-wrapper"), mergedStatus, hasFeedback), hashId)
     }

package/lib/Antd5/input-number/style/index.js

@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { unit } from '@ant-design/cssinjs';
 import { genBasicInputStyle, genInputGroupStyle, genPlaceholderStyle, initInputToken } from '../../input/style';
-import { genBorderlessStyle, genFilledGroupStyle, genFilledStyle, genOutlinedGroupStyle, genOutlinedStyle } from '../../input/style/variants';
+import { genBorderlessStyle, genFilledGroupStyle, genFilledStyle, genOutlinedGroupStyle, genOutlinedStyle, genUnderlinedStyle } from '../../input/style/variants';
 import { resetComponent, resetIcon } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
@@ -39,7 +39,7 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     paddingBlockSM = token.paddingBlockSM,
     paddingBlockLG = token.paddingBlockLG,
     paddingInlineLG = token.paddingInlineLG,
-    colorTextDescription = token.colorTextDescription,
+    colorIcon = token.colorIcon,
     motionDurationMid = token.motionDurationMid,
     handleHoverColor = token.handleHoverColor,
     handleOpacity = token.handleOpacity,
@@ -55,7 +55,7 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     filledHandleBg = token.filledHandleBg,
     lineHeightLG = token.lineHeightLG,
     calc = token.calc;
-  return [_defineProperty({}, componentCls, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, resetComponent(token)), genBasicInputStyle(token)), {}, {
+  return [_defineProperty({}, componentCls, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, resetComponent(token)), genBasicInputStyle(token)), {}, {
     display: 'inline-block',
     width: controlWidth,
     margin: 0,
@@ -71,6 +71,10 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     borderBlockStart: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(handleBorderColor)
   })), '&:focus-within', _defineProperty({}, "".concat(componentCls, "-handler-wrap"), {
     background: handleBg
+  })))), genUnderlinedStyle(token, _defineProperty({}, "".concat(componentCls, "-handler-wrap"), _defineProperty({
+    background: handleBg
+  }, "".concat(componentCls, "-handler-down"), {
+    borderBlockStart: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(handleBorderColor)
   })))), genBorderlessStyle(token)), {}, _defineProperty(_defineProperty(_defineProperty({
     '&-rtl': _defineProperty({
       direction: 'rtl'
@@ -140,7 +144,6 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     }, genPlaceholderStyle(token.colorTextPlaceholder)), {}, {
       '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button': {
         margin: 0,
-        webkitAppearance: 'none',
         appearance: 'none'
       }
     })
@@ -152,7 +155,7 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     position: 'absolute',
     insetBlockStart: 0,
     insetInlineEnd: 0,
-    width: 0,
+    width: token.handleVisibleWidth,
     opacity: handleOpacity,
     height: '100%',
     borderStartStartRadius: 0,
@@ -176,7 +179,7 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
   }))), "".concat(componentCls, "-handler"), {
     height: '50%',
     overflow: 'hidden',
-    color: colorTextDescription,
+    color: colorIcon,
     fontWeight: 'bold',
     lineHeight: 0,
     textAlign: 'center',
@@ -193,7 +196,7 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
       color: handleHoverColor
     }),
     '&-up-inner, &-down-inner': _objectSpread(_objectSpread({}, resetIcon()), {}, {
-      color: colorTextDescription,
+      color: colorIcon,
       transition: "all ".concat(motionDurationMid, " linear"),
       userSelect: 'none'
     })

package/lib/Antd5/input-number/style/token.js

@@ -4,21 +4,23 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { TinyColor } from '@ctrl/tinycolor';
+import { FastColor } from '@ant-design/fast-color';
 import { initComponentToken } from '../../input/style/token';
 export var prepareComponentToken = function prepareComponentToken(token) {
   var _token$handleVisible;
   var handleVisible = (_token$handleVisible = token.handleVisible) !== null && _token$handleVisible !== void 0 ? _token$handleVisible : 'auto';
+  var handleWidth = token.controlHeightSM - token.lineWidth * 2;
   return _objectSpread(_objectSpread({}, initComponentToken(token)), {}, {
     controlWidth: 90,
-    handleWidth: token.controlHeightSM - token.lineWidth * 2,
+    handleWidth: handleWidth,
     handleFontSize: token.fontSize / 2,
     handleVisible: handleVisible,
     handleActiveBg: token.colorFillAlter,
     handleBg: token.colorBgContainer,
-    filledHandleBg: new TinyColor(token.colorFillSecondary).onBackground(token.colorBgContainer).toHexString(),
+    filledHandleBg: new FastColor(token.colorFillSecondary).onBackground(token.colorBgContainer).toHexString(),
     handleHoverColor: token.colorPrimary,
     handleBorderColor: token.colorBorder,
-    handleOpacity: handleVisible === true ? 1 : 0
+    handleOpacity: handleVisible === true ? 1 : 0,
+    handleVisibleWidth: handleVisible === true ? handleWidth : 0
   });
 };

package/lib/Antd5/layout/Sider.js

@@ -21,7 +21,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import isNumeric from '../_util/isNumeric';
+import { addMediaQueryListener, removeMediaQueryListener } from '../_util/mediaQueryUtil';
 import { ConfigContext } from '../config-provider';
 import { LayoutContext } from './context';
 import useStyle from './style/sider';
@@ -33,6 +33,9 @@ var dimensionMaxMap = {
   xl: '1199.98px',
   xxl: '1599.98px'
 };
+var isNumeric = function isNumeric(value) {
+  return !Number.isNaN(Number.parseFloat(value)) && isFinite(value);
+};
 export var SiderContext = /*#__PURE__*/React.createContext({});
 var generateId = function () {
   var i = 0;
@@ -89,7 +92,8 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   // =========================== Prefix ===========================
   var _useContext2 = useContext(ConfigContext),
-    getPrefixCls = _useContext2.getPrefixCls;
+    getPrefixCls = _useContext2.getPrefixCls,
+    direction = _useContext2.direction;
   var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     _useStyle2 = _slicedToArray(_useStyle, 3),
@@ -97,7 +101,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hashId = _useStyle2[1],
     cssVarCls = _useStyle2[2];
   // ========================= Responsive =========================
-  var responsiveHandlerRef = useRef();
+  var responsiveHandlerRef = useRef(null);
   responsiveHandlerRef.current = function (mql) {
     setBelow(mql.matches);
     onBreakpoint === null || onBreakpoint === void 0 || onBreakpoint(mql.matches);
@@ -106,31 +110,19 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
   useEffect(function () {
+    var _window;
     function responsiveHandler(mql) {
-      return responsiveHandlerRef.current(mql);
+      var _responsiveHandlerRef;
+      return (_responsiveHandlerRef = responsiveHandlerRef.current) === null || _responsiveHandlerRef === void 0 ? void 0 : _responsiveHandlerRef.call(responsiveHandlerRef, mql);
     }
     var mql;
-    if (typeof window !== 'undefined') {
-      var _window = window,
-        matchMedia = _window.matchMedia;
-      if (matchMedia && breakpoint && breakpoint in dimensionMaxMap) {
-        mql = matchMedia("screen and (max-width: ".concat(dimensionMaxMap[breakpoint], ")"));
-        try {
-          mql.addEventListener('change', responsiveHandler);
-        } catch (_unused) {
-          mql.addListener(responsiveHandler);
-        }
-        responsiveHandler(mql);
-      }
+    if (typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia) !== 'undefined' && breakpoint && breakpoint in dimensionMaxMap) {
+      mql = window.matchMedia("screen and (max-width: ".concat(dimensionMaxMap[breakpoint], ")"));
+      addMediaQueryListener(mql, responsiveHandler);
+      responsiveHandler(mql);
     }
     return function () {
-      try {
-        var _mql;
-        (_mql = mql) === null || _mql === void 0 || _mql.removeEventListener('change', responsiveHandler);
-      } catch (_unused2) {
-        var _mql2;
-        (_mql2 = mql) === null || _mql2 === void 0 || _mql2.removeListener(responsiveHandler);
-      }
+      removeMediaQueryListener(mql, responsiveHandler);
     };
   }, [breakpoint]); // in order to accept dynamic 'breakpoint' property, we need to add 'breakpoint' into dependency array.
   useEffect(function () {
@@ -143,42 +135,49 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var toggle = function toggle() {
     handleSetCollapsed(!collapsed, 'clickTrigger');
   };
-  var renderSider = function renderSider() {
-    var divProps = omit(otherProps, ['collapsed']);
-    var rawWidth = collapsed ? collapsedWidth : width;
-    // use "px" as fallback unit for width
-    var siderWidth = isNumeric(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth);
-    // special trigger when collapsedWidth == 0
-    var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? _jsx("span", {
-      onClick: toggle,
-      className: classNames("".concat(prefixCls, "-zero-width-trigger"), "".concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left')),
-      style: zeroWidthTriggerStyle,
-      children: trigger || _jsx(BarsOutlined, {})
-    }) : null;
-    var iconObj = {
-      expanded: reverseArrow ? _jsx(RightOutlined, {}) : _jsx(LeftOutlined, {}),
-      collapsed: reverseArrow ? _jsx(LeftOutlined, {}) : _jsx(RightOutlined, {})
-    };
-    var status = collapsed ? 'collapsed' : 'expanded';
-    var defaultTrigger = iconObj[status];
-    var triggerDom = trigger !== null ? zeroWidthTrigger || _jsx("div", {
-      className: "".concat(prefixCls, "-trigger"),
-      onClick: toggle,
-      style: {
-        width: siderWidth
-      },
-      children: trigger || defaultTrigger
-    }) : null;
-    var divStyle = _objectSpread(_objectSpread({}, style), {}, {
-      flex: "0 0 ".concat(siderWidth),
-      maxWidth: siderWidth,
-      // Fix width transition bug in IE11
-      minWidth: siderWidth,
-      // https://github.com/ant-design/ant-design/issues/6349
+  var divProps = omit(otherProps, ['collapsed']);
+  var rawWidth = collapsed ? collapsedWidth : width;
+  // use "px" as fallback unit for width
+  var siderWidth = isNumeric(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth);
+  // special trigger when collapsedWidth == 0
+  var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? _jsx("span", {
+    onClick: toggle,
+    className: classNames("".concat(prefixCls, "-zero-width-trigger"), "".concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left')),
+    style: zeroWidthTriggerStyle,
+    children: trigger || _jsx(BarsOutlined, {})
+  }) : null;
+  var reverseIcon = direction === 'rtl' === !reverseArrow;
+  var iconObj = {
+    expanded: reverseIcon ? _jsx(RightOutlined, {}) : _jsx(LeftOutlined, {}),
+    collapsed: reverseIcon ? _jsx(LeftOutlined, {}) : _jsx(RightOutlined, {})
+  };
+  var status = collapsed ? 'collapsed' : 'expanded';
+  var defaultTrigger = iconObj[status];
+  var triggerDom = trigger !== null ? zeroWidthTrigger || _jsx("div", {
+    className: "".concat(prefixCls, "-trigger"),
+    onClick: toggle,
+    style: {
       width: siderWidth
-    });
-    var siderCls = classNames(prefixCls, "".concat(prefixCls, "-").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-collapsed"), !!collapsed), "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), "".concat(prefixCls, "-below"), !!below), "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), className, hashId, cssVarCls);
-    return _jsxs("aside", _objectSpread(_objectSpread({
+    },
+    children: trigger || defaultTrigger
+  }) : null;
+  var divStyle = _objectSpread(_objectSpread({}, style), {}, {
+    flex: "0 0 ".concat(siderWidth),
+    maxWidth: siderWidth,
+    // Fix width transition bug in IE11
+    minWidth: siderWidth,
+    // https://github.com/ant-design/ant-design/issues/6349
+    width: siderWidth
+  });
+  var siderCls = classNames(prefixCls, "".concat(prefixCls, "-").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-collapsed"), !!collapsed), "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), "".concat(prefixCls, "-below"), !!below), "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), className, hashId, cssVarCls);
+  var contextValue = React.useMemo(function () {
+    return {
+      siderCollapsed: collapsed
+    };
+  }, [collapsed]);
+  return wrapCSSVar(_jsx(SiderContext.Provider, {
+    value: contextValue,
+    children: _jsxs("aside", _objectSpread(_objectSpread({
       className: siderCls
     }, divProps), {}, {
       style: divStyle,
@@ -187,16 +186,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
         className: "".concat(prefixCls, "-children"),
         children: children
       }), collapsible || below && zeroWidthTrigger ? triggerDom : null]
-    }));
-  };
-  var contextValue = React.useMemo(function () {
-    return {
-      siderCollapsed: collapsed
-    };
-  }, [collapsed]);
-  return wrapCSSVar(_jsx(SiderContext.Provider, {
-    value: contextValue,
-    children: renderSider()
+    }))
   }));
 });
 if (process.env.NODE_ENV !== 'production') {

package/lib/Antd5/layout/layout.js

@@ -23,6 +23,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
 import { LayoutContext } from './context';
 import useHasSider from './hooks/useHasSider';
 import useStyle from './style';
@@ -80,9 +81,10 @@ var BasicLayout = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style = props.style,
     others = _objectWithoutProperties(props, _excluded2);
   var passedProps = omit(others, ['suffixCls']);
-  var _React$useContext3 = React.useContext(ConfigContext),
-    getPrefixCls = _React$useContext3.getPrefixCls,
-    layout = _React$useContext3.layout;
+  var _useComponentConfig = useComponentConfig('layout'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style;
   var prefixCls = getPrefixCls('layout', customizePrefixCls);
   var mergedHasSider = useHasSider(siders, children, hasSider);
   var _useStyle3 = useStyle(prefixCls),
@@ -90,7 +92,7 @@ var BasicLayout = /*#__PURE__*/React.forwardRef(function (props, ref) {
     wrapCSSVar = _useStyle4[0],
     hashId = _useStyle4[1],
     cssVarCls = _useStyle4[2];
-  var classString = classNames(prefixCls, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-has-sider"), mergedHasSider), "".concat(prefixCls, "-rtl"), direction === 'rtl'), layout === null || layout === void 0 ? void 0 : layout.className, className, rootClassName, hashId, cssVarCls);
+  var classString = classNames(prefixCls, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-has-sider"), mergedHasSider), "".concat(prefixCls, "-rtl"), direction === 'rtl'), contextClassName, className, rootClassName, hashId, cssVarCls);
   var contextValue = React.useMemo(function () {
     return {
       siderHook: {
@@ -114,7 +116,7 @@ var BasicLayout = /*#__PURE__*/React.forwardRef(function (props, ref) {
     children: _jsx(Tag, _objectSpread(_objectSpread({
       ref: ref,
       className: classString,
-      style: _objectSpread(_objectSpread({}, layout === null || layout === void 0 ? void 0 : layout.style), style)
+      style: _objectSpread(_objectSpread({}, contextStyle), style)
     }, passedProps), {}, {
       children: children
     }))

package/lib/Antd5/layout/style/sider.js

@@ -17,12 +17,12 @@ var genSiderStyle = function genSiderStyle(token) {
     headerHeight = token.headerHeight,
     zeroTriggerWidth = token.zeroTriggerWidth,
     zeroTriggerHeight = token.zeroTriggerHeight,
-    borderRadius = token.borderRadius,
+    borderRadiusLG = token.borderRadiusLG,
     lightSiderBg = token.lightSiderBg,
     lightTriggerColor = token.lightTriggerColor,
     lightTriggerBg = token.lightTriggerBg,
     bodyBg = token.bodyBg;
-  return _defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'relative',
     // fix firefox can't set width smaller than content on flex item
     minWidth: 0,
@@ -43,7 +43,9 @@ var genSiderStyle = function genSiderStyle(token) {
     paddingTop: 0.1
   }, "".concat(antCls, "-menu").concat(antCls, "-menu-inline-collapsed"), {
     width: 'auto'
-  })), "".concat(componentCls, "-trigger"), {
+  })), "&-zero-width ".concat(componentCls, "-children"), {
+    overflow: 'hidden'
+  }), "".concat(componentCls, "-trigger"), {
     position: 'fixed',
     bottom: 0,
     zIndex: 1,
@@ -54,46 +56,35 @@ var genSiderStyle = function genSiderStyle(token) {
     background: triggerBg,
     cursor: 'pointer',
     transition: "all ".concat(motionDurationMid)
-  }), '&-zero-width', {
-    '> *': {
-      overflow: 'hidden'
-    },
-    '&-trigger': {
+  }), "".concat(componentCls, "-zero-width-trigger"), {
+    position: 'absolute',
+    top: headerHeight,
+    insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
+    zIndex: 1,
+    width: zeroTriggerWidth,
+    height: zeroTriggerHeight,
+    color: triggerColor,
+    fontSize: token.fontSizeXL,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: siderBg,
+    borderRadius: "0 ".concat(unit(borderRadiusLG), " ").concat(unit(borderRadiusLG), " 0"),
+    cursor: 'pointer',
+    transition: "background ".concat(motionDurationSlow, " ease"),
+    '&::after': {
       position: 'absolute',
-      top: headerHeight,
-      insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
-      zIndex: 1,
-      width: zeroTriggerWidth,
-      height: zeroTriggerHeight,
-      color: triggerColor,
-      fontSize: token.fontSizeXL,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      background: siderBg,
-      borderStartStartRadius: 0,
-      borderStartEndRadius: borderRadius,
-      borderEndEndRadius: borderRadius,
-      borderEndStartRadius: 0,
-      cursor: 'pointer',
-      transition: "background ".concat(motionDurationSlow, " ease"),
-      '&::after': {
-        position: 'absolute',
-        inset: 0,
-        background: 'transparent',
-        transition: "all ".concat(motionDurationSlow),
-        content: '""'
-      },
-      '&:hover::after': {
-        background: "rgba(255, 255, 255, 0.2)"
-      },
-      '&-right': {
-        insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
-        borderStartStartRadius: borderRadius,
-        borderStartEndRadius: 0,
-        borderEndEndRadius: 0,
-        borderEndStartRadius: borderRadius
-      }
+      inset: 0,
+      background: 'transparent',
+      transition: "all ".concat(motionDurationSlow),
+      content: '""'
+    },
+    '&:hover::after': {
+      background: "rgba(255, 255, 255, 0.2)"
+    },
+    '&-right': {
+      insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
+      borderRadius: "".concat(unit(borderRadiusLG), " 0 0 ").concat(unit(borderRadiusLG))
     }
   }), '&-light', _defineProperty(_defineProperty({
     background: lightSiderBg