@progress/kendo-react-popup 4.13.0-dev.202111300702 → 4.13.0

package/dist/es/models/PopupSettings.d.ts

@@ -4,10 +4,13 @@ import { Align } from './Align';
 import { OpenEvent, CloseEvent } from './Events';
 import { Offset } from './Offset';
 import { PopupAnimation } from './PopupAnimation';
+import { Margin } from './Margin';
+import { PositionMode } from './PositionMode';
+import { PopupSettings as PopupSettingsBase } from '@progress/kendo-popup-common';
 /**
  * @hidden
  */
-export interface PopupSettings {
+export interface PopupSettings extends PopupSettingsBase {
     /**
      * Controls the Popup animation ([see example]({% slug animations_popup %})). By default, the opening and closing animations are enabled.
      */
@@ -16,22 +19,51 @@ export interface PopupSettings {
      * Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
      */
     anchor?: HTMLElement | null;
-    /**
-     * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
-     */
-    anchorAlign?: Align;
     /**
      * Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
      */
     appendTo?: HTMLElement | null;
+    /**
+     * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
+     */
+    anchorAlign?: Align;
     /**
      * Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
      */
     collision?: Collision;
+    /**
+     * Configures the margin value that will be added to the popup dimensions
+     * in pixels and leaves a blank space between the popup and the anchor.
+     */
+    margin?: Margin;
+    /**
+     * Specifies the position mode of the component. By default, the Popup uses fixed positioning.
+     * To make the Popup acquire absolute positioning, set this option to `absolute`.
+     *
+     * > If you need to support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
+     */
+    positionMode?: PositionMode;
+    /**
+     * Used to set the document scale when using a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
+     *
+     * The document or container scale is required to compute the popup position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE. See [Support for Document Scale]({% slug documentscale_popup %}).
+     *
+     * > Using this token is not necessary for user-applied browser zoom.
+     *
+     */
+    scale?: number;
     /**
      * Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
      */
     popupAlign?: Align;
+    /**
+     * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
+     */
+    offset?: Offset;
+    /**
+     * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
+     */
+    popupClass?: string | Array<string>;
     /**
      * Specifies a list of CSS classes that will be added to the Popup element.
      */
@@ -40,18 +72,10 @@ export interface PopupSettings {
      * Specifies the id that will be added to the Popup element.
      */
     id?: string;
-    /**
-     * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
-     */
-    popupClass?: string | Array<string>;
     /**
      * Represents the styles that are applied to the Popup.
      */
     style?: React.CSSProperties;
-    /**
-     * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
-     */
-    offset?: Offset;
     /**
      * Fires after the Popup is opened and the opening animation ends.
      */

package/dist/es/models/PositionMode.d.ts

@@ -0,0 +1,5 @@
+import { PositionMode as PositionModeBase } from '@progress/kendo-popup-common';
+/**
+ * The type which defines all possible position modes of the Popup.
+ */
+export declare type PositionMode = PositionModeBase;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-popup',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1638254077,
+    publishDate: 1638879960,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/util.d.ts

@@ -1,16 +1,4 @@
-import { ElementRect, OffsetPosition } from '@progress/kendo-popup-common';
-/**
- * @hidden
- */
-export declare const eitherRect: (rect: ElementRect, offset: OffsetPosition) => ElementRect;
-/**
- * @hidden
- */
-export declare const replaceOffset: (rect: ElementRect, offset: OffsetPosition) => ElementRect;
-/**
- * @hidden
- */
-export declare const removeStackingOffset: (rect: ElementRect, stackingOffset: ElementRect) => ElementRect;
+import { OffsetPosition } from '@progress/kendo-popup-common';
 /**
  * @hidden
  */
@@ -19,26 +7,10 @@ export declare const isDifferentOffset: (oldOffset: OffsetPosition, newOffset: O
  * @hidden
  */
 export declare const hasBoundingRect: (elem: HTMLElement) => boolean;
-/**
- * @hidden
- */
-export declare const OVERFLOW_REGEXP: RegExp;
-/**
- * @hidden
- */
-export declare const scrollableParents: (element: HTMLElement) => any[];
 /**
  * @hidden
  */
 export declare const FRAME_DURATION: number;
-/**
- * @hidden
- */
-export declare const HAS_RELATIVE_STACKING_CONTEXT: boolean;
-/**
- * @hidden
- */
-export declare const zIndex: (anchor: HTMLElement, container: HTMLElement) => number;
 /**
  * @hidden
  */
@@ -46,16 +18,6 @@ export declare const CollisionType: {
     fit: string;
     flip: string;
 };
-/**
- * @hidden
- */
-export declare const AlignPoint: {
-    left: string;
-    center: string;
-    right: string;
-    bottom: string;
-    top: string;
-};
 /**
  * @hidden
  */

package/dist/es/util.js

@@ -1,44 +1,3 @@
-import { parents, siblingContainer } from '@progress/kendo-popup-common';
-import { canUseDOM, hasRelativeStackingContext } from '@progress/kendo-react-common';
-/**
- * @hidden
- */
-export var eitherRect = function (rect, offset) {
-    if (!rect) {
-        return { height: 0, left: offset.left, top: offset.top, width: 0 };
-    }
-    return rect;
-};
-/**
- * @hidden
- */
-export var replaceOffset = function (rect, offset) {
-    if (!offset) {
-        return rect;
-    }
-    var result = {
-        height: rect.height,
-        left: offset.left,
-        top: offset.top,
-        width: rect.width
-    };
-    return result;
-};
-/**
- * @hidden
- */
-export var removeStackingOffset = function (rect, stackingOffset) {
-    if (!stackingOffset) {
-        return rect;
-    }
-    var result = {
-        height: rect.height,
-        left: rect.left - stackingOffset.left,
-        top: rect.top - stackingOffset.top,
-        width: rect.width
-    };
-    return result;
-};
 /**
  * @hidden
  */
@@ -51,61 +10,10 @@ export var isDifferentOffset = function (oldOffset, newOffset) {
  * @hidden
  */
 export var hasBoundingRect = function (elem) { return !!elem.getBoundingClientRect; };
-/**
- * @hidden
- */
-export var OVERFLOW_REGEXP = /auto|scroll/;
-/**
- * @hidden
- */
-var overflowStyle = function (element) {
-    var styles = window.getComputedStyle(element);
-    return "" + styles.overflow + styles.overflowX + styles.overflowY;
-};
-/**
- * @hidden
- */
-export var scrollableParents = function (element) {
-    var parentElements = [];
-    if (!canUseDOM) {
-        return parentElements;
-    }
-    var parent = element.parentElement;
-    while (parent) {
-        if (OVERFLOW_REGEXP.test(overflowStyle(parent))) {
-            parentElements.push(parent);
-        }
-        parent = parent.parentElement;
-    }
-    parentElements.push(window);
-    return parentElements;
-};
 /**
  * @hidden
  */
 export var FRAME_DURATION = 1000 / 60; // 1000ms divided by 60fps
-/**
- * @hidden
- */
-export var HAS_RELATIVE_STACKING_CONTEXT = hasRelativeStackingContext();
-/**
- * @hidden
- */
-export var zIndex = function (anchor, container) {
-    if (!anchor || !canUseDOM) {
-        return null;
-    }
-    var sibling = siblingContainer(anchor, container);
-    if (!sibling) {
-        return null;
-    }
-    var result = [anchor].concat(parents(anchor, sibling)).reduce(function (index, p) {
-        var zIndexStyle = p.style.zIndex || window.getComputedStyle(p).zIndex;
-        var current = parseInt(zIndexStyle, 10);
-        return current > index ? current : index;
-    }, 0);
-    return result ? (result + 1) : null;
-};
 /**
  * @hidden
  */
@@ -113,16 +21,6 @@ export var CollisionType = {
     fit: 'fit',
     flip: 'flip'
 };
-/**
- * @hidden
- */
-export var AlignPoint = {
-    left: 'left',
-    center: 'center',
-    right: 'right',
-    bottom: 'bottom',
-    top: 'top'
-};
 /**
  * @hidden
  */

package/dist/npm/Popup.d.ts

@@ -66,6 +66,12 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
             openDuration: PropTypes.Requireable<number>;
             closeDuration: PropTypes.Requireable<number>;
         }>>;
+        margin: PropTypes.Requireable<PropTypes.InferProps<{
+            horizontal: PropTypes.Requireable<number>;
+            vertical: PropTypes.Requireable<number>;
+        }>>;
+        positionMode: PropTypes.Requireable<string>;
+        scale: PropTypes.Requireable<number>;
     };
     /**
      * @hidden
@@ -89,14 +95,20 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
         };
         animate: boolean;
         show: boolean;
+        margin: {
+            horizontal: number;
+            vertical: number;
+        };
+        positionMode: string;
     };
+    /**
+     * @hidden
+     */
+    static contextType: React.Context<number>;
     /**
      * @hidden
      */
     readonly state: PopupState;
-    private _alignService;
-    private _positionService;
-    private _domService;
     private _flipped;
     private _scrollableParents;
     private _popup;
@@ -147,5 +159,6 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private attachRepositionHandlers;
     private detachRepositionHandlers;
     private reposition;
+    private getCurrentZIndex;
 }
 export {};

package/dist/npm/Popup.js

@@ -29,12 +29,11 @@ var ReactDOM = require("react-dom");
 var PropTypes = require("prop-types");
 var animation_1 = require("./animation");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_popup_common_1 = require("@progress/kendo-popup-common");
 var util_1 = require("./util");
-var alignService_1 = require("./services/alignService");
-var domService_1 = require("./services/domService");
-var positionService_1 = require("./services/positionService");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("./package-metadata");
+var DEFAULT_POPUP_ZINDEX = 100;
+var ZINDEX_POPUP_STEP = 1;
 function isEquivalent(a, b) {
     if (a === b) {
         return true;
@@ -90,36 +89,30 @@ var Popup = /** @class */ (function (_super) {
             _this.setState({ current: Status.shown, previous: _this.state.current });
         };
         _this.setPosition = function (popup) {
-            var _a = _this.props, anchorAlign = _a.anchorAlign, popupAlign = _a.popupAlign, collision = _a.collision, offset = _a.offset, anchor = _a.anchor;
-            var popupContent = popup.firstElementChild;
-            var _b = getComputedStyle(popupContent), contentWidth = _b.width, contentHeight = _b.height;
-            // The absolute position prevents appearing of a scrollbar which could move the anchor element and breaks the positioning.
-            popupContent.style.position = 'absolute';
-            // Width and height are required since absolute position breaks the element sizing.
-            popupContent.style.width = contentWidth;
-            popupContent.style.height = contentHeight;
-            var alignedOffset = _this._alignService.alignElement({
+            var _a = _this.props, anchorAlign = _a.anchorAlign, popupAlign = _a.popupAlign, collision = _a.collision, offset = _a.offset, anchor = _a.anchor, margin = _a.margin, scale = _a.scale, positionMode = _a.positionMode;
+            popup.style.top = '0px';
+            popup.style.left = '-10000px';
+            var alignedOffset = kendo_popup_common_1.alignElement({
                 anchor: anchor,
-                element: popupContent,
+                element: popup,
                 elementAlign: popupAlign,
                 anchorAlign: anchorAlign,
-                offset: offset
+                offset: offset,
+                margin: margin,
+                positionMode: positionMode,
+                scale: scale
             });
-            var position = _this._positionService.positionElement({
+            var position = kendo_popup_common_1.positionElement({
                 anchor: anchor,
                 anchorAlign: anchorAlign,
                 collisions: collision,
-                element: popupContent,
+                element: popup,
                 currentLocation: alignedOffset,
-                elementAlign: popupAlign
+                elementAlign: popupAlign,
+                margin: _this.props.margin
             });
-            if (position.offset) {
-                popup.style.top = position.offset.top + 'px';
-                popup.style.left = position.offset.left + 'px';
-                popupContent.style.position = '';
-                popupContent.style.width = '';
-                popupContent.style.height = '';
-            }
+            popup.style.top = position.offset.top + 'px';
+            popup.style.left = position.offset.left + 'px';
             _this._flipped = position.flipped;
         };
         _this.onOpened = function () {
@@ -152,10 +145,10 @@ var Popup = /** @class */ (function (_super) {
                 _this.props.onClose.call(undefined, { target: _this });
             }
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-        _this._domService = new domService_1.DOMService();
-        _this._alignService = new alignService_1.AlignService(_this._domService);
-        _this._positionService = new positionService_1.PositionService(_this._domService);
+        _this.getCurrentZIndex = function () {
+            return _this.context ? _this.context + ZINDEX_POPUP_STEP : DEFAULT_POPUP_ZINDEX;
+        };
+        kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
         _this.reposition = util_1.throttle(_this.reposition.bind(_this), util_1.FRAME_DURATION);
         return _this;
     }
@@ -231,7 +224,7 @@ var Popup = /** @class */ (function (_super) {
      */
     Popup.prototype.render = function () {
         var _this = this;
-        var _a = this.props, children = _a.children, className = _a.className, popupClass = _a.popupClass, show = _a.show, id = _a.id;
+        var _a = this.props, children = _a.children, className = _a.className, popupClass = _a.popupClass, show = _a.show, id = _a.id, positionMode = _a.positionMode;
         var appendTo = this.props.appendTo ?
             this.props.appendTo :
             kendo_react_common_1.canUseDOM ?
@@ -240,12 +233,14 @@ var Popup = /** @class */ (function (_super) {
         if (this.state.current === Status.reposition && this.state.previous === Status.shown && this._popup) {
             this.setPosition(this._popup);
         }
-        var style = Object.assign({}, { position: 'absolute' }, this.props.style || {});
+        var style = Object.assign({}, { position: positionMode }, this.props.style || {});
         var closing = this.state.current === Status.hiding;
         if ((show || closing) && appendTo) {
-            var popup = (React.createElement("div", { className: kendo_react_common_1.classNames(ANIMATION_CONTAINER, ANIMATION_CONTAINER_RELATIVE, className), id: id, ref: function (e) { return _this._popup = e; }, style: style },
-                React.createElement("div", { className: kendo_react_common_1.classNames(popupClass, K_POPUP, ANIMATION_CONTAINER_CHILD), style: { transitionDelay: '0ms' } }, children)));
-            return ReactDOM.createPortal(popup, appendTo);
+            var currentZIndex = this.getCurrentZIndex();
+            var popupElement = (React.createElement(kendo_react_common_1.ZIndexContext.Provider, { value: currentZIndex },
+                React.createElement("div", { className: kendo_react_common_1.classNames(ANIMATION_CONTAINER, ANIMATION_CONTAINER_RELATIVE, className), id: id, ref: function (e) { return _this._popup = e; }, style: __assign({ zIndex: currentZIndex }, style) },
+                    React.createElement("div", { className: kendo_react_common_1.classNames(popupClass, K_POPUP, ANIMATION_CONTAINER_CHILD), style: { transitionDelay: '0ms' } }, children))));
+            return ReactDOM.createPortal(popupElement, appendTo);
         }
         return null;
     };
@@ -271,7 +266,7 @@ var Popup = /** @class */ (function (_super) {
     Popup.prototype.attachRepositionHandlers = function (element) {
         var _this = this;
         this.detachRepositionHandlers();
-        this._scrollableParents = this._domService.scrollableParents(this.props.anchor || element);
+        this._scrollableParents = kendo_popup_common_1.domUtils.scrollableParents(this.props.anchor || element);
         this._scrollableParents.map(function (p) { return p.addEventListener('scroll', _this.reposition); });
         window.addEventListener('resize', this.reposition);
     };
@@ -319,26 +314,26 @@ var Popup = /** @class */ (function (_super) {
         }),
         anchorAlign: PropTypes.shape({
             horizontal: PropTypes.oneOf([
-                util_1.AlignPoint.left,
-                util_1.AlignPoint.center,
-                util_1.AlignPoint.right
+                kendo_popup_common_1.AlignPoint.left,
+                kendo_popup_common_1.AlignPoint.center,
+                kendo_popup_common_1.AlignPoint.right
             ]),
             vertical: PropTypes.oneOf([
-                util_1.AlignPoint.top,
-                util_1.AlignPoint.center,
-                util_1.AlignPoint.bottom
+                kendo_popup_common_1.AlignPoint.top,
+                kendo_popup_common_1.AlignPoint.center,
+                kendo_popup_common_1.AlignPoint.bottom
             ])
         }),
         popupAlign: PropTypes.shape({
             horizontal: PropTypes.oneOf([
-                util_1.AlignPoint.left,
-                util_1.AlignPoint.center,
-                util_1.AlignPoint.right
+                kendo_popup_common_1.AlignPoint.left,
+                kendo_popup_common_1.AlignPoint.center,
+                kendo_popup_common_1.AlignPoint.right
             ]),
             vertical: PropTypes.oneOf([
-                util_1.AlignPoint.top,
-                util_1.AlignPoint.center,
-                util_1.AlignPoint.bottom
+                kendo_popup_common_1.AlignPoint.top,
+                kendo_popup_common_1.AlignPoint.center,
+                kendo_popup_common_1.AlignPoint.bottom
             ])
         }),
         offset: PropTypes.shape({
@@ -356,7 +351,16 @@ var Popup = /** @class */ (function (_super) {
                 openDuration: PropTypes.number,
                 closeDuration: PropTypes.number
             })
-        ])
+        ]),
+        margin: PropTypes.shape({
+            horizontal: PropTypes.number,
+            vertical: PropTypes.number
+        }),
+        positionMode: PropTypes.oneOf([
+            'fixed',
+            'absolute'
+        ]),
+        scale: PropTypes.number
     };
     /**
      * @hidden
@@ -367,18 +371,26 @@ var Popup = /** @class */ (function (_super) {
             vertical: util_1.CollisionType.flip
         },
         anchorAlign: {
-            horizontal: util_1.AlignPoint.left,
-            vertical: util_1.AlignPoint.bottom
+            horizontal: kendo_popup_common_1.AlignPoint.left,
+            vertical: kendo_popup_common_1.AlignPoint.bottom
         },
         popupAlign: {
-            horizontal: util_1.AlignPoint.left,
-            vertical: util_1.AlignPoint.top
+            horizontal: kendo_popup_common_1.AlignPoint.left,
+            vertical: kendo_popup_common_1.AlignPoint.top
         },
         offset: DEFAULT_OFFSET,
         animate: true,
-        // appendTo: document.body,
-        show: false
+        show: false,
+        margin: {
+            horizontal: 0,
+            vertical: 0
+        },
+        positionMode: 'absolute'
     };
+    /**
+     * @hidden
+     */
+    Popup.contextType = kendo_react_common_1.ZIndexContext;
     return Popup;
 }(React.Component));
 exports.Popup = Popup;

package/dist/npm/models/Align.d.ts

@@ -1,7 +1,8 @@
+import { AlignStrategy } from '@progress/kendo-popup-common';
 /**
  * Defines the horizontal and vertical aligning point of the Popup.
  */
-export interface Align {
+export interface Align extends AlignStrategy {
     /**
      * Defines the possible horizontal point values that are relative to the anchor or the Popup.
      *

package/dist/npm/models/Margin.d.ts

@@ -0,0 +1,14 @@
+import { MarginSettings } from '@progress/kendo-popup-common';
+/**
+ * Defines the horizontal and the vertical margin offset of the component.
+ */
+export interface Margin extends MarginSettings {
+    /**
+     * Defines the possible horizontal margin value.
+     */
+    horizontal: number;
+    /**
+     * Defines the possible vertical margin value.
+     */
+    vertical: number;
+}

package/dist/npm/models/Offset.d.ts

@@ -1,7 +1,8 @@
+import { OffsetPosition } from '@progress/kendo-popup-common';
 /**
  * The offset position of the Popup.
  */
-export interface Offset {
+export interface Offset extends OffsetPosition {
     /**
      * Defines the top position of the Popup.
      */

package/dist/npm/models/PopupSettings.d.ts

@@ -4,10 +4,13 @@ import { Align } from './Align';
 import { OpenEvent, CloseEvent } from './Events';
 import { Offset } from './Offset';
 import { PopupAnimation } from './PopupAnimation';
+import { Margin } from './Margin';
+import { PositionMode } from './PositionMode';
+import { PopupSettings as PopupSettingsBase } from '@progress/kendo-popup-common';
 /**
  * @hidden
  */
-export interface PopupSettings {
+export interface PopupSettings extends PopupSettingsBase {
     /**
      * Controls the Popup animation ([see example]({% slug animations_popup %})). By default, the opening and closing animations are enabled.
      */
@@ -16,22 +19,51 @@ export interface PopupSettings {
      * Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
      */
     anchor?: HTMLElement | null;
-    /**
-     * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
-     */
-    anchorAlign?: Align;
     /**
      * Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
      */
     appendTo?: HTMLElement | null;
+    /**
+     * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
+     */
+    anchorAlign?: Align;
     /**
      * Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
      */
     collision?: Collision;
+    /**
+     * Configures the margin value that will be added to the popup dimensions
+     * in pixels and leaves a blank space between the popup and the anchor.
+     */
+    margin?: Margin;
+    /**
+     * Specifies the position mode of the component. By default, the Popup uses fixed positioning.
+     * To make the Popup acquire absolute positioning, set this option to `absolute`.
+     *
+     * > If you need to support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
+     */
+    positionMode?: PositionMode;
+    /**
+     * Used to set the document scale when using a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
+     *
+     * The document or container scale is required to compute the popup position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE. See [Support for Document Scale]({% slug documentscale_popup %}).
+     *
+     * > Using this token is not necessary for user-applied browser zoom.
+     *
+     */
+    scale?: number;
     /**
      * Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
      */
     popupAlign?: Align;
+    /**
+     * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
+     */
+    offset?: Offset;
+    /**
+     * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
+     */
+    popupClass?: string | Array<string>;
     /**
      * Specifies a list of CSS classes that will be added to the Popup element.
      */
@@ -40,18 +72,10 @@ export interface PopupSettings {
      * Specifies the id that will be added to the Popup element.
      */
     id?: string;
-    /**
-     * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
-     */
-    popupClass?: string | Array<string>;
     /**
      * Represents the styles that are applied to the Popup.
      */
     style?: React.CSSProperties;
-    /**
-     * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
-     */
-    offset?: Offset;
     /**
      * Fires after the Popup is opened and the opening animation ends.
      */