@dt-dds/react-text-field 1.0.0-beta.120 → 1.0.0-beta.122

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 (4) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/index.js +23 -14
  3. package/dist/index.mjs +23 -14
  4. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @dt-ui/react-text-field
2
2
 
3
+ ## 1.0.0-beta.122
4
+
5
+ ### Patch Changes
6
+
7
+ - fix: missing readonly bottomLine styles
8
+
9
+ ## 1.0.0-beta.121
10
+
11
+ ### Patch Changes
12
+
13
+ - chore: update to ESLint 10
14
+ - chore: update to ESLint 9
15
+ - fix: default icon type in themes
16
+ - Updated dependencies
17
+ - Updated dependencies
18
+ - Updated dependencies
19
+ - @dt-dds/react-core@1.0.0-beta.60
20
+ - @dt-dds/react-tooltip@1.0.0-beta.70
21
+ - @dt-dds/react-icon@1.0.0-beta.64
22
+ - @dt-dds/react-label-field@1.0.0-beta.62
23
+ - @dt-dds/react-icon-button@1.0.0-beta.30
24
+ - @dt-dds/react-spinner@1.0.0-beta.114
25
+ - @dt-dds/react-typography@1.0.0-beta.51
26
+ - @dt-dds/themes@1.0.0-beta.15
27
+
3
28
  ## 1.0.0-beta.120
4
29
 
5
30
  ### Patch Changes
package/dist/index.js CHANGED
@@ -242,35 +242,44 @@ var InputWrapperStyled = import_styled.default.div`
242
242
  width: 100%;
243
243
  color: ${theme.palette.content.default};
244
244
  background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
245
-
245
+
246
246
  ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
247
247
  border: 1px solid ${borderColor};
248
248
 
249
249
  &:focus-within,
250
- &:hover:not([disabled]) {
250
+ &:hover:not([disabled]) {
251
251
  border: 1px solid ${borderFocusColor};
252
252
  }
253
253
 
254
- &:hover:([disabled]) {
254
+ &:hover:([disabled]) {
255
255
  border: 1px solid ${borderColor};
256
256
  }
257
+
258
+ &:has(input[readonly]:not([disabled])) {
259
+ background-color: ${theme.palette.surface.light};
260
+ border: 1px solid ${theme.palette.surface.default};
261
+
262
+ &:focus-within, &:hover {
263
+ border: 1px solid ${theme.palette.informative.default};
264
+ }
265
+ }
257
266
  ` : `border-radius: ${theme.shape.formField} ${theme.shape.formField} 0 0;
258
267
  border-bottom: 1px solid ${borderColor};
259
-
268
+
260
269
  &:focus-within,
261
- &:hover:not([disabled]) {
262
- border-bottom: 1px solid ${borderFocusColor};
270
+ &:hover:not([disabled]) {
271
+ border-bottom: 1px solid ${borderFocusColor};
263
272
  }
264
- `};
265
273
 
