@conveyorhq/arrow-ds 1.79.0 → 1.80.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.79.0",
+  "version": "1.80.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode } from "react";
+import { HTMLProps, ReactNode, MouseEvent } from "react";
 export interface ToggleProps {
     checked?: boolean;
     className?: string;
@@ -6,7 +6,8 @@ export interface ToggleProps {
     id?: string;
     inputProps?: HTMLProps<HTMLInputElement>;
     onChange: (checked: boolean) => void;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
     children?: ReactNode;
     labelPosition?: "left" | "right";
 }
-export declare const Toggle: ({ checked, disabled, id, inputProps, className, onChange, children, labelPosition, ...rest }: ToggleProps) => JSX.Element;
+export declare const Toggle: ({ checked, disabled, id, inputProps, className, onChange, onClick, children, labelPosition, ...rest }: ToggleProps) => JSX.Element;

package/public/components/Toggle/Toggle.js

@@ -9,9 +9,9 @@ const classnames_1 = __importDefault(require("classnames"));
 const Box_1 = require("../Box");
 const bem_1 = require("../../utilities/bem");
 const cn = bem_1.bemHOF("Toggle");
-const Toggle = ({ checked = false, disabled = false, id, inputProps, className, onChange, children, labelPosition = "right", ...rest }) => {
+const Toggle = ({ checked = false, disabled = false, id, inputProps, className, onChange, onClick, children, labelPosition = "right", ...rest }) => {
     const inputRef = react_1.default.useRef(null);
-    const handleClick = () => {
+    const handleChange = () => {
         if (!disabled) {
             onChange(!checked);
         }
@@ -19,12 +19,15 @@ const Toggle = ({ checked = false, disabled = false, id, inputProps, className,
     return (react_1.default.createElement("button", Object.assign({ type: "button", className: classnames_1.default(cn(), cn({ m: labelPosition }), className, {
             isOn: checked,
             isOff: !checked,
-        }), id: id, disabled: disabled, role: "switch", "aria-checked": checked, onClick: () => {
+        }), id: id, disabled: disabled, role: "switch", "aria-checked": checked, onClick: (event) => {
             if (inputRef.current) {
                 inputRef.current.click();
             }
+            if (onClick) {
+                onClick(event);
+            }
         } }, rest),
-        react_1.default.createElement("input", Object.assign({ ref: inputRef, disabled: disabled, checked: checked, type: "checkbox", onChange: handleClick, value: checked ? "on" : "off", hidden: true }, inputProps)),
+        react_1.default.createElement("input", Object.assign({ ref: inputRef, disabled: disabled, checked: checked, type: "checkbox", onChange: handleChange, value: checked ? "on" : "off", hidden: true }, inputProps)),
         react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "track" }), "aria-hidden": "true" },
             react_1.default.createElement(Box_1.Box, { as: "span", className: cn({ e: "thumb" }) })),
         children && (react_1.default.createElement(Box_1.Box, { as: "span", className: classnames_1.default(cn({ e: "label" })) }, children))));

package/src/components/Toggle/Toggle.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLProps, ReactNode } from "react";
+import React, { HTMLProps, ReactNode, MouseEvent } from "react";
 import classNames from "classnames";
 import { Box } from "../Box";
 import { bemHOF } from "../../utilities/bem";
@@ -30,6 +30,10 @@ export interface ToggleProps {
    * Called when a user turns the toggle on/off (unless `disabled` is true)
    */
   onChange: (checked: boolean) => void;
+  /**
+   * Optional onClick event
+   */
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
   /**
    * The label text
    */
@@ -47,13 +51,14 @@ export const Toggle = ({
   inputProps,
   className,
   onChange,
+  onClick,
   children,
   labelPosition = "right",
   ...rest
 }: ToggleProps) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
 
-  const handleClick = () => {
+  const handleChange = () => {
     if (!disabled) {
       onChange(!checked);
     }
@@ -70,10 +75,13 @@ export const Toggle = ({
       disabled={disabled}
       role="switch"
       aria-checked={checked}
-      onClick={() => {
+      onClick={(event) => {
         if (inputRef.current) {
           inputRef.current.click();
         }
+        if (onClick) {
+          onClick(event);
+        }
       }}
       {...rest}
     >
@@ -82,7 +90,7 @@ export const Toggle = ({
         disabled={disabled}
         checked={checked}
         type="checkbox"
-        onChange={handleClick}
+        onChange={handleChange}
         value={checked ? "on" : "off"}
         hidden
         {...inputProps}