@trackunit/custom-field-components 0.0.669 → 0.0.672

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 (4) hide show
  1. package/index.cjs.js +18 -11
  2. package/index.esm.js +18 -11
  3. package/package.json +1 -1
  4. package/src/CustomField.d.ts +5 -1
package/index.cjs.js CHANGED
@@ -183,9 +183,13 @@ const BooleanCustomField = (_a) => {
183
183
  const DateCustomField = (props) => {
184
184
  const { setValue, defaultValue, register, id, validationRules } = props, rest = __rest(props, ["setValue", "defaultValue", "register", "id", "validationRules"]);
185
185
  const onChangeHandler = React.useCallback((e) => {
186
- var _a, _b, _c, _d;
187
- if (((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.valueAsDate) === null || _b === void 0 ? void 0 : _b.toISOString()) !== undefined) {
188
- setValue && setValue(id, (_d = (_c = e.target) === null || _c === void 0 ? void 0 : _c.valueAsDate) === null || _d === void 0 ? void 0 : _d.toISOString());
186
+ var _a, _b;
187
+ if (e.target) {
188
+ setValue &&
189
+ setValue(id, (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.valueAsDate) === null || _b === void 0 ? void 0 : _b.toISOString(), {
190
+ shouldDirty: true,
191
+ shouldValidate: true,
192
+ });
189
193
  }
190
194
  }, [setValue, id]);
191
195
  React.useEffect(() => {
@@ -212,7 +216,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
212
216
  if (selected) {
213
217
  const values = Array.isArray(selected) ? selected : [selected];
214
218
  setSelectedValue(values);
215
- setValue && setValue(id, values);
219
+ setValue && setValue(id, values, { shouldDirty: true, shouldValidate: true });
216
220
  }
217
221
  else {
218
222
  setSelectedValue([]);
@@ -395,7 +399,7 @@ const useUnitTranslation = () => {
395
399
  * and functions for form registration and state management.
396
400
  * @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
397
401
  */
398
- const useCustomFieldResolver = ({ field, register, setValue, formState, unitPreference = "SI", language, fieldId, isEditable, }) => {
402
+ const useCustomFieldResolver = ({ field, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
399
403
  var _a, _b, _c, _d, _e, _f, _g;
400
404
  const validation = { register, setValue, formState };
401
405
  const { unitTranslation } = useUnitTranslation();
@@ -425,24 +429,27 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
425
429
  case "WebAddressFieldValueAndDefinition": {
426
430
  const value = field.stringValue;
427
431
  const rules = getWebAddressValidationRules(field.definition);
428
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && value && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: value }), dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
432
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
429
433
  }
430
434
  case "EmailFieldValueAndDefinition": {
431
435
  const value = field.stringValue;
432
436
  const rules = getEmailValidationRules(field.definition);
433
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && value && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: value }), dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
437
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ actions: !isEditableCombined && formValue && jsxRuntime.jsx(reactFormComponents.ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
434
438
  }
435
439
  case "PhoneNumberFieldValueAndDefinition": {
436
440
  const value = field.stringValue;
437
441
  const rules = getPhoneNumberValidationRules(field.definition);
438
- return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, rules), { onChangeValue: props => {
439
- validation.setValue(key, props.phone);
442
+ return (jsxRuntime.jsx(reactFormComponents.PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
443
+ validation.setValue(key, props.phone, {
444
+ shouldDirty: true,
445
+ shouldValidate: true,
446
+ });
440
447
  } })));
441
448
  }
442
449
  case "StringFieldValueAndDefinition": {
443
450
  const value = field.stringValue;
444
451
  const rules = getStringValidationRules(field.definition);
445
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
452
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
446
453
  }
447
454
  case "NumberFieldValueAndDefinition": {
448
455
  const value = field.numberValue;
@@ -454,7 +461,7 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
454
461
  placeholder: title !== null && title !== void 0 ? title : "",
455
462
  addonAfter: unitTranslation(unit),
456
463
  };
457
- return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, rules), numberProps)));
464
+ return (jsxRuntime.jsx(reactFormComponents.NumberField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), numberProps)));
458
465
  }
