@trackunit/react-form-components 1.13.13 → 1.14.5

package/index.cjs.js

@@ -137,7 +137,7 @@ const cvaInput$1 = cssClassVarianceUtilities.cvaMerge([
     // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
     // The min restriction of the middle column (--spacing-20) is
     // effectively the minimum width available for the text input
-    "grid-cols-[min-content,minmax(var(--spacing-20),1fr),min-content]",
+    "grid-cols-[min-content_minmax(var(--spacing-20),1fr)_min-content]",
     "grid-rows-1",
     cvaInputBase(),
     "focus-within:outline-native",
@@ -2230,7 +2230,7 @@ const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, h
                 isWarning,
                 className,
             }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
-                        className: tailwindMerge.twMerge("px-1 focus-visible:outline-none", inputClassName),
+                        className: tailwindMerge.twMerge("focus-visible:outline-hidden px-1", inputClassName),
                     }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue, ...inputProps }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
 ColorField.displayName = "ColorField";
@@ -3401,7 +3401,7 @@ const cvaScheduleItem = cssClassVarianceUtilities.cvaMerge([
     "grid",
     "pb-4",
     "gap-2",
-    "grid-cols-[60px,200px,60px,2fr]",
+    "grid-cols-[60px_200px_60px_2fr]",
     "max-sm:grid-cols-1",
 ]);
 const cvaScheduleItemText = cssClassVarianceUtilities.cvaMerge(["flex", "font-bold", "self-center"]);
@@ -3445,7 +3445,7 @@ const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, in
         onChange(newSchedule);
     };
     return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
-            return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxRuntime.jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsxRuntime.jsx(Checkbox, { checked: isActive, "data-testid": `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, "data-testid": `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { "data-testid": `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
+            return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxRuntime.jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px_200px_60px_250px_250px] sm:gap-2", children: [jsxRuntime.jsx(Checkbox, { checked: isActive, "data-testid": `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, "data-testid": `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { "data-testid": `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
         }) }));
 };
 
@@ -4082,7 +4082,9 @@ const ToggleSwitch = react.forwardRef(({ onChange, onClick, preventDefaultOnClic
     const handleKeyPress = e => {
         if (e.code === "Enter") {
             e.preventDefault();
-            !readOnly && inputRef.current?.click();
+            if (!readOnly) {
+                inputRef.current?.click();
+            }
         }
         // Space key is already supported natively by the input element
     };

package/index.esm.js

@@ -136,7 +136,7 @@ const cvaInput$1 = cvaMerge([
     // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
     // The min restriction of the middle column (--spacing-20) is
     // effectively the minimum width available for the text input
-    "grid-cols-[min-content,minmax(var(--spacing-20),1fr),min-content]",
+    "grid-cols-[min-content_minmax(var(--spacing-20),1fr)_min-content]",
     "grid-rows-1",
     cvaInputBase(),
     "focus-within:outline-native",
@@ -2229,7 +2229,7 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
                 isWarning,
                 className,
             }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
-                        className: twMerge("px-1 focus-visible:outline-none", inputClassName),
+                        className: twMerge("focus-visible:outline-hidden px-1", inputClassName),
                     }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue, ...inputProps }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
 ColorField.displayName = "ColorField";
@@ -3400,7 +3400,7 @@ const cvaScheduleItem = cvaMerge([
     "grid",
     "pb-4",
     "gap-2",
-    "grid-cols-[60px,200px,60px,2fr]",
+    "grid-cols-[60px_200px_60px_2fr]",
     "max-sm:grid-cols-1",
 ]);
 const cvaScheduleItemText = cvaMerge(["flex", "font-bold", "self-center"]);
@@ -3444,7 +3444,7 @@ const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, in
         onChange(newSchedule);
     };
     return (jsx("div", { className: className, "data-testid": dataTestId, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
-            return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px,200px,60px,250px,250px] sm:gap-2", children: [jsx(Checkbox, { checked: isActive, "data-testid": `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, "data-testid": `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { "data-testid": `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
+            return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px_200px_60px_250px_250px] sm:gap-2", children: [jsx(Checkbox, { checked: isActive, "data-testid": `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, "data-testid": `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { "data-testid": `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
         }) }));
 };
 
@@ -4081,7 +4081,9 @@ const ToggleSwitch = forwardRef(({ onChange, onClick, preventDefaultOnClick, cla
     const handleKeyPress = e => {
         if (e.code === "Enter") {
             e.preventDefault();
-            !readOnly && inputRef.current?.click();
+            if (!readOnly) {
+                inputRef.current?.click();
+            }
         }
         // Space key is already supported natively by the input element
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.13.13",
+  "version": "1.14.5",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,12 +14,12 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.30",
-    "@trackunit/react-components": "1.16.13",
-    "@trackunit/ui-icons": "1.11.29",
-    "@trackunit/shared-utils": "1.13.30",
-    "@trackunit/ui-design-tokens": "1.11.30",
-    "@trackunit/i18n-library-translation": "1.12.11",
+    "@trackunit/css-class-variance-utilities": "1.11.32",
+    "@trackunit/react-components": "1.17.3",
+    "@trackunit/ui-icons": "1.11.31",
+    "@trackunit/shared-utils": "1.13.32",
+    "@trackunit/ui-design-tokens": "1.11.32",
+    "@trackunit/i18n-library-translation": "1.12.16",
     "string-ts": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1",
     "es-toolkit": "^1.39.10",