@trackunit/custom-field-components 0.0.284 → 0.0.286

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 (3) hide show
  1. package/index.cjs +7 -4
  2. package/index.js +8 -5
  3. package/package.json +3 -2
package/index.cjs CHANGED
@@ -7,6 +7,7 @@ var irisAppRuntimeCoreApi = require('@trackunit/iris-app-runtime-core-api');
7
7
  var reactComponents = require('@trackunit/react-components');
8
8
  var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
9
9
  var React = require('react');
10
+ var uuid = require('uuid');
10
11
  var libphonenumberJs = require('libphonenumber-js');
11
12
 
12
13
  function _interopNamespace(e) {
@@ -66,6 +67,7 @@ const BooleanCustomField = (_a) => {
66
67
  var { defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText } = _a, rest = __rest(_a, ["defaultValue", "dataTestId", "onChange", "value", "id", "setValue", "register", "validationRules", "disabled", "label", "tip", "isInvalid", "errorMessage", "helpAddon", "maxLength", "helpText"]);
67
68
  const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
68
69
  const renderAsInvalid = isInvalid || Boolean(errorMessage);
70
+ const htmlForId = id ? id : "boolean-custom-field-" + uuid.v4();
69
71
  const [internalValue, setInternalValue] = React__namespace.useState(initialValue);
70
72
  React__namespace.useEffect(() => {
71
73
  setInternalValue((value === undefined ? defaultValue : value) || false);
@@ -83,7 +85,7 @@ const BooleanCustomField = (_a) => {
83
85
  register && register(id, Object.assign(Object.assign({}, validationRules), { value: internalValue.toString() }));
84
86
  // eslint-disable-next-line react-hooks/exhaustive-deps
85
87
  }, []); // register only once
86
- return (jsxRuntime.jsx(reactComponents.FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(reactComponents.Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, id: id, disabled: disabled, name: id, onChange: onChangeHandler, isInvalid: renderAsInvalid }, rest)) })));
88
+ return (jsxRuntime.jsx(reactComponents.FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(reactComponents.Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, id: htmlForId, disabled: disabled, name: id, onChange: onChangeHandler, isInvalid: renderAsInvalid }, rest)) })));
87
89
  };
88
90
 
89
91
  /**
@@ -104,7 +106,7 @@ const DateCustomField = (props) => {
104
106
  const value = defaultValue && new Date(defaultValue);
105
107
  register && register(id, Object.assign(Object.assign({}, validationRules), { value }));
106
108
  }, [register, validationRules, defaultValue, id]);
107
- return (jsxRuntime.jsx(reactComponents.DateField, Object.assign({}, rest, { helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, onChange: onChangeHandler, label: props.title, defaultValue: defaultValue })));
109
+ return (React.createElement(reactComponents.DateField, Object.assign({}, rest, { key: id, id: id, helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, onChange: onChangeHandler, label: props.title, defaultValue: defaultValue })));
108
110
  };
109
111
 
110
112
  const convertToValueFormat = (value) => {
@@ -118,6 +120,7 @@ const convertToValueFormat = (value) => {
118
120
  */
119
121
  const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
120
122
  const renderAsInvalid = isInvalid || Boolean(errorMessage);
123
+ const htmlForId = id ? id : "dropdown-custom-field-" + uuid.v4();
121
124
  const [selectedValue, setSelectedValue] = React__namespace.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
122
125
  const onChangeHandler = React__namespace.useCallback((selected) => {
123
126
  if (selected) {
@@ -136,7 +139,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
136
139
  React__namespace.useEffect(() => {
137
140
  register && register(id, Object.assign(Object.assign({}, validationRules), { value: selectedValue }));
138
141
  }, [register, validationRules, selectedValue, id]);
139
- return (jsxRuntime.jsx(reactComponents.FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(reactComponents.Select, { disabled: disabled, dataTestId: dataTestId, onChange: onChangeHandler, hasError: renderAsInvalid, options: options, value: selectedValue, isMulti: multiSelect, isClearable: true }) })));
142
+ return (jsxRuntime.jsx(reactComponents.FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(reactComponents.Select, { inputId: htmlForId, "aria-labelledby": htmlForId + "-label", disabled: disabled, dataTestId: dataTestId, onChange: onChangeHandler, hasError: renderAsInvalid, options: options, value: selectedValue, isMulti: multiSelect, isClearable: true }) })));
140
143
  };
141
144
 
