@trackunit/react-form-components 0.0.360 → 0.0.362

package/index.cjs.js

@@ -534,19 +534,6 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
                     }), id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), children: label }) })), suffix] }));
 });
 
-/**
- * A wrapper around BaseInput with a pop-up day picker.
- *
- * NOTE: If shown with a label, please use the `DateField` component instead.
- */
-const DateInput = React.forwardRef((_a, ref) => {
-    var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
-    const formatDateToInputString = (date) => date instanceof Date ? dateFns.format(date, "yyyy-MM-dd") : date;
-    // Chrome and Firefox need their default icon to have datepicker functionality.
-    const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon && jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }), type: "date", value: formatDateToInputString(value) }, rest)));
-});
-
 /**
  * The Label component is used for labels for input fields.
  * This component is **not used directly**, but is part of the FormGroup and Field components.
@@ -588,6 +575,30 @@ const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId,
     return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" }))] }), children, jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsxRuntime.jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
 };
 
+/**
+ * The checkbox field component is used for entering boolean values.
+ *
+ * _**Do use**_ the CheckboxField for boolean input.
+ */
+const CheckboxField = React.forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "helpAddon", "isInvalid", "className", "checked", "dataTestId", "checkboxLabel", "onChange"]);
+    const htmlForId = id ? id : "checkboxField-" + uuid.v4();
+    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, tip: tip, children: jsxRuntime.jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
+});
+
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+const DateInput = React.forwardRef((_a, ref) => {
+    var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
+    const formatDateToInputString = (date) => date instanceof Date ? dateFns.format(date, "yyyy-MM-dd") : date;
+    // Chrome and Firefox need their default icon to have datepicker functionality.
+    const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
+    return (jsxRuntime.jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon && jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }), type: "date", value: formatDateToInputString(value) }, rest)));
+});
+
 /**
  * The date field component is used for entering date values.
  *
@@ -2191,6 +2202,30 @@ const UrlField = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", disabled: rest.disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
+/**
+ * Custom hook to get phone number validation rules.
+ *
+ * @returns {object} An object containing the `getPhoneNumberValidationRules` method.
+ * @example
+ * const { getPhoneNumberValidationRules } = useGetPhoneValidationRules();
+ * const validationRules = getPhoneNumberValidationRules(false);
+ */
+const useGetPhoneValidationRules = () => {
+    const [t] = useTranslation();
+    const getPhoneNumberValidationRules = React.useCallback((skipValidation = false) => {
+        const defaultRules = {};
+        const pattern = {
+            validate: (value) => {
+                const validationResult = t(`phoneField.error.${validatePhoneNumber(value)}`);
+                return !validationResult || value === "" || value === undefined || value === null || validationResult;
+            },
+        };
+        return !skipValidation
+            ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
+    }, [t]);
+    return { getPhoneNumberValidationRules };
+};
+
 /**
  * A custom hook for managing phone number input state and validation.
  *
@@ -2262,30 +2297,6 @@ const useZodValidators = () => {
     return React.useMemo(() => ({ ZodPhoneValidator }), [ZodPhoneValidator]);
 };
 
-/**
- * Custom hook to get phone number validation rules.
- *
- * @returns {object} An object containing the `getPhoneNumberValidationRules` method.
- * @example
- * const { getPhoneNumberValidationRules } = useGetPhoneValidationRules();
- * const validationRules = getPhoneNumberValidationRules(false);
- */
-const useGetPhoneValidationRules = () => {
-    const [t] = useTranslation();
-    const getPhoneNumberValidationRules = React.useCallback((skipValidation = false) => {
-        const defaultRules = {};
-        const pattern = {
-            validate: (value) => {
-                const validationResult = t(`phoneField.error.${validatePhoneNumber(value)}`);
-                return !validationResult || value === "" || value === undefined || value === null || validationResult;
-            },
-        };
-        return !skipValidation
-            ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
-    }, [t]);
-    return { getPhoneNumberValidationRules };
-};
-
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -2302,6 +2313,7 @@ Object.defineProperty(exports, 'ValueType', {
 exports.ActionButton = ActionButton;
 exports.BaseInput = BaseInput;
 exports.Checkbox = Checkbox;
+exports.CheckboxField = CheckboxField;
 exports.CreatableSelect = CreatableSelect;
 exports.CreatableSelectField = CreatableSelectField;
 exports.DateField = DateField;

package/index.esm.js

@@ -504,19 +504,6 @@ const Checkbox = React.forwardRef((_a, ref) => {
                     }), id: `checkbox-label-${label}`, ref: labelReference => setLabelRef(labelReference), children: label }) })), suffix] }));
 });
 
