@trackunit/react-form-components 1.22.26 → 1.22.27

package/index.cjs.js

@@ -107,12 +107,7 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
-/**
- * Builds a synthetic change event for an input with a given value.
- * Use when calling onChange from code (e.g. clear, apply, clamped value) so consumers
- * that use `onChange={e => setValue(e.target.value)}` still receive the expected shape.
- */
-function createInputChangeEvent(value, sourceInput) {
+const createSyntheticInputChangeEvent = (value, sourceInput) => {
     const target = document.createElement("input");
     target.value = value;
     if (sourceInput) {
@@ -139,7 +134,17 @@ function createInputChangeEvent(value, sourceInput) {
         isDefaultPrevented: () => native.defaultPrevented,
         isPropagationStopped: () => false,
     };
-}
+};
+/**
+ * Returns a stable function that builds a synthetic change event for an input with a given value.
+ * Use when calling onChange from code (e.g. clear, apply, clamped value) so consumers
+ * that use `onChange={e => setValue(e.target.value)}` still receive the expected shape.
+ *
+ * @example
+ * const createInputChangeEvent = useCreateInputChangeEvent();
+ * onChange?.(createInputChangeEvent(str, inputRef.current));
+ */
+const useCreateInputChangeEvent = () => react.useCallback((value, sourceInput) => createSyntheticInputChangeEvent(value, sourceInput), []);
 
 const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
     "component-baseInput-shadow",
@@ -708,6 +713,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
         ? (dateAndTimeUtils.parseYYYYMMDDUtil(value) ?? undefined)
         : parseToDate(isControlled ? value : internalValue);
     const inputRef = react.useRef(null);
+    const createInputChangeEvent = useCreateInputChangeEvent();
     react.useImperativeHandle(ref, () => inputRef.current ?? document.createElement("input"), []);
     const syncPendingFromValue = react.useCallback(() => {
         setPendingDate(selectedDate ?? null);
@@ -728,7 +734,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             setInternalValue("");
         onChange?.(createInputChangeEvent("", inputRef.current));
         closePopover();
-    }, [isControlled, onChange]);
+    }, [createInputChangeEvent, isControlled, onChange]);
     const handleCancel = react.useCallback((closePopover) => {
         closePopover();
     }, []);
@@ -741,7 +747,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             setInternalValue(str);
         onChange?.(createInputChangeEvent(str, inputRef.current));
         closePopover();
