@chaoswise/ui 3.1.6 → 3.1.8

package/lib/Antd5/input/TextArea.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "bordered", "size", "disabled", "status", "allowClear", "classNames", "rootClassName", "className", "style", "styles", "variant"];
+var _excluded = ["prefixCls", "bordered", "size", "disabled", "status", "allowClear", "classNames", "rootClassName", "className", "style", "styles", "variant", "showCount", "onMouseDown", "onResize"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -21,16 +21,18 @@ import RcTextArea from 'rc-textarea';
 import getAllowClear from '../_util/getAllowClear';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { devUseWarning } from '../_util/warning';
-import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
 import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import { FormItemInputContext } from '../form/context';
 import useVariant from '../form/hooks/useVariants';
+import { useCompactItemContext } from '../space/Compact';
 import { triggerFocus } from './Input';
-import useStyle from './style';
+import { useSharedStyle } from './style';
+import useStyle from './style/textarea';
 var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _textArea$classNames, _props$count;
+  var _props$count;
   var customizePrefixCls = props.prefixCls,
     _props$bordered = props.bordered,
     bordered = _props$bordered === void 0 ? true : _props$bordered,
@@ -44,28 +46,34 @@ var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
     style = props.style,
     styles = props.styles,
     customVariant = props.variant,
+    showCount = props.showCount,
+    onMouseDown = props.onMouseDown,
+    onResize = props.onResize,
     rest = _objectWithoutProperties(props, _excluded);
   if (process.env.NODE_ENV !== 'production') {
     var _devUseWarning = devUseWarning('TextArea'),
       deprecated = _devUseWarning.deprecated;
     deprecated(!('bordered' in props), 'bordered', 'variant');
   }
-  var _React$useContext = React.useContext(ConfigContext),
-    getPrefixCls = _React$useContext.getPrefixCls,
-    direction = _React$useContext.direction,
-    textArea = _React$useContext.textArea;
-  // ===================== Size =====================
-  var mergedSize = useSize(customizeSize);
-  // ===================== Disabled =====================
+  var _useComponentConfig = useComponentConfig('textArea'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    direction = _useComponentConfig.direction,
+    contextAllowClear = _useComponentConfig.allowClear,
+    contextAutoComplete = _useComponentConfig.autoComplete,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style,
+    contextClassNames = _useComponentConfig.classNames,
+    contextStyles = _useComponentConfig.styles;
+  // =================== Disabled ===================
   var disabled = React.useContext(DisabledContext);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
-  // ===================== Status =====================
-  var _React$useContext2 = React.useContext(FormItemInputContext),
-    contextStatus = _React$useContext2.status,
-    hasFeedback = _React$useContext2.hasFeedback,
-    feedbackIcon = _React$useContext2.feedbackIcon;
+  // ==================== Status ====================
+  var _React$useContext = React.useContext(FormItemInputContext),
+    contextStatus = _React$useContext.status,
+    hasFeedback = _React$useContext.hasFeedback,
+    feedbackIcon = _React$useContext.feedbackIcon;
   var mergedStatus = getMergedStatus(contextStatus, customStatus);
-  // ===================== Ref =====================
+  // ===================== Ref ======================
   var innerRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
     var _innerRef$current;
@@ -82,37 +90,86 @@ var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   });
   var prefixCls = getPrefixCls('input', customizePrefixCls);
-  // ===================== Style =====================
+  // ==================== Style =====================
   var rootCls = useCSSVarCls(prefixCls);
+  var _useSharedStyle = useSharedStyle(prefixCls, rootClassName),
+    _useSharedStyle2 = _slicedToArray(_useSharedStyle, 3),
+    wrapSharedCSSVar = _useSharedStyle2[0],
+    hashId = _useSharedStyle2[1],
+    cssVarCls = _useSharedStyle2[2];
   var _useStyle = useStyle(prefixCls, rootCls),
