@rescui/textarea 0.10.2-RUI-285-Support-blur-for-glow-hover-6f393bc1.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/_virtual/index.css.js +12 -12
  2. package/lib/index.css +228 -344
  3. package/lib/index.d.ts +4 -0
  4. package/lib/public-api.p.css +0 -215
  5. package/lib/public-api.pcss +0 -215
  6. package/lib/textarea.d.ts +9 -0
  7. package/lib/textarea.js +21 -12
  8. package/lib/textarea.p.module.css.js +21 -20
  9. package/lib/use-backward-compatible-id.d.ts +4 -0
  10. package/lib/use-backward-compatible-id.js +14 -0
  11. package/package.json +7 -6
  12. package/lib/_virtual/warning.js +0 -106
package/lib/index.d.ts CHANGED
@@ -9,6 +9,7 @@ declare const DefaultTextarea: import("react").ForwardRefExoticComponent<Omit<im
9
9
  className?: string;
10
10
  disabled?: boolean;
11
11
  error?: import("react").ReactNode;
12
+ reserveErrorLine?: boolean;
12
13
  busy?: boolean;
13
14
  name?: string;
14
15
  onChange?: import("react").ChangeEventHandler<HTMLTextAreaElement>;
@@ -29,6 +30,7 @@ declare const DefaultTextarea: import("react").ForwardRefExoticComponent<Omit<im
29
30
  textareaRef?: import("react").Ref<HTMLTextAreaElement>;
30
31
  enableClear?: boolean;
31
32
  boldLabel?: boolean;
33
+ characterCounter?: import("react").ReactNode;
32
34
  }> & {
33
35
  id?: string;
34
36
  autoComplete?: import("./textarea").TextareaAutoComplete;
@@ -36,6 +38,7 @@ declare const DefaultTextarea: import("react").ForwardRefExoticComponent<Omit<im
36
38
  className?: string;
37
39
  disabled?: boolean;
38
40
  error?: import("react").ReactNode;
41
+ reserveErrorLine?: boolean;
39
42
  busy?: boolean;
40
43
  name?: string;
41
44
  onChange?: import("react").ChangeEventHandler<HTMLTextAreaElement>;
@@ -56,6 +59,7 @@ declare const DefaultTextarea: import("react").ForwardRefExoticComponent<Omit<im
56
59
  textareaRef?: import("react").Ref<HTMLTextAreaElement>;
57
60
  enableClear?: boolean;
58
61
  boldLabel?: boolean;
62
+ characterCounter?: import("react").ReactNode;
59
63
  } & import("react").RefAttributes<HTMLLabelElement>>;
60
64
  export default DefaultTextarea;
61
65
  export { Textarea } from './textarea';
package/lib/public-api.p.css CHANGED
@@ -2,7 +2,6 @@
2
2
  &:not(html){
3
3
  --_rs-textarea-vertical-padding:6px;
4
4
  --_rs-textarea-horizontal-padding:8px;
5
- --_rs-textarea-parts-offset:4px;
6
5
  }
7
6
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
8
7
  --_rs-icons-height:20px;
@@ -109,80 +108,11 @@
109
108
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
110
109
  --_rs-typography-link-border-bottom-width-from-text:2px;
111
110
  }
