@trackunit/react-form-components 0.0.509 → 0.1.1

package/index.cjs.js

@@ -646,9 +646,8 @@ const isValidHEXColor = (value) => {
  *
  */
 const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, ...rest }, ref) => {
-    const htmlForId = id ? id : "colorField-" + uuid.v4();
+    const htmlForId = React.useMemo(() => (id ? id : "colorField-" + uuid.v4()), [id]);
     const innerRef = React.useRef(null);
-    // eslint-disable-next-line local-rules/no-typescript-assertion
     React.useImperativeHandle(ref, () => innerRef.current, []);
     // Internal state for color value
     const [value, setValue] = React.useState(propValue || defaultValue || "");
@@ -664,7 +663,7 @@ const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, h
                 disabled: false,
                 invalid: false,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, 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: () => {
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: "ml-2 h-[30px] w-[40px] self-center rounded-full bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, onChange: handleChange, type: "text", value: value }), jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-1 self-center", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Pencil", type: "outline" }), onClick: () => {
                         if (innerRef.current) {
                             innerRef.current.click();
                         }
@@ -801,12 +800,12 @@ const DropZone = ({ className, dataTestId, filesSelected, label = jsxRuntime.jsx
         }
         (_a = inputLabelRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
-    return (jsxRuntime.jsxs("div", { className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
+    return (jsxRuntime.jsx("div", { className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
             if (disabled) {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] }));
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsxRuntime.jsx("input", { accept: accept, className: "hidden", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxRuntime.jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsxRuntime.jsx(reactComponents.Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsxRuntime.jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
 };
 
 // Doing the same check as we do on the backend
@@ -2602,6 +2601,7 @@ exports.CreatableSelectField = CreatableSelectField;
 exports.DateField = DateField;
 exports.DateInput = DateInput;
 exports.DropZone = DropZone;
+exports.DropZoneDefaultLabel = DropZoneDefaultLabel;
 exports.EMAIL_REGEX = EMAIL_REGEX;
 exports.EmailField = EmailField;
 exports.EmailInput = EmailInput;

package/index.esm.js

@@ -4,7 +4,7 @@ import { IconButton, Icon, Tooltip, Heading, Text, MenuItem, Tag, Spinner, useIs
 import { useCopyToClipboard } from 'react-use';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
-import React__default, { isValidElement, forwardRef, useState, useCallback, useRef, cloneElement, useEffect, useMemo, useImperativeHandle } from 'react';
+import React__default, { isValidElement, forwardRef, useMemo, useState, useCallback, useRef, cloneElement, useEffect, useImperativeHandle } from 'react';
 import { v4 } from 'uuid';
 import { format } from 'date-fns';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
@@ -627,9 +627,8 @@ const isValidHEXColor = (value) => {
  *
  */
 const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, ...rest }, ref) => {
-    const htmlForId = id ? id : "colorField-" + v4();
+    const htmlForId = useMemo(() => (id ? id : "colorField-" + v4()), [id]);
     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 || "");
@@ -645,7 +644,7 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
                 disabled: false,
                 invalid: false,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, 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: () => {
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: "ml-2 h-[30px] w-[40px] self-center rounded-full bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onChange: handleChange, ref: innerRef, type: "color", value: value }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, onChange: handleChange, type: "text", value: value }), jsx(IconButton, { className: "mr-1 self-center", icon: jsx(Icon, { name: "Pencil", type: "outline" }), onClick: () => {
                         if (innerRef.current) {
                             innerRef.current.click();
                         }
@@ -782,12 +781,12 @@ const DropZone = ({ className, dataTestId, filesSelected, label = jsx(DropZoneDe
         }
         (_a = inputLabelRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
-    return (jsxs("div", { className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
+    return (jsx("div", { className: cvaDropZone({ size, dropComplete: fileDropped, dragActive, disabled, invalid: isInvalid, className }), "data-testid": dataTestId, onClick: e => {
             if (disabled) {
                 e.preventDefault();
                 e.stopPropagation();
             }
-        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: [jsx("input", { accept: accept, className: "hidden", id: "input-file-upload", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, htmlFor: "input-file-upload", ref: inputLabelRef, children: [jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsx(Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] })] }));
+        }, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, ...rest, children: jsxs("label", { className: cvaDropZoneLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : null, ref: inputLabelRef, children: [jsx("input", { accept: accept, className: "hidden", onChange: handleChange, title: t("dropzone.input.title"), type: "file" }), jsx("div", { className: cvaDropZoneIconBackground({ invalid: isInvalid }), children: jsx(Icon, { className: !isInvalid ? "text-gray-400" : "", color: isInvalid ? "danger" : "neutral", name: "ArrowUpCircle", type: "solid" }) }), jsx("button", { disabled: disabled, onClick: handleButtonClick, children: label })] }) }));
 };
 
 // Doing the same check as we do on the backend
@@ -2572,4 +2571,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-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, cvaInputAction, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, isValidHEXColor, parseSchedule, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, DropZoneDefaultLabel, 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, cvaInputAction, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, 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.509",
+  "version": "0.1.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/index.d.ts

@@ -6,6 +6,7 @@ export * from "./components/ColorField/ColorField";
 export * from "./components/DateField/DateField";
 export * from "./components/DateInput/DateInput";
 export * from "./components/DropZone/DropZone";
+export * from "./components/DropZone/DropZoneDefaultLabel";
 export * from "./components/EmailField/EmailField";
 export * from "./components/EmailInput";
 export * from "./components/FormGroup/FormGroup";