-    }, [isControlled, min, max, onChange, pendingDate, timeZoneId]);
+    }, [createInputChangeEvent, isControlled, min, max, onChange, pendingDate, timeZoneId]);
     const handleInputChange = react.useCallback((e) => {
         const raw = e.target.value;
         const parsed = parseDateFieldInputForChange(raw, locale);
@@ -759,7 +765,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
                 setInternalValue(raw);
             onChange?.(e);
         }
-    }, [isControlled, locale, min, max, onChange, timeZoneId]);
+    }, [createInputChangeEvent, isControlled, locale, min, max, onChange, timeZoneId]);
     return (jsxRuntime.jsxs(reactComponents.Popover, { onOpenStateChange: open => open && syncPendingFromValue(), placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex w-full min-w-0 cursor-pointer items-center", (Boolean(rest.disabled) || Boolean(rest.readOnly)) && "pointer-events-none"), children: jsxRuntime.jsx(BaseInput, { ...rest, "aria-readonly": true, className: tailwindMerge.twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onChange: handleInputChange, placeholder: rest.placeholder ?? t("dateField.placeholder"), ref: inputRef, suffix: suffixProp ?? (jsxRuntime.jsx(reactComponents.Icon, { "aria-label": undefined, className: Boolean(rest.disabled) || Boolean(rest.readOnly) ? "text-neutral-500" : undefined, "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", name: "Calendar", size: "medium", type: "solid" })), type: "text", value: resolvedValue }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: closePopover => {
                     const displayDate = pendingDate ?? selectedDate ?? null;
                     return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex w-min flex-col overflow-hidden rounded-md border border-neutral-300 bg-white p-0"), children: [jsxRuntime.jsx(ReactCalendar, { allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", "p-0"), defaultActiveStartDate: displayDate ?? undefined, defaultView: "month", locale: locale, onChange: val => {
@@ -5007,6 +5013,7 @@ exports.PhoneBaseInput = PhoneBaseInput;
 exports.PhoneField = PhoneField;
 exports.PhoneFieldWithController = PhoneFieldWithController;
 exports.RadioGroup = RadioGroup;
+exports.RadioGroupContext = RadioGroupContext;
 exports.RadioItem = RadioItem;
 exports.Schedule = Schedule;
 exports.Search = Search;
@@ -5065,6 +5072,7 @@ exports.parseSchedule = parseSchedule;
 exports.phoneErrorMessage = phoneErrorMessage;
 exports.serializeSchedule = serializeSchedule;
 exports.useCreatableSelect = useCreatableSelect;
+exports.useCreateInputChangeEvent = useCreateInputChangeEvent;
 exports.useCustomComponents = useCustomComponents;
 exports.useGetPhoneValidationRules = useGetPhoneValidationRules;
 exports.usePhoneInput = usePhoneInput;

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
 import { parseYYYYMMDDUtil, formatShortDateUtil, parseValidDate, toDateUtil, startOfDayUtil, toZonedDateTimeUtil } from '@trackunit/date-and-time-utils';
 import { IconButton, Icon, Tooltip, Popover, PopoverTrigger, PopoverContent, Button, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
-import { useRef, useEffect, useImperativeHandle, useState, useCallback, cloneElement, isValidElement, useLayoutEffect, useMemo, useReducer, createContext, useContext, useId } from 'react';
+import { useCallback, useRef, useEffect, useImperativeHandle, useState, cloneElement, isValidElement, useLayoutEffect, useMemo, useReducer, createContext, useContext, useId } from 'react';
 import ReactCalendar from 'react-calendar';
 import { twMerge } from 'tailwind-merge';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
@@ -106,12 +106,7 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
-/**
- * Builds a synthetic change event for an input with a given value.
- * Use when calling onChange from code (e.g. clear, apply, clamped value) so consumers
- * that use `onChange={e => setValue(e.target.value)}` still receive the expected shape.
- */
-function createInputChangeEvent(value, sourceInput) {
+const createSyntheticInputChangeEvent = (value, sourceInput) => {
     const target = document.createElement("input");
     target.value = value;
     if (sourceInput) {
@@ -138,7 +133,17 @@ function createInputChangeEvent(value, sourceInput) {
         isDefaultPrevented: () => native.defaultPrevented,
         isPropagationStopped: () => false,
     };
-}
+};
+/**
+ * Returns a stable function that builds a synthetic change event for an input with a given value.
+ * Use when calling onChange from code (e.g. clear, apply, clamped value) so consumers
+ * that use `onChange={e => setValue(e.target.value)}` still receive the expected shape.
+ *
+ * @example
+ * const createInputChangeEvent = useCreateInputChangeEvent();
+ * onChange?.(createInputChangeEvent(str, inputRef.current));
+ */
+const useCreateInputChangeEvent = () => useCallback((value, sourceInput) => createSyntheticInputChangeEvent(value, sourceInput), []);
 
 const cvaInputBase = cvaMerge([
     "component-baseInput-shadow",
@@ -707,6 +712,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
         ? (parseYYYYMMDDUtil(value) ?? undefined)
         : parseToDate(isControlled ? value : internalValue);
     const inputRef = useRef(null);
+    const createInputChangeEvent = useCreateInputChangeEvent();
     useImperativeHandle(ref, () => inputRef.current ?? document.createElement("input"), []);
     const syncPendingFromValue = useCallback(() => {
         setPendingDate(selectedDate ?? null);
@@ -727,7 +733,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             setInternalValue("");
         onChange?.(createInputChangeEvent("", inputRef.current));
         closePopover();
-    }, [isControlled, onChange]);
+    }, [createInputChangeEvent, isControlled, onChange]);
     const handleCancel = useCallback((closePopover) => {
         closePopover();
     }, []);
@@ -740,7 +746,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
             setInternalValue(str);
         onChange?.(createInputChangeEvent(str, inputRef.current));
         closePopover();
-    }, [isControlled, min, max, onChange, pendingDate, timeZoneId]);
+    }, [createInputChangeEvent, isControlled, min, max, onChange, pendingDate, timeZoneId]);
     const handleInputChange = useCallback((e) => {
         const raw = e.target.value;
         const parsed = parseDateFieldInputForChange(raw, locale);
@@ -758,7 +764,7 @@ const DateBaseInput = ({ min, max, defaultValue, value, ref, onChange, suffix: s
                 setInternalValue(raw);
             onChange?.(e);
         }
-    }, [isControlled, locale, min, max, onChange, timeZoneId]);
+    }, [createInputChangeEvent, isControlled, locale, min, max, onChange, timeZoneId]);
     return (jsxs(Popover, { onOpenStateChange: open => open && syncPendingFromValue(), placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx("div", { className: twMerge("flex w-full min-w-0 cursor-pointer items-center", (Boolean(rest.disabled) || Boolean(rest.readOnly)) && "pointer-events-none"), children: jsx(BaseInput, { ...rest, "aria-readonly": true, className: twMerge("w-full min-w-0", rest.className), "data-testid": dataTestId ? `${dataTestId}-input` : undefined, onChange: handleInputChange, placeholder: rest.placeholder ?? t("dateField.placeholder"), ref: inputRef, suffix: suffixProp ?? (jsx(Icon, { "aria-label": undefined, className: Boolean(rest.disabled) || Boolean(rest.readOnly) ? "text-neutral-500" : undefined, "data-testid": dataTestId ? `${dataTestId}-calendar` : "calendar", name: "Calendar", size: "medium", type: "solid" })), type: "text", value: resolvedValue }) }) }), jsx(PopoverContent, { children: closePopover => {
                     const displayDate = pendingDate ?? selectedDate ?? null;
                     return (jsxs("div", { className: twMerge("flex w-min flex-col overflow-hidden rounded-md border border-neutral-300 bg-white p-0"), children: [jsx(ReactCalendar, { allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", "p-0"), defaultActiveStartDate: displayDate ?? undefined, defaultView: "month", locale: locale, onChange: val => {
@@ -4977,4 +4983,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, BaseSelect, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateBaseInput, DateField, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, FormFieldSelectAdapter, FormGroup, Label, MultiSelectField, NumberBaseInput, NumberField, OptionCard, PasswordBaseInput, PasswordField, PhoneBaseInput, PhoneField, PhoneFieldWithController, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, SelectField, TextAreaBaseInput, TextAreaField, TextBaseInput, TextField, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputBaseReadOnly, cvaInputBaseSize, cvaInputElement, cvaInputGroup, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaRadioItem, cvaSelectClearIndicator, cvaSelectContainer, cvaSelectControl, cvaSelectDropdownIconContainer, cvaSelectDropdownIndicator, cvaSelectIndicatorsContainer, cvaSelectLoadingMessage, cvaSelectMenu, cvaSelectMenuList, cvaSelectMultiValue, cvaSelectNoOptionsMessage, cvaSelectPlaceholder, cvaSelectPrefixSuffix, cvaSelectSingleValue, cvaSelectValueContainer, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCreatableSelect, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useRadioItemChecked, useSelect, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, BaseSelect, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateBaseInput, DateField, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, FormFieldSelectAdapter, FormGroup, Label, MultiSelectField, NumberBaseInput, NumberField, OptionCard, PasswordBaseInput, PasswordField, PhoneBaseInput, PhoneField, PhoneFieldWithController, RadioGroup, RadioGroupContext, RadioItem, Schedule, ScheduleVariant, Search, SelectField, TextAreaBaseInput, TextAreaField, TextBaseInput, TextField, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputBaseReadOnly, cvaInputBaseSize, cvaInputElement, cvaInputGroup, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaRadioItem, cvaSelectClearIndicator, cvaSelectContainer, cvaSelectControl, cvaSelectDropdownIconContainer, cvaSelectDropdownIndicator, cvaSelectIndicatorsContainer, cvaSelectLoadingMessage, cvaSelectMenu, cvaSelectMenuList, cvaSelectMultiValue, cvaSelectNoOptionsMessage, cvaSelectPlaceholder, cvaSelectPrefixSuffix, cvaSelectSingleValue, cvaSelectValueContainer, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCreatableSelect, useCreateInputChangeEvent, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useRadioItemChecked, useSelect, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

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

package/src/index.d.ts

@@ -35,6 +35,7 @@ export * from "./components/PhoneField/PhoneField";
 export * from "./components/PhoneFieldWithController/PhoneFieldWithController";
 export * from "./components/RadioGroup/RadioGroup";
 export * from "./components/RadioGroup/RadioGroup.variants";
+export * from "./components/RadioGroup/RadioGroupContext";
 export * from "./components/RadioGroup/RadioItem";
 export * from "./components/RadioGroup/useRadioItemChecked";
 export * from "./components/Schedule/Schedule";
@@ -53,6 +54,7 @@ export * from "./components/UploadField/UploadField";
 export * from "./components/UploadInput/UploadInput";
 export * from "./components/UrlField/UrlField";
 export * from "./utilities/emailUtils";
+export * from "./utilities/useCreateInputChangeEvent";
 export * from "./utilities/useGetPhoneValidationRules";
 export * from "./utilities/usePhoneInput";
 export * from "./utilities/useZodValidators";

package/src/utilities/useCreateInputChangeEvent.d.ts

@@ -0,0 +1,11 @@
+import { type ChangeEvent } from "react";
+/**
+ * Returns a stable function that builds a synthetic change event for an input with a given value.
+ * Use when calling onChange from code (e.g. clear, apply, clamped value) so consumers
+ * that use `onChange={e => setValue(e.target.value)}` still receive the expected shape.
+ *
+ * @example
+ * const createInputChangeEvent = useCreateInputChangeEvent();
+ * onChange?.(createInputChangeEvent(str, inputRef.current));
+ */
+export declare const useCreateInputChangeEvent: () => ((value: string, sourceInput: HTMLInputElement | null) => ChangeEvent<HTMLInputElement>);

package/src/utilities/createInputChangeEvent.d.ts

@@ -1,7 +0,0 @@
-import { type ChangeEvent } from "react";
-/**
- * Builds a synthetic change event for an input with a given value.
- * Use when calling onChange from code (e.g. clear, apply, clamped value) so consumers
- * that use `onChange={e => setValue(e.target.value)}` still receive the expected shape.
- */
-export declare function createInputChangeEvent(value: string, sourceInput: HTMLInputElement | null): ChangeEvent<HTMLInputElement>;