@aloudata/aloudata-design 0.3.3 → 0.3.4

package/es/Table/style/index.less

@@ -1,14 +1,17 @@
 @import '../../style/index.less';
 @import '../../Empty/style/index.less';
+@import '../../message/style/index.less';
+
 @ald-iconfont-css-prefix: anticon;
-@table-row-height: 48px;
+@table-head-row-height: 48px;
+@table-body-row-height: 68px;
 
 .ald-table {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
   overflow: hidden;
+  user-select: none;
 
   &-page-loading {
     opacity: 0;
@@ -21,6 +24,16 @@
     overflow: hidden;
   }
 
+  &-inner-wrap {
+    width: 100%;
+    overflow-x: overlay;
+  }
+
+  &-tableHeadScrollWrap {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
   &-cell {
     flex-grow: 1;
     height: unset;
@@ -35,8 +48,7 @@
   }
 
   &-row {
-    max-width: 100%;
-    height: 48px;
+    height: @table-head-row-height;
 
     &-ellipsis {
       .ald-table-cell {
@@ -48,8 +60,12 @@
   }
 
   &-thead {
+    flex: 1;
+    overflow: hidden;
+
     .ald-table-row {
-      height: 48px;
+      min-width: 9999px; // 防止拖动时的闪动
+      height: @table-head-row-height;
     }
 
     .ald-table-cell {
@@ -103,7 +119,7 @@
     }
 
     .ald-table-row {
-      height: 68px;
+      height: @table-body-row-height;
 
       .ald-table-cell {
         padding: 24px;
@@ -124,10 +140,18 @@
     }
   }
 
+  &-tbody&-tbody-innerScroll {
+    overflow: hidden;
+  }
+
+  &-row-list-wrap {
+    overflow: unset;
+  }
+
   &-loading {
-    height: 48px;
+    height: @table-body-row-height;
     color: @NL80;
-    line-height: @table-row-height;
+    line-height: @table-body-row-height;
     text-align: center;
 
     &-icon {
@@ -145,6 +169,7 @@
       align-items: center;
       justify-content: center;
       padding-top: 84px;
+      padding-bottom: 84px;
     }
   }
 
@@ -170,33 +195,11 @@
     }
   }
 
-  /* stylelint-disable-next-line selector-class-pattern */
-  &-list&-innerScroll {
-    height: 100%;
-    overflow: overlay !important;
-  }
-
   // 当出现多行的时候 会顶出一个滚动条 通过复写三方库的样式覆盖
   &-list&-canNotInnerScroll {
     overflow: hidden !important;
   }
 
-  &-list {
-    &::-webkit-scrollbar-thumb {
-      background: @NL90;
-      background-clip: padding-box;
-      border: 3px solid transparent;
-      border-radius: 6px;
-    }
-
-    &::-webkit-scrollbar {
-      width: 12px;
-      height: 12px;
-      min-height: 12px;
-      background-color: transparent;
-    }
-  }
-
   &-sortIcon {
     margin-top: -2px;
     margin-left: 4px;

package/es/Table/utils.d.ts

@@ -0,0 +1,15 @@
+import { IColumn } from './interface';
+export interface IWidthDetail {
+    width: number;
+    isSpecific: boolean;
+}
+export declare function getColumnsWidthMap<T>(columns: IColumn<T>[], clientWidth: number, lastWidthMap?: Map<string, IWidthDetail>): {
+    columnsWidthMap: Map<string, IWidthDetail>;
+    totalColumnWidth: number;
+};
+export declare function isPercentageWidth(width: string): boolean;
+export declare function isSpecificPxWidth(width: string): boolean;
+export declare function getValidWidthByNumber(width: number): number;
+export declare function getValidScrollThreshold(height: string | number, clientHeight: number): number;
+export declare function getPercentageValue(percentage: string, containerNum: number): number;
+export declare function getPxValue(px: string): number;

package/es/Table/utils.js

@@ -0,0 +1,131 @@
+var ZERO = 0;
+var NOT_SET = -1;
+var COLUMN_MIN_WIDTH = 72;
+var HUNDRED = 100; // TODO: 添加单侧
+
+export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
+  var settedTotalWidth = ZERO;
+  var unsetWidthIndex = [];
+  var widthMap = new Map();
+  var totalColumnWidth = ZERO;
+  columns.forEach(function (item, index) {
+    var _lastWidthMap$get;
+
+    var key = index.toString();
+    var width = getWidthByColumnsWidth(clientWidth, item.width); // 首先判断是否是否是容器宽度的变化
+
+    var isSpecific = lastWidthMap ? (_lastWidthMap$get = lastWidthMap.get(key)) === null || _lastWidthMap$get === void 0 ? void 0 : _lastWidthMap$get.isSpecific : isSpecificWidth(item.width);
+
+    if (lastWidthMap && isSpecific) {
+      var _lastWidthMap$get2;
+
+      width = (_lastWidthMap$get2 = lastWidthMap.get(key)) === null || _lastWidthMap$get2 === void 0 ? void 0 : _lastWidthMap$get2.width;
+    }
+
+    if (width === NOT_SET) {
+      unsetWidthIndex.push(key);
+    } else {
+      settedTotalWidth += width;
+    }
+
+    widthMap.set(key, {
+      width: width,
+      isSpecific: isSpecific
+    });
+  }); // 设定宽度大于容器宽度时
+
+  if (settedTotalWidth < clientWidth) {
+    unsetWidthIndex.map(function (item) {
+      var _widthMap$get;
+
+      return widthMap.set(item, {
+        isSpecific: (_widthMap$get = widthMap.get(item)) === null || _widthMap$get === void 0 ? void 0 : _widthMap$get.isSpecific,
+        width: 72
+      });
+    });
+  } // 设定宽度小于容器宽度时
+
+
+  if (unsetWidthIndex.length > ZERO) {
+    var leftWidth = clientWidth - settedTotalWidth;
+    var average = getValidWidthByNumber(leftWidth / unsetWidthIndex.length);
+    unsetWidthIndex.map(function (item) {
+      var _widthMap$get2;
+
+      return widthMap.set(item, {
+        isSpecific: (_widthMap$get2 = widthMap.get(item)) === null || _widthMap$get2 === void 0 ? void 0 : _widthMap$get2.isSpecific,
+        width: average
+      });
+    });
+  }
+
+  columns.forEach(function (item, index) {
+    var _widthMap$get3;
+
+    var key = index.toString();
+    var width = (_widthMap$get3 = widthMap.get(key)) === null || _widthMap$get3 === void 0 ? void 0 : _widthMap$get3.width;
+    totalColumnWidth += width;
+  });
+  return {
+    columnsWidthMap: widthMap,
+    totalColumnWidth: totalColumnWidth
+  };
+}
+
+function getWidthByColumnsWidth(clientWidth, width) {
+  if (width === undefined) {
+    return NOT_SET;
+  }
+
+  if (typeof width === 'number') {
+    return getValidWidthByNumber(width);
+  }
+
+  if (isPercentageWidth(width)) {
+    return getPercentageValue(width, clientWidth);
+  }
+
+  if (isSpecificPxWidth(width)) {
+    var specificNum = getPxValue(width);
+    return getValidWidthByNumber(specificNum);
+  }
+
+  return NOT_SET;
+}
+
+export function isPercentageWidth(width) {
+  return /[0-9]{1,}%$/.test(width);
+}
+export function isSpecificPxWidth(width) {
+  return /[0-9]{1,}(px)$/.test(width);
+}
+
+function isSpecificWidth(width) {
+  return typeof width === 'number' || !!(width && isSpecificPxWidth(width));
+}
+
+export function getValidWidthByNumber(width) {
+  return width < COLUMN_MIN_WIDTH ? COLUMN_MIN_WIDTH : width;
+}
+export function getValidScrollThreshold(height, clientHeight) {
+  var scrollThreshold = ZERO;
+
+  if (typeof height === 'string') {
+    if (isPercentageWidth(height)) {
+      scrollThreshold = getPercentageValue(height, clientHeight);
+    } else {
+      scrollThreshold = getPxValue(height);
+    }
+  } else {
+    scrollThreshold = height;
+  }
+
+  return scrollThreshold;
+}
+export function getPercentageValue(percentage, containerNum) {
+  var percent = Math.floor(Number(percentage.replace('%', '')) / HUNDRED);
+  return getValidWidthByNumber(containerNum * percent);
+}
+export function getPxValue(px) {
+  return Number(px.replace('px', ''));
+}

package/es/_utils/hooks/useId.d.ts

@@ -0,0 +1,4 @@
+/** Is client side and not jsdom */
+export declare const isBrowserClient: boolean;
+/** Get unique id for accessibility usage */
+export declare function getUUID(): number | string;

package/es/_utils/hooks/useId.js

@@ -0,0 +1,23 @@
+// @ts-nocheck
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
+var uuid = 0;
+/** Is client side and not jsdom */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+
+export var isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom();
+/** Get unique id for accessibility usage */
+
+export function getUUID() {
+  var retId; // Test never reach
+
+  /* istanbul ignore if */
+
+  if (isBrowserClient) {
+    retId = uuid;
+    uuid += 1;
+  } else {
+    retId = 'TEST_OR_SSR';
+  }
+
+  return retId;
+}

package/es/index.d.ts

@@ -57,7 +57,7 @@ export type { DividerProps } from './Divider';
 export { default as Drawer } from './Drawer';
 export type { DrawerProps } from './Drawer';
 export { default as Radio } from './Radio';
-export type { RadioProps, RadioChangeEvent, RadioGroupProps } from './Radio';
+export type { RadioProps, RadioGroupProps } from './Radio';
 export { default as Checkbox } from './Checkbox';
 export type { CheckboxProps, CheckboxOptionType } from './Checkbox';
 export { default as Modal } from './Modal';

package/es/locale-provider/index.d.ts

@@ -4,10 +4,13 @@ import type { PickerLocale as DatePickerLocale } from 'antd/es/date-picker/gener
 import type { TransferLocale as TransferLocaleForEmpty } from 'antd/es/empty';
 import type { ModalLocale } from 'antd/es/modal/locale';
 import type { PaginationLocale } from 'antd/es/pagination/Pagination';
-import type { PopconfirmLocale } from 'antd/es/popconfirm';
 import type { TableLocale } from 'antd/es/table/interface';
 import type { TransferLocale } from 'antd/es/transfer';
 import type { UploadLocale } from 'antd/es/upload/interface';
+interface PopconfirmLocale {
+    okText: string;
+    cancelText: string;
+}
 export declare const ANT_MARK = "internalMark";
 export interface Locale {
     locale: string;
@@ -59,3 +62,4 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
     };
     render(): JSX.Element;
 }
+export {};

package/es/style/index.d.ts

@@ -1,2 +1 @@
-import 'antd/dist/antd.compact.css';
 import './index.less';

package/es/style/index.js

@@ -1,2 +1 @@
-import 'antd/dist/antd.compact.css';
 import './index.less';

package/es/style/index.less

@@ -1,5 +1,5 @@
 @root-entry-name: default;
+@import '~antd/dist/antd.compact.css';
 @import './mixins/index.less';
 @import './themes/default/scrollBar.less';
-@import './themes/default/index.less';
-@import './mixins/index.less';
+@import './themes/default/index.less';

package/lib/Breadcrumb/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BreadcrumbItemProps, BreadcrumbProps } from 'antd';
 export type { BreadcrumbItemProps, BreadcrumbProps };
 declare const Breadcrumb: {

package/lib/Checkbox/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CheckboxProps } from 'antd';
 import { CheckboxGroupProps } from 'antd/lib/checkbox';
 export type { CheckboxValueType, CheckboxOptionType } from 'antd/es/checkbox/Group';

package/lib/ConfigProvider/defaultRenderEmpty.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare const defaultRenderEmpty: (componentName?: string | undefined) => React.ReactNode;
+export declare type RenderEmptyHandler = typeof defaultRenderEmpty;
+export default defaultRenderEmpty;

package/lib/ConfigProvider/defaultRenderEmpty.js

@@ -0,0 +1,55 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _ = require(".");
+
+var _Empty = _interopRequireDefault(require("../Empty"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var defaultRenderEmpty = function defaultRenderEmpty(componentName) {
+  return /*#__PURE__*/React.createElement(_.ConfigConsumer, null, function (_ref) {
+    var getPrefixCls = _ref.getPrefixCls;
+    var prefix = getPrefixCls('empty');
+
+    switch (componentName) {
+      case 'Table':
+      case 'List':
+        return /*#__PURE__*/React.createElement(_Empty.default, {
+          image: _Empty.default.PRESENTED_IMAGE_SIMPLE
+        });
+
+      case 'Select':
+      case 'TreeSelect':
+      case 'Cascader':
+      case 'Transfer':
+      case 'Mentions':
+        return /*#__PURE__*/React.createElement(_Empty.default, {
+          image: _Empty.default.PRESENTED_IMAGE_SIMPLE,
+          title: "\u65E0\u6570\u636E",
+          className: "".concat(prefix, "-small")
+        });
+
+      /* istanbul ignore next */
+
+      default:
+        // Should never hit if we take all the component into consider.
+        return /*#__PURE__*/React.createElement(_Empty.default, null);
+    }
+  });
+};
+
+var _default = defaultRenderEmpty;
+exports.default = _default;

package/lib/ConfigProvider/sizeContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare type SizeType = 'small' | 'middle' | 'large' | undefined;
+declare const SizeContext: React.Context<"small" | "large" | "middle" | undefined>;
+export interface ISizeContextProps {
+    size?: SizeType;
+    children?: React.ReactNode;
+}
+export declare const SizeContextProvider: React.FC<ISizeContextProps>;
+export default SizeContext;

package/lib/ConfigProvider/sizeContext.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SizeContextProvider = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var SizeContext = /*#__PURE__*/React.createContext(undefined);
+
+var SizeContextProvider = function SizeContextProvider(_ref) {
+  var children = _ref.children,
+      size = _ref.size;
+  return /*#__PURE__*/React.createElement(SizeContext.Consumer, null, function (originSize) {
+    return /*#__PURE__*/React.createElement(SizeContext.Provider, {
+      value: size || originSize
+    }, children);
+  });
+};
+
+exports.SizeContextProvider = SizeContextProvider;
+var _default = SizeContext;
+exports.default = _default;

package/lib/Empty/image/Authority.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/lib/Empty/image/Dataspace.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/lib/Empty/image/Search.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/lib/Empty/image/Simple.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/lib/Empty/image/Worksheet.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/lib/Empty/image/empty.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Empty: () => JSX.Element;
 export default Empty;

package/lib/Input/components/Group/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GroupProps } from 'antd/lib/input';
 import { TSize } from '../Input';
 export interface IGroupProps extends Omit<GroupProps, 'size'> {

package/lib/Input/components/Input/index.d.ts

@@ -7,7 +7,7 @@ interface IShowCountProps {
         maxLength?: number;
     }) => string;
 }
-export declare type TSize = 'mini' | 'small' | 'middle' | 'large';
+export declare type TSize = 'small' | 'middle' | 'large';
 export type { InputRef };
 declare type ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;
 export interface IInputProps extends Omit<InputProps, 'size' | 'id' | 'prefix' | 'allowClear' | 'disabled' | 'showCount' | 'maxLength' | 'value' | 'defaultValue' | 'onPressEnter' | 'onChange'> {

package/lib/Input/components/Input/index.js

@@ -35,7 +35,6 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, rest, {
-    // @ts-ignore
     ref: ref,
     bordered: true,
     className: (0, _classnames.default)('ald-input', "ald-input-".concat(getSizeType(size)), className),

package/lib/Input/components/TextArea/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { TextAreaProps, TextAreaRef } from 'antd/lib/input/TextArea';
+import { TSize } from '../Input';
 export type { TextAreaRef };
-export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter'> {
+export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter' | 'size'> {
     /**
      * @description 可以点击清除图标删除内容
      * @default false
@@ -53,6 +54,12 @@ export interface ITextAreaProps extends Omit<TextAreaProps, 'onPressEnter'> {
      * @type boolean
      */
     border?: boolean;
+    className?: string;
+    /**
+     * @description 尺寸大学
+     * @default middle
+     */
+    size?: TSize;
 }
 declare const _default: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<TextAreaRef>>;
 export default _default;

package/lib/Input/components/TextArea/index.js

@@ -9,7 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _TextArea = _interopRequireDefault(require("antd/lib/input/TextArea"));
 
-var _excluded = ["bordered"];
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Input = require("../Input");
+
+var _excluded = ["bordered", "size", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -20,9 +24,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$bordered = props.bordered,
       bordered = _props$bordered === void 0 ? true : _props$bordered,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'middle' : _props$size,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
       rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_TextArea.default, Object.assign({}, rest, {
+    className: (0, _classnames.default)('ald-input-textarea', "ald-input-textarea-".concat((0, _Input.getSizeType)(size)), className),
     ref: ref,
     bordered: bordered
   }));

package/lib/Input/style/index.less

@@ -120,6 +120,7 @@
     color: @NL0;
     background-color: @input-bg-color;
     border-radius: 0;
+    box-shadow: none;
     caret-color: @B60;
 
     &::placeholder {
@@ -162,6 +163,10 @@
     border-color: @input-active-border-color;
     box-shadow: @input-box-shadow-active;
   }
+
+  .ant-input:hover {
+    box-shadow: none;
+  }
 }
 
 .ald-input {
@@ -330,3 +335,76 @@
     }
   }
 }
