@trackunit/react-form-components 0.0.263 → 0.0.266

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 CHANGED
@@ -773,6 +773,31 @@ const OptionCard = React.forwardRef((_a, ref) => {
773
773
  return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaOptionCardContainer(), children: [jsxRuntime.jsx("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "peer hidden" }, rest)), jsxRuntime.jsxs("label", { htmlFor: htmlForId, className: cvaOptionCardLabel({ className, disabled }), children: [disabled && icon && React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsxRuntime.jsx(reactComponents.Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxRuntime.jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsxRuntime.jsx(reactComponents.Text, { type: "span", weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsxRuntime.jsx(reactComponents.Text, { type: "span", subtle: true, align: "center", children: description }))] }))] })] }));
774
774
  });
775
775
 
776
+ /**
777
+ * A thin wrapper around the `BaseInput` component for password input fields.
778
+ *
779
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
780
+ */
781
+ const PasswordInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: props.obfuscate ? "text" : "password" }, props))));
782
+
783
+ /**
784
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
785
+ *
786
+ * _**Do use** when the user has to input a password or something that needs to be obfuscated_
787
+ *
788
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
789
+ */
790
+ const PasswordField = React.forwardRef((_a, ref) => {
791
+ 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"]);
792
+ const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
793
+ const htmlFor = id ? id : "passwordField-" + uuid.v4();
794
+ const [showPassword, setShowPassword] = React.useState(false);
795
+ const handleChange = React.useCallback((event) => {
796
+ onChange === null || onChange === void 0 ? void 0 : onChange(event);
797
+ }, [onChange]);
798
+ return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(PasswordInput, Object.assign({}, rest, { obfuscate: showPassword, disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid, className: className, onChange: handleChange, dataTestId: dataTestId, actions: jsxRuntime.jsx(reactComponents.Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", name: showPassword ? "EyeSlash" : "Eye", size: "small", color: "neutral", onClick: () => setShowPassword(prevState => !prevState) }) })) }));
799
+ });
800
+
776
801
  /**
777
802
  * @param phoneNumber - a phone number as a string
778
803
  * @returns {boolean} true if the phone number starts with a plus sign
@@ -2153,6 +2178,49 @@ const UploadField = React.forwardRef((_a, ref) => {
2153
2178
  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 })) }));
2154
2179
  });
2155
2180
 
2181
+ /**
2182
+ * @description Validate given url id.
2183
+ * @param url The address to validate.
2184
+ * @returns {boolean} Returns true if the url address is valid else false.
2185
+ * @example validateUrlAddress(https://www.example.com) // true
2186
+ */
2187
+ const validateUrlAddress = (url) => {
2188
+ if (!url) {
2189
+ return false;
2190
+ }
2191
+ // Using pattern from libs/custom-field/components/src/getValidationRules.ts
2192
+ const urlPattern = new RegExp("^(((https?|ftps?)://)(%[0-9A-Fa-f]{2}|[-()_.!~*';/?:@&=+$,A-Za-z0-9])+)([).!';/?:,][[:blank:|:blank:]])?$");
2193
+ return urlPattern.test(url);
2194
+ };
2195
+
2196
+ /**
2197
+ * A thin wrapper around the `BaseInput` component for URL input fields.
2198
+ *
2199
+ * NOTE: If shown with a label, please use the `UrlField` component instead.
2200
+ */
2201
+ const UrlInput = React.forwardRef((_a, ref) => {
2202
+ var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction", "value", "defaultValue"]);
2203
+ const [url, setUrl] = React.useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
2204
+ const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
2205
+ 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 })) })));
2206
+ });
2207
+
2208
+ /**
2209
+ * The UrlField component is used to enter url.
2210
+ * UrlField validates that user enters a valid web address.
2211
+ *
2212
+ */
2213
+ const UrlField = React.forwardRef((_a, ref) => {
2214
+ 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"]);
2215
+ const htmlForId = id ? id : "urlField-" + uuid.v4();
2216
+ // Type guard to check if value is a string
2217
+ function isString(inputValue) {
2218
+ return typeof inputValue === "string";
2219
+ }
2220
+ const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
2221
+ 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 })) }));
2222
+ });
2223
+
2156
2224
  /*
2157
2225
  * ----------------------------
2158
2226
  * | SETUP TRANSLATIONS START |
@@ -2181,6 +2249,8 @@ exports.MultiSelectMenuItem = MultiSelectMenuItem;
2181
2249
  exports.NumberField = NumberField;
2182
2250
  exports.NumberInput = NumberInput;
2183
2251
  exports.OptionCard = OptionCard;
2252
+ exports.PasswordField = PasswordField;
2253
+ exports.PasswordInput = PasswordInput;
2184
2254
  exports.PhoneField = PhoneField;
2185
2255
  exports.PhoneInput = PhoneInput;
2186
2256
  exports.RadioGroup = RadioGroup;
@@ -2198,6 +2268,8 @@ exports.TimeRangeField = TimeRangeField;
2198
2268
  exports.Toggle = Toggle;
2199
2269
  exports.UploadField = UploadField;
2200
2270
  exports.UploadInput = UploadInput;
2271
+ exports.UrlField = UrlField;
2272
+ exports.UrlInput = UrlInput;
2201
2273
  exports.checkIfPhoneNumberHasPlus = checkIfPhoneNumberHasPlus;
2202
2274
  exports.countryCodeToFlagEmoji = countryCodeToFlagEmoji;
2203
2275
  exports.cvaInput = cvaInput;
package/index.esm.js CHANGED
@@ -3,7 +3,7 @@ import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-l
3
3
  import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
4
4
  import { cvaMerge } from '@trackunit/css-class-variance-utilities';
5
5
  import * as React from 'react';
6
- import React__default, { useMemo, forwardRef, useState, cloneElement, useEffect, useRef } from 'react';
6
+ import React__default, { useMemo, forwardRef, useState, cloneElement, useCallback, useEffect, useRef } from 'react';
7
7
  import { v4 } from 'uuid';
8
8
  import { format } from 'date-fns';
9
9
  import parsePhoneNumberFromString, { getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1 } from 'libphonenumber-js';
@@ -743,6 +743,31 @@ const OptionCard = forwardRef((_a, ref) => {
743
743
  return (jsxs("div", { "data-testid": dataTestId, className: cvaOptionCardContainer(), children: [jsx("input", Object.assign({ ref: ref, id: htmlForId, type: "radio", value: value, className: "peer hidden" }, rest)), jsxs("label", { htmlFor: htmlForId, className: cvaOptionCardLabel({ className, disabled }), children: [disabled && icon && cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, heading && (jsx(Heading, { variant: "secondary", subtle: disabled, children: heading })), (subheading || description) && (jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsx(Text, { type: "span", weight: "thick", align: "center", subtle: disabled, children: subheading })), description && (jsx(Text, { type: "span", subtle: true, align: "center", children: description }))] }))] })] }));
744
744
  });
745
745
 
746
+ /**
747
+ * A thin wrapper around the `BaseInput` component for password input fields.
748
+ *
749
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
750
+ */
751
+ const PasswordInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: props.obfuscate ? "text" : "password" }, props))));
752
+
753
+ /**
754
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
755
+ *
756
+ * _**Do use** when the user has to input a password or something that needs to be obfuscated_
757
+ *
758
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
759
+ */
760
+ const PasswordField = forwardRef((_a, ref) => {
761
+ 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"]);
762
+ const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
763
+ const htmlFor = id ? id : "passwordField-" + v4();
764
+ const [showPassword, setShowPassword] = useState(false);
765
+ const handleChange = useCallback((event) => {
766
+ onChange === null || onChange === void 0 ? void 0 : onChange(event);
767
+ }, [onChange]);
768
+ return (jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(PasswordInput, Object.assign({}, rest, { obfuscate: showPassword, disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid, className: className, onChange: handleChange, dataTestId: dataTestId, actions: jsx(Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", name: showPassword ? "EyeSlash" : "Eye", size: "small", color: "neutral", onClick: () => setShowPassword(prevState => !prevState) }) })) }));
769
+ });
770
+
746
771
  /**
747
772
  * @param phoneNumber - a phone number as a string
748
773
  * @returns {boolean} true if the phone number starts with a plus sign
@@ -2123,6 +2148,49 @@ const UploadField = forwardRef((_a, ref) => {
2123
2148
  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 })) }));
2124
2149
  });
2125
2150
 
2151
+ /**
2152
+ * @description Validate given url id.
2153
+ * @param url The address to validate.
2154
+ * @returns {boolean} Returns true if the url address is valid else false.
2155
+ * @example validateUrlAddress(https://www.example.com) // true
2156
+ */
2157
+ const validateUrlAddress = (url) => {
2158
+ if (!url) {
2159
+ return false;
2160
+ }
2161
+ // Using pattern from libs/custom-field/components/src/getValidationRules.ts
2162
+ const urlPattern = new RegExp("^(((https?|ftps?)://)(%[0-9A-Fa-f]{2}|[-()_.!~*';/?:@&=+$,A-Za-z0-9])+)([).!';/?:,][[:blank:|:blank:]])?$");
2163
+ return urlPattern.test(url);
2164
+ };
2165
+
2166
+ /**
2167
+ * A thin wrapper around the `BaseInput` component for URL input fields.
2168
+ *
2169
+ * NOTE: If shown with a label, please use the `UrlField` component instead.
2170
+ */
2171
+ const UrlInput = forwardRef((_a, ref) => {
2172
+ var { dataTestId, isInvalid, disabled = false, fieldSize = "medium", disableAction = false, value, defaultValue } = _a, rest = __rest(_a, ["dataTestId", "isInvalid", "disabled", "fieldSize", "disableAction", "value", "defaultValue"]);
2173
+ const [url, setUrl] = useState((value === null || value === void 0 ? void 0 : value.toString()) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString()));
2174
+ const renderAsInvalid = (url && typeof url === "string" && !validateUrlAddress(url)) || isInvalid;
2175
+ 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 })) })));
2176
+ });
2177
+
2178
+ /**
2179
+ * The UrlField component is used to enter url.
2180
+ * UrlField validates that user enters a valid web address.
2181
+ *
2182
+ */
2183
+ const UrlField = forwardRef((_a, ref) => {
2184
+ 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"]);
2185
+ const htmlForId = id ? id : "urlField-" + v4();
2186
+ // Type guard to check if value is a string
2187
+ function isString(inputValue) {
2188
+ return typeof inputValue === "string";
2189
+ }
2190
+ const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateUrlAddress(value)) || isInvalid;
2191
+ 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 })) }));
2192
+ });
2193
+
2126
2194
  /*
2127
2195
  * ----------------------------
2128
2196
  * | SETUP TRANSLATIONS START |
@@ -2132,4 +2200,4 @@ const UploadField = forwardRef((_a, ref) => {
2132
2200
  */
