@rescui/input 0.14.5-RUI-286-Fix-tooltip-stacking-f4145b01.1 → 0.15.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.
package/lib/index.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const DefaultInput: import("react").ForwardRefExoticComponent<{
8
8
  placeholder?: string;
9
9
  disabled?: boolean;
10
10
  error?: import("react").ReactNode;
11
+ reserveErrorLine?: boolean;
11
12
  busy?: boolean;
12
13
  onChange?: import("react").ChangeEventHandler<HTMLInputElement>;
13
14
  onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
@@ -35,6 +36,7 @@ declare const DefaultInput: import("react").ForwardRefExoticComponent<{
35
36
  placeholder?: string;
36
37
  disabled?: boolean;
37
38
  error?: import("react").ReactNode;
39
+ reserveErrorLine?: boolean;
38
40
  busy?: boolean;
39
41
  onChange?: import("react").ChangeEventHandler<HTMLInputElement>;
40
42
  onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
package/lib/input.d.ts CHANGED
@@ -16,6 +16,11 @@ declare type InputExclusiveProps = {
16
16
  * Error state flag
17
17
  */
18
18
  error?: boolean | React.ReactNode;
19
+ /**
20
+ * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
21
+ * If `false `, there will be no reservation.
22
+ */
23
+ reserveErrorLine?: boolean;
19
24
  /**
20
25
  * Set busy state
21
26
  */
package/lib/input.js CHANGED
@@ -3,11 +3,12 @@ import * as React from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import cn from 'classnames';
5
5
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
6
- import WarningIcon from './_virtual/warning.js';
6
+ import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
7
7
  import CloseOutlineIcon from './_virtual/close-outline.js';
8
8
  import styles from './input.p.module.css.js';
9
9
  import { RightIcons } from './parts/right-icons.js';
10
10
  import { CustomIcon } from './parts/custom-icon.js';
11
+ import { useBackwardCompatibleId } from './parts/use-backward-compatible-id.js';
11
12
  const {
12
13
  useEffect,
13
14
  useRef,
@@ -26,6 +27,7 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
26
27
  placeholder,
27
28
  disabled,
28
29
  error,
30
+ reserveErrorLine = false,
29
31
  busy,
30
32
  onChange,
31
33
  onFocus,
@@ -44,7 +46,7 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
44
46
  suffix,
45
47
  offSystemMicroelements,
46
48
  style,
47
- boldLabel,
49
+ boldLabel = true,
48
50
  ...restProps
49
51
  } = _ref;
50
52
  const theme = useThemeWithUndefined(themeFromProps); // replace with :focus-within when ie11 is not supported anymore
@@ -72,6 +74,9 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
72
74
  }, []);
73
75
  const renderLeftCustomIcon = icon && iconType === 'left';
74
76
  const renderRightCustomIcon = icon && (iconType === 'right' || iconType === 'rightAction' || iconType === 'rightActionFocusable');
77
+ const uniqueId = `input-${useBackwardCompatibleId()}`;
78
+ const errorId = `${id ? id : uniqueId}-error`;
79
+ const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
75
80
  return /*#__PURE__*/React.createElement("div", {
76
81
  className: cn(styles.container, styles[theme], styles[mode], sizeStyles[size], {
77
82
  [styles.focused]: focused,
@@ -141,6 +146,7 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
141
146
  },
142
147
  value: value,
143
148
  ref: ref,
149
+ "aria-errormessage": error ? errorId : undefined,
144
150
  "aria-invalid": Boolean(error),
145
151
  "data-test": "input__inner",
146
152
  "data-rs-internal": "input__inner"
@@ -158,18 +164,17 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
158
164
  className: styles.suffix,
159
165
  "data-test": "input__suffix",
160
166
  "data-rs-internal": "input__suffix"
161
- }, suffix)))), error && typeof error !== 'boolean' && /*#__PURE__*/React.createElement("div", {
167
+ }, suffix)))), hasFooter && /*#__PURE__*/React.createElement("div", {
168
+ className: styles.footer
169
+ }, /*#__PURE__*/React.createElement(ErrorMessage, {
162
170
  className: styles.errorMessage,
163
171
  "data-test": "input__error-message",
164
- "data-rs-internal": "input__error-message"
165
- }, /*#__PURE__*/React.createElement(WarningIcon, {
166
- className: styles.errorIcon,
167
- "data-rs-internal": "input__error-icon",
168
- "data-render-all-sizes": true
169
- }), /*#__PURE__*/React.createElement("span", null, error)), note && /*#__PURE__*/React.createElement("div", {
172
+ id: errorId,
173
+ reserveLine: reserveErrorLine
174
+ }, error), note && /*#__PURE__*/React.createElement("div", {
170
175
  className: styles.note,
171
176
  "data-rs-internal": "input__note"
172
- }, note));
177
+ }, note)));
173
178
  });
