@speakapbv/dough-component-library 9.33.1 → 10.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/button/button.d.ts +2 -5
  2. package/dist/index.es.js +18 -7
  3. package/dist/index.js +18 -7
  4. package/dist/src/components/button/button.stories.d.ts +2 -1
  5. package/dist/src/components/drop-menu/drop-menu.stories.d.ts +1 -0
  6. package/package.json +1 -1
package/dist/components/button/button.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactNode, MouseEvent } from "react";
1
+ import React, { ReactNode, MouseEvent } from "react";
2
2
  import { Colors, Sizes, DoughDataAttributes, ColorsText } from "../../utils/constants";
3
3
  import "./button.scss";
4
4
  export declare enum ButtonInputType {
@@ -39,7 +39,4 @@ export interface ButtonProps {
39
39
  withoutBackground?: boolean;
40
40
  colorPicker?: boolean;
41
41
  }
42
- export declare const Button: {
43
- (props: ButtonProps): JSX.Element;
44
- displayName: string;
45
- };
42
+ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
package/dist/index.es.js CHANGED
@@ -618,14 +618,14 @@ var ButtonInputType;
618
618
  ButtonInputType["SUBMIT"] = "submit";
619
619
  ButtonInputType["LINK"] = "link";
620
620
  })(ButtonInputType || (ButtonInputType = {}));
