@trackunit/react-form-components 0.0.215 → 0.0.217

package/index.cjs.js

@@ -485,7 +485,7 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
         onLabelRefChange && labelRef && onLabelRefChange(labelRef);
     }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
-    return (jsxRuntime.jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyPress: onKeyPress, children: [jsxRuntime.jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsxRuntime.jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
+    return (jsxRuntime.jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyDown: onKeyPress, children: [jsxRuntime.jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsxRuntime.jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
@@ -547,7 +547,7 @@ const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled = false, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore({ className }), children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsxRuntime.jsx(reactComponents.Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: tipIconProps, children: tip }))] }), 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 }))] })] }));
+    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.Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: tipIconProps, children: tip }))] }), 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 }))] })] }));
 };
 
 /**
@@ -987,7 +987,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
         const isLast = index === items.length;
         const counterRequired = requiredSpace > availableSpace && counter !== 0;
         if (isLast && counterRequired) {
-            return (jsxRuntime.jsx(TagWithWidth, { onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "neutral", disabled: disabled, children: jsxRuntime.jsxs("div", { "data-testid": "select-counter", className: cvaSelectCounter(), children: ["+", counter] }) }, item.text + index));
+            return (jsxRuntime.jsx(TagWithWidth, { onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "white", disabled: disabled, children: jsxRuntime.jsxs("div", { "data-testid": "select-counter", className: cvaSelectCounter(), children: ["+", counter] }) }, item.text + index));
         }
         if (isLast) {
             return null;
@@ -1235,7 +1235,7 @@ const CreatableSelect = (props) => {
  */
 const Select = (props) => {
     const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable, readOnly, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
         value,
@@ -1890,7 +1890,7 @@ const TextField = React__namespace.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly, children: jsxRuntime.jsx(TextInput, Object.assign({ id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) }));
+            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(TextInput, Object.assign({ disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) }));
 });
 
 /**

package/index.esm.js

@@ -455,7 +455,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
         onLabelRefChange && labelRef && onLabelRefChange(labelRef);
     }, [labelRef, onLabelRefChange]);
     const uuid = rest.id;
-    return (jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyPress: onKeyPress, children: [jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
+    return (jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyDown: onKeyPress, children: [jsx("input", Object.assign({ type: "checkbox", className: cvaCheckboxInput(), checked: !indeterminate && checked, onChange: onChange, disabled: disabled, "data-testid": dataTestId, readOnly: readOnly, "aria-checked": !indeterminate && checked, id: uuid }, rest, { ref: ref })), jsx("span", { id: uuid, tabIndex: isReadonly ? -1 : tabIndex, className: cvaCheckbox({
                     disabled: isReadonly,
                     invalid: isReadonly ? false : isInvalid,
                     state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
@@ -517,7 +517,7 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
  * @returns {JSX.Element} FormGroup component
  */
 const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, tipIconProps, disabled = false, }) => {
-    return (jsxs("div", { className: cvaFormGroup({ disabled, className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore({ className }), children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), tip && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: tipIconProps, children: tip }))] }), 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 }))] })] }));
+    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(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: tipIconProps, children: tip }))] }), 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 }))] })] }));
 };
 
 /**
@@ -957,7 +957,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
         const isLast = index === items.length;
         const counterRequired = requiredSpace > availableSpace && counter !== 0;
         if (isLast && counterRequired) {
-            return (jsx(TagWithWidth, { onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "neutral", disabled: disabled, children: jsxs("div", { "data-testid": "select-counter", className: cvaSelectCounter(), children: ["+", counter] }) }, item.text + index));
+            return (jsx(TagWithWidth, { onWidthKnown: ({ width: reportedWidth }) => setCounterWidth(reportedWidth), color: "white", disabled: disabled, children: jsxs("div", { "data-testid": "select-counter", className: cvaSelectCounter(), children: ["+", counter] }) }, item.text + index));
         }
         if (isLast) {
             return null;
@@ -1205,7 +1205,7 @@ const CreatableSelect = (props) => {
  */
 const Select = (props) => {
     const { className } = props, propsNoClassName = __rest(props, ["className"]);
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable, readOnly, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, value, options, onChange, isLoading, classNamePrefix = dataTestId ? dataTestId : "select", onMenuScrollToBottom, filterOption, onInputChange, isSearchable, isClearable = false, readOnly, } = props;
     const { refContainer, refPrefix, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler, orderedOptions, } = useSelect(props);
     const selectProps = {
         value,
@@ -1860,7 +1860,7 @@ const TextField = React.forwardRef((_a, ref) => {
         }
     }, [onChange]);
     return (jsx(FormGroup, { htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly, children: jsx(TextInput, Object.assign({ id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) }));
+            (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx(TextInput, Object.assign({ disabled: rest.readOnly, id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) }));
 });
 
 /**

package/package.json

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

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

@@ -4,7 +4,7 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
     /**
      * A string element to be displayed as a label
      */
-    label?: React.ReactNode;
+    label?: string | React.ReactNode;
     /**
      * An element to display after the label
      */

package/src/components/CheckboxField/CheckboxField.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { CheckboxProps } from "../Checkbox/Checkbox";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+type FormGroupExposedProps = Pick<FormGroupProps, "tip" | "helpText" | "helpAddon">;
+export interface CheckboxFieldProps extends CheckboxProps, FormGroupExposedProps {
+    checkboxLabel?: string | ReactNode;
+}
+/**
+ * The checkbox field component is used for entering boolean values.
+ *
+ * _**Do use**_ the CheckboxField for boolean input.
+ */
+export declare const CheckboxField: import("react").ForwardRefExoticComponent<CheckboxFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};