174
179
  Input.displayName = 'Input';
175
180
  Input.propTypes = {
@@ -177,7 +182,8 @@ Input.propTypes = {
177
182
  className: PropTypes.string,
178
183
  placeholder: PropTypes.string,
179
184
  disabled: PropTypes.bool,
180
- error: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
185
+ error: ErrorMessage.propTypes.children,
186
+ reserveErrorLine: PropTypes.bool,
181
187
  busy: PropTypes.bool,
182
188
  onChange: PropTypes.func,
183
189
  onFocus: PropTypes.func,
@@ -1,31 +1,31 @@
1
1
  var styles = {
2
- "light": "_light_1jpg6vw_8",
3
- "dark": "_dark_1jpg6vw_11",
4
- "sizeS": "_sizeS_1jpg6vw_15",
5
- "sizeM": "_sizeM_1jpg6vw_18",
6
- "sizeL": "_sizeL_1jpg6vw_21",
7
- "classic": "_classic_1jpg6vw_25",
8
- "rock": "_rock_1jpg6vw_28",
9
- "container": "_container_1jpg6vw_32",
10
- "wrapper": "_wrapper_1jpg6vw_39",
11
- "error": "_error_1jpg6vw_55",
12
- "disabled": "_disabled_1jpg6vw_61",
13
- "enabled": "_enabled_1jpg6vw_67",
14
- "focused": "_focused_1jpg6vw_67",
15
- "filled": "_filled_1jpg6vw_73",
16
- "field": "_field_1jpg6vw_91",
17
- "inner": "_inner_1jpg6vw_101",
18
- "offSystemMicroelements": "_offSystemMicroelements_1jpg6vw_202",
19
- "iconWrapper": "_iconWrapper_1jpg6vw_212",
20
- "action": "_action_1jpg6vw_223",
21
- "right": "_right_1jpg6vw_261",
22
- "left": "_left_1jpg6vw_265",
23
- "icon": "_icon_1jpg6vw_212",
24
- "divider": "_divider_1jpg6vw_299",
25
- "suffix": "_suffix_1jpg6vw_315",
26
- "errorMessage": "_errorMessage_1jpg6vw_329",
27
- "errorIcon": "_errorIcon_1jpg6vw_341",
28
- "note": "_note_1jpg6vw_347",
29
- "label": "_label_1jpg6vw_358"
2
+ "light": "_light_qyk6l9_7",
3
+ "dark": "_dark_qyk6l9_10",
4
+ "sizeS": "_sizeS_qyk6l9_14",
5
+ "sizeM": "_sizeM_qyk6l9_17",
6
+ "sizeL": "_sizeL_qyk6l9_20",
7
+ "classic": "_classic_qyk6l9_24",
8
+ "rock": "_rock_qyk6l9_27",
9
+ "container": "_container_qyk6l9_31",
10
+ "wrapper": "_wrapper_qyk6l9_39",
11
+ "error": "_error_qyk6l9_55",
12
+ "disabled": "_disabled_qyk6l9_61",
13
+ "enabled": "_enabled_qyk6l9_67",
14
+ "focused": "_focused_qyk6l9_67",
15
+ "filled": "_filled_qyk6l9_73",
16
+ "field": "_field_qyk6l9_91",
17
+ "inner": "_inner_qyk6l9_101",
18
+ "offSystemMicroelements": "_offSystemMicroelements_qyk6l9_202",
19
+ "iconWrapper": "_iconWrapper_qyk6l9_212",
20
+ "action": "_action_qyk6l9_223",
21
+ "right": "_right_qyk6l9_261",
22
+ "left": "_left_qyk6l9_265",
23
+ "icon": "_icon_qyk6l9_212",
24
+ "divider": "_divider_qyk6l9_299",
25
+ "suffix": "_suffix_qyk6l9_315",
26
+ "label": "_label_qyk6l9_329",
27
+ "footer": "_footer_qyk6l9_340",
28
+ "errorMessage": "_errorMessage_qyk6l9_347",
29
+ "note": "_note_qyk6l9_356"
30
30
  };
31
31
  export { styles as default };
@@ -0,0 +1,4 @@
1
+ export declare const useBackwardCompatibleId: {
2
+ (): string | number;
3
+ counter: number;
4
+ };
@@ -0,0 +1,14 @@
1
+ import React__default, { useRef } from 'react';
2
+
3
+ const useBackwardCompatibleId = () => {
4
+ const id = useRef(null);
5
+
6
+ if (id.current === null) {
7
+ id.current = useBackwardCompatibleId.counter++;
8
+ }
9
+
10
+ return (React__default.useId ? React__default.useId : () => id.current)();
11
+ };
12
+
13
+ useBackwardCompatibleId.counter = 0;
14
+ export { useBackwardCompatibleId };
@@ -2,7 +2,6 @@
2
2
  &:not(html){
3
3
  --_rs-input-vertical-padding:6px;
4
4
  --_rs-input-horizontal-padding:8px;
5
- --_rs-input-parts-offset:4px;
6
5
  --_rs-input-icon-offset:8px;
7
6
  --_rs-input-icon-size:20px;
8
7
  }
@@ -108,80 +107,11 @@
108
107
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
109
108
  --_rs-typography-link-border-bottom-width-from-text:2px;
110
109
  }
111
- &:not(html) [data-rs-internal='input__note']{
112
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
113
- --_rs-typography-text-transform:initial;
114
- --_rs-typography-font-variant-numeric:initial;
115
- --_rs-typography-font-family:var(
116
- --rs-font-family-ui,
117
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
118
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
119
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
120
- );
121
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
122
- --_rs-typography-font-weight:var(
123
- --rs-font-weight-regular,
124
- 400
125
- );
126
- --_rs-typography-line-height:var(
127
- --rs-text-3-line-height,
128
- 20px
129
- );
130
- --_rs-typography-base-color:var(
131
- --_rs-typography-hardness-color,
132
- var(
133
- --rs-color-average,
134
- 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)
135
- )
136
- );
137
- --_rs-typography-text-auto-offset:8px;
138
- --_rs-typography-ul-list-li-padding-left:28px;
139
- --_rs-typography-ol-list-li-padding-left:21px;
140
- --_rs-typography-list-li-margin-top-from-text:8px;
141
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
142
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
143
- --_rs-typography-link-border-bottom-width-from-text:1px;
144
- }
145
- &:not(html) [data-rs-internal='input__error-message']{
146
- --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
147
- --_rs-typography-text-transform:initial;
148
- --_rs-typography-font-variant-numeric:initial;
149
- --_rs-typography-font-family:var(
150
- --rs-font-family-ui,
151
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
152
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
153
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
154
- );
155
- --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
156
- --_rs-typography-font-weight:var(
157
- --rs-font-weight-semi-bold,
158
- 600
159
- );
160
- --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
161
- --_rs-typography-base-color:var(
162
- --_rs-typography-heading-hardness-color,
163
- var(
164
- --rs-color-hard,
165
- 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))
166
- )
167
- );
168
- --_rs-typography-text-auto-offset:0;
169
- --_rs-typography-ul-list-li-padding-left:initial;
170
- --_rs-typography-ol-list-li-padding-left:initial;
171
- --_rs-typography-list-li-margin-top-from-text:initial;
172
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
173
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
174
- --_rs-typography-link-border-bottom-width-from-text:2px;
175
- }
176
- &:not(html) [data-rs-internal='input__error-icon']:not(html){
177
- --_rs-icons-height:20px;
178
- }
179
110
  }
