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