266
- &:has(input[readonly]:not([disabled])) {
267
- background-color: ${theme.palette.surface.light};
268
- border: 1px solid ${theme.palette.surface.default};
274
+ &:has(input[readonly]:not([disabled])) {
275
+ background-color: ${theme.palette.surface.light};
276
+ border-bottom: 1px solid ${theme.palette.surface.default};
269
277
 
270
- &:focus-within, &:hover {
271
- border: 1px solid ${theme.palette.informative.default};
278
+ &:focus-within, &:hover {
279
+ border-bottom: 1px solid ${theme.palette.informative.default};
280
+ }
272
281
  }
273
- }
282
+ `};
274
283
 
275
284
  &:has(input[disabled]), &:has(input[disabled]) > * {
276
285
  cursor: not-allowed;
@@ -344,7 +353,7 @@ var TextField = (0, import_react.forwardRef)(
344
353
  "onResetInput"
345
354
  ]);
346
355
  const [activeInput, setActiveInput] = (0, import_react.useState)(false);
347
- const [inputValue, setInputValue] = (0, import_react.useState)("");
356
+ const [inputValue, setInputValue] = (0, import_react.useState)(initialValue != null ? initialValue : "");
348
357
  const [hasRequiredError, setHasRequiredError] = (0, import_react.useState)(false);
349
358
  const textFieldId = id != null ? id : label.replaceAll(" ", "-").toLowerCase();
350
359
  const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLowerCase()}-text-field`;
package/dist/index.mjs CHANGED
@@ -206,35 +206,44 @@ var InputWrapperStyled = styled.div`
206
206
  width: 100%;
207
207
  color: ${theme.palette.content.default};
208
208
  background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
209
-
209
+
210
210
  ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
211
211
  border: 1px solid ${borderColor};
212
212
 
213
213
  &:focus-within,
214
- &:hover:not([disabled]) {
214
+ &:hover:not([disabled]) {
215
215
  border: 1px solid ${borderFocusColor};
216
216
  }
217
217
 
218
- &:hover:([disabled]) {
218
+ &:hover:([disabled]) {
219
219
  border: 1px solid ${borderColor};
220
220
  }
221
+
222
+ &:has(input[readonly]:not([disabled])) {
223
+ background-color: ${theme.palette.surface.light};
224
+ border: 1px solid ${theme.palette.surface.default};
225
+
226
+ &:focus-within, &:hover {
227
+ border: 1px solid ${theme.palette.informative.default};
228
+ }
229
+ }
221
230
  ` : `border-radius: ${theme.shape.formField} ${theme.shape.formField} 0 0;
222
231
  border-bottom: 1px solid ${borderColor};
223
-
232
+
224
233
  &:focus-within,
225
- &:hover:not([disabled]) {
226
- border-bottom: 1px solid ${borderFocusColor};
234
+ &:hover:not([disabled]) {
235
+ border-bottom: 1px solid ${borderFocusColor};
227
236
  }
228
- `};
229
237
 
230
- &:has(input[readonly]:not([disabled])) {
231
- background-color: ${theme.palette.surface.light};
232
- border: 1px solid ${theme.palette.surface.default};
238
+ &:has(input[readonly]:not([disabled])) {
239
+ background-color: ${theme.palette.surface.light};
240
+ border-bottom: 1px solid ${theme.palette.surface.default};
233
241
 
234
- &:focus-within, &:hover {
235
- border: 1px solid ${theme.palette.informative.default};
242
+ &:focus-within, &:hover {
243
+ border-bottom: 1px solid ${theme.palette.informative.default};
244
+ }
236
245
  }
237
- }
246
+ `};
238
247
 
239
248
  &:has(input[disabled]), &:has(input[disabled]) > * {
240
249
  cursor: not-allowed;
@@ -308,7 +317,7 @@ var TextField = forwardRef(
308
317
  "onResetInput"
309
318
  ]);
310
319
  const [activeInput, setActiveInput] = useState(false);
311
- const [inputValue, setInputValue] = useState("");
320
+ const [inputValue, setInputValue] = useState(initialValue != null ? initialValue : "");
312
321
  const [hasRequiredError, setHasRequiredError] = useState(false);
313
322
  const textFieldId = id != null ? id : label.replaceAll(" ", "-").toLowerCase();
314
323
  const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLowerCase()}-text-field`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-text-field",
3
- "version": "1.0.0-beta.120",
3
+ "version": "1.0.0-beta.122",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -20,14 +20,14 @@
20
20
  "test:update:snapshot": "jest -u"
21
21
  },
22
22
  "dependencies": {
23
- "@dt-dds/react-core": "1.0.0-beta.59",
24
- "@dt-dds/react-spinner": "1.0.0-beta.113",
25
- "@dt-dds/react-label-field": "1.0.0-beta.61",
26
- "@dt-dds/react-typography": "1.0.0-beta.50",
27
- "@dt-dds/react-icon-button": "1.0.0-beta.29",
28
- "@dt-dds/react-icon": "1.0.0-beta.63",
29
- "@dt-dds/react-tooltip": "1.0.0-beta.69",
30
- "@dt-dds/themes": "1.0.0-beta.14"
23
+ "@dt-dds/react-core": "1.0.0-beta.60",
24
+ "@dt-dds/react-spinner": "1.0.0-beta.114",
25
+ "@dt-dds/react-label-field": "1.0.0-beta.62",
26
+ "@dt-dds/react-typography": "1.0.0-beta.51",
27
+ "@dt-dds/react-icon-button": "1.0.0-beta.30",
28
+ "@dt-dds/react-icon": "1.0.0-beta.64",
29
+ "@dt-dds/react-tooltip": "1.0.0-beta.70",
30
+ "@dt-dds/themes": "1.0.0-beta.15"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@babel/core": "^7.22.9",