621
- var Button = function (props) {
621
+ var Button = forwardRef(function (props, externalRef) {
622
622
  var doubleClickPrevent = false;
623
623
  var clickTime = 0;
624
624
  var doubleClickDuration = 250;
625
625
  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;
626
626
  var _g = useState(props.color || Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
627
627
  var initColorVal = useState(props.color || Colors.BUTTON)[0];
628
- var buttonRef = useRef(null);
628
+ var buttonRef = useRef();
629
629
  var clickAndDoubleClickHandler = function (eNative, e, handler) {
630
630
  hideLastDoughTooltip();
631
631
  if (buttonRef && buttonRef.current) {
@@ -636,7 +636,7 @@ var Button = function (props) {
636
636
  cancelEvent(e);
637
637
  return;
638
638
  }
639
- else if (!props.busy && !props.disabled) {
639
+ else {
640
640
  if (buttonRef.current) {
641
641
  var buttonGlow_1 = buttonRef.current.querySelector(".dough-button-background-glow");
642
642
  if (buttonGlow_1 === null || buttonGlow_1 === void 0 ? void 0 : buttonGlow_1.classList.contains("dough-glow-background")) {
@@ -752,18 +752,29 @@ var Button = function (props) {
752
752
  props.label && React.createElement(React.Fragment, null, props.label),
753
753
  !props.label && props.children),
754
754
  props.icon && alignIconRight && (React.createElement("div", { className: "dough-button-icon" }, props.icon)))); };
755
+ function getRef() {
756
+ return function (node) {
757
+ buttonRef.current = node;
758
+ if (typeof externalRef === "function") {
759
+ externalRef(node);
760
+ }
761
+ else if (externalRef) {
762
+ externalRef.current = node;
763
+ }
764
+ };
765
+ }
755
766
  return (React.createElement(React.Fragment, null,
756
- type === ButtonInputType.LINK && (React.createElement(Link, __assign({ ref: buttonRef, className: cn("dough-button-wrapper", props.className, {
767
+ type === ButtonInputType.LINK && (React.createElement(Link, __assign({ ref: getRef(), className: cn("dough-button-wrapper", props.className, {
757
768
  "dough-button-full-width": props.fullWidth,
758
769
  "dough-link-no-underline": type === ButtonInputType.LINK,
759
770
  }), disabled: props.disabled, onClick: clickHandler, dataAttributes: props.dataAttributes }, linkProps), getButtonContent())),
760
- type !== ButtonInputType.LINK && (React.createElement("button", __assign({ ref: buttonRef, type: type, autoFocus: props.autoFocus, name: props.name, onMouseDown: cancelEvent, onPointerDown: cancelEvent, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
771
+ 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, {
761
772
  "dough-button-full-width": props.fullWidth,
762
773
  "dough-button-not-clickable": !props.onClick &&
763
774
  !props.onDoubleClick &&
764
775
  type === ButtonInputType.BUTTON,
765
776
  }), disabled: props.disabled, onClick: clickHandler, onDoubleClick: doubleClickHandler }, props.dataAttributes), getButtonContent()))));
766
- };
777
+ });
767
778
  Button.displayName = "Button";
768
779
 
769
780
  var css_248z$3 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-toggle {\n display: inline-block;\n -webkit-tap-highlight-color: transparent;\n border-radius: 40px;\n position: relative;\n cursor: pointer;\n overflow: visible;\n box-sizing: border-box;\n pointer-events: all;\n z-index: 100;\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-toggle * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nbody:not(.no-transition) .dough-toggle {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle > .dough-toggle-background-wrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n width: auto;\n height: auto;\n overflow: visible;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n border-radius: 100%;\n transform-origin: center center;\n transform: translate3d(0, 0, 0) scale(0);\n}\nbody:not(.no-transition) .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transform: translate3d(0, 0, 0) scale(0.5);\n position: absolute;\n top: -8px;\n right: -8px;\n bottom: -8px;\n left: -8px;\n z-index: 15;\n width: auto;\n height: auto;\n opacity: 0.5;\n background-color: transparent !important;\n border: 3px solid rgba(0, 0, 0, 0);\n border-radius: 100%;\n}\nhtml.dough-IE11 .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n display: none;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-background {\n border-color: #eceffb;\n border-color: var(--dough-color-background);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-theme {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-theme);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-white {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-white);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-primary {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-header);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header-light {\n border-color: rgb(94, 162, 233);\n border-color: var(--dough-color-header-light);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header-dark {\n border-color: rgb(47, 101, 159);\n border-color: var(--dough-color-header-dark);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-button {\n border-color: rgb(71, 170, 60);\n border-color: var(--dough-color-button);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-like {\n border-color: rgb(242, 64, 37);\n border-color: var(--dough-color-like);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-success {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-warning-light {\n border-color: rgb(255, 239, 221);\n border-color: var(--dough-color-status-warning-light);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-warning {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-danger {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-1 {\n border-color: rgb(250, 75, 52);\n border-color: var(--dough-color-selector-1);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-2 {\n border-color: rgb(255, 168, 34);\n border-color: var(--dough-color-selector-2);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-3 {\n border-color: rgb(0, 145, 255);\n border-color: var(--dough-color-selector-3);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-4 {\n border-color: rgb(20, 202, 215);\n border-color: var(--dough-color-selector-4);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-5 {\n border-color: rgb(143, 0, 255);\n border-color: var(--dough-color-selector-5);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-1 {\n border-color: rgb(68, 68, 68);\n border-color: var(--dough-color-gray-1);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-2 {\n border-color: rgb(105, 105, 105);\n border-color: var(--dough-color-gray-2);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-3 {\n border-color: rgb(159, 159, 159);\n border-color: var(--dough-color-gray-3);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-4 {\n border-color: rgb(210, 210, 210);\n border-color: var(--dough-color-gray-4);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-5 {\n border-color: rgb(230, 230, 230);\n border-color: var(--dough-color-gray-5);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-6 {\n border-color: rgb(245, 245, 245);\n border-color: var(--dough-color-gray-6);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-transparent {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\nbody:not(.no-transition) .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: transform 450ms cubic-bezier(0.75, 1.8, 0.25, 0.75);\n}\nbody.no-transition .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody:not(.no-transition) .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transition: transform 1350ms cubic-bezier(0.25, 1, 0, 1), opacity 750ms 100ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle.dough-toggle-toggled {\n background-color: transparent;\n color: #ffffff;\n}\n.dough-toggle.dough-toggle-toggled > .dough-toggle-background-wrapper > .dough-toggle-background {\n transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-toggle.dough-toggle-toggled > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transform: translate3d(0, 0, 0) scale(1.2);\n opacity: 0;\n}\n.dough-toggle.dough-toggle-size-none {\n width: 0;\n height: 0;\n}\n.dough-toggle.dough-toggle-size-huge {\n width: 48px;\n height: 48px;\n}\n.dough-toggle.dough-toggle-size-extra-large {\n width: 40px;\n height: 40px;\n}\n.dough-toggle.dough-toggle-size-large {\n width: 32px;\n height: 32px;\n}\n.dough-toggle.dough-toggle-size-normal {\n width: 24px;\n height: 24px;\n}\n.dough-toggle.dough-toggle-size-small {\n width: 16px;\n height: 16px;\n}\n.dough-toggle.dough-toggle-size-extra-small {\n width: 8px;\n height: 8px;\n}\n.dough-toggle.dough-toggle-size-tiny {\n width: 4px;\n height: 4px;\n}\n.dough-toggle > .dough-toggle-icon-wrapper {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n}\nhtml.dough-IE11 .dough-toggle > .dough-toggle-icon-wrapper {\n line-height: normal;\n}\n.dough-toggle * {\n pointer-events: none;\n}\n.dough-toggle.dough-toggle-disabled, .dough-toggle.dough-toggle-readonly {\n pointer-events: none !important;\n}\n.dough-toggle.dough-toggle-disabled *, .dough-toggle.dough-toggle-readonly * {\n pointer-events: none !important;\n}\n.dough-toggle.dough-toggle-disabled {\n opacity: 0.5;\n}";
@@ -4019,7 +4030,7 @@ var Switch = forwardRef(function (props, ref) {
4019
4030
  });
4020
4031
  Switch.displayName = "Switch";
4021
4032
 
4022
- var RadioOption = function (props) { return (React.createElement(CheckBox, { className: props.className, inputClassName: props.inputClassName, readOnly: props.readOnly, disabled: props.disabled, checkOnly: true, color: props.color, icon: React.createElement(CheckCircle, null), label: props.label, onChange: function (val) {
4033
+ var RadioOption = function (props) { return (React.createElement(CheckBox, { className: props.className, inputClassName: props.inputClassName, readOnly: props.readOnly, disabled: props.disabled, checkOnly: true, color: props.color, icon: React.createElement(CheckCircle, null), dataAttributes: props.dataAttributes, label: props.label, onChange: function (val) {
4023
4034
  if (val && props.onSelected) {
4024
4035
  props.onSelected(props.value);
4025
4036
  }
package/dist/index.js CHANGED
@@ -612,14 +612,14 @@ Link.displayName = "Link";
612
612
  ButtonInputType["SUBMIT"] = "submit";
613
613
  ButtonInputType["LINK"] = "link";
614
614
  })(exports.ButtonInputType || (exports.ButtonInputType = {}));
615
- var Button = function (props) {
615
+ var Button = React.forwardRef(function (props, externalRef) {
616
616
  var doubleClickPrevent = false;
617
617
  var clickTime = 0;
618
618
  var doubleClickDuration = 250;
619
619
  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;
620
620
  var _g = React.useState(props.color || exports.Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
621
621
  var initColorVal = React.useState(props.color || exports.Colors.BUTTON)[0];
622
- var buttonRef = React.useRef(null);
622
+ var buttonRef = React.useRef();
623
623
  var clickAndDoubleClickHandler = function (eNative, e, handler) {
624
624
  hideLastDoughTooltip();
625
625
  if (buttonRef && buttonRef.current) {
@@ -630,7 +630,7 @@ var Button = function (props) {
630
630
  cancelEvent(e);
631
631
  return;
632
632
  }
633
- else if (!props.busy && !props.disabled) {
633
+ else {
634
634
  if (buttonRef.current) {
635
635
  var buttonGlow_1 = buttonRef.current.querySelector(".dough-button-background-glow");
636
636
  if (buttonGlow_1 === null || buttonGlow_1 === void 0 ? void 0 : buttonGlow_1.classList.contains("dough-glow-background")) {
@@ -746,18 +746,29 @@ var Button = function (props) {
746
746
  props.label && React__default.createElement(React__default.Fragment, null, props.label),
747
747
  !props.label && props.children),
748
748
  props.icon && alignIconRight && (React__default.createElement("div", { className: "dough-button-icon" }, props.icon)))); };
749
+ function getRef() {
750
+ return function (node) {
751
+ buttonRef.current = node;
752
+ if (typeof externalRef === "function") {
753
+ externalRef(node);
754
+ }
755
+ else if (externalRef) {
756
+ externalRef.current = node;
757
+ }
758
+ };
759
+ }
749
760
  return (React__default.createElement(React__default.Fragment, null,
750
- type === exports.ButtonInputType.LINK && (React__default.createElement(Link, __assign({ ref: buttonRef, className: cn("dough-button-wrapper", props.className, {
761
+ type === exports.ButtonInputType.LINK && (React__default.createElement(Link, __assign({ ref: getRef(), className: cn("dough-button-wrapper", props.className, {
751
762
  "dough-button-full-width": props.fullWidth,
752
763
  "dough-link-no-underline": type === exports.ButtonInputType.LINK,
753
764
  }), disabled: props.disabled, onClick: clickHandler, dataAttributes: props.dataAttributes }, linkProps), getButtonContent())),
754
- type !== exports.ButtonInputType.LINK && (React__default.createElement("button", __assign({ ref: buttonRef, type: type, autoFocus: props.autoFocus, name: props.name, onMouseDown: cancelEvent, onPointerDown: cancelEvent, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
765
+ 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, {
755
766
  "dough-button-full-width": props.fullWidth,
756
767
  "dough-button-not-clickable": !props.onClick &&
757
768
  !props.onDoubleClick &&
758
769
  type === exports.ButtonInputType.BUTTON,
759
770
  }), disabled: props.disabled, onClick: clickHandler, onDoubleClick: doubleClickHandler }, props.dataAttributes), getButtonContent()))));
760
- };
771
+ });
761
772
  Button.displayName = "Button";
762
773
 
763
774
  var css_248z$3 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-toggle {\n display: inline-block;\n -webkit-tap-highlight-color: transparent;\n border-radius: 40px;\n position: relative;\n cursor: pointer;\n overflow: visible;\n box-sizing: border-box;\n pointer-events: all;\n z-index: 100;\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-toggle * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nbody:not(.no-transition) .dough-toggle {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle > .dough-toggle-background-wrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n width: auto;\n height: auto;\n overflow: visible;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n border-radius: 100%;\n transform-origin: center center;\n transform: translate3d(0, 0, 0) scale(0);\n}\nbody:not(.no-transition) .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transform: translate3d(0, 0, 0) scale(0.5);\n position: absolute;\n top: -8px;\n right: -8px;\n bottom: -8px;\n left: -8px;\n z-index: 15;\n width: auto;\n height: auto;\n opacity: 0.5;\n background-color: transparent !important;\n border: 3px solid rgba(0, 0, 0, 0);\n border-radius: 100%;\n}\nhtml.dough-IE11 .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n display: none;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-background {\n border-color: #eceffb;\n border-color: var(--dough-color-background);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-theme {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-theme);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-white {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-white);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-primary {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-header);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header-light {\n border-color: rgb(94, 162, 233);\n border-color: var(--dough-color-header-light);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header-dark {\n border-color: rgb(47, 101, 159);\n border-color: var(--dough-color-header-dark);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-button {\n border-color: rgb(71, 170, 60);\n border-color: var(--dough-color-button);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-like {\n border-color: rgb(242, 64, 37);\n border-color: var(--dough-color-like);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-success {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-warning-light {\n border-color: rgb(255, 239, 221);\n border-color: var(--dough-color-status-warning-light);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-warning {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-danger {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-1 {\n border-color: rgb(250, 75, 52);\n border-color: var(--dough-color-selector-1);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-2 {\n border-color: rgb(255, 168, 34);\n border-color: var(--dough-color-selector-2);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-3 {\n border-color: rgb(0, 145, 255);\n border-color: var(--dough-color-selector-3);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-4 {\n border-color: rgb(20, 202, 215);\n border-color: var(--dough-color-selector-4);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-5 {\n border-color: rgb(143, 0, 255);\n border-color: var(--dough-color-selector-5);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-1 {\n border-color: rgb(68, 68, 68);\n border-color: var(--dough-color-gray-1);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-2 {\n border-color: rgb(105, 105, 105);\n border-color: var(--dough-color-gray-2);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-3 {\n border-color: rgb(159, 159, 159);\n border-color: var(--dough-color-gray-3);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-4 {\n border-color: rgb(210, 210, 210);\n border-color: var(--dough-color-gray-4);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-5 {\n border-color: rgb(230, 230, 230);\n border-color: var(--dough-color-gray-5);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-6 {\n border-color: rgb(245, 245, 245);\n border-color: var(--dough-color-gray-6);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-transparent {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\nbody:not(.no-transition) .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: transform 450ms cubic-bezier(0.75, 1.8, 0.25, 0.75);\n}\nbody.no-transition .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody:not(.no-transition) .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transition: transform 1350ms cubic-bezier(0.25, 1, 0, 1), opacity 750ms 100ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle.dough-toggle-toggled {\n background-color: transparent;\n color: #ffffff;\n}\n.dough-toggle.dough-toggle-toggled > .dough-toggle-background-wrapper > .dough-toggle-background {\n transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-toggle.dough-toggle-toggled > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transform: translate3d(0, 0, 0) scale(1.2);\n opacity: 0;\n}\n.dough-toggle.dough-toggle-size-none {\n width: 0;\n height: 0;\n}\n.dough-toggle.dough-toggle-size-huge {\n width: 48px;\n height: 48px;\n}\n.dough-toggle.dough-toggle-size-extra-large {\n width: 40px;\n height: 40px;\n}\n.dough-toggle.dough-toggle-size-large {\n width: 32px;\n height: 32px;\n}\n.dough-toggle.dough-toggle-size-normal {\n width: 24px;\n height: 24px;\n}\n.dough-toggle.dough-toggle-size-small {\n width: 16px;\n height: 16px;\n}\n.dough-toggle.dough-toggle-size-extra-small {\n width: 8px;\n height: 8px;\n}\n.dough-toggle.dough-toggle-size-tiny {\n width: 4px;\n height: 4px;\n}\n.dough-toggle > .dough-toggle-icon-wrapper {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n}\nhtml.dough-IE11 .dough-toggle > .dough-toggle-icon-wrapper {\n line-height: normal;\n}\n.dough-toggle * {\n pointer-events: none;\n}\n.dough-toggle.dough-toggle-disabled, .dough-toggle.dough-toggle-readonly {\n pointer-events: none !important;\n}\n.dough-toggle.dough-toggle-disabled *, .dough-toggle.dough-toggle-readonly * {\n pointer-events: none !important;\n}\n.dough-toggle.dough-toggle-disabled {\n opacity: 0.5;\n}";
@@ -4003,7 +4014,7 @@ var Switch = React.forwardRef(function (props, ref) {
4003
4014
  });
4004
4015
  Switch.displayName = "Switch";
4005
4016
 
4006
- var RadioOption = function (props) { return (React__default.createElement(CheckBox, { className: props.className, inputClassName: props.inputClassName, readOnly: props.readOnly, disabled: props.disabled, checkOnly: true, color: props.color, icon: React__default.createElement(CheckCircle, null), label: props.label, onChange: function (val) {
4017
+ var RadioOption = function (props) { return (React__default.createElement(CheckBox, { className: props.className, inputClassName: props.inputClassName, readOnly: props.readOnly, disabled: props.disabled, checkOnly: true, color: props.color, icon: React__default.createElement(CheckCircle, null), dataAttributes: props.dataAttributes, label: props.label, onChange: function (val) {
4007
4018
  if (val && props.onSelected) {
4008
4019
  props.onSelected(props.value);
4009
4020
  }
package/dist/src/components/button/button.stories.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import React from "react";
1
2
  import { ButtonProps } from "./button";
2
- declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, ButtonProps>;
3
+ declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
3
4
  export default _default;
4
5
  export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ButtonProps & {
5
6
  width: string;
package/dist/src/components/drop-menu/drop-menu.stories.d.ts CHANGED
@@ -2,3 +2,4 @@ import React from "react";
2
2
  declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("./drop-menu").DropMenuProps & React.RefAttributes<import("./drop-menu").DoughDropMenuRef>>;
3
3
  export default _default;
4
4
  export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./drop-menu").DropMenuProps & React.RefAttributes<import("./drop-menu").DoughDropMenuRef>>;
5
+ export declare const Multiple: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./drop-menu").DropMenuProps & React.RefAttributes<import("./drop-menu").DoughDropMenuRef>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "9.33.1",
3
+ "version": "10.0.1",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",