-    _useStyle2 = _slicedToArray(_useStyle, 3),
-    wrapCSSVar = _useStyle2[0],
-    hashId = _useStyle2[1],
-    cssVarCls = _useStyle2[2];
+    _useStyle2 = _slicedToArray(_useStyle, 1),
+    wrapCSSVar = _useStyle2[0];
+  // ================= Compact Item =================
+  var _useCompactItemContex = useCompactItemContext(prefixCls, direction),
+    compactSize = _useCompactItemContex.compactSize,
+    compactItemClassnames = _useCompactItemContex.compactItemClassnames;
+  // ===================== Size =====================
+  var mergedSize = useSize(function (ctx) {
+    var _ref;
+    return (_ref = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _ref !== void 0 ? _ref : ctx;
+  });
   var _useVariant = useVariant('textArea', customVariant, bordered),
     _useVariant2 = _slicedToArray(_useVariant, 2),
     variant = _useVariant2[0],
     enableVariantCls = _useVariant2[1];
-  var mergedAllowClear = getAllowClear(allowClear !== null && allowClear !== void 0 ? allowClear : textArea === null || textArea === void 0 ? void 0 : textArea.allowClear);
-  return wrapCSSVar(_jsx(RcTextArea, _objectSpread(_objectSpread({
-    autoComplete: textArea === null || textArea === void 0 ? void 0 : textArea.autoComplete
+  var mergedAllowClear = getAllowClear(allowClear !== null && allowClear !== void 0 ? allowClear : contextAllowClear);
+  // ==================== Resize ====================
+  // https://github.com/ant-design/ant-design/issues/51594
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isMouseDown = _React$useState2[0],
+    setIsMouseDown = _React$useState2[1];
+  // When has wrapper, resize will make as dirty for `resize: both` style
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    resizeDirty = _React$useState4[0],
+    setResizeDirty = _React$useState4[1];
+  var onInternalMouseDown = function onInternalMouseDown(e) {
+    setIsMouseDown(true);
+    onMouseDown === null || onMouseDown === void 0 || onMouseDown(e);
+    var _onMouseUp = function onMouseUp() {
+      setIsMouseDown(false);
+      document.removeEventListener('mouseup', _onMouseUp);
+    };
+    document.addEventListener('mouseup', _onMouseUp);
+  };
+  var onInternalResize = function onInternalResize(size) {
+    onResize === null || onResize === void 0 || onResize(size);
+    // Change to dirty since this maybe from the `resize: both` style
+    if (isMouseDown && typeof getComputedStyle === 'function') {
+      var _innerRef$current4;
+      var ele = (_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 || (_innerRef$current4 = _innerRef$current4.nativeElement) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.querySelector('textarea');
+      if (ele && getComputedStyle(ele).resize === 'both') {
+        setResizeDirty(true);
+      }
+    }
+  };
+  // ==================== Render ====================
+  return wrapSharedCSSVar(wrapCSSVar(_jsx(RcTextArea, _objectSpread(_objectSpread({
+    autoComplete: contextAutoComplete
   }, rest), {}, {
-    style: _objectSpread(_objectSpread({}, textArea === null || textArea === void 0 ? void 0 : textArea.style), style),
-    styles: _objectSpread(_objectSpread({}, textArea === null || textArea === void 0 ? void 0 : textArea.styles), styles),
+    style: _objectSpread(_objectSpread({}, contextStyle), style),
+    styles: _objectSpread(_objectSpread({}, contextStyles), styles),
     disabled: mergedDisabled,
     allowClear: mergedAllowClear,
-    className: classNames(cssVarCls, rootCls, className, rootClassName, textArea === null || textArea === void 0 ? void 0 : textArea.className),
-    classNames: _objectSpread(_objectSpread(_objectSpread({}, classes), textArea === null || textArea === void 0 ? void 0 : textArea.classNames), {}, {
-      textarea: classNames(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-sm"), mergedSize === 'small'), "".concat(prefixCls, "-lg"), mergedSize === 'large'), hashId, classes === null || classes === void 0 ? void 0 : classes.textarea, textArea === null || textArea === void 0 || (_textArea$classNames = textArea.classNames) === null || _textArea$classNames === void 0 ? void 0 : _textArea$classNames.textarea),
+    className: classNames(cssVarCls, rootCls, className, rootClassName, compactItemClassnames, contextClassName,
+    // Only for wrapper
+    resizeDirty && "".concat(prefixCls, "-textarea-affix-wrapper-resize-dirty")),
+    classNames: _objectSpread(_objectSpread(_objectSpread({}, classes), contextClassNames), {}, {
+      textarea: classNames(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-sm"), mergedSize === 'small'), "".concat(prefixCls, "-lg"), mergedSize === 'large'), hashId, classes === null || classes === void 0 ? void 0 : classes.textarea, contextClassNames.textarea, isMouseDown && "".concat(prefixCls, "-mouse-active")),
       variant: classNames(_defineProperty({}, "".concat(prefixCls, "-").concat(variant), enableVariantCls), getStatusClassNames(prefixCls, mergedStatus)),
-      affixWrapper: classNames("".concat(prefixCls, "-textarea-affix-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-affix-wrapper-rtl"), direction === 'rtl'), "".concat(prefixCls, "-affix-wrapper-sm"), mergedSize === 'small'), "".concat(prefixCls, "-affix-wrapper-lg"), mergedSize === 'large'), "".concat(prefixCls, "-textarea-show-count"), props.showCount || ((_props$count = props.count) === null || _props$count === void 0 ? void 0 : _props$count.show)), hashId)
+      affixWrapper: classNames("".concat(prefixCls, "-textarea-affix-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-affix-wrapper-rtl"), direction === 'rtl'), "".concat(prefixCls, "-affix-wrapper-sm"), mergedSize === 'small'), "".concat(prefixCls, "-affix-wrapper-lg"), mergedSize === 'large'), "".concat(prefixCls, "-textarea-show-count"), showCount || ((_props$count = props.count) === null || _props$count === void 0 ? void 0 : _props$count.show)), hashId)
     }),
     prefixCls: prefixCls,
     suffix: hasFeedback && _jsx("span", {
       className: "".concat(prefixCls, "-textarea-suffix"),
       children: feedbackIcon
     }),
-    ref: innerRef
-  })));
+    showCount: showCount,
+    ref: innerRef,
+    onResize: onInternalResize,
+    onMouseDown: onInternalMouseDown
+  }))));
 });
 export default TextArea;

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

