@trackunit/react-form-components 1.7.57 → 1.7.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/index.cjs.js +15 -5
  2. package/index.esm.js +15 -5
  3. package/package.json +8 -8
  4. package/src/components/RadioGroup/RadioItem.d.ts +1 -1
package/index.cjs.js CHANGED
@@ -865,7 +865,12 @@ const Checkbox = ({ className, dataTestId = "checkbox", onChange, checked = fals
865
865
  const internalRef = react.useRef(null);
866
866
  const { isTextTruncated: isLabelCutOff, ref: labelRef } = reactComponents.useIsTextTruncated();
867
867
  const isReadonly = disabled || readOnly;
868
+ const hasLabel = label !== undefined && label !== null && label !== "";
868
869
  const onKeyPress = e => {
870
+ if (isReadonly) {
871
+ e.preventDefault();
872
+ return;
873
+ }
869
874
  if ("Space" === e.code) {
870
875
  e.preventDefault();
871
876
  internalRef.current?.click();
@@ -875,11 +880,13 @@ const Checkbox = ({ className, dataTestId = "checkbox", onChange, checked = fals
875
880
  }
876
881
  };
877
882
  const uuid = rest.id;
878
- return (jsxRuntime.jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox", ...rest, ref: ref }), jsxRuntime.jsx("span", { className: cvaCheckbox({
883
+ return (jsxRuntime.jsxs("label", { className: hasLabel
884
+ ? cvaBinaryControlWrapper({ className })
885
+ : `inline-flex w-fit items-center gap-2${isReadonly ? " pointer-events-none" : ""}${className ? ` ${className}` : ""}`, "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, ref: ref, type: "checkbox", ...rest }), jsxRuntime.jsx("span", { className: cvaCheckbox({
879
886
  disabled: isReadonly,
880
887
  invalid: isReadonly ? false : isInvalid,
881
888
  state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
882
- }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon })] }), label ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), disabled: !isLabelCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
889
+ }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon })] }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), disabled: !isLabelCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
883
890
  invalid: isReadonly ? false : isInvalid,
884
891
  disabled: isReadonly,
885
892
  }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
@@ -1725,14 +1732,17 @@ const RadioItem = ({ label, value, dataTestId, className, description, suffix, .
1725
1732
  const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
1726
1733
  const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
1727
1734
  const inputId = `${groupCtx?.id}-${value}`;
1728
- return (jsxRuntime.jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
1735
+ const hasLabel = label !== undefined && label !== null && label !== "";
1736
+ return (jsxRuntime.jsxs("label", { className: hasLabel
1737
+ ? cvaBinaryControlWrapper({ className })
1738
+ : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
1729
1739
  checked: isChecked,
1730
1740
  disabled: groupCtx?.disabled,
1731
1741
  invalid: groupCtx?.isInvalid,
1732
- }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
1742
+ }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
1733
1743
  invalid: groupCtx?.isInvalid,
1734
1744
  disabled: groupCtx?.disabled,
1735
- }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
1745
+ }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
1736
1746
  };
1737
1747
 
1738
1748
  const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
package/index.esm.js CHANGED
@@ -864,7 +864,12 @@ const Checkbox = ({ className, dataTestId = "checkbox", onChange, checked = fals
864
864
  const internalRef = useRef(null);
865
865
  const { isTextTruncated: isLabelCutOff, ref: labelRef } = useIsTextTruncated();
866
866
  const isReadonly = disabled || readOnly;
867
+ const hasLabel = label !== undefined && label !== null && label !== "";
867
868
  const onKeyPress = e => {
869
+ if (isReadonly) {
870
+ e.preventDefault();
871
+ return;
872
+ }
868
873
  if ("Space" === e.code) {
869
874
  e.preventDefault();
870
875
  internalRef.current?.click();
@@ -874,11 +879,13 @@ const Checkbox = ({ className, dataTestId = "checkbox", onChange, checked = fals
874
879
  }
875
880
  };
876
881
  const uuid = rest.id;
877
- return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxs("div", { children: [jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox", ...rest, ref: ref }), jsx("span", { className: cvaCheckbox({
882
+ return (jsxs("label", { className: hasLabel
883
+ ? cvaBinaryControlWrapper({ className })
884
+ : `inline-flex w-fit items-center gap-2${isReadonly ? " pointer-events-none" : ""}${className ? ` ${className}` : ""}`, "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxs("div", { children: [jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, ref: ref, type: "checkbox", ...rest }), jsx("span", { className: cvaCheckbox({
878
885
  disabled: isReadonly,
879
886
  invalid: isReadonly ? false : isInvalid,
880
887
  state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
881
- }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon })] }), label ? (jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), disabled: !isLabelCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
888
+ }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon })] }), hasLabel ? (jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), disabled: !isLabelCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
882
889
  invalid: isReadonly ? false : isInvalid,
883
890
  disabled: isReadonly,
884
891
  }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
@@ -1724,14 +1731,17 @@ const RadioItem = ({ label, value, dataTestId, className, description, suffix, .
1724
1731
  const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = useIsTextTruncated();
1725
1732
  const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
1726
1733
  const inputId = `${groupCtx?.id}-${value}`;
1727
- return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
1734
+ const hasLabel = label !== undefined && label !== null && label !== "";
1735
+ return (jsxs("label", { className: hasLabel
1736
+ ? cvaBinaryControlWrapper({ className })
1737
+ : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
1728
1738
  checked: isChecked,
1729
1739
  disabled: groupCtx?.disabled,
1730
1740
  invalid: groupCtx?.isInvalid,
1731
- }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
1741
+ }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), hasLabel ? (jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
1732
1742
  invalid: groupCtx?.isInvalid,
1733
1743
  disabled: groupCtx?.disabled,
1734
- }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
1744
+ }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
1735
1745
  };
1736
1746
 
1737
1747
  const cvaTimeRange = cvaMerge([
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-form-components",
3
- "version": "1.7.57",
3
+ "version": "1.7.60",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -16,14 +16,14 @@
16
16
  "zod": "^3.23.8",
17
17
  "react-hook-form": "7.62.0",
18
18
  "tailwind-merge": "^2.0.0",
19
- "@trackunit/css-class-variance-utilities": "1.6.62",
20
- "@trackunit/react-components": "1.8.41",
21
- "@trackunit/ui-icons": "1.6.61",
22
- "@trackunit/shared-utils": "1.8.63",
23
- "@trackunit/ui-design-tokens": "1.6.64",
24
- "@trackunit/i18n-library-translation": "1.6.67",
19
+ "@trackunit/css-class-variance-utilities": "1.6.65",
20
+ "@trackunit/react-components": "1.8.44",
21
+ "@trackunit/ui-icons": "1.6.64",
22
+ "@trackunit/shared-utils": "1.8.66",
23
+ "@trackunit/ui-design-tokens": "1.6.67",
24
+ "@trackunit/i18n-library-translation": "1.6.70",
25
25
  "string-ts": "^2.0.0",
26
- "@trackunit/react-test-setup": "1.3.62",
26
+ "@trackunit/react-test-setup": "1.3.65",
27
27
  "@js-temporal/polyfill": "^0.5.1"
28
28
  },
29
29
  "module": "./index.esm.js",
package/src/components/RadioGroup/RadioItem.d.ts CHANGED
@@ -5,7 +5,7 @@ export interface RadioItemProps<V extends string | number = string> extends Comm
5
5
  /**
6
6
  * The label of the radio item.
7
7
  */
8
- label: ReactNode;
8
+ label?: ReactNode;
9
9
  /**
10
10
  * The value of the radio item.
11
11
  */