@speakapbv/dough-component-library 10.3.0 → 10.3.2

package/dist/components/link/link.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEvent, Ref } from "react";
+import React, { ReactNode, MouseEvent, Ref, MouseEventHandler } from "react";
 import { ColorsText, DoughDataAttributes } from "../../utils/constants";
 import "./link.scss";
 export interface LinkProps {
@@ -8,6 +8,9 @@ export interface LinkProps {
     color?: ColorsText;
     children: ReactNode;
     onClick?(e: MouseEvent): void | boolean;
+    onMouseDown?: MouseEventHandler<HTMLAnchorElement>;
+    onPointerDown?: MouseEventHandler<HTMLAnchorElement>;
+    allEvents?: boolean;
     underline?: boolean;
     fullWidth?: boolean;
     disabled?: boolean;
@@ -19,4 +22,4 @@ export interface LinkProps {
     width?: string;
     flex?: string;
 }
-export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "className" | "dataAttributes" | "color" | "children" | "onClick" | "underline" | "fullWidth" | "disabled" | "colorOnlyOnHover" | "href" | "target" | "rel" | "download" | "width" | "flex"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "className" | "dataAttributes" | "color" | "children" | "onClick" | "onMouseDown" | "onPointerDown" | "allEvents" | "underline" | "fullWidth" | "disabled" | "colorOnlyOnHover" | "href" | "target" | "rel" | "download" | "width" | "flex"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/index.es.js

@@ -593,8 +593,24 @@ var deRegisterBreakpointView = function (id) {
 };
 
 var Link = forwardRef(function (props, ref) {
-    var _a = props.color, color = _a === void 0 ? ColorsText.LINK : _a, _b = props.underline, underline = _b === void 0 ? true : _b, _c = props.rel, rel = _c === void 0 ? "noopener noreferrer" : _c;
-    return (React.createElement("a", __assign({ onMouseDown: cancelEvent, onPointerDown: cancelEvent, className: cn("dough-link", props.className, color, {
+    var _a = props.color, color = _a === void 0 ? ColorsText.LINK : _a, _b = props.underline, underline = _b === void 0 ? true : _b, _c = props.rel, rel = _c === void 0 ? "noopener noreferrer" : _c, onPointerDown = props.onPointerDown, onMouseDown = props.onMouseDown, _d = props.allEvents, allEvents = _d === void 0 ? false : _d;
+    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("a", __assign({ onMouseDown: handleMouseDown, onPointerDown: handlePointerDown, className: cn("dough-link", props.className, color, {
             "dough-link-color-only-on-hover": props.colorOnlyOnHover,
             "dough-link-no-underline": !underline,
             "dough-link-full-width": props.fullWidth,
@@ -4540,7 +4556,7 @@ var PanelOverlay = function (props) {
 };
 PanelOverlay.displayName = "PanelOverlay";
 
-var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n  height: 4px;\n  width: 100%;\n  border-radius: 4px;\n  position: relative;\n}\n\n.dough-progress-bar__progress {\n  position: absolute;\n  height: 100%;\n  border-radius: 4px;\n  z-index: 1;\n}\n\n.dough-multi-progress-bar {\n  height: 8px;\n  width: 100%;\n  border-radius: 8px;\n  display: flex;\n}\n\n.dough-multi-progress-bar__progress {\n  height: 100%;\n  z-index: 1;\n}\n.dough-multi-progress-bar__progress:first-of-type {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n.dough-multi-progress-bar__progress:not(:last-of-type) {\n  border-right: 1px solid rgb(110, 111, 117);\n}\n.dough-multi-progress-bar__progress:last-of-type {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}";
+var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n  height: 4px;\n  width: 100%;\n  border-radius: 4px;\n  position: relative;\n}\n\n.dough-progress-bar__progress {\n  position: absolute;\n  height: 100%;\n  border-radius: 4px;\n  z-index: 1;\n}\n\n.dough-multi-progress-bar {\n  height: 8px;\n  width: 100%;\n  border-radius: 8px;\n  display: flex;\n}\n\n.dough-multi-progress-bar__progress {\n  height: 100%;\n  z-index: 1;\n  min-width: 4px;\n}\n.dough-multi-progress-bar__progress:first-of-type {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n.dough-multi-progress-bar__progress:last-of-type {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}";
 styleInject(css_248z$x);
 
 var DesignTokens = {

package/dist/index.js

@@ -588,8 +588,24 @@ var deRegisterBreakpointView = function (id) {
 };
 
 var Link = React.forwardRef(function (props, ref) {
-    var _a = props.color, color = _a === void 0 ? exports.ColorsText.LINK : _a, _b = props.underline, underline = _b === void 0 ? true : _b, _c = props.rel, rel = _c === void 0 ? "noopener noreferrer" : _c;
-    return (React__default.createElement("a", __assign({ onMouseDown: cancelEvent, onPointerDown: cancelEvent, className: cn("dough-link", props.className, color, {
+    var _a = props.color, color = _a === void 0 ? exports.ColorsText.LINK : _a, _b = props.underline, underline = _b === void 0 ? true : _b, _c = props.rel, rel = _c === void 0 ? "noopener noreferrer" : _c, onPointerDown = props.onPointerDown, onMouseDown = props.onMouseDown, _d = props.allEvents, allEvents = _d === void 0 ? false : _d;
+    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("a", __assign({ onMouseDown: handleMouseDown, onPointerDown: handlePointerDown, className: cn("dough-link", props.className, color, {
             "dough-link-color-only-on-hover": props.colorOnlyOnHover,
             "dough-link-no-underline": !underline,
             "dough-link-full-width": props.fullWidth,
@@ -4523,7 +4539,7 @@ var PanelOverlay = function (props) {
 };
 PanelOverlay.displayName = "PanelOverlay";
 
-var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n  height: 4px;\n  width: 100%;\n  border-radius: 4px;\n  position: relative;\n}\n\n.dough-progress-bar__progress {\n  position: absolute;\n  height: 100%;\n  border-radius: 4px;\n  z-index: 1;\n}\n\n.dough-multi-progress-bar {\n  height: 8px;\n  width: 100%;\n  border-radius: 8px;\n  display: flex;\n}\n\n.dough-multi-progress-bar__progress {\n  height: 100%;\n  z-index: 1;\n}\n.dough-multi-progress-bar__progress:first-of-type {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n.dough-multi-progress-bar__progress:not(:last-of-type) {\n  border-right: 1px solid rgb(110, 111, 117);\n}\n.dough-multi-progress-bar__progress:last-of-type {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}";
+var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n  height: 4px;\n  width: 100%;\n  border-radius: 4px;\n  position: relative;\n}\n\n.dough-progress-bar__progress {\n  position: absolute;\n  height: 100%;\n  border-radius: 4px;\n  z-index: 1;\n}\n\n.dough-multi-progress-bar {\n  height: 8px;\n  width: 100%;\n  border-radius: 8px;\n  display: flex;\n}\n\n.dough-multi-progress-bar__progress {\n  height: 100%;\n  z-index: 1;\n  min-width: 4px;\n}\n.dough-multi-progress-bar__progress:first-of-type {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n.dough-multi-progress-bar__progress:last-of-type {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}";
 styleInject(css_248z$x);
 
 var DesignTokens = {

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" | "onMouseDown" | "onPointerDown" | "allEvents" | "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" | "onMouseDown" | "onPointerDown" | "allEvents" | "fullWidth" | "disabled" | "alignIconRight" | "linkProps" | "tabIndex" | "name" | "autoFocus" | "icon" | "onDoubleClick" | "flat" | "busy" | "withoutBackground" | "colorPicker"> & {
     singleLabel: boolean;
 }>;

package/package.json

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