@trackunit/react-form-components 0.0.260 → 0.0.262

package/README.md

@@ -9,7 +9,7 @@ This library is exposed publicly for use in the  the Trackunit [Iris App SDK](ht
 
 To view other Trackunit public react components, visit this [repository](https://www.npmjs.com/package/@trackunit/react-components).
 
-To browse all available components visit our [Public Storybook](https://developers.trackunit.com/page/ui-components).
+To browse all available components visit our [Public Storybook](https://apps.iris.trackunit.com/storybook/).
 
 For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
 

package/index.cjs.js

@@ -478,7 +478,7 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { xmlns: "ht
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React__namespace.forwardRef((_a, ref) => {
-    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange"]);
+    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange, stopPropagation } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange", "stopPropagation"]);
     const icon = indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React__namespace.useRef(null);
     const isReadonly = disabled || readOnly;
@@ -497,7 +497,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, 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({
+    return (jsxRuntime.jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyDown: onKeyPress, onClick: e => stopPropagation && e.stopPropagation(), 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",

package/index.esm.js

@@ -448,7 +448,7 @@ const IndeterminateIcon = ({ className }) => (jsx("svg", { xmlns: "http://www.w3
  * @returns {JSX.Element} Checkbox component
  */
 const Checkbox = React.forwardRef((_a, ref) => {
-    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange"]);
+    var { className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, onLabelRefChange, stopPropagation } = _a, rest = __rest(_a, ["className", "dataTestId", "onChange", "checked", "disabled", "isInvalid", "readOnly", "indeterminate", "suffix", "label", "tabIndex", "onLabelRefChange", "stopPropagation"]);
     const icon = indeterminate ? (jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsx(CheckIcon, { className: cvaCheckboxIcon() }));
     const internalRef = React.useRef(null);
     const isReadonly = disabled || readOnly;
@@ -467,7 +467,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, 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({
+    return (jsxs("label", { "data-testid": dataTestId && `${dataTestId}-container`, htmlFor: uuid, className: cvaCheckboxContainer({ className }), ref: internalRef, onKeyDown: onKeyPress, onClick: e => stopPropagation && e.stopPropagation(), 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",

package/package.json

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

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

@@ -34,6 +34,10 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
      * A function returning the label ref
      */
     onLabelRefChange?: (label: HTMLElement) => void;
+    /**
+     * An boolean flag to stop propagation of the click event
+     */
+    stopPropagation?: boolean;
 }
 /**
  * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.