@speakapbv/dough-component-library 9.28.2 → 9.29.0

package/dist/components/drop-menu/drop-menu.d.ts

@@ -39,5 +39,6 @@ export interface DropMenuProps {
     overlaySelector?: string;
     customClickHandler?: (e: MouseEvent) => void;
     alwaysTop?: boolean;
+    desktopOnly?: boolean;
 }
 export declare const DropMenu: React.ForwardRefExoticComponent<DropMenuProps & React.RefAttributes<DoughDropMenuRef>>;

package/dist/index.es.js

@@ -1326,16 +1326,17 @@ var generateUID = function () {
         ("000" + secondPart.toString(36)).slice(-3));
 };
 
-var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\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  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: rgb(255, 255, 255);\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: rgb(255, 255, 255);\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
+var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\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  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: rgb(255, 255, 255);\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: rgb(255, 255, 255);\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper:not(.desktop-only).visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper:not(.desktop-only) > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper:not(.desktop-only) > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper:not(.desktop-only).visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper:not(.desktop-only).visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper:not(.desktop-only) > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper:not(.desktop-only) > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper:not(.desktop-only).visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
 styleInject(css_248z$b);
 
 var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {
-    var _a = props.rightShift, rightShift = _a === void 0 ? 0 : _a, _b = props.topShift, topShift = _b === void 0 ? 0 : _b, _c = props.closeOnClickOutside, closeOnClickOutside = _c === void 0 ? true : _c, _d = props.closeOnEscape, closeOnEscape = _d === void 0 ? true : _d;
+    var _a;
+    var _b = props.rightShift, rightShift = _b === void 0 ? 0 : _b, _c = props.topShift, topShift = _c === void 0 ? 0 : _c, _d = props.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = props.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = props.desktopOnly, desktopOnly = _f === void 0 ? false : _f;
     var scrollLockId = useState(generateUID)[0];
-    var _e = useState(null), showDropArea = _e[0], setShowDropArea = _e[1];
+    var _g = useState(null), showDropArea = _g[0], setShowDropArea = _g[1];
     var dropAreaWrapperRef = useRef(null);
     var dropAreaArrowRef = useRef(null);
     var dropAreaContainerRef = useRef(null);
@@ -1521,7 +1522,9 @@ var DropArea = function (props) {
         };
     }, [props.show]);
     return (React.createElement(React.Fragment, null, showDropArea &&
-        createPortal(React.createElement("div", { ref: dropAreaWrapperRef, className: cn("dough-drop-area-wrapper"), onClick: function (e) {
+        createPortal(React.createElement("div", { ref: dropAreaWrapperRef, className: cn("dough-drop-area-wrapper", (_a = {},
+                _a["desktop-only"] = desktopOnly,
+                _a)), onClick: function (e) {
                 if (e.target &&
                     e.target.classList.contains("dough-drop-area-wrapper")) {
                     cancelEvent(e);
@@ -1539,7 +1542,7 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$c);
 
 var DropMenu = forwardRef(function (_a, ref) {
-    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.topShift, topShift = _j === void 0 ? 0 : _j, _k = _a.shadow, shadow = _k === void 0 ? false : _k, _l = _a.show, show = _l === void 0 ? false : _l, _m = _a.rounded, rounded = _m === void 0 ? true : _m, _o = _a.icon, icon = _o === void 0 ? React.createElement(EllipsisVIcon, null) : _o, _p = _a.size, size = _p === void 0 ? Sizes.SMALL : _p, _q = _a.innerButtonSize, innerButtonSize = _q === void 0 ? Sizes.NORMAL : _q, 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, alwaysTop = _a.alwaysTop;
+    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.topShift, topShift = _j === void 0 ? 0 : _j, _k = _a.shadow, shadow = _k === void 0 ? false : _k, _l = _a.show, show = _l === void 0 ? false : _l, _m = _a.rounded, rounded = _m === void 0 ? true : _m, _o = _a.icon, icon = _o === void 0 ? React.createElement(EllipsisVIcon, null) : _o, _p = _a.size, size = _p === void 0 ? Sizes.SMALL : _p, _q = _a.innerButtonSize, innerButtonSize = _q === void 0 ? Sizes.NORMAL : _q, 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, alwaysTop = _a.alwaysTop, desktopOnly = _a.desktopOnly;
     var componentRef = useRef(null);
     var _r = useState(false), showDropArea = _r[0], setShowDropArea = _r[1];
     var openDropArea = function (e) {
@@ -1637,7 +1640,7 @@ var DropMenu = forwardRef(function (_a, ref) {
             "dough-dropmenu-full-width": fullWidth,
         }), ref: componentRef }, dataAttributes),
         asInvisibleLine !== true && renderButtonComponent(),
-        React.createElement(DropArea, { overlaySelector: overlaySelector, rightShift: rightShift, topShift: topShift, alignFromRight: alignFromRight, alignToCenter: alignToCenter, closeOnClickOutside: closeOnClickOutside, closeOnEscape: closeOnEscape, onHide: closeDropArea, referenceElement: componentRef, show: showDropArea, showCaret: showCaret, strictToReferenceWidth: strictToReferenceWidth, alwaysTop: alwaysTop, width: overlayWidth || "auto" },
+        React.createElement(DropArea, { overlaySelector: overlaySelector, rightShift: rightShift, topShift: topShift, alignFromRight: alignFromRight, alignToCenter: alignToCenter, closeOnClickOutside: closeOnClickOutside, closeOnEscape: closeOnEscape, onHide: closeDropArea, referenceElement: componentRef, show: showDropArea, showCaret: showCaret, strictToReferenceWidth: strictToReferenceWidth, alwaysTop: alwaysTop, desktopOnly: desktopOnly, width: overlayWidth || "auto" },
             React.createElement(LayoutContainer, { className: cn("dough-drop-menu-buttons-container", className), layoutType: Direction.VERTICAL, dataAttributes: dataAttributes }, getButtons()))));
 });
 DropMenu.displayName = "DropMenu";

package/dist/index.js

@@ -1311,16 +1311,17 @@ var generateUID = function () {
         ("000" + secondPart.toString(36)).slice(-3));
 };
 
-var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\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  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: rgb(255, 255, 255);\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: rgb(255, 255, 255);\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper.visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper.visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
+var css_248z$b = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-drop-area-wrapper {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0);\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  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  transform-origin: center center;\n  font-family: \"Roboto\", sans-serif;\n}\nbody:not(.no-transition) .dough-drop-area-wrapper {\n  transition: opacity 350ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  pointer-events: fill;\n  max-height: calc(80vh - 16px);\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: absolute;\n  background-color: rgb(255, 255, 255);\n  background-color: var(--dough-color-theme);\n  box-sizing: border-box;\n  border-radius: 12px;\n  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1), 0px 1px 4px 0px rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow {\n  pointer-events: none;\n  position: absolute;\n  z-index: 50;\n  width: 32px !important;\n  height: 16px !important;\n  margin-top: -16px;\n  overflow: hidden;\n  min-width: initial !important;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow:before {\n  content: \"\";\n  background-color: rgb(255, 255, 255);\n  background-color: var(--dough-color-theme);\n  position: absolute;\n  top: 8px;\n  left: 4px;\n  z-index: 10;\n  width: 16px;\n  height: 16px;\n  transform: translate3d(0, 0, 0) rotateZ(45deg);\n  box-shadow: 0 24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up {\n  margin-top: initial;\n  margin-bottom: -16px;\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow.to-up:before {\n  top: -8px;\n  box-shadow: 0 -24px 10px 0 rgba(0, 0, 0, 0.07), 0 1px 4px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-drop-area-wrapper > .dough-drop-area-arrow,\n.dough-drop-area-wrapper > .dough-drop-area-container {\n  transform: translate3d(0, -4px, 0);\n}\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody:not(.no-transition) .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: transform 250ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-arrow,\nbody.no-transition .dough-drop-area-wrapper > .dough-drop-area-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-drop-area-wrapper.visible {\n  opacity: 1;\n}\n.dough-drop-area-wrapper.visible > .dough-drop-area-arrow,\n.dough-drop-area-wrapper.visible > .dough-drop-area-container {\n  transform: translate3d(0, 0, 0) !important;\n}\n\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper:not(.desktop-only).visible {\n  pointer-events: all;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper:not(.desktop-only) > .dough-drop-area-arrow {\n  display: none !important;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper:not(.desktop-only) > .dough-drop-area-container {\n  position: absolute;\n  top: initial !important;\n  bottom: 0 !important;\n  left: 0 !important;\n  z-index: 2;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 1vh !important;\n  max-height: 85vh !important;\n  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n  transform: translate3d(0, 20vh, 0);\n  border-radius: 0;\n}\nbody:not(.dough-no-viewport-control) .dough-max-viewport-size-small .dough-drop-area-wrapper:not(.desktop-only).visible {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n@media only screen and (max-width: 576px) {\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper:not(.desktop-only).visible {\n    pointer-events: all;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper:not(.desktop-only) > .dough-drop-area-arrow {\n    display: none !important;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper:not(.desktop-only) > .dough-drop-area-container {\n    position: absolute;\n    top: initial !important;\n    bottom: 0 !important;\n    left: 0 !important;\n    z-index: 2;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 1vh !important;\n    max-height: 85vh !important;\n    box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, 0.1);\n    transform: translate3d(0, 20vh, 0);\n    border-radius: 0;\n  }\n  body:not(.dough-no-viewport-control) .dough-drop-area-wrapper:not(.desktop-only).visible {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n}";
 styleInject(css_248z$b);
 
 var TOP_MARGIN = 4;
 var TOUP = "to-up";
 var TODOWN = "to-down";
 var DropArea = function (props) {
-    var _a = props.rightShift, rightShift = _a === void 0 ? 0 : _a, _b = props.topShift, topShift = _b === void 0 ? 0 : _b, _c = props.closeOnClickOutside, closeOnClickOutside = _c === void 0 ? true : _c, _d = props.closeOnEscape, closeOnEscape = _d === void 0 ? true : _d;
+    var _a;
+    var _b = props.rightShift, rightShift = _b === void 0 ? 0 : _b, _c = props.topShift, topShift = _c === void 0 ? 0 : _c, _d = props.closeOnClickOutside, closeOnClickOutside = _d === void 0 ? true : _d, _e = props.closeOnEscape, closeOnEscape = _e === void 0 ? true : _e, _f = props.desktopOnly, desktopOnly = _f === void 0 ? false : _f;
     var scrollLockId = React.useState(generateUID)[0];
-    var _e = React.useState(null), showDropArea = _e[0], setShowDropArea = _e[1];
+    var _g = React.useState(null), showDropArea = _g[0], setShowDropArea = _g[1];
     var dropAreaWrapperRef = React.useRef(null);
     var dropAreaArrowRef = React.useRef(null);
     var dropAreaContainerRef = React.useRef(null);
@@ -1506,7 +1507,9 @@ var DropArea = function (props) {
         };
     }, [props.show]);
     return (React__default.createElement(React__default.Fragment, null, showDropArea &&
-        reactDom.createPortal(React__default.createElement("div", { ref: dropAreaWrapperRef, className: cn("dough-drop-area-wrapper"), onClick: function (e) {
+        reactDom.createPortal(React__default.createElement("div", { ref: dropAreaWrapperRef, className: cn("dough-drop-area-wrapper", (_a = {},
+                _a["desktop-only"] = desktopOnly,
+                _a)), onClick: function (e) {
                 if (e.target &&
                     e.target.classList.contains("dough-drop-area-wrapper")) {
                     cancelEvent(e);
@@ -1524,7 +1527,7 @@ var css_248z$c = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$c);
 
 var DropMenu = React.forwardRef(function (_a, ref) {
-    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.topShift, topShift = _j === void 0 ? 0 : _j, _k = _a.shadow, shadow = _k === void 0 ? false : _k, _l = _a.show, show = _l === void 0 ? false : _l, _m = _a.rounded, rounded = _m === void 0 ? true : _m, _o = _a.icon, icon = _o === void 0 ? React__default.createElement(EllipsisVIcon, null) : _o, _p = _a.size, size = _p === void 0 ? exports.Sizes.SMALL : _p, _q = _a.innerButtonSize, innerButtonSize = _q === void 0 ? exports.Sizes.NORMAL : _q, 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, alwaysTop = _a.alwaysTop;
+    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.topShift, topShift = _j === void 0 ? 0 : _j, _k = _a.shadow, shadow = _k === void 0 ? false : _k, _l = _a.show, show = _l === void 0 ? false : _l, _m = _a.rounded, rounded = _m === void 0 ? true : _m, _o = _a.icon, icon = _o === void 0 ? React__default.createElement(EllipsisVIcon, null) : _o, _p = _a.size, size = _p === void 0 ? exports.Sizes.SMALL : _p, _q = _a.innerButtonSize, innerButtonSize = _q === void 0 ? exports.Sizes.NORMAL : _q, 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, alwaysTop = _a.alwaysTop, desktopOnly = _a.desktopOnly;
     var componentRef = React.useRef(null);
     var _r = React.useState(false), showDropArea = _r[0], setShowDropArea = _r[1];
     var openDropArea = function (e) {
@@ -1622,7 +1625,7 @@ var DropMenu = React.forwardRef(function (_a, ref) {
             "dough-dropmenu-full-width": fullWidth,
         }), ref: componentRef }, dataAttributes),
         asInvisibleLine !== true && renderButtonComponent(),
-        React__default.createElement(DropArea, { overlaySelector: overlaySelector, rightShift: rightShift, topShift: topShift, alignFromRight: alignFromRight, alignToCenter: alignToCenter, closeOnClickOutside: closeOnClickOutside, closeOnEscape: closeOnEscape, onHide: closeDropArea, referenceElement: componentRef, show: showDropArea, showCaret: showCaret, strictToReferenceWidth: strictToReferenceWidth, alwaysTop: alwaysTop, width: overlayWidth || "auto" },
+        React__default.createElement(DropArea, { overlaySelector: overlaySelector, rightShift: rightShift, topShift: topShift, alignFromRight: alignFromRight, alignToCenter: alignToCenter, closeOnClickOutside: closeOnClickOutside, closeOnEscape: closeOnEscape, onHide: closeDropArea, referenceElement: componentRef, show: showDropArea, showCaret: showCaret, strictToReferenceWidth: strictToReferenceWidth, alwaysTop: alwaysTop, desktopOnly: desktopOnly, width: overlayWidth || "auto" },
             React__default.createElement(LayoutContainer, { className: cn("dough-drop-menu-buttons-container", className), layoutType: exports.Direction.VERTICAL, dataAttributes: dataAttributes }, getButtons()))));
 });
 DropMenu.displayName = "DropMenu";

package/dist/src/components/containers/drop-area/drop-area.d.ts

@@ -17,6 +17,7 @@ export interface DropAreaProps {
     topShift?: number;
     overlaySelector?: string;
     alwaysTop?: boolean;
+    desktopOnly?: boolean;
 }
 export declare const DropArea: {
     (props: DropAreaProps): JSX.Element;

package/package.json

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