112
- &:not(html) [data-rs-internal='textarea__note']{
113
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
114
- --_rs-typography-text-transform:initial;
115
- --_rs-typography-font-variant-numeric:initial;
116
- --_rs-typography-font-family:var(
117
- --rs-font-family-ui,
118
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
119
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
120
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
121
- );
122
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
123
- --_rs-typography-font-weight:var(
124
- --rs-font-weight-regular,
125
- 400
126
- );
127
- --_rs-typography-line-height:var(
128
- --rs-text-3-line-height,
129
- 20px
130
- );
131
- --_rs-typography-base-color:var(
132
- --_rs-typography-hardness-color,
133
- var(
134
- --rs-color-average,
135
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
136
- )
137
- );
138
- --_rs-typography-text-auto-offset:8px;
139
- --_rs-typography-ul-list-li-padding-left:28px;
140
- --_rs-typography-ol-list-li-padding-left:21px;
141
- --_rs-typography-list-li-margin-top-from-text:8px;
142
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
143
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
144
- --_rs-typography-link-border-bottom-width-from-text:1px;
145
- }
146
- &:not(html) [data-rs-internal='textarea__error-message']{
147
- --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
148
- --_rs-typography-text-transform:initial;
149
- --_rs-typography-font-variant-numeric:initial;
150
- --_rs-typography-font-family:var(
151
- --rs-font-family-ui,
152
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
153
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
154
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
155
- );
156
- --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
157
- --_rs-typography-font-weight:var(
158
- --rs-font-weight-semi-bold,
159
- 600
160
- );
161
- --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
162
- --_rs-typography-base-color:var(
163
- --_rs-typography-heading-hardness-color,
164
- var(
165
- --rs-color-hard,
166
- rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
167
- )
168
- );
169
- --_rs-typography-text-auto-offset:0;
170
- --_rs-typography-ul-list-li-padding-left:initial;
171
- --_rs-typography-ol-list-li-padding-left:initial;
172
- --_rs-typography-list-li-margin-top-from-text:initial;
173
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
174
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
175
- --_rs-typography-link-border-bottom-width-from-text:2px;
176
- }
177
- &:not(html) [data-rs-internal='textarea__error-icon']:not(html){
178
- --_rs-icons-height:20px;
179
- }
180
111
  }
181
112
  @define-mixin rs-textarea-size-m{
182
113
  &:not(html){
183
114
  --_rs-textarea-vertical-padding:8px;
184
115
  --_rs-textarea-horizontal-padding:8px;
185
- --_rs-textarea-parts-offset:8px;
186
116
  }
187
117
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
188
118
  --_rs-icons-height:24px;
@@ -308,80 +238,11 @@
308
238
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
309
239
  --_rs-typography-link-border-bottom-width-from-text:2px;
310
240
  }
311
- &:not(html) [data-rs-internal='textarea__note']{
312
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
313
- --_rs-typography-text-transform:initial;
314
- --_rs-typography-font-variant-numeric:initial;
315
- --_rs-typography-font-family:var(
316
- --rs-font-family-ui,
317
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
318
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
319
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
320
- );
321
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
322
- --_rs-typography-font-weight:var(
323
- --rs-font-weight-regular,
324
- 400
325
- );
326
- --_rs-typography-line-height:var(
327
- --rs-text-3-line-height,
328
- 20px
329
- );
330
- --_rs-typography-base-color:var(
331
- --_rs-typography-hardness-color,
332
- var(
333
- --rs-color-average,
334
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
335
- )
336
- );
337
- --_rs-typography-text-auto-offset:8px;
338
- --_rs-typography-ul-list-li-padding-left:28px;
339
- --_rs-typography-ol-list-li-padding-left:21px;
340
- --_rs-typography-list-li-margin-top-from-text:8px;
341
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
342
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
343
- --_rs-typography-link-border-bottom-width-from-text:1px;
344
- }
345
- &:not(html) [data-rs-internal='textarea__error-message']{
346
- --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
347
- --_rs-typography-text-transform:initial;
348
- --_rs-typography-font-variant-numeric:initial;
349
- --_rs-typography-font-family:var(
350
- --rs-font-family-ui,
351
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
352
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
353
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
354
- );
355
- --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
356
- --_rs-typography-font-weight:var(
357
- --rs-font-weight-semi-bold,
358
- 600
359
- );
360
- --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
361
- --_rs-typography-base-color:var(
362
- --_rs-typography-heading-hardness-color,
363
- var(
364
- --rs-color-hard,
365
- rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
366
- )
367
- );
368
- --_rs-typography-text-auto-offset:0;
369
- --_rs-typography-ul-list-li-padding-left:initial;
370
- --_rs-typography-ol-list-li-padding-left:initial;
371
- --_rs-typography-list-li-margin-top-from-text:initial;
372
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
373
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
374
- --_rs-typography-link-border-bottom-width-from-text:2px;
375
- }
376
- &:not(html) [data-rs-internal='textarea__error-icon']:not(html){
377
- --_rs-icons-height:20px;
378
- }
379
241
  }
380
242
  @define-mixin rs-textarea-size-l{
381
243
  &:not(html){
382
244
  --_rs-textarea-vertical-padding:12px;
383
245
  --_rs-textarea-horizontal-padding:16px;
384
- --_rs-textarea-parts-offset:8px;
385
246
  }
386
247
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
387
248
  --_rs-icons-height:28px;
@@ -507,82 +368,6 @@
507
368
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
508
369
  --_rs-typography-link-border-bottom-width-from-text:2px;
509
370
  }
