@trackunit/react-form-components 0.0.404-alpha-4aa8d638390.0 → 0.0.408

package/index.cjs.js

@@ -592,6 +592,48 @@ const CheckboxField = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
 });
 
+/**
+ * Validates if the given value is a valid hex color.
+ *
+ * @param value - The string value to be validated.
+ * @returns True if the value is a valid hex color, otherwise false.
+ */
+const isValidHEXColor = (value) => {
+    const hexRegex = /^#([0-9A-F]{6})$/i;
+    return hexRegex.test(value);
+};
+/**
+ * The ColorField component is used to enter color.
+ * ColorField validates that user enters a valid color address.
+ *
+ */
+const ColorField = React.forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "value", "onChange", "isInvalid"]);
+    const htmlForId = id ? id : "colorField-" + uuid.v4();
+    const innerRef = React__default["default"].useRef(null);
+    // eslint-disable-next-line local-rules/no-typescript-assertion
+    React__default["default"].useImperativeHandle(ref, () => innerRef.current, []);
+    // Internal state for color value
+    const [value, setValue] = React.useState(propValue || defaultValue || "");
+    const handleChange = React.useCallback((event) => {
+        const newValue = event.target.value;
+        setValue(newValue);
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    const renderAsInvalid = !!errorMessage || (value && typeof value === "string" && !isValidHEXColor(value)) || isInvalid;
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput({
+                disabled: false,
+                invalid: false,
+                className,
+            }), "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId, onChange: handleChange, type: "text", value: value }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: "mr-1 h-[25px] w-[25px] self-center bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-1 self-center", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Pencil", type: "outline" }), onClick: () => {
+                        if (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) {
+                            innerRef.current.click();
+                        }
+                    }, variant: "ghost-neutral" })] }) }));
+});
+
 /**
  * A wrapper around BaseInput with a pop-up day picker.
  *
@@ -2325,6 +2367,7 @@ exports.ActionButton = ActionButton;
 exports.BaseInput = BaseInput;
 exports.Checkbox = Checkbox;
 exports.CheckboxField = CheckboxField;
+exports.ColorField = ColorField;
 exports.CreatableSelect = CreatableSelect;
 exports.CreatableSelectField = CreatableSelectField;
 exports.DateField = DateField;
@@ -2391,6 +2434,7 @@ exports.getPhoneNumberWithPlus = getPhoneNumberWithPlus;
 exports.isInvalidCountryCode = isInvalidCountryCode;
 exports.isInvalidPhoneNumber = isInvalidPhoneNumber;
 exports.isMultiValue = isMultiValue;
+exports.isValidHEXColor = isValidHEXColor;
 exports.parseSchedule = parseSchedule;
 exports.serializeSchedule = serializeSchedule;
 exports.useCustomComponents = useCustomComponents;

package/index.esm.js

@@ -4,7 +4,7 @@ import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner } from
 import { useCopyToClipboard } from 'react-use';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useRef, useCallback, cloneElement, useEffect, useMemo, useImperativeHandle } from 'react';
+import React__default, { forwardRef, useState, useCallback, useRef, cloneElement, useEffect, useMemo, useImperativeHandle } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
@@ -562,6 +562,48 @@ const CheckboxField = forwardRef((_a, ref) => {
     return (jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, required: rest.required, tip: tip, children: jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
 });
 
+/**
+ * Validates if the given value is a valid hex color.
+ *
+ * @param value - The string value to be validated.
+ * @returns True if the value is a valid hex color, otherwise false.
+ */
+const isValidHEXColor = (value) => {
+    const hexRegex = /^#([0-9A-F]{6})$/i;
+    return hexRegex.test(value);
+};
+/**
+ * The ColorField component is used to enter color.
+ * ColorField validates that user enters a valid color address.
+ *
+ */
+const ColorField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "value", "onChange", "isInvalid"]);
+    const htmlForId = id ? id : "colorField-" + v4();
+    const innerRef = React__default.useRef(null);
+    // eslint-disable-next-line local-rules/no-typescript-assertion
+    React__default.useImperativeHandle(ref, () => innerRef.current, []);
+    // Internal state for color value
+    const [value, setValue] = useState(propValue || defaultValue || "");
+    const handleChange = useCallback((event) => {
+        const newValue = event.target.value;
+        setValue(newValue);
+        if (onChange) {
+            onChange(event);
+        }
+    }, [onChange]);
+    const renderAsInvalid = !!errorMessage || (value && typeof value === "string" && !isValidHEXColor(value)) || isInvalid;
+    return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxs("div", { className: cvaInput({
+                disabled: false,
+                invalid: false,
+                className,
+            }), "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId, onChange: handleChange, type: "text", value: value }), jsx("input", { "aria-labelledby": htmlForId + "-label", className: "mr-1 h-[25px] w-[25px] self-center bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsx(IconButton, { className: "mr-1 self-center", icon: jsx(Icon, { name: "Pencil", type: "outline" }), onClick: () => {
+                        if (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) {
+                            innerRef.current.click();
+                        }
+                    }, variant: "ghost-neutral" })] }) }));
+});
+
 /**
  * A wrapper around BaseInput with a pop-up day picker.
  *
@@ -2287,4 +2329,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CheckboxField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, 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, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, isValidHEXColor, parseSchedule, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.404-alpha-4aa8d638390.0",
+  "version": "0.0.408",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/ColorField/ColorField.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { BaseInputProps } from "../BaseInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+/**
+ * Validates if the given value is a valid hex color.
+ *
+ * @param value - The string value to be validated.
+ * @returns True if the value is a valid hex color, otherwise false.
+ */
+export declare const isValidHEXColor: (value: string) => boolean;
+export interface ColorFieldProps extends FormGroupExposedProps, BaseInputProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The ColorField component is used to enter color.
+ * ColorField validates that user enters a valid color address.
+ *
+ */
+export declare const ColorField: React.ForwardRefExoticComponent<ColorFieldProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/src/index.d.ts

@@ -2,6 +2,7 @@ export * from "./components/ActionButton";
 export * from "./components/BaseInput";
 export * from "./components/Checkbox";
 export * from "./components/CheckboxField/CheckboxField";
+export * from "./components/ColorField/ColorField";
 export * from "./components/DateField/DateField";
 export * from "./components/DateInput/DateInput";
 export * from "./components/DropZone/DropZone";