@commercetools-uikit/number-field 13.0.4 → 14.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.
Files changed (6) hide show
  1. package/README.md +23 -5
  2. package/dist/commercetools-uikit-number-field.cjs.dev.js +12 -1
  3. package/dist/commercetools-uikit-number-field.cjs.prod.js +12 -1
  4. package/dist/commercetools-uikit-number-field.esm.js +12 -1
  5. package/dist/declarations/src/number-field.d.ts +8 -4
  6. package/package.json +11 -11
package/README.md CHANGED
@@ -50,15 +50,15 @@ 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 /> |
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` | `union`<br/>Possible values:<br/>`string , number` | ✅ | | Value of the input component. |
58
58
  | `autoComplete` | `string` | | | Used as HTML `autocomplete` of the input component. property |
59
- | `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 /> |
60
- | `onBlur` | `FocusEventHandler` | | | Called when input is blurred&#xA;<br /> |
61
- | `onFocus` | `FocusEventHandler` | | | Called when input is focused&#xA;<br /> |
59
+ | `onChange` | `ChangeEventHandler` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
60
+ | `onBlur` | `FocusEventHandler` | | | Called when input is blurred |
61
+ | `onFocus` | `FocusEventHandler` | | | Called when input is focused |
62
62
  | `isAutofocussed` | `boolean` | | | Focus the input on initial render |
63
63
  | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
64
64
  | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
@@ -69,7 +69,7 @@ export default Example;
69
69
  | `title` | `union`<br/>Possible values:<br/>`string , ReactNode` | ✅ | | Title of the label |
70
70
  | `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`. |
71
71
  | `description` | `union`<br/>Possible values:<br/>`string , ReactNode` | | | Provides a description for the title. |
72
- | `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 /> |
72
+ | `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. |
73
73
  | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.&#xA;<br />&#xA;Will only get rendered when `hint` is passed as well. |
