@commercetools-uikit/password-field 13.0.2 → 14.0.1

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 (6) hide show
  1. package/README.md +23 -5
  2. package/dist/commercetools-uikit-password-field.cjs.dev.js +19 -3
  3. package/dist/commercetools-uikit-password-field.cjs.prod.js +19 -3
  4. package/dist/commercetools-uikit-password-field.esm.js +19 -3
  5. package/dist/declarations/src/password-field.d.ts +6 -2
  6. package/package.json +17 -18
package/README.md CHANGED
@@ -50,14 +50,14 @@ export default Example;
50
50
  | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
51
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
52
  | `errors` | `Record` | | | A map of errors. Error messages for known errors are rendered automatically.&#xA;<br />&#xA;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.&#xA;<br />&#xA;Signature: `(key, error) => React.node` |
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. |
54
54
  | `isRequired` | `boolean` | | | Indicates if the value is required. Shows an the "required asterisk" if so. |
55
55
  | `touched` | `boolean` | | | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
56
56
  | `name` | `string` | | | Used as HTML name of the input component. property |
57
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.&#xA;<br />&#xA;Signature: `(event) => void` |
59
- | `onBlur` | `FocusEventHandler` | | | Called when input is blurred&#xA;<br />&#xA;Signature: `(event) => void` |
60
- | `onFocus` | `FocusEventHandler` | | | Called when input is focused&#xA;<br />&#xA;Signature: `(event) => void` |
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. |
59
+ | `onBlur` | `FocusEventHandler` | | | Called when input is blurred |
60
+ | `onFocus` | `FocusEventHandler` | | | Called when input is focused |
61
61
  | `isAutofocussed` | `boolean` | | | Focus the input on initial render |
62
62
  | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
63
63
  | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