510
- &:not(html) [data-rs-internal='textarea__note']{
511
- --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
512
- --_rs-typography-text-transform:initial;
513
- --_rs-typography-font-variant-numeric:initial;
514
- --_rs-typography-font-family:var(
515
- --rs-font-family-ui,
516
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
517
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
518
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
519
- );
520
- --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
521
- --_rs-typography-font-weight:var(
522
- --rs-font-weight-regular,
523
- 400
524
- );
525
- --_rs-typography-line-height:var(
526
- --rs-text-2-line-height,
527
- 24px
528
- );
529
- --_rs-typography-base-color:var(
530
- --_rs-typography-hardness-color,
531
- var(
532
- --rs-color-average,
533
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
534
- )
535
- );
536
- --_rs-typography-text-auto-offset:16px;
537
- --_rs-typography-ul-list-li-padding-left:22px;
538
- --_rs-typography-ol-list-li-padding-left:26px;
539
- --_rs-typography-list-li-margin-top-from-text:var(
540
- --_rs-typography-text-2-sm-list-li-margin-top-from-text,
541
- 16px
542
- );
543
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
544
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
545
- --_rs-typography-link-border-bottom-width-from-text:1px;
546
- }
547
- @media screen and (max-width: 640px){
548
- &:not(html) [data-rs-internal='textarea__note']{
549
- --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
550
- }
551
- }
552
- &:not(html) [data-rs-internal='textarea__error-message']{
553
- --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
554
- --_rs-typography-text-transform:initial;
555
- --_rs-typography-font-variant-numeric:initial;
556
- --_rs-typography-font-family:var(
557
- --rs-font-family-ui,
558
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
559
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
560
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
561
- );
562
- --_rs-typography-font-size:var(--rs-h4-font-size, 16px);
563
- --_rs-typography-font-weight:var(
564
- --rs-font-weight-semi-bold,
565
- 600
566
- );
567
- --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
568
- --_rs-typography-base-color:var(
569
- --_rs-typography-heading-hardness-color,
570
- var(
571
- --rs-color-hard,
572
- rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
573
- )
574
- );
575
- --_rs-typography-text-auto-offset:0;
576
- --_rs-typography-ul-list-li-padding-left:initial;
577
- --_rs-typography-ol-list-li-padding-left:initial;
578
- --_rs-typography-list-li-margin-top-from-text:initial;
579
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
580
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
581
- --_rs-typography-link-border-bottom-width-from-text:2px;
582
- }
583
- &:not(html) [data-rs-internal='textarea__error-icon']:not(html){
584
- --_rs-icons-height:24px;
585
- }
586
371
  }
587
372
  @define-mixin rs-textarea-mode-classic{
588
373
  &:not(html){
package/lib/public-api.pcss CHANGED
@@ -2,7 +2,6 @@
2
2
  &:not(html){
3
3
  --_rs-textarea-vertical-padding:6px;
4
4
  --_rs-textarea-horizontal-padding:8px;
5
- --_rs-textarea-parts-offset:4px;
6
5
  }
7
6
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
8
7
  --_rs-icons-height:20px;
@@ -109,80 +108,11 @@
109
108
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
110
109
  --_rs-typography-link-border-bottom-width-from-text:2px;
111
110
  }
112
- &:not(html) [data-rs-internal='textarea__note']{
113
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
114
- --_rs-typography-text-transform:initial;
115
- --_rs-typography-font-variant-numeric:initial;
116
- --_rs-typography-font-family:var(
117
- --rs-font-family-ui,
118
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
119
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
120
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
121
- );
122
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
123
- --_rs-typography-font-weight:var(
124
- --rs-font-weight-regular,
125
- 400
126
- );
127
- --_rs-typography-line-height:var(
128
- --rs-text-3-line-height,
129
- 20px
130
- );
131
- --_rs-typography-base-color:var(
132
- --_rs-typography-hardness-color,
133
- var(
134
- --rs-color-average,
135
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
136
- )
137
- );
138
- --_rs-typography-text-auto-offset:8px;
139
- --_rs-typography-ul-list-li-padding-left:28px;
140
- --_rs-typography-ol-list-li-padding-left:21px;
141
- --_rs-typography-list-li-margin-top-from-text:8px;
142
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
143
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
144
- --_rs-typography-link-border-bottom-width-from-text:1px;
145
- }
146
- &:not(html) [data-rs-internal='textarea__error-message']{
147
- --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
148
- --_rs-typography-text-transform:initial;
149
- --_rs-typography-font-variant-numeric:initial;
150
- --_rs-typography-font-family:var(
151
- --rs-font-family-ui,
152
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
153
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
154
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
155
- );
156
- --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
157
- --_rs-typography-font-weight:var(
158
- --rs-font-weight-semi-bold,
159
- 600
160
- );
161
- --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
162
- --_rs-typography-base-color:var(
163
- --_rs-typography-heading-hardness-color,
164
- var(
165
- --rs-color-hard,
166
- rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
167
- )
168
- );
169
- --_rs-typography-text-auto-offset:0;
170
- --_rs-typography-ul-list-li-padding-left:initial;
171
- --_rs-typography-ol-list-li-padding-left:initial;
172
- --_rs-typography-list-li-margin-top-from-text:initial;
173
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
174
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
175
- --_rs-typography-link-border-bottom-width-from-text:2px;
176
- }
177
- &:not(html) [data-rs-internal='textarea__error-icon']:not(html){
178
- --_rs-icons-height:20px;
179
- }
180
111
  }
