├── .dumirc.ts
├── .editorconfig
├── .eslintrc.js
├── .fatherrc.js
├── .github
    └── workflows
    │   ├── codeql.yml
    │   └── react-component-ci.yml
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── assets
    └── index.less
├── docs
    ├── demo
    │   ├── allowClear.tsx
    │   ├── autoSize.tsx
    │   ├── showCount.tsx
    │   ├── simple.md
    │   └── simple.tsx
    └── index.md
├── jest.config.js
├── package.json
├── src
    ├── ResizableTextArea.tsx
    ├── TextArea.tsx
    ├── calculateNodeHeight.tsx
    ├── index.tsx
    └── interface.ts
├── tests
    ├── ResizableTextArea.test.tsx
    ├── __snapshots__
    │   ├── allowClear.test.tsx.snap
    │   └── index.spec.tsx.snap
    ├── allowClear.test.tsx
    ├── count.test.tsx
    ├── focus.test.tsx
    ├── index.spec.tsx
    ├── setup.ts
    ├── setupFilesAfterEnv.ts
    ├── showCount.test.tsx
    └── utils.ts
└── tsconfig.json


/.dumirc.ts:
--------------------------------------------------------------------------------
 1 | // more config: https://d.umijs.org/config
 2 | import { defineConfig } from 'dumi';
 3 | 
 4 | const name = 'textarea';
 5 | 
 6 | export default defineConfig({
 7 |   favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
 8 |   themeConfig: {
 9 |     name: 'rc-textarea',
10 |     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
11 |   },
12 |   outputPath: '.doc',
13 |   exportStatic: {},
14 |   base: `/${name}/`,
15 |   publicPath: `/${name}/`,
16 |   styles: [
17 |     `
18 |       .markdown table {
19 |         width: auto !important;
20 |       }
21 |     `,
22 |   ],
23 |   mfsu: {},
24 | });
25 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # top-most EditorConfig file
 2 | root = true
 3 | 
 4 | # Unix-style newlines with a newline ending every file
 5 | [*.{js,css,md}]
 6 | end_of_line = lf
 7 | insert_final_newline = true
 8 | indent_style = space
 9 | indent_size = 2