@@ -9,7 +9,7 @@ import { clearFix, resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
 import { initComponentToken, initInputToken } from './token';
-import { genBorderlessStyle, genFilledGroupStyle, genFilledStyle, genOutlinedGroupStyle, genOutlinedStyle } from './variants';
+import { genBorderlessStyle, genFilledGroupStyle, genFilledStyle, genOutlinedGroupStyle, genOutlinedStyle, genUnderlinedStyle } from './variants';
 export { initComponentToken, initInputToken };
 export var genPlaceholderStyle = function genPlaceholderStyle(color) {
   return {
@@ -66,17 +66,6 @@ export var genBasicInputStyle = function genBasicInputStyle(token) {
     borderRadius: token.borderRadius,
     transition: "all ".concat(token.motionDurationMid)
   }, genPlaceholderStyle(token.colorTextPlaceholder)), {}, {
-    // Reset height for `textarea`s
-    'textarea&': {
-      maxWidth: '100%',
-      // prevent textarea resize from coming out of its container
-      height: 'auto',
-      minHeight: token.controlHeight,
-      lineHeight: token.lineHeight,
-      verticalAlign: 'bottom',
-      transition: "all ".concat(token.motionDurationSlow, ", height 0s"),
-      resize: 'vertical'
-    },
     // Size
     '&-lg': _objectSpread({}, genInputLargeStyle(token)),
     '&-sm': _objectSpread({}, genInputSmallStyle(token)),
@@ -247,14 +236,14 @@ export var genInputGroupStyle = function genInputGroupStyle(token) {
     borderEndStartRadius: token.borderRadius
   }))))));
 };