142
145
  /**
@@ -347,7 +350,7 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
347
350
  placeholder: (_t = typedDefinition.title) !== null && _t !== void 0 ? _t : "",
348
351
  addonAfter: unit,
349
352
  };
350
- return (jsxRuntime.jsx(reactComponents.FormGroup, Object.assign({ label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsxRuntime.jsx(reactComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: "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 => {
353
+ return (jsxRuntime.jsx(reactComponents.FormGroup, Object.assign({ htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsxRuntime.jsx(reactComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: "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 => {
351
354
  setNumberValue(e.target.value);
352
355
  validation.register(key, rules).onChange(e);
353
356
  } }, numberProps))) : (jsxRuntime.jsx(reactComponents.BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: `${key}-numberField`, defaultValue: parseFloat(Number(numberValue).toPrecision(4)), readOnly: true, actions: jsxRuntime.jsx(ActionContainer, { children: jsxRuntime.jsx(StyledIconButton, { dataTestId: "editIconButtonId", size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) })));
package/index.js CHANGED
@@ -3,7 +3,8 @@ import { CustomFieldType } from '@trackunit/iris-app-runtime-core-api';
3
3
  import { FormGroup, Checkbox, DateField, Select, IconButton, NumberInput, BaseInput, Icon, TextField, ActionButton } from '@trackunit/react-components';
4
4
  import { tw, twx } from '@trackunit/tailwind-styled-components';
5
5
  import * as React from 'react';
6
- import { useCallback, useEffect, useState } from 'react';
6
+ import { useCallback, useEffect, createElement, useState } from 'react';
7
+ import { v4 } from 'uuid';
7
8
  import { isValidPhoneNumber } from 'libphonenumber-js';
8
9
 
9
10
  /******************************************************************************
@@ -43,6 +44,7 @@ const BooleanCustomField = (_a) => {
43
44
  var { defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText } = _a, rest = __rest(_a, ["defaultValue", "dataTestId", "onChange", "value", "id", "setValue", "register", "validationRules", "disabled", "label", "tip", "isInvalid", "errorMessage", "helpAddon", "maxLength", "helpText"]);
44
45
  const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
45
46
  const renderAsInvalid = isInvalid || Boolean(errorMessage);
47
+ const htmlForId = id ? id : "boolean-custom-field-" + v4();
46
48
  const [internalValue, setInternalValue] = React.useState(initialValue);
47
49
  React.useEffect(() => {
48
50
  setInternalValue((value === undefined ? defaultValue : value) || false);
@@ -60,7 +62,7 @@ const BooleanCustomField = (_a) => {
60
62
  register && register(id, Object.assign(Object.assign({}, validationRules), { value: internalValue.toString() }));
61
63
  // eslint-disable-next-line react-hooks/exhaustive-deps
62
64
  }, []); // register only once
63
- return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, id: id, disabled: disabled, name: id, onChange: onChangeHandler, isInvalid: renderAsInvalid }, rest)) })));
65
+ return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, id: htmlForId, disabled: disabled, name: id, onChange: onChangeHandler, isInvalid: renderAsInvalid }, rest)) })));
64
66
  };
65
67
 
66
68
  /**
@@ -81,7 +83,7 @@ const DateCustomField = (props) => {
81
83
  const value = defaultValue && new Date(defaultValue);
82
84
  register && register(id, Object.assign(Object.assign({}, validationRules), { value }));
83
85
  }, [register, validationRules, defaultValue, id]);
84
- return (jsx(DateField, Object.assign({}, rest, { helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, onChange: onChangeHandler, label: props.title, defaultValue: defaultValue })));
86
+ return (createElement(DateField, Object.assign({}, rest, { key: id, id: id, helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, onChange: onChangeHandler, label: props.title, defaultValue: defaultValue })));
85
87
  };
86
88
 
87
89
  const convertToValueFormat = (value) => {
@@ -95,6 +97,7 @@ const convertToValueFormat = (value) => {
95
97
  */
96
98
  const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
97
99
  const renderAsInvalid = isInvalid || Boolean(errorMessage);
100
+ const htmlForId = id ? id : "dropdown-custom-field-" + v4();
98
101
  const [selectedValue, setSelectedValue] = React.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
99
102
  const onChangeHandler = React.useCallback((selected) => {
100
103
  if (selected) {
@@ -113,7 +116,7 @@ const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, d
113
116
  React.useEffect(() => {
114
117
  register && register(id, Object.assign(Object.assign({}, validationRules), { value: selectedValue }));
115
118
  }, [register, validationRules, selectedValue, id]);
116
- return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(Select, { disabled: disabled, dataTestId: dataTestId, onChange: onChangeHandler, hasError: renderAsInvalid, options: options, value: selectedValue, isMulti: multiSelect, isClearable: true }) })));
119
+ return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(Select, { inputId: htmlForId, "aria-labelledby": htmlForId + "-label", disabled: disabled, dataTestId: dataTestId, onChange: onChangeHandler, hasError: renderAsInvalid, options: options, value: selectedValue, isMulti: multiSelect, isClearable: true }) })));
117
120
  };
118
121
 
119
122
  /**
@@ -324,7 +327,7 @@ const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldI
324
327
  placeholder: (_t = typedDefinition.title) !== null && _t !== void 0 ? _t : "",
325
328
  addonAfter: unit,
326
329
  };
327
- return (jsx(FormGroup, Object.assign({ label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsx(NumberInput, Object.assign({ id: key || "number-field", dataTestId: "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 => {
330
+ return (jsx(FormGroup, Object.assign({ htmlFor: isEditing ? key || "number-field" : `${key}-number-field`, label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsx(NumberInput, Object.assign({ id: key || "number-field", dataTestId: "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 => {
328
331
  setNumberValue(e.target.value);
329
332
  validation.register(key, rules).onChange(e);
330
333
  } }, numberProps))) : (jsx(BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: `${key}-numberField`, defaultValue: parseFloat(Number(numberValue).toPrecision(4)), readOnly: true, actions: jsx(ActionContainer, { children: jsx(StyledIconButton, { dataTestId: "editIconButtonId", size: "small", color: "tertiary", icon: jsx(Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) })));
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@trackunit/custom-field-components",
3
- "version": "0.0.284",
3
+ "version": "0.0.286",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "dependencies": {
7
7
  "@trackunit/react-core-contexts-test": "0.1.36",
8
- "@trackunit/react-components": "0.1.67",
8
+ "@trackunit/react-components": "0.1.69",
9
9
  "react": "18.2.0",
10
10
  "react-hook-form": "7.40.0",
11
+ "uuid": "8.3.2",
11
12
  "@trackunit/iris-app-runtime-core": "0.3.23",
12
13
  "@trackunit/iris-app-runtime-core-api": "0.3.21",
13
14
  "@trackunit/tailwind-styled-components": "0.0.54",