+
+.ald-textarea-large {
+  padding: 5px 11px;
+  font-size: @font-size-large;
+  line-height: @line-height-large;
+  border-radius: @border-radius-large;
+}
+
+.ald-textarea-middle {
+  padding: 5px 11px;
+  font-size: @font-size-middle;
+  line-height: @line-height-middle;
+  border-radius: @border-radius-middle;
+}
+
+.ald-textarea-small {
+  padding: 5px 7px;
+  font-size: @font-size-small;
+  line-height: @line-height-small;
+  border-radius: @border-radius-small;
+}
+
+textarea.ald-input-textarea-large,
+.ald-input-textarea-large .ant-input {
+  .ald-textarea-large();
+}
+
+textarea.ald-input-textarea-middle,
+.ald-input-textarea-middle .ant-input {
+  .ald-textarea-middle();
+}
+
+textarea.ald-input-textarea-small,
+.ald-input-textarea-small .ant-input {
+  .ald-textarea-small();
+}
+
+textarea.ald-input-textarea,
+.ald-input-textarea .ant-input {
+  color: @NL0;
+  background: @BG97;
+  caret-color: @B60;
+
+  &:hover,
+  &:active,
+  &:focus {
+    border-color: @B60;
+    box-shadow: none;
+  }
+
+  ::placeholder {
+    color: @NL80;
+  }
+
+  &.ant-input-disabled {
+    color: @NL60;
+    background: @BG95;
+    cursor: initial;
+
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: @NL90;
+      box-shadow: none;
+    }
+  }
+}
+
+.ant-input-textarea-show-count::after {
+  color: @NL50;
+  font-size: 11px;
+  line-height: 16px;
+}