10 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | const base = require('@umijs/fabric/dist/eslint');
 2 | 
 3 | module.exports = {
 4 |   ...base,
 5 |   rules: {
 6 |     ...base.rules,
 7 |     'no-template-curly-in-string': 0,
 8 |     'prefer-promise-reject-errors': 0,
 9 |     'react/no-array-index-key': 0,
10 |     'react/sort-comp': 0,
11 |     '@typescript-eslint/no-explicit-any': 0,
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------
/.fatherrc.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'father';
2 | 
3 | export default defineConfig({
4 |   plugins: ['@rc-component/father-plugin'],
5 | });
6 | 


--------------------------------------------------------------------------------
/.github/workflows/codeql.yml:
--------------------------------------------------------------------------------
 1 | name: "CodeQL"
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ "master" ]
 6 |   pull_request:
 7 |     branches: [ "master" ]
 8 |   schedule:
 9 |     - cron: "36 10 * * 5"
10 | 
11 | jobs:
12 |   analyze:
13 |     name: Analyze
14 |     runs-on: ubuntu-latest
15 |     permissions:
16 |       actions: read
17 |       contents: read
18 |       security-events: write
19 | 
20 |     strategy:
21 |       fail-fast: false
22 |       matrix:
23 |         language: [ javascript ]
24 | 
25 |     steps:
26 |       - name: Checkout
27 |         uses: actions/checkout@v3
28 | 
29 |       - name: Initialize CodeQL
30 |         uses: github/codeql-action/init@v2
31 |         with:
32 |           languages: ${{ matrix.language }}
33 |           queries: +security-and-quality
34 | 
35 |       - name: Autobuild
36 |         uses: github/codeql-action/autobuild@v2
37 | 
38 |       - name: Perform CodeQL Analysis
39 |         uses: github/codeql-action/analyze@v2
40 |         with:
41 |           category: "/language:${{ matrix.language }}"
42 | 


--------------------------------------------------------------------------------
/.github/workflows/react-component-ci.yml:
--------------------------------------------------------------------------------
1 | name: ✅ test
2 | on: [push, pull_request]
3 | jobs:
4 |   test:
5 |     uses: react-component/rc-test/.github/workflows/test.yml@main
6 |     secrets: inherit
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .storybook
 2 | *.iml
 3 | *.log
 4 | .idea/
 5 | .ipr
 6 | .iws
 7 | *~
 8 | ~*
 9 | *.diff
10 | *.patch
11 | *.bak
12 | .DS_Store
13 | Thumbs.db
14 | .project
15 | .*proj
16 | .svn/
17 | *.swp
18 | *.swo
19 | *.pyc
20 | *.pyo
21 | .build
22 | node_modules
23 | .cache
24 | assets/**/*.css
25 | build
26 | lib
27 | es
28 | yarn.lock
29 | package-lock.json
30 | coverage/
31 | .doc
32 | # umi
33 | .dumi/tmp
34 | .dumi/tmp-test
35 | .dumi/tmp-production
36 | .env.local
37 | 
38 | bun.lockb


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | build/
 2 | *.cfg
 3 | nohup.out
 4 | *.iml
 5 | .idea/
 6 | .ipr
 7 | .iws
 8 | *~
 9 | ~*
10 | *.diff
11 | *.log
12 | *.patch
13 | *.bak
14 | .DS_Store
15 | Thumbs.db
16 | .project
17 | .*proj
18 | .svn/
19 | *.swp
20 | out/
21 | .build
22 | node_modules
23 | .cache
24 | examples
25 | tests
26 | src
27 | /index.js
28 | .*
29 | assets/**/*.less


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .storybook
 2 | node_modules
 3 | lib
 4 | es
 5 | .cache
 6 | package.json
 7 | package-lock.json
 8 | public
 9 | .site
10 | _site
11 | .umi
12 | .doc
13 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": true,
4 |   "singleQuote": true,
5 |   "tabWidth": 2,
6 |   "trailingComma": "all"
7 | }
8 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## 0.1.0
2 | 
3 | - First release.
4 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019-present afc163
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # rc-textarea
 2 | 
 3 | [![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 4 | 
 5 | [npm-image]: http://img.shields.io/npm/v/rc-textarea.svg?style=flat-square
 6 | [npm-url]: http://npmjs.org/package/rc-textarea
 7 | [github-actions-image]: https://github.com/react-component/textarea/workflows/CI/badge.svg
 8 | [github-actions-url]: https://github.com/react-component/textarea/actions
 9 | [codecov-image]: https://img.shields.io/codecov/c/github/react-component/textarea/master.svg?style=flat-square
10 | [codecov-url]: https://codecov.io/gh/react-component/textarea/branch/master
11 | [download-image]: https://img.shields.io/npm/dm/rc-textarea.svg?style=flat-square
12 | [download-url]: https://npmjs.org/package/rc-textarea
13 | [bundlephobia-url]: https://bundlephobia.com/result?p=rc-textarea
14 | [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-textarea
15 | 
16 | Pretty Textarea react component used in [ant.design](https://ant.design).
17 | 
18 | ## Live Demo
19 | 
20 | https://react-component.github.io/textarea/
21 | 
22 | ## Install
23 | 
24 | [![rc-textarea](https://nodei.co/npm/rc-textarea.png)](https://npmjs.org/package/rc-textarea)
25 | 
26 | ## Usage
27 | 
28 | ```js
29 | import Textarea from 'rc-textarea';
30 | import { render } from 'react-dom';
31 | 
32 | render(<Textarea />, mountNode);
33 | ```
34 | 
35 | ## API
36 | 
37 | | Property     | Type                        | Default     | Description                                                                                    |
38 | | ------------ | --------------------------- | ----------- | ---------------------------------------------------------------------------------------------- |
39 | | prefixCls    | string                      | rc-textarea |                                                                                                |
40 | | className    | string                      | ''          | additional class name of textarea                                                              |
41 | | style        | React.CSSProperties         | -           | style properties of textarea                                                                   |
42 | | autoSize     | boolean \| object           | -           | Height autosize feature, can be set to `true\|false` or an object `{ minRows: 2, maxRows: 6 }` |
43 | | onPressEnter | function(e)                 | -           | The callback function that is triggered when Enter key is pressed                              |
44 | | onResize     | function({ width, height }) | -           | The callback function that is triggered when resize                                            |
45 | 
46 | ## Development
47 | 
48 | ```
49 | npm install
50 | npm start
51 | ```
52 | 
53 | ## License
54 | 
55 | rc-textarea is released under the MIT license.
56 | 


--------------------------------------------------------------------------------
/assets/index.less:
--------------------------------------------------------------------------------
 1 | @textarea-prefix-cls: rc-textarea;
 2 | 
 3 | .rc-textarea-affix-wrapper {
 4 |   display: inline-block;
 5 |   box-sizing: border-box;
 6 | 
 7 |   textarea {
 8 |     box-sizing: border-box;
 9 |     width: 100%;
10 |     height: 100%;
11 |     padding: 0;
12 |     border: 1px solid #1677ff;
13 |   }
14 | }
15 | 
16 | .@{textarea-prefix-cls}-out-of-range {
17 |   &,
18 |   & textarea {
19 |     color: red;
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/docs/demo/allowClear.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | import Textarea from '@rc-component/textarea';
 3 | import React, { useState } from 'react';
 4 | 
 5 | export default function App() {
 6 |   const [value, setValue] = useState('hello\nworld');
 7 | 
 8 |   const onChange = (e) => {
 9 |     const {
10 |       target: { value: currentValue },
11 |     } = e;
12 |     setValue(currentValue);
13 |   };
14 | 
15 |   return (
16 |     <div>
17 |       <p>Uncontrolled</p>
18 |       <Textarea autoSize allowClear />
19 |       <p>controlled</p>
20 |       <Textarea value={value} onChange={onChange} allowClear />
21 |     </div>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/docs/demo/autoSize.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | import React, { useState } from 'react';
 3 | import Textarea from '@rc-component/textarea';
 4 | 
 5 | export default function App() {
 6 |   const [value, setValue] = useState('hello\nworld');
 7 | 
 8 |   const onChange = (e) => {
 9 |     const {
10 |       target: { value: currentValue },
11 |     } = e;
12 |     setValue(currentValue);
13 |   };
14 | 
15 |   const onResize = ({ width, height }) => {
16 |     console.log(`size is changed, width:${width} height:${height}`);
17 |   };
18 | 
19 |   return (
20 |     <div>
21 |       <p>when set to true</p>
22 |       <Textarea
23 |         autoSize
24 |         onResize={onResize}
25 |         value={value}
26 |         onChange={onChange}
27 |       />
28 |       <p>when set to object of minRows and maxRows</p>
29 |       <Textarea
30 |         autoSize={{ minRows: 5, maxRows: 15 }}
31 |         onResize={onResize}
32 |         value={value}
33 |         onChange={onChange}
34 |       />
35 |     </div>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/docs/demo/showCount.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | import Textarea from '@rc-component/textarea';
 3 | import React, { useState } from 'react';
 4 | import '../../assets/index.less';
 5 | 
 6 | export default function App() {
 7 |   const [value, setValue] = useState('hello\nworld');
 8 | 
 9 |   const onChange = (e) => {
10 |     const {
11 |       target: { value: currentValue },
12 |     } = e;
13 |     setValue(currentValue);
14 |   };
15 | 
16 |   return (
17 |     <div>
18 |       <p>Uncontrolled</p>
19 |       <Textarea autoSize showCount />
20 |       <p>controlled</p>
21 |       <Textarea value={value} onChange={onChange} showCount maxLength={100} />
22 |       <p>with height</p>
23 |       <Textarea
24 |         value={value}
25 |         onChange={onChange}
26 |         showCount
27 |         style={{ height: 200, width: '100%', resize: 'vertical' }}
28 |       />
29 |       <hr />
30 |       <p>Count.exceedFormatter</p>
31 |       <Textarea
32 |         defaultValue="👨‍👨‍👧‍👦"
33 |         count={{
34 |           show: true,
35 |           max: 5,
36 |         }}
37 |       />
38 |       <Textarea
39 |         defaultValue="🔥"
40 |         count={{
41 |           show: true,
42 |           max: 5,
43 |           exceedFormatter: (val, { max }) => {
44 |             const segments = [...new Intl.Segmenter().segment(val)];
45 | 
46 |             return segments
47 |               .filter((seg) => seg.index + seg.segment.length <= max)
48 |               .map((seg) => seg.segment)
49 |               .join('');
50 |           },
51 |         }}
52 |       />
53 |     </div>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/docs/demo/simple.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Usage
 3 | order: 0
 4 | nav:
 5 |   title: Demo
 6 | ---
 7 | 
 8 | ## Simple
 9 | 
10 | <code src="./simple.tsx"></code>
11 | 
12 | ## Auto Size
13 | 
14 | <code src="./autoSize.tsx"></code>
15 | 
16 | ## Allow Clear
17 | 
18 | <code src="./allowClear.tsx"></code>
19 | 
20 | ## Show Count
21 | 
22 | <code src="./showCount.tsx"></code>
23 | 


--------------------------------------------------------------------------------
/docs/demo/simple.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | import React, { useState } from 'react';
 3 | import type { TextAreaProps } from '@rc-component/textarea';
 4 | import Textarea from '@rc-component/textarea';
 5 | 
 6 | export default function App() {
 7 |   const [value, setValue] = useState('');
 8 | 
 9 |   const onChange = (e) => {
10 |     const {
11 |       target: { value: currentValue },
12 |     } = e;
13 |     console.log(e.target.value);
14 |     setValue(currentValue);
15 |   };
16 | 
17 |   const onResize: TextAreaProps['onResize'] = ({ width, height }) => {
18 |     console.log(`size is changed, width:${width} height:${height}`);
19 |   };
20 | 
21 |   // eslint-disable-next-line @typescript-eslint/no-unused-vars
22 |   const onPressEnter = (e) => {
23 |     console.log(`enter key is pressed`);
24 |   };
25 | 
26 |   return (
27 |     <div>
28 |       <Textarea
29 |         prefixCls="custom-textarea"
30 |         onPressEnter={onPressEnter}
31 |         onResize={onResize}
32 |         value={value}
33 |         onChange={onChange}
34 |         autoFocus
35 |         onFocus={() => console.log('focus')}
36 |       />
37 |     </div>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: rc-textarea
3 | ---
4 | 
5 | <embed src="../README.md"></embed>
6 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   setupFiles: ['./tests/setup.ts'],
3 |   setupFilesAfterEnv: ['./tests/setupFilesAfterEnv.ts'],
4 |   collectCoverageFrom: ['./src/**/*.{ts,tsx}'],
5 | };
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@rc-component/textarea",
 3 |   "version": "1.0.0",
 4 |   "description": "Pretty Textarea react component used in used in ant.design",
 5 |   "keywords": [
 6 |     "react",
 7 |     "react-component",
 8 |     "react-textarea",
 9 |     "textarea",
10 |     "antd",
11 |     "ant-design"
12 |   ],
13 |   "main": "./lib/index",
14 |   "module": "./es/index",
15 |   "files": [
16 |     "assets/*.css",
17 |     "assets/*.less",
18 |     "es",
19 |     "lib",
20 |     "dist"
21 |   ],
22 |   "homepage": "https://react-component.github.io/textarea",
23 |   "repository": {
24 |     "type": "git",
25 |     "url": "git@github.com:react-component/textarea.git"
26 |   },
27 |   "bugs": {
28 |     "url": "http://github.com/react-component/textarea/issues"
29 |   },
30 |   "license": "MIT",
31 |   "scripts": {
32 |     "start": "dumi dev",
33 |     "docs:build": "dumi build",
34 |     "docs:deploy": "gh-pages -d .doc",
35 |     "compile": "father build && lessc assets/index.less assets/index.css",
36 |     "gh-pages": "npm run docs:build && npm run docs:deploy",
37 |     "prepublishOnly": "npm run compile && rc-np",
38 |     "postpublish": "npm run gh-pages",
39 |     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
40 |     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
41 |     "pretty-quick": "pretty-quick",
42 |     "test": "rc-test",
43 |     "coverage": "rc-test --coverage"
44 |   },
45 |   "dependencies": {
46 |     "classnames": "^2.2.1",
47 |     "@rc-component/input": "~1.0.0",
48 |     "@rc-component/resize-observer": "^1.0.0",
49 |     "@rc-component/util": "^1.2.0"
50 |   },
51 |   "devDependencies": {
52 |     "@rc-component/father-plugin": "^2.0.2",
53 |     "@rc-component/np": "^1.0.3",
54 |     "@testing-library/jest-dom": "^5.16.5",
55 |     "@testing-library/react": "^15.0.0",
56 |     "@types/classnames": "^2.2.9",
57 |     "@types/react": "^18.0.0",
58 |     "@types/react-dom": "^18.0.0",
59 |     "@umijs/fabric": "^2.0.8",
60 |     "cheerio": "1.0.0-rc.12",
61 |     "coveralls": "^3.0.6",
62 |     "cross-env": "^7.0.2",
63 |     "dumi": "^2.0.0",
64 |     "eslint": "^7.0.0",
65 |     "father": "^4.0.0",
66 |     "gh-pages": "^3.1.0",
67 |     "husky": "^4.2.5",
68 |     "less": "^3.10.3",
69 |     "prettier": "^2.0.5",
70 |     "pretty-quick": "^2.0.1",
71 |     "rc-test": "^7.1.1",
72 |     "react": "^18.0.0",
73 |     "react-dom": "^18.0.0"
74 |   },
75 |   "peerDependencies": {
76 |     "react": ">=16.9.0",
77 |     "react-dom": ">=16.9.0"
78 |   },
79 |   "husky": {
80 |     "hooks": {
81 |       "pre-commit": "pretty-quick --staged"
82 |     }
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/src/ResizableTextArea.tsx:
--------------------------------------------------------------------------------
  1 | import classNames from 'classnames';
  2 | import ResizeObserver from '@rc-component/resize-observer';
  3 | import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
  4 | import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
  5 | import raf from '@rc-component/util/lib/raf';
  6 | import * as React from 'react';
  7 | import type { TextAreaProps } from '.';
  8 | import calculateAutoSizeStyle from './calculateNodeHeight';
  9 | import type { ResizableTextAreaRef } from './interface';
 10 | 
 11 | const RESIZE_START = 0;
 12 | const RESIZE_MEASURING = 1;
 13 | const RESIZE_STABLE = 2;
 14 | 
 15 | const ResizableTextArea = React.forwardRef<ResizableTextAreaRef, TextAreaProps>(
 16 |   (props, ref) => {
 17 |     const {
 18 |       prefixCls,
 19 |       defaultValue,
 20 |       value,
 21 |       autoSize,
 22 |       onResize,
 23 |       className,
 24 |       style,
 25 |       disabled,
 26 |       onChange,
 27 |       // Test only
 28 |       onInternalAutoSize,
 29 |       ...restProps
 30 |     } = props as TextAreaProps & {
 31 |       onInternalAutoSize?: VoidFunction;
 32 |     };
 33 | 
 34 |     // =============================== Value ================================
 35 |     const [mergedValue, setMergedValue] = useMergedState(defaultValue, {
 36 |       value,
 37 |       postState: (val) => val ?? '',
 38 |     });
 39 | 
 40 |     const onInternalChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
 41 |       event,
 42 |     ) => {
 43 |       setMergedValue(event.target.value);
 44 |       onChange?.(event);
 45 |     };
 46 | 
 47 |     // ================================ Ref =================================
 48 |     const textareaRef = React.useRef<HTMLTextAreaElement>();
 49 | 
 50 |     React.useImperativeHandle(ref, () => ({
 51 |       textArea: textareaRef.current,
 52 |     }));
 53 | 
 54 |     // ============================== AutoSize ==============================
 55 |     const [minRows, maxRows] = React.useMemo(() => {
 56 |       if (autoSize && typeof autoSize === 'object') {
 57 |         return [autoSize.minRows, autoSize.maxRows];
 58 |       }
 59 | 
 60 |       return [];
 61 |     }, [autoSize]);
 62 | 
 63 |     const needAutoSize = !!autoSize;
 64 | 
 65 |     // =============================== Scroll ===============================
 66 |     // https://github.com/ant-design/ant-design/issues/21870
 67 |     const fixFirefoxAutoScroll = () => {
 68 |       try {
 69 |         // FF has bug with jump of scroll to top. We force back here.
 70 |         if (document.activeElement === textareaRef.current) {
 71 |           const { selectionStart, selectionEnd, scrollTop } =
 72 |             textareaRef.current;
 73 | 
 74 |           // Fix Safari bug which not rollback when break line
 75 |           // This makes Chinese IME can't input. Do not fix this
 76 |           // const { value: tmpValue } = textareaRef.current;
 77 |           // textareaRef.current.value = '';
 78 |           // textareaRef.current.value = tmpValue;
 79 | 
 80 |           textareaRef.current.setSelectionRange(selectionStart, selectionEnd);
 81 |           textareaRef.current.scrollTop = scrollTop;
 82 |         }
 83 |       } catch (e) {
 84 |         // Fix error in Chrome:
 85 |         // Failed to read the 'selectionStart' property from 'HTMLInputElement'
 86 |         // http://stackoverflow.com/q/21177489/3040605
 87 |       }
 88 |     };
 89 | 
 90 |     // =============================== Resize ===============================
 91 |     const [resizeState, setResizeState] = React.useState(RESIZE_STABLE);
 92 |     const [autoSizeStyle, setAutoSizeStyle] =
 93 |       React.useState<React.CSSProperties>();
 94 | 
 95 |     const startResize = () => {
 96 |       setResizeState(RESIZE_START);
 97 |       if (process.env.NODE_ENV === 'test') {
 98 |         onInternalAutoSize?.();
 99 |       }
100 |     };
101 | 
102 |     // Change to trigger resize measure
103 |     useLayoutEffect(() => {
104 |       if (needAutoSize) {
105 |         startResize();
106 |       }
107 |     }, [value, minRows, maxRows, needAutoSize]);
108 | 
109 |     useLayoutEffect(() => {
110 |       if (resizeState === RESIZE_START) {
111 |         setResizeState(RESIZE_MEASURING);
112 |       } else if (resizeState === RESIZE_MEASURING) {
113 |         const textareaStyles = calculateAutoSizeStyle(
114 |           textareaRef.current,
115 |           false,
116 |           minRows,
117 |           maxRows,
118 |         );
119 | 
120 |         // Safari has bug that text will keep break line on text cut when it's prev is break line.
121 |         // ZombieJ: This not often happen. So we just skip it.
122 |         // const { selectionStart, selectionEnd, scrollTop } = textareaRef.current;
123 |         // const { value: tmpValue } = textareaRef.current;
124 |         // textareaRef.current.value = '';
125 |         // textareaRef.current.value = tmpValue;
126 | 
127 |         // if (document.activeElement === textareaRef.current) {
128 |         //   textareaRef.current.scrollTop = scrollTop;
129 |         //   textareaRef.current.setSelectionRange(selectionStart, selectionEnd);
130 |         // }
131 | 
132 |         setResizeState(RESIZE_STABLE);
133 |         setAutoSizeStyle(textareaStyles);
134 |       } else {
135 |         fixFirefoxAutoScroll();
136 |       }
137 |     }, [resizeState]);
138 | 
139 |     // We lock resize trigger by raf to avoid Safari warning
140 |     const resizeRafRef = React.useRef<number>();
141 |     const cleanRaf = () => {
142 |       raf.cancel(resizeRafRef.current);
143 |     };
144 | 
145 |     const onInternalResize = (size: { width: number; height: number }) => {
146 |       if (resizeState === RESIZE_STABLE) {
147 |         onResize?.(size);
148 | 
149 |         if (autoSize) {
150 |           cleanRaf();
151 |           resizeRafRef.current = raf(() => {
152 |             startResize();
153 |           });
154 |         }
155 |       }
156 |     };
157 | 
158 |     React.useEffect(() => cleanRaf, []);
159 | 
160 |     // =============================== Render ===============================
161 |     const mergedAutoSizeStyle = needAutoSize ? autoSizeStyle : null;
162 | 
163 |     const mergedStyle: React.CSSProperties = {
164 |       ...style,
165 |       ...mergedAutoSizeStyle,
166 |     };
167 | 
168 |     if (resizeState === RESIZE_START || resizeState === RESIZE_MEASURING) {
169 |       mergedStyle.overflowY = 'hidden';
170 |       mergedStyle.overflowX = 'hidden';
171 |     }
172 | 
173 |     return (
174 |       <ResizeObserver
175 |         onResize={onInternalResize}
176 |         disabled={!(autoSize || onResize)}
177 |       >
178 |         <textarea
179 |           {...restProps}
180 |           ref={textareaRef}
181 |           style={mergedStyle}
182 |           className={classNames(prefixCls, className, {
183 |             [`${prefixCls}-disabled`]: disabled,
184 |           })}
185 |           disabled={disabled}
186 |           value={mergedValue as string}
187 |           onChange={onInternalChange}
188 |         />
189 |       </ResizeObserver>
190 |     );
191 |   },
192 | );
193 | 
194 | export default ResizableTextArea;
195 | 


--------------------------------------------------------------------------------
/src/TextArea.tsx:
--------------------------------------------------------------------------------
  1 | import clsx from 'classnames';
  2 | import { BaseInput } from '@rc-component/input';
  3 | import { type HolderRef } from '@rc-component/input/lib/BaseInput';
  4 | import useCount from '@rc-component/input/lib/hooks/useCount';
  5 | import { resolveOnChange } from '@rc-component/input/lib/utils/commonUtils';
  6 | import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
  7 | import type { ReactNode } from 'react';
  8 | import React, { useEffect, useImperativeHandle, useRef } from 'react';
  9 | import ResizableTextArea from './ResizableTextArea';
 10 | import type {
 11 |   ResizableTextAreaRef,
 12 |   TextAreaProps,
 13 |   TextAreaRef,
 14 | } from './interface';
 15 | 
 16 | const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
 17 |   (
 18 |     {
 19 |       defaultValue,
 20 |       value: customValue,
 21 |       onFocus,
 22 |       onBlur,
 23 |       onChange,
 24 |       allowClear,
 25 |       maxLength,
 26 |       onCompositionStart,
 27 |       onCompositionEnd,
 28 |       suffix,
 29 |       prefixCls = 'rc-textarea',
 30 |       showCount,
 31 |       count,
 32 |       className,
 33 |       style,
 34 |       disabled,
 35 |       hidden,
 36 |       classNames,
 37 |       styles,
 38 |       onResize,
 39 |       onClear,
 40 |       onPressEnter,
 41 |       readOnly,
 42 |       autoSize,
 43 |       onKeyDown,
 44 |       ...rest
 45 |     },
 46 |     ref,
 47 |   ) => {
 48 |     const [value, setValue] = useMergedState(defaultValue, {
 49 |       value: customValue,
 50 |       defaultValue,
 51 |     });
 52 |     const formatValue =
 53 |       value === undefined || value === null ? '' : String(value);
 54 | 
 55 |     const [focused, setFocused] = React.useState<boolean>(false);
 56 | 
 57 |     const compositionRef = React.useRef(false);
 58 | 
 59 |     const [textareaResized, setTextareaResized] = React.useState<boolean>(null);
 60 | 
 61 |     // =============================== Ref ================================
 62 |     const holderRef = useRef<HolderRef>(null);
 63 |     const resizableTextAreaRef = useRef<ResizableTextAreaRef>(null);
 64 |     const getTextArea = () => resizableTextAreaRef.current?.textArea;
 65 | 
 66 |     const focus = () => {
 67 |       getTextArea().focus();
 68 |     };
 69 | 
 70 |     useImperativeHandle(ref, () => ({
 71 |       resizableTextArea: resizableTextAreaRef.current,
 72 |       focus,
 73 |       blur: () => {
 74 |         getTextArea().blur();
 75 |       },
 76 |       nativeElement: holderRef.current?.nativeElement || getTextArea(),
 77 |     }));
 78 | 
 79 |     useEffect(() => {
 80 |       setFocused((prev) => !disabled && prev);
 81 |     }, [disabled]);
 82 | 
 83 |     // =========================== Select Range ===========================
 84 |     const [selection, setSelection] = React.useState<
 85 |       [start: number, end: number] | null
 86 |     >(null);
 87 | 
 88 |     React.useEffect(() => {
 89 |       if (selection) {
 90 |         getTextArea().setSelectionRange(...selection);
 91 |       }
 92 |     }, [selection]);
 93 | 
 94 |     // ============================== Count ===============================
 95 |     const countConfig = useCount(count, showCount);
 96 |     const mergedMax = countConfig.max ?? maxLength;
 97 | 
 98 |     // Max length value
 99 |     const hasMaxLength = Number(mergedMax) > 0;
100 | 
101 |     const valueLength = countConfig.strategy(formatValue);
102 | 
103 |     const isOutOfRange = !!mergedMax && valueLength > mergedMax;
104 | 
105 |     // ============================== Change ==============================
106 |     const triggerChange = (
107 |       e:
108 |         | React.ChangeEvent<HTMLTextAreaElement>
109 |         | React.CompositionEvent<HTMLTextAreaElement>,
110 |       currentValue: string,
111 |     ) => {
112 |       let cutValue = currentValue;
113 | 
114 |       if (
115 |         !compositionRef.current &&
116 |         countConfig.exceedFormatter &&
117 |         countConfig.max &&
118 |         countConfig.strategy(currentValue) > countConfig.max
119 |       ) {
120 |         cutValue = countConfig.exceedFormatter(currentValue, {
121 |           max: countConfig.max,
122 |         });
123 | 
124 |         if (currentValue !== cutValue) {
125 |           setSelection([
126 |             getTextArea().selectionStart || 0,
127 |             getTextArea().selectionEnd || 0,
128 |           ]);
129 |         }
130 |       }
131 |       setValue(cutValue);
132 | 
133 |       resolveOnChange(e.currentTarget, e, onChange, cutValue);
134 |     };
135 | 
136 |     // =========================== Value Update ===========================
137 |     const onInternalCompositionStart: React.CompositionEventHandler<
138 |       HTMLTextAreaElement
139 |     > = (e) => {
140 |       compositionRef.current = true;
141 |       onCompositionStart?.(e);
142 |     };
143 | 
144 |     const onInternalCompositionEnd: React.CompositionEventHandler<
145 |       HTMLTextAreaElement
146 |     > = (e) => {
147 |       compositionRef.current = false;
148 |       triggerChange(e, e.currentTarget.value);
149 |       onCompositionEnd?.(e);
150 |     };
151 | 
152 |     const onInternalChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
153 |       triggerChange(e, e.target.value);
154 |     };
155 | 
156 |     const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
157 |       if (e.key === 'Enter' && onPressEnter) {
158 |         onPressEnter(e);
159 |       }
160 |       onKeyDown?.(e);
161 |     };
162 | 
163 |     const handleFocus: React.FocusEventHandler<HTMLTextAreaElement> = (e) => {
164 |       setFocused(true);
165 |       onFocus?.(e);
166 |     };
167 | 
168 |     const handleBlur: React.FocusEventHandler<HTMLTextAreaElement> = (e) => {
169 |       setFocused(false);
170 |       onBlur?.(e);
171 |     };
172 | 
173 |     // ============================== Reset ===============================
174 |     const handleReset = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
175 |       setValue('');
176 |       focus();
177 |       resolveOnChange(getTextArea(), e, onChange);
178 |     };
179 | 
180 |     let suffixNode = suffix;
181 |     let dataCount: ReactNode;
182 |     if (countConfig.show) {
183 |       if (countConfig.showFormatter) {
184 |         dataCount = countConfig.showFormatter({
185 |           value: formatValue,
186 |           count: valueLength,
187 |           maxLength: mergedMax,
188 |         });
189 |       } else {
190 |         dataCount = `${valueLength}${hasMaxLength ? ` / ${mergedMax}` : ''}`;
191 |       }
192 | 
193 |       suffixNode = (
194 |         <>
195 |           {suffixNode}
196 |           <span
197 |             className={clsx(`${prefixCls}-data-count`, classNames?.count)}
198 |             style={styles?.count}
199 |           >
200 |             {dataCount}
201 |           </span>
202 |         </>
203 |       );
204 |     }
205 | 
206 |     const handleResize: TextAreaProps['onResize'] = (size) => {
207 |       onResize?.(size);
208 |       if (getTextArea()?.style.height) {
209 |         setTextareaResized(true);
210 |       }
211 |     };
212 | 
213 |     const isPureTextArea = !autoSize && !showCount && !allowClear;
214 | 
215 |     return (
216 |       <BaseInput
217 |         ref={holderRef}
218 |         value={formatValue}
219 |         allowClear={allowClear}
220 |         handleReset={handleReset}
221 |         suffix={suffixNode}
222 |         prefixCls={prefixCls}
223 |         classNames={{
224 |           ...classNames,
225 |           affixWrapper: clsx(classNames?.affixWrapper, {
226 |             [`${prefixCls}-show-count`]: showCount,
227 |             [`${prefixCls}-textarea-allow-clear`]: allowClear,
228 |           }),
229 |         }}
230 |         disabled={disabled}
231 |         focused={focused}
232 |         className={clsx(className, isOutOfRange && `${prefixCls}-out-of-range`)}
233 |         style={{
234 |           ...style,
235 |           ...(textareaResized && !isPureTextArea ? { height: 'auto' } : {}),
236 |         }}
237 |         dataAttrs={{
238 |           affixWrapper: {
239 |             'data-count': typeof dataCount === 'string' ? dataCount : undefined,
240 |           },
241 |         }}
242 |         hidden={hidden}
243 |         readOnly={readOnly}
244 |         onClear={onClear}
245 |       >
246 |         <ResizableTextArea
247 |           {...rest}
248 |           autoSize={autoSize}
249 |           maxLength={maxLength}
250 |           onKeyDown={handleKeyDown}
251 |           onChange={onInternalChange}
252 |           onFocus={handleFocus}
253 |           onBlur={handleBlur}
254 |           onCompositionStart={onInternalCompositionStart}
255 |           onCompositionEnd={onInternalCompositionEnd}
256 |           className={clsx(classNames?.textarea)}
257 |           style={{ ...styles?.textarea, resize: style?.resize }}
258 |           disabled={disabled}
259 |           prefixCls={prefixCls}
260 |           onResize={handleResize}
261 |           ref={resizableTextAreaRef}
262 |           readOnly={readOnly}
263 |         />
264 |       </BaseInput>
265 |     );
266 |   },
267 | );
268 | 
269 | export default TextArea;
270 | 


--------------------------------------------------------------------------------
/src/calculateNodeHeight.tsx:
--------------------------------------------------------------------------------
  1 | // Thanks to https://github.com/andreypopp/react-textarea-autosize/
  2 | import type React from 'react';
  3 | 
  4 | /**
  5 |  * calculateNodeHeight(uiTextNode, useCache = false)
  6 |  */
  7 | 
  8 | const HIDDEN_TEXTAREA_STYLE = `
  9 |   min-height:0 !important;
 10 |   max-height:none !important;
 11 |   height:0 !important;
 12 |   visibility:hidden !important;
 13 |   overflow:hidden !important;
 14 |   position:absolute !important;
 15 |   z-index:-1000 !important;
 16 |   top:0 !important;
 17 |   right:0 !important;
 18 |   pointer-events: none !important;
 19 | `;
 20 | 
 21 | const SIZING_STYLE = [
 22 |   'letter-spacing',
 23 |   'line-height',
 24 |   'padding-top',
 25 |   'padding-bottom',
 26 |   'font-family',
 27 |   'font-weight',
 28 |   'font-size',
 29 |   'font-variant',
 30 |   'text-rendering',
 31 |   'text-transform',
 32 |   'width',
 33 |   'text-indent',
 34 |   'padding-left',
 35 |   'padding-right',
 36 |   'border-width',
 37 |   'box-sizing',
 38 |   'word-break',
 39 |   'white-space',
 40 | ];
 41 | 
 42 | export interface NodeType {
 43 |   sizingStyle: string;
 44 |   paddingSize: number;
 45 |   borderSize: number;
 46 |   boxSizing: string;
 47 | }
 48 | 
 49 | const computedStyleCache: Record<string, NodeType> = {};
 50 | let hiddenTextarea: HTMLTextAreaElement;
 51 | 
 52 | export function calculateNodeStyling(node: HTMLElement, useCache = false) {
 53 |   const nodeRef = (node.getAttribute('id') ||
 54 |     node.getAttribute('data-reactid') ||
 55 |     node.getAttribute('name')) as string;
 56 | 
 57 |   if (useCache && computedStyleCache[nodeRef]) {
 58 |     return computedStyleCache[nodeRef];
 59 |   }
 60 | 
 61 |   const style = window.getComputedStyle(node);
 62 | 
 63 |   const boxSizing =
 64 |     style.getPropertyValue('box-sizing') ||
 65 |     style.getPropertyValue('-moz-box-sizing') ||
 66 |     style.getPropertyValue('-webkit-box-sizing');
 67 | 
 68 |   const paddingSize =
 69 |     parseFloat(style.getPropertyValue('padding-bottom')) +
 70 |     parseFloat(style.getPropertyValue('padding-top'));
 71 | 
 72 |   const borderSize =
 73 |     parseFloat(style.getPropertyValue('border-bottom-width')) +
 74 |     parseFloat(style.getPropertyValue('border-top-width'));
 75 | 
 76 |   const sizingStyle = SIZING_STYLE.map(
 77 |     (name) => `${name}:${style.getPropertyValue(name)}`,
 78 |   ).join(';');
 79 | 
 80 |   const nodeInfo: NodeType = {
 81 |     sizingStyle,
 82 |     paddingSize,
 83 |     borderSize,
 84 |     boxSizing,
 85 |   };
 86 | 
 87 |   if (useCache && nodeRef) {
 88 |     computedStyleCache[nodeRef] = nodeInfo;
 89 |   }
 90 | 
 91 |   return nodeInfo;
 92 | }
 93 | 
 94 | export default function calculateAutoSizeStyle(
 95 |   uiTextNode: HTMLTextAreaElement,
 96 |   useCache = false,
 97 |   minRows: number | null = null,
 98 |   maxRows: number | null = null,
 99 | ): React.CSSProperties {
100 |   if (!hiddenTextarea) {
101 |     hiddenTextarea = document.createElement('textarea');
102 |     hiddenTextarea.setAttribute('tab-index', '-1');
103 |     hiddenTextarea.setAttribute('aria-hidden', 'true');
104 |     // fix: A form field element should have an id or name attribute
105 |     // A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form.
106 |     // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
107 |     hiddenTextarea.setAttribute('name', 'hiddenTextarea');
108 |     document.body.appendChild(hiddenTextarea);
109 |   }
110 | 
111 |   // Fix wrap="off" issue
112 |   // https://github.com/ant-design/ant-design/issues/6577
113 |   if (uiTextNode.getAttribute('wrap')) {
114 |     hiddenTextarea.setAttribute(
115 |       'wrap',
116 |       uiTextNode.getAttribute('wrap') as string,
117 |     );
118 |   } else {
119 |     hiddenTextarea.removeAttribute('wrap');
120 |   }
121 | 
122 |   // Copy all CSS properties that have an impact on the height of the content in
123 |   // the textbox
124 |   const { paddingSize, borderSize, boxSizing, sizingStyle } =
125 |     calculateNodeStyling(uiTextNode, useCache);
126 | 
127 |   // Need to have the overflow attribute to hide the scrollbar otherwise
128 |   // text-lines will not calculated properly as the shadow will technically be
129 |   // narrower for content
130 |   hiddenTextarea.setAttribute(
131 |     'style',
132 |     `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`,
133 |   );
134 |   hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
135 | 
136 |   let minHeight: number | undefined = undefined;
137 |   let maxHeight: number | undefined = undefined;
138 |   let overflowY: any;
139 | 
140 |   let height = hiddenTextarea.scrollHeight;
141 | 
142 |   if (boxSizing === 'border-box') {
143 |     // border-box: add border, since height = content + padding + border
144 |     height += borderSize;
145 |   } else if (boxSizing === 'content-box') {
146 |     // remove padding, since height = content
147 |     height -= paddingSize;
148 |   }
149 | 
150 |   if (minRows !== null || maxRows !== null) {
151 |     // measure height of a textarea with a single row
152 |     hiddenTextarea.value = ' ';
153 |     const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
154 |     if (minRows !== null) {
155 |       minHeight = singleRowHeight * minRows;
156 |       if (boxSizing === 'border-box') {
157 |         minHeight = minHeight + paddingSize + borderSize;
158 |       }
159 |       height = Math.max(minHeight, height);
160 |     }
161 |     if (maxRows !== null) {
162 |       maxHeight = singleRowHeight * maxRows;
163 |       if (boxSizing === 'border-box') {
164 |         maxHeight = maxHeight + paddingSize + borderSize;
165 |       }
166 |       overflowY = height > maxHeight ? '' : 'hidden';
167 |       height = Math.min(maxHeight, height);
168 |     }
169 |   }
170 | 
171 |   const style: React.CSSProperties = {
172 |     height,
173 |     overflowY,
174 |     resize: 'none',
175 |   };
176 | 
177 |   if (minHeight) {
178 |     style.minHeight = minHeight;
179 |   }
180 |   if (maxHeight) {
181 |     style.maxHeight = maxHeight;
182 |   }
183 | 
184 |   return style;
185 | }
186 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import TextArea from './TextArea';
 2 | 
 3 | export { default as ResizableTextArea } from './ResizableTextArea';
 4 | export type {
 5 |   AutoSizeType,
 6 |   ResizableTextAreaRef,
 7 |   TextAreaProps,
 8 |   TextAreaRef,
 9 | } from './interface';
10 | 
11 | export default TextArea;
12 | 


--------------------------------------------------------------------------------
/src/interface.ts:
--------------------------------------------------------------------------------
 1 | import type {
 2 |   BaseInputProps,
 3 |   CommonInputProps,
 4 |   InputProps,
 5 | } from '@rc-component/input/lib/interface';
 6 | import type React from 'react';
 7 | import type { CSSProperties } from 'react';
 8 | 
 9 | export interface AutoSizeType {
10 |   minRows?: number;
11 |   maxRows?: number;
12 | }
13 | 
14 | // To compatible with origin usage. We have to wrap this
15 | export interface ResizableTextAreaRef {
16 |   textArea: HTMLTextAreaElement;
17 | }
18 | 
19 | export type HTMLTextareaProps =
20 |   React.TextareaHTMLAttributes<HTMLTextAreaElement>;
21 | 
22 | export type TextAreaProps = Omit<HTMLTextareaProps, 'onResize' | 'value'> & {
23 |   value?: HTMLTextareaProps['value'] | bigint;
24 |   prefixCls?: string;
25 |   className?: string;
26 |   style?: React.CSSProperties;
27 |   autoSize?: boolean | AutoSizeType;
28 |   onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
29 |   onResize?: (size: { width: number; height: number }) => void;
30 |   classNames?: CommonInputProps['classNames'] & {
31 |     textarea?: string;
32 |     count?: string;
33 |   };
34 |   styles?: {
35 |     textarea?: CSSProperties;
36 |     count?: CSSProperties;
37 |   };
38 | } & Pick<BaseInputProps, 'allowClear' | 'suffix'> &
39 |   Pick<InputProps, 'showCount' | 'count' | 'onClear'>;
40 | 
41 | export type TextAreaRef = {
42 |   resizableTextArea: ResizableTextAreaRef;
43 |   focus: () => void;
44 |   blur: () => void;
45 |   nativeElement: HTMLElement;
46 | };
47 | 


--------------------------------------------------------------------------------
/tests/ResizableTextArea.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render } from '@testing-library/react';
 2 | import React from 'react';
 3 | import type { ResizableTextAreaRef, TextAreaProps } from '../src';
 4 | import { ResizableTextArea } from '../src';
 5 | 
 6 | const resizableTextAreaProps = () => (global as any).textAreaProps;
 7 | 
 8 | jest.mock('../src/ResizableTextArea', () => {
 9 |   const ReactReal: typeof React = jest.requireActual('react');
10 |   const Resizable = jest.requireActual('../src/ResizableTextArea');
11 |   const ResizableComponent = Resizable.default;
12 |   return ReactReal.forwardRef<ResizableTextAreaRef, TextAreaProps>(
13 |     (props, ref) => {
14 |       (global as any).textAreaProps = props;
15 |       return <ResizableComponent {...props} ref={ref} />;
16 |     },
17 |   );
18 | });
19 | 
20 | it('should have no onPressEnter prop', () => {
21 |   render(<ResizableTextArea defaultValue="test" />);
22 |   expect(resizableTextAreaProps().onPressEnter).toBeUndefined();
23 | });
24 | 


--------------------------------------------------------------------------------
/tests/__snapshots__/allowClear.test.tsx.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 1`] = `
  4 | <span
  5 |   class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
  6 | >
  7 |   <textarea
  8 |     class="rc-textarea"
  9 |   />
 10 |   <span
 11 |     class="rc-textarea-suffix"
 12 |   >
 13 |     <button
 14 |       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
 15 |       type="button"
 16 |     >
 17 |       ✖
 18 |     </button>
 19 |   </span>
 20 | </span>
 21 | `;
 22 | 
 23 | exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 2`] = `
 24 | <span
 25 |   class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
 26 | >
 27 |   <textarea
 28 |     class="rc-textarea"
 29 |   />
 30 |   <span
 31 |     class="rc-textarea-suffix"
 32 |   >
 33 |     <button
 34 |       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
 35 |       type="button"
 36 |     >
 37 |       ✖
 38 |     </button>
 39 |   </span>
 40 | </span>
 41 | `;
 42 | 
 43 | exports[`should support allowClear should not show icon if defaultValue is undefined, null or empty string 3`] = `
 44 | <span
 45 |   class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
 46 | >
 47 |   <textarea
 48 |     class="rc-textarea"
 49 |   />
 50 |   <span
 51 |     class="rc-textarea-suffix"
 52 |   >
 53 |     <button
 54 |       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
 55 |       type="button"
 56 |     >
 57 |       ✖
 58 |     </button>
 59 |   </span>
 60 | </span>
 61 | `;
 62 | 
 63 | exports[`should support allowClear should not show icon if value is undefined, null or empty string 1`] = `
 64 | <span
 65 |   class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
 66 | >
 67 |   <textarea
 68 |     class="rc-textarea"
 69 |   />
 70 |   <span
 71 |     class="rc-textarea-suffix"
 72 |   >
 73 |     <button
 74 |       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
 75 |       type="button"
 76 |     >
 77 |       ✖
 78 |     </button>
 79 |   </span>
 80 | </span>
 81 | `;
 82 | 
 83 | exports[`should support allowClear should not show icon if value is undefined, null or empty string 2`] = `
 84 | <span
 85 |   class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
 86 | >
 87 |   <textarea
 88 |     class="rc-textarea"
 89 |   />
 90 |   <span
 91 |     class="rc-textarea-suffix"
 92 |   >
 93 |     <button
 94 |       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
 95 |       type="button"
 96 |     >
 97 |       ✖
 98 |     </button>
 99 |   </span>
100 | </span>
101 | `;
102 | 
103 | exports[`should support allowClear should not show icon if value is undefined, null or empty string 3`] = `
104 | <span
105 |   class="rc-textarea-affix-wrapper rc-textarea-textarea-allow-clear"
106 | >
107 |   <textarea
108 |     class="rc-textarea"
109 |   />
110 |   <span
111 |     class="rc-textarea-suffix"
112 |   >
113 |     <button
114 |       class="rc-textarea-clear-icon rc-textarea-clear-icon-hidden"
115 |       type="button"
116 |     >
117 |       ✖
118 |     </button>
119 |   </span>
120 | </span>
121 | `;
122 | 


--------------------------------------------------------------------------------
/tests/__snapshots__/index.spec.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`TextArea classNames and styles should work 1`] = `
 4 | <div>
 5 |   <textarea
 6 |     class="rc-textarea custom-textarea custom-class"
 7 |     style="color: red; background: red;"
 8 |   />
 9 |   <span
10 |     class="rc-textarea-affix-wrapper rc-textarea-show-count custom-class"
11 |     data-count="0"
12 |     style="background: red;"
13 |   >
14 |     <textarea
15 |       class="rc-textarea custom-textarea"
16 |       style="color: red;"
17 |     />
18 |     <span
19 |       class="rc-textarea-suffix"
20 |     >
21 |       <span
22 |         class="rc-textarea-data-count custom-count"
23 |         style="color: blue;"
24 |       >
25 |         0
26 |       </span>
27 |     </span>
28 |   </span>
29 | </div>
30 | `;
31 | 
32 | exports[`TextArea should support disabled 1`] = `
33 | <textarea
34 |   class="rc-textarea rc-textarea-disabled"
35 |   disabled=""
36 | />
37 | `;
38 | 
39 | exports[`TextArea should support maxLength 1`] = `
40 | <textarea
41 |   class="rc-textarea"
42 |   maxlength="10"
43 | />
44 | `;
45 | 


--------------------------------------------------------------------------------
/tests/allowClear.test.tsx:
--------------------------------------------------------------------------------
  1 | import { fireEvent, render } from '@testing-library/react';
  2 | import type { ChangeEventHandler, TextareaHTMLAttributes } from 'react';
  3 | import React from 'react';
  4 | import TextArea from '../src';
  5 | 
  6 | describe('should support allowClear', () => {
  7 |   it('should change type when click', () => {
  8 |     const { container } = render(<TextArea allowClear />);
  9 |     fireEvent.change(container.querySelector('textarea')!, {
 10 |       target: { value: '111' },
 11 |     });
 12 |     expect(container.querySelector('textarea')?.value).toEqual('111');
 13 |     expect(
 14 |       container.querySelector('.rc-textarea-clear-icon-hidhen'),
 15 |     ).toBeFalsy();
 16 |     fireEvent.click(container.querySelector('.rc-textarea-clear-icon')!);
 17 |     expect(
 18 |       container.querySelector('.rc-textarea-clear-icon-hidden'),
 19 |     ).toBeTruthy();
 20 |     expect(container.querySelector('textarea')?.value).toEqual('');
 21 |   });
 22 | 
 23 |   it('should not show icon if value is undefined, null or empty string', () => {
 24 |     const wrappers = [null, undefined, ''].map((val) =>
 25 |       render(
 26 |         <TextArea
 27 |           allowClear
 28 |           value={val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']}
 29 |         />,
 30 |       ),
 31 |     );
 32 |     wrappers.forEach(({ asFragment, container }) => {
 33 |       expect(container.querySelector('textarea')?.value).toEqual('');
 34 |       expect(
 35 |         container.querySelector('.rc-textarea-clear-icon-hidden'),
 36 |       ).toBeTruthy();
 37 |       expect(asFragment().firstChild).toMatchSnapshot();
 38 |     });
 39 |   });
 40 | 
 41 |   it('should not show icon if defaultValue is undefined, null or empty string', () => {
 42 |     const wrappers = [null, undefined, ''].map((val) =>
 43 |       render(
 44 |         <TextArea
 45 |           allowClear
 46 |           defaultValue={
 47 |             val as TextareaHTMLAttributes<HTMLTextAreaElement>['value']
 48 |           }
 49 |         />,
 50 |       ),
 51 |     );
 52 |     wrappers.forEach(({ asFragment, container }) => {
 53 |       expect(container.querySelector('textarea')?.value).toEqual('');
 54 |       expect(
 55 |         container.querySelector('.rc-textarea-clear-icon-hidden'),
 56 |       ).toBeTruthy();
 57 |       expect(asFragment().firstChild).toMatchSnapshot();
 58 |     });
 59 |   });
 60 | 
 61 |   it('should trigger event correctly', () => {
 62 |     let argumentEventObjectType;
 63 |     let argumentEventObjectValue;
 64 |     const onChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
 65 |       argumentEventObjectType = e.type;
 66 |       argumentEventObjectValue = e.target.value;
 67 |     };
 68 |     const { container } = render(
 69 |       <TextArea allowClear defaultValue="111" onChange={onChange} />,
 70 |     );
 71 |     fireEvent.click(container.querySelector('.rc-textarea-clear-icon')!);
 72 |     expect(argumentEventObjectType).toBe('click');
 73 |     expect(argumentEventObjectValue).toBe('');
 74 |     expect(container.querySelector('textarea')?.value).toBe('');
 75 |   });
 76 | 
 77 |   it('should trigger event correctly on controlled mode', () => {
 78 |     let argumentEventObjectType;
 79 |     let argumentEventObjectValue;
 80 |     const onChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
 81 |       argumentEventObjectType = e.type;
 82 |       argumentEventObjectValue = e.target.value;
 83 |     };
 84 |     const { container } = render(
 85 |       <TextArea allowClear value="111" onChange={onChange} />,
 86 |     );
 87 |     fireEvent.click(container.querySelector('.rc-textarea-clear-icon')!);
 88 |     expect(argumentEventObjectType).toBe('click');
 89 |     expect(argumentEventObjectValue).toBe('');
 90 |     expect(container.querySelector('textarea')?.value).toBe('111');
 91 |   });
 92 | 
 93 |   it('should focus textarea after clear', () => {
 94 |     const { container } = render(<TextArea allowClear defaultValue="111" />);
 95 |     fireEvent.click(container.querySelector('.rc-textarea-clear-icon')!);
 96 |     expect(document.activeElement).toBe(container.querySelector('textarea'));
 97 |   });
 98 | 
 99 |   it('should not support allowClear when it is disabled', () => {
100 |     const { container } = render(
101 |       <TextArea allowClear defaultValue="111" disabled />,
102 |     );
103 |     expect(
104 |       container.querySelector('.rc-textarea-clear-icon-hidden'),
105 |     ).toBeTruthy();
106 |   });
107 | 
108 |   it('should not support allowClear when it is readOnly', () => {
109 |     const { container } = render(
110 |       <TextArea allowClear defaultValue="111" readOnly />,
111 |     );
112 |     expect(
113 |       container.querySelector('.rc-textarea-clear-icon-hidden'),
114 |     ).toBeTruthy();
115 |   });
116 | });
117 | 
118 | it('should show clear className', () => {
119 |   const { container } = render(<TextArea allowClear />);
120 |   expect(
121 |     container.querySelector('.rc-textarea-textarea-allow-clear'),
122 |   ).toBeTruthy();
123 | });
124 | 
125 | it('should not textarea clear className', () => {
126 |   const { container } = render(<TextArea />);
127 |   expect(
128 |     container.querySelector('.rc-textarea-textarea-allow-clear'),
129 |   ).toBeFalsy();
130 | });
131 | 
132 | it('support onClear', () => {
133 |   const onClear = jest.fn();
134 |   const { container } = render(
135 |     <TextArea onClear={onClear} defaultValue="test" allowClear />,
136 |   );
137 |   fireEvent.click(
138 |     container.querySelector<HTMLSpanElement>('.rc-textarea-clear-icon')!,
139 |   );
140 |   expect(onClear).toHaveBeenCalled();
141 | });
142 | 


--------------------------------------------------------------------------------
/tests/count.test.tsx:
--------------------------------------------------------------------------------
  1 | import { fireEvent, render } from '@testing-library/react';
  2 | import React from 'react';
  3 | import TextArea from '../src';
  4 | 
  5 | const getSegments = (val: string) => [...new Intl.Segmenter().segment(val)];
  6 | 
  7 | describe('TextArea.Count', () => {
  8 |   it('basic emoji take length', () => {
  9 |     const { container } = render(
 10 |       <TextArea count={{ show: true }} value="👨‍👩‍👧‍👦" />,
 11 |     );
 12 |     expect(container.querySelector('.rc-textarea-suffix')?.textContent).toEqual(
 13 |       '11',
 14 |     );
 15 |   });
 16 | 
 17 |   it('strategy', () => {
 18 |     const { container } = render(
 19 |       <TextArea
 20 |         count={{ show: true, strategy: (val) => getSegments(val).length }}
 21 |         value="👨‍👩‍👧‍👦"
 22 |       />,
 23 |     );
 24 |     expect(container.querySelector('.rc-textarea-suffix')?.textContent).toEqual(
 25 |       '1',
 26 |     );
 27 |   });
 28 | 
 29 |   it('exceed style', () => {
 30 |     const { container } = render(
 31 |       <TextArea count={{ show: true, max: 5 }} value="👨‍👩‍👧‍👦" />,
 32 |     );
 33 |     expect(container.querySelector('.rc-textarea-out-of-range')).toBeTruthy();
 34 |   });
 35 | 
 36 |   it('show formatter', () => {
 37 |     const { container } = render(
 38 |       <TextArea
 39 |         count={{
 40 |           show: ({ value, count, maxLength }) =>
 41 |             `${value}_${count}_${maxLength}`,
 42 |         }}
 43 |         value="👨‍👩‍👧‍👦"
 44 |         maxLength={5}
 45 |       />,
 46 |     );
 47 |     expect(container.querySelector('.rc-textarea-suffix')?.textContent).toEqual(
 48 |       '👨‍👩‍👧‍👦_11_5',
 49 |     );
 50 |   });
 51 | 
 52 |   it('exceedFormatter', () => {
 53 |     const onCompositionStart = jest.fn();
 54 |     const onCompositionEnd = jest.fn();
 55 | 
 56 |     const { container } = render(
 57 |       <TextArea
 58 |         count={{
 59 |           show: true,
 60 |           max: 3,
 61 |           exceedFormatter: (val, { max }) =>
 62 |             getSegments(val)
 63 |               .filter((seg) => seg.index + seg.segment.length <= max)
 64 |               .map((seg) => seg.segment)
 65 |               .join(''),
 66 |         }}
 67 |         onCompositionStart={onCompositionStart}
 68 |         onCompositionEnd={onCompositionEnd}
 69 |       />,
 70 |     );
 71 | 
 72 |     // Allow input
 73 |     fireEvent.compositionStart(container.querySelector('textarea')!);
 74 |     fireEvent.change(container.querySelector('textarea')!, {
 75 |       target: {
 76 |         value: '🔥🔥🔥🔥🔥',
 77 |       },
 78 |     });
 79 |     expect(container.querySelector('textarea')?.value).toEqual('🔥🔥🔥🔥🔥');
 80 |     expect(onCompositionStart).toHaveBeenCalled();
 81 | 
 82 |     // Fallback
 83 |     fireEvent.compositionEnd(container.querySelector('textarea')!);
 84 |     expect(container.querySelector('textarea')?.value).toEqual('🔥');
 85 |     expect(onCompositionEnd).toHaveBeenCalled();
 86 |   });
 87 | 
 88 |   it('exceedFormatter selection', () => {
 89 |     const { container } = render(
 90 |       <TextArea
 91 |         count={{
 92 |           show: true,
 93 |           max: 3,
 94 |           exceedFormatter: (val, { max }) => val.slice(0, max),
 95 |         }}
 96 |         defaultValue={'123'}
 97 |       />,
 98 |     );
 99 | 
100 |     const input = container.querySelector('textarea')!;
101 |     const setSelectionRange = jest.spyOn(input, 'setSelectionRange');
102 | 
103 |     fireEvent.change(input, {
104 |       target: {
105 |         selectionStart: 2,
106 |         selectionEnd: 2,
107 |         value: '1a23',
108 |       },
109 |     });
110 | 
111 |     expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
112 |   });
113 | 
114 |   describe('cls', () => {
115 |     it('raw', () => {
116 |       const { container } = render(
117 |         <TextArea
118 |           count={{
119 |             max: 3,
120 |           }}
121 |           defaultValue="bamboo"
122 |         />,
123 |       );
124 | 
125 |       expect(container.querySelector('.rc-textarea-out-of-range')).toBeTruthy();
126 |     });
127 | 
128 |     it('wrapper', () => {
129 |       const { container } = render(
130 |         <TextArea
131 |           count={{
132 |             max: 3,
133 |             show: true,
134 |           }}
135 |           defaultValue="bamboo"
136 |         />,
137 |       );
138 | 
139 |       expect(container.querySelector('.rc-textarea-out-of-range')).toBeTruthy();
140 |     });
141 |   });
142 | 
143 |   it('native maxLength', () => {
144 |     const { container } = render(<TextArea maxLength={33} />);
145 | 
146 |     expect(
147 |       container.querySelector('textarea')?.getAttribute('maxlength'),
148 |     ).toEqual('33');
149 |   });
150 | });
151 | 


--------------------------------------------------------------------------------
/tests/focus.test.tsx:
--------------------------------------------------------------------------------
 1 | import { fireEvent, render } from '@testing-library/react';
 2 | import React from 'react';
 3 | import type { TextAreaRef } from '../src';
 4 | import TextArea from '../src';
 5 | 
 6 | describe('focus and blur', () => {
 7 |   let focused = false;
 8 |   let blurred = false;
 9 |   const mockFocus = jest.spyOn(HTMLElement.prototype, 'focus');
10 |   const mockBlur = jest.spyOn(HTMLElement.prototype, 'blur');
11 | 
12 |   beforeAll(() => {
13 |     mockFocus.mockImplementation(() => {
14 |       focused = true;
15 |     });
16 |     mockBlur.mockImplementation(() => {
17 |       blurred = true;
18 |     });
19 |   });
20 | 
21 |   afterEach(() => {
22 |     focused = false;
23 |     blurred = false;
24 |   });
25 | 
26 |   it('focus() and onFocus', () => {
27 |     const handleFocus = jest.fn();
28 |     const { container } = render(<TextArea onFocus={handleFocus} />);
29 |     fireEvent.focus(container.firstChild);
30 |     expect(handleFocus).toHaveBeenCalled();
31 |   });
32 | 
33 |   it('blur() and onBlur', async () => {
34 |     jest.useRealTimers();
35 |     const handleBlur = jest.fn();
36 |     const { container } = render(<TextArea onBlur={handleBlur} />);
37 |     fireEvent.focus(container.firstChild);
38 |     fireEvent.blur(container.firstChild);
39 |     expect(handleBlur).toHaveBeenCalled();
40 |   });
41 | 
42 |   it('Ref: focus() and onFocus', () => {
43 |     const onFocus = jest.fn();
44 |     const ref = React.createRef<TextAreaRef>();
45 |     const { container } = render(
46 |       <div>
47 |         <TextArea onFocus={onFocus} ref={ref} />
48 |       </div>,
49 |     );
50 |     ref.current.focus();
51 |     expect(focused).toBeTruthy();
52 | 
53 |     fireEvent.focus(container.querySelector('textarea'));
54 |     expect(onFocus).toHaveBeenCalled();
55 |   });
56 | 
57 |   it('Ref: blur() and onBlur', async () => {
58 |     jest.useRealTimers();
59 |     const onBlur = jest.fn();
60 |     const ref = React.createRef<TextAreaRef>();
61 |     const { container } = render(
62 |       <div>
63 |         <TextArea onBlur={onBlur} ref={ref} />
64 |       </div>,
65 |     );
66 | 
67 |     ref.current.blur();
68 |     expect(blurred).toBeTruthy();
69 | 
70 |     fireEvent.blur(container.querySelector('textarea'));
71 |     expect(onBlur).toHaveBeenCalled();
72 |   });
73 | 
74 |   it('autoFocus', () => {
75 |     const handleFocus = jest.fn();
76 |     render(<TextArea autoFocus onFocus={handleFocus} />);
77 |     expect(focused).toBeTruthy();
78 |   });
79 | 
80 |   it('check className when onFocus and onBlur', () => {
81 |     const { container } = render(<TextArea allowClear />);
82 | 
83 |     fireEvent.focus(container.querySelector('textarea'));
84 |     expect(
85 |       document.querySelector('.rc-textarea-affix-wrapper-focused'),
86 |     ).toBeTruthy();
87 | 
88 |     fireEvent.blur(container.querySelector('textarea'));
89 |     expect(
90 |       container.querySelector('.rc-textarea-affix-wrapper-focused'),
91 |     ).toBeFalsy();
92 |   });
93 | });
94 | 


--------------------------------------------------------------------------------
/tests/index.spec.tsx:
--------------------------------------------------------------------------------
  1 | import { fireEvent, render } from '@testing-library/react';
  2 | import React from 'react';
  3 | import type { TextAreaProps, TextAreaRef } from '../src';
  4 | import TextArea from '../src';
  5 | import calculateAutoSizeStyle, {
  6 |   calculateNodeStyling,
  7 | } from '../src/calculateNodeHeight';
  8 | import { triggerResize, wait } from './utils';
  9 | 
 10 | describe('TextArea', () => {
 11 |   const originalGetComputedStyle = window.getComputedStyle;
 12 |   beforeAll(() => {
 13 |     Object.defineProperty(window, 'getComputedStyle', {
 14 |       value: (node) => ({
 15 |         getPropertyValue: (prop) => {
 16 |           if (prop === 'box-sizing') {
 17 |             return originalGetComputedStyle(node)[prop] || 'border-box';
 18 |           }
 19 |           return originalGetComputedStyle(node)[prop];
 20 |         },
 21 |       }),
 22 |     });
 23 |   });
 24 | 
 25 |   afterAll(() => {
 26 |     Object.defineProperty(window, 'getComputedStyle', {
 27 |       value: originalGetComputedStyle,
 28 |     });
 29 |   });
 30 | 
 31 |   beforeEach(() => {
 32 |     jest.useFakeTimers();
 33 |   });
 34 | 
 35 |   afterEach(() => {
 36 |     jest.clearAllTimers();
 37 |     jest.useRealTimers();
 38 |   });
 39 | 
 40 |   it('should work correctly on controlled mode', () => {
 41 |     const Demo = () => {
 42 |       const [value, setValue] = React.useState('111');
 43 |       return (
 44 |         <TextArea
 45 |           value={value}
 46 |           onChange={(e) => {
 47 |             setValue(e.target.value);
 48 |           }}
 49 |         />
 50 |       );
 51 |     };
 52 |     const { container } = render(<Demo />);
 53 |     const textarea = container.querySelector('textarea');
 54 |     expect(textarea.value).toBe('111');
 55 |     fireEvent.change(textarea, {
 56 |       target: {
 57 |         value: '222',
 58 |       },
 59 |     });
 60 |     expect(textarea.value).toBe('222');
 61 |   });
 62 | 
 63 |   it('should auto calculate height according to content length and autoSize property', async () => {
 64 |     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 65 |     const onInternalAutoSize = jest.fn();
 66 | 
 67 |     const renderDemo = (
 68 |       value = '',
 69 |       autoSize: TextAreaProps['autoSize'] = { minRows: 2, maxRows: 6 },
 70 |     ) => (
 71 |       <TextArea
 72 |         value={value}
 73 |         readOnly
 74 |         autoSize={autoSize}
 75 |         wrap="off"
 76 |         // @ts-ignore
 77 |         onInternalAutoSize={onInternalAutoSize}
 78 |       />
 79 |     );
 80 | 
 81 |     const { container, rerender } = render(renderDemo());
 82 | 
 83 |     await wait();
 84 |     onInternalAutoSize.mockRestore();
 85 | 
 86 |     rerender(renderDemo('1111\n2222\n3333'));
 87 |     await wait();
 88 |     expect(onInternalAutoSize).toHaveBeenCalledTimes(1);
 89 | 
 90 |     rerender(renderDemo('1111'));
 91 |     await wait();
 92 |     expect(onInternalAutoSize).toHaveBeenCalledTimes(2);
 93 | 
 94 |     rerender(renderDemo('1111', { minRows: 1, maxRows: 6 }));
 95 |     await wait();
 96 |     expect(onInternalAutoSize).toHaveBeenCalledTimes(3);
 97 | 
 98 |     rerender(renderDemo('1111', { minRows: 1, maxRows: 6 }));
 99 |     await wait();
100 |     expect(onInternalAutoSize).toHaveBeenCalledTimes(3);
101 | 
102 |     rerender(renderDemo('1111', { minRows: 1, maxRows: 12 }));
103 |     await wait();
104 |     expect(onInternalAutoSize).toHaveBeenCalledTimes(4);
105 | 
106 |     rerender(renderDemo('1111', true));
107 |     await wait();
108 |     expect(onInternalAutoSize).toHaveBeenCalledTimes(5);
109 | 
110 |     rerender(renderDemo('1111', false));
111 |     await wait();
112 |     expect(onInternalAutoSize).toHaveBeenCalledTimes(5);
113 | 
114 |     expect(container.querySelector('textarea')).not.toHaveStyle({
115 |       overflowY: 'hidden',
116 |     });
117 | 
118 |     expect(errorSpy).not.toHaveBeenCalled();
119 |   });
120 | 
121 |   it('should support onPressEnter and onKeyDown', () => {
122 |     const fakeHandleKeyDown = jest.fn();
123 |     const fakeHandlePressEnter = jest.fn();
124 |     const { container } = render(
125 |       <TextArea
126 |         onKeyDown={fakeHandleKeyDown}
127 |         onPressEnter={fakeHandlePressEnter}
128 |       />,
129 |     );
130 |     const textarea = container.querySelector('textarea');
131 |     /** keyCode 65 is A */
132 |     fireEvent.keyDown(textarea, { keyCode: 65 });
133 |     expect(fakeHandleKeyDown).toHaveBeenCalledTimes(1);
134 |     expect(fakeHandlePressEnter).toHaveBeenCalledTimes(0);
135 | 
136 |     /** keyCode 13 is Enter */
137 |     fireEvent.keyDown(textarea, { keyCode: 13 });
138 |     expect(fakeHandleKeyDown).toHaveBeenCalledTimes(2);
139 |     expect(fakeHandlePressEnter).toHaveBeenCalledTimes(1);
140 |   });
141 | 
142 |   it('should support disabled', () => {
143 |     const { container } = render(<TextArea disabled />);
144 |     expect(container.firstChild).toMatchSnapshot();
145 |   });
146 | 
147 |   it('should support maxLength', () => {
148 |     const { container } = render(<TextArea maxLength={10} />);
149 |     expect(container.firstChild).toMatchSnapshot();
150 |   });
151 | 
152 |   it('calculateNodeStyling works correctly', () => {
153 |     const wrapper = document.createElement('textarea');
154 |     wrapper.id = 'test';
155 |     wrapper.wrap = 'wrap';
156 |     calculateNodeStyling(wrapper, true);
157 |     const value = calculateNodeStyling(wrapper, true);
158 |     expect(value).toEqual({
159 |       borderSize: 2,
160 |       boxSizing: 'border-box',
161 |       paddingSize: 4,
162 |       sizingStyle:
163 |         'letter-spacing:normal;line-height:normal;padding-top:2px;padding-bottom:2px;font-family:-webkit-small-control;font-weight:;font-size:;font-variant:;text-rendering:auto;text-transform:none;width:;text-indent:0;padding-left:2px;padding-right:2px;border-width:1px;box-sizing:border-box;word-break:;white-space:pre-wrap',
164 |     });
165 |   });
166 | 
167 |   it('boxSizing === "border-box"', () => {
168 |     const wrapper = document.createElement('textarea');
169 |     wrapper.style.boxSizing = 'border-box';
170 |     const { height } = calculateAutoSizeStyle(wrapper);
171 |     expect(height).toBe(2);
172 |   });
173 | 
174 |   it('boxSizing === "content-box"', () => {
175 |     const wrapper = document.createElement('textarea');
176 |     wrapper.style.boxSizing = 'content-box';
177 |     const { height } = calculateAutoSizeStyle(wrapper);
178 |     expect(height).toBe(-4);
179 |   });
180 | 
181 |   it('minRows or maxRows is not null', () => {
182 |     const wrapper = document.createElement('textarea');
183 |     expect(calculateAutoSizeStyle(wrapper, false, 1, 1)).toEqual(
184 |       expect.objectContaining({
185 |         height: 2,
186 |         minHeight: 2,
187 |         overflowY: 'hidden',
188 |         resize: 'none',
189 |       }),
190 |     );
191 |     wrapper.style.boxSizing = 'content-box';
192 |     expect(calculateAutoSizeStyle(wrapper, false, 1, 1)).toEqual(
193 |       expect.objectContaining({
194 |         height: -4,
195 |         minHeight: -4,
196 |         overflowY: 'hidden',
197 |         resize: 'none',
198 |       }),
199 |     );
200 |   });
201 | 
202 |   it('handleKeyDown', () => {
203 |     const onPressEnter = jest.fn();
204 |     const onKeyDown = jest.fn();
205 |     const { container } = render(
206 |       <TextArea
207 |         onPressEnter={onPressEnter}
208 |         onKeyDown={onKeyDown}
209 |         aria-label="textarea"
210 |       />,
211 |     );
212 |     fireEvent.keyDown(container.querySelector('textarea'), { keyCode: 13 });
213 |     expect(onPressEnter).toHaveBeenCalled();
214 |     expect(onKeyDown).toHaveBeenCalled();
215 |   });
216 | 
217 |   it('should trigger onResize', async () => {
218 |     const onResize = jest.fn();
219 |     const { container } = render(<TextArea onResize={onResize} autoSize />);
220 |     await wait();
221 | 
222 |     triggerResize(container.querySelector('textarea'));
223 |     await wait();
224 | 
225 |     expect(onResize).toHaveBeenCalledWith(
226 |       expect.objectContaining({
227 |         width: expect.any(Number),
228 |         height: expect.any(Number),
229 |       }),
230 |     );
231 |   });
232 | 
233 |   it('scroll to bottom when autoSize', async () => {
234 |     const { container, unmount } = render(<TextArea autoSize />);
235 |     container.querySelector('textarea').focus();
236 |     expect(document.activeElement).toBe(container.querySelector('textarea'));
237 | 
238 |     const setSelectionRangeFn = jest.spyOn(
239 |       container.querySelector('textarea'),
240 |       'setSelectionRange',
241 |     );
242 | 
243 |     fireEvent.change(container.querySelector('textarea'), {
244 |       target: { value: '\n1' },
245 |     });
246 | 
247 |     await wait();
248 | 
249 |     expect(setSelectionRangeFn).toHaveBeenCalled();
250 |     unmount();
251 |   });
252 | 
253 |   it('should support onPressEnter and onKeyDown', () => {
254 |     const fakeHandleKeyDown = jest.fn();
255 |     const fakeHandlePressEnter = jest.fn();
256 |     const { container } = render(
257 |       <TextArea
258 |         onKeyDown={fakeHandleKeyDown}
259 |         onPressEnter={fakeHandlePressEnter}
260 |       />,
261 |     );
262 |     /** KeyCode 65 is A */
263 |     fireEvent.keyDown(container.querySelector('textarea')!, { key: 'A' });
264 |     expect(fakeHandleKeyDown).toHaveBeenCalledTimes(1);
265 |     expect(fakeHandlePressEnter).toHaveBeenCalledTimes(0);
266 | 
267 |     /** KeyCode 13 is Enter */
268 |     fireEvent.keyDown(container.querySelector('textarea')!, { key: 'Enter' });
269 |     expect(fakeHandleKeyDown).toHaveBeenCalledTimes(2);
270 |     expect(fakeHandlePressEnter).toHaveBeenCalledTimes(1);
271 |   });
272 | 
273 |   it('classNames and styles should work', () => {
274 |     const { container } = render(
275 |       <>
276 |         <TextArea
277 |           className="custom-class"
278 |           style={{ background: 'red' }}
279 |           classNames={{
280 |             textarea: 'custom-textarea',
281 |             count: 'custom-count',
282 |           }}
283 |           styles={{
284 |             textarea: {
285 |               color: 'red',
286 |             },
287 |             count: {
288 |               color: 'blue',
289 |             },
290 |           }}
291 |         />
292 |         <TextArea
293 |           showCount
294 |           className="custom-class"
295 |           style={{ background: 'red' }}
296 |           classNames={{
297 |             textarea: 'custom-textarea',
298 |             count: 'custom-count',
299 |           }}
300 |           styles={{
301 |             textarea: {
302 |               color: 'red',
303 |             },
304 |             count: {
305 |               color: 'blue',
306 |             },
307 |           }}
308 |         />
309 |       </>,
310 |     );
311 |     expect(container).toMatchSnapshot();
312 |   });
313 | 
314 |   it('should be resized with textarea', async () => {
315 |     const onResize = jest.fn();
316 |     const { container } = render(
317 |       <TextArea onResize={onResize} showCount style={{ height: 200 }} />,
318 |     );
319 |     await wait();
320 |     expect(
321 |       (container.querySelector('.rc-textarea-affix-wrapper') as HTMLDivElement)
322 |         .style.height,
323 |     ).toBe('200px');
324 | 
325 |     triggerResize(container.querySelector('textarea'), { height: 1000 });
326 |     await wait();
327 |     expect(onResize).toHaveBeenCalledTimes(1);
328 |     expect(
329 |       (container.querySelector('.rc-textarea-affix-wrapper') as HTMLDivElement)
330 |         .style.height,
331 |     ).toBe('auto');
332 |   });
333 | 
334 |   it('pass style height should work', async () => {
335 |     const onResize = jest.fn();
336 | 
337 |     const { container } = render(
338 |       <TextArea onResize={onResize} style={{ height: 93 }} />,
339 |     );
340 | 
341 |     triggerResize(container.querySelector('textarea'));
342 |     await wait();
343 | 
344 |     expect(onResize).toHaveBeenCalled();
345 | 
346 |     expect(container.querySelector('textarea')).toHaveStyle({
347 |       height: '903px',
348 |     });
349 |   });
350 | 
351 |   it('support bigint type', () => {
352 |     const { container } = render(<TextArea value={BigInt('903')} autoSize />);
353 |     expect(container.querySelector('textarea').value).toBe('903');
354 |   });
355 | 
356 |   describe('ref.nativeElement', () => {
357 |     it('textarea', () => {
358 |       const ref = React.createRef<TextAreaRef>();
359 |       const { container } = render(
360 |         <div>
361 |           <TextArea ref={ref} />
362 |         </div>,
363 |       );
364 | 
365 |       expect(ref.current.nativeElement).toEqual(
366 |         container.querySelector('textarea'),
367 |       );
368 |     });
369 | 
370 |     it('holder', () => {
371 |       const ref = React.createRef<TextAreaRef>();
372 |       const { container } = render(
373 |         <div>
374 |           <TextArea ref={ref} allowClear />
375 |         </div>,
376 |       );
377 | 
378 |       expect(ref.current.nativeElement).toEqual(
379 |         container.querySelector('.rc-textarea-affix-wrapper'),
380 |       );
381 |     });
382 |   });
383 | });
384 | 


--------------------------------------------------------------------------------
/tests/setup.ts:
--------------------------------------------------------------------------------
1 | // Mock ResizeObserver
2 | global.ResizeObserver = class ResizeObserver {
3 |   observe() {}
4 |   unobserve() {}
5 |   disconnect() {}
6 | };
7 | 


--------------------------------------------------------------------------------
/tests/setupFilesAfterEnv.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 | 
3 | window.requestAnimationFrame = window.setTimeout;
4 | window.cancelAnimationFrame = window.clearTimeout;
5 | 


--------------------------------------------------------------------------------
/tests/showCount.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render } from '@testing-library/react';
 2 | import React from 'react';
 3 | import TextArea from '../src';
 4 | 
 5 | describe('should support showCount', () => {
 6 |   it('maxLength', () => {
 7 |     const { container } = render(
 8 |       <TextArea maxLength={5} showCount value="12345" />,
 9 |     );
10 |     expect(container.querySelector('textarea')?.value).toBe('12345');
11 |     expect(
12 |       container
13 |         .querySelector('.rc-textarea-show-count')
14 |         ?.getAttribute('data-count'),
15 |     ).toBe('5 / 5');
16 |     expect(container.querySelector('.rc-textarea-data-count')?.innerHTML).toBe(
17 |       '5 / 5',
18 |     );
19 |   });
20 | 
21 |   it('control exceed maxLength', () => {
22 |     const { container } = render(
23 |       <TextArea maxLength={5} showCount value="12345678" />,
24 |     );
25 |     expect(container.querySelector('textarea')?.value).toBe('12345678');
26 |     expect(
27 |       container
28 |         .querySelector('.rc-textarea-show-count')
29 |         ?.getAttribute('data-count'),
30 |     ).toBe('8 / 5');
31 |     expect(container.querySelector('.rc-textarea-data-count')?.innerHTML).toBe(
32 |       '8 / 5',
33 |     );
34 |   });
35 | 
36 |   it('should support object', () => {
37 |     const { container } = render(
38 |       <TextArea
39 |         maxLength={5}
40 |         showCount={{
41 |           formatter: ({ value, count, maxLength }) =>
42 |             `${value}, ${count}, ${maxLength}`,
43 |         }}
44 |         value="12345"
45 |       />,
46 |     );
47 |     expect(container.querySelector('textarea')?.value).toBe('12345');
48 |     expect(
49 |       container
50 |         .querySelector('.rc-textarea-show-count')
51 |         ?.getAttribute('data-count'),
52 |     ).toBe('12345, 5, 5');
53 |     expect(container.querySelector('.rc-textarea-data-count')?.innerHTML).toBe(
54 |       '12345, 5, 5',
55 |     );
56 |   });
57 | 
58 |   it('className & style patch to outer', () => {
59 |     const { container } = render(
60 |       <TextArea className="bamboo" style={{ background: 'red' }} showCount />,
61 |     );
62 | 
63 |     // Outer
64 |     expect(
65 |       container.querySelector('span')?.classList.contains('bamboo'),
66 |     ).toBeTruthy();
67 |     expect(container.querySelector('span')?.style.background).toEqual('red');
68 | 
69 |     // Inner
70 |     expect(
71 |       container.querySelector('.rc-textarea')?.classList.contains('bamboo'),
72 |     ).toBeFalsy();
73 |     expect(
74 |       container.querySelector<HTMLDivElement>('.rc-textarea')?.style.background,
75 |     ).toBeFalsy();
76 |   });
77 | });
78 | 


--------------------------------------------------------------------------------
/tests/utils.ts:
--------------------------------------------------------------------------------
 1 | import { act } from '@testing-library/react';
 2 | import {
 3 |   _rs as onEsResize,
 4 |   _rs as onLibResize,
 5 | } from '@rc-component/resize-observer/lib/utils/observerUtil';
 6 | 
 7 | export function triggerResize(
 8 |   target,
 9 |   size?: { width?: number; height?: number },
10 | ) {
11 |   const { width = 510, height = 903 } = size || {};
12 |   const originGetBoundingClientRect = target.getBoundingClientRect;
13 | 
14 |   target.getBoundingClientRect = () => ({ width, height });
15 |   // @ts-ignore
16 |   onLibResize([{ target }]);
17 |   // @ts-ignore
18 |   onEsResize([{ target }]);
19 | 
20 |   target.style.height = `${height}px`;
21 |   target.getBoundingClientRect = originGetBoundingClientRect;
22 | }
23 | 
24 | export async function wait() {
25 |   for (let i = 0; i < 100; i += 1) {
26 |     await act(async () => {
27 |       jest.runAllTimers();
28 |       await Promise.resolve();
29 |     });
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "moduleResolution": "node",
 5 |     "baseUrl": "./",
 6 |     "jsx": "react",
 7 |     "declaration": true,
 8 |     "skipLibCheck": true,
 9 |     "esModuleInterop": true,
10 |     "paths": {
11 |       "@/*": ["src/*"],
12 |       "@@/*": [".dumi/tmp/*"],
13 |       "@rc-component/textarea": ["src/index.tsx"]
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------