180
111
  @define-mixin rs-input-size-m{
181
112
  &:not(html){
182
113
  --_rs-input-vertical-padding:8px;
183
114
  --_rs-input-horizontal-padding:8px;
184
- --_rs-input-parts-offset:8px;
185
115
  --_rs-input-icon-offset:8px;
186
116
  --_rs-input-icon-size:24px;
187
117
  }
@@ -306,80 +236,11 @@
306
236
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
307
237
  --_rs-typography-link-border-bottom-width-from-text:2px;
308
238
  }
309
- &:not(html) [data-rs-internal='input__note']{
310
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
311
- --_rs-typography-text-transform:initial;
312
- --_rs-typography-font-variant-numeric:initial;
313
- --_rs-typography-font-family:var(
314
- --rs-font-family-ui,
315
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
316
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
317
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
318
- );
319
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
320
- --_rs-typography-font-weight:var(
321
- --rs-font-weight-regular,
322
- 400
323
- );
324
- --_rs-typography-line-height:var(
325
- --rs-text-3-line-height,
326
- 20px
327
- );
328
- --_rs-typography-base-color:var(
329
- --_rs-typography-hardness-color,
330
- var(
331
- --rs-color-average,
332
- 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)
333
- )
334
- );
335
- --_rs-typography-text-auto-offset:8px;
336
- --_rs-typography-ul-list-li-padding-left:28px;
337
- --_rs-typography-ol-list-li-padding-left:21px;
338
- --_rs-typography-list-li-margin-top-from-text:8px;
339
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
340
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
341
- --_rs-typography-link-border-bottom-width-from-text:1px;
342
- }
343
- &:not(html) [data-rs-internal='input__error-message']{
344
- --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
345
- --_rs-typography-text-transform:initial;
346
- --_rs-typography-font-variant-numeric:initial;
347
- --_rs-typography-font-family:var(
348
- --rs-font-family-ui,
349
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
350
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
351
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
352
- );
353
- --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
354
- --_rs-typography-font-weight:var(
355
- --rs-font-weight-semi-bold,
356
- 600
357
- );
358
- --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
359
- --_rs-typography-base-color:var(
360
- --_rs-typography-heading-hardness-color,
361
- var(
362
- --rs-color-hard,
363
- 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))
364
- )
365
- );
366
- --_rs-typography-text-auto-offset:0;
367
- --_rs-typography-ul-list-li-padding-left:initial;
368
- --_rs-typography-ol-list-li-padding-left:initial;
369
- --_rs-typography-list-li-margin-top-from-text:initial;
370
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
371
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
372
- --_rs-typography-link-border-bottom-width-from-text:2px;
373
- }
374
- &:not(html) [data-rs-internal='input__error-icon']:not(html){
375
- --_rs-icons-height:20px;
376
- }
377
239
  }
