@trackunit/react-form-components 0.0.265 → 0.0.266

package/index.cjs.js

@@ -2178,6 +2178,49 @@ const UploadField = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(FormGroup, { 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 })) }));
 });
 
+/**
+ * @description Validate given url id.
+ * @param url The address to validate.
+ * @returns {boolean} Returns true if the url address is valid else false.
+ * @example validateUrlAddress(https://www.example.com) // true
+ */
+const validateUrlAddress = (url) => {
+    if (!url) {
+        return false;
+    }
+    // Using pattern from libs/custom-field/components/src/getValidationRules.ts
+    const urlPattern = new RegExp("^(((https?|ftps?)://)(%[0-9A-Fa-f]{2}|[-()_.!~*';/?:@&=+$,A-Za-z0-9])+)([).!';/?:,][[:blank:|:blank:]])?$");
+    return urlPattern.test(url);
+};
+
+/**
+ * A thin wrapper around the `BaseInput` component for URL input fields.
+ *
+ * NOTE: If shown with a label, please use the `UrlField` component instead.
+ */
+const UrlInput = React.forwardRef((_a, ref) => {
+    var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction", "value", "defaultValue"]);
+    const [url, setUrl] = React.useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
+    const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
+    return (jsxRuntime.jsx(BaseInput, Object.assign({ id: "url-input", dataTestId: dataTestId && `${dataTestId}-url-input`, ref: ref, type: "url", placeholder: rest.placeholder || "https://www.example.com", onChange: e => setUrl(e.target.value), isInvalid: renderAsInvalid, value: url, disabled: disabled }, rest, { actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: renderAsInvalid || disabled, value: url, type: "WEB_ADDRESS", dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", iconSize: fieldSize })) })));
+});
+
+/**
+ * The UrlField component is used to enter url.
+ * UrlField validates that user enters a valid web address.
+ *
+ */
+const UrlField = React.forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "isInvalid", "value"]);
+    const htmlForId = id ? id : "urlField-" + uuid.v4();
+    // Type guard to check if value is a string
+    function isString(inputValue) {
+        return typeof inputValue === "string";
+    }
+    const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
+    return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: renderAsInvalid ? errorMessage : helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(UrlInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value || defaultValue, isInvalid: renderAsInvalid, disabled: rest.disabled }, rest, { className: className, dataTestId: dataTestId })) }));
+});
+
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -2225,6 +2268,8 @@ exports.TimeRangeField = TimeRangeField;
 exports.Toggle = Toggle;
 exports.UploadField = UploadField;
 exports.UploadInput = UploadInput;
+exports.UrlField = UrlField;
+exports.UrlInput = UrlInput;
 exports.checkIfPhoneNumberHasPlus = checkIfPhoneNumberHasPlus;
 exports.countryCodeToFlagEmoji = countryCodeToFlagEmoji;
 exports.cvaInput = cvaInput;

package/index.esm.js

@@ -2148,6 +2148,49 @@ const UploadField = forwardRef((_a, ref) => {
     return (jsx(FormGroup, { 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 })) }));
 });
 
+/**
+ * @description Validate given url id.
+ * @param url The address to validate.
+ * @returns {boolean} Returns true if the url address is valid else false.
+ * @example validateUrlAddress(https://www.example.com) // true
+ */
+const validateUrlAddress = (url) => {
+    if (!url) {
+        return false;
+    }
+    // Using pattern from libs/custom-field/components/src/getValidationRules.ts
+    const urlPattern = new RegExp("^(((https?|ftps?)://)(%[0-9A-Fa-f]{2}|[-()_.!~*';/?:@&=+$,A-Za-z0-9])+)([).!';/?:,][[:blank:|:blank:]])?$");
+    return urlPattern.test(url);
+};
+
+/**
+ * A thin wrapper around the `BaseInput` component for URL input fields.
+ *
+ * NOTE: If shown with a label, please use the `UrlField` component instead.
+ */
+const UrlInput = forwardRef((_a, ref) => {
+    var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction", "value", "defaultValue"]);
+    const [url, setUrl] = useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
+    const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
+    return (jsx(BaseInput, Object.assign({ id: "url-input", dataTestId: dataTestId && `${dataTestId}-url-input`, ref: ref, type: "url", placeholder: rest.placeholder || "https://www.example.com", onChange: e => setUrl(e.target.value), isInvalid: renderAsInvalid, value: url, disabled: disabled }, rest, { actions: !disableAction && (jsx(ActionButton, { disabled: renderAsInvalid || disabled, value: url, type: "WEB_ADDRESS", dataTestId: (dataTestId && `${dataTestId}-url-input-Icon`) || "url-input-action-icon", iconSize: fieldSize })) })));
+});
+
+/**
+ * The UrlField component is used to enter url.
+ * UrlField validates that user enters a valid web address.
+ *
+ */
+const UrlField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false, value } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "isInvalid", "value"]);
+    const htmlForId = id ? id : "urlField-" + v4();
+    // Type guard to check if value is a string
+    function isString(inputValue) {
+        return typeof inputValue === "string";
+    }
+    const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
+    return (jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: renderAsInvalid ? errorMessage : helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(UrlInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value || defaultValue, isInvalid: renderAsInvalid, disabled: rest.disabled }, rest, { className: className, dataTestId: dataTestId })) }));
+});
+
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -2157,4 +2200,4 @@ const UploadField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.265",
+  "version": "0.0.266",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/UrlField/UrlField.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { UrlInputProps } from "../UrlInput/UrlInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface UrlFieldProps extends FormGroupExposedProps, UrlInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The UrlField component is used to enter url.
+ * UrlField validates that user enters a valid web address.
+ *
+ */
+export declare const UrlField: import("react").ForwardRefExoticComponent<UrlFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/UrlInput/UrlInput.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface UrlInputProps extends BaseInputExposedProps {
+    /**
+     * To disable the action button.
+     *
+     * @default false
+     * @memberof UrlInputProps
+     * @example
+     * <UrLInput disableAction />
+     */
+    disableAction?: boolean;
+}
+/**
+ * A thin wrapper around the `BaseInput` component for URL input fields.
+ *
+ * NOTE: If shown with a label, please use the `UrlField` component instead.
+ */
+export declare const UrlInput: import("react").ForwardRefExoticComponent<UrlInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/index.d.ts

@@ -31,5 +31,7 @@ export * from "./components/TimeRangeField/TimeRangeField";
 export * from "./components/Toggle";
 export * from "./components/UploadField/UploadField";
 export * from "./components/UploadInput/UploadInput";
+export * from "./components/UrlField/UrlField";
+export * from "./components/UrlInput/UrlInput";
 export * from "./utilities/emailUtils";
 export * from "./utilities/usePhoneInput";

package/src/utilities/urlUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description Validate given url id.
+ * @param url The address to validate.
+ * @returns {boolean} Returns true if the url address is valid else false.
+ * @example validateUrlAddress(https://www.example.com) // true
+ */
+export declare const validateUrlAddress: (url: string) => boolean;