@trackunit/react-components 0.1.67 → 0.1.68
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.
- package/index.cjs +32 -24
- package/index.css +23 -24
- package/index.js +32 -24
- package/package.json +2 -1
- package/src/components/FormGroup/FormGroup.d.ts +2 -1
package/index.cjs
CHANGED
|
@@ -7,6 +7,7 @@ var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
|
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var uiIcons = require('@trackunit/ui-icons');
|
|
9
9
|
var reactUse = require('react-use');
|
|
10
|
+
var uuid = require('uuid');
|
|
10
11
|
var dateFns = require('date-fns');
|
|
11
12
|
var react = require('@floating-ui/react');
|
|
12
13
|
var reactDayPicker = require('react-day-picker');
|
|
@@ -825,7 +826,7 @@ const CheckboxWrapper = tailwindStyledComponents.tw.span `
|
|
|
825
826
|
? tailwindStyledComponents.tws `tu-checkbox--selected`
|
|
826
827
|
: tailwindStyledComponents.tws `tu-checkbox--deselected`;
|
|
827
828
|
}}
|
|
828
|
-
|
|
829
|
+
|
|
829
830
|
${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-checkbox--invalid`}
|
|
830
831
|
`;
|
|
831
832
|
|
|
@@ -1079,13 +1080,13 @@ const TipContainer = tailwindStyledComponents.tw.text `
|
|
|
1079
1080
|
* @param {FormGroupProps} props - The props for the FormGroup component
|
|
1080
1081
|
* @returns {JSX.Element} FormGroup component
|
|
1081
1082
|
*/
|
|
1082
|
-
const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled = false, }) => {
|
|
1083
|
-
return (jsxRuntime.jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxRuntime.jsxs(ContainerBefore, { children: [jsxRuntime.jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label
|
|
1083
|
+
const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled = false, }) => {
|
|
1084
|
+
return (jsxRuntime.jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxRuntime.jsxs(ContainerBefore, { children: [jsxRuntime.jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label" }, { children: label })), tip && jsxRuntime.jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxRuntime.jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsxRuntime.jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsxRuntime.jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
|
|
1084
1085
|
};
|
|
1085
|
-
const FormGroupRoot = tailwindStyledComponents.tw.
|
|
1086
|
+
const FormGroupRoot = tailwindStyledComponents.tw.div `
|
|
1086
1087
|
tu-form-group
|
|
1087
1088
|
${({ $disabled }) => {
|
|
1088
|
-
return $disabled ? "pointer-events-none
|
|
1089
|
+
return $disabled ? "pointer-events-none" : null;
|
|
1089
1090
|
}}
|
|
1090
1091
|
`;
|
|
1091
1092
|
const ContainerBefore = tailwindStyledComponents.tw.div `
|
|
@@ -1099,7 +1100,7 @@ const ContainerAfter = tailwindStyledComponents.tw.div `
|
|
|
1099
1100
|
${({ $isInvalid }) => ($isInvalid ? tailwindStyledComponents.tws `tu-form-group__container-after--invalid` : null)}
|
|
1100
1101
|
`;
|
|
1101
1102
|
const HelpAddon = tailwindStyledComponents.tw.span `
|
|
1102
|
-
tu-form-group__help-addon
|
|
1103
|
+
tu-form-group__help-addon
|
|
1103
1104
|
`;
|
|
1104
1105
|
|
|
1105
1106
|
/**
|
|
@@ -1110,9 +1111,10 @@ const HelpAddon = tailwindStyledComponents.tw.span `
|
|
|
1110
1111
|
* _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
|
|
1111
1112
|
*/
|
|
1112
1113
|
const DateField = React.forwardRef((_a, ref) => {
|
|
1113
|
-
var { label, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
|
|
1114
|
+
var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
|
|
1114
1115
|
const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
|
|
1115
|
-
|
|
1116
|
+
const htmlForId = id ? id : "dateField-" + uuid.v4();
|
|
1117
|
+
return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(DateInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
1116
1118
|
});
|
|
1117
1119
|
|
|
1118
1120
|
const localeLookup = {
|
|
@@ -1326,15 +1328,16 @@ const EmailInput = React__namespace.forwardRef((_a, ref) => {
|
|
|
1326
1328
|
*
|
|
1327
1329
|
*/
|
|
1328
1330
|
const EmailField = React.forwardRef((_a, ref) => {
|
|
1329
|
-
var { label, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
|
|
1331
|
+
var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
|
|
1330
1332
|
const [value, setValue] = React.useState(defaultValue);
|
|
1333
|
+
const htmlForId = id ? id : "emailField-" + uuid.v4();
|
|
1331
1334
|
// Type guard to check if value is a string
|
|
1332
1335
|
function isString(inputValue) {
|
|
1333
1336
|
return typeof inputValue === "string";
|
|
1334
1337
|
}
|
|
1335
1338
|
// Check the regular expression only if value is a string
|
|
1336
1339
|
const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
|
|
1337
|
-
return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(EmailInput, Object.assign({ ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
1340
|
+
return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(EmailInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
1338
1341
|
});
|
|
1339
1342
|
|
|
1340
1343
|
/**
|
|
@@ -1609,9 +1612,10 @@ const NumberInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput,
|
|
|
1609
1612
|
* _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
|
|
1610
1613
|
*/
|
|
1611
1614
|
const NumberField = React.forwardRef((_a, ref) => {
|
|
1612
|
-
var { label, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
|
|
1615
|
+
var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
|
|
1613
1616
|
const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
|
|
1614
|
-
|
|
1617
|
+
const htmlForId = id ? id : "numberField-" + uuid.v4();
|
|
1618
|
+
return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
1615
1619
|
});
|
|
1616
1620
|
|
|
1617
1621
|
/**
|
|
@@ -2340,9 +2344,10 @@ const Container = tailwindStyledComponents.tw.div `
|
|
|
2340
2344
|
* @returns {JSX.Element} - The PhoneField component.
|
|
2341
2345
|
*/
|
|
2342
2346
|
const PhoneField = React.forwardRef((_a, ref) => {
|
|
2343
|
-
var { label, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
|
|
2347
|
+
var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
|
|
2344
2348
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
2345
|
-
|
|
2349
|
+
const htmlForId = id ? id : "phoneField-" + uuid.v4();
|
|
2350
|
+
return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
|
|
2346
2351
|
});
|
|
2347
2352
|
|
|
2348
2353
|
function useConfirmExit(confirmExit, when = true) {
|
|
@@ -2436,7 +2441,7 @@ ${({ $inline }) => ($inline ? tailwindStyledComponents.tws `tu-radiogroup--inlin
|
|
|
2436
2441
|
const RadioItem = ({ label, value, dataTestId, className, description }) => {
|
|
2437
2442
|
const groupCtx = React__namespace.useContext(RadioGroupContext);
|
|
2438
2443
|
const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
|
|
2439
|
-
return (jsxRuntime.jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}
|
|
2444
|
+
return (jsxRuntime.jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsxRuntime.jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsxRuntime.jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
|
|
2440
2445
|
};
|
|
2441
2446
|
const InputWrapper = tailwindStyledComponents.tw.label `tu-radioitem__wrapper`;
|
|
2442
2447
|
const Input = tailwindStyledComponents.tw.input `
|
|
@@ -2631,7 +2636,7 @@ const ChildContainer = tailwindStyledComponents.tw.div `
|
|
|
2631
2636
|
*/
|
|
2632
2637
|
const TextArea = React__namespace.forwardRef((_a, ref) => {
|
|
2633
2638
|
var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, className, required, dataTestId, isInvalid } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "className", "required", "dataTestId", "isInvalid"]);
|
|
2634
|
-
return (jsxRuntime.jsx(StyledTextArea, Object.assign({ name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
|
|
2639
|
+
return (jsxRuntime.jsx(StyledTextArea, Object.assign({ id: id, name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
|
|
2635
2640
|
});
|
|
2636
2641
|
const StyledTextArea = tailwindStyledComponents.tw.textarea `
|
|
2637
2642
|
tu-textarea
|
|
@@ -2668,17 +2673,18 @@ const Root$1 = tailwindStyledComponents.tw.span `
|
|
|
2668
2673
|
`;
|
|
2669
2674
|
|
|
2670
2675
|
const TextAreaField = React__namespace.forwardRef((_a, ref) => {
|
|
2671
|
-
var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
|
|
2676
|
+
var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
|
|
2672
2677
|
const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
|
|
2673
2678
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
2679
|
+
const htmlForId = id ? id : "textAreaField-" + uuid.v4();
|
|
2674
2680
|
const handleChange = React__namespace.useCallback((event) => {
|
|
2675
2681
|
setValueLength(event.target.value.length);
|
|
2676
2682
|
if (onChange) {
|
|
2677
2683
|
onChange(event);
|
|
2678
2684
|
}
|
|
2679
2685
|
}, [onChange]);
|
|
2680
|
-
return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
|
|
2681
|
-
(maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(TextArea, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
|
|
2686
|
+
return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
|
|
2687
|
+
(maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(TextArea, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
|
|
2682
2688
|
});
|
|
2683
2689
|
|
|
2684
2690
|
/**
|
|
@@ -2689,17 +2695,18 @@ const TextAreaField = React__namespace.forwardRef((_a, ref) => {
|
|
|
2689
2695
|
* _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
|
|
2690
2696
|
*/
|
|
2691
2697
|
const TextField = React__namespace.forwardRef((_a, ref) => {
|
|
2692
|
-
var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
|
|
2698
|
+
var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
|
|
2693
2699
|
const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
|
|
2694
2700
|
const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
|
|
2701
|
+
const htmlFor = id ? id : "textField-" + uuid.v4();
|
|
2695
2702
|
const handleChange = React__namespace.useCallback((event) => {
|
|
2696
2703
|
setValueLength(event.target.value.length);
|
|
2697
2704
|
if (onChange) {
|
|
2698
2705
|
onChange(event);
|
|
2699
2706
|
}
|
|
2700
2707
|
}, [onChange]);
|
|
2701
|
-
return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
|
|
2702
|
-
(maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsxRuntime.jsx(TextInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
|
|
2708
|
+
return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
|
|
2709
|
+
(maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsxRuntime.jsx(TextInput, Object.assign({ id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
|
|
2703
2710
|
});
|
|
2704
2711
|
|
|
2705
2712
|
/**
|
|
@@ -2787,9 +2794,10 @@ tu-upload-input`;
|
|
|
2787
2794
|
* Upload fields enable the user to upload Files.
|
|
2788
2795
|
*/
|
|
2789
2796
|
const UploadField = React.forwardRef((_a, ref) => {
|
|
2790
|
-
var { label, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
|
|
2797
|
+
var { label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
|
|
2791
2798
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
2792
|
-
|
|
2799
|
+
const htmlForId = id ? id : "uploadField-" + uuid.v4();
|
|
2800
|
+
return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(UploadInput, Object.assign({ ref: ref, id: htmlForId, "aria-labelledby": htmlForId + "-label", isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
2793
2801
|
});
|
|
2794
2802
|
|
|
2795
2803
|
/**
|
package/index.css
CHANGED
|
@@ -223,16 +223,15 @@
|
|
|
223
223
|
|
|
224
224
|
/* CSS related to the RadioGroup component */
|
|
225
225
|
.tu-radiogroup {
|
|
226
|
-
@apply flex
|
|
227
|
-
gap-2
|
|
228
|
-
|
|
229
|
-
flex-col
|
|
226
|
+
@apply flex
|
|
227
|
+
gap-2
|
|
228
|
+
flex-col
|
|
230
229
|
items-start;
|
|
231
230
|
|
|
232
231
|
&--inline {
|
|
233
|
-
@apply flex
|
|
234
|
-
gap-3
|
|
235
|
-
flex-row
|
|
232
|
+
@apply flex
|
|
233
|
+
gap-3
|
|
234
|
+
flex-row
|
|
236
235
|
items-center;
|
|
237
236
|
}
|
|
238
237
|
}
|
|
@@ -240,14 +239,14 @@
|
|
|
240
239
|
.tu-radioitem {
|
|
241
240
|
@apply w-4
|
|
242
241
|
h-4
|
|
243
|
-
appearance-none
|
|
244
|
-
rounded-3xl
|
|
245
|
-
bg-white
|
|
246
|
-
border-solid
|
|
247
|
-
border
|
|
248
|
-
border-slate-300
|
|
242
|
+
appearance-none
|
|
243
|
+
rounded-3xl
|
|
244
|
+
bg-white
|
|
245
|
+
border-solid
|
|
246
|
+
border
|
|
247
|
+
border-slate-300
|
|
249
248
|
shadow-sm
|
|
250
|
-
shrink-0
|
|
249
|
+
shrink-0
|
|
251
250
|
transition
|
|
252
251
|
box-border
|
|
253
252
|
hover:cursor-pointer
|
|
@@ -257,19 +256,19 @@
|
|
|
257
256
|
focus:ring-blue-700;
|
|
258
257
|
|
|
259
258
|
&__wrapper {
|
|
260
|
-
@apply flex
|
|
259
|
+
@apply flex
|
|
261
260
|
gap-2
|
|
262
261
|
items-center;
|
|
263
262
|
}
|
|
264
263
|
|
|
265
264
|
&--checked {
|
|
266
|
-
@apply border-solid
|
|
267
|
-
border-4
|
|
265
|
+
@apply border-solid
|
|
266
|
+
border-4
|
|
268
267
|
border-blue-600
|
|
269
268
|
bg-white
|
|
270
|
-
hover:bg-slate-100
|
|
269
|
+
hover:bg-slate-100
|
|
271
270
|
hover:cursor-pointer
|
|
272
|
-
outline-0
|
|
271
|
+
outline-0
|
|
273
272
|
active:bg-slate-200
|
|
274
273
|
active:ring-2
|
|
275
274
|
active:ring-offset-2
|
|
@@ -292,8 +291,8 @@
|
|
|
292
291
|
}
|
|
293
292
|
|
|
294
293
|
&--disabled {
|
|
295
|
-
@apply bg-slate-400
|
|
296
|
-
border-slate-300
|
|
294
|
+
@apply bg-slate-400
|
|
295
|
+
border-slate-300
|
|
297
296
|
cursor-not-allowed
|
|
298
297
|
group-hover:bg-slate-400
|
|
299
298
|
group-focus:bg-slate-400
|
|
@@ -316,12 +315,12 @@
|
|
|
316
315
|
}
|
|
317
316
|
|
|
318
317
|
&__description {
|
|
319
|
-
@apply text-sm
|
|
318
|
+
@apply text-sm
|
|
320
319
|
font-normal
|
|
321
|
-
text-slate-500
|
|
320
|
+
text-slate-500
|
|
322
321
|
text-left
|
|
323
322
|
whitespace-nowrap
|
|
324
|
-
text-ellipsis
|
|
323
|
+
text-ellipsis
|
|
325
324
|
overflow-hidden;
|
|
326
325
|
|
|
327
326
|
&--disabled {
|
package/index.js
CHANGED
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import React__default, { useState, forwardRef, useMemo, createContext, useContext, isValidElement, cloneElement, useCallback, useEffect, Children, useRef, memo } from 'react';
|
|
5
5
|
import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
|
|
6
6
|
import { useMeasure, useCopyToClipboard } from 'react-use';
|
|
7
|
+
import { v4 } from 'uuid';
|
|
7
8
|
import { format, formatDistance } from 'date-fns';
|
|
8
9
|
import { useFloating, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
|
|
9
10
|
import { DayPicker as DayPicker$1 } from 'react-day-picker';
|
|
@@ -795,7 +796,7 @@ const CheckboxWrapper = tw.span `
|
|
|
795
796
|
? tws `tu-checkbox--selected`
|
|
796
797
|
: tws `tu-checkbox--deselected`;
|
|
797
798
|
}}
|
|
798
|
-
|
|
799
|
+
|
|
799
800
|
${({ $isInvalid }) => $isInvalid && tws `tu-checkbox--invalid`}
|
|
800
801
|
`;
|
|
801
802
|
|
|
@@ -1049,13 +1050,13 @@ const TipContainer = tw.text `
|
|
|
1049
1050
|
* @param {FormGroupProps} props - The props for the FormGroup component
|
|
1050
1051
|
* @returns {JSX.Element} FormGroup component
|
|
1051
1052
|
*/
|
|
1052
|
-
const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled = false, }) => {
|
|
1053
|
-
return (jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxs(ContainerBefore, { children: [jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label
|
|
1053
|
+
const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled = false, }) => {
|
|
1054
|
+
return (jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxs(ContainerBefore, { children: [jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label" }, { children: label })), tip && jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
|
|
1054
1055
|
};
|
|
1055
|
-
const FormGroupRoot = tw.
|
|
1056
|
+
const FormGroupRoot = tw.div `
|
|
1056
1057
|
tu-form-group
|
|
1057
1058
|
${({ $disabled }) => {
|
|
1058
|
-
return $disabled ? "pointer-events-none
|
|
1059
|
+
return $disabled ? "pointer-events-none" : null;
|
|
1059
1060
|
}}
|
|
1060
1061
|
`;
|
|
1061
1062
|
const ContainerBefore = tw.div `
|
|
@@ -1069,7 +1070,7 @@ const ContainerAfter = tw.div `
|
|
|
1069
1070
|
${({ $isInvalid }) => ($isInvalid ? tws `tu-form-group__container-after--invalid` : null)}
|
|
1070
1071
|
`;
|
|
1071
1072
|
const HelpAddon = tw.span `
|
|
1072
|
-
tu-form-group__help-addon
|
|
1073
|
+
tu-form-group__help-addon
|
|
1073
1074
|
`;
|
|
1074
1075
|
|
|
1075
1076
|
/**
|
|
@@ -1080,9 +1081,10 @@ const HelpAddon = tw.span `
|
|
|
1080
1081
|
* _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
|
|
1081
1082
|
*/
|
|
1082
1083
|
const DateField = forwardRef((_a, ref) => {
|
|
1083
|
-
var { label, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
|
|
1084
|
+
var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
|
|
1084
1085
|
const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
|
|
1085
|
-
|
|
1086
|
+
const htmlForId = id ? id : "dateField-" + v4();
|
|
1087
|
+
return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(DateInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
1086
1088
|
});
|
|
1087
1089
|
|
|
1088
1090
|
const localeLookup = {
|
|
@@ -1296,15 +1298,16 @@ const EmailInput = React.forwardRef((_a, ref) => {
|
|
|
1296
1298
|
*
|
|
1297
1299
|
*/
|
|
1298
1300
|
const EmailField = forwardRef((_a, ref) => {
|
|
1299
|
-
var { label, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
|
|
1301
|
+
var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
|
|
1300
1302
|
const [value, setValue] = useState(defaultValue);
|
|
1303
|
+
const htmlForId = id ? id : "emailField-" + v4();
|
|
1301
1304
|
// Type guard to check if value is a string
|
|
1302
1305
|
function isString(inputValue) {
|
|
1303
1306
|
return typeof inputValue === "string";
|
|
1304
1307
|
}
|
|
1305
1308
|
// Check the regular expression only if value is a string
|
|
1306
1309
|
const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
|
|
1307
|
-
return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(EmailInput, Object.assign({ ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
1310
|
+
return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(EmailInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
1308
1311
|
});
|
|
1309
1312
|
|
|
1310
1313
|
/**
|
|
@@ -1579,9 +1582,10 @@ const NumberInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ r
|
|
|
1579
1582
|
* _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
|
|
1580
1583
|
*/
|
|
1581
1584
|
const NumberField = forwardRef((_a, ref) => {
|
|
1582
|
-
var { label, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
|
|
1585
|
+
var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
|
|
1583
1586
|
const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
|
|
1584
|
-
|
|
1587
|
+
const htmlForId = id ? id : "numberField-" + v4();
|
|
1588
|
+
return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
1585
1589
|
});
|
|
1586
1590
|
|
|
1587
1591
|
/**
|
|
@@ -2310,9 +2314,10 @@ const Container = tw.div `
|
|
|
2310
2314
|
* @returns {JSX.Element} - The PhoneField component.
|
|
2311
2315
|
*/
|
|
2312
2316
|
const PhoneField = forwardRef((_a, ref) => {
|
|
2313
|
-
var { label, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
|
|
2317
|
+
var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
|
|
2314
2318
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
2315
|
-
|
|
2319
|
+
const htmlForId = id ? id : "phoneField-" + v4();
|
|
2320
|
+
return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
|
|
2316
2321
|
});
|
|
2317
2322
|
|
|
2318
2323
|
function useConfirmExit(confirmExit, when = true) {
|
|
@@ -2406,7 +2411,7 @@ ${({ $inline }) => ($inline ? tws `tu-radiogroup--inline` : tws `tu-radiogroup`)
|
|
|
2406
2411
|
const RadioItem = ({ label, value, dataTestId, className, description }) => {
|
|
2407
2412
|
const groupCtx = React.useContext(RadioGroupContext);
|
|
2408
2413
|
const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
|
|
2409
|
-
return (jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}
|
|
2414
|
+
return (jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxs(LabelContainer$1, { children: [jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
|
|
2410
2415
|
};
|
|
2411
2416
|
const InputWrapper = tw.label `tu-radioitem__wrapper`;
|
|
2412
2417
|
const Input = tw.input `
|
|
@@ -2601,7 +2606,7 @@ const ChildContainer = tw.div `
|
|
|
2601
2606
|
*/
|
|
2602
2607
|
const TextArea = React.forwardRef((_a, ref) => {
|
|
2603
2608
|
var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, className, required, dataTestId, isInvalid } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "className", "required", "dataTestId", "isInvalid"]);
|
|
2604
|
-
return (jsx(StyledTextArea, Object.assign({ name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
|
|
2609
|
+
return (jsx(StyledTextArea, Object.assign({ id: id, name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
|
|
2605
2610
|
});
|
|
2606
2611
|
const StyledTextArea = tw.textarea `
|
|
2607
2612
|
tu-textarea
|
|
@@ -2638,17 +2643,18 @@ const Root$1 = tw.span `
|
|
|
2638
2643
|
`;
|
|
2639
2644
|
|
|
2640
2645
|
const TextAreaField = React.forwardRef((_a, ref) => {
|
|
2641
|
-
var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
|
|
2646
|
+
var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
|
|
2642
2647
|
const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
|
|
2643
2648
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
2649
|
+
const htmlForId = id ? id : "textAreaField-" + v4();
|
|
2644
2650
|
const handleChange = React.useCallback((event) => {
|
|
2645
2651
|
setValueLength(event.target.value.length);
|
|
2646
2652
|
if (onChange) {
|
|
2647
2653
|
onChange(event);
|
|
2648
2654
|
}
|
|
2649
2655
|
}, [onChange]);
|
|
2650
|
-
return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
|
|
2651
|
-
(maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(TextArea, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
|
|
2656
|
+
return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
|
|
2657
|
+
(maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(TextArea, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
|
|
2652
2658
|
});
|
|
2653
2659
|
|
|
2654
2660
|
/**
|
|
@@ -2659,17 +2665,18 @@ const TextAreaField = React.forwardRef((_a, ref) => {
|
|
|
2659
2665
|
* _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
|
|
2660
2666
|
*/
|
|
2661
2667
|
const TextField = React.forwardRef((_a, ref) => {
|
|
2662
|
-
var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
|
|
2668
|
+
var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
|
|
2663
2669
|
const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
|
|
2664
2670
|
const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
|
|
2671
|
+
const htmlFor = id ? id : "textField-" + v4();
|
|
2665
2672
|
const handleChange = React.useCallback((event) => {
|
|
2666
2673
|
setValueLength(event.target.value.length);
|
|
2667
2674
|
if (onChange) {
|
|
2668
2675
|
onChange(event);
|
|
2669
2676
|
}
|
|
2670
2677
|
}, [onChange]);
|
|
2671
|
-
return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
|
|
2672
|
-
(maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsx(TextInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
|
|
2678
|
+
return (jsx(FormGroup, Object.assign({ htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
|
|
2679
|
+
(maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsx(TextInput, Object.assign({ id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
|
|
2673
2680
|
});
|
|
2674
2681
|
|
|
2675
2682
|
/**
|
|
@@ -2757,9 +2764,10 @@ tu-upload-input`;
|
|
|
2757
2764
|
* Upload fields enable the user to upload Files.
|
|
2758
2765
|
*/
|
|
2759
2766
|
const UploadField = forwardRef((_a, ref) => {
|
|
2760
|
-
var { label, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
|
|
2767
|
+
var { label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
|
|
2761
2768
|
const renderAsInvalid = isInvalid || Boolean(errorMessage);
|
|
2762
|
-
|
|
2769
|
+
const htmlForId = id ? id : "uploadField-" + v4();
|
|
2770
|
+
return (jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsx(UploadInput, Object.assign({ ref: ref, id: htmlForId, "aria-labelledby": htmlForId + "-label", isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
|
|
2763
2771
|
});
|
|
2764
2772
|
|
|
2765
2773
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.68",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"dependencies": {
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"@trackunit/ui-design-tokens": "0.0.61",
|
|
10
10
|
"react": "18.2.0",
|
|
11
11
|
"react-use": "17.4.0",
|
|
12
|
+
"uuid": "8.3.2",
|
|
12
13
|
"date-fns": "2.29.3",
|
|
13
14
|
"react-day-picker": "8.3.7",
|
|
14
15
|
"@floating-ui/react": "0.22.2",
|
|
@@ -9,6 +9,7 @@ export interface FormGroupProps extends CommonProps {
|
|
|
9
9
|
* Content to display in the tooltip when hovering the ? icon next to the label.
|
|
10
10
|
*/
|
|
11
11
|
tip?: string | React.ReactNode;
|
|
12
|
+
htmlFor?: string;
|
|
12
13
|
/**
|
|
13
14
|
* A string to display under the input element to help the user understand the input.
|
|
14
15
|
*/
|
|
@@ -35,4 +36,4 @@ export interface FormGroupProps extends CommonProps {
|
|
|
35
36
|
* @param {FormGroupProps} props - The props for the FormGroup component
|
|
36
37
|
* @returns {JSX.Element} FormGroup component
|
|
37
38
|
*/
|
|
38
|
-
export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled, }: FormGroupProps) => JSX.Element;
|
|
39
|
+
export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled, }: FormGroupProps) => JSX.Element;
|