74
74
  | `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) |
75
75
 
@@ -108,3 +108,21 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
108
108
  Known error keys are:
109
109
 
110
110
  - `missing`: tells the user that this field is required
111
+
112
+ ## Static methods
113
+
114
+ ### `NumberField.toFieldErrors`
115
+
116
+ Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
117
+
118
+ ```ts
119
+ type FormValues = {
120
+ myField: string;
121
+ };
122
+
123
+ <NumberField
124
+ // ...
125
+ name="my-field"
126
+ errors={NumberField.toFieldErrors<FormValues>(formik.errors).myField}
127
+ />;
128
+ ```
package/dist/commercetools-uikit-number-field.cjs.dev.js CHANGED
@@ -147,6 +147,17 @@ var NumberField = /*#__PURE__*/function (_Component) {
147
147
  })
148
148
  });
149
149
  }
150
+ }], [{
151
+ key: "toFieldErrors",
152
+ value:
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
+ function toFieldErrors(errors) {
159
+ return errors;
160
+ }
150
161
  }]);
151
162
 
152
163
  return NumberField;
@@ -193,7 +204,7 @@ NumberField.propTypes = process.env.NODE_ENV !== "production" ? {
193
204
  var NumberField$1 = NumberField;
194
205
 
195
206
  // NOTE: This string will be replaced on build time with the package version.
196
- var version = "13.0.4";
207
+ var version = "14.0.2";
197
208
 
198
209
  exports["default"] = NumberField$1;
199
210
  exports.version = version;
package/dist/commercetools-uikit-number-field.cjs.prod.js CHANGED
@@ -142,6 +142,17 @@ var NumberField = /*#__PURE__*/function (_Component) {
142
142
  })
143
143
  });
144
144
  }
145
+ }], [{
146
+ key: "toFieldErrors",
147
+ value:
148
+ /**
149
+ * Use this function to convert the Formik `errors` object type to
150
+ * our custom field errors type.
151
+ * This is primarly useful when using TypeScript.
152
+ */
153
+ function toFieldErrors(errors) {
154
+ return errors;
155
+ }
145
156
  }]);
146
157
 
147
158
  return NumberField;
@@ -162,7 +173,7 @@ NumberField.propTypes = {};
162
173
  var NumberField$1 = NumberField;
163
174
 
164
175
  // NOTE: This string will be replaced on build time with the package version.
165
- var version = "13.0.4";
176
+ var version = "14.0.2";
166
177
 
167
178
  exports["default"] = NumberField$1;
168
179
  exports.version = version;
package/dist/commercetools-uikit-number-field.esm.js CHANGED
@@ -122,6 +122,17 @@ var NumberField = /*#__PURE__*/function (_Component) {
122
122
  })
123
123
  });
124
124
  }
125
+ }], [{
126
+ key: "toFieldErrors",
127
+ value:
128
+ /**
129
+ * Use this function to convert the Formik `errors` object type to
130
+ * our custom field errors type.
131
+ * This is primarly useful when using TypeScript.
132
+ */
133
+ function toFieldErrors(errors) {
134
+ return errors;
135
+ }
125
136
  }]);
126
137
 
127
138
  return NumberField;
@@ -168,6 +179,6 @@ NumberField.propTypes = process.env.NODE_ENV !== "production" ? {
168
179
  var NumberField$1 = NumberField;
169
180
 
170
181
  // NOTE: This string will be replaced on build time with the package version.
171
- var version = "13.0.4";
182
+ var version = "14.0.2";
172
183
 
173
184
  export { NumberField$1 as default, version };
package/dist/declarations/src/number-field.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import { Component, type ChangeEventHandler, type FocusEventHandler, type ReactElement, type ReactNode, type MouseEvent, type KeyboardEvent } from 'react';
2
- declare type TFieldErrors = Record<string, boolean>;
3
2
  declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
3
+ declare type TFieldErrors = Record<string, boolean>;
4
+ declare type TCustomFormErrors<Values> = {
5
+ [K in keyof Values]?: TFieldErrors;
6
+ };
4
7
  declare type TNumberFieldProps = {
5
8
  id?: string;
6
9
  horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
@@ -11,9 +14,9 @@ declare type TNumberFieldProps = {
11
14
  name?: string;
12
15
  value: string | number;
13
16
  autoComplete?: string;
14
- onChange?: ChangeEventHandler;
15
- onBlur?: FocusEventHandler;
16
- onFocus?: FocusEventHandler;
17
+ onChange?: ChangeEventHandler<HTMLInputElement>;
18
+ onBlur?: FocusEventHandler<HTMLInputElement>;
19
+ onFocus?: FocusEventHandler<HTMLInputElement>;
17
20
  isAutofocussed?: boolean;
18
21
  isDisabled?: boolean;
19
22
  isReadOnly?: boolean;
@@ -38,6 +41,7 @@ declare class NumberField extends Component<TNumberFieldProps, TNumberFieldState
38
41
  static getDerivedStateFromProps: (props: TNumberFieldProps, state: TNumberFieldState) => {
39
42
  id: string;
40
43
  };
44
+ static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
41
45
  render(): import("@emotion/react/jsx-runtime").JSX.Element;
42
46
  }
43
47
  export default NumberField;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/number-field",
3
3
  "description": "A controlled input component for numbers with validation states and a label.",
4
- "version": "13.0.4",
4
+ "version": "14.0.2",
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/number-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,15 +19,15 @@
19
19
  "module": "dist/commercetools-uikit-number-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.4",
27
- "@commercetools-uikit/field-label": "13.0.4",
28
- "@commercetools-uikit/number-input": "13.0.4",
29
- "@commercetools-uikit/spacings-stack": "13.0.2",
30
- "@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.2",
28
+ "@commercetools-uikit/number-input": "14.0.2",
29
+ "@commercetools-uikit/spacings-stack": "14.0.1",
30
+ "@commercetools-uikit/utils": "14.0.1",
31
31
  "@emotion/react": "^11.4.0",
32
32
  "@emotion/styled": "^11.3.0",
33
33
  "prop-types": "15.8.1",