@@ -66,7 +66,7 @@ export default Example;
66
66
  | `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
67
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
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.&#xA;<br />&#xA;Info button will only be visible when this prop is passed.&#xA;<br />&#xA;Signature: `(event) => void` |
69
+ | `onInfoButtonClick` | `Function`<br/>[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.&#xA;<br />&#xA;Info button will only be visible when this prop is passed. |
70
70
  | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.&#xA;<br />&#xA;Will only get rendered when `hint` is passed as well. |
71
71
  | `badge` | `ReactNode` | | | Badge to be displayed beside the label.&#xA;<br />&#xA;Might be used to display additional information about the content of the field (E.g verified email) |
72
72
 
@@ -105,3 +105,21 @@ Known error keys are:
105
105
  ## Main Functions and use cases are:
106
106
 
107
107
  - Password field in login forms
108
+
109
+ ## Static methods
110
+
111
+ ### `PasswordField.toFieldErrors`
112
+
113
+ Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
114
+
115
+ ```ts
116
+ type FormValues = {
117
+ myField: string;
118
+ };
119
+
120
+ <PasswordField
121
+ // ...
122
+ name="my-field"
123
+ errors={PasswordField.toFieldErrors<FormValues>(formik.errors).myField}
124
+ />;
125
+ ```
package/dist/commercetools-uikit-password-field.cjs.dev.js CHANGED
@@ -67,6 +67,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
67
67
 
68
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; }
69
69
  var sequentialId = utils.createSequentialId('password-field-');
70
+ var sequentialErrorsId = utils.createSequentialId('password-field-error-')();
70
71
 
71
72
  var hasErrors = function hasErrors(errors) {
72
73
  var _context;
@@ -119,7 +120,7 @@ var PasswordField = function PasswordField(props) {
119
120
  onClick: togglePasswordVisibility,
120
121
  isDisabled: !props.value
121
122
  })]
122
- }), jsxRuntime.jsx(PasswordInput__default["default"], _objectSpread({
123
+ }), jsxRuntime.jsx(PasswordInput__default["default"], _objectSpread(_objectSpread({
123
124
  id: id,
124
125
  name: props.name,
125
126
  value: props.value,
@@ -134,7 +135,12 @@ var PasswordField = function PasswordField(props) {
134
135
  placeholder: props.placeholder,
135
136
  autoComplete: props.autoComplete,
136
137
  horizontalConstraint: "scale"
137
- }, utils.filterDataAttributes(props))), jsxRuntime.jsx(FieldErrors__default["default"], {
138
+ }, utils.filterDataAttributes(props)), {}, {
139
+ /* ARIA */
140
+ "aria-invalid": hasError,
141
+ "aria-errormessage": sequentialErrorsId
142
+ })), jsxRuntime.jsx(FieldErrors__default["default"], {
143
+ id: sequentialErrorsId,
138
144
  errors: props.errors,
139
145
  isVisible: hasError,
140
146
  renderError: props.renderError
@@ -169,10 +175,20 @@ PasswordField.propTypes = process.env.NODE_ENV !== "production" ? {
169
175
  } : {};
170
176
  PasswordField.displayName = 'PasswordField';
171
177
  PasswordField.defaultProps = defaultProps;
178
+ /**
179
+ * Use this function to convert the Formik `errors` object type to
180
+ * our custom field errors type.
181
+ * This is primarly useful when using TypeScript.
182
+ */
183
+
184
+ PasswordField.toFieldErrors = function toFieldErrors(errors) {
185
+ return errors;
186
+ };
187
+
172
188
  var PasswordField$1 = PasswordField;
173
189
 
174
190
  // NOTE: This string will be replaced on build time with the package version.
175
- var version = "13.0.2";
191
+ var version = "14.0.1";
176
192
 
177
193
  exports["default"] = PasswordField$1;
178
194
  exports.version = version;
package/dist/commercetools-uikit-password-field.cjs.prod.js CHANGED
@@ -66,6 +66,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
66
66
 
67
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
+ var sequentialErrorsId = utils.createSequentialId('password-field-error-')();
69
70
 
70
71
  var hasErrors = function hasErrors(errors) {
71
72
  var _context;
@@ -114,7 +115,7 @@ var PasswordField = function PasswordField(props) {
114
115
  onClick: togglePasswordVisibility,
115
116
  isDisabled: !props.value
116
117
  })]
117
- }), jsxRuntime.jsx(PasswordInput__default["default"], _objectSpread({
118
+ }), jsxRuntime.jsx(PasswordInput__default["default"], _objectSpread(_objectSpread({
118
119
  id: id,
119
120
  name: props.name,
120
121
  value: props.value,
@@ -129,7 +130,12 @@ var PasswordField = function PasswordField(props) {
129
130
  placeholder: props.placeholder,
130
131
  autoComplete: props.autoComplete,
131
132
  horizontalConstraint: "scale"
132
- }, utils.filterDataAttributes(props))), jsxRuntime.jsx(FieldErrors__default["default"], {
133
+ }, utils.filterDataAttributes(props)), {}, {
134
+ /* ARIA */
135
+ "aria-invalid": hasError,
136
+ "aria-errormessage": sequentialErrorsId
137
+ })), jsxRuntime.jsx(FieldErrors__default["default"], {
138
+ id: sequentialErrorsId,
133
139
  errors: props.errors,
134
140
  isVisible: hasError,
135
141
  renderError: props.renderError
@@ -141,10 +147,20 @@ var PasswordField = function PasswordField(props) {
141
147
  PasswordField.propTypes = {};
142
148
  PasswordField.displayName = 'PasswordField';
143
149
  PasswordField.defaultProps = defaultProps;
150
+ /**
151
+ * Use this function to convert the Formik `errors` object type to
152
+ * our custom field errors type.
153
+ * This is primarly useful when using TypeScript.
154
+ */
155
+
156
+ PasswordField.toFieldErrors = function toFieldErrors(errors) {
157
+ return errors;
158
+ };
159
+
144
160
  var PasswordField$1 = PasswordField;
145
161
 
146
162
  // NOTE: This string will be replaced on build time with the package version.
147
- var version = "13.0.2";
163
+ var version = "14.0.1";
148
164
 
149
165
  exports["default"] = PasswordField$1;
150
166
  exports.version = version;
package/dist/commercetools-uikit-password-field.esm.js CHANGED
@@ -42,6 +42,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
42
42
 
43
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
+ var sequentialErrorsId = createSequentialId('password-field-error-')();
45
46
 
46
47
  var hasErrors = function hasErrors(errors) {
47
48
  var _context;
@@ -94,7 +95,7 @@ var PasswordField = function PasswordField(props) {
94
95
  onClick: togglePasswordVisibility,
95
96
  isDisabled: !props.value
96
97
  })]
97
- }), jsx(PasswordInput, _objectSpread({
98
+ }), jsx(PasswordInput, _objectSpread(_objectSpread({
98
99
  id: id,
99
100
  name: props.name,
100
101
  value: props.value,
@@ -109,7 +110,12 @@ var PasswordField = function PasswordField(props) {
109
110
  placeholder: props.placeholder,
110
111
  autoComplete: props.autoComplete,
111
112
  horizontalConstraint: "scale"
112
- }, filterDataAttributes(props))), jsx(FieldErrors, {
113
+ }, filterDataAttributes(props)), {}, {
114
+ /* ARIA */
115
+ "aria-invalid": hasError,
116
+ "aria-errormessage": sequentialErrorsId
117
+ })), jsx(FieldErrors, {
118
+ id: sequentialErrorsId,
113
119
  errors: props.errors,
114
120
  isVisible: hasError,
115
121
  renderError: props.renderError
@@ -144,9 +150,19 @@ PasswordField.propTypes = process.env.NODE_ENV !== "production" ? {
144
150
  } : {};
145
151
  PasswordField.displayName = 'PasswordField';
146
152
  PasswordField.defaultProps = defaultProps;
153
+ /**
154
+ * Use this function to convert the Formik `errors` object type to
155
+ * our custom field errors type.
156
+ * This is primarly useful when using TypeScript.
157
+ */
158
+
159
+ PasswordField.toFieldErrors = function toFieldErrors(errors) {
160
+ return errors;
161
+ };
162
+
147
163
  var PasswordField$1 = PasswordField;
148
164
 
149
165
  // NOTE: This string will be replaced on build time with the package version.
150
- var version = "13.0.2";
166
+ var version = "14.0.1";
151
167
 
152
168
  export { PasswordField$1 as default, version };
package/dist/declarations/src/password-field.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import { type ReactElement, type ReactNode, type MouseEvent, type KeyboardEvent, type ChangeEventHandler, type FocusEventHandler } from 'react';
2
- declare type TPasswordFieldError = Record<string, boolean>;
2
+ declare type TFieldErrors = Record<string, boolean>;
3
+ declare type TCustomFormErrors<Values> = {
4
+ [K in keyof Values]?: TFieldErrors;
5
+ };
3
6
  declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
4
7
  declare type TPasswordField = {
5
8
  id?: string;
6
9
  horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
7
- errors?: TPasswordFieldError;
10
+ errors?: TFieldErrors;
8
11
  renderError?: TErrorRenderer;
9
12
  isRequired?: boolean;
10
13
  touched?: boolean;
@@ -29,5 +32,6 @@ declare const PasswordField: {
29
32
  (props: TPasswordField): import("@emotion/react/jsx-runtime").JSX.Element;
30
33
  displayName: string;
31
34
  defaultProps: Pick<TPasswordField, "horizontalConstraint">;
35
+ toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
32
36
  };
33
37
  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": "13.0.2",
4
+ "version": "14.0.1",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -9,7 +9,7 @@
9
9
  "directory": "packages/components/fields/password-field"
10
10
  },
11
11
  "homepage": "https://uikit.commercetools.com",
12
- "keywords": ["javascript", "design system", "react", "uikit"],
12
+ "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
13
13
  "license": "MIT",
14
14
  "publishConfig": {
15
15
  "access": "public"
@@ -19,27 +19,26 @@
19
19
  "module": "dist/commercetools-uikit-password-field.esm.js",
20
20
  "files": ["dist"],
21
21
  "dependencies": {
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",
22
+ "@babel/runtime": "^7.17.2",
23
+ "@babel/runtime-corejs3": "^7.17.2",
24
+ "@commercetools-uikit/constraints": "14.0.1",
25
+ "@commercetools-uikit/design-system": "14.0.0",
26
+ "@commercetools-uikit/field-errors": "14.0.1",
27
+ "@commercetools-uikit/field-label": "14.0.1",
28
+ "@commercetools-uikit/flat-button": "14.0.1",
29
+ "@commercetools-uikit/hooks": "14.0.1",
30
+ "@commercetools-uikit/icons": "14.0.1",
31
+ "@commercetools-uikit/password-input": "14.0.1",
32
+ "@commercetools-uikit/spacings-inline": "14.0.1",
33
+ "@commercetools-uikit/spacings-stack": "14.0.1",
34
+ "@commercetools-uikit/utils": "14.0.1",
35
35
  "@emotion/react": "^11.4.0",
36
36
  "@emotion/styled": "^11.3.0",
37
- "prop-types": "15.8.1",
38
- "react-required-if": "1.0.3"
37
+ "prop-types": "15.8.1"
39
38
  },
40
39
  "devDependencies": {
41
40
  "react": "17.0.2",
42
- "react-intl": "5.24.6"
41
+ "react-intl": "^5.24.6"
43
42
  },
44
43
  "peerDependencies": {
45
44
  "react": "17.x",