@speakapbv/dough-component-library 10.2.0 → 10.3.0

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/components/containers/box/box.d.ts

@@ -113,7 +113,8 @@ export interface BoxProps {
     /** Event properties */
     onScrollReachedBottom?(e?: UIEvent): void;
     onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseMove?: MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: MouseEventHandler<HTMLDivElement>;
     onClick?: MouseEventHandler<HTMLDivElement>;
 }
-export declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, "className" | "children" | "dataAttributes" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "absolute" | "zIndex" | "color" | "border" | "borderRadius" | "rounded" | "shadow" | "padding" | "transform" | "overflow" | "display" | "direction" | "flex" | "basis" | "grow" | "shrink" | "order" | "wrap" | "justifyContent" | "alignItems" | "alignContent" | "alignSelf" | "onScrollReachedBottom" | "onMouseEnter" | "onMouseLeave" | "onClick"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, "className" | "children" | "dataAttributes" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "absolute" | "zIndex" | "color" | "border" | "borderRadius" | "rounded" | "shadow" | "padding" | "transform" | "overflow" | "display" | "direction" | "flex" | "basis" | "grow" | "shrink" | "order" | "wrap" | "justifyContent" | "alignItems" | "alignContent" | "alignSelf" | "onScrollReachedBottom" | "onMouseEnter" | "onMouseMove" | "onMouseLeave" | "onClick"> & React.RefAttributes<HTMLDivElement>>;

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 &&
@@ -1177,7 +1193,7 @@ var Box = forwardRef(function (props, ref) {
             _a["dough-flex-align-content-" + props.alignContent] = props.alignContent,
             _a["dough-flex-align-self-" + props.alignSelf] = props.alignSelf,
             _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex, transform: props.transform }, (isTypeObject(props.absolute) &&
-            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onClick: props.onClick }), props.children));
+            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onMouseMove: props.onMouseMove, onClick: props.onClick }), props.children));
 });
 Box.displayName = "Box";
 

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 &&
@@ -1162,7 +1178,7 @@ var Box = React.forwardRef(function (props, ref) {
             _a["dough-flex-align-content-" + props.alignContent] = props.alignContent,
             _a["dough-flex-align-self-" + props.alignSelf] = props.alignSelf,
             _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex, transform: props.transform }, (isTypeObject(props.absolute) &&
-            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onClick: props.onClick }), props.children));
+            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onMouseMove: props.onMouseMove, onClick: props.onClick }), props.children));
 });
 Box.displayName = "Box";
 

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.3.0",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",