181
112
  @define-mixin rs-textarea-size-m{
182
113
  &:not(html){
183
114
  --_rs-textarea-vertical-padding:8px;
184
115
  --_rs-textarea-horizontal-padding:8px;
185
- --_rs-textarea-parts-offset:8px;
186
116
  }
187
117
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
188
118
  --_rs-icons-height:24px;
@@ -308,80 +238,11 @@
308
238
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
309
239
  --_rs-typography-link-border-bottom-width-from-text:2px;
310
240
  }
311
- &:not(html) [data-rs-internal='textarea__note']{
312
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
313
- --_rs-typography-text-transform:initial;
314
- --_rs-typography-font-variant-numeric:initial;
315
- --_rs-typography-font-family:var(
316
- --rs-font-family-ui,
317
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
318
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
319
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
320
- );
321
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
322
- --_rs-typography-font-weight:var(
323
- --rs-font-weight-regular,
324
- 400
325
- );
326
- --_rs-typography-line-height:var(
327
- --rs-text-3-line-height,
328
- 20px
329
- );
330
- --_rs-typography-base-color:var(
331
- --_rs-typography-hardness-color,
332
- var(
333
- --rs-color-average,
334
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
335
- )
336
- );
337
- --_rs-typography-text-auto-offset:8px;
338
- --_rs-typography-ul-list-li-padding-left:28px;
339
- --_rs-typography-ol-list-li-padding-left:21px;
340
- --_rs-typography-list-li-margin-top-from-text:8px;
341
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
342
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
343
- --_rs-typography-link-border-bottom-width-from-text:1px;
344
- }
345
- &:not(html) [data-rs-internal='textarea__error-message']{
346
- --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
347
- --_rs-typography-text-transform:initial;
348
- --_rs-typography-font-variant-numeric:initial;
349
- --_rs-typography-font-family:var(
350
- --rs-font-family-ui,
351
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
352
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
353
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
354
- );
355
- --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
356
- --_rs-typography-font-weight:var(
357
- --rs-font-weight-semi-bold,
358
- 600
359
- );
360
- --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
361
- --_rs-typography-base-color:var(
362
- --_rs-typography-heading-hardness-color,
363
- var(
364
- --rs-color-hard,
365
- rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
366
- )
367
- );
368
- --_rs-typography-text-auto-offset:0;
369
- --_rs-typography-ul-list-li-padding-left:initial;
370
- --_rs-typography-ol-list-li-padding-left:initial;
371
- --_rs-typography-list-li-margin-top-from-text:initial;
372
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
373
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
374
- --_rs-typography-link-border-bottom-width-from-text:2px;
375
- }
376
- &:not(html) [data-rs-internal='textarea__error-icon']:not(html){
377
- --_rs-icons-height:20px;
378
- }
379
241
  }
380
242
  @define-mixin rs-textarea-size-l{
381
243
  &:not(html){
382
244
  --_rs-textarea-vertical-padding:12px;
383
245
  --_rs-textarea-horizontal-padding:16px;
384
- --_rs-textarea-parts-offset:8px;
385
246
  }
386
247
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
387
248
  --_rs-icons-height:28px;
@@ -507,82 +368,6 @@
507
368
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
508
369
  --_rs-typography-link-border-bottom-width-from-text:2px;
509
370
  }
