@speakapbv/dough-component-library 10.2.0 → 10.2.1

package/dist/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEvent } from "react";
+import React, { ReactNode, MouseEvent, MouseEventHandler } from "react";
 import { Colors, Sizes, DoughDataAttributes, ColorsText } from "../../utils/constants";
 import "./button.scss";
 export declare enum ButtonInputType {
@@ -31,6 +31,9 @@ export interface ButtonProps {
     padding?: boolean;
     onClick?(e?: MouseEvent): void;
     onDoubleClick?(e?: MouseEvent): void;
+    onMouseDown?: MouseEventHandler<HTMLButtonElement>;
+    onPointerDown?: MouseEventHandler<HTMLButtonElement>;
+    allEvents?: boolean;
     rounded?: boolean;
     flat?: boolean;
     size?: Sizes.LARGE | Sizes.NORMAL | Sizes.SMALL | Sizes.XS;

package/dist/index.es.js

@@ -623,8 +623,8 @@ var Button = forwardRef(function (props, externalRef) {
     var doubleClickPrevent = false;
     var clickTime = 0;
     var doubleClickDuration = 250;
-    var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f, withoutBackground = props.withoutBackground;
-    var _g = useState(props.color || Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
+    var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f, withoutBackground = props.withoutBackground, _g = props.allEvents, allEvents = _g === void 0 ? false : _g, onMouseDown = props.onMouseDown, onPointerDown = props.onPointerDown;
+    var _h = useState(props.color || Colors.BUTTON), colorVal = _h[0], setColorVal = _h[1];
     var initColorVal = useState(props.color || Colors.BUTTON)[0];
     var buttonRef = useRef();
     var clickAndDoubleClickHandler = function (eNative, e, handler) {
@@ -764,12 +764,28 @@ var Button = forwardRef(function (props, externalRef) {
             }
         };
     }
+    function handleMouseDown(event) {
+        if (onMouseDown) {
+            onMouseDown(event);
+        }
+        else if (!allEvents) {
+            cancelEvent(event);
+        }
+    }
+    function handlePointerDown(event) {
+        if (onPointerDown) {
+            onPointerDown(event);
+        }
+        else if (!allEvents) {
+            cancelEvent(event);
+        }
+    }
     return (React.createElement(React.Fragment, null,
         type === ButtonInputType.LINK && (React.createElement(Link, __assign({ ref: getRef(), className: cn("dough-button-wrapper", props.className, {
                 "dough-button-full-width": props.fullWidth,
                 "dough-link-no-underline": type === ButtonInputType.LINK,
             }), disabled: props.disabled, onClick: clickHandler, dataAttributes: props.dataAttributes }, linkProps), getButtonContent())),
-        type !== ButtonInputType.LINK && (React.createElement("button", __assign({ ref: getRef(), type: type, autoFocus: props.autoFocus, name: props.name, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
+        type !== ButtonInputType.LINK && (React.createElement("button", __assign({ ref: getRef(), type: type, autoFocus: props.autoFocus, name: props.name, onMouseDown: handleMouseDown, onPointerDown: handlePointerDown, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
                 "dough-button-full-width": props.fullWidth,
                 "dough-button-not-clickable": !props.onClick &&
                     !props.onDoubleClick &&

package/dist/index.js

@@ -617,8 +617,8 @@ var Button = React.forwardRef(function (props, externalRef) {
     var doubleClickPrevent = false;
     var clickTime = 0;
     var doubleClickDuration = 250;
-    var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? exports.Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? exports.ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f, withoutBackground = props.withoutBackground;
-    var _g = React.useState(props.color || exports.Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
+    var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? exports.Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? exports.ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f, withoutBackground = props.withoutBackground, _g = props.allEvents, allEvents = _g === void 0 ? false : _g, onMouseDown = props.onMouseDown, onPointerDown = props.onPointerDown;
+    var _h = React.useState(props.color || exports.Colors.BUTTON), colorVal = _h[0], setColorVal = _h[1];
     var initColorVal = React.useState(props.color || exports.Colors.BUTTON)[0];
     var buttonRef = React.useRef();
     var clickAndDoubleClickHandler = function (eNative, e, handler) {
@@ -758,12 +758,28 @@ var Button = React.forwardRef(function (props, externalRef) {
             }
         };
     }
+    function handleMouseDown(event) {
+        if (onMouseDown) {
+            onMouseDown(event);
+        }
+        else if (!allEvents) {
+            cancelEvent(event);
+        }
+    }
+    function handlePointerDown(event) {
+        if (onPointerDown) {
+            onPointerDown(event);
+        }
+        else if (!allEvents) {
+            cancelEvent(event);
+        }
+    }
     return (React__default.createElement(React__default.Fragment, null,
         type === exports.ButtonInputType.LINK && (React__default.createElement(Link, __assign({ ref: getRef(), className: cn("dough-button-wrapper", props.className, {
                 "dough-button-full-width": props.fullWidth,
                 "dough-link-no-underline": type === exports.ButtonInputType.LINK,
             }), disabled: props.disabled, onClick: clickHandler, dataAttributes: props.dataAttributes }, linkProps), getButtonContent())),
-        type !== exports.ButtonInputType.LINK && (React__default.createElement("button", __assign({ ref: getRef(), type: type, autoFocus: props.autoFocus, name: props.name, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
+        type !== exports.ButtonInputType.LINK && (React__default.createElement("button", __assign({ ref: getRef(), type: type, autoFocus: props.autoFocus, name: props.name, onMouseDown: handleMouseDown, onPointerDown: handlePointerDown, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
                 "dough-button-full-width": props.fullWidth,
                 "dough-button-not-clickable": !props.onClick &&
                     !props.onDoubleClick &&

package/dist/src/components/button/button.stories.d.ts

@@ -14,6 +14,6 @@ export declare const ColorButton: import("@storybook/csf").AnnotatedStoryFn<impo
 export declare const ColorButtonWithoutBorder: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ButtonProps & {
     width: string;
 }>;
-export declare const ConstrainedButton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, Pick<ButtonProps, "className" | "children" | "dataAttributes" | "type" | "size" | "color" | "border" | "rounded" | "shadow" | "padding" | "onClick" | "fullWidth" | "disabled" | "alignIconRight" | "linkProps" | "tabIndex" | "name" | "autoFocus" | "icon" | "onDoubleClick" | "flat" | "busy" | "withoutBackground" | "colorPicker"> & {
+export declare const ConstrainedButton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, Pick<ButtonProps, "className" | "children" | "dataAttributes" | "type" | "size" | "color" | "border" | "rounded" | "shadow" | "padding" | "onClick" | "fullWidth" | "disabled" | "alignIconRight" | "linkProps" | "tabIndex" | "name" | "autoFocus" | "icon" | "onDoubleClick" | "onMouseDown" | "onPointerDown" | "allEvents" | "flat" | "busy" | "withoutBackground" | "colorPicker"> & {
     singleLabel: boolean;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@speakapbv/dough-component-library",
-    "version": "10.2.0",
+    "version": "10.2.1",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",