@progress/kendo-react-popup 4.14.0-dev.202201140931 → 4.14.1-dev.202201181415

package/dist/es/Popup.js

@@ -1,16 +1,3 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -23,372 +10,25 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import * as PropTypes from 'prop-types';
-import { slide } from './animation';
-import { classNames, canUseDOM, ZIndexContext, validatePackage } from '@progress/kendo-react-common';
-import { AlignPoint, alignElement, domUtils, positionElement } from '@progress/kendo-popup-common';
-import { CollisionType, throttle, FRAME_DURATION } from './util';
-import { packageMetadata } from './package-metadata';
-var DEFAULT_POPUP_ZINDEX = 100;
-var ZINDEX_POPUP_STEP = 1;
-function isEquivalent(a, b) {
-    if (a === b) {
-        return true;
-    }
-    if (!!a !== !!b) {
-        return false;
-    }
-    var aProps = Object.getOwnPropertyNames(a);
-    var bProps = Object.getOwnPropertyNames(b);
-    if (aProps.length !== bProps.length) {
-        return false;
-    }
-    for (var i = 0; i < aProps.length; i++) {
-        var propName = aProps[i];
-        if (a[propName] !== b[propName]) {
-            return false;
-        }
-    }
-    return true;
-}
-var DEFAULT_OFFSET = {
-    left: -1000,
-    top: 0
-};
-var Status;
-(function (Status) {
-    Status["hiding"] = "hiding";
-    Status["hidden"] = "hidden";
-    Status["showing"] = "showing";
-    Status["shown"] = "shown";
-    Status["reposition"] = "reposition";
-})(Status || (Status = {}));
-var ANIMATION_CONTAINER = 'k-animation-container';
-var ANIMATION_CONTAINER_SHOWN = 'k-animation-container-shown';
-var ANIMATION_CONTAINER_RELATIVE = 'k-animation-container-relative';
-var ANIMATION_CONTAINER_CHILD = 'k-child-animation-container';
-var K_POPUP = 'k-popup';
+import { PopupWithoutContext } from './PopupWithoutContext';
 /**
- * @hidden
+ * The PopupPropsContext. It allows to configure the Popup props from a wrapper component.
+ *
+ * @example
+ * ```jsx-no-run
+ *  <PopupPropsContext.Provider value={props => ({ ...props, appendTo: document.querySelector('myPopupsContainer') })}>
+ *      <DropDownList />
+ *      <Editor />
+ *  </PopupPropsContext.Provider>
+ * ```
  */