2133
2201
  setupLibraryTranslations();
2134
2202
 
2135
- export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, 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 };
2203
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-form-components",
3
- "version": "0.0.263",
3
+ "version": "0.0.266",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -0,0 +1,19 @@
1
+ /// <reference types="react" />
2
+ import { FormGroupProps } from "../FormGroup/FormGroup";
3
+ import { PasswordInputProps } from "../PasswordInput/PasswordInput";
4
+ type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
5
+ export interface PasswordFieldProps extends Omit<PasswordInputProps, "obfuscate" | "actions">, FormGroupExposedProps {
6
+ /**
7
+ * If a value is set, the field is rendered in its invalid state.
8
+ */
9
+ errorMessage?: string;
10
+ }
11
+ /**
12
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
13
+ *
14
+ * _**Do use** when the user has to input a password or something that needs to be obfuscated_
15
+ *
16
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
17
+ */
18
+ export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;
19
+ export {};
@@ -0,0 +1 @@
1
+ export * from "./PasswordField";
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ import { BaseInputProps } from "../BaseInput/BaseInput";
3
+ type BaseInputExposedProps = Omit<BaseInputProps, "type">;
4
+ export interface PasswordInputProps extends BaseInputExposedProps {
5
+ /**
6
+ * If false the field will show password as plain text.
7
+ */
8
+ obfuscate?: boolean;
9
+ }
10
+ /**
11
+ * A thin wrapper around the `BaseInput` component for password input fields.
12
+ *
13
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
14
+ */
15
+ export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
16
+ export {};
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { FormGroupProps } from "../FormGroup/FormGroup";
3
+ import { UrlInputProps } from "../UrlInput/UrlInput";
4
+ type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
5
+ export interface UrlFieldProps extends FormGroupExposedProps, UrlInputProps {
6
+ /**
7
+ * If a value is set, the field is rendered in its invalid state.
8
+ */
9
+ errorMessage?: string;
10
+ }
11
+ /**
12
+ * The UrlField component is used to enter url.
13
+ * UrlField validates that user enters a valid web address.
14
+ *
15
+ */
16
+ export declare const UrlField: import("react").ForwardRefExoticComponent<UrlFieldProps & import("react").RefAttributes<HTMLInputElement>>;
17
+ export {};
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ import { BaseInputProps } from "../BaseInput";
3
+ type BaseInputExposedProps = Omit<BaseInputProps, "type">;
4
+ export interface UrlInputProps extends BaseInputExposedProps {
5
+ /**
6
+ * To disable the action button.
7
+ *
8
+ * @default false
9
+ * @memberof UrlInputProps
10
+ * @example
11
+ * <UrLInput disableAction />
12
+ */
13
+ disableAction?: boolean;
14
+ }
15
+ /**
16
+ * A thin wrapper around the `BaseInput` component for URL input fields.
17
+ *
18
+ * NOTE: If shown with a label, please use the `UrlField` component instead.
19
+ */
20
+ export declare const UrlInput: import("react").ForwardRefExoticComponent<UrlInputProps & import("react").RefAttributes<HTMLInputElement>>;
21
+ export {};
package/src/index.d.ts CHANGED
@@ -11,6 +11,8 @@ export * from "./components/Label/Label";
11
11
  export * from "./components/NumberField/NumberField";