-var genInputStyle = function genInputStyle(token) {
+export var genInputStyle = function genInputStyle(token) {
   var componentCls = token.componentCls,
     controlHeightSM = token.controlHeightSM,
     lineWidth = token.lineWidth,
     calc = token.calc;
   var FIXED_CHROME_COLOR_HEIGHT = 16;
   var colorSmallPadding = calc(controlHeightSM).sub(calc(lineWidth).mul(2)).sub(FIXED_CHROME_COLOR_HEIGHT).div(2).equal();
-  return _defineProperty({}, componentCls, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, resetComponent(token)), genBasicInputStyle(token)), genOutlinedStyle(token)), genFilledStyle(token)), genBorderlessStyle(token)), {}, {
+  return _defineProperty({}, componentCls, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, resetComponent(token)), genBasicInputStyle(token)), genOutlinedStyle(token)), genFilledStyle(token)), genBorderlessStyle(token)), genUnderlinedStyle(token)), {}, {
     '&[type="color"]': _defineProperty(_defineProperty({
       height: token.controlHeight
     }, "&".concat(componentCls, "-lg"), {
@@ -265,7 +254,7 @@ var genInputStyle = function genInputStyle(token) {
       paddingBottom: colorSmallPadding
     }),
     '&[type="search"]::-webkit-search-cancel-button, &[type="search"]::-webkit-search-decoration': {
-      '-webkit-appearance': 'none'
+      appearance: 'none'
     }
   }));
 };