510
- &:not(html) [data-rs-internal='textarea__note']{
511
- --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
512
- --_rs-typography-text-transform:initial;
513
- --_rs-typography-font-variant-numeric:initial;
514
- --_rs-typography-font-family:var(
515
- --rs-font-family-ui,
516
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
517
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
518
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
519
- );
520
- --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
521
- --_rs-typography-font-weight:var(
522
- --rs-font-weight-regular,
523
- 400
524
- );
525
- --_rs-typography-line-height:var(
526
- --rs-text-2-line-height,
527
- 24px
528
- );
529
- --_rs-typography-base-color:var(
530
- --_rs-typography-hardness-color,
531
- var(
532
- --rs-color-average,
533
- rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
534
- )
535
- );
536
- --_rs-typography-text-auto-offset:16px;
537
- --_rs-typography-ul-list-li-padding-left:22px;
538
- --_rs-typography-ol-list-li-padding-left:26px;
539
- --_rs-typography-list-li-margin-top-from-text:var(
540
- --_rs-typography-text-2-sm-list-li-margin-top-from-text,
541
- 16px
542
- );
543
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
544
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
545
- --_rs-typography-link-border-bottom-width-from-text:1px;
546
- }
547
- @media screen and (max-width: 640px){
548
- &:not(html) [data-rs-internal='textarea__note']{
549
- --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
550
- }
551
- }
552
- &:not(html) [data-rs-internal='textarea__error-message']{
553
- --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
554
- --_rs-typography-text-transform:initial;
555
- --_rs-typography-font-variant-numeric:initial;
556
- --_rs-typography-font-family:var(
557
- --rs-font-family-ui,
558
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
559
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
560
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
561
- );
562
- --_rs-typography-font-size:var(--rs-h4-font-size, 16px);
563
- --_rs-typography-font-weight:var(
564
- --rs-font-weight-semi-bold,
565
- 600
566
- );
567
- --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
568
- --_rs-typography-base-color:var(
569
- --_rs-typography-heading-hardness-color,
570
- var(
571
- --rs-color-hard,
572
- rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
573
- )
574
- );
575
- --_rs-typography-text-auto-offset:0;
576
- --_rs-typography-ul-list-li-padding-left:initial;
577
- --_rs-typography-ol-list-li-padding-left:initial;
578
- --_rs-typography-list-li-margin-top-from-text:initial;
579
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
580
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
581
- --_rs-typography-link-border-bottom-width-from-text:2px;
582
- }
583
- &:not(html) [data-rs-internal='textarea__error-icon']:not(html){
584
- --_rs-icons-height:24px;
585
- }
586
371
  }
