@decisiv/ui-components 2.0.1-alpha.207 → 2.0.1-alpha.208

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 (9) hide show
  1. package/lib/atoms/InputField/HelpMessage.d.ts.map +1 -1
  2. package/lib/atoms/InputField/HelpMessage.js +21 -6
  3. package/lib/atoms/InputField/index.d.ts.map +1 -1
  4. package/lib/atoms/InputField/index.js +2 -1
  5. package/lib/atoms/InputField/index.test.js +27 -0
  6. package/lib/providers/ConfigProvider/utils/translations.d.ts +1 -0
  7. package/lib/providers/ConfigProvider/utils/translations.d.ts.map +1 -1
  8. package/lib/providers/ConfigProvider/utils/translations.js +2 -1
  9. package/package.json +2 -2
package/lib/atoms/InputField/HelpMessage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"HelpMessage.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/HelpMessage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6BhE;kBA7BQ,WAAW;;;;;;;;;;;;;;AA8CpB,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"HelpMessage.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/HelpMessage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6ChE;kBA7CQ,WAAW;;;;;;;;;;;;;;AA8DpB,eAAe,WAAW,CAAC"}
package/lib/atoms/InputField/HelpMessage.js CHANGED
@@ -31,14 +31,29 @@ function HelpMessage(props) {
31
31
  _props$contentLength = props.contentLength,
32
32
  contentLength = _props$contentLength === void 0 ? 0 : _props$contentLength;
33
33
  var translate = (0, _useTranslations.default)();
34
- var showCount = Boolean(maxLength && showCharacterCount); // You have {remaining} characters left ({max} max).
34
+ var showCount = Boolean(maxLength && showCharacterCount);
35
+ var countSurpassed = maxLength && contentLength > maxLength;
36
+
37
+ var countMessage = _react.default.useMemo(function () {
38
+ if (!showCount) {
39
+ return null;
40
+ }
41
+
42
+ if (countSurpassed) {
43
+ return translate(undefined, 'textArea.countMessageOver', {
44
+ surplus: _react.default.createElement(RemainingCount, null, contentLength - maxLength),
45
+ max: "".concat(maxLength)
46
+ });
47
+ }
48
+
49
+ return translate(undefined, 'textArea.countMessage', {
50
+ remaining: _react.default.createElement(RemainingCount, null, maxLength - contentLength),
51
+ max: "".concat(maxLength)
52
+ });
53
+ }, [contentLength, countSurpassed, maxLength, showCount, translate]);
35
54
 
36
- var countMessage = showCount && translate(undefined, 'textArea.countMessage', {
37
- remaining: _react.default.createElement(RemainingCount, null, maxLength - contentLength),
38
- max: "".concat(maxLength)
39
- });
40
55
  return helpMessage || showCount ? _react.default.createElement(_Message.default, {
41
- intent: "help"
56
+ intent: countSurpassed ? 'warning' : 'help'
42
57
  }, helpMessage, helpMessage && showCount && _react.default.createElement("br", null), countMessage) : null;
43
58
  }
44
59
 
package/lib/atoms/InputField/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkLD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoLD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
package/lib/atoms/InputField/index.js CHANGED
@@ -159,6 +159,7 @@ function InputField(props, targetRef) {
159
159
  var labelId = labelIdProp || "".concat(targetId, "-label");
160
160
  var translate = (0, _useTranslations.default)();
161
161
  var requiredMessage = translate(requiredMessageProp, 'textField.requiredMessage');
162
+ var isCountOverflow = !!maxLength && contentLength > maxLength;
162
163
  return _react.default.createElement(_Containers.InputFieldContainer, {
163
164
  overflow: overflow,
164
165
  style: style
@@ -166,7 +167,7 @@ function InputField(props, targetRef) {
166
167
  cursor: cursor,
167
168
  hiddenLabel: hideLabel,
168
169
  disabled: disabled,
169
- hasWarning: !!warningMessage || withWarningIntent,
170
+ hasWarning: !!warningMessage || withWarningIntent || isCountOverflow,
170
171
  isFocused: isFocused,
171
172
  readOnly: readOnly,
172
173
  ref: inputContainerRef,
package/lib/atoms/InputField/index.test.js CHANGED
@@ -113,5 +113,32 @@ describe('InputField', function () {
113
113
  }));
114
114
  expect(getByText(textFinder("You have ".concat(100 - (initialValue.length + 3), " characters left (100 max).")))).toBeTruthy();
115
115
  });
116
+ it('shows overflow message when values is larger than maxLength', function () {
117
+ var label = 'label';
118
+ var initialValue = 'Initial text';
119
+
120
+ var _render3 = render(_react.default.createElement(_.default, {
121
+ label: label,
122
+ value: initialValue,
123
+ showCharacterCount: true,
124
+ maxLength: 15
125
+ }, function (p) {
126
+ return _react.default.createElement(Dummy, p);
127
+ })),
128
+ getByText = _render3.getByText,
129
+ rerender = _render3.rerender;
130
+
131
+ expect(getByText(textFinder("You have ".concat(15 - initialValue.length, " characters left (15 max).")))).toBeTruthy();
132
+ var newValue = "".concat(initialValue, " with some additional text");
133
+ rerender(_react.default.createElement(_.default, {
134
+ label: label,
135
+ value: newValue,
136
+ showCharacterCount: true,
137
+ maxLength: 15
138
+ }, function (p) {
139
+ return _react.default.createElement(Dummy, p);
140
+ }));
141
+ expect(getByText(textFinder("You are ".concat(newValue.length - 15, " characters over the limit (15 max).")))).toBeTruthy();
142
+ });
116
143
  });
117
144
  });
package/lib/providers/ConfigProvider/utils/translations.d.ts CHANGED
@@ -129,6 +129,7 @@ declare const translations: {
129
129
  };
130
130
  textArea: {
131
131
  readonly countMessage: "You have {remaining} characters left ({max} max).";
132
+ readonly countMessageOver: "You are {surplus} characters over the limit ({max} max).";
132
133
  };
133
134
  textField: {
134
135
  readonly requiredMessage: "Required";
package/lib/providers/ConfigProvider/utils/translations.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JR,CAAC;AAEX,oBAAY,YAAY,GAAG,OAAO,YAAY,CAAC;AAE/C,eAAe,YAAY,CAAC"}
package/lib/providers/ConfigProvider/utils/translations.js CHANGED
@@ -134,7 +134,8 @@ var translations = {
134
134
  }
135
135
  },
136
136
  textArea: {
137
- countMessage: 'You have {remaining} characters left ({max} max).'
137
+ countMessage: 'You have {remaining} characters left ({max} max).',
138
+ countMessageOver: 'You are {surplus} characters over the limit ({max} max).'
138
139
  },
139
140
  textField: {
140
141
  requiredMessage: 'Required'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@decisiv/ui-components",
3
- "version": "2.0.1-alpha.207+7ba6abc",
3
+ "version": "2.0.1-alpha.208+234b210",
4
4
  "description": "Decisiv's design system React components",
5
5
  "author": "Decisiv UI Development Team",
6
6
  "license": "MIT",
@@ -71,5 +71,5 @@
71
71
  "access": "public"
72
72
  },
73
73
  "private": false,
74
- "gitHead": "7ba6abc7838c58aa2cbe7a117b03d3a308528738"
74
+ "gitHead": "234b21075a0d0b7583f536d3600d2c2ab4cda05f"
75
75
  }