@@ -273,6 +262,7 @@ var genAllowClearStyle = function genAllowClearStyle(token) {
   var componentCls = token.componentCls;
   return _defineProperty({}, "".concat(componentCls, "-clear-icon"), {
     margin: 0,
+    padding: 0,
     lineHeight: 0,
     color: token.colorTextQuaternary,
     fontSize: token.fontSizeIcon,
@@ -281,8 +271,11 @@ var genAllowClearStyle = function genAllowClearStyle(token) {
     // https://codesandbox.io/s/wizardly-sun-u10br
     cursor: 'pointer',
     transition: "color ".concat(token.motionDurationSlow),
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
     '&:hover': {
-      color: token.colorTextTertiary
+      color: token.colorIcon
     },
     '&:active': {
       color: token.colorText
@@ -295,7 +288,7 @@ var genAllowClearStyle = function genAllowClearStyle(token) {
     }
   });
 };
-var genAffixStyle = function genAffixStyle(token) {
+export var genAffixStyle = function genAffixStyle(token) {
   var componentCls = token.componentCls,
     inputAffixPadding = token.inputAffixPadding,
     colorTextDescription = token.colorTextDescription,
@@ -305,7 +298,7 @@ var genAffixStyle = function genAffixStyle(token) {
     iconCls = token.iconCls;
   var affixCls = "".concat(componentCls, "-affix-wrapper");
   var affixClsDisabled = "".concat(componentCls, "-affix-wrapper-disabled");
-  return _defineProperty(_defineProperty({}, affixCls, _objectSpread(_objectSpread(_objectSpread({}, genBasicInputStyle(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty(_defineProperty({}, affixCls, _objectSpread(_objectSpread(_objectSpread({}, genBasicInputStyle(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'inline-flex'
   }, "&:not(".concat(componentCls, "-disabled):hover"), _defineProperty({
     zIndex: 1
@@ -343,7 +336,8 @@ var genAffixStyle = function genAffixStyle(token) {
       }
     },
     '&-show-count-suffix': {
-      color: colorTextDescription
+      color: colorTextDescription,
+      direction: 'ltr'
     },
     '&-show-count-has-suffix': {
       marginInlineEnd: token.paddingXXS
@@ -361,7 +355,9 @@ var genAffixStyle = function genAffixStyle(token) {
     '&:hover': {
       color: colorIconHover
     }
-  }))), affixClsDisabled, _defineProperty({}, "".concat(iconCls).concat(componentCls, "-password-icon"), {
+  }))), "".concat(componentCls, "-underlined"), {
+    borderRadius: 0
+  }), affixClsDisabled, _defineProperty({}, "".concat(iconCls).concat(componentCls, "-password-icon"), {
     color: colorIcon,
     cursor: 'not-allowed',
     '&:hover': {
@@ -394,7 +390,7 @@ var genGroupStyle = function genGroupStyle(token) {
       '&-sm': _defineProperty({}, "".concat(componentCls, "-group-addon"), {
         borderRadius: borderRadiusSM
       })
-    }, genOutlinedGroupStyle(token)), genFilledGroupStyle(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&:not(".concat(componentCls, "-compact-first-item):not(").concat(componentCls, "-compact-last-item)").concat(componentCls, "-compact-item"), _defineProperty({}, "".concat(componentCls, ", ").concat(componentCls, "-group-addon"), {
+    }, genOutlinedGroupStyle(token)), genFilledGroupStyle(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&:not(".concat(componentCls, "-compact-first-item):not(").concat(componentCls, "-compact-last-item)").concat(componentCls, "-compact-item"), _defineProperty({}, "".concat(componentCls, ", ").concat(componentCls, "-group-addon"), {
       borderRadius: 0
     })), "&:not(".concat(componentCls, "-compact-last-item)").concat(componentCls, "-compact-first-item"), _defineProperty({}, "".concat(componentCls, ", ").concat(componentCls, "-group-addon"), {
       borderStartEndRadius: 0,
@@ -405,6 +401,9 @@ var genGroupStyle = function genGroupStyle(token) {
     })), "&:not(".concat(componentCls, "-compact-last-item)").concat(componentCls, "-compact-item"), _defineProperty({}, "".concat(componentCls, "-affix-wrapper"), {
       borderStartEndRadius: 0,
       borderEndEndRadius: 0
+    })), "&:not(".concat(componentCls, "-compact-first-item)").concat(componentCls, "-compact-item"), _defineProperty({}, "".concat(componentCls, "-affix-wrapper"), {
+      borderStartStartRadius: 0,
+      borderEndStartRadius: 0
     })))
   }));
 };
@@ -413,7 +412,7 @@ var genSearchInputStyle = function genSearchInputStyle(token) {
     antCls = token.antCls;
   var searchPrefixCls = "".concat(componentCls, "-search");
   return _defineProperty({}, searchPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, {
-    '&:hover, &:focus': _defineProperty({}, "+ ".concat(componentCls, "-group-addon ").concat(searchPrefixCls, "-button:not(").concat(antCls, "-btn-primary)"), {
+    '&:hover, &:focus': _defineProperty({}, "+ ".concat(componentCls, "-group-addon ").concat(searchPrefixCls, "-button:not(").concat(antCls, "-btn-color-primary):not(").concat(antCls, "-btn-variant-text)"), {
       borderInlineStartColor: token.colorPrimaryHover
     })
   }), "".concat(componentCls, "-affix-wrapper"), {
@@ -428,12 +427,10 @@ var genSearchInputStyle = function genSearchInputStyle(token) {
   }, "".concat(searchPrefixCls, "-button"), {
     // Fix https://github.com/ant-design/ant-design/issues/47150
     marginInlineEnd: -1,
-    paddingTop: 0,
-    paddingBottom: 0,
     borderStartStartRadius: 0,
     borderEndStartRadius: 0,
     boxShadow: 'none'
-  }), "".concat(searchPrefixCls, "-button:not(").concat(antCls, "-btn-primary)"), _defineProperty({
+  }), "".concat(searchPrefixCls, "-button:not(").concat(antCls, "-btn-color-primary)"), _defineProperty({
     color: token.colorTextDescription,
     '&:hover': {
       color: token.colorPrimaryHover
@@ -442,10 +439,7 @@ var genSearchInputStyle = function genSearchInputStyle(token) {
       color: token.colorPrimaryActive
     }
   }, "&".concat(antCls, "-btn-loading::before"), {
-    insetInlineStart: 0,
-    insetInlineEnd: 0,
-    insetBlockStart: 0,
-    insetBlockEnd: 0
+    inset: 0
   })))), "".concat(searchPrefixCls, "-button"), {
     height: token.controlHeight,
     '&:hover, &:focus': {
@@ -470,57 +464,6 @@ var genSearchInputStyle = function genSearchInputStyle(token) {
     zIndex: 2
   })));
 };
-var genTextAreaStyle = function genTextAreaStyle(token) {
-  var componentCls = token.componentCls,
-    paddingLG = token.paddingLG;
-  var textareaPrefixCls = "".concat(componentCls, "-textarea");
-  return _defineProperty({}, textareaPrefixCls, _defineProperty(_defineProperty(_defineProperty({
-    position: 'relative',
-    '&-show-count': _defineProperty(_defineProperty({}, "> ".concat(componentCls), {
-      height: '100%'
-    }), "".concat(componentCls, "-data-count"), {
-      position: 'absolute',
-      bottom: token.calc(token.fontSize).mul(token.lineHeight).mul(-1).equal(),
-      insetInlineEnd: 0,
-      color: token.colorTextDescription,
-      whiteSpace: 'nowrap',
-      pointerEvents: 'none'
-    })
-  }, "\n        &-allow-clear > ".concat(componentCls, ",\n        &-affix-wrapper").concat(textareaPrefixCls, "-has-feedback ").concat(componentCls, "\n      "), {
-    paddingInlineEnd: paddingLG
-  }), "&-affix-wrapper".concat(componentCls, "-affix-wrapper"), _defineProperty(_defineProperty({
-    padding: 0
-  }, "> textarea".concat(componentCls), {
-    fontSize: 'inherit',
-    border: 'none',
-    outline: 'none',
-    background: 'transparent',
-    '&:focus': {
-      boxShadow: 'none !important'
-    }
-  }), "".concat(componentCls, "-suffix"), _defineProperty(_defineProperty({
-    margin: 0,
-    '> *:not(:last-child)': {
-      marginInline: 0
-    }
-  }, "".concat(componentCls, "-clear-icon"), {
-    position: 'absolute',
-    insetInlineEnd: token.paddingInline,
-    insetBlockStart: token.paddingXS
-  }), "".concat(textareaPrefixCls, "-suffix"), {
-    position: 'absolute',
-    top: 0,
-    insetInlineEnd: token.paddingInline,
-    bottom: 0,
-    zIndex: 1,
-    display: 'inline-flex',
-    alignItems: 'center',
-    margin: 'auto',
-    pointerEvents: 'none'
-  }))), "&-affix-wrapper".concat(componentCls, "-affix-wrapper-sm"), _defineProperty({}, "".concat(componentCls, "-suffix"), _defineProperty({}, "".concat(componentCls, "-clear-icon"), {
-    insetInlineEnd: token.paddingInlineSM
-  }))));
-};
 // ============================== Range ===============================
 var genRangeStyle = function genRangeStyle(token) {
   var componentCls = token.componentCls;
@@ -529,9 +472,15 @@ var genRangeStyle = function genRangeStyle(token) {
   }));
 };
 // ============================== Export ==============================
-export default genStyleHooks('Input', function (token) {
+export var useSharedStyle = genStyleHooks(['Input', 'Shared'], function (token) {
+  var inputToken = mergeToken(token, initInputToken(token));
+  return [genInputStyle(inputToken), genAffixStyle(inputToken)];
+}, initComponentToken, {
+  resetFont: false
+});
+export default genStyleHooks(['Input', 'Component'], function (token) {
   var inputToken = mergeToken(token, initInputToken(token));
-  return [genInputStyle(inputToken), genTextAreaStyle(inputToken), genAffixStyle(inputToken), genGroupStyle(inputToken), genSearchInputStyle(inputToken), genRangeStyle(inputToken),
+  return [genGroupStyle(inputToken), genSearchInputStyle(inputToken), genRangeStyle(inputToken),
   // =====================================================
   // ==             Space Compact                       ==
   // =====================================================

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

@@ -8,15 +8,31 @@ import { initComponentToken, initInputToken } from './token';
 var genOTPStyle = function genOTPStyle(token) {
   var componentCls = token.componentCls,
     paddingXS = token.paddingXS;
-  return _defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty({
+  return _defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'inline-flex',
     alignItems: 'center',
     flexWrap: 'nowrap',
-    columnGap: paddingXS,
-    '&-rtl': {
-      direction: 'rtl'
-    }
-  }, "".concat(componentCls, "-input"), {
+    columnGap: paddingXS
+  }, "".concat(componentCls, "-input-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'relative'
+  }, "".concat(componentCls, "-mask-icon"), {
+    position: 'absolute',
+    zIndex: '1',
+    top: '50%',
+    right: '50%',
+    transform: 'translate(50%, -50%)',
+    pointerEvents: 'none'
+  }), "".concat(componentCls, "-mask-input"), {
+    color: 'transparent',
+    caretColor: 'var(--ant-color-text)'
+  }), "".concat(componentCls, "-mask-input[type=number]::-webkit-inner-spin-button"), {
+    '-webkit-appearance': 'none',
+    margin: 0
+  }), "".concat(componentCls, "-mask-input[type=number]"), {
+    '-moz-appearance': 'textfield'
+  })), '&-rtl', {
+    direction: 'rtl'
+  }), "".concat(componentCls, "-input"), {
     textAlign: 'center',
     paddingInline: token.paddingXXS
   }), "&".concat(componentCls, "-sm ").concat(componentCls, "-input"), {

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

@@ -0,0 +1,80 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 { genStyleHooks, mergeToken } from '../../theme/internal';
+import { initComponentToken, initInputToken } from './token';
+export { initComponentToken, initInputToken };
+var genTextAreaStyle = function genTextAreaStyle(token) {
+  var componentCls = token.componentCls,
+    paddingLG = token.paddingLG;
+  var textareaPrefixCls = "".concat(componentCls, "-textarea");
+  return _defineProperty(_defineProperty(_defineProperty({}, "textarea".concat(componentCls), _defineProperty({
+    maxWidth: '100%',
+    // prevent textarea resize from coming out of its container
+    height: 'auto',
+    minHeight: token.controlHeight,
+    lineHeight: token.lineHeight,
+    verticalAlign: 'bottom',
+    transition: "all ".concat(token.motionDurationSlow),
+    resize: 'vertical'
+  }, "&".concat(componentCls, "-mouse-active"), {
+    transition: "all ".concat(token.motionDurationSlow, ", height 0s, width 0s")
+  })), "".concat(componentCls, "-textarea-affix-wrapper-resize-dirty"), {
+    width: 'auto'
+  }), textareaPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'relative',
+    '&-show-count': _defineProperty({}, "".concat(componentCls, "-data-count"), {
+      position: 'absolute',
+      bottom: token.calc(token.fontSize).mul(token.lineHeight).mul(-1).equal(),
+      insetInlineEnd: 0,
+      color: token.colorTextDescription,
+      whiteSpace: 'nowrap',
+      pointerEvents: 'none'
+    })
+  }, "\n        &-allow-clear > ".concat(componentCls, ",\n        &-affix-wrapper").concat(textareaPrefixCls, "-has-feedback ").concat(componentCls, "\n      "), {
+    paddingInlineEnd: paddingLG
+  }), "&-affix-wrapper".concat(componentCls, "-affix-wrapper"), _defineProperty(_defineProperty({
+    padding: 0
+  }, "> textarea".concat(componentCls), {
+    fontSize: 'inherit',
+    border: 'none',
+    outline: 'none',
+    background: 'transparent',
+    minHeight: token.calc(token.controlHeight).sub(token.calc(token.lineWidth).mul(2)).equal(),
+    '&:focus': {
+      boxShadow: 'none !important'
+    }
+  }), "".concat(componentCls, "-suffix"), _defineProperty(_defineProperty({
+    margin: 0,
+    '> *:not(:last-child)': {
+      marginInline: 0
+    }
+  }, "".concat(componentCls, "-clear-icon"), {
+    position: 'absolute',
+    insetInlineEnd: token.paddingInline,
+    insetBlockStart: token.paddingXS
+  }), "".concat(textareaPrefixCls, "-suffix"), {
+    position: 'absolute',
+    top: 0,
+    insetInlineEnd: token.paddingInline,
+    bottom: 0,
+    zIndex: 1,
+    display: 'inline-flex',
+    alignItems: 'center',
+    margin: 'auto',
+    pointerEvents: 'none'
+  }))), "&-affix-wrapper".concat(componentCls, "-affix-wrapper-rtl"), _defineProperty({}, "".concat(componentCls, "-suffix"), _defineProperty({}, "".concat(componentCls, "-data-count"), {
+    direction: 'ltr',
+    insetInlineStart: 0
+  }))), "&-affix-wrapper".concat(componentCls, "-affix-wrapper-sm"), _defineProperty({}, "".concat(componentCls, "-suffix"), _defineProperty({}, "".concat(componentCls, "-clear-icon"), {
+    insetInlineEnd: token.paddingInlineSM
+  }))));
+};
+// ============================== Export ==============================
+export default genStyleHooks(['Input', 'TextArea'], function (token) {
+  var inputToken = mergeToken(token, initInputToken(token));
+  return [genTextAreaStyle(inputToken)];
+}, initComponentToken, {
+  resetFont: false
+});

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

