@trackunit/custom-field-components 0.0.342 → 0.0.344

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 +19 -9
  2. package/index.js +19 -9
  3. package/package.json +3 -3
  4. package/src/utils.d.ts +7 -0
package/index.cjs CHANGED
@@ -285,6 +285,16 @@ const getPhoneNumberValidationRules = (definition) => {
285
285
  ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
286
286
  };
287
287
 
288
+ /**
289
+ * Converts a string with uppercase characters and spaces to lowercase with dashes.
290
+ *
291
+ * @param {string} str - The input string.
292
+ * @returns {string} - The string converted.
293
+ */
294
+ const dashLowerCase = (str) => {
295
+ return str.replace(/[\sA-Z]/g, match => (match === " " ? "-" : match.toLowerCase()));
296
+ };
297
+
288
298
  /**
289
299
  * A component that renders a custom field based on the field definition
290
300
  *
@@ -319,28 +329,28 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
319
329
  const typedDefinition = field.definition;
320
330
  const typedValue = field.value;
321
331
  const rules = getWebAddressValidationRules(typedDefinition);
322
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (_e = (_d = typedValue.stringValue) !== null && _d !== void 0 ? _d : typedDefinition.defaultStringValue) !== null && _e !== void 0 ? _e : "", dataTestId: "webAddressField", actions: !typedDefinition.uiEditable &&
332
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (_e = (_d = typedValue.stringValue) !== null && _d !== void 0 ? _d : typedDefinition.defaultStringValue) !== null && _e !== void 0 ? _e : "", dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}`, actions: !typedDefinition.uiEditable &&
323
333
  (typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(reactFormComponents.ActionButton, { value: (_f = typedValue.stringValue) !== null && _f !== void 0 ? _f : typedDefinition.defaultStringValue, type: "WEB_ADDRESS" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
324
334
  }
325
335
  case irisAppRuntimeCoreApi.CustomFieldType.EMAIL: {
326
336
  const typedDefinition = field.definition;
327
337
  const typedValue = field.value;
328
338
  const rules = getEmailValidationRules(typedDefinition);
329
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_g = typedDefinition.title) !== null && _g !== void 0 ? _g : "", defaultValue: (_j = (_h = typedValue.stringValue) !== null && _h !== void 0 ? _h : typedDefinition.defaultStringValue) !== null && _j !== void 0 ? _j : "", dataTestId: `emailField`, actions: !typedDefinition.uiEditable &&
339
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_g = typedDefinition.title) !== null && _g !== void 0 ? _g : "", defaultValue: (_j = (_h = typedValue.stringValue) !== null && _h !== void 0 ? _h : typedDefinition.defaultStringValue) !== null && _j !== void 0 ? _j : "", dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}`, actions: !typedDefinition.uiEditable &&
330
340
  (typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(reactFormComponents.ActionButton, { value: (_k = typedValue.stringValue) !== null && _k !== void 0 ? _k : typedDefinition.defaultStringValue, type: "EMAIL" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
331
341
  }
332
342
  case irisAppRuntimeCoreApi.CustomFieldType.PHONE_NUMBER: {
333
343
  const typedDefinition = field.definition;
334
344
  const typedValue = field.value;
335
345
  const rules = getPhoneNumberValidationRules(typedDefinition);
336
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key, placeholder: (_l = typedDefinition.title) !== null && _l !== void 0 ? _l : "", defaultValue: (_o = (_m = typedValue.stringValue) !== null && _m !== void 0 ? _m : typedDefinition.defaultStringValue) !== null && _o !== void 0 ? _o : "", dataTestId: `phoneNumberField`, actions: !typedDefinition.uiEditable &&
346
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key, placeholder: (_l = typedDefinition.title) !== null && _l !== void 0 ? _l : "", defaultValue: (_o = (_m = typedValue.stringValue) !== null && _m !== void 0 ? _m : typedDefinition.defaultStringValue) !== null && _o !== void 0 ? _o : "", dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}`, actions: !typedDefinition.uiEditable &&
337
347
  (typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(reactFormComponents.ActionButton, { value: (_p = typedValue.stringValue) !== null && _p !== void 0 ? _p : typedDefinition.defaultStringValue, type: "PHONE_NUMBER" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage === "" ? "Must be a phone number" : undefined }, validation.register(key, rules))));
338
348
  }
339
349
  case irisAppRuntimeCoreApi.CustomFieldType.STRING: {
340
350
  const typedDefinition = field.definition;
341
351
  const typedValue = field.value;
342
352
  const rules = getStringValidationRules(typedDefinition);
343
- return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (_q = typedDefinition.title) !== null && _q !== void 0 ? _q : "", defaultValue: (_s = (_r = typedValue.stringValue) !== null && _r !== void 0 ? _r : typedDefinition.defaultStringValue) !== null && _s !== void 0 ? _s : "", readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage, dataTestId: `stringField` }, validation.register(key, rules))));
353
+ return (jsxRuntime.jsx(reactFormComponents.TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (_q = typedDefinition.title) !== null && _q !== void 0 ? _q : "", defaultValue: (_s = (_r = typedValue.stringValue) !== null && _r !== void 0 ? _r : typedDefinition.defaultStringValue) !== null && _s !== void 0 ? _s : "", readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage, dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}` }, validation.register(key, rules))));
344
354
  }
345
355
  case irisAppRuntimeCoreApi.CustomFieldType.NUMBER: {
346
356
  const typedDefinition = field.definition;
@@ -351,22 +361,22 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
351
361
  placeholder: (_t = typedDefinition.title) !== null && _t !== void 0 ? _t : "",
352
362
  addonAfter: unit,
353
363
  };
354
- return (jsxRuntime.jsx(reactFormComponents.FormGroup, Object.assign({ htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: typedDefinition.key ? `${typedDefinition.key}-FormGroup` : `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsxRuntime.jsx(reactFormComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: typedDefinition.key ? typedDefinition.key : `numberField`, defaultValue: (_v = (_u = typedValue.numberValue) !== null && _u !== void 0 ? _u : typedDefinition.defaultNumberValue) !== null && _v !== void 0 ? _v : "", readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_w = typedDefinition.minimumNumber) !== null && _w !== void 0 ? _w : undefined, max: (_x = typedDefinition.maximumNumber) !== null && _x !== void 0 ? _x : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
364
+ return (jsxRuntime.jsx(reactFormComponents.FormGroup, Object.assign({ htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: typedDefinition.title ? `${dashLowerCase(typedDefinition.title)}-FormGroup` : `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsxRuntime.jsx(reactFormComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: typedDefinition.title ? dashLowerCase(typedDefinition.title) : `numberField`, defaultValue: (_v = (_u = typedValue.numberValue) !== null && _u !== void 0 ? _u : typedDefinition.defaultNumberValue) !== null && _v !== void 0 ? _v : "", readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_w = typedDefinition.minimumNumber) !== null && _w !== void 0 ? _w : undefined, max: (_x = typedDefinition.maximumNumber) !== null && _x !== void 0 ? _x : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
355
365
  setNumberValue(e.target.value);
356
366
  validation.register(key, rules).onChange(e);
357
- } }, numberProps))) : (jsxRuntime.jsx(reactFormComponents.BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: typedDefinition.key ? typedDefinition.key : `numberField`, defaultValue: parseFloat(Number(numberValue).toPrecision(4)), readOnly: true, actions: jsxRuntime.jsx(ActionContainer, { children: jsxRuntime.jsx(StyledIconButton, { dataTestId: `${typedDefinition.key}-editIconButtonId`, size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) })));
367
+ } }, numberProps))) : (jsxRuntime.jsx(reactFormComponents.BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: typedDefinition.title ? dashLowerCase(typedDefinition.title) : `numberField`, defaultValue: parseFloat(Number(numberValue).toPrecision(4)), readOnly: true, actions: jsxRuntime.jsx(ActionContainer, { children: jsxRuntime.jsx(StyledIconButton, { dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}-editIconButtonId`, size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) })));
358
368
  }
359
369
  case irisAppRuntimeCoreApi.CustomFieldType.BOOLEAN: {
360
370
  const typedDefinition = field.definition;
361
371
  const typedValue = field.value;
362
372
  const rules = getBooleanValidationRules();
363
- return (jsxRuntime.jsx(BooleanCustomField, { label: (_y = typedDefinition.title) !== null && _y !== void 0 ? _y : "", id: key || "boolean-field", defaultValue: (_0 = (_z = typedValue.booleanValue) !== null && _z !== void 0 ? _z : typedDefinition.defaultBooleanValue) !== null && _0 !== void 0 ? _0 : undefined, readOnly: !typedDefinition.uiEditable, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: "booleanField" }, key));
373
+ return (jsxRuntime.jsx(BooleanCustomField, { label: (_y = typedDefinition.title) !== null && _y !== void 0 ? _y : "", id: key || "boolean-field", defaultValue: (_0 = (_z = typedValue.booleanValue) !== null && _z !== void 0 ? _z : typedDefinition.defaultBooleanValue) !== null && _0 !== void 0 ? _0 : undefined, readOnly: !typedDefinition.uiEditable, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}` }, key));
364
374
  }
365
375
  case irisAppRuntimeCoreApi.CustomFieldType.DROPDOWN: {
366
376
  const typedDefinition = field.definition;
367
377
  const typedValue = field.value;
368
378
  const rules = getDropdownValidationRules();
369
- return (jsxRuntime.jsx(DropdownCustomField, { label: typedDefinition.title || "", id: key || "dropdown-field", defaultValue: (_2 = (_1 = typedValue.stringArrayValue) !== null && _1 !== void 0 ? _1 : typedDefinition.defaultStringArrayValue) !== null && _2 !== void 0 ? _2 : undefined, disabled: !typedDefinition.uiEditable, allValues: (_3 = typedDefinition.allValues) !== null && _3 !== void 0 ? _3 : undefined, multiSelect: (_4 = typedDefinition.multiSelect) !== null && _4 !== void 0 ? _4 : false, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.key}-dropdownField` }, key));
379
+ return (jsxRuntime.jsx(DropdownCustomField, { label: typedDefinition.title || "", id: key || "dropdown-field", defaultValue: (_2 = (_1 = typedValue.stringArrayValue) !== null && _1 !== void 0 ? _1 : typedDefinition.defaultStringArrayValue) !== null && _2 !== void 0 ? _2 : undefined, disabled: !typedDefinition.uiEditable, allValues: (_3 = typedDefinition.allValues) !== null && _3 !== void 0 ? _3 : undefined, multiSelect: (_4 = typedDefinition.multiSelect) !== null && _4 !== void 0 ? _4 : false, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}-dropdownField` }, key));
370
380
  }
371
381
  case irisAppRuntimeCoreApi.CustomFieldType.DATE: {
372
382
  const typedDefinition = field.definition;
@@ -379,7 +389,7 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
379
389
  else if (typedDefinition.defaultDateValue !== undefined && typedDefinition.defaultDateValue !== null) {
380
390
  defaultValue = new Date(typedDefinition.defaultDateValue);
381
391
  }
382
- return (jsxRuntime.jsx(DateCustomField, { dataTestId: "dateField", id: key || "date-field", defaultValue: defaultValue, readOnly: !typedDefinition.uiEditable, register: validation.register, label: typedDefinition.title || "", validationRules: rules, helpText: description, errorMessage: errorMessage, setValue: validation.setValue, title: field.definition.title || "" }, key));
392
+ return (jsxRuntime.jsx(DateCustomField, { dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}`, id: key || "date-field", defaultValue: defaultValue, readOnly: !typedDefinition.uiEditable, register: validation.register, label: typedDefinition.title || "", validationRules: rules, helpText: description, errorMessage: errorMessage, setValue: validation.setValue, title: field.definition.title || "" }, key));
383
393
  }
384
394
  default:
385
395
  throw new Error(`Type not supported: ${type}`);
package/index.js CHANGED
@@ -262,6 +262,16 @@ const getPhoneNumberValidationRules = (definition) => {
262
262
  ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
263
263
  };
264
264
 
265
+ /**
266
+ * Converts a string with uppercase characters and spaces to lowercase with dashes.
267
+ *
268
+ * @param {string} str - The input string.
269
+ * @returns {string} - The string converted.
270
+ */
271
+ const dashLowerCase = (str) => {
272
+ return str.replace(/[\sA-Z]/g, match => (match === " " ? "-" : match.toLowerCase()));
273
+ };
274
+
265
275
  /**
266
276
  * A component that renders a custom field based on the field definition
267
277
  *
@@ -296,28 +306,28 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
296
306
  const typedDefinition = field.definition;
297
307
  const typedValue = field.value;
298
308
  const rules = getWebAddressValidationRules(typedDefinition);
299
- return (jsx(TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (_e = (_d = typedValue.stringValue) !== null && _d !== void 0 ? _d : typedDefinition.defaultStringValue) !== null && _e !== void 0 ? _e : "", dataTestId: "webAddressField", actions: !typedDefinition.uiEditable &&
309
+ return (jsx(TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (_e = (_d = typedValue.stringValue) !== null && _d !== void 0 ? _d : typedDefinition.defaultStringValue) !== null && _e !== void 0 ? _e : "", dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}`, actions: !typedDefinition.uiEditable &&
300
310
  (typedValue.stringValue || typedDefinition.defaultStringValue) && (jsx(ActionButton, { value: (_f = typedValue.stringValue) !== null && _f !== void 0 ? _f : typedDefinition.defaultStringValue, type: "WEB_ADDRESS" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
301
311
  }
302
312
  case CustomFieldType.EMAIL: {
303
313
  const typedDefinition = field.definition;
304
314
  const typedValue = field.value;
305
315
  const rules = getEmailValidationRules(typedDefinition);
306
- return (jsx(TextField, Object.assign({ id: key, label: title, placeholder: (_g = typedDefinition.title) !== null && _g !== void 0 ? _g : "", defaultValue: (_j = (_h = typedValue.stringValue) !== null && _h !== void 0 ? _h : typedDefinition.defaultStringValue) !== null && _j !== void 0 ? _j : "", dataTestId: `emailField`, actions: !typedDefinition.uiEditable &&
316
+ return (jsx(TextField, Object.assign({ id: key, label: title, placeholder: (_g = typedDefinition.title) !== null && _g !== void 0 ? _g : "", defaultValue: (_j = (_h = typedValue.stringValue) !== null && _h !== void 0 ? _h : typedDefinition.defaultStringValue) !== null && _j !== void 0 ? _j : "", dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}`, actions: !typedDefinition.uiEditable &&
307
317
  (typedValue.stringValue || typedDefinition.defaultStringValue) && (jsx(ActionButton, { value: (_k = typedValue.stringValue) !== null && _k !== void 0 ? _k : typedDefinition.defaultStringValue, type: "EMAIL" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
308
318
  }
309
319
  case CustomFieldType.PHONE_NUMBER: {
310
320
  const typedDefinition = field.definition;
311
321
  const typedValue = field.value;
312
322
  const rules = getPhoneNumberValidationRules(typedDefinition);
313
- return (jsx(TextField, Object.assign({ label: title, id: key, placeholder: (_l = typedDefinition.title) !== null && _l !== void 0 ? _l : "", defaultValue: (_o = (_m = typedValue.stringValue) !== null && _m !== void 0 ? _m : typedDefinition.defaultStringValue) !== null && _o !== void 0 ? _o : "", dataTestId: `phoneNumberField`, actions: !typedDefinition.uiEditable &&
323
+ return (jsx(TextField, Object.assign({ label: title, id: key, placeholder: (_l = typedDefinition.title) !== null && _l !== void 0 ? _l : "", defaultValue: (_o = (_m = typedValue.stringValue) !== null && _m !== void 0 ? _m : typedDefinition.defaultStringValue) !== null && _o !== void 0 ? _o : "", dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}`, actions: !typedDefinition.uiEditable &&
314
324
  (typedValue.stringValue || typedDefinition.defaultStringValue) && (jsx(ActionButton, { value: (_p = typedValue.stringValue) !== null && _p !== void 0 ? _p : typedDefinition.defaultStringValue, type: "PHONE_NUMBER" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage === "" ? "Must be a phone number" : undefined }, validation.register(key, rules))));
315
325
  }
316
326
  case CustomFieldType.STRING: {
317
327
  const typedDefinition = field.definition;
318
328
  const typedValue = field.value;
319
329
  const rules = getStringValidationRules(typedDefinition);
320
- return (jsx(TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (_q = typedDefinition.title) !== null && _q !== void 0 ? _q : "", defaultValue: (_s = (_r = typedValue.stringValue) !== null && _r !== void 0 ? _r : typedDefinition.defaultStringValue) !== null && _s !== void 0 ? _s : "", readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage, dataTestId: `stringField` }, validation.register(key, rules))));
330
+ return (jsx(TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (_q = typedDefinition.title) !== null && _q !== void 0 ? _q : "", defaultValue: (_s = (_r = typedValue.stringValue) !== null && _r !== void 0 ? _r : typedDefinition.defaultStringValue) !== null && _s !== void 0 ? _s : "", readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage, dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}` }, validation.register(key, rules))));
321
331
  }
322
332
  case CustomFieldType.NUMBER: {
323
333
  const typedDefinition = field.definition;
@@ -328,22 +338,22 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
328
338
  placeholder: (_t = typedDefinition.title) !== null && _t !== void 0 ? _t : "",
329
339
  addonAfter: unit,
330
340
  };
331
- return (jsx(FormGroup, Object.assign({ htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: typedDefinition.key ? `${typedDefinition.key}-FormGroup` : `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsx(NumberInput, Object.assign({ id: key || "number-field", dataTestId: typedDefinition.key ? typedDefinition.key : `numberField`, defaultValue: (_v = (_u = typedValue.numberValue) !== null && _u !== void 0 ? _u : typedDefinition.defaultNumberValue) !== null && _v !== void 0 ? _v : "", readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_w = typedDefinition.minimumNumber) !== null && _w !== void 0 ? _w : undefined, max: (_x = typedDefinition.maximumNumber) !== null && _x !== void 0 ? _x : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
341
+ return (jsx(FormGroup, Object.assign({ htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: typedDefinition.title ? `${dashLowerCase(typedDefinition.title)}-FormGroup` : `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsx(NumberInput, Object.assign({ id: key || "number-field", dataTestId: typedDefinition.title ? dashLowerCase(typedDefinition.title) : `numberField`, defaultValue: (_v = (_u = typedValue.numberValue) !== null && _u !== void 0 ? _u : typedDefinition.defaultNumberValue) !== null && _v !== void 0 ? _v : "", readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_w = typedDefinition.minimumNumber) !== null && _w !== void 0 ? _w : undefined, max: (_x = typedDefinition.maximumNumber) !== null && _x !== void 0 ? _x : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
332
342
  setNumberValue(e.target.value);
333
343
  validation.register(key, rules).onChange(e);
334
- } }, numberProps))) : (jsx(BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: typedDefinition.key ? typedDefinition.key : `numberField`, defaultValue: parseFloat(Number(numberValue).toPrecision(4)), readOnly: true, actions: jsx(ActionContainer, { children: jsx(StyledIconButton, { dataTestId: `${typedDefinition.key}-editIconButtonId`, size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) })));
344
+ } }, numberProps))) : (jsx(BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: typedDefinition.title ? dashLowerCase(typedDefinition.title) : `numberField`, defaultValue: parseFloat(Number(numberValue).toPrecision(4)), readOnly: true, actions: jsx(ActionContainer, { children: jsx(StyledIconButton, { dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}-editIconButtonId`, size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) })));
335
345
  }
336
346
  case CustomFieldType.BOOLEAN: {
337
347
  const typedDefinition = field.definition;
338
348
  const typedValue = field.value;
339
349
  const rules = getBooleanValidationRules();
340
- return (jsx(BooleanCustomField, { label: (_y = typedDefinition.title) !== null && _y !== void 0 ? _y : "", id: key || "boolean-field", defaultValue: (_0 = (_z = typedValue.booleanValue) !== null && _z !== void 0 ? _z : typedDefinition.defaultBooleanValue) !== null && _0 !== void 0 ? _0 : undefined, readOnly: !typedDefinition.uiEditable, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: "booleanField" }, key));
350
+ return (jsx(BooleanCustomField, { label: (_y = typedDefinition.title) !== null && _y !== void 0 ? _y : "", id: key || "boolean-field", defaultValue: (_0 = (_z = typedValue.booleanValue) !== null && _z !== void 0 ? _z : typedDefinition.defaultBooleanValue) !== null && _0 !== void 0 ? _0 : undefined, readOnly: !typedDefinition.uiEditable, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}` }, key));
341
351
  }
342
352
  case CustomFieldType.DROPDOWN: {
343
353
  const typedDefinition = field.definition;
344
354
  const typedValue = field.value;
345
355
  const rules = getDropdownValidationRules();
346
- return (jsx(DropdownCustomField, { label: typedDefinition.title || "", id: key || "dropdown-field", defaultValue: (_2 = (_1 = typedValue.stringArrayValue) !== null && _1 !== void 0 ? _1 : typedDefinition.defaultStringArrayValue) !== null && _2 !== void 0 ? _2 : undefined, disabled: !typedDefinition.uiEditable, allValues: (_3 = typedDefinition.allValues) !== null && _3 !== void 0 ? _3 : undefined, multiSelect: (_4 = typedDefinition.multiSelect) !== null && _4 !== void 0 ? _4 : false, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.key}-dropdownField` }, key));
356
+ return (jsx(DropdownCustomField, { label: typedDefinition.title || "", id: key || "dropdown-field", defaultValue: (_2 = (_1 = typedValue.stringArrayValue) !== null && _1 !== void 0 ? _1 : typedDefinition.defaultStringArrayValue) !== null && _2 !== void 0 ? _2 : undefined, disabled: !typedDefinition.uiEditable, allValues: (_3 = typedDefinition.allValues) !== null && _3 !== void 0 ? _3 : undefined, multiSelect: (_4 = typedDefinition.multiSelect) !== null && _4 !== void 0 ? _4 : false, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}-dropdownField` }, key));
347
357
  }
348
358
  case CustomFieldType.DATE: {
349
359
  const typedDefinition = field.definition;
@@ -356,7 +366,7 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
356
366
  else if (typedDefinition.defaultDateValue !== undefined && typedDefinition.defaultDateValue !== null) {
357
367
  defaultValue = new Date(typedDefinition.defaultDateValue);
358
368
  }
359
- return (jsx(DateCustomField, { dataTestId: "dateField", id: key || "date-field", defaultValue: defaultValue, readOnly: !typedDefinition.uiEditable, register: validation.register, label: typedDefinition.title || "", validationRules: rules, helpText: description, errorMessage: errorMessage, setValue: validation.setValue, title: field.definition.title || "" }, key));
369
+ return (jsx(DateCustomField, { dataTestId: `${typedDefinition.title && dashLowerCase(typedDefinition.title)}`, id: key || "date-field", defaultValue: defaultValue, readOnly: !typedDefinition.uiEditable, register: validation.register, label: typedDefinition.title || "", validationRules: rules, helpText: description, errorMessage: errorMessage, setValue: validation.setValue, title: field.definition.title || "" }, key));
360
370
  }
361
371
  default:
362
372
  throw new Error(`Type not supported: ${type}`);
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@trackunit/custom-field-components",
3
- "version": "0.0.342",
3
+ "version": "0.0.344",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "dependencies": {
7
7
  "@trackunit/iris-app-runtime-core": "0.3.43",
8
8
  "@trackunit/iris-app-runtime-core-api": "0.3.37",
9
- "@trackunit/react-components": "0.1.92",
9
+ "@trackunit/react-components": "0.1.93",
10
10
  "@trackunit/react-core-contexts-test": "0.1.61",
11
- "@trackunit/react-form-components": "0.0.31",
11
+ "@trackunit/react-form-components": "0.0.32",
12
12
  "@trackunit/tailwind-styled-components": "0.0.56",
13
13
  "libphonenumber-js": "1.10.30",
14
14
  "react": "18.2.0",
package/src/utils.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Converts a string with uppercase characters and spaces to lowercase with dashes.
3
+ *
4
+ * @param {string} str - The input string.
5
+ * @returns {string} - The string converted.
6
+ */
7
+ export declare const dashLowerCase: (str: string) => string;