@commercetools-uikit/password-field 12.2.7 → 13.0.2
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/README.md +40 -25
- package/dist/commercetools-uikit-password-field.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-password-field.cjs.dev.js +43 -148
- package/dist/commercetools-uikit-password-field.cjs.prod.js +16 -9
- package/dist/commercetools-uikit-password-field.esm.js +43 -147
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/messages.d.ts +13 -0
- package/dist/declarations/src/password-field.d.ts +33 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +16 -16
package/README.md
CHANGED
|
@@ -45,31 +45,46 @@ export default Example;
|
|
|
45
45
|
|
|
46
46
|
## Properties
|
|
47
47
|
|
|
48
|
-
| Props | Type
|
|
49
|
-
| ---------------------- |
|
|
50
|
-
| `id` | `string`
|
|
51
|
-
| `horizontalConstraint` | `
|
|
52
|
-
| `errors` | `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
|
|
48
|
+
| Props | Type | Required | Default | Description |
|
|
49
|
+
| ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
|
|
51
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
|
|
52
|
+
| `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.
<br />
Unknown errors will be forwarded to `renderError` |
|
|
53
|
+
| `renderError` | `Function`<br/>[See signature.](#signature-renderError) | | | Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
<br />
Signature: `(key, error) => React.node` |
|
|
54
|
+
| `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
|
|
55
|
+
| `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
|
|
56
|
+
| `name` | `string` | | | Used as HTML name of the input component. property |
|
|
57
|
+
| `value` | `string` | ✅ | | Value of the input component. |
|
|
58
|
+
| `onChange` | `ChangeEventHandler` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
<br />
Signature: `(event) => void` |
|
|
59
|
+
| `onBlur` | `FocusEventHandler` | | | Called when input is blurred
<br />
Signature: `(event) => void` |
|
|
60
|
+
| `onFocus` | `FocusEventHandler` | | | Called when input is focused
<br />
Signature: `(event) => void` |
|
|
61
|
+
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
|
|
62
|
+
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
|
|
63
|
+
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
|
|
64
|
+
| `placeholder` | `string` | | | Placeholder text for the input |
|
|
65
|
+
| `autoComplete` | `union`<br/>Possible values:<br/>`'on' , 'off' , 'current-password' , 'new-password'` | | | Password autocomplete mode |
|
|
66
|
+
| `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
|
|
67
|
+
| `hint` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. |
|
|
68
|
+
| `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
|
|
69
|
+
| `onInfoButtonClick` | `Function`<br/>[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
<br />
Info button will only be visible when this prop is passed.
<br />
Signature: `(event) => void` |
|
|
70
|
+
| `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
<br />
Will only get rendered when `hint` is passed as well. |
|
|
71
|
+
| `badge` | `ReactNode` | | | Badge to be displayed beside the label.
<br />
Might be used to display additional information about the content of the field (E.g verified email) |
|
|
72
|
+
|
|
73
|
+
## Signatures
|
|
74
|
+
|
|
75
|
+
### Signature `renderError`
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
(key: string, error?: boolean) => ReactNode;
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Signature `onInfoButtonClick`
|
|
82
|
+
|
|
83
|
+
```ts
|
|
84
|
+
(
|
|
85
|
+
event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
|
|
86
|
+
) => void
|
|
87
|
+
```
|
|
73
88
|
|
|
74
89
|
## `data-*` props
|
|
75
90
|
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
6
6
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
7
|
+
var _pt = require('prop-types');
|
|
7
8
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
8
9
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
9
10
|
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
@@ -14,9 +15,8 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
14
15
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
15
16
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
16
17
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
17
|
-
var
|
|
18
|
+
var react = require('react');
|
|
18
19
|
var reactIntl = require('react-intl');
|
|
19
|
-
var requiredIf = require('react-required-if');
|
|
20
20
|
var utils = require('@commercetools-uikit/utils');
|
|
21
21
|
var hooks = require('@commercetools-uikit/hooks');
|
|
22
22
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
@@ -31,6 +31,7 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
|
31
31
|
|
|
32
32
|
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
33
33
|
|
|
34
|
+
var _pt__default = /*#__PURE__*/_interopDefault(_pt);
|
|
34
35
|
var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
|
|
35
36
|
var _Object$values__default = /*#__PURE__*/_interopDefault(_Object$values);
|
|
36
37
|
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
|
|
@@ -41,8 +42,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
|
|
|
41
42
|
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
|
|
42
43
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
43
44
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
44
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
45
|
-
var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
|
|
46
45
|
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
|
|
47
46
|
var Inline__default = /*#__PURE__*/_interopDefault(Inline);
|
|
48
47
|
var Stack__default = /*#__PURE__*/_interopDefault(Stack);
|
|
@@ -64,9 +63,9 @@ var messages = reactIntl.defineMessages({
|
|
|
64
63
|
}
|
|
65
64
|
});
|
|
66
65
|
|
|
67
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object);
|
|
66
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
68
67
|
|
|
69
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
68
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
70
69
|
var sequentialId = utils.createSequentialId('password-field-');
|
|
71
70
|
|
|
72
71
|
var hasErrors = function hasErrors(errors) {
|
|
@@ -75,6 +74,10 @@ var hasErrors = function hasErrors(errors) {
|
|
|
75
74
|
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
76
75
|
};
|
|
77
76
|
|
|
77
|
+
var defaultProps = {
|
|
78
|
+
horizontalConstraint: 'scale'
|
|
79
|
+
};
|
|
80
|
+
|
|
78
81
|
var PasswordField = function PasswordField(props) {
|
|
79
82
|
var intl = reactIntl.useIntl();
|
|
80
83
|
|
|
@@ -85,6 +88,15 @@ var PasswordField = function PasswordField(props) {
|
|
|
85
88
|
|
|
86
89
|
var id = hooks.useFieldId(props.id, sequentialId);
|
|
87
90
|
var hasError = props.touched && hasErrors(props.errors);
|
|
91
|
+
|
|
92
|
+
if (!props.isReadOnly) {
|
|
93
|
+
process.env.NODE_ENV !== "production" ? utils.warning(Boolean(props.onChange), 'PasswordField: `onChange` is required when is not read only.') : void 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
if (props.hintIcon) {
|
|
97
|
+
process.env.NODE_ENV !== "production" ? utils.warning(typeof props.hint === 'string' || /*#__PURE__*/react.isValidElement(props.hint), 'PasswordField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
98
|
+
}
|
|
99
|
+
|
|
88
100
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
89
101
|
max: props.horizontalConstraint,
|
|
90
102
|
children: jsxRuntime.jsxs(Stack__default["default"], {
|
|
@@ -131,153 +143,36 @@ var PasswordField = function PasswordField(props) {
|
|
|
131
143
|
});
|
|
132
144
|
};
|
|
133
145
|
|
|
134
|
-
PasswordField.displayName = 'PasswordField';
|
|
135
146
|
PasswordField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
* Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
|
|
159
|
-
* <br />
|
|
160
|
-
* Signature: `(key, error) => React.node`
|
|
161
|
-
*/
|
|
162
|
-
renderError: PropTypes__default["default"].func,
|
|
163
|
-
|
|
164
|
-
/**
|
|
165
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
166
|
-
*/
|
|
167
|
-
isRequired: PropTypes__default["default"].bool,
|
|
168
|
-
|
|
169
|
-
/**
|
|
170
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
171
|
-
*/
|
|
172
|
-
touched: PropTypes__default["default"].bool,
|
|
173
|
-
// PasswordInput
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
* Used as HTML name of the input component. property
|
|
177
|
-
*/
|
|
178
|
-
name: PropTypes__default["default"].string,
|
|
179
|
-
|
|
180
|
-
/**
|
|
181
|
-
* Value of the input component.
|
|
182
|
-
*/
|
|
183
|
-
value: PropTypes__default["default"].string.isRequired,
|
|
184
|
-
|
|
185
|
-
/**
|
|
186
|
-
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
|
|
187
|
-
* <br />
|
|
188
|
-
* Signature: `(event) => void`
|
|
189
|
-
*/
|
|
190
|
-
onChange: requiredIf__default["default"](PropTypes__default["default"].func, function (props) {
|
|
191
|
-
return !props.isReadOnly;
|
|
192
|
-
}),
|
|
193
|
-
|
|
194
|
-
/**
|
|
195
|
-
* Called when input is blurred
|
|
196
|
-
* <br />
|
|
197
|
-
* Signature: `(event) => void`
|
|
198
|
-
*/
|
|
199
|
-
onBlur: PropTypes__default["default"].func,
|
|
200
|
-
|
|
201
|
-
/**
|
|
202
|
-
* Called when input is focused
|
|
203
|
-
* <br />
|
|
204
|
-
* Signature: `(event) => void`
|
|
205
|
-
*/
|
|
206
|
-
onFocus: PropTypes__default["default"].func,
|
|
207
|
-
|
|
208
|
-
/**
|
|
209
|
-
* Focus the input on initial render
|
|
210
|
-
*/
|
|
211
|
-
isAutofocussed: PropTypes__default["default"].bool,
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
215
|
-
*/
|
|
216
|
-
isDisabled: PropTypes__default["default"].bool,
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* Indicates that the field is displaying read-only content
|
|
220
|
-
*/
|
|
221
|
-
isReadOnly: PropTypes__default["default"].bool,
|
|
222
|
-
|
|
223
|
-
/**
|
|
224
|
-
* Placeholder text for the input
|
|
225
|
-
*/
|
|
226
|
-
placeholder: PropTypes__default["default"].string,
|
|
227
|
-
|
|
228
|
-
/**
|
|
229
|
-
* Password autocomplete mode
|
|
230
|
-
*/
|
|
231
|
-
autoComplete: PropTypes__default["default"].string,
|
|
232
|
-
// LabelField
|
|
233
|
-
|
|
234
|
-
/**
|
|
235
|
-
* Title of the label
|
|
236
|
-
*/
|
|
237
|
-
title: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]).isRequired,
|
|
238
|
-
|
|
239
|
-
/**
|
|
240
|
-
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
|
|
241
|
-
*/
|
|
242
|
-
hint: requiredIf__default["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]), function (props) {
|
|
243
|
-
return props.hintIcon;
|
|
244
|
-
}),
|
|
245
|
-
|
|
246
|
-
/**
|
|
247
|
-
* Provides a description for the title.
|
|
248
|
-
*/
|
|
249
|
-
description: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
|
|
250
|
-
|
|
251
|
-
/**
|
|
252
|
-
* Function called when info button is pressed.
|
|
253
|
-
* <br />
|
|
254
|
-
* Info button will only be visible when this prop is passed.
|
|
255
|
-
* <br />
|
|
256
|
-
* Signature: `(event) => void`
|
|
257
|
-
*/
|
|
258
|
-
onInfoButtonClick: PropTypes__default["default"].func,
|
|
259
|
-
|
|
260
|
-
/**
|
|
261
|
-
* Icon to be displayed beside the hint text.
|
|
262
|
-
* <br />
|
|
263
|
-
* Will only get rendered when `hint` is passed as well.
|
|
264
|
-
*/
|
|
265
|
-
hintIcon: PropTypes__default["default"].node,
|
|
266
|
-
|
|
267
|
-
/**
|
|
268
|
-
* Badge to be displayed beside the label.
|
|
269
|
-
* <br />
|
|
270
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
271
|
-
*/
|
|
272
|
-
badge: PropTypes__default["default"].node
|
|
147
|
+
id: _pt__default["default"].string,
|
|
148
|
+
horizontalConstraint: _pt__default["default"].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
149
|
+
errors: _pt__default["default"].objectOf(_pt__default["default"].bool),
|
|
150
|
+
renderError: _pt__default["default"].func,
|
|
151
|
+
isRequired: _pt__default["default"].bool,
|
|
152
|
+
touched: _pt__default["default"].bool,
|
|
153
|
+
name: _pt__default["default"].string,
|
|
154
|
+
value: _pt__default["default"].string.isRequired,
|
|
155
|
+
onChange: _pt__default["default"].func,
|
|
156
|
+
onBlur: _pt__default["default"].func,
|
|
157
|
+
onFocus: _pt__default["default"].func,
|
|
158
|
+
isAutofocussed: _pt__default["default"].bool,
|
|
159
|
+
isDisabled: _pt__default["default"].bool,
|
|
160
|
+
isReadOnly: _pt__default["default"].bool,
|
|
161
|
+
placeholder: _pt__default["default"].string,
|
|
162
|
+
autoComplete: _pt__default["default"].oneOf(['on', 'off', 'current-password', 'new-password']),
|
|
163
|
+
title: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]).isRequired,
|
|
164
|
+
hint: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
165
|
+
description: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node]),
|
|
166
|
+
onInfoButtonClick: _pt__default["default"].func,
|
|
167
|
+
hintIcon: _pt__default["default"].element,
|
|
168
|
+
badge: _pt__default["default"].node
|
|
273
169
|
} : {};
|
|
274
|
-
PasswordField.
|
|
275
|
-
|
|
276
|
-
};
|
|
170
|
+
PasswordField.displayName = 'PasswordField';
|
|
171
|
+
PasswordField.defaultProps = defaultProps;
|
|
277
172
|
var PasswordField$1 = PasswordField;
|
|
278
173
|
|
|
279
174
|
// NOTE: This string will be replaced on build time with the package version.
|
|
280
|
-
var version = "
|
|
175
|
+
var version = "13.0.2";
|
|
281
176
|
|
|
282
177
|
exports["default"] = PasswordField$1;
|
|
283
178
|
exports.version = version;
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
6
6
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
7
|
+
require('prop-types');
|
|
7
8
|
var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
|
|
8
9
|
var _Object$values = require('@babel/runtime-corejs3/core-js-stable/object/values');
|
|
9
10
|
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
|
|
@@ -14,9 +15,8 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
|
|
|
14
15
|
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
|
|
15
16
|
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
|
|
16
17
|
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
|
|
17
|
-
require('
|
|
18
|
+
require('react');
|
|
18
19
|
var reactIntl = require('react-intl');
|
|
19
|
-
require('react-required-if');
|
|
20
20
|
var utils = require('@commercetools-uikit/utils');
|
|
21
21
|
var hooks = require('@commercetools-uikit/hooks');
|
|
22
22
|
var Constraints = require('@commercetools-uikit/constraints');
|
|
@@ -62,9 +62,9 @@ var messages = reactIntl.defineMessages({
|
|
|
62
62
|
}
|
|
63
63
|
});
|
|
64
64
|
|
|
65
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object);
|
|
65
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
66
66
|
|
|
67
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
67
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
68
68
|
var sequentialId = utils.createSequentialId('password-field-');
|
|
69
69
|
|
|
70
70
|
var hasErrors = function hasErrors(errors) {
|
|
@@ -73,6 +73,10 @@ var hasErrors = function hasErrors(errors) {
|
|
|
73
73
|
return errors && _someInstanceProperty__default["default"](_context = _Object$values__default["default"](errors)).call(_context, Boolean);
|
|
74
74
|
};
|
|
75
75
|
|
|
76
|
+
var defaultProps = {
|
|
77
|
+
horizontalConstraint: 'scale'
|
|
78
|
+
};
|
|
79
|
+
|
|
76
80
|
var PasswordField = function PasswordField(props) {
|
|
77
81
|
var intl = reactIntl.useIntl();
|
|
78
82
|
|
|
@@ -83,6 +87,11 @@ var PasswordField = function PasswordField(props) {
|
|
|
83
87
|
|
|
84
88
|
var id = hooks.useFieldId(props.id, sequentialId);
|
|
85
89
|
var hasError = props.touched && hasErrors(props.errors);
|
|
90
|
+
|
|
91
|
+
if (!props.isReadOnly) ;
|
|
92
|
+
|
|
93
|
+
if (props.hintIcon) ;
|
|
94
|
+
|
|
86
95
|
return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
|
|
87
96
|
max: props.horizontalConstraint,
|
|
88
97
|
children: jsxRuntime.jsxs(Stack__default["default"], {
|
|
@@ -129,15 +138,13 @@ var PasswordField = function PasswordField(props) {
|
|
|
129
138
|
});
|
|
130
139
|
};
|
|
131
140
|
|
|
132
|
-
PasswordField.displayName = 'PasswordField';
|
|
133
141
|
PasswordField.propTypes = {};
|
|
134
|
-
PasswordField.
|
|
135
|
-
|
|
136
|
-
};
|
|
142
|
+
PasswordField.displayName = 'PasswordField';
|
|
143
|
+
PasswordField.defaultProps = defaultProps;
|
|
137
144
|
var PasswordField$1 = PasswordField;
|
|
138
145
|
|
|
139
146
|
// NOTE: This string will be replaced on build time with the package version.
|
|
140
|
-
var version = "
|
|
147
|
+
var version = "13.0.2";
|
|
141
148
|
|
|
142
149
|
exports["default"] = PasswordField$1;
|
|
143
150
|
exports.version = version;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
|
|
2
2
|
import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
|
|
3
|
+
import _pt from 'prop-types';
|
|
3
4
|
import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
|
|
4
5
|
import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
|
|
5
6
|
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
|
|
@@ -10,10 +11,9 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
|
|
|
10
11
|
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
|
|
11
12
|
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
|
|
12
13
|
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
|
|
13
|
-
import
|
|
14
|
+
import { isValidElement } from 'react';
|
|
14
15
|
import { defineMessages, useIntl } from 'react-intl';
|
|
15
|
-
import
|
|
16
|
-
import { createSequentialId, filterDataAttributes } from '@commercetools-uikit/utils';
|
|
16
|
+
import { createSequentialId, warning, filterDataAttributes } from '@commercetools-uikit/utils';
|
|
17
17
|
import { useToggleState, useFieldId } from '@commercetools-uikit/hooks';
|
|
18
18
|
import Constraints from '@commercetools-uikit/constraints';
|
|
19
19
|
import Inline from '@commercetools-uikit/spacings-inline';
|
|
@@ -38,9 +38,9 @@ var messages = defineMessages({
|
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
|
|
41
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object);
|
|
41
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
42
42
|
|
|
43
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
43
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
44
44
|
var sequentialId = createSequentialId('password-field-');
|
|
45
45
|
|
|
46
46
|
var hasErrors = function hasErrors(errors) {
|
|
@@ -49,6 +49,10 @@ var hasErrors = function hasErrors(errors) {
|
|
|
49
49
|
return errors && _someInstanceProperty(_context = _Object$values(errors)).call(_context, Boolean);
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
+
var defaultProps = {
|
|
53
|
+
horizontalConstraint: 'scale'
|
|
54
|
+
};
|
|
55
|
+
|
|
52
56
|
var PasswordField = function PasswordField(props) {
|
|
53
57
|
var intl = useIntl();
|
|
54
58
|
|
|
@@ -59,6 +63,15 @@ var PasswordField = function PasswordField(props) {
|
|
|
59
63
|
|
|
60
64
|
var id = useFieldId(props.id, sequentialId);
|
|
61
65
|
var hasError = props.touched && hasErrors(props.errors);
|
|
66
|
+
|
|
67
|
+
if (!props.isReadOnly) {
|
|
68
|
+
process.env.NODE_ENV !== "production" ? warning(Boolean(props.onChange), 'PasswordField: `onChange` is required when is not read only.') : void 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (props.hintIcon) {
|
|
72
|
+
process.env.NODE_ENV !== "production" ? warning(typeof props.hint === 'string' || /*#__PURE__*/isValidElement(props.hint), 'PasswordField: `hint` is required to be string or ReactNode if hintIcon is present') : void 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
62
75
|
return jsx(Constraints.Horizontal, {
|
|
63
76
|
max: props.horizontalConstraint,
|
|
64
77
|
children: jsxs(Stack, {
|
|
@@ -105,152 +118,35 @@ var PasswordField = function PasswordField(props) {
|
|
|
105
118
|
});
|
|
106
119
|
};
|
|
107
120
|
|
|
108
|
-
PasswordField.displayName = 'PasswordField';
|
|
109
121
|
PasswordField.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
* Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
|
|
133
|
-
* <br />
|
|
134
|
-
* Signature: `(key, error) => React.node`
|
|
135
|
-
*/
|
|
136
|
-
renderError: PropTypes.func,
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* Indicates if the value is required. Shows an the "required asterisk" if so.
|
|
140
|
-
*/
|
|
141
|
-
isRequired: PropTypes.bool,
|
|
142
|
-
|
|
143
|
-
/**
|
|
144
|
-
* Indicates whether the field was touched. Errors will only be shown when the field was touched.
|
|
145
|
-
*/
|
|
146
|
-
touched: PropTypes.bool,
|
|
147
|
-
// PasswordInput
|
|
148
|
-
|
|
149
|
-
/**
|
|
150
|
-
* Used as HTML name of the input component. property
|
|
151
|
-
*/
|
|
152
|
-
name: PropTypes.string,
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* Value of the input component.
|
|
156
|
-
*/
|
|
157
|
-
value: PropTypes.string.isRequired,
|
|
158
|
-
|
|
159
|
-
/**
|
|
160
|
-
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
|
|
161
|
-
* <br />
|
|
162
|
-
* Signature: `(event) => void`
|
|
163
|
-
*/
|
|
164
|
-
onChange: requiredIf(PropTypes.func, function (props) {
|
|
165
|
-
return !props.isReadOnly;
|
|
166
|
-
}),
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Called when input is blurred
|
|
170
|
-
* <br />
|
|
171
|
-
* Signature: `(event) => void`
|
|
172
|
-
*/
|
|
173
|
-
onBlur: PropTypes.func,
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
* Called when input is focused
|
|
177
|
-
* <br />
|
|
178
|
-
* Signature: `(event) => void`
|
|
179
|
-
*/
|
|
180
|
-
onFocus: PropTypes.func,
|
|
181
|
-
|
|
182
|
-
/**
|
|
183
|
-
* Focus the input on initial render
|
|
184
|
-
*/
|
|
185
|
-
isAutofocussed: PropTypes.bool,
|
|
186
|
-
|
|
187
|
-
/**
|
|
188
|
-
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
|
|
189
|
-
*/
|
|
190
|
-
isDisabled: PropTypes.bool,
|
|
191
|
-
|
|
192
|
-
/**
|
|
193
|
-
* Indicates that the field is displaying read-only content
|
|
194
|
-
*/
|
|
195
|
-
isReadOnly: PropTypes.bool,
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* Placeholder text for the input
|
|
199
|
-
*/
|
|
200
|
-
placeholder: PropTypes.string,
|
|
201
|
-
|
|
202
|
-
/**
|
|
203
|
-
* Password autocomplete mode
|
|
204
|
-
*/
|
|
205
|
-
autoComplete: PropTypes.string,
|
|
206
|
-
// LabelField
|
|
207
|
-
|
|
208
|
-
/**
|
|
209
|
-
* Title of the label
|
|
210
|
-
*/
|
|
211
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
|
|
215
|
-
*/
|
|
216
|
-
hint: requiredIf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]), function (props) {
|
|
217
|
-
return props.hintIcon;
|
|
218
|
-
}),
|
|
219
|
-
|
|
220
|
-
/**
|
|
221
|
-
* Provides a description for the title.
|
|
222
|
-
*/
|
|
223
|
-
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
224
|
-
|
|
225
|
-
/**
|
|
226
|
-
* Function called when info button is pressed.
|
|
227
|
-
* <br />
|
|
228
|
-
* Info button will only be visible when this prop is passed.
|
|
229
|
-
* <br />
|
|
230
|
-
* Signature: `(event) => void`
|
|
231
|
-
*/
|
|
232
|
-
onInfoButtonClick: PropTypes.func,
|
|
233
|
-
|
|
234
|
-
/**
|
|
235
|
-
* Icon to be displayed beside the hint text.
|
|
236
|
-
* <br />
|
|
237
|
-
* Will only get rendered when `hint` is passed as well.
|
|
238
|
-
*/
|
|
239
|
-
hintIcon: PropTypes.node,
|
|
240
|
-
|
|
241
|
-
/**
|
|
242
|
-
* Badge to be displayed beside the label.
|
|
243
|
-
* <br />
|
|
244
|
-
* Might be used to display additional information about the content of the field (E.g verified email)
|
|
245
|
-
*/
|
|
246
|
-
badge: PropTypes.node
|
|
122
|
+
id: _pt.string,
|
|
123
|
+
horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
|
|
124
|
+
errors: _pt.objectOf(_pt.bool),
|
|
125
|
+
renderError: _pt.func,
|
|
126
|
+
isRequired: _pt.bool,
|
|
127
|
+
touched: _pt.bool,
|
|
128
|
+
name: _pt.string,
|
|
129
|
+
value: _pt.string.isRequired,
|
|
130
|
+
onChange: _pt.func,
|
|
131
|
+
onBlur: _pt.func,
|
|
132
|
+
onFocus: _pt.func,
|
|
133
|
+
isAutofocussed: _pt.bool,
|
|
134
|
+
isDisabled: _pt.bool,
|
|
135
|
+
isReadOnly: _pt.bool,
|
|
136
|
+
placeholder: _pt.string,
|
|
137
|
+
autoComplete: _pt.oneOf(['on', 'off', 'current-password', 'new-password']),
|
|
138
|
+
title: _pt.oneOfType([_pt.string, _pt.node]).isRequired,
|
|
139
|
+
hint: _pt.oneOfType([_pt.string, _pt.node]),
|
|
140
|
+
description: _pt.oneOfType([_pt.string, _pt.node]),
|
|
141
|
+
onInfoButtonClick: _pt.func,
|
|
142
|
+
hintIcon: _pt.element,
|
|
143
|
+
badge: _pt.node
|
|
247
144
|
} : {};
|
|
248
|
-
PasswordField.
|
|
249
|
-
|
|
250
|
-
};
|
|
145
|
+
PasswordField.displayName = 'PasswordField';
|
|
146
|
+
PasswordField.defaultProps = defaultProps;
|
|
251
147
|
var PasswordField$1 = PasswordField;
|
|
252
148
|
|
|
253
149
|
// NOTE: This string will be replaced on build time with the package version.
|
|
254
|
-
var version = "
|
|
150
|
+
var version = "13.0.2";
|
|
255
151
|
|
|
256
152
|
export { PasswordField$1 as default, version };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { type ReactElement, type ReactNode, type MouseEvent, type KeyboardEvent, type ChangeEventHandler, type FocusEventHandler } from 'react';
|
|
2
|
+
declare type TPasswordFieldError = Record<string, boolean>;
|
|
3
|
+
declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
|
|
4
|
+
declare type TPasswordField = {
|
|
5
|
+
id?: string;
|
|
6
|
+
horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
7
|
+
errors?: TPasswordFieldError;
|
|
8
|
+
renderError?: TErrorRenderer;
|
|
9
|
+
isRequired?: boolean;
|
|
10
|
+
touched?: boolean;
|
|
11
|
+
name?: string;
|
|
12
|
+
value: string;
|
|
13
|
+
onChange?: ChangeEventHandler;
|
|
14
|
+
onBlur?: FocusEventHandler;
|
|
15
|
+
onFocus?: FocusEventHandler;
|
|
16
|
+
isAutofocussed?: boolean;
|
|
17
|
+
isDisabled?: boolean;
|
|
18
|
+
isReadOnly?: boolean;
|
|
19
|
+
placeholder?: string;
|
|
20
|
+
autoComplete?: 'on' | 'off' | 'current-password' | 'new-password';
|
|
21
|
+
title: string | ReactNode;
|
|
22
|
+
hint?: string | ReactNode;
|
|
23
|
+
description?: string | ReactNode;
|
|
24
|
+
onInfoButtonClick?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
|
|
25
|
+
hintIcon?: ReactElement;
|
|
26
|
+
badge?: ReactNode;
|
|
27
|
+
};
|
|
28
|
+
declare const PasswordField: {
|
|
29
|
+
(props: TPasswordField): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
30
|
+
displayName: string;
|
|
31
|
+
defaultProps: Pick<TPasswordField, "horizontalConstraint">;
|
|
32
|
+
};
|
|
33
|
+
export default PasswordField;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/password-field",
|
|
3
3
|
"description": "A controlled text input component for passwords with validation states.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "13.0.2",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -19,27 +19,27 @@
|
|
|
19
19
|
"module": "dist/commercetools-uikit-password-field.esm.js",
|
|
20
20
|
"files": ["dist"],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@babel/runtime": "7.
|
|
23
|
-
"@babel/runtime-corejs3": "7.
|
|
24
|
-
"@commercetools-uikit/constraints": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/field-errors": "
|
|
27
|
-
"@commercetools-uikit/field-label": "
|
|
28
|
-
"@commercetools-uikit/flat-button": "
|
|
29
|
-
"@commercetools-uikit/hooks": "
|
|
30
|
-
"@commercetools-uikit/icons": "
|
|
31
|
-
"@commercetools-uikit/password-input": "
|
|
32
|
-
"@commercetools-uikit/spacings-inline": "
|
|
33
|
-
"@commercetools-uikit/spacings-stack": "
|
|
34
|
-
"@commercetools-uikit/utils": "
|
|
22
|
+
"@babel/runtime": "7.17.2",
|
|
23
|
+
"@babel/runtime-corejs3": "7.17.2",
|
|
24
|
+
"@commercetools-uikit/constraints": "13.0.2",
|
|
25
|
+
"@commercetools-uikit/design-system": "13.0.0",
|
|
26
|
+
"@commercetools-uikit/field-errors": "13.0.2",
|
|
27
|
+
"@commercetools-uikit/field-label": "13.0.2",
|
|
28
|
+
"@commercetools-uikit/flat-button": "13.0.2",
|
|
29
|
+
"@commercetools-uikit/hooks": "13.0.2",
|
|
30
|
+
"@commercetools-uikit/icons": "13.0.2",
|
|
31
|
+
"@commercetools-uikit/password-input": "13.0.2",
|
|
32
|
+
"@commercetools-uikit/spacings-inline": "13.0.2",
|
|
33
|
+
"@commercetools-uikit/spacings-stack": "13.0.2",
|
|
34
|
+
"@commercetools-uikit/utils": "13.0.2",
|
|
35
35
|
"@emotion/react": "^11.4.0",
|
|
36
36
|
"@emotion/styled": "^11.3.0",
|
|
37
|
-
"prop-types": "15.
|
|
37
|
+
"prop-types": "15.8.1",
|
|
38
38
|
"react-required-if": "1.0.3"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"react": "17.0.2",
|
|
42
|
-
"react-intl": "5.
|
|
42
|
+
"react-intl": "5.24.6"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": "17.x",
|