@@ -23,11 +23,20 @@ export var initComponentToken = function initComponentToken(token) {
     controlOutline = token.controlOutline,
     colorErrorOutline = token.colorErrorOutline,
     colorWarningOutline = token.colorWarningOutline,
-    colorBgContainer = token.colorBgContainer;
+    colorBgContainer = token.colorBgContainer,
+    inputFontSize = token.inputFontSize,
+    inputFontSizeLG = token.inputFontSizeLG,
+    inputFontSizeSM = token.inputFontSizeSM;
+  var mergedFontSize = inputFontSize || fontSize;
+  var mergedFontSizeSM = inputFontSizeSM || mergedFontSize;
+  var mergedFontSizeLG = inputFontSizeLG || fontSizeLG;
+  var paddingBlock = Math.round((controlHeight - mergedFontSize * lineHeight) / 2 * 10) / 10 - lineWidth;
+  var paddingBlockSM = Math.round((controlHeightSM - mergedFontSizeSM * lineHeight) / 2 * 10) / 10 - lineWidth;
+  var paddingBlockLG = Math.ceil((controlHeightLG - mergedFontSizeLG * lineHeightLG) / 2 * 10) / 10 - lineWidth;
   return {
-    paddingBlock: Math.max(Math.round((controlHeight - fontSize * lineHeight) / 2 * 10) / 10 - lineWidth, 0),
-    paddingBlockSM: Math.max(Math.round((controlHeightSM - fontSize * lineHeight) / 2 * 10) / 10 - lineWidth, 0),
-    paddingBlockLG: Math.ceil((controlHeightLG - fontSizeLG * lineHeightLG) / 2 * 10) / 10 - lineWidth,
+    paddingBlock: Math.max(paddingBlock, 0),
+    paddingBlockSM: Math.max(paddingBlockSM, 0),
+    paddingBlockLG: Math.max(paddingBlockLG, 0),
     paddingInline: paddingSM - lineWidth,
     paddingInlineSM: controlPaddingHorizontalSM - lineWidth,
     paddingInlineLG: controlPaddingHorizontal - lineWidth,
@@ -39,8 +48,8 @@ export var initComponentToken = function initComponentToken(token) {
     warningActiveShadow: "0 0 0 ".concat(controlOutlineWidth, "px ").concat(colorWarningOutline),
     hoverBg: colorBgContainer,
     activeBg: colorBgContainer,
-    inputFontSize: fontSize,
-    inputFontSizeLG: fontSizeLG,
-    inputFontSizeSM: fontSize
+    inputFontSize: mergedFontSize,
+    inputFontSizeLG: mergedFontSizeLG,
+    inputFontSizeSM: mergedFontSizeSM
   };
 };