@commercetools-uikit/localized-multiline-text-input 19.9.0 → 19.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.
@@ -496,7 +496,7 @@ LocalizedMultilineTextInput.isTouched = localizedUtils.isTouched;
496
496
  var LocalizedMultilineTextInput$1 = LocalizedMultilineTextInput;
497
497
 
498
498
  // NOTE: This string will be replaced on build time with the package version.
499
- var version = "19.9.0";
499
+ var version = "19.11.0";
500
500
 
501
501
  exports["default"] = LocalizedMultilineTextInput$1;
502
502
  exports.version = version;
@@ -381,7 +381,7 @@ LocalizedMultilineTextInput.isTouched = localizedUtils.isTouched;
381
381
  var LocalizedMultilineTextInput$1 = LocalizedMultilineTextInput;
382
382
 
383
383
  // NOTE: This string will be replaced on build time with the package version.
384
- var version = "19.9.0";
384
+ var version = "19.11.0";
385
385
 
386
386
  exports["default"] = LocalizedMultilineTextInput$1;
387
387
  exports.version = version;
@@ -474,6 +474,6 @@ LocalizedMultilineTextInput.isTouched = isTouched;
474
474
  var LocalizedMultilineTextInput$1 = LocalizedMultilineTextInput;
475
475
 
476
476
  // NOTE: This string will be replaced on build time with the package version.
477
- var version = "19.9.0";
477
+ var version = "19.11.0";
478
478
 
479
479
  export { LocalizedMultilineTextInput$1 as default, version };
@@ -4,38 +4,123 @@ interface HTMLLocalizedTextAreaElement extends HTMLTextAreaElement {
4
4
  language: string;
5
5
  }