-var Popup = /** @class */ (function (_super) {
-    __extends(Popup, _super);
-    function Popup(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this.state = { current: Status.hidden, previous: Status.hidden, props: {} };
-        _this._popup = null;
-        _this.show = function (popup) {
-            _this.setPosition(popup);
-            _this.animate(popup.firstChild, 'enter', _this.onOpened);
-            _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, margin = _a.margin, scale = _a.scale, positionMode = _a.positionMode;
-            popup.style.top = '0px';
-            popup.style.left = '-10000px';
-            var alignedOffset = alignElement({
-                anchor: anchor,
-                element: popup,
-                elementAlign: popupAlign,
-                anchorAlign: anchorAlign,
-                offset: offset,
-                margin: margin,
-                positionMode: positionMode,
-                scale: scale
-            });
-            var position = positionElement({
-                anchor: anchor,
-                anchorAlign: anchorAlign,
-                collisions: collision,
-                element: popup,
-                currentLocation: alignedOffset,
-                elementAlign: popupAlign,
-                margin: _this.props.margin
-            });
-            popup.style.top = position.offset.top + 'px';
-            popup.style.left = position.offset.left + 'px';
-            _this._flipped = position.flipped;
-        };
-        _this.onOpened = function () {
-            var element = _this._popup;
-            if (!element) {
-                return;
-            }
-            if (_this.props.show) {
-                element.classList.add(ANIMATION_CONTAINER_SHOWN);
-            }
-            _this.attachRepositionHandlers(element);
-            if (_this.props.onOpen) {
-                _this.props.onOpen.call(undefined, { target: _this });
-            }
-        };
-        _this.animate = function (element, type, callback) {
-            slide(element, _this._flipped ? 'up' : 'down', _this.animationDuration[type], type, callback);
-        };
-        _this.onClosing = function (popup) {
-            if (!_this.props.show) {
-                popup.classList.remove(ANIMATION_CONTAINER_SHOWN);
-            }
-            _this.detachRepositionHandlers();
-        };
-        _this.onClosed = function () {
-            if (_this.state.current === Status.hiding && _this.state.previous === Status.shown) {
-                _this.setState({ current: Status.hidden, previous: _this.state.current });
-            }
-            if (_this.props.onClose) {
-                _this.props.onClose.call(undefined, { target: _this });
-            }
-        };
-        _this.getCurrentZIndex = function () {
-            return _this.context ? _this.context + ZINDEX_POPUP_STEP : DEFAULT_POPUP_ZINDEX;
-        };
-        validatePackage(packageMetadata);
-        _this.reposition = throttle(_this.reposition.bind(_this), FRAME_DURATION);
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    Popup.getDerivedStateFromProps = function (props, state) {
-        var show = props.show, anchor = props.anchor, anchorAlign = props.anchorAlign, appendTo = props.appendTo, collision = props.collision, popupAlign = props.popupAlign, className = props.className, popupClass = props.popupClass, style = props.style, offset = props.offset, contentKey = props.contentKey;
-        var nextState = __assign({}, state, { props: {
-                show: show, anchor: anchor, anchorAlign: anchorAlign, appendTo: appendTo, collision: collision, popupAlign: popupAlign, className: className, popupClass: popupClass, style: style, offset: offset, contentKey: contentKey
-            } });
-        if (props.show) {
-            if (state.current === Status.hidden || state.current === Status.hiding) {
-                return __assign({}, nextState, { current: Status.showing, previous: state.current });
-            }
-            if (state.current === Status.showing) {
-                return __assign({}, nextState, { current: Status.shown, previous: state.current });
-            }
-            if (state.current === Status.shown &&
-                (!isEquivalent(offset, state.props.offset) ||
-                    !isEquivalent(anchorAlign, state.props.anchorAlign) ||
-                    !isEquivalent(appendTo, state.props.appendTo) ||
-                    !isEquivalent(collision, state.props.collision) ||
-                    !isEquivalent(popupAlign, state.props.popupAlign) ||
-                    !isEquivalent(style, state.props.style) ||
-                    anchor !== state.props.anchor ||
-                    popupClass !== state.props.popupClass ||
-                    className !== state.props.className)) {
-                return __assign({}, nextState, { current: Status.reposition, previous: state.current });
-            }
-            return nextState;
-        }
-        if (state.current === Status.hiding || state.current === Status.hidden) {
-            return __assign({}, nextState, { current: Status.hidden, previous: state.current });
-        }
-        return __assign({}, nextState, { current: Status.hiding, previous: state.current });
-    };
-    /**
-     * @hidden
-     */
-    Popup.prototype.componentDidUpdate = function (prevProps) {
-        if (this.state.current === Status.showing && this._popup) {
-            this.show(this._popup);
-        }
-        else if (this.state.current === Status.hiding && this._popup) {
-            this.onClosing(this._popup);
-            this.animate(this._popup.firstChild, 'exit', this.onClosed);
-        }
-        else if (this.state.current === Status.reposition && this.state.previous === Status.shown) {
-            this.setState({ current: Status.shown, previous: this.state.current });
-        }
-        else if (this.state.current === Status.shown &&
-            prevProps.contentKey !== this.props.contentKey && this._popup) {
-            this.setPosition(this._popup);
-        }
-    };
-    /**
-     * @hidden
-     */
-    Popup.prototype.componentDidMount = function () {
-        if (this.state.current === Status.showing && this._popup) {
-            this.show(this._popup);
-        }
-    };
-    /**
-     * @hidden
-     */
-    Popup.prototype.componentWillUnmount = function () {
-        this.detachRepositionHandlers();
-    };
-    /**
-     * @hidden
-     */
-    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, positionMode = _a.positionMode;
-        var appendTo = this.props.appendTo ?
-            this.props.appendTo :
-            canUseDOM ?
-                (this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body)
-                : undefined;
-        if (this.state.current === Status.reposition && this.state.previous === Status.shown && this._popup) {
-            this.setPosition(this._popup);
-        }
-        var style = Object.assign({}, { position: positionMode }, this.props.style || {});
-        var closing = this.state.current === Status.hiding;
-        if ((show || closing) && appendTo) {
-            var currentZIndex = this.getCurrentZIndex();
-            var popupElement = (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
-                React.createElement("div", { className: 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: classNames(popupClass, K_POPUP, ANIMATION_CONTAINER_CHILD), style: { transitionDelay: '0ms' } }, children))));
-            return ReactDOM.createPortal(popupElement, appendTo);
-        }
-        return null;
-    };
-    Object.defineProperty(Popup.prototype, "animationDuration", {
-        get: function () {
-            var animate = this.props.animate;
-            var enter = 0;
-            var exit = 0;
-            if (animate) {
-                if (animate === true) {
-                    enter = exit = 300;
-                }
-                else {
-                    enter = animate.openDuration || 0;
-                    exit = animate.closeDuration || 0;
-                }
-            }
-            return { enter: enter, exit: exit };
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Popup.prototype.attachRepositionHandlers = function (element) {
-        var _this = this;
-        this.detachRepositionHandlers();
-        this._scrollableParents = domUtils.scrollableParents(this.props.anchor || element);
-        this._scrollableParents.map(function (p) { return p.addEventListener('scroll', _this.reposition); });
-        window.addEventListener('resize', this.reposition);
-    };
-    Popup.prototype.detachRepositionHandlers = function () {
-        var _this = this;
-        if (this._scrollableParents) {
-            this._scrollableParents.map(function (p) { return p.removeEventListener('scroll', _this.reposition); });
-            this._scrollableParents = undefined;
-        }
-        window.removeEventListener('resize', this.reposition);
-    };
-    Popup.prototype.reposition = function () {
-        this.setState({ current: Status.reposition, previous: this.state.current });
-    };
-    /**
-     * @hidden
-     */
-    Popup.propTypes = {
-        anchor: function (props) {
-            var anchor = props.anchor;
-            if (anchor && typeof anchor.nodeType !== 'number') {
-                return new Error('Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.');
-            }
-            return null;
-        },
-        appendTo: function (props) {
-            var element = props.appendTo;
-            if (element && typeof element.nodeType !== 'number') {
-                return new Error('Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.');
-            }
-            return null;
-        },
-        className: PropTypes.string,
-        id: PropTypes.string,
-        popupClass: PropTypes.string,
-        collision: PropTypes.shape({
-            horizontal: PropTypes.oneOf([
-                CollisionType.fit,
-                CollisionType.flip
-            ]),
-            vertical: PropTypes.oneOf([
-                CollisionType.fit,
-                CollisionType.flip
-            ])
-        }),
-        anchorAlign: PropTypes.shape({
-            horizontal: PropTypes.oneOf([
-                AlignPoint.left,
-                AlignPoint.center,
-                AlignPoint.right
-            ]),
-            vertical: PropTypes.oneOf([
-                AlignPoint.top,
-                AlignPoint.center,
-                AlignPoint.bottom
-            ])
-        }),
-        popupAlign: PropTypes.shape({
-            horizontal: PropTypes.oneOf([
-                AlignPoint.left,
-                AlignPoint.center,
-                AlignPoint.right
-            ]),
-            vertical: PropTypes.oneOf([
-                AlignPoint.top,
-                AlignPoint.center,
-                AlignPoint.bottom
-            ])
-        }),
-        offset: PropTypes.shape({
-            left: PropTypes.number,
-            top: PropTypes.number
-        }),
-        children: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.node
-        ]),
-        show: PropTypes.bool,
-        animate: PropTypes.oneOfType([
-            PropTypes.bool,
-            PropTypes.shape({
-                openDuration: PropTypes.number,
-                closeDuration: PropTypes.number
-            })
-        ]),
-        margin: PropTypes.shape({
-            horizontal: PropTypes.number,
-            vertical: PropTypes.number
-        }),
-        positionMode: PropTypes.oneOf([
-            'fixed',
-            'absolute'
-        ]),
-        scale: PropTypes.number
-    };
-    /**
-     * @hidden
-     */
-    Popup.defaultProps = {
-        collision: {
-            horizontal: CollisionType.fit,
-            vertical: CollisionType.flip
-        },
-        anchorAlign: {
-            horizontal: AlignPoint.left,
-            vertical: AlignPoint.bottom
-        },
-        popupAlign: {
-            horizontal: AlignPoint.left,
-            vertical: AlignPoint.top
-        },
-        offset: DEFAULT_OFFSET,
-        animate: true,
-        show: false,
-        margin: {
-            horizontal: 0,
-            vertical: 0
-        },
-        positionMode: 'absolute'
-    };
-    /**
-     * @hidden
-     */
-    Popup.contextType = ZIndexContext;
-    return Popup;
-}(React.Component));
-export { Popup };
+export var PopupPropsContext = React.createContext(function (props) { return props; });
+/**
+ * The KendoReact Popup component.
+ */
+export var Popup = React.forwardRef(function (props, ref) {
+    var contextPropsCallback = React.useContext(PopupPropsContext);
+    var popupProps = contextPropsCallback.call(undefined, props);
+    return (React.createElement(PopupWithoutContext, __assign({ ref: ref }, popupProps)));
+});
+Popup.displayName = 'Popup';

