@muraldevkit/ui-toolkit 4.66.0-dev-7K0j.1 → 4.66.0-dev-DhSN.1

package/dist/cjs/components/popover/MrlPopover/MrlPopover.js

@@ -45,6 +45,7 @@ const __1 = require("../../");
 const useTriggerPosition_1 = require("../../../hooks/useTriggerPosition");
 const useBrowserEdgeScroll_1 = require("../../menu/hooks/useBrowserEdgeScroll");
 const useClickOutside_1 = require("../../../hooks/useClickOutside");
+const useScrollbarInfo_1 = require("../../../hooks/useScrollbarInfo");
 const useSubMenuElementPosition_1 = require("../../menu/hooks/useSubMenuElementPosition");
 const utils_1 = require("../../../utils");
 const layers_1 = require("../../../utils/layers");
@@ -63,6 +64,20 @@ const POPOVER_CLICKOUTSIDE_WHITELIST = [
     `.${MrlSelect_1.SELECT_MENU_LIST_CLASS_NAME}`,
     `.${MrlMultiSelect_1.MULTI_SELECT_MENU_LIST_CLASS_NAME}`
 ];
+/**
+ * Scrollable wrapper for the popover content. Lives as its own component so
+ * `useScrollbarInfo` mounts together with the scrollable element (the popover
+ * content only exists while the popover is open) and can compensate the right
+ * padding when a space-consuming scrollbar appears.
+ * @param {object} props - The props for the scroll container
+ * @returns {Element} - rendered scrollable popover content wrapper
+ */
+function MrlPopoverScrollContainer({ className, style, children }) {
+    const { scrollableContainerRef, verticalScrollbarWidth } = (0, useScrollbarInfo_1.useScrollbarInfo)();
+    return (React.createElement("div", { ref: scrollableContainerRef, className: className, style: Object.assign(Object.assign({}, style), (verticalScrollbarWidth > 0 && {
+            paddingRight: `calc(var(--mrl-popover-padding) - ${verticalScrollbarWidth}px)`
+        })) }, children));
+}
 /**
  * MrlPopover
  *
@@ -306,7 +321,7 @@ function MrlPopover(_a) {
         const scrollClasses = (0, classnames_1.default)(MrlPopover_module_scss_1.default['MrlPopover--content'], MrlPopover_module_scss_1.default['MrlPopover--scrolling--content']);
         return (React.createElement(React.Fragment, null, transitions((style, item) => item && (React.createElement(__1.MrlFocusTrap, { disabled: disableFocusTrap, containerRef: menuRef },
             React.createElement(web_1.animated.div, Object.assign({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: menuClasses, id: id, tabIndex: -1, style: Object.assign(Object.assign({}, positionStyles), style), onKeyDown: handleMenuKey, ref: menuRef }, rest),
-                React.createElement("div", { className: scrollClasses, style: inlineScrollStyles },
+                React.createElement(MrlPopoverScrollContainer, { className: scrollClasses, style: inlineScrollStyles },
                     typeof children === 'function' && children({ closeMenu }),
                     typeof children !== 'function' && children,
                     hasCloseButton && (React.createElement(__1.MrlIconButton, { "data-qa": "popover-close-button", wrapperClassName: MrlPopover_module_scss_1.default['MrlPopover--close'], icon: React.createElement(__1.MrlSvg, { svg: ds_icons_1.close }), kind: kind === 'inverse' ? 'ghost-inverse' : 'ghost', text: "Close", state: "default", position: "right", tipAnchor: "center", onMouseUp: closeMenu, onKeyDown: handleClose, size: "small" })),

package/dist/esm/components/popover/MrlPopover/MrlPopover.js

@@ -16,6 +16,7 @@ import { MrlFocusTrap, MrlIconButton, MrlPortal, MrlSvg } from '../../';
 import { useTriggerPosition } from '../../../hooks/useTriggerPosition';
 import { useBrowserEdgeScroll } from '../../menu/hooks/useBrowserEdgeScroll';
 import { useClickOutside } from '../../../hooks/useClickOutside';
+import { useScrollbarInfo } from '../../../hooks/useScrollbarInfo';
 import { useSubMenuElementPosition } from '../../menu/hooks/useSubMenuElementPosition';
 import { preventDefault, getFocusableElementsInsideElement, findAdjacentInteractiveElement, isElementAriaDisabled } from '../../../utils';
 import { PORTAL_LAYERS } from '../../../utils/layers';
@@ -34,6 +35,20 @@ const POPOVER_CLICKOUTSIDE_WHITELIST = [
     `.${SELECT_MENU_LIST_CLASS_NAME}`,
     `.${MULTI_SELECT_MENU_LIST_CLASS_NAME}`
 ];
+/**
+ * Scrollable wrapper for the popover content. Lives as its own component so
+ * `useScrollbarInfo` mounts together with the scrollable element (the popover
+ * content only exists while the popover is open) and can compensate the right
+ * padding when a space-consuming scrollbar appears.
+ * @param {object} props - The props for the scroll container
+ * @returns {Element} - rendered scrollable popover content wrapper
+ */
+function MrlPopoverScrollContainer({ className, style, children }) {
+    const { scrollableContainerRef, verticalScrollbarWidth } = useScrollbarInfo();
+    return (React.createElement("div", { ref: scrollableContainerRef, className: className, style: Object.assign(Object.assign({}, style), (verticalScrollbarWidth > 0 && {
+            paddingRight: `calc(var(--mrl-popover-padding) - ${verticalScrollbarWidth}px)`
+        })) }, children));
+}
 /**
  * MrlPopover
  *
@@ -277,7 +292,7 @@ export function MrlPopover(_a) {
         const scrollClasses = classnames(styles['MrlPopover--content'], styles['MrlPopover--scrolling--content']);
         return (React.createElement(React.Fragment, null, transitions((style, item) => item && (React.createElement(MrlFocusTrap, { disabled: disableFocusTrap, containerRef: menuRef },
             React.createElement(animated.div, Object.assign({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: menuClasses, id: id, tabIndex: -1, style: Object.assign(Object.assign({}, positionStyles), style), onKeyDown: handleMenuKey, ref: menuRef }, rest),
-                React.createElement("div", { className: scrollClasses, style: inlineScrollStyles },
+                React.createElement(MrlPopoverScrollContainer, { className: scrollClasses, style: inlineScrollStyles },
                     typeof children === 'function' && children({ closeMenu }),
                     typeof children !== 'function' && children,
                     hasCloseButton && (React.createElement(MrlIconButton, { "data-qa": "popover-close-button", wrapperClassName: styles['MrlPopover--close'], icon: React.createElement(MrlSvg, { svg: close }), kind: kind === 'inverse' ? 'ghost-inverse' : 'ghost', text: "Close", state: "default", position: "right", tipAnchor: "center", onMouseUp: closeMenu, onKeyDown: handleClose, size: "small" })),