6
6
  export type TLocalizedMultilineTextInputProps = {
7
+ /**
8
+ * Used as prefix of HTML `id` property. Each input field id will have the language as a suffix (`${idPrefix}.${lang}`), e.g. `foo.en`
9
+ */
7
10
  id?: string;
11
+ /**
12
+ * Used as HTML `name` property for each input field. Each input field name will have the language as a suffix (`${namePrefix}.${lang}`), e.g. `foo.en`
13
+ */
8
14
  name?: string;
15
+ /**
16
+ * Used as HTML `autocomplete` property
17
+ */
9
18
  autoComplete?: string;
19
+ /**
20
+ * Indicate if the value entered in the input is invalid.
21
+ */
10
22
  'aria-invalid'?: boolean;
23
+ /**
24
+ * HTML ID of an element containing an error message related to the input.
25
+ */
11
26
  'aria-errormessage'?: string;
27
+ /**
28
+ * Values to use. Keyed by language, the values are the actual values, e.g. `{ en: 'Horse', de: 'Pferd' }`
29
+ * <br />
30
+ * The input doesn't accept a "languages" prop, instead all possible
31
+ * languages have to exist (with empty or filled strings) on the value:
32
+ * <br />
33
+ * { en: 'foo', de: '', es: '' }
34
+ */
12
35
  value: {
13
36
  [key: string]: string;
14
37
  };
38
+ /**
39
+ * Gets called when any input is changed. Is called with the change event of the changed input.
40
+ */
15
41
  onChange?: ChangeEventHandler<HTMLLocalizedTextAreaElement>;
42
+ /**
43
+ * Specifies which language will be shown in case the `LocalizedTextInput` is collapsed.
44
+ */
16
45
  selectedLanguage: string;
46
+ /**
47
+ * Called when input is blurred
48
+ */
17
49
  onBlur?: FocusEventHandler<HTMLLocalizedTextAreaElement>;
50
+ /**
51
+ * Called when input is focused
52
+ */
18
53
  onFocus?: () => void;
54
+ /**
55
+ * Expands input components holding multiline values instead of collpasing them by default.
56
+ */
19
57
  defaultExpandMultilineText?: boolean;
58
+ /**
59
+ * Use this property to turn off caching input measurements.
60
+ */
20
61
  cacheMeasurements?: boolean;
62
+ /**
63
+ * Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`.
64
+ */
21
65
  hideLanguageExpansionControls?: boolean;
66
+ /**
67
+ * Controls whether one or all languages are visible by default. Pass `true` to show all languages by default.
68
+ */
22
69
  defaultExpandLanguages?: boolean;
70
+ /**
71
+ * Sets the focus on the first input when `true` is passed.
72
+ */
23
73
  isAutofocussed?: boolean;
74
+ /**
75
+ * Use this property to reduce the paddings of the component for a ui compact variant
76
+ */
24
77
  isCondensed?: boolean;
78
+ /**
79
+ * Disables all input fields.
80
+ */
25
81
  isDisabled?: boolean;
82
+ /**
83
+ * Disables all input fields and shows them in read-only mode.
84
+ */
26
85
  isReadOnly?: boolean;
86
+ /**
87
+ * Placeholders for each language. Object of the same shape as `value`.
88
+ */
27
89
  placeholder?: {
28
90
  [key: string]: string;
29
91
  };
92
+ /**
93
+ * Horizontal size limit of the input fields.
94
+ */
30
95
  horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
96
+ /**
97
+ * Will apply the error state to each input without showing any error message.
98
+ */
31
99
  hasError?: boolean;
100
+ /**
101
+ * Will apply the warning state to each input without showing any error message.
102
+ */
32
103
  hasWarning?: boolean;
104
+ /**
105
+ * Used to show errors underneath the inputs of specific locales. Pass an object whose key is a locale and whose value is the error to show for that key.
106
+ */
33
107
  errors?: {
34
108
  [key: string]: ReactNode;
35
109
  };
110
+ /**
111
+ * Used to show warnings underneath the inputs of specific locales. Pass an object whose key is a locale and whose value is the warning to show for that key.
112
+ */
36
113
  warnings?: {
37
114
  [key: string]: ReactNode;
38
115
  };
116
+ /**
117
+ * An object mapping locales to additional messages to be rendered below each input element.
118
+ Example:
119
+ {
120
+ en: 'Some value',
121
+ es: 'Algún valor',
122
+ }
123
+ */
39
124
  additionalInfo?: Record<string, string | ReactNode | (MessageDescriptor & {
40
125
  values: Record<string, ReactNode>;
41
126
  })>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/localized-multiline-text-input",
3
3
  "description": "A controlled text input component for localized multi-line strings with validation states.",
4
- "version": "19.9.0",
4
+ "version": "19.11.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,17 +21,17 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/constraints": "19.9.0",
25
- "@commercetools-uikit/design-system": "19.9.0",
26
- "@commercetools-uikit/flat-button": "19.9.0",
27
- "@commercetools-uikit/hooks": "19.9.0",
28
- "@commercetools-uikit/icons": "19.9.0",
29
- "@commercetools-uikit/input-utils": "19.9.0",
30
- "@commercetools-uikit/localized-utils": "19.9.0",
31
- "@commercetools-uikit/messages": "19.9.0",
32
- "@commercetools-uikit/spacings-stack": "19.9.0",
33
- "@commercetools-uikit/text": "19.9.0",
34
- "@commercetools-uikit/utils": "19.9.0",
24
+ "@commercetools-uikit/constraints": "19.11.0",
25
+ "@commercetools-uikit/design-system": "19.11.0",
26
+ "@commercetools-uikit/flat-button": "19.11.0",
27
+ "@commercetools-uikit/hooks": "19.11.0",
28
+ "@commercetools-uikit/icons": "19.11.0",
29
+ "@commercetools-uikit/input-utils": "19.11.0",
30
+ "@commercetools-uikit/localized-utils": "19.11.0",
31
+ "@commercetools-uikit/messages": "19.11.0",
32
+ "@commercetools-uikit/spacings-stack": "19.11.0",
33
+ "@commercetools-uikit/text": "19.11.0",
34
+ "@commercetools-uikit/utils": "19.11.0",
35
35
  "@emotion/react": "^11.10.5",
36
36
  "@emotion/styled": "^11.10.5",
37
37
  "prop-types": "15.8.1",