@trackunit/react-form-components 0.0.19 → 0.0.21

package/index.cjs

@@ -196,22 +196,6 @@ const InputContainer$1 = tailwindStyledComponents.tw.label `
   ${({ $fieldSize }) => ($fieldSize === "small" ? tailwindStyledComponents.tws `tu-input--small` : null)}
 `;
 
-/**
- * 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.
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
- */
-const Label$1 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
-    return (jsxRuntime.jsx(Root$2, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
-};
-const Root$2 = tailwindStyledComponents.tw.label `
-tu-label
-${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-label--disabled`}
-${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-label--invalid`}
-`;
-
 /**
  * The CheckIcon component is used by the checkbox to display the checked state.
  *
@@ -245,18 +229,22 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", Object.assig
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React__namespace.forwardRef((_a, ref) => {
-    var { className, dataTestId, onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, children, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "children", "label", "tabIndex"]);
+    var { className, dataTestId, onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex"]);
     const icon = indeterminate ? jsxRuntime.jsx(StyledIndeterminateIcon, {}) : checked && jsxRuntime.jsx(StyledCheckIcon, {});
     const internalRef = React__namespace.useRef(null);
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
-        var _a;
+        var _a, _b;
+        e.preventDefault();
         if ("Space" === e.code) {
             (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
+        if ("Enter" === e.code) {
+            (_b = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _b === void 0 ? void 0 : _b.click();
+        }
     };
     const uuid = rest.id || dataTestId;
-    return (jsxRuntime.jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsxRuntime.jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsxRuntime.jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsxRuntime.jsx(Label$1, Object.assign({ className: tailwindStyledComponents.tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: dataTestId && `${dataTestId}-Label` }, { children: label }))), children] })));
+    return (jsxRuntime.jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className, ref: internalRef, onKeyPress: onKeyPress }, { children: [jsxRuntime.jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsxRuntime.jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex }, { children: icon })), label && (jsxRuntime.jsx(Label$2, Object.assign({ className: tailwindStyledComponents.tws `cursor-pointer`, "$disabled": isReadonly, "$isInvalid": isReadonly ? false : isInvalid }, { children: label }))), suffix] })));
 });
 const StyledCheckIcon = tailwindStyledComponents.twx(CheckIcon) `tu-checkbox--icon`;
 const StyledIndeterminateIcon = tailwindStyledComponents.twx(IndeterminateIcon) `tu-checkbox--icon`;
@@ -276,6 +264,11 @@ const CheckboxWrapper = tailwindStyledComponents.tw.span `
 }}
 
   ${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-checkbox--invalid`}
+`;
+const Label$2 = tailwindStyledComponents.tw.span `
+  tu-label
+  ${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-label--disabled`}
+  ${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-label--invalid`}
 `;
 
 /**
@@ -291,6 +284,22 @@ const DateInput = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsxRuntime.jsx(reactComponents.Icon, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid" }) }, 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.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+const Label$1 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+    return (jsxRuntime.jsx(Root$2, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
+};
+const Root$2 = tailwindStyledComponents.tw.label `
+tu-label
+${({ $disabled }) => $disabled && tailwindStyledComponents.tws `tu-label--disabled`}
+${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-label--invalid`}
+`;
+
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
  * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.

package/index.js

@@ -166,22 +166,6 @@ const InputContainer$1 = tw.label `
   ${({ $fieldSize }) => ($fieldSize === "small" ? tws `tu-input--small` : null)}
 `;
 
-/**
- * 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.
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
- */
-const Label$1 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
-    return (jsx(Root$2, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
-};
-const Root$2 = tw.label `
-tu-label
-${({ $disabled }) => $disabled && tws `tu-label--disabled`}
-${({ $isInvalid }) => $isInvalid && tws `tu-label--invalid`}
-`;
-
 /**
  * The CheckIcon component is used by the checkbox to display the checked state.
  *
@@ -215,18 +199,22 @@ const IndeterminateIcon = ({ className }) => (jsx("svg", Object.assign({ xmlns:
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React.forwardRef((_a, ref) => {
-    var { className, dataTestId, onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, children, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "children", "label", "tabIndex"]);
+    var { className, dataTestId, onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0 } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex"]);
     const icon = indeterminate ? jsx(StyledIndeterminateIcon, {}) : checked && jsx(StyledCheckIcon, {});
     const internalRef = React.useRef(null);
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
-        var _a;
+        var _a, _b;
+        e.preventDefault();
         if ("Space" === e.code) {
             (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
+        if ("Enter" === e.code) {
+            (_b = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _b === void 0 ? void 0 : _b.click();
+        }
     };
     const uuid = rest.id || dataTestId;
-    return (jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className }, { children: [jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex, onKeyPress: onKeyPress }, { children: icon })), label && (jsx(Label$1, Object.assign({ className: tws `cursor-pointer`, htmlFor: uuid, disabled: isReadonly, isInvalid: isReadonly ? false : isInvalid, dataTestId: dataTestId && `${dataTestId}-Label` }, { children: label }))), children] })));
+    return (jsxs(CheckboxContainer, Object.assign({ "data-testid": dataTestId && `${dataTestId}Container`, htmlFor: uuid, className: className, ref: internalRef, onKeyPress: onKeyPress }, { children: [jsx(HiddenInput$1, Object.assign({ type: "checkbox", checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, role: "checkbox", id: uuid }, rest, { ref: ref })), jsx(CheckboxWrapper, Object.assign({ id: uuid, "$disabled": isReadonly, "$checked": checked, "$indeterminate": indeterminate, "$isInvalid": isReadonly ? false : isInvalid, tabIndex: isReadonly ? -1 : tabIndex }, { children: icon })), label && (jsx(Label$2, Object.assign({ className: tws `cursor-pointer`, "$disabled": isReadonly, "$isInvalid": isReadonly ? false : isInvalid }, { children: label }))), suffix] })));
 });
 const StyledCheckIcon = twx(CheckIcon) `tu-checkbox--icon`;
 const StyledIndeterminateIcon = twx(IndeterminateIcon) `tu-checkbox--icon`;
@@ -246,6 +234,11 @@ const CheckboxWrapper = tw.span `
 }}
 
   ${({ $isInvalid }) => $isInvalid && tws `tu-checkbox--invalid`}
+`;
+const Label$2 = tw.span `
+  tu-label
+  ${({ $disabled }) => $disabled && tws `tu-label--disabled`}
+  ${({ $isInvalid }) => $isInvalid && tws `tu-label--invalid`}
 `;
 
 /**
@@ -261,6 +254,22 @@ const DateInput = forwardRef((_a, ref) => {
     return (jsx(BaseInput, Object.assign({ type: "date", value: formatDateToInputString(value), defaultValue: formatDateToInputString(defaultValue), min: formatDateToInputString(min), max: formatDateToInputString(max), ref: ref, suffix: showIcon && jsx(Icon, { dataTestId: "calendar", name: "CalendarIcon", size: "medium", type: "solid" }) }, 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.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+const Label$1 = ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }) => {
+    return (jsx(Root$2, Object.assign({ id: id || "", htmlFor: htmlFor || "", className: className, "data-testid": dataTestId, "$disabled": disabled, "$isInvalid": isInvalid }, { children: children })));
+};
+const Root$2 = tw.label `
+tu-label
+${({ $disabled }) => $disabled && tws `tu-label--disabled`}
+${({ $isInvalid }) => $isInvalid && tws `tu-label--invalid`}
+`;
+
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.
  * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/i18n-library-translation": "0.0.43",
-    "@trackunit/react-components": "0.1.83",
+    "@trackunit/i18n-library-translation": "0.0.44",
+    "@trackunit/react-components": "0.1.84",
     "@trackunit/tailwind-styled-components": "0.0.56",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.26",

package/src/components/Checkbox/Checkbox.d.ts

@@ -6,9 +6,9 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
      */
     label?: React.ReactNode;
     /**
-     * Children to be displayed
+     * An element to display after the label
      */
-    children?: React.ReactNode;
+    suffix?: React.ReactNode;
     /**
      * An boolean flag to set checkbox to checked state
      */