587
372
  @define-mixin rs-textarea-mode-classic{
588
373
  &:not(html){
package/lib/textarea.d.ts CHANGED
@@ -23,6 +23,11 @@ declare type TextareaExclusiveProps = {
23
23
  * Error message to show
24
24
  */
25
25
  error?: React.ReactNode;
26
+ /**
27
+ * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
28
+ * If `false`, there will be no reservation.
29
+ */
30
+ reserveErrorLine?: boolean;
26
31
  /**
27
32
  * Set loading state
28
33
  */
@@ -88,6 +93,10 @@ declare type TextareaExclusiveProps = {
88
93
  textareaRef?: React.Ref<HTMLTextAreaElement>;
89
94
  enableClear?: boolean;
90
95
  boldLabel?: boolean;
96
+ /**
97
+ * Character counter slot
98
+ */
99
+ characterCounter?: React.ReactNode;
91
100
  };
92
101
  export declare type TextareaProps = Omit<TextareaAutosizeProps, keyof TextareaExclusiveProps> & TextareaExclusiveProps;
93
102
  export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaAutosizeProps, keyof TextareaExclusiveProps> & TextareaExclusiveProps & React.RefAttributes<HTMLLabelElement>>;
package/lib/textarea.js CHANGED
@@ -3,9 +3,10 @@ import React, { useState } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import TextareaAutosize from 'react-textarea-autosize';
5
5
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
6
+ import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
6
7
  import cn from 'classnames';
7
- import WarningIcon from './_virtual/warning.js';
8
8
  import LoadingOutlineIcon from './_virtual/loading-outline.js';
9
+ import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
9
10
  import styles from './textarea.p.module.css.js';
10
11
  const SIZE_STYLES = {
11
12
  s: styles.sizeS,
@@ -27,6 +28,7 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
27
28
  className,
28
29
  disabled,
29
30
  error,
31
+ reserveErrorLine = false,
30
32
  busy,
31
33
  onChange,
32
34
  size = 'm',
@@ -36,13 +38,17 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
36
38
  value,
37
39
  tabIndex,
38
40
  label,
39
- boldLabel = false,
41
+ boldLabel = true,
40
42
  note,
43
+ characterCounter,
41
44
  ...restProps
42
45
  } = _ref;
43
46
  const theme = useThemeWithUndefined(themeFromProps);
44
47
  const isEmpty = !value;
45
48
  const [focused, setFocused] = useState(false);
49
+ const uniqueId = `textarea-${useBackwardCompatibleId()}`;
50
+ const errorId = `${id ? id : uniqueId}-error`;
51
+ const hasFooter = Boolean(note) || Boolean(characterCounter) || shouldRenderErrorMessage(error, reserveErrorLine);
46
52
  return /*#__PURE__*/React.createElement("label", {
47
53
  ref: ref,
48
54
  className: cn(styles.labelWrapper, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], !!error && styles.error, disabled ? styles.disabled : styles.enabled, focused && styles.focused, boldLabel && styles.boldLabel, isEmpty ? styles.empty : styles.filled, className),
@@ -62,7 +68,8 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
62
68
  value: value,
63
69
  onChange: onChange,
64
70
  ref: textareaRef,
65
- "aria-invalid": !!error,
71
+ "aria-errormessage": error ? errorId : undefined,
72
+ "aria-invalid": Boolean(error),
66
73
  tabIndex: disabled ? -1 : tabIndex,
67
74
  "data-test": 'textarea__input',
68
75
  "data-rs-internal": "textarea__inner"
@@ -72,19 +79,20 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
72
79
  "data-test": "textarea__busy-icon",
73
80
  "data-rs-internal": "textarea__busy-icon",
74
81
  "data-render-all-sizes": true
75
- }))), error && typeof error !== 'boolean' && /*#__PURE__*/React.createElement("div", {
82
+ }))), hasFooter && /*#__PURE__*/React.createElement("div", {
83
+ className: styles.footer
84
+ }, characterCounter && /*#__PURE__*/React.createElement("div", {
85
+ className: styles.characterCounter
86
+ }, characterCounter), /*#__PURE__*/React.createElement(ErrorMessage, {
87
+ id: errorId,
76
88
  className: styles.errorMessage,
77
89
  "data-test": 'textarea__error',
78
- "data-rs-internal": "textarea__error-message"
79
- }, /*#__PURE__*/React.createElement(WarningIcon, {
80
- className: styles.errorIcon,
81
- "data-rs-internal": "textarea__error-icon",
82
- "data-render-all-sizes": true
83
- }), /*#__PURE__*/React.createElement("span", null, error)), note && /*#__PURE__*/React.createElement("div", {
90
+ reserveLine: reserveErrorLine
91
+ }, error), note && /*#__PURE__*/React.createElement("div", {
84
92
  className: styles.note,
85
93
  "data-test": 'textarea__note',
86
94
  "data-rs-internal": "textarea__note"
87
- }, note));
95
+ }, note)));
88
96
  });
89
97
  Textarea.displayName = 'Textarea';
90
98
  Textarea.propTypes = {
@@ -93,7 +101,7 @@ Textarea.propTypes = {
93
101
  placeholder: PropTypes.string,
94
102
  disabled: PropTypes.bool,
95
103
  busy: PropTypes.bool,
96
- error: PropTypes.node,
104
+ error: ErrorMessage.propTypes.children,
97
105
  onChange: PropTypes.func,
98
106
  onFocus: PropTypes.func,
99
107
  onBlur: PropTypes.func,
@@ -105,6 +113,7 @@ Textarea.propTypes = {
105
113
  maxRows: PropTypes.number,
106
114
  label: PropTypes.node,
107
115
  note: PropTypes.node,
116
+ characterCounter: PropTypes.node,
108
117
  boldLabel: PropTypes.bool
109
118
  };
110
119
  export { Textarea };