12
12
  export * from "./components/NumberInput/NumberInput";
13
13
  export * from "./components/OptionCard/OptionCard";
14
+ export * from "./components/PasswordField";
15
+ export * from "./components/PasswordInput/PasswordInput";
14
16
  export * from "./components/PhoneField/PhoneField";
15
17
  export * from "./components/PhoneInput/PhoneInput";
16
18
  export * from "./components/PhoneInput/PhoneInputValidationUtils";
@@ -29,5 +31,7 @@ export * from "./components/TimeRangeField/TimeRangeField";
29
31
  export * from "./components/Toggle";
30
32
  export * from "./components/UploadField/UploadField";
31
33
  export * from "./components/UploadInput/UploadInput";
34
+ export * from "./components/UrlField/UrlField";
35
+ export * from "./components/UrlInput/UrlInput";
32
36
  export * from "./utilities/emailUtils";
33
37
  export * from "./utilities/usePhoneInput";
@@ -0,0 +1,7 @@
1
+ /**
2
+ * @description Validate given url id.
3
+ * @param url The address to validate.
4
+ * @returns {boolean} Returns true if the url address is valid else false.
5
+ * @example validateUrlAddress(https://www.example.com) // true
6
+ */
7
+ export declare const validateUrlAddress: (url: string) => boolean;