459
466
  case "BooleanFieldValueAndDefinition": {
460
467
  const value = field.booleanValue;
package/index.esm.js CHANGED
@@ -160,9 +160,13 @@ const BooleanCustomField = (_a) => {
160
160
  const DateCustomField = (props) => {
161
161
  const { setValue, defaultValue, register, id, validationRules } = props, rest = __rest(props, ["setValue", "defaultValue", "register", "id", "validationRules"]);
162
162
  const onChangeHandler = useCallback((e) => {
163
- var _a, _b, _c, _d;
164
- if (((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.valueAsDate) === null || _b === void 0 ? void 0 : _b.toISOString()) !== undefined) {
165
- setValue && setValue(id, (_d = (_c = e.target) === null || _c === void 0 ? void 0 : _c.valueAsDate) === null || _d === void 0 ? void 0 : _d.toISOString());
163
+ var _a, _b;
164
+ if (e.target) {
165
+ setValue &&
166
+ setValue(id, (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.valueAsDate) === null || _b === void 0 ? void 0 : _b.toISOString(), {
167
+ shouldDirty: true,
168
+ shouldValidate: true,
169
+ });
166
170
  }
167
171
  }, [setValue, id]);
168
172
  useEffect(() => {
@@ -189,7 +193,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
189
193
  if (selected) {
190
194
  const values = Array.isArray(selected) ? selected : [selected];
191
195
  setSelectedValue(values);
192
- setValue && setValue(id, values);
196
+ setValue && setValue(id, values, { shouldDirty: true, shouldValidate: true });
193
197
  }
194
198
  else {
195
199
  setSelectedValue([]);
@@ -372,7 +376,7 @@ const useUnitTranslation = () => {
372
376
  * and functions for form registration and state management.
373
377
  * @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
374
378
  */
375
- const useCustomFieldResolver = ({ field, register, setValue, formState, unitPreference = "SI", language, fieldId, isEditable, }) => {
379
+ const useCustomFieldResolver = ({ field, register, setValue, formState, formValue, unitPreference = "SI", language, fieldId, isEditable, }) => {
376
380
  var _a, _b, _c, _d, _e, _f, _g;
377
381
  const validation = { register, setValue, formState };
378
382
  const { unitTranslation } = useUnitTranslation();
@@ -402,24 +406,27 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
402
406
  case "WebAddressFieldValueAndDefinition": {
403
407
  const value = field.stringValue;
404
408
  const rules = getWebAddressValidationRules(field.definition);
405
- return (jsx(TextField, Object.assign({ actions: !isEditableCombined && value && jsx(ActionButton, { type: "WEB_ADDRESS", value: value }), dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
409
+ return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "WEB_ADDRESS", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
406
410
  }
407
411
  case "EmailFieldValueAndDefinition": {
408
412
  const value = field.stringValue;
409
413
  const rules = getEmailValidationRules(field.definition);
410
- return (jsx(TextField, Object.assign({ actions: !isEditableCombined && value && jsx(ActionButton, { type: "EMAIL", value: value }), dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
414
+ return (jsx(TextField, Object.assign({ actions: !isEditableCombined && formValue && jsx(ActionButton, { type: "EMAIL", value: formValue }), dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
411
415
  }
412
416
  case "PhoneNumberFieldValueAndDefinition": {
413
417
  const value = field.stringValue;
414
418
  const rules = getPhoneNumberValidationRules(field.definition);
415
- return (jsx(PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, rules), { onChangeValue: props => {
416
- validation.setValue(key, props.phone);
419
+ return (jsx(PhoneField, Object.assign({ dataTestId: `${field.definition.key}`, helpText: description, id: uniqueIdentifier, isCountryCodeClearable: !!isEditableCombined, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined, value: value !== null && value !== void 0 ? value : "" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), { onChangeValue: props => {
420
+ validation.setValue(key, props.phone, {
421
+ shouldDirty: true,
422
+ shouldValidate: true,
423
+ });
417
424
  } })));
418
425
  }
419
426
  case "StringFieldValueAndDefinition": {
420
427
  const value = field.stringValue;
421
428
  const rules = getStringValidationRules(field.definition);
422
- return (jsx(TextField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, rules))));
429
+ return (jsx(TextField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, placeholder: title !== null && title !== void 0 ? title : "", readOnly: !isEditableCombined }, validation.register(key, Object.assign(Object.assign({}, rules), { value })))));
423
430
  }
424
431
  case "NumberFieldValueAndDefinition": {
425
432
  const value = field.numberValue;
@@ -431,7 +438,7 @@ const useCustomFieldResolver = ({ field, register, setValue, formState, unitPref
431
438
  placeholder: title !== null && title !== void 0 ? title : "",
432
439
  addonAfter: unitTranslation(unit),
433
440
  };
434
- return (jsx(NumberField, Object.assign({ dataTestId: `${field.definition.key}`, defaultValue: value !== null && value !== void 0 ? value : "", errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, rules), numberProps)));
441
+ return (jsx(NumberField, Object.assign({ dataTestId: `${field.definition.key}`, errorMessage: errorMessage, helpText: description, id: uniqueIdentifier, label: title, max: (_b = field.definition.maximumNumber) !== null && _b !== void 0 ? _b : undefined, min: (_c = field.definition.minimumNumber) !== null && _c !== void 0 ? _c : undefined, readOnly: !isEditableCombined, step: field.definition.isInteger ? 1 : "any" }, validation.register(key, Object.assign(Object.assign({}, rules), { value })), numberProps)));
435
442
  }
436
443
  case "BooleanFieldValueAndDefinition": {
437
444
  const value = field.booleanValue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/custom-field-components",
3
- "version": "0.0.669",
3
+ "version": "0.0.672",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
package/src/CustomField.d.ts CHANGED
@@ -19,6 +19,10 @@ interface CustomFieldProps {
19
19
  * The current state of the form from react-hook-form, including any validation errors.
20
20
  */
21
21
  formState: FormState<FieldValues>;
22
+ /**
23
+ * The current value of the form field.
24
+ */
25
+ formValue?: string;
22
26
  /**
23
27
  * A function from react-hook-form to update the value of a registered field.
24
28
  */
@@ -49,7 +53,7 @@ interface CustomFieldProps {
49
53
  * and functions for form registration and state management.
50
54
  * @returns {JSX.Element | null} - The JSX Element for the custom field or null if the field definition is not provided.
51
55
  */
52
- export declare const useCustomFieldResolver: ({ field, register, setValue, formState, unitPreference, language, fieldId, isEditable, }: CustomFieldProps) => JSX.Element | null;
56
+ export declare const useCustomFieldResolver: ({ field, register, setValue, formState, formValue, unitPreference, language, fieldId, isEditable, }: CustomFieldProps) => JSX.Element | null;
53
57
  /**
54
58
  * CustomField is a React component that takes in the properties of a custom field and renders it.
55
59
  * It utilizes the `useCustomFieldResolver` hook to resolve the field into an input element