@trackunit/react-form-components 0.0.345 → 0.0.347
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.js +16 -4
- package/index.esm.js +16 -4
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -301,6 +301,7 @@ const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-cent
|
|
|
301
301
|
* This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
|
|
302
302
|
*/
|
|
303
303
|
const BaseInput = React__namespace.forwardRef((_a, ref) => {
|
|
304
|
+
var _b, _c;
|
|
304
305
|
var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "type", "inputClassName", "addonBeforeClassName"]);
|
|
305
306
|
const isReadOnlyWithPlaceholder = React.useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
|
|
306
307
|
const renderAsDisabled = rest.disabled || rest.readOnly;
|
|
@@ -315,7 +316,10 @@ const BaseInput = React__namespace.forwardRef((_a, ref) => {
|
|
|
315
316
|
disabled: renderAsDisabled,
|
|
316
317
|
}), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsxRuntime.jsx("input", Object.assign({ className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), "data-testid": dataTestId, ref: innerRef, type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsxRuntime.jsx("div", { className: cvaInputSuffix({
|
|
317
318
|
disabled: renderAsDisabled,
|
|
318
|
-
}), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true &&
|
|
319
|
+
}), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true &&
|
|
320
|
+
showDefaultActions &&
|
|
321
|
+
((_b = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _b === void 0 ? void 0 : _b.value.length) &&
|
|
322
|
+
((_c = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _c === void 0 ? void 0 : _c.value.length) > 0 ? (jsxRuntime.jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsxRuntime.jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
|
|
319
323
|
});
|
|
320
324
|
|
|
321
325
|
const cvaLabel = cssClassVarianceUtilities.cvaMerge([
|
|
@@ -736,13 +740,19 @@ const validateEmailAddress = (email) => {
|
|
|
736
740
|
* For specific input types make sure to use the corresponding input component.
|
|
737
741
|
*/
|
|
738
742
|
const EmailInput = React__namespace.forwardRef((_a, ref) => {
|
|
739
|
-
var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid"]);
|
|
743
|
+
var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange"]);
|
|
740
744
|
const [email, setEmail] = React__namespace.useState("");
|
|
741
745
|
const sendEmail = () => {
|
|
742
746
|
return window.open(`mailto:${email}`);
|
|
743
747
|
};
|
|
748
|
+
const handleChange = React.useCallback(event => {
|
|
749
|
+
const newValue = event.target.value;
|
|
750
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
751
|
+
setEmail(newValue);
|
|
752
|
+
}, [onChange]);
|
|
744
753
|
const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
|
|
745
|
-
return (jsxRuntime.jsx(BaseInput, Object.assign({ actions:
|
|
754
|
+
return (jsxRuntime.jsx(BaseInput, Object.assign({ actions: email &&
|
|
755
|
+
email.length > 0 && (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-emailIcon`, disabled: disabled, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })), dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
|
|
746
756
|
});
|
|
747
757
|
|
|
748
758
|
/**
|
|
@@ -961,7 +971,9 @@ const PhoneInput = React.forwardRef((_a, ref) => {
|
|
|
961
971
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
962
972
|
fieldIsFocused.current = true;
|
|
963
973
|
}, [onFocus]);
|
|
964
|
-
return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: jsxRuntime.jsx(BaseInput, Object.assign({ actions: !disableAction &&
|
|
974
|
+
return (jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: jsxRuntime.jsx(BaseInput, Object.assign({ actions: !disableAction &&
|
|
975
|
+
innerValue &&
|
|
976
|
+
(innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0 && (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disabled || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }, rest)) }));
|
|
965
977
|
});
|
|
966
978
|
|
|
967
979
|
/**
|
package/index.esm.js
CHANGED
|
@@ -271,6 +271,7 @@ const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text
|
|
|
271
271
|
* This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
|
|
272
272
|
*/
|
|
273
273
|
const BaseInput = React.forwardRef((_a, ref) => {
|
|
274
|
+
var _b, _c;
|
|
274
275
|
var { className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, type, inputClassName, addonBeforeClassName } = _a, rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize", "nonInteractive", "showDefaultActions", "type", "inputClassName", "addonBeforeClassName"]);
|
|
275
276
|
const isReadOnlyWithPlaceholder = useMemo(() => !!rest.readOnly && !!rest.placeholder && !rest.value, [rest.readOnly, rest.placeholder, rest.value]);
|
|
276
277
|
const renderAsDisabled = rest.disabled || rest.readOnly;
|
|
@@ -285,7 +286,10 @@ const BaseInput = React.forwardRef((_a, ref) => {
|
|
|
285
286
|
disabled: renderAsDisabled,
|
|
286
287
|
}), "data-testid": dataTestId && `${dataTestId}-prefix`, children: prefix })) : null, jsx("input", Object.assign({ className: cvaInputField({ size: fieldSize, disabled: renderAsDisabled, className: inputClassName }), "data-testid": dataTestId, ref: innerRef, type: isReadOnlyWithPlaceholder ? "text" : type }, rest, { readOnly: rest.readOnly || nonInteractive })), suffix && addonBefore !== suffix ? (jsx("div", { className: cvaInputSuffix({
|
|
287
288
|
disabled: renderAsDisabled,
|
|
288
|
-
}), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true &&
|
|
289
|
+
}), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix })) : null, rest.readOnly === true &&
|
|
290
|
+
showDefaultActions &&
|
|
291
|
+
((_b = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _b === void 0 ? void 0 : _b.value.length) &&
|
|
292
|
+
((_c = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) === null || _c === void 0 ? void 0 : _c.value.length) > 0 ? (jsx(ActionButton, { type: "COPY", value: innerRef }, "default-copy-action")) : null, actions && addonBefore !== actions ? actions : null, addonAfter && addonAfter !== undefined && addonBefore !== addonAfter ? (jsx("div", { className: cvaInputAddonAfter(), "data-testid": dataTestId && `${dataTestId}-addonAfter`, children: addonAfter })) : null] }));
|
|
289
293
|
});
|
|
290
294
|
|
|
291
295
|
const cvaLabel = cvaMerge([
|
|
@@ -706,13 +710,19 @@ const validateEmailAddress = (email) => {
|
|
|
706
710
|
* For specific input types make sure to use the corresponding input component.
|
|
707
711
|
*/
|
|
708
712
|
const EmailInput = React.forwardRef((_a, ref) => {
|
|
709
|
-
var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid"]);
|
|
713
|
+
var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false, onChange } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid", "onChange"]);
|
|
710
714
|
const [email, setEmail] = React.useState("");
|
|
711
715
|
const sendEmail = () => {
|
|
712
716
|
return window.open(`mailto:${email}`);
|
|
713
717
|
};
|
|
718
|
+
const handleChange = useCallback(event => {
|
|
719
|
+
const newValue = event.target.value;
|
|
720
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
721
|
+
setEmail(newValue);
|
|
722
|
+
}, [onChange]);
|
|
714
723
|
const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
|
|
715
|
-
return (jsx(BaseInput, Object.assign({ actions:
|
|
724
|
+
return (jsx(BaseInput, Object.assign({ actions: email &&
|
|
725
|
+
email.length > 0 && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-emailIcon`, disabled: disabled, iconSize: fieldSize, onClick: sendEmail, type: "EMAIL", value: email })), dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email" }, rest)));
|
|
716
726
|
});
|
|
717
727
|
|
|
718
728
|
/**
|
|
@@ -931,7 +941,9 @@ const PhoneInput = forwardRef((_a, ref) => {
|
|
|
931
941
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
932
942
|
fieldIsFocused.current = true;
|
|
933
943
|
}, [onFocus]);
|
|
934
|
-
return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: jsx(BaseInput, Object.assign({ actions: !disableAction &&
|
|
944
|
+
return (jsx("div", { className: "grid grid-cols-1 gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: jsx(BaseInput, Object.assign({ actions: !disableAction &&
|
|
945
|
+
innerValue &&
|
|
946
|
+
(innerValue === null || innerValue === void 0 ? void 0 : innerValue.length) > 0 && (jsx(ActionButton, { dataTestId: dataTestId && `${dataTestId}-phoneIcon`, disabled: disabled || isInvalid, iconSize: fieldSize, type: "PHONE_NUMBER", value: (value === null || value === void 0 ? void 0 : value.toString()) || "" })), dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, disabled: disabled, fieldSize: fieldSize, id: "phoneInput-number", isInvalid: isInvalid, name: name, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, prefix: (countryCode && countryCodeToFlagEmoji(countryCode)) || undefined, readOnly: readOnly, ref: ref, type: "tel", value: innerValue }, rest)) }));
|
|
935
947
|
});
|
|
936
948
|
|
|
937
949
|
/**
|