package/dist/es/PopupWithoutContext.d.ts

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Offset } from './models/Offset';
+import { PopupProps } from './models/PopupProps';
+import { Align } from './models/Align';
+import { Collision } from './models/Collision';
+declare enum Status {
+    hiding = "hiding",
+    hidden = "hidden",
+    showing = "showing",
+    shown = "shown",
+    reposition = "reposition"
+}
+/**
+ * @hidden
+ */
+export interface PopupState {
+    current: Status;
+    previous: Status;
+    props: {
+        show?: boolean;
+        anchor?: HTMLElement;
+        anchorAlign?: Align;
+        appendTo?: HTMLElement;
+        collision?: Collision;
+        popupAlign?: Align;
+        className?: string | Array<string>;
+        popupClass?: string | Array<string>;
+        style?: React.CSSProperties;
+        offset?: Offset;
+        contentKey?: any;
+    };
+}
+/**
+ * @hidden
+ */
+export declare class PopupWithoutContext extends React.Component<PopupProps, PopupState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        anchor: (props: PopupProps) => Error;
+        appendTo: (props: PopupProps) => Error;
+        className: PropTypes.Requireable<string | object>;
+        id: PropTypes.Requireable<string>;
+        popupClass: PropTypes.Requireable<string | object>;
+        collision: PropTypes.Requireable<PropTypes.InferProps<{
+            horizontal: PropTypes.Requireable<string>;
+            vertical: PropTypes.Requireable<string>;
+        }>>;
+        anchorAlign: PropTypes.Requireable<PropTypes.InferProps<{
+            horizontal: PropTypes.Requireable<string>;
+            vertical: PropTypes.Requireable<string>;
+        }>>;
+        popupAlign: PropTypes.Requireable<PropTypes.InferProps<{
+            horizontal: PropTypes.Requireable<string>;
+            vertical: PropTypes.Requireable<string>;
+        }>>;
+        offset: PropTypes.Requireable<PropTypes.InferProps<{
+            left: PropTypes.Requireable<number>;
+            top: PropTypes.Requireable<number>;
+        }>>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        show: PropTypes.Requireable<boolean>;
+        animate: PropTypes.Requireable<boolean | PropTypes.InferProps<{
+            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>;
+        style: PropTypes.Requireable<object>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onPosition: PropTypes.Requireable<(...args: any[]) => any>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        collision: {
+            horizontal: string;
+            vertical: string;
+        };
+        anchorAlign: {
+            horizontal: string;
+            vertical: string;
+        };
+        popupAlign: {
+            horizontal: string;
+            vertical: string;
+        };
+        offset: {
+            left: number;
+            top: number;
+        };
+        animate: boolean;
+        show: boolean;
+        margin: {
+            horizontal: number;
+            vertical: number;
+        };
+        positionMode: string;
+    };
+    /**
+     * @hidden
+     */
+    static contextType: React.Context<number>;
+    /**
+     * @hidden
+     */
+    static displayName: string;
+    /**
+     * @hidden
+     */
+    readonly state: PopupState;
+    private _collisions;
+    private _scrollableParents;
+    private _popup;
+    constructor(props: PopupProps);
+    /**
+     * @hidden
+     */
+    static getDerivedStateFromProps(props: PopupProps, state: PopupState): {
+        props: {
+            show: boolean;
+            anchor: HTMLElement;
+            anchorAlign: Align;
+            appendTo: HTMLElement;
+            collision: Collision;
+            popupAlign: Align;
+            className: string | string[];
+            popupClass: string | string[] | {
+                [key: string]: boolean;
+            };
+            style: React.CSSProperties;
+            offset: Offset;
+            contentKey: any;
+        };
+        current: Status;
+        previous: Status;
+    };
+    /**
+     * @hidden
+     */
+    componentDidUpdate(prevProps: PopupProps): void;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    render(): React.ReactPortal;
+    private show;
+    private setPosition;
+    private onOpened;
+    private animate;
+    private onClosing;
+    private onClosed;
+    private readonly animationDuration;
+    private attachRepositionHandlers;
+    private detachRepositionHandlers;
+    private reposition;
+    private getCurrentZIndex;
+}
+export {};