@trackunit/react-form-components 0.0.263 → 0.0.265

package/index.cjs.js

@@ -773,6 +773,31 @@ const OptionCard = React.forwardRef((_a, ref) => {
     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 }))] }))] })] }));
 });
 
+/**
+ * A thin wrapper around the `BaseInput` component for password input fields.
+ *
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
+ */
+const PasswordInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref, type: props.obfuscate ? "text" : "password" }, props))));
+
+/**
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
+ *
+ * _**Do use** when the user has to input a password or something that needs to be obfuscated_
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
+const PasswordField = React.forwardRef((_a, ref) => {
+    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"]);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlFor = id ? id : "passwordField-" + uuid.v4();
+    const [showPassword, setShowPassword] = React.useState(false);
+    const handleChange = React.useCallback((event) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange]);
+    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) }) })) }));
+});
+
 /**
  * @param phoneNumber - a phone number as a string
  * @returns {boolean} true if the phone number starts with a plus sign
@@ -2181,6 +2206,8 @@ exports.MultiSelectMenuItem = MultiSelectMenuItem;
 exports.NumberField = NumberField;
 exports.NumberInput = NumberInput;
 exports.OptionCard = OptionCard;
+exports.PasswordField = PasswordField;
+exports.PasswordInput = PasswordInput;
 exports.PhoneField = PhoneField;
 exports.PhoneInput = PhoneInput;
 exports.RadioGroup = RadioGroup;

package/index.esm.js

@@ -3,7 +3,7 @@ import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-l
 import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { useMemo, forwardRef, useState, cloneElement, useEffect, useRef } from 'react';
+import React__default, { useMemo, forwardRef, useState, cloneElement, useCallback, useEffect, useRef } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
 import parsePhoneNumberFromString, { getCountries, getCountryCallingCode, isValidPhoneNumber, parsePhoneNumberFromString as parsePhoneNumberFromString$1 } from 'libphonenumber-js';
@@ -743,6 +743,31 @@ const OptionCard = forwardRef((_a, ref) => {
     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 }))] }))] })] }));
 });
 
+/**
+ * A thin wrapper around the `BaseInput` component for password input fields.
+ *
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
+ */
+const PasswordInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref, type: props.obfuscate ? "text" : "password" }, props))));
+
+/**
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
+ *
+ * _**Do use** when the user has to input a password or something that needs to be obfuscated_
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
+const PasswordField = forwardRef((_a, ref) => {
+    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"]);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlFor = id ? id : "passwordField-" + v4();
+    const [showPassword, setShowPassword] = useState(false);
+    const handleChange = useCallback((event) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }, [onChange]);
+    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) }) })) }));
+});
+
 /**
  * @param phoneNumber - a phone number as a string
  * @returns {boolean} true if the phone number starts with a plus sign
@@ -2132,4 +2157,4 @@ const UploadField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-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 };
+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 };

package/package.json

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

package/src/components/PasswordField/PasswordField.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { PasswordInputProps } from "../PasswordInput/PasswordInput";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface PasswordFieldProps extends Omit<PasswordInputProps, "obfuscate" | "actions">, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * Password fields enter a password or other confidential information. Characters are masked as they are typed.
+ *
+ * _**Do use** when the user has to input a password or something that needs to be obfuscated_
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/components/PasswordField/index.d.ts

@@ -0,0 +1 @@
+export * from "./PasswordField";

package/src/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput/BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface PasswordInputProps extends BaseInputExposedProps {
+    /**
+     * If false the field will show password as plain text.
+     */
+    obfuscate?: boolean;
+}
+/**
+ * A thin wrapper around the `BaseInput` component for password input fields.
+ *
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
+ */
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/src/index.d.ts

@@ -11,6 +11,8 @@ export * from "./components/Label/Label";
 export * from "./components/NumberField/NumberField";
 export * from "./components/NumberInput/NumberInput";
 export * from "./components/OptionCard/OptionCard";
+export * from "./components/PasswordField";
+export * from "./components/PasswordInput/PasswordInput";
 export * from "./components/PhoneField/PhoneField";
 export * from "./components/PhoneInput/PhoneInput";
 export * from "./components/PhoneInput/PhoneInputValidationUtils";