378
240
  @define-mixin rs-input-size-l{
379
241
  &:not(html){
380
242
  --_rs-input-vertical-padding:12px;
381
243
  --_rs-input-horizontal-padding:16px;
382
- --_rs-input-parts-offset:8px;
383
244
  --_rs-input-icon-offset:16px;
384
245
  --_rs-input-icon-size:28px;
385
246
  }
@@ -504,82 +365,6 @@
504
365
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
505
366
  --_rs-typography-link-border-bottom-width-from-text:2px;
506
367
  }
507
- &:not(html) [data-rs-internal='input__note']{
508
- --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
509
- --_rs-typography-text-transform:initial;
510
- --_rs-typography-font-variant-numeric:initial;
511
- --_rs-typography-font-family:var(
512
- --rs-font-family-ui,
513
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
514
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
515
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
516
- );
517
- --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
518
- --_rs-typography-font-weight:var(
519
- --rs-font-weight-regular,
520
- 400
521
- );
522
- --_rs-typography-line-height:var(
523
- --rs-text-2-line-height,
524
- 24px
525
- );
526
- --_rs-typography-base-color:var(
527
- --_rs-typography-hardness-color,
528
- var(
529
- --rs-color-average,
530
- 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)
531
- )
532
- );
533
- --_rs-typography-text-auto-offset:16px;
534
- --_rs-typography-ul-list-li-padding-left:22px;
535
- --_rs-typography-ol-list-li-padding-left:26px;
536
- --_rs-typography-list-li-margin-top-from-text:var(
537
- --_rs-typography-text-2-sm-list-li-margin-top-from-text,
538
- 16px
539
- );
540
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
541
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
542
- --_rs-typography-link-border-bottom-width-from-text:1px;
543
- }
544
- @media screen and (max-width: 640px){
545
- &:not(html) [data-rs-internal='input__note']{
546
- --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
547
- }
548
- }
549
- &:not(html) [data-rs-internal='input__error-message']{
550
- --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
551
- --_rs-typography-text-transform:initial;
552
- --_rs-typography-font-variant-numeric:initial;
553
- --_rs-typography-font-family:var(
554
- --rs-font-family-ui,
555
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
556
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
557
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
558
- );
559
- --_rs-typography-font-size:var(--rs-h4-font-size, 16px);
560
- --_rs-typography-font-weight:var(
561
- --rs-font-weight-semi-bold,
562
- 600
563
- );
564
- --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
565
- --_rs-typography-base-color:var(
566
- --_rs-typography-heading-hardness-color,
567
- var(
568
- --rs-color-hard,
569
- 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))
570
- )
571
- );
572
- --_rs-typography-text-auto-offset:0;
573
- --_rs-typography-ul-list-li-padding-left:initial;
574
- --_rs-typography-ol-list-li-padding-left:initial;
575
- --_rs-typography-list-li-margin-top-from-text:initial;
576
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
577
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
578
- --_rs-typography-link-border-bottom-width-from-text:2px;
579
- }
580
- &:not(html) [data-rs-internal='input__error-icon']:not(html){
581
- --_rs-icons-height:24px;
582
- }
583
368
  }
584
369
  @define-mixin rs-input-mode-classic{
585
370
  &:not(html){