@momentum-design/components 0.92.1 → 0.92.2

package/dist/components/popover/popover.component.d.ts

@@ -88,10 +88,41 @@ declare class Popover extends Popover_base {
      */
     offset: number;
     /**
-     *Virtual padding around the boundary to check for overflow.
-     * @default 16
+     * This describes the clipping element(s) or area that overflow will be checked relative to.
+     * The default is 'clippingAncestors', which are the overflow ancestors which will cause the
+     * element to be clipped.
+     *
+     * Possible values:
+     *  - 'clippingAncestors'
+     *  - any css selector
+     *
+     * @default 'clippingAncestors'
+     *
+     * @see [Floating UI - boundary](https://floating-ui.com/docs/detectOverflow#boundary)
+     */
+    boundary: 'clippingAncestors' | string;
+    /**
+     * This describes the root boundary that the element will be checked for overflow relative to.
+     * The default is 'viewport', which is the area of the page the user can see on the screen.
+     *
+     * The other string option is 'document', which is the entire page outside the viewport.
+     *
+     * @default 'viewport'
+     *
+     * @see [Floating UI - rootBoundary](https://floating-ui.com/docs/detectOverflow#rootboundary)
+     */
+    boundaryRoot: 'viewport' | 'document';
+    /**
+     * Virtual padding around the boundary to check for overflow.
+     * So the popover will not be placed on top of the edge of the boundary.
+     *
+     * Default works well for most cases, but you can set this to customise it when necessary.
+     *
+     * @default undefined
+     *
+     * @see [Floating UI - padding](https://floating-ui.com/docs/detectOverflow#padding)
      */
-    boundaryPadding: number;
+    boundaryPadding: undefined | number;
     /**
      * Determines whether the focus trap is enabled.
      * If true, focus will be restricted to the content within this component.

package/dist/components/popover/popover.component.js

@@ -107,10 +107,30 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          */
         this.offset = DEFAULTS.OFFSET;
         /**
-         *Virtual padding around the boundary to check for overflow.
-         * @default 16
+         * This describes the clipping element(s) or area that overflow will be checked relative to.
+         * The default is 'clippingAncestors', which are the overflow ancestors which will cause the
+         * element to be clipped.
+         *
+         * Possible values:
+         *  - 'clippingAncestors'
+         *  - any css selector
+         *
+         * @default 'clippingAncestors'
+         *
+         * @see [Floating UI - boundary](https://floating-ui.com/docs/detectOverflow#boundary)
+         */
+        this.boundary = DEFAULTS.BOUNDARY;
+        /**
+         * This describes the root boundary that the element will be checked for overflow relative to.
+         * The default is 'viewport', which is the area of the page the user can see on the screen.
+         *
+         * The other string option is 'document', which is the entire page outside the viewport.
+         *
+         * @default 'viewport'
+         *
+         * @see [Floating UI - rootBoundary](https://floating-ui.com/docs/detectOverflow#rootboundary)
          */
-        this.boundaryPadding = DEFAULTS.BOUNDARY_PADDING;
+        this.boundaryRoot = DEFAULTS.BOUNDARY_ROOT;
         /**
          * Determines whether the focus trap is enabled.
          * If true, focus will be restricted to the content within this component.
@@ -622,7 +642,15 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
     positionPopover() {
         if (!this.triggerElement)
             return;
-        const middleware = [shift({ padding: this.boundaryPadding })];
+        const middleware = [
+            shift({
+                boundary: !this.boundary || this.boundary === 'clippingAncestors'
+                    ? 'clippingAncestors'
+                    : Array.from(document.querySelectorAll(this.boundary)),
+                rootBoundary: this.boundaryRoot,
+                padding: this.boundaryPadding,
+            }),
+        ];
         let popoverOffset = this.offset;
         if (this.flip) {
             middleware.push(flip());
@@ -730,9 +758,17 @@ __decorate([
     property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
 ], Popover.prototype, "offset", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'boundary' }),
+    __metadata("design:type", String)
+], Popover.prototype, "boundary", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'boundary-root' }),
+    __metadata("design:type", String)
+], Popover.prototype, "boundaryRoot", void 0);
 __decorate([
     property({ type: Number, reflect: true, attribute: 'boundary-padding' }),
-    __metadata("design:type", Number)
+    __metadata("design:type", Object)
 ], Popover.prototype, "boundaryPadding", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'focus-trap' }),

package/dist/components/popover/popover.constants.d.ts

@@ -28,7 +28,9 @@ declare const DEFAULTS: {
     readonly TRIGGER: "click";
     readonly COLOR: "tonal";
     readonly OFFSET: 4;
-    readonly BOUNDARY_PADDING: 16;
+    readonly BOUNDARY: "clippingAncestors";
+    readonly BOUNDARY_ROOT: "viewport";
+    readonly BOUNDARY_PADDING: 0;
     readonly VISIBLE: false;
     readonly ARROW: false;
     readonly CLOSE_BUTTON: false;

package/dist/components/popover/popover.constants.js

@@ -29,7 +29,9 @@ const DEFAULTS = {
     TRIGGER: TRIGGER.CLICK,
     COLOR: COLOR.TONAL,
     OFFSET: 4,
-    BOUNDARY_PADDING: 16,
+    BOUNDARY: 'clippingAncestors',
+    BOUNDARY_ROOT: 'viewport',
+    BOUNDARY_PADDING: 0,
     VISIBLE: false,
     ARROW: false,
     CLOSE_BUTTON: false,