@dt-dds/react-text-field 1.0.0-beta.78 → 1.0.0-beta.80

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 (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +1 -0
  3. package/dist/index.d.mts +14 -9
  4. package/dist/index.d.ts +14 -9
  5. package/dist/index.js +158 -118
  6. package/dist/index.mjs +157 -117
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @dt-ui/react-text-field
2
2
 
3
+ ## 1.0.0-beta.80
4
+
5
+ ### Patch Changes
6
+
7
+ - @dt-dds/react-spinner@1.0.0-beta.75
8
+
9
+ ## 1.0.0-beta.79
10
+
11
+ ### Minor Changes
12
+
13
+ - feat: improve text-field and label-field
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+ - @dt-dds/react-label-field@1.0.0-beta.49
19
+ - @dt-dds/react-spinner@1.0.0-beta.74
20
+
3
21
  ## 1.0.0-beta.78
4
22
 
5
23
  ### Patch Changes
package/README.md CHANGED
@@ -33,6 +33,7 @@ export const App = () => {
33
33
  | `onChange` | `function` | - | The triggered function when the input change. |
34
34
  | `onResetInput` | `function` | - | The triggered function when clicked on the cross icon, when type is search |
35
35
  | `variant` | `[outlined, bottomLine]` | `outlined` | Styles the input with outlined or with bottom line |
36
+ | `scale` | `[compact, standard]` | `standard` | Sets the spacing and size of the text field |
36
37
  | `backgroundFill` | `[default, contrast, light]` | `default` | Styles the input with background color |
37
38
  | `isFloatingLabel` | `boolean` | `false` | Sets the label floating or traditional on top of the input |
38
39
  | `extraPrefix` | `ExtraComponent` | - | Component to be rendered on the left side inside the input field |
package/dist/index.d.mts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
  import { BaseProps } from '@dt-dds/react-core';
4
+ import { FieldScale } from '@dt-dds/react-label-field';
4
5
  import * as react from 'react';
5
6
  import { ReactNode, ComponentPropsWithoutRef, RefObject } from 'react';
6
7
  import * as _emotion_styled from '@emotion/styled';
@@ -25,14 +26,19 @@ interface TextFieldProps extends ComponentPropsWithoutRef<'input'>, BaseProps {
25
26
  inputRef?: RefObject<HTMLInputElement>;
26
27
  message?: string;
27
28
  variant?: TextFieldVariant;
29
+ scale?: FieldScale;
28
30
  backgroundFill?: TextFieldBackgroundFill;
29
31
  onResetInput?: () => void;
30
32
  }
31
- declare const TextField: ({ dataTestId, hasError, extraPrefix, extraSuffix, label, labelIcon, isFloatingLabel, name, id, required, requiredMessage, style, children, initialValue, inputRef, message: messageProp, type, variant, backgroundFill, disabled, onChange, onResetInput, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
33
+ declare const TextField: ({ dataTestId, hasError, extraPrefix, extraSuffix, label, labelIcon, isFloatingLabel, name, id, required, requiredMessage, style, children, initialValue, inputRef, message: messageProp, type, variant, scale, backgroundFill, disabled, onChange, onResetInput, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
32
34
 
35
+ interface TextFieldStyledProps {
36
+ isFloatingLabel?: boolean;
37
+ hasPrefix?: boolean;
38
+ }
33
39
  interface InputFieldStyledProps {
34
40
  isFloatingLabel: boolean;
35
- isSearchType: boolean;
41
+ scale: FieldScale;
36
42
  }
37
43
  interface InputWrapperStyledProps {
38
44
  isFloatingLabel: boolean;
@@ -43,9 +49,12 @@ interface InputWrapperStyledProps {
43
49
  declare const TextFieldStyled: _emotion_styled.StyledComponent<{
44
50
  theme?: _emotion_react.Theme;
45
51
  as?: React.ElementType;
52
+ } & TextFieldStyledProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
53
+ declare const InputContainerStyled: _emotion_styled.StyledComponent<{
54
+ theme?: _emotion_react.Theme;
55
+ as?: React.ElementType;
46
56
  } & {
47
- isFloatingLabel?: boolean;
48
- hasPrefix?: boolean;
57
+ isFloatingLabel: boolean;
49
58
  }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
50
59
  declare const InputFieldStyled: _emotion_styled.StyledComponent<{
51
60
  theme?: _emotion_react.Theme;
@@ -67,10 +76,6 @@ declare const TextFieldMessageStyled: _emotion_styled.StyledComponent<{
67
76
  theme?: _emotion_react.Theme;
68
77
  as?: React.ElementType;
69
78
  }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
70
- declare const ResetInputIconStyled: _emotion_styled.StyledComponent<{
71
- theme?: _emotion_react.Theme;
72
- as?: React.ElementType;
73
- }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
74
79
  declare const InputWrapperStyled: _emotion_styled.StyledComponent<{
75
80
  theme?: _emotion_react.Theme;
76
81
  as?: React.ElementType;
@@ -81,4 +86,4 @@ declare module '@emotion/react' {
81
86
  }
82
87
  }
83
88
 
84
- export { type ExtraComponent, InputExtraPrefixStyled, InputExtraSuffixStyled, InputFieldStyled, type InputFieldStyledProps, InputWrapperStyled, type InputWrapperStyledProps, ResetInputIconStyled, TextField, TextFieldMessageStyled, type TextFieldProps, TextFieldStyled };
89
+ export { type ExtraComponent, InputContainerStyled, InputExtraPrefixStyled, InputExtraSuffixStyled, InputFieldStyled, type InputFieldStyledProps, InputWrapperStyled, type InputWrapperStyledProps, TextField, TextFieldMessageStyled, type TextFieldProps, TextFieldStyled, type TextFieldStyledProps };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { CustomTheme } from '@dt-dds/themes';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
  import { BaseProps } from '@dt-dds/react-core';
4
+ import { FieldScale } from '@dt-dds/react-label-field';
4
5
  import * as react from 'react';
5
6
  import { ReactNode, ComponentPropsWithoutRef, RefObject } from 'react';
6
7
  import * as _emotion_styled from '@emotion/styled';
@@ -25,14 +26,19 @@ interface TextFieldProps extends ComponentPropsWithoutRef<'input'>, BaseProps {
25
26
  inputRef?: RefObject<HTMLInputElement>;
26
27
  message?: string;
27
28
  variant?: TextFieldVariant;
29
+ scale?: FieldScale;
28
30
  backgroundFill?: TextFieldBackgroundFill;
29
31
  onResetInput?: () => void;
30
32
  }
31
- declare const TextField: ({ dataTestId, hasError, extraPrefix, extraSuffix, label, labelIcon, isFloatingLabel, name, id, required, requiredMessage, style, children, initialValue, inputRef, message: messageProp, type, variant, backgroundFill, disabled, onChange, onResetInput, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
33
+ declare const TextField: ({ dataTestId, hasError, extraPrefix, extraSuffix, label, labelIcon, isFloatingLabel, name, id, required, requiredMessage, style, children, initialValue, inputRef, message: messageProp, type, variant, scale, backgroundFill, disabled, onChange, onResetInput, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
32
34
 
35
+ interface TextFieldStyledProps {
36
+ isFloatingLabel?: boolean;
37
+ hasPrefix?: boolean;
38
+ }
33
39
  interface InputFieldStyledProps {
34
40
  isFloatingLabel: boolean;
35
- isSearchType: boolean;
41
+ scale: FieldScale;
36
42
  }
37
43
  interface InputWrapperStyledProps {
38
44
  isFloatingLabel: boolean;
@@ -43,9 +49,12 @@ interface InputWrapperStyledProps {
43
49
  declare const TextFieldStyled: _emotion_styled.StyledComponent<{
44
50
  theme?: _emotion_react.Theme;
45
51
  as?: React.ElementType;
52
+ } & TextFieldStyledProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
53
+ declare const InputContainerStyled: _emotion_styled.StyledComponent<{
54
+ theme?: _emotion_react.Theme;
55
+ as?: React.ElementType;
46
56
  } & {
47
- isFloatingLabel?: boolean;
48
- hasPrefix?: boolean;
57
+ isFloatingLabel: boolean;
49
58
  }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
50
59
  declare const InputFieldStyled: _emotion_styled.StyledComponent<{
51
60
  theme?: _emotion_react.Theme;
@@ -67,10 +76,6 @@ declare const TextFieldMessageStyled: _emotion_styled.StyledComponent<{
67
76
  theme?: _emotion_react.Theme;
68
77
  as?: React.ElementType;
69
78
  }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
70
- declare const ResetInputIconStyled: _emotion_styled.StyledComponent<{
71
- theme?: _emotion_react.Theme;
72
- as?: React.ElementType;
73
- }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
74
79
  declare const InputWrapperStyled: _emotion_styled.StyledComponent<{
75
80
  theme?: _emotion_react.Theme;
76
81
  as?: React.ElementType;
@@ -81,4 +86,4 @@ declare module '@emotion/react' {
81
86
  }
82
87
  }
83
88
 
84
- export { type ExtraComponent, InputExtraPrefixStyled, InputExtraSuffixStyled, InputFieldStyled, type InputFieldStyledProps, InputWrapperStyled, type InputWrapperStyledProps, ResetInputIconStyled, TextField, TextFieldMessageStyled, type TextFieldProps, TextFieldStyled };
89
+ export { type ExtraComponent, InputContainerStyled, InputExtraPrefixStyled, InputExtraSuffixStyled, InputFieldStyled, type InputFieldStyledProps, InputWrapperStyled, type InputWrapperStyledProps, TextField, TextFieldMessageStyled, type TextFieldProps, TextFieldStyled, type TextFieldStyledProps };
package/dist/index.js CHANGED
@@ -59,11 +59,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
59
59
  // index.ts
60
60
  var index_exports = {};
61
61
  __export(index_exports, {
62
+ InputContainerStyled: () => InputContainerStyled,
62
63
  InputExtraPrefixStyled: () => InputExtraPrefixStyled,
63
64
  InputExtraSuffixStyled: () => InputExtraSuffixStyled,
64
65
  InputFieldStyled: () => InputFieldStyled,
65
66
  InputWrapperStyled: () => InputWrapperStyled,
66
- ResetInputIconStyled: () => ResetInputIconStyled,
67
67
  TextField: () => TextField,
68
68
  TextFieldMessageStyled: () => TextFieldMessageStyled,
69
69
  TextFieldStyled: () => TextFieldStyled
@@ -96,7 +96,6 @@ var TextFieldStyled = import_styled.default.div`
96
96
  width: 100%;
97
97
  position: relative;
98
98
 
99
-
100
99
  ${hasPrefix ? `
101
100
  label {
102
101
  left: 0;
@@ -104,21 +103,25 @@ var TextFieldStyled = import_styled.default.div`
104
103
  }
105
104
  ` : ""}
106
105
 
107
- i {
108
- color: ${theme.palette.content.medium};
109
- }
110
-
111
106
  :has(input[disabled]) {
112
107
  i, label > span {
113
108
  color: ${theme.palette.content.light};
114
109
  }
115
110
  }
116
111
 
117
- :has(input[readonly]:not(input[disabled])) {
118
- label, label > span {
119
- color: ${isFloatingLabel ? theme.palette.content.medium : theme.palette.content.default};
120
- }
112
+ &:has(input[readonly]:not(input[disabled])) {
113
+ i, label, label > span {
114
+ color: ${theme.palette.content.medium};
121
115
  }
116
+ }
117
+
118
+ ${!isFloatingLabel && `
119
+ &:has(input[readonly]:not([disabled]):focus) {
120
+ label {
121
+ color: ${theme.palette.informative.default};
122
+ }
123
+ }
124
+ `}
122
125
  `}
123
126
 
124
127
  input[type="search"]::-webkit-search-decoration,
@@ -128,28 +131,61 @@ var TextFieldStyled = import_styled.default.div`
128
131
  display: none;
129
132
  }
130
133
  `;
134
+ var InputContainerStyled = import_styled.default.div`
135
+ ${({ theme, isFloatingLabel }) => `
136
+ position: relative;
137
+ display: flex;
138
+ flex-direction: column;
139
+ gap: ${isFloatingLabel ? "0" : theme.spacing.spacing_30};
140
+ `}
141
+ `;
131
142
  var InputFieldStyled = import_styled.default.input`
132
- ${({ theme, isFloatingLabel, isSearchType }) => `
143
+ ${({ theme, isFloatingLabel, scale }) => `
133
144
  ${theme.fontStyles.bodyMdRegular}
134
145
  border: 0;
135
146
  outline: 0;
136
147
  width: 100%;
137
148
  background-color: inherit;
138
-
139
149
 
150
+ &:focus {
151
+ outline: none;
152
+ }
153
+
154
+ &:read-only {
155
+ color: ${theme.palette.content.medium};
156
+ }
140
157
 
141
158
  input:-webkit-autofill,
142
159
  input:-webkit-autofill:hover,
143
160
  input:-webkit-autofill:focus,
144
161
  input:-webkit-autofill:active {
145
- transition: background-color 5000s ease-in-out 0s;
162
+ transition: background-color 5000s ease-in-out 0s;
163
+ }
164
+
165
+ &[readonly]::placeholder,
166
+ &[readonly]:focus::placeholder {
167
+ color: transparent;
146
168
  }
147
169
 
148
170
  &::placeholder {
149
171
  color: ${isFloatingLabel ? "transparent" : theme.palette.content.medium};
150
172
  }
151
173
 
152
- padding: ${isFloatingLabel && !isSearchType ? `${theme.spacing.xs} 0 ${theme.spacing.spacing_30} 0` : ""};
174
+ &:focus::placeholder {
175
+ color: ${theme.palette.content.medium};
176
+ }
177
+
178
+ &:disabled {
179
+ color: ${theme.palette.content.light};
180
+ }
181
+
182
+ color: ${theme.palette.content.default};
183
+
184
+ ${scale === "compact" ? `
185
+ padding: ${isFloatingLabel ? `${theme.spacing.spacing_60} ${theme.spacing.spacing_40} ${theme.spacing.spacing_30} ${theme.spacing.spacing_40}` : `14px ${theme.spacing.spacing_30}`};
186
+ ` : `
187
+ padding: ${isFloatingLabel ? `28px ${theme.spacing.spacing_40} ${theme.spacing.spacing_40}` : `20px ${theme.spacing.spacing_40}`};
188
+ `}
153
189
  `}
154
190
  `;
155
191
  var InputExtraPrefixStyled = import_styled.default.div`
@@ -158,6 +194,12 @@ var InputExtraPrefixStyled = import_styled.default.div`
158
194
  return `
159
195
  display: flex;
160
196
  cursor: ${isClickable ? "pointer" : "default"};
197
+ padding-left: ${theme.spacing.spacing_40}};
198
+
199
+ &:focus-visible {
200
+ outline: 2px solid ${theme.palette.border.dark};
201
+ outline-offset: 1px;
202
+ }
161
203
 
162
204
  ${isClickable && `
163
205
  &:hover > i {
@@ -174,10 +216,16 @@ var InputExtraSuffixStyled = import_styled.default.div`
174
216
  return `
175
217
  display: flex;
176
218
  cursor: ${isClickable ? "pointer" : "default"};
219
+ padding-right: ${theme.spacing.spacing_40}};
220
+
221
+ &:focus-visible {
222
+ outline: 2px solid ${theme.palette.border.dark};
223
+ outline-offset: 1px;
224
+ }
177
225
 
178
226
  ${isClickable && `
179
227
  &:hover > i {
180
- color: ${theme.palette.content.dark};
228
+ color: ${theme.palette.primary.default};
181
229
  }
182
230
  `}
183
231
  `;
@@ -186,16 +234,6 @@ var InputExtraSuffixStyled = import_styled.default.div`
186
234
  var TextFieldMessageStyled = import_styled.default.div`
187
235
  padding-left: ${({ theme }) => theme.spacing.spacing_40};
188
236
  `;
189
- var ResetInputIconStyled = import_styled.default.div`
190
- ${({ theme }) => `
191
- cursor: pointer;
192
- display: flex;
193
-
194
- :hover > i {
195
- color: ${theme.palette.content.dark}
196
- }
197
- `}
198
- `;
199
237
  var InputWrapperStyled = import_styled.default.div`
200
238
  ${({ theme, isFloatingLabel, variant, backgroundFill, hasError }) => {
201
239
  const borderColor = hasError ? theme.palette.error.default : theme.palette.border.medium;
@@ -206,15 +244,9 @@ var InputWrapperStyled = import_styled.default.div`
206
244
  align-items: center;
207
245
  min-width: 198px;
208
246
  width: 100%;
209
- height: 54px;
210
247
  color: ${theme.palette.content.default};
211
- gap: ${theme.spacing.spacing_30};
212
248
  background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
213
-
214
- padding-inline: ${theme.spacing.spacing_40};
215
-
216
- ${!isFloatingLabel && "margin-top: 8px"};
217
-
249
+
218
250
  ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
219
251
  border: 1px solid ${borderColor};
220
252
 
@@ -236,8 +268,12 @@ var InputWrapperStyled = import_styled.default.div`
236
268
  `};
237
269
 
238
270
  &:has(input[readonly]:not([disabled])) {
239
- background-color: ${theme.palette.surface.default};
240
- color: ${theme.palette.content.medium};
271
+ background-color: ${theme.palette.surface.light};
272
+ border: 1px solid ${theme.palette.surface.default};
273
+
274
+ &:focus-within, &:hover {
275
+ border: 1px solid ${theme.palette.informative.default};
276
+ }
241
277
  }
242
278
 
243
279
  &:has(input[disabled]), &:has(input[disabled]) > * {
@@ -277,6 +313,7 @@ var TextField = (_a) => {
277
313
  message: messageProp = "",
278
314
  type = "text",
279
315
  variant = "outlined",
316
+ scale = "standard",
280
317
  backgroundFill = "default",
281
318
  disabled = false,
282
319
  onChange = () => null,
@@ -300,6 +337,7 @@ var TextField = (_a) => {
300
337
  "message",
301
338
  "type",
302
339
  "variant",
340
+ "scale",
303
341
  "backgroundFill",
304
342
  "disabled",
305
343
  "onChange",
@@ -334,12 +372,10 @@ var TextField = (_a) => {
334
372
  }
335
373
  };
336
374
  const onBlur = (event) => {
375
+ setActiveInput(false);
337
376
  const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
338
- if (isEmptyOrOnlySpaces) {
339
- setActiveInput(false);
340
- if (required && requiredMessage) {
341
- setHasRequiredError(true);
342
- }
377
+ if (isEmptyOrOnlySpaces && required) {
378
+ setHasRequiredError(true);
343
379
  }
344
380
  if (rest.onBlur) {
345
381
  rest.onBlur(event);
@@ -350,7 +386,6 @@ var TextField = (_a) => {
350
386
  setActiveInput(false);
351
387
  onResetInput();
352
388
  };
353
- const handleResetIconEnter = (event) => event.code === "Enter" && handleResetInput();
354
389
  const handleExtraPreffixEnter = (event) => event.code === "Enter" && (extraPrefix == null ? void 0 : extraPrefix.onClick) && extraPrefix.onClick(inputValue);
355
390
  const handleExtraSuffixEnter = (event) => event.code === "Enter" && (extraSuffix == null ? void 0 : extraSuffix.onClick) && extraSuffix.onClick(inputValue);
356
391
  const messageColor = disabled ? "content.light" : "content.medium";
@@ -368,83 +403,88 @@ var TextField = (_a) => {
368
403
  isFloatingLabel,
369
404
  style,
370
405
  children: [
371
- !isActiveInput || !isFloatingLabel || !isSearchType ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
372
- import_react_label_field.LabelField,
373
- {
374
- hasError: showError,
375
- htmlFor: textFieldId,
376
- icon: labelIcon,
377
- isActive: isActiveInput || type === "date",
378
- isDisabled: disabled,
379
- isFloating: isFloatingLabel,
380
- isRequired: required,
381
- children: label
382
- }
383
- ) : null,
384
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
385
- InputWrapperStyled,
386
- {
387
- backgroundFill,
388
- "data-testid": "input-wrapper",
389
- hasError: showError,
390
- isFloatingLabel,
391
- variant,
392
- children: [
393
- (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
394
- InputExtraPrefixStyled,
395
- __spreadProps(__spreadValues({
396
- "data-testid": "extra-preffix"
397
- }, !!extraPreffixOnClick && {
398
- tabIndex: 0,
399
- onClick: () => extraPreffixOnClick(inputValue),
400
- onKeyDown: handleExtraPreffixEnter
401
- }), {
402
- children: extraPrefix.component
403
- })
404
- ) : null,
405
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
406
- InputFieldStyled,
407
- __spreadProps(__spreadValues({
408
- "data-error": showError,
409
- "data-testid": "input-field",
410
- disabled,
411
- id: textFieldId,
412
- isFloatingLabel,
413
- isSearchType,
414
- name: name != null ? name : textFieldId,
415
- ref: inputRef,
416
- type,
417
- value: inputValue
418
- }, rest), {
419
- onBlur,
420
- onChange: handleChange,
421
- onFocus
422
- })
423
- ),
424
- isSearchType && !!inputValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
425
- ResetInputIconStyled,
426
- {
427
- "data-testid": "reset-icon",
428
- onKeyDown: handleResetIconEnter,
429
- tabIndex: 0,
430
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon_button.IconButton, { onClick: handleResetInput, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "close_small" }) })
431
- }
432
- ) : null,
433
- (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
434
- InputExtraSuffixStyled,
435
- __spreadProps(__spreadValues({
436
- "data-testid": "extra-suffix"
437
- }, !!extraSuffixOnClick && {
438
- tabIndex: 0,
439
- onClick: () => extraSuffixOnClick(inputValue),
440
- onKeyDown: handleExtraSuffixEnter
441
- }), {
442
- children: extraSuffix.component
443
- })
444
- ) : null
445
- ]
446
- }
447
- ),
406
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputContainerStyled, { isFloatingLabel, children: [
407
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
408
+ import_react_label_field.LabelField,
409
+ {
410
+ hasError: showError,
411
+ htmlFor: textFieldId,
412
+ icon: labelIcon,
413
+ isActive: activeInput,
414
+ isCentered: !isActiveInput && isFloatingLabel,
415
+ isDisabled: disabled,
416
+ isFloating: isFloatingLabel,
417
+ isInputFilled: !!inputValue,
418
+ isRequired: required,
419
+ scale,
420
+ children: label
421
+ }
422
+ ),
423
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
424
+ InputWrapperStyled,
425
+ {
426
+ backgroundFill,
427
+ "data-testid": `${testId}-wrapper`,
428
+ hasError: showError,
429
+ isFloatingLabel,
430
+ variant,
431
+ children: [
432
+ (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
433
+ InputExtraPrefixStyled,
434
+ __spreadProps(__spreadValues({
435
+ "data-testid": "extra-preffix"
436
+ }, !!extraPreffixOnClick && {
437
+ tabIndex: 0,
438
+ onClick: () => extraPreffixOnClick(inputValue),
439
+ onKeyDown: handleExtraPreffixEnter
440
+ }), {
441
+ children: extraPrefix.component
442
+ })
443
+ ) : null,
444
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
445
+ InputFieldStyled,
446
+ __spreadProps(__spreadValues({
447
+ "data-error": showError,
448
+ "data-testid": `${testId}-input`,
449
+ disabled,
450
+ id: textFieldId,
451
+ isFloatingLabel,
452
+ name: name != null ? name : textFieldId,
453
+ ref: inputRef,
454
+ scale,
455
+ type,
456
+ value: inputValue
457
+ }, rest), {
458
+ onBlur,
459
+ onChange: handleChange,
460
+ onFocus
461
+ })
462
+ ),
463
+ isSearchType && !!inputValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
464
+ import_react_icon_button.IconButton,
465
+ {
466
+ dataTestId: "reset-icon",
467
+ onClick: handleResetInput,
468
+ style: { marginRight: 12 },
469
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "close" })
470
+ }
471
+ ) : null,
472
+ (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
473
+ InputExtraSuffixStyled,
474
+ __spreadProps(__spreadValues({
475
+ "data-testid": "extra-suffix"
476
+ }, !!extraSuffixOnClick && {
477
+ tabIndex: 0,
478
+ onClick: () => extraSuffixOnClick(inputValue),
479
+ onKeyDown: handleExtraSuffixEnter
480
+ }), {
481
+ children: extraSuffix.component
482
+ })
483
+ ) : null
484
+ ]
485
+ }
486
+ )
487
+ ] }),
448
488
  message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextFieldMessageStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
449
489
  import_react_typography.Typography,
450
490
  {
@@ -461,11 +501,11 @@ var TextField = (_a) => {
461
501
  };
462
502
  // Annotate the CommonJS export names for ESM import in node:
463
503
  0 && (module.exports = {
504
+ InputContainerStyled,
464
505
  InputExtraPrefixStyled,
465
506
  InputExtraSuffixStyled,
466
507
  InputFieldStyled,
467
508
  InputWrapperStyled,
468
- ResetInputIconStyled,
469
509
  TextField,
470
510
  TextFieldMessageStyled,
471
511
  TextFieldStyled
package/dist/index.mjs CHANGED
@@ -59,7 +59,6 @@ var TextFieldStyled = styled.div`
59
59
  width: 100%;
60
60
  position: relative;
61
61
 
62
-
63
62
  ${hasPrefix ? `
64
63
  label {
65
64
  left: 0;
@@ -67,21 +66,25 @@ var TextFieldStyled = styled.div`
67
66
  }
68
67
  ` : ""}
69
68
 
70
- i {
71
- color: ${theme.palette.content.medium};
72
- }
73
-
74
69
  :has(input[disabled]) {
75
70
  i, label > span {
76
71
  color: ${theme.palette.content.light};
77
72
  }
78
73
  }
79
74
 
80
- :has(input[readonly]:not(input[disabled])) {
81
- label, label > span {
82
- color: ${isFloatingLabel ? theme.palette.content.medium : theme.palette.content.default};
83
- }
75
+ &:has(input[readonly]:not(input[disabled])) {
76
+ i, label, label > span {
77
+ color: ${theme.palette.content.medium};
84
78
  }
79
+ }
80
+
81
+ ${!isFloatingLabel && `
82
+ &:has(input[readonly]:not([disabled]):focus) {
83
+ label {
84
+ color: ${theme.palette.informative.default};
85
+ }
86
+ }
87
+ `}
85
88
  `}
86
89
 
87
90
  input[type="search"]::-webkit-search-decoration,
@@ -91,28 +94,61 @@ var TextFieldStyled = styled.div`
91
94
  display: none;
92
95
  }
93
96
  `;
97
+ var InputContainerStyled = styled.div`
98
+ ${({ theme, isFloatingLabel }) => `
99
+ position: relative;
100
+ display: flex;
101
+ flex-direction: column;
102
+ gap: ${isFloatingLabel ? "0" : theme.spacing.spacing_30};
103
+ `}
104
+ `;
94
105
  var InputFieldStyled = styled.input`
95
- ${({ theme, isFloatingLabel, isSearchType }) => `
106
+ ${({ theme, isFloatingLabel, scale }) => `
96
107
  ${theme.fontStyles.bodyMdRegular}
97
108
  border: 0;
98
109
  outline: 0;
99
110
  width: 100%;
100
111
  background-color: inherit;
101
-
102
112
 
113
+ &:focus {
114
+ outline: none;
115
+ }
116
+
117
+ &:read-only {
118
+ color: ${theme.palette.content.medium};
119
+ }
103
120
 
104
121
  input:-webkit-autofill,
105
122
  input:-webkit-autofill:hover,
106
123
  input:-webkit-autofill:focus,
107
124
  input:-webkit-autofill:active {
108
- transition: background-color 5000s ease-in-out 0s;
125
+ transition: background-color 5000s ease-in-out 0s;
126
+ }
127
+
128
+ &[readonly]::placeholder,
129
+ &[readonly]:focus::placeholder {
130
+ color: transparent;
109
131
  }
110
132
 
111
133
  &::placeholder {
112
134
  color: ${isFloatingLabel ? "transparent" : theme.palette.content.medium};
113
135
  }
114
136
 
115
- padding: ${isFloatingLabel && !isSearchType ? `${theme.spacing.xs} 0 ${theme.spacing.spacing_30} 0` : ""};
137
+ &:focus::placeholder {
138
+ color: ${theme.palette.content.medium};
139
+ }
140
+
141
+ &:disabled {
142
+ color: ${theme.palette.content.light};
143
+ }
144
+
145
+ color: ${theme.palette.content.default};
146
+
147
+ ${scale === "compact" ? `
148
+ padding: ${isFloatingLabel ? `${theme.spacing.spacing_60} ${theme.spacing.spacing_40} ${theme.spacing.spacing_30} ${theme.spacing.spacing_40}` : `14px ${theme.spacing.spacing_30}`};
149
+ ` : `
150
+ padding: ${isFloatingLabel ? `28px ${theme.spacing.spacing_40} ${theme.spacing.spacing_40}` : `20px ${theme.spacing.spacing_40}`};
151
+ `}
116
152
  `}
117
153
  `;
118
154
  var InputExtraPrefixStyled = styled.div`
@@ -121,6 +157,12 @@ var InputExtraPrefixStyled = styled.div`
121
157
  return `
122
158
  display: flex;
123
159
  cursor: ${isClickable ? "pointer" : "default"};
160
+ padding-left: ${theme.spacing.spacing_40}};
161
+
162
+ &:focus-visible {
163
+ outline: 2px solid ${theme.palette.border.dark};
164
+ outline-offset: 1px;
165
+ }
124
166
 
125
167
  ${isClickable && `
126
168
  &:hover > i {
@@ -137,10 +179,16 @@ var InputExtraSuffixStyled = styled.div`
137
179
  return `
138
180
  display: flex;
139
181
  cursor: ${isClickable ? "pointer" : "default"};
182
+ padding-right: ${theme.spacing.spacing_40}};
183
+
184
+ &:focus-visible {
185
+ outline: 2px solid ${theme.palette.border.dark};
186
+ outline-offset: 1px;
187
+ }
140
188
 
141
189
  ${isClickable && `
142
190
  &:hover > i {
143
- color: ${theme.palette.content.dark};
191
+ color: ${theme.palette.primary.default};
144
192
  }
145
193
  `}
146
194
  `;
@@ -149,16 +197,6 @@ var InputExtraSuffixStyled = styled.div`
149
197
  var TextFieldMessageStyled = styled.div`
150
198
  padding-left: ${({ theme }) => theme.spacing.spacing_40};
151
199
  `;
152
- var ResetInputIconStyled = styled.div`
153
- ${({ theme }) => `
154
- cursor: pointer;
155
- display: flex;
156
-
157
- :hover > i {
158
- color: ${theme.palette.content.dark}
159
- }
160
- `}
161
- `;
162
200
  var InputWrapperStyled = styled.div`
163
201
  ${({ theme, isFloatingLabel, variant, backgroundFill, hasError }) => {
164
202
  const borderColor = hasError ? theme.palette.error.default : theme.palette.border.medium;
@@ -169,15 +207,9 @@ var InputWrapperStyled = styled.div`
169
207
  align-items: center;
170
208
  min-width: 198px;
171
209
  width: 100%;
172
- height: 54px;
173
210
  color: ${theme.palette.content.default};
174
- gap: ${theme.spacing.spacing_30};
175
211
  background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
176
-
177
- padding-inline: ${theme.spacing.spacing_40};
178
-
179
- ${!isFloatingLabel && "margin-top: 8px"};
180
-
212
+
181
213
  ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
182
214
  border: 1px solid ${borderColor};
183
215
 
@@ -199,8 +231,12 @@ var InputWrapperStyled = styled.div`
199
231
  `};
200
232
 
201
233
  &:has(input[readonly]:not([disabled])) {
202
- background-color: ${theme.palette.surface.default};
203
- color: ${theme.palette.content.medium};
234
+ background-color: ${theme.palette.surface.light};
235
+ border: 1px solid ${theme.palette.surface.default};
236
+
237
+ &:focus-within, &:hover {
238
+ border: 1px solid ${theme.palette.informative.default};
239
+ }
204
240
  }
205
241
 
206
242
  &:has(input[disabled]), &:has(input[disabled]) > * {
@@ -240,6 +276,7 @@ var TextField = (_a) => {
240
276
  message: messageProp = "",
241
277
  type = "text",
242
278
  variant = "outlined",
279
+ scale = "standard",
243
280
  backgroundFill = "default",
244
281
  disabled = false,
245
282
  onChange = () => null,
@@ -263,6 +300,7 @@ var TextField = (_a) => {
263
300
  "message",
264
301
  "type",
265
302
  "variant",
303
+ "scale",
266
304
  "backgroundFill",
267
305
  "disabled",
268
306
  "onChange",
@@ -297,12 +335,10 @@ var TextField = (_a) => {
297
335
  }
298
336
  };
299
337
  const onBlur = (event) => {
338
+ setActiveInput(false);
300
339
  const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
301
- if (isEmptyOrOnlySpaces) {
302
- setActiveInput(false);
303
- if (required && requiredMessage) {
304
- setHasRequiredError(true);
305
- }
340
+ if (isEmptyOrOnlySpaces && required) {
341
+ setHasRequiredError(true);
306
342
  }
307
343
  if (rest.onBlur) {
308
344
  rest.onBlur(event);
@@ -313,7 +349,6 @@ var TextField = (_a) => {
313
349
  setActiveInput(false);
314
350
  onResetInput();
315
351
  };
316
- const handleResetIconEnter = (event) => event.code === "Enter" && handleResetInput();
317
352
  const handleExtraPreffixEnter = (event) => event.code === "Enter" && (extraPrefix == null ? void 0 : extraPrefix.onClick) && extraPrefix.onClick(inputValue);
318
353
  const handleExtraSuffixEnter = (event) => event.code === "Enter" && (extraSuffix == null ? void 0 : extraSuffix.onClick) && extraSuffix.onClick(inputValue);
319
354
  const messageColor = disabled ? "content.light" : "content.medium";
@@ -331,83 +366,88 @@ var TextField = (_a) => {
331
366
  isFloatingLabel,
332
367
  style,
333
368
  children: [
334
- !isActiveInput || !isFloatingLabel || !isSearchType ? /* @__PURE__ */ jsx(
335
- LabelField,
336
- {
337
- hasError: showError,
338
- htmlFor: textFieldId,
339
- icon: labelIcon,
340
- isActive: isActiveInput || type === "date",
341
- isDisabled: disabled,
342
- isFloating: isFloatingLabel,
343
- isRequired: required,
344
- children: label
345
- }
346
- ) : null,
347
- /* @__PURE__ */ jsxs(
348
- InputWrapperStyled,
349
- {
350
- backgroundFill,
351
- "data-testid": "input-wrapper",
352
- hasError: showError,
353
- isFloatingLabel,
354
- variant,
355
- children: [
356
- (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ jsx(
357
- InputExtraPrefixStyled,
358
- __spreadProps(__spreadValues({
359
- "data-testid": "extra-preffix"
360
- }, !!extraPreffixOnClick && {
361
- tabIndex: 0,
362
- onClick: () => extraPreffixOnClick(inputValue),
363
- onKeyDown: handleExtraPreffixEnter
364
- }), {
365
- children: extraPrefix.component
366
- })
367
- ) : null,
368
- /* @__PURE__ */ jsx(
369
- InputFieldStyled,
370
- __spreadProps(__spreadValues({
371
- "data-error": showError,
372
- "data-testid": "input-field",
373
- disabled,
374
- id: textFieldId,
375
- isFloatingLabel,
376
- isSearchType,
377
- name: name != null ? name : textFieldId,
378
- ref: inputRef,
379
- type,
380
- value: inputValue
381
- }, rest), {
382
- onBlur,
383
- onChange: handleChange,
384
- onFocus
385
- })
386
- ),
387
- isSearchType && !!inputValue ? /* @__PURE__ */ jsx(
388
- ResetInputIconStyled,
389
- {
390
- "data-testid": "reset-icon",
391
- onKeyDown: handleResetIconEnter,
392
- tabIndex: 0,
393
- children: /* @__PURE__ */ jsx(IconButton, { onClick: handleResetInput, children: /* @__PURE__ */ jsx(Icon, { code: "close_small" }) })
394
- }
395
- ) : null,
396
- (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ jsx(
397
- InputExtraSuffixStyled,
398
- __spreadProps(__spreadValues({
399
- "data-testid": "extra-suffix"
400
- }, !!extraSuffixOnClick && {
401
- tabIndex: 0,
402
- onClick: () => extraSuffixOnClick(inputValue),
403
- onKeyDown: handleExtraSuffixEnter
404
- }), {
405
- children: extraSuffix.component
406
- })
407
- ) : null
408
- ]
409
- }
410
- ),
369
+ /* @__PURE__ */ jsxs(InputContainerStyled, { isFloatingLabel, children: [
370
+ /* @__PURE__ */ jsx(
371
+ LabelField,
372
+ {
373
+ hasError: showError,
374
+ htmlFor: textFieldId,
375
+ icon: labelIcon,
376
+ isActive: activeInput,
377
+ isCentered: !isActiveInput && isFloatingLabel,
378
+ isDisabled: disabled,
379
+ isFloating: isFloatingLabel,
380
+ isInputFilled: !!inputValue,
381
+ isRequired: required,
382
+ scale,
383
+ children: label
384
+ }
385
+ ),
386
+ /* @__PURE__ */ jsxs(
387
+ InputWrapperStyled,
388
+ {
389
+ backgroundFill,
390
+ "data-testid": `${testId}-wrapper`,
391
+ hasError: showError,
392
+ isFloatingLabel,
393
+ variant,
394
+ children: [
395
+ (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ jsx(
396
+ InputExtraPrefixStyled,
397
+ __spreadProps(__spreadValues({
398
+ "data-testid": "extra-preffix"
399
+ }, !!extraPreffixOnClick && {
400
+ tabIndex: 0,
401
+ onClick: () => extraPreffixOnClick(inputValue),
402
+ onKeyDown: handleExtraPreffixEnter
403
+ }), {
404
+ children: extraPrefix.component
405
+ })
406
+ ) : null,
407
+ /* @__PURE__ */ jsx(
408
+ InputFieldStyled,
409
+ __spreadProps(__spreadValues({
410
+ "data-error": showError,
411
+ "data-testid": `${testId}-input`,
412
+ disabled,
413
+ id: textFieldId,
414
+ isFloatingLabel,
415
+ name: name != null ? name : textFieldId,
416
+ ref: inputRef,
417
+ scale,
418
+ type,
419
+ value: inputValue
420
+ }, rest), {
421
+ onBlur,
422
+ onChange: handleChange,
423
+ onFocus
424
+ })
425
+ ),
426
+ isSearchType && !!inputValue ? /* @__PURE__ */ jsx(
427
+ IconButton,
428
+ {
429
+ dataTestId: "reset-icon",
430
+ onClick: handleResetInput,
431
+ style: { marginRight: 12 },
432
+ children: /* @__PURE__ */ jsx(Icon, { code: "close" })
433
+ }
434
+ ) : null,
435
+ (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ jsx(
436
+ InputExtraSuffixStyled,
437
+ __spreadProps(__spreadValues({
438
+ "data-testid": "extra-suffix"
439
+ }, !!extraSuffixOnClick && {
440
+ tabIndex: 0,
441
+ onClick: () => extraSuffixOnClick(inputValue),
442
+ onKeyDown: handleExtraSuffixEnter
443
+ }), {
444
+ children: extraSuffix.component
445
+ })
446
+ ) : null
447
+ ]
448
+ }
449
+ )
450
+ ] }),
411
451
  message ? /* @__PURE__ */ jsx(TextFieldMessageStyled, { children: /* @__PURE__ */ jsx(
412
452
  Typography,
413
453
  {
@@ -423,11 +463,11 @@ var TextField = (_a) => {
423
463
  );
424
464
  };
425
465
  export {
466
+ InputContainerStyled,
426
467
  InputExtraPrefixStyled,
427
468
  InputExtraSuffixStyled,
428
469
  InputFieldStyled,
429
470
  InputWrapperStyled,
430
- ResetInputIconStyled,
431
471
  TextField,
432
472
  TextFieldMessageStyled,
433
473
  TextFieldStyled
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-text-field",
3
- "version": "1.0.0-beta.78",
3
+ "version": "1.0.0-beta.80",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -21,8 +21,8 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@dt-dds/react-core": "1.0.0-beta.50",
24
- "@dt-dds/react-spinner": "1.0.0-beta.73",
25
- "@dt-dds/react-label-field": "1.0.0-beta.48",
24
+ "@dt-dds/react-spinner": "1.0.0-beta.75",
25
+ "@dt-dds/react-label-field": "1.0.0-beta.49",
26
26
  "@dt-dds/react-typography": "1.0.0-beta.41",
27
27
  "@dt-dds/react-icon-button": "1.0.0-beta.18",
28
28
  "@dt-dds/react-icon": "1.0.0-beta.51",