@trackunit/react-form-components 0.0.23 → 0.0.25

package/index.cjs

@@ -1296,11 +1296,11 @@ const TextField = React__namespace.forwardRef((_a, ref) => {
  * @param {ToggleProps} props - The props for the Toggle component
  * @returns {JSX.Element} Toggle component
  */
-const Toggle = React__namespace.forwardRef(({ toggled = false, onChange, disabled, size = "medium", id, tabIndex, required, className, dataTestId, onBlur, name, description = "", }, ref) => {
-    return (jsxRuntime.jsxs(ToggleWrapper, { children: [jsxRuntime.jsxs(InputContainer, Object.assign({ htmlFor: id }, { children: [jsxRuntime.jsx(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
+const Toggle = React__namespace.forwardRef(({ toggled = false, onChange, onClick, disabled, size = "medium", id, tabIndex, required, className, dataTestId, onBlur, name, description = "", }, ref) => {
+    return (jsxRuntime.jsxs(ToggleWrapper, Object.assign({ className: className, onClick: onClick }, { children: [jsxRuntime.jsxs(InputContainer, Object.assign({ htmlFor: id }, { children: [jsxRuntime.jsx(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
                             e.stopPropagation();
                             onChange(!toggled, e);
-                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsxRuntime.jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsxRuntime.jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), jsxRuntime.jsxs(LabelContainer, { children: [jsxRuntime.jsx(Label$1, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsxRuntime.jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
+                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsxRuntime.jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsxRuntime.jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), name || description ? (jsxRuntime.jsxs(LabelContainer, { children: [jsxRuntime.jsx(Label$1, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsxRuntime.jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })) : null] })));
 });
 Toggle.displayName = "Toggle";
 const ToggleWrapper = tailwindStyledComponents.tw.div `tu-toggle__wrapper`;
@@ -1350,7 +1350,7 @@ const UploadField = React.forwardRef((_a, ref) => {
 
 /*
  * ----------------------------
- * | SETUP TRANSLATIONS START |
+ * | SETUP TRANSLATIONS START |
  * ----------------------------
  * This import and function call is needed to register translations for this library.
  * Do not remove this if this library has translations.

package/index.js

@@ -1267,11 +1267,11 @@ const TextField = React.forwardRef((_a, ref) => {
  * @param {ToggleProps} props - The props for the Toggle component
  * @returns {JSX.Element} Toggle component
  */
-const Toggle = React.forwardRef(({ toggled = false, onChange, disabled, size = "medium", id, tabIndex, required, className, dataTestId, onBlur, name, description = "", }, ref) => {
-    return (jsxs(ToggleWrapper, { children: [jsxs(InputContainer, Object.assign({ htmlFor: id }, { children: [jsx(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
+const Toggle = React.forwardRef(({ toggled = false, onChange, onClick, disabled, size = "medium", id, tabIndex, required, className, dataTestId, onBlur, name, description = "", }, ref) => {
+    return (jsxs(ToggleWrapper, Object.assign({ className: className, onClick: onClick }, { children: [jsxs(InputContainer, Object.assign({ htmlFor: id }, { children: [jsx(HiddenInput, { name: name, type: "checkbox", checked: toggled, disabled: disabled, onChange: e => {
                             e.stopPropagation();
                             onChange(!toggled, e);
-                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), jsxs(LabelContainer, { children: [jsx(Label$1, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })] }));
+                        }, id: id, "aria-checked": toggled, role: "checkbox", tabIndex: tabIndex, required: required, ref: ref, "data-testid": dataTestId && `${dataTestId}-Input`, onBlur: onBlur }), jsx(SwitchContainer, Object.assign({ "$toggled": toggled, htmlFor: id, "$disabled": disabled, "$size": size }, { children: jsx(Switch, { "$toggled": toggled, htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Switch` }) }))] })), name || description ? (jsxs(LabelContainer, { children: [jsx(Label$1, Object.assign({ htmlFor: id, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: disabled }, { children: name })), description && (jsx(Description, Object.assign({ htmlFor: id, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": disabled }, { children: description })))] })) : null] })));
 });
 Toggle.displayName = "Toggle";
 const ToggleWrapper = tw.div `tu-toggle__wrapper`;
@@ -1321,7 +1321,7 @@ const UploadField = forwardRef((_a, ref) => {
 
 /*
  * ----------------------------
- * | SETUP TRANSLATIONS START |
+ * | SETUP TRANSLATIONS START |
  * ----------------------------
  * This import and function call is needed to register translations for this library.
  * Do not remove this if this library has translations.

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
     "@trackunit/i18n-library-translation": "0.0.46",
-    "@trackunit/react-components": "0.1.85",
+    "@trackunit/react-components": "0.1.87",
     "@trackunit/tailwind-styled-components": "0.0.56",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.30",

package/src/components/Toggle/Toggle.d.ts

@@ -15,6 +15,10 @@ export interface ToggleProps extends CommonProps {
      * onChange event handler.
      */
     onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * OnClick event handler it is thrown on root element of the component tree.
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**
      * Whether the toggle is disabled or not.
      */