-/**
- * A wrapper around BaseInput with a pop-up day picker.
- *
- * NOTE: If shown with a label, please use the `DateField` component instead.
- */
-const DateInput = forwardRef((_a, ref) => {
-    var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
-    const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
-    // Chrome and Firefox need their default icon to have datepicker functionality.
-    const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
-    return (jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon && jsx(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }), type: "date", value: formatDateToInputString(value) }, rest)));
-});
-
 /**
  * The Label component is used for labels for input fields.
  * This component is **not used directly**, but is part of the FormGroup and Field components.
@@ -558,6 +545,30 @@ const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId,
     return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsx(Tooltip, { dataTestId: dataTestId && `${dataTestId}-tooltip`, iconProps: tipIconProps, label: tip, placement: "bottom" }))] }), children, jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid }), children: [helpText && jsx("span", { "data-testid": dataTestId && `${dataTestId}-helpText`, children: helpText }), helpAddon && (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId && `${dataTestId}-helpAddon`, children: helpAddon }))] })] }));
 };
 
+/**
+ * The checkbox field component is used for entering boolean values.
+ *
+ * _**Do use**_ the CheckboxField for boolean input.
+ */
+const CheckboxField = forwardRef((_a, ref) => {
+    var { label, id, tip, helpText, helpAddon, isInvalid, className, checked, dataTestId, checkboxLabel, onChange } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "helpAddon", "isInvalid", "className", "checked", "dataTestId", "checkboxLabel", "onChange"]);
+    const htmlForId = id ? id : "checkboxField-" + v4();
+    return (jsx(FormGroup, { className: "flex flex-col gap-1", dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: helpText, htmlFor: htmlForId, label: label, tip: tip, children: jsx(Checkbox, Object.assign({ checked: checked, className: className, dataTestId: dataTestId, id: htmlForId, label: checkboxLabel, onChange: onChange, ref: ref }, rest)) }));
+});
+
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+const DateInput = forwardRef((_a, ref) => {
+    var { min, max, defaultValue, value } = _a, rest = __rest(_a, ["min", "max", "defaultValue", "value"]);
+    const formatDateToInputString = (date) => date instanceof Date ? format(date, "yyyy-MM-dd") : date;
+    // Chrome and Firefox need their default icon to have datepicker functionality.
+    const showIcon = !/Chrome/.test(navigator.userAgent) && !/Firefox/.test(navigator.userAgent);
+    return (jsx(BaseInput, Object.assign({ defaultValue: formatDateToInputString(defaultValue), max: formatDateToInputString(max), min: formatDateToInputString(min), ref: ref, suffix: showIcon && jsx(Icon, { dataTestId: "calendar", name: "Calendar", size: "medium", type: "solid" }), type: "date", value: formatDateToInputString(value) }, rest)));
+});
+
 /**
  * The date field component is used for entering date values.
  *
@@ -2161,6 +2172,30 @@ const UrlField = forwardRef((_a, ref) => {
     return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.disabled, helpAddon: helpAddon, helpText: renderAsInvalid ? errorMessage : helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(UrlInput, Object.assign({ "aria-labelledby": htmlForId + "-label", disabled: rest.disabled, id: htmlForId, isInvalid: renderAsInvalid, ref: ref, value: value || defaultValue }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
+/**
+ * Custom hook to get phone number validation rules.
+ *
+ * @returns {object} An object containing the `getPhoneNumberValidationRules` method.
+ * @example
+ * const { getPhoneNumberValidationRules } = useGetPhoneValidationRules();
+ * const validationRules = getPhoneNumberValidationRules(false);
+ */
+const useGetPhoneValidationRules = () => {
+    const [t] = useTranslation();
+    const getPhoneNumberValidationRules = useCallback((skipValidation = false) => {
+        const defaultRules = {};
+        const pattern = {
+            validate: (value) => {
+                const validationResult = t(`phoneField.error.${validatePhoneNumber(value)}`);
+                return !validationResult || value === "" || value === undefined || value === null || validationResult;
+            },
+        };
+        return !skipValidation
+            ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
+    }, [t]);
+    return { getPhoneNumberValidationRules };
+};
+
 /**
  * A custom hook for managing phone number input state and validation.
  *
@@ -2232,30 +2267,6 @@ const useZodValidators = () => {
     return useMemo(() => ({ ZodPhoneValidator }), [ZodPhoneValidator]);
 };
 
-/**
- * Custom hook to get phone number validation rules.
- *
- * @returns {object} An object containing the `getPhoneNumberValidationRules` method.
- * @example
- * const { getPhoneNumberValidationRules } = useGetPhoneValidationRules();
- * const validationRules = getPhoneNumberValidationRules(false);
- */
-const useGetPhoneValidationRules = () => {
-    const [t] = useTranslation();
-    const getPhoneNumberValidationRules = useCallback((skipValidation = false) => {
-        const defaultRules = {};
-        const pattern = {
-            validate: (value) => {
-                const validationResult = t(`phoneField.error.${validatePhoneNumber(value)}`);
-                return !validationResult || value === "" || value === undefined || value === null || validationResult;
-            },
-        };
-        return !skipValidation
-            ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
-    }, [t]);
-    return { getPhoneNumberValidationRules };
-};
-
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -2265,4 +2276,4 @@ const useGetPhoneValidationRules = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, 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, 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 };

package/package.json

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

package/src/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/ActionButton";
 export * from "./components/BaseInput";
 export * from "./components/Checkbox";
+export * from "./components/CheckboxField/CheckboxField";
 export * from "./components/DateField/DateField";
 export * from "./components/DateInput/DateInput";
 export * from "./components/DropZone/DropZone";
@@ -38,6 +39,6 @@ export * from "./components/UploadInput/UploadInput";
 export * from "./components/UrlField/UrlField";
 export * from "./components/UrlInput/UrlInput";
 export * from "./utilities/emailUtils";
+export * from "./utilities/useGetPhoneValidationRules";
 export * from "./utilities/usePhoneInput";
 export * from "./utilities/useZodValidators";
-export * from "./utilities/useGetPhoneValidationRules";