@speakapbv/dough-component-library 9.25.0 → 9.26.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ReactNode, FunctionComponent } from "react";
|
|
1
|
+
import React, { ReactNode, MouseEvent, FunctionComponent } from "react";
|
|
2
2
|
import { Colors, ColorsText, Sizes, DoughDataAttributes } from "../../utils/constants";
|
|
3
3
|
import { ButtonProps } from "../button/button";
|
|
4
4
|
import "./drop-menu.scss";
|
|
@@ -36,5 +36,6 @@ export interface DropMenuProps {
|
|
|
36
36
|
innerButtonSize?: Sizes.NORMAL | Sizes.SMALL;
|
|
37
37
|
rightShift?: number;
|
|
38
38
|
overlaySelector?: string;
|
|
39
|
+
customClickHandler?: (e: MouseEvent) => void;
|
|
39
40
|
}
|
|
40
41
|
export declare const DropMenu: React.ForwardRefExoticComponent<DropMenuProps & React.RefAttributes<DoughDropMenuRef>>;
|
package/dist/index.es.js
CHANGED
|
@@ -1528,7 +1528,7 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
|
|
|
1528
1528
|
styleInject(css_248z$c);
|
|
1529
1529
|
|
|
1530
1530
|
var DropMenu = forwardRef(function (_a, ref) {
|
|
1531
|
-
var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth;
|
|
1531
|
+
var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth, customClickHandler = _a.customClickHandler;
|
|
1532
1532
|
var componentRef = useRef(null);
|
|
1533
1533
|
var _q = useState(false), showDropArea = _q[0], setShowDropArea = _q[1];
|
|
1534
1534
|
var openDropArea = function (e) {
|
|
@@ -1598,7 +1598,10 @@ var DropMenu = forwardRef(function (_a, ref) {
|
|
|
1598
1598
|
size: size,
|
|
1599
1599
|
shadow: shadow,
|
|
1600
1600
|
onClick: function (e) {
|
|
1601
|
-
if (
|
|
1601
|
+
if (customClickHandler) {
|
|
1602
|
+
customClickHandler(e);
|
|
1603
|
+
}
|
|
1604
|
+
else if (showDropArea === true) {
|
|
1602
1605
|
closeDropArea();
|
|
1603
1606
|
}
|
|
1604
1607
|
else {
|
|
@@ -4052,7 +4055,7 @@ var RadioGroup = function (props) {
|
|
|
4052
4055
|
};
|
|
4053
4056
|
RadioGroup.displayName = "RadioGroup";
|
|
4054
4057
|
|
|
4055
|
-
var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: inherit;\n line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n font-size: 1.125rem;\n line-height: 1.125rem;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: inherit;\n line-height:
|
|
4058
|
+
var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: inherit;\n line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n font-size: 1.125rem;\n line-height: 1.125rem;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > * {\n min-height: 24px;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: inherit;\n line-height: 24px;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n text-decoration: none !important;\n color: inherit !important;\n font-size: inherit;\n line-height: 24px;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n display: inline-flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n width: 24px;\n height: 24px;\n margin-left: 4px;\n margin-right: 4px;\n padding: 3px 4px 3px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n width: 100%;\n height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n fill: #999999;\n fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n font-size: 0.875rem;\n line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n width: 20px;\n height: 20px;\n}";
|
|
4056
4059
|
styleInject(css_248z$p);
|
|
4057
4060
|
|
|
4058
4061
|
/* Unpacks children wrapped in Fragments */
|
package/dist/index.js
CHANGED
|
@@ -1513,7 +1513,7 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
|
|
|
1513
1513
|
styleInject(css_248z$c);
|
|
1514
1514
|
|
|
1515
1515
|
var DropMenu = React.forwardRef(function (_a, ref) {
|
|
1516
|
-
var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React__default.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? exports.Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? exports.Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth;
|
|
1516
|
+
var _b = _a.alignIconRight, alignIconRight = _b === void 0 ? false : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.TRANSPARENT : _c, _d = _a.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = _a.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.showCaret, showCaret = _g === void 0 ? true : _g, _h = _a.rightShift, rightShift = _h === void 0 ? 0 : _h, _j = _a.shadow, shadow = _j === void 0 ? false : _j, _k = _a.show, show = _k === void 0 ? false : _k, _l = _a.rounded, rounded = _l === void 0 ? true : _l, _m = _a.icon, icon = _m === void 0 ? React__default.createElement(EllipsisVIcon, null) : _m, _o = _a.size, size = _o === void 0 ? exports.Sizes.SMALL : _o, _p = _a.innerButtonSize, innerButtonSize = _p === void 0 ? exports.Sizes.NORMAL : _p, ButtonComponent = _a.ButtonComponent, className = _a.className, onOpen = _a.onOpen, onClose = _a.onClose, children = _a.children, asInvisibleLine = _a.asInvisibleLine, alignFromRight = _a.alignFromRight, alignToCenter = _a.alignToCenter, dataAttributes = _a.dataAttributes, padding = _a.padding, label = _a.label, fullWidth = _a.fullWidth, strictToReferenceWidth = _a.strictToReferenceWidth, buttonClassName = _a.buttonClassName, overlaySelector = _a.overlaySelector, overlayWidth = _a.overlayWidth, customClickHandler = _a.customClickHandler;
|
|
1517
1517
|
var componentRef = React.useRef(null);
|
|
1518
1518
|
var _q = React.useState(false), showDropArea = _q[0], setShowDropArea = _q[1];
|
|
1519
1519
|
var openDropArea = function (e) {
|
|
@@ -1583,7 +1583,10 @@ var DropMenu = React.forwardRef(function (_a, ref) {
|
|
|
1583
1583
|
size: size,
|
|
1584
1584
|
shadow: shadow,
|
|
1585
1585
|
onClick: function (e) {
|
|
1586
|
-
if (
|
|
1586
|
+
if (customClickHandler) {
|
|
1587
|
+
customClickHandler(e);
|
|
1588
|
+
}
|
|
1589
|
+
else if (showDropArea === true) {
|
|
1587
1590
|
closeDropArea();
|
|
1588
1591
|
}
|
|
1589
1592
|
else {
|
|
@@ -4036,7 +4039,7 @@ var RadioGroup = function (props) {
|
|
|
4036
4039
|
};
|
|
4037
4040
|
RadioGroup.displayName = "RadioGroup";
|
|
4038
4041
|
|
|
4039
|
-
var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: inherit;\n line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n font-size: 1.125rem;\n line-height: 1.125rem;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: inherit;\n line-height:
|
|
4042
|
+
var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: inherit;\n line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n font-size: 1.125rem;\n line-height: 1.125rem;\n font-weight: 700;\n font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > * {\n min-height: 24px;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: inherit;\n line-height: 24px;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n text-decoration: none !important;\n color: inherit !important;\n font-size: inherit;\n line-height: 24px;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n display: inline-flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n width: 24px;\n height: 24px;\n margin-left: 4px;\n margin-right: 4px;\n padding: 3px 4px 3px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n width: 100%;\n height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n fill: #999999;\n fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n font-size: 0.875rem;\n line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n width: 20px;\n height: 20px;\n}";
|
|
4040
4043
|
styleInject(css_248z$p);
|
|
4041
4044
|
|
|
4042
4045
|
/* Unpacks children wrapped in Fragments */
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("./drop-menu").DropMenuProps & React.RefAttributes<import("./drop-menu").DoughDropMenuRef>>;
|
|
3
|
+
export default _default;
|
|
4
|
+
export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./drop-menu").DropMenuProps & React.RefAttributes<import("./drop-menu").DoughDropMenuRef>>;
|