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

package/dist/npm/Popup.d.ts

@@ -1,164 +1,23 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { Offset } from './models/Offset';
+import { PopupWithoutContext } from './PopupWithoutContext';
 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
+ * 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>
+ * ```
  */
-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;
-    };
+export declare const PopupPropsContext: React.Context<(props: PopupProps) => PopupProps>;
+export interface PopupHandle extends Pick<PopupWithoutContext, keyof PopupWithoutContext> {
 }
 /**
- * @hidden
+ * The KendoReact Popup component.
  */
-export declare class Popup extends React.Component<PopupProps, PopupState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        anchor: (props: PopupProps) => Error;
-        appendTo: (props: PopupProps) => Error;
-        className: PropTypes.Requireable<string>;
-        id: PropTypes.Requireable<string>;
-        popupClass: PropTypes.Requireable<string>;
-        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>;
-    };
-    /**
-     * @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
-     */
-    readonly state: PopupState;
-    private _flipped;
-    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[];
-            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 {};
+export declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<{}>>;
+/** @hidden */
+export declare type Popup = PopupHandle;

package/dist/npm/Popup.js

@@ -1,17 +1,4 @@
 "use strict";
-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++) {
@@ -25,372 +12,25 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-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 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;
-    }
-    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';
+var PopupWithoutContext_1 = require("./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 = kendo_popup_common_1.alignElement({
-                anchor: anchor,
-                element: popup,
-                elementAlign: popupAlign,
-                anchorAlign: anchorAlign,
-                offset: offset,
-                margin: margin,
-                positionMode: positionMode,
-                scale: scale
-            });
-            var position = kendo_popup_common_1.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) {
-            animation_1.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;
-        };
-        kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
-        _this.reposition = util_1.throttle(_this.reposition.bind(_this), util_1.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 :
-            kendo_react_common_1.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(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;
-    };
-    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 = 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);
-    };
-    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([
-                util_1.CollisionType.fit,
-                util_1.CollisionType.flip
-            ]),
-            vertical: PropTypes.oneOf([
-                util_1.CollisionType.fit,
-                util_1.CollisionType.flip
-            ])
-        }),
-        anchorAlign: PropTypes.shape({
-            horizontal: PropTypes.oneOf([
-                kendo_popup_common_1.AlignPoint.left,
-                kendo_popup_common_1.AlignPoint.center,
-                kendo_popup_common_1.AlignPoint.right
-            ]),
-            vertical: PropTypes.oneOf([
-                kendo_popup_common_1.AlignPoint.top,
-                kendo_popup_common_1.AlignPoint.center,
-                kendo_popup_common_1.AlignPoint.bottom
-            ])
-        }),
-        popupAlign: PropTypes.shape({
-            horizontal: PropTypes.oneOf([
-                kendo_popup_common_1.AlignPoint.left,
-                kendo_popup_common_1.AlignPoint.center,
-                kendo_popup_common_1.AlignPoint.right
-            ]),
-            vertical: PropTypes.oneOf([
-                kendo_popup_common_1.AlignPoint.top,
-                kendo_popup_common_1.AlignPoint.center,
-                kendo_popup_common_1.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: util_1.CollisionType.fit,
-            vertical: util_1.CollisionType.flip
-        },
-        anchorAlign: {
-            horizontal: kendo_popup_common_1.AlignPoint.left,
-            vertical: kendo_popup_common_1.AlignPoint.bottom
-        },
-        popupAlign: {
-            horizontal: kendo_popup_common_1.AlignPoint.left,
-            vertical: kendo_popup_common_1.AlignPoint.top
-        },
-        offset: DEFAULT_OFFSET,
-        animate: true,
-        show: false,
-        margin: {
-            horizontal: 0,
-            vertical: 0
-        },
-        positionMode: 'absolute'
-    };
-    /**
-     * @hidden
-     */
-    Popup.contextType = kendo_react_common_1.ZIndexContext;
-    return Popup;
-}(React.Component));
-exports.Popup = Popup;
+exports.PopupPropsContext = React.createContext(function (props) { return props; });
+/**
+ * The KendoReact Popup component.
+ */
+exports.Popup = React.forwardRef(function (props, ref) {
+    var contextPropsCallback = React.useContext(exports.PopupPropsContext);
+    var popupProps = contextPropsCallback.call(undefined, props);
+    return (React.createElement(PopupWithoutContext_1.PopupWithoutContext, __assign({ ref: ref }, popupProps)));
+});
+exports.Popup.displayName = 'Popup';