@speakapbv/dough-component-library 9.28.2 → 9.30.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/components/tabs/tabs.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { Colors, DoughDataAttributes } from "../../utils/constants";
 import "./tabs.scss";
+import { BoxProps } from "../containers/box/box";
 export interface TabsContainerProps {
     className?: string;
     children?: ReactNode;
@@ -8,8 +9,11 @@ export interface TabsContainerProps {
     borderOnTop?: boolean;
     showDivider?: boolean;
     color?: Colors;
+    padding?: BoxProps["padding"];
+    withBorderOnHover?: boolean;
     stretchTabs?: boolean;
     small?: boolean;
+    compact?: boolean;
     iconOnly?: boolean;
     onChange(selectedTabId: string): void;
     value?: string;

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";
@@ -4611,14 +4614,20 @@ var Notification = function (props) {
 };
 Notification.displayName = "Notification";
 
-var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tabs-container {\n  flex-flow: row nowrap !important;\n  align-items: stretch !important;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  margin-bottom: -1px;\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-top-border {\n  border-top: 1px solid rgb(230, 230, 230);\n  border-top: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-bottom-border {\n  border-bottom: 1px solid rgb(230, 230, 230);\n  border-bottom: 1px solid var(--dough-color-gray-5);\n}\nhtml.dough-IE11 .dough-tabs-container {\n  margin-bottom: 0;\n}\n.dough-tabs-container > .dough-tab-item {\n  padding: 0 !important;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n}\nbody:not(.no-transition) .dough-tabs-container > .dough-tab-item {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tabs-container > .dough-tab-item {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-tabs-container > .dough-tab-item.dough-tab-item-stretch-tabs {\n  flex-grow: 1;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-button {\n  width: 100% !important;\n  height: 100% !important;\n  min-width: 40px;\n  color: rgb(158, 158, 158);\n  color: var(--dough-color-text-light);\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-button > .dough-box {\n  max-height: 60px;\n  min-height: 60px;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border {\n  position: absolute;\n  right: 0;\n  left: 0;\n  z-index: 5;\n  width: auto;\n  height: 4px;\n  transform: translate3d(0, 4px, 0);\n  opacity: 0;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border.dough-tabs-container-top-border {\n  top: 0;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n  bottom: 0;\n}\nbody:not(.no-transition) .dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-tabs-container > .dough-tab-item:hover > .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n.dough-tabs-container > .dough-tab-item.active > .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n.dough-tabs-container > .dough-tab-item.active > .dough-tab-item-selection-border {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.dough-tabs-container > .dough-tab-item.dough-tab-item-small > .dough-tab-item-button > .dough-box {\n  max-height: 40px;\n  min-height: 40px;\n}";
+var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tab-item-selection-border {\n  position: absolute;\n  right: 0;\n  left: 0;\n  z-index: 5;\n  width: auto;\n  height: 4px;\n  border-radius: 12px;\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n.dough-tab-item-selection-border.dough-tabs-container-top-border {\n  top: 0;\n}\n.dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n  bottom: 0;\n}\nbody:not(.no-transition) .dough-tab-item-selection-border {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item-selection-border {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n\n.dough-tab-item-button {\n  width: 100% !important;\n  height: 100% !important;\n  min-width: 40px;\n  color: rgb(158, 158, 158);\n  color: var(--dough-color-text-light);\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n  line-height: 1.5;\n}\n.dough-tab-item-button .dough-box {\n  max-height: 60px;\n  min-height: 60px;\n}\n.dough-tab-item-button.dough-item-small .dough-box {\n  max-height: 40px;\n  min-height: 40px;\n}\n\n.dough-tab-item {\n  padding: 0 !important;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n}\nbody:not(.no-transition) .dough-tab-item {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-tab-item.dough-tab-item-stretch-tabs {\n  flex-grow: 1;\n}\n.dough-tab-item .dough-tab-item-selection-border {\n  opacity: 0;\n}\n.dough-tab-item:hover .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n.dough-tab-item:hover .dough-tab-item-selection-border.dough-tab-item-selection-border-hover {\n  opacity: 0.25;\n}\n.dough-tab-item.active .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n\n.dough-tabs-container {\n  position: relative;\n  flex-flow: row nowrap !important;\n  align-items: stretch !important;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  margin-bottom: -1px;\n}\n.dough-tabs-container.dough-tabs-container-divider {\n  border-top: 1px solid rgb(230, 230, 230);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-top-border {\n  border-top: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-bottom-border {\n  border-bottom: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item + .dough-tab-item {\n  margin-left: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button {\n  padding-bottom: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button .dough-box {\n  max-height: unset;\n  min-height: 0;\n}\n.dough-tabs-container.dough-tabs-container-compact.dough-tabs-container-top-border .dough-tab-item.dough-tab-item-compact .dough-tab-item-button {\n  padding-bottom: 0;\n  padding-top: 16px;\n}";
 styleInject(css_248z$z);
 
 var simplifyKey = function (key) {
     return key ? key.slice(key.indexOf("$") + 1) : key;
 };
 
+var Border = function (props) { return (React.createElement("span", { className: cn("dough-tab-item-selection-border", props.color ? props.color : Colors.HEADER, {
+        "dough-tab-item-selection-border-hover": props.withBorderOnHover,
+        "dough-tabs-container-top-border": props.borderOnTop,
+    }), style: props.style })); };
 var TabsContainer = function (props) {
+    var tabRefs = useRef({});
+    var _a = useState(undefined), selectedIndex = _a[0], setSelectedIndex = _a[1];
     var handleChange = function (val) {
         if (val && val !== props.value) {
             if (props.onChange) {
@@ -4626,34 +4635,52 @@ var TabsContainer = function (props) {
             }
         }
     };
+    var currentTab = selectedIndex === undefined
+        ? undefined
+        : tabRefs.current[selectedIndex];
+    var underlineWidth = currentTab === null || currentTab === void 0 ? void 0 : currentTab.clientWidth;
+    var underlineLeftPosition = currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetLeft;
     return (React.createElement(Box, { display: BoxDisplay.FLEX, direction: BoxDirection.ROW, className: cn("dough-tabs-container", props.className, {
             "dough-tabs-container-divider": props.showDivider !== false,
             "dough-tabs-container-top-border": props.borderOnTop,
-            "dough-tabs-container-bottom-border": props.borderOnTop !== false,
-        }), dataAttributes: props.dataAttributes }, props.children &&
-        Children.toArray(props.children).map(function (child) {
-            var simplifiedKey = simplifyKey(child.key);
-            return (React.createElement(Box, { className: cn("dough-tab-item", {
-                    active: props.value === simplifiedKey,
-                    "dough-tab-item-small": props.small || props.iconOnly,
-                    "dough-tab-item-stretch-tabs": props.stretchTabs,
-                }), key: "tab-" + simplifiedKey + "-wrapper" },
-                React.createElement("span", { className: cn("dough-tab-item-selection-border", props.color ? props.color : Colors.HEADER, {
-                        "dough-tabs-container-top-border": props.borderOnTop,
-                    }) }),
-                React.createElement("div", { className: cn("dough-tab-item-button", {
-                        "dough-tab-item-button-disabled": child.props.disabled,
-                    }), onClick: function (e) {
-                        cancelEvent(e);
-                        hideLastDoughTooltip();
-                        handleChange(simplifiedKey);
-                    } },
-                    React.createElement(Box, { height: "100%", display: BoxDisplay.FLEX, justifyContent: BoxJustifyContent.CENTER, alignItems: BoxAlign.CENTER, padding: props.iconOnly
-                            ? Sizes.XS
-                            : props.small
-                                ? Sizes.SMALL
-                                : Sizes.NORMAL }, child))));
-        })));
+            "dough-tabs-container-bottom-border": props.borderOnTop !== true,
+            "dough-tabs-container-compact": props.compact,
+        }), padding: props.padding, dataAttributes: props.dataAttributes },
+        props.children &&
+            Children.toArray(props.children).map(function (child, index) {
+                var simplifiedKey = simplifyKey(child.key);
+                var isActive = props.value === simplifiedKey;
+                return (React.createElement(Box, { className: cn("dough-tab-item", {
+                        active: props.value === simplifiedKey,
+                        "dough-tab-item-small": props.small || props.iconOnly,
+                        "dough-tab-item-stretch-tabs": props.stretchTabs,
+                    }), ref: function (ref) {
+                        tabRefs.current[index] = ref;
+                        if (isActive) {
+                            setSelectedIndex(index);
+                        }
+                    }, key: "tab-" + simplifiedKey + "-wrapper" },
+                    React.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover }),
+                    React.createElement("div", { className: cn("dough-tab-item-button", {
+                            "dough-tab-item-button-disabled": child.props.disabled,
+                        }), onClick: function (e) {
+                            cancelEvent(e);
+                            hideLastDoughTooltip();
+                            setSelectedIndex(index);
+                            handleChange(simplifiedKey);
+                        } },
+                        React.createElement(Box, { height: "100%", display: BoxDisplay.FLEX, justifyContent: BoxJustifyContent.CENTER, alignItems: BoxAlign.CENTER, padding: props.iconOnly
+                                ? Sizes.XS
+                                : props.small
+                                    ? Sizes.SMALL
+                                    : props.compact
+                                        ? undefined
+                                        : Sizes.NORMAL }, child))));
+            }),
+        selectedIndex !== undefined && (React.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover, style: {
+                width: underlineWidth || 0,
+                left: underlineLeftPosition,
+            } }))));
 };
 TabsContainer.displayName = "TabsContainer";
 

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";
@@ -4594,14 +4597,20 @@ var Notification = function (props) {
 };
 Notification.displayName = "Notification";
 
-var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tabs-container {\n  flex-flow: row nowrap !important;\n  align-items: stretch !important;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  margin-bottom: -1px;\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-top-border {\n  border-top: 1px solid rgb(230, 230, 230);\n  border-top: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-bottom-border {\n  border-bottom: 1px solid rgb(230, 230, 230);\n  border-bottom: 1px solid var(--dough-color-gray-5);\n}\nhtml.dough-IE11 .dough-tabs-container {\n  margin-bottom: 0;\n}\n.dough-tabs-container > .dough-tab-item {\n  padding: 0 !important;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n}\nbody:not(.no-transition) .dough-tabs-container > .dough-tab-item {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tabs-container > .dough-tab-item {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-tabs-container > .dough-tab-item.dough-tab-item-stretch-tabs {\n  flex-grow: 1;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-button {\n  width: 100% !important;\n  height: 100% !important;\n  min-width: 40px;\n  color: rgb(158, 158, 158);\n  color: var(--dough-color-text-light);\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-button > .dough-box {\n  max-height: 60px;\n  min-height: 60px;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border {\n  position: absolute;\n  right: 0;\n  left: 0;\n  z-index: 5;\n  width: auto;\n  height: 4px;\n  transform: translate3d(0, 4px, 0);\n  opacity: 0;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border.dough-tabs-container-top-border {\n  top: 0;\n}\n.dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n  bottom: 0;\n}\nbody:not(.no-transition) .dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tabs-container > .dough-tab-item > .dough-tab-item-selection-border {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-tabs-container > .dough-tab-item:hover > .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n.dough-tabs-container > .dough-tab-item.active > .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n.dough-tabs-container > .dough-tab-item.active > .dough-tab-item-selection-border {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.dough-tabs-container > .dough-tab-item.dough-tab-item-small > .dough-tab-item-button > .dough-box {\n  max-height: 40px;\n  min-height: 40px;\n}";
+var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-tab-item-selection-border {\n  position: absolute;\n  right: 0;\n  left: 0;\n  z-index: 5;\n  width: auto;\n  height: 4px;\n  border-radius: 12px;\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n.dough-tab-item-selection-border.dough-tabs-container-top-border {\n  top: 0;\n}\n.dough-tab-item-selection-border:not(.dough-tabs-container-top-border) {\n  bottom: 0;\n}\nbody:not(.no-transition) .dough-tab-item-selection-border {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item-selection-border {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n\n.dough-tab-item-button {\n  width: 100% !important;\n  height: 100% !important;\n  min-width: 40px;\n  color: rgb(158, 158, 158);\n  color: var(--dough-color-text-light);\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n  line-height: 1.5;\n}\n.dough-tab-item-button .dough-box {\n  max-height: 60px;\n  min-height: 60px;\n}\n.dough-tab-item-button.dough-item-small .dough-box {\n  max-height: 40px;\n  min-height: 40px;\n}\n\n.dough-tab-item {\n  padding: 0 !important;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n}\nbody:not(.no-transition) .dough-tab-item {\n  transition: all 750ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-tab-item {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-tab-item.dough-tab-item-stretch-tabs {\n  flex-grow: 1;\n}\n.dough-tab-item .dough-tab-item-selection-border {\n  opacity: 0;\n}\n.dough-tab-item:hover .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n.dough-tab-item:hover .dough-tab-item-selection-border.dough-tab-item-selection-border-hover {\n  opacity: 0.25;\n}\n.dough-tab-item.active .dough-tab-item-button {\n  color: rgb(68, 68, 68);\n  color: var(--dough-color-text-dark);\n}\n\n.dough-tabs-container {\n  position: relative;\n  flex-flow: row nowrap !important;\n  align-items: stretch !important;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  margin-bottom: -1px;\n}\n.dough-tabs-container.dough-tabs-container-divider {\n  border-top: 1px solid rgb(230, 230, 230);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-top-border {\n  border-top: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-divider.dough-tabs-container-bottom-border {\n  border-bottom: 1px solid var(--dough-color-gray-5);\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item + .dough-tab-item {\n  margin-left: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button {\n  padding-bottom: 16px;\n}\n.dough-tabs-container.dough-tabs-container-compact .dough-tab-item-button .dough-box {\n  max-height: unset;\n  min-height: 0;\n}\n.dough-tabs-container.dough-tabs-container-compact.dough-tabs-container-top-border .dough-tab-item.dough-tab-item-compact .dough-tab-item-button {\n  padding-bottom: 0;\n  padding-top: 16px;\n}";
 styleInject(css_248z$z);
 
 var simplifyKey = function (key) {
     return key ? key.slice(key.indexOf("$") + 1) : key;
 };
 
+var Border = function (props) { return (React__default.createElement("span", { className: cn("dough-tab-item-selection-border", props.color ? props.color : exports.Colors.HEADER, {
+        "dough-tab-item-selection-border-hover": props.withBorderOnHover,
+        "dough-tabs-container-top-border": props.borderOnTop,
+    }), style: props.style })); };
 var TabsContainer = function (props) {
+    var tabRefs = React.useRef({});
+    var _a = React.useState(undefined), selectedIndex = _a[0], setSelectedIndex = _a[1];
     var handleChange = function (val) {
         if (val && val !== props.value) {
             if (props.onChange) {
@@ -4609,34 +4618,52 @@ var TabsContainer = function (props) {
             }
         }
     };
+    var currentTab = selectedIndex === undefined
+        ? undefined
+        : tabRefs.current[selectedIndex];
+    var underlineWidth = currentTab === null || currentTab === void 0 ? void 0 : currentTab.clientWidth;
+    var underlineLeftPosition = currentTab === null || currentTab === void 0 ? void 0 : currentTab.offsetLeft;
     return (React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, direction: exports.BoxDirection.ROW, className: cn("dough-tabs-container", props.className, {
             "dough-tabs-container-divider": props.showDivider !== false,
             "dough-tabs-container-top-border": props.borderOnTop,
-            "dough-tabs-container-bottom-border": props.borderOnTop !== false,
-        }), dataAttributes: props.dataAttributes }, props.children &&
-        React.Children.toArray(props.children).map(function (child) {
-            var simplifiedKey = simplifyKey(child.key);
-            return (React__default.createElement(Box, { className: cn("dough-tab-item", {
-                    active: props.value === simplifiedKey,
-                    "dough-tab-item-small": props.small || props.iconOnly,
-                    "dough-tab-item-stretch-tabs": props.stretchTabs,
-                }), key: "tab-" + simplifiedKey + "-wrapper" },
-                React__default.createElement("span", { className: cn("dough-tab-item-selection-border", props.color ? props.color : exports.Colors.HEADER, {
-                        "dough-tabs-container-top-border": props.borderOnTop,
-                    }) }),
-                React__default.createElement("div", { className: cn("dough-tab-item-button", {
-                        "dough-tab-item-button-disabled": child.props.disabled,
-                    }), onClick: function (e) {
-                        cancelEvent(e);
-                        hideLastDoughTooltip();
-                        handleChange(simplifiedKey);
-                    } },
-                    React__default.createElement(Box, { height: "100%", display: exports.BoxDisplay.FLEX, justifyContent: exports.BoxJustifyContent.CENTER, alignItems: exports.BoxAlign.CENTER, padding: props.iconOnly
-                            ? exports.Sizes.XS
-                            : props.small
-                                ? exports.Sizes.SMALL
-                                : exports.Sizes.NORMAL }, child))));
-        })));
+            "dough-tabs-container-bottom-border": props.borderOnTop !== true,
+            "dough-tabs-container-compact": props.compact,
+        }), padding: props.padding, dataAttributes: props.dataAttributes },
+        props.children &&
+            React.Children.toArray(props.children).map(function (child, index) {
+                var simplifiedKey = simplifyKey(child.key);
+                var isActive = props.value === simplifiedKey;
+                return (React__default.createElement(Box, { className: cn("dough-tab-item", {
+                        active: props.value === simplifiedKey,
+                        "dough-tab-item-small": props.small || props.iconOnly,
+                        "dough-tab-item-stretch-tabs": props.stretchTabs,
+                    }), ref: function (ref) {
+                        tabRefs.current[index] = ref;
+                        if (isActive) {
+                            setSelectedIndex(index);
+                        }
+                    }, key: "tab-" + simplifiedKey + "-wrapper" },
+                    React__default.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover }),
+                    React__default.createElement("div", { className: cn("dough-tab-item-button", {
+                            "dough-tab-item-button-disabled": child.props.disabled,
+                        }), onClick: function (e) {
+                            cancelEvent(e);
+                            hideLastDoughTooltip();
+                            setSelectedIndex(index);
+                            handleChange(simplifiedKey);
+                        } },
+                        React__default.createElement(Box, { height: "100%", display: exports.BoxDisplay.FLEX, justifyContent: exports.BoxJustifyContent.CENTER, alignItems: exports.BoxAlign.CENTER, padding: props.iconOnly
+                                ? exports.Sizes.XS
+                                : props.small
+                                    ? exports.Sizes.SMALL
+                                    : props.compact
+                                        ? undefined
+                                        : exports.Sizes.NORMAL }, child))));
+            }),
+        selectedIndex !== undefined && (React__default.createElement(Border, { borderOnTop: props.borderOnTop, color: props.color, withBorderOnHover: props.withBorderOnHover, style: {
+                width: underlineWidth || 0,
+                left: underlineLeftPosition,
+            } }))));
 };
 TabsContainer.displayName = "TabsContainer";
 

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/dist/src/components/tabs/tabs.stories.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("./tabs").TabsContainerProps>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./tabs").TabsContainerProps>;
+export declare const Compact: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./tabs").TabsContainerProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@speakapbv/dough-component-library",
-    "version": "9.28.2",
+    "version": "9.30.0",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",
@@ -10,7 +10,7 @@
     "module": "dist/index.es.js",
     "jsnext:main": "dist/index.es.js",
     "engines": {
-        "node": ">=8",
+        "node": ">=16.17.1",
         "npm": ">=5"
     },
     "scripts": {