@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/baseui/layer/layer.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* global document */
+var React = (0, tslib_1.__importStar)(require("react"));
+var react_dom_1 = (0, tslib_1.__importDefault)(require("react-dom"));
+var style_1 = require("../../style");
+var layers_manager_1 = require("./layers-manager");
+// import { isServer } from '../../spacewebProvider';
+var Container = (0, style_1.styled)('div', 'absolute top-0 left-0 right-0', function (_, _a) {
+    var $zIndex = _a.$zIndex;
+    return ({
+        zIndex: $zIndex || null,
+    });
+});
+var LayerComponent = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(LayerComponent, _super);
+    function LayerComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.container = null;
+        // eslint-disable-next-line react/no-unused-state -- being used to trigger re-render
+        _this.state = { container: null };
+        _this.onEscape = function () {
+            if (_this.props.onEscape) {
+                _this.props.onEscape();
+            }
+        };
+        _this.onKeyDown = function (event) {
+            if (_this.props.onKeyDown) {
+                _this.props.onKeyDown(event);
+            }
+        };
+        _this.onKeyUp = function (event) {
+            if (_this.props.onKeyUp) {
+                _this.props.onKeyUp(event);
+            }
+        };
+        _this.onKeyPress = function (event) {
+            if (_this.props.onKeyPress) {
+                _this.props.onKeyPress(event);
+            }
+        };
+        _this.onDocumentClick = function (event) {
+            if (_this.props.onDocumentClick) {
+                _this.props.onDocumentClick(event);
+            }
+        };
+        return _this;
+    }
+    LayerComponent.prototype.componentDidMount = function () {
+        this.context.addEscapeHandler(this.onEscape);
+        this.context.addKeyDownHandler(this.onKeyDown);
+        this.context.addKeyUpHandler(this.onKeyUp);
+        this.context.addKeyPressHandler(this.onKeyPress);
+        if (!this.props.isHoverLayer) {
+            this.context.addDocClickHandler(this.onDocumentClick);
+        }
+        var _a = this.props, onMount = _a.onMount, mountNode = _a.mountNode, layersManagerHost = _a.host;
+        if (mountNode) {
+            onMount && onMount();
+            return;
+        }
+        // There was no LayersManager added if this.props.host === undefined.
+        // Use document.body is the case no LayersManager is used.
+        var hasLayersManager = layersManagerHost !== undefined;
+        if (process.env.NODE_ENV !== 'production') {
+            if (!hasLayersManager) {
+                console.warn('`LayersManager` was not found. This occurs if you are attempting to use a component requiring `Layer` without using the `BaseProvider` at the root of your app. Please visit https://baseweb.design/components/base-provider/ for more information');
+            }
+        }
+        var host = hasLayersManager ? layersManagerHost : document.body;
+        if (host) {
+            this.addContainer(host);
+        }
+    };
+    // @ts-ignore
+    LayerComponent.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, host = _a.host, mountNode = _a.mountNode;
+        if (mountNode) {
+            return;
+        }
+        if (host && host !== prevProps.host && prevProps.host === null) {
+            this.addContainer(host);
+        }
+        if (prevProps.isHoverLayer != this.props.isHoverLayer) {
+            if (this.props.isHoverLayer) {
+                this.context.removeDocClickHandler(this.onDocumentClick);
+            }
+            else {
+                this.context.addDocClickHandler(this.onDocumentClick);
+            }
+        }
+    };
+    LayerComponent.prototype.componentWillUnmount = function () {
+        this.context.removeEscapeHandler(this.onEscape);
+        this.context.removeKeyDownHandler(this.onKeyDown);
+        this.context.removeKeyUpHandler(this.onKeyUp);
+        this.context.removeKeyPressHandler(this.onKeyPress);
+        this.context.removeDocClickHandler(this.onDocumentClick);
+        if (this.props.onUnmount) {
+            this.props.onUnmount();
+        }
+        var host = this.props.host;
+        var container = this.container;
+        if (host && container) {
+            if (host.contains(container)) {
+                host.removeChild(container);
+            }
+        }
+    };
+    // @ts-ignore
+    LayerComponent.prototype.addContainer = function (host) {
+        var _a = this.props, index = _a.index, mountNode = _a.mountNode, onMount = _a.onMount;
+        // Do nothing if mountNode is provided
+        if (mountNode) {
+            return;
+        }
+        if (host) {
+            var container = host.ownerDocument.createElement('div');
+            // `host` is an DOM node, but not a React component
+            var sibling = typeof index === 'number' ? host.children[index] : null;
+            sibling ? host.insertBefore(container, sibling) : host.appendChild(container);
+            this.container = container;
+            // eslint-disable-next-line react/no-unused-state -- being used to trigger re-render
+            this.setState({ container: container }, function () {
+                onMount && onMount();
+            });
+        }
+    };
+    LayerComponent.prototype.render = function () {
+        var container = this.container;
+        var _a = this.props, children = _a.children, mountNode = _a.mountNode, zIndex = _a.zIndex;
+        // Only adding an additional wrapper when a layer has z-index to be set
+        var childrenToRender = zIndex ? (0, jsx_runtime_1.jsx)(Container, (0, tslib_1.__assign)({ "$zIndex": zIndex }, { children: children }), void 0) : children;
+        if (!layers_manager_1.isServer) {
+            if (mountNode) {
+                return react_dom_1.default.createPortal(childrenToRender, mountNode);
+            }
+            else if (container) {
+                return react_dom_1.default.createPortal(childrenToRender, container);
+            }
+            return null;
+        }
+        return null;
+    };
+    LayerComponent.contextType = layers_manager_1.LayersContext;
+    return LayerComponent;
+}(React.Component));
+function Layer(props) {
+    return (0, jsx_runtime_1.jsx)(layers_manager_1.Consumer, { children: function (_a) {
+            var host = _a.host, zIndex = _a.zIndex;
+            return (0, jsx_runtime_1.jsx)(LayerComponent, (0, tslib_1.__assign)({}, props, { host: host, zIndex: zIndex }), void 0);
+        } }, void 0);
+}
+exports.default = Layer;

package/baseui/layer/layers-manager.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { LayersManagerProps, LayersManagerState, LayersContextProps } from './types';
+export declare const isServer: boolean;
+export declare const LayersContext: React.Context<LayersContextProps>;
+export declare const Provider: React.Provider<LayersContextProps>;
+export declare const Consumer: React.Consumer<LayersContextProps>;
+export default class LayersManager extends React.Component<LayersManagerProps, LayersManagerState> {
+    host: React.RefObject<HTMLElement>;
+    containerRef: React.RefObject<any>;
+    constructor(props: LayersManagerProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onDocumentClick: (event: MouseEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onKeyUp: (event: KeyboardEvent) => void;
+    onKeyPress: (event: KeyboardEvent) => void;
+    onAddEscapeHandler: (escapeKeyHandler: () => unknown) => void;
+    onRemoveEscapeHandler: (escapeKeyHandler: () => unknown) => void;
+    onAddKeyDownHandler: (keyDownHandler: (event: KeyboardEvent) => void) => void;
+    onRemoveKeyDownHandler: (keyDownHandler: (event: KeyboardEvent) => void) => void;
+    onAddKeyUpHandler: (keyUpHandler: (event: KeyboardEvent) => void) => void;
+    onRemoveKeyUpHandler: (keyUpHandler: (event: KeyboardEvent) => void) => void;
+    onAddKeyPressHandler: (keyPressHandler: (event: KeyboardEvent) => void) => void;
+    onRemoveKeyPressHandler: (keyPressHandler: (event: KeyboardEvent) => void) => void;
+    onAddDocClickHandler: (docClickHandler: (event: MouseEvent) => void) => void;
+    onRemoveDocClickHandler: (docClickHandler: (event: MouseEvent) => void) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/baseui/layer/layers-manager.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Consumer = exports.Provider = exports.LayersContext = exports.isServer = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = (0, tslib_1.__importStar)(require("react"));
+var style_1 = require("../../style");
+var overrides_1 = require("../helpers/overrides");
+var focusVisible_1 = require("../utils/focusVisible");
+exports.isServer = typeof window === 'undefined';
+var StyledAppContainer = (0, style_1.styled)('div', {});
+var StyledLayersContainer = (0, style_1.styled)('div', {});
+var __DEV__ = process.env.NODE_ENV !== 'production';
+function defaultEventHandlerFn() {
+    if (__DEV__) {
+        console.warn('`LayersManager` was not found. This occurs if you are attempting to use a component requiring `Layer` without using the `BaseProvider` at the root of your app. Please visit https://baseweb.design/components/base-provider/ for more information');
+    }
+}
+exports.LayersContext = React.createContext({
+    addEscapeHandler: defaultEventHandlerFn,
+    removeEscapeHandler: defaultEventHandlerFn,
+    addKeyDownHandler: defaultEventHandlerFn,
+    removeKeyDownHandler: defaultEventHandlerFn,
+    addKeyUpHandler: defaultEventHandlerFn,
+    removeKeyUpHandler: defaultEventHandlerFn,
+    addKeyPressHandler: defaultEventHandlerFn,
+    removeKeyPressHandler: defaultEventHandlerFn,
+    addDocClickHandler: defaultEventHandlerFn,
+    removeDocClickHandler: defaultEventHandlerFn,
+    host: undefined,
+    zIndex: undefined,
+});
+exports.Provider = exports.LayersContext.Provider;
+exports.Consumer = exports.LayersContext.Consumer;
+var LayersManager = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(LayersManager, _super);
+    function LayersManager(props) {
+        var _this = _super.call(this, props) || this;
+        _this.host = React.createRef();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this.containerRef = React.createRef();
+        _this.onDocumentClick = function (event) {
+            var docClickHandler = _this.state.docClickHandlers[_this.state.docClickHandlers.length - 1];
+            if (docClickHandler) {
+                docClickHandler(event);
+            }
+        };
+        _this.onKeyDown = function (event) {
+            var keyDownHandler = _this.state.keyDownHandlers[_this.state.keyDownHandlers.length - 1];
+            if (keyDownHandler) {
+                keyDownHandler(event);
+            }
+        };
+        _this.onKeyUp = function (event) {
+            if (event.key === 'Escape') {
+                var escapeKeyHandler = _this.state.escapeKeyHandlers[_this.state.escapeKeyHandlers.length - 1];
+                if (escapeKeyHandler) {
+                    escapeKeyHandler();
+                }
+            }
+            var keyUpHandler = _this.state.keyUpHandlers[_this.state.keyUpHandlers.length - 1];
+            if (keyUpHandler) {
+                keyUpHandler(event);
+            }
+        };
+        _this.onKeyPress = function (event) {
+            var keyPressHandler = _this.state.keyPressHandlers[_this.state.keyPressHandlers.length - 1];
+            if (keyPressHandler) {
+                keyPressHandler(event);
+            }
+        };
+        _this.onAddEscapeHandler = function (escapeKeyHandler) {
+            _this.setState(function (prev) { return ({ escapeKeyHandlers: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(prev.escapeKeyHandlers), false), [escapeKeyHandler], false) }); });
+        };
+        _this.onRemoveEscapeHandler = function (escapeKeyHandler) {
+            _this.setState(function (prev) { return ({
+                escapeKeyHandlers: prev.escapeKeyHandlers.filter(function (handler) { return handler !== escapeKeyHandler; }),
+            }); });
+        };
+        _this.onAddKeyDownHandler = function (keyDownHandler) {
+            _this.setState(function (prev) { return ({ keyDownHandlers: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(prev.keyDownHandlers), false), [keyDownHandler], false) }); });
+        };
+        _this.onRemoveKeyDownHandler = function (keyDownHandler) {
+            _this.setState(function (prev) { return ({
+                keyDownHandlers: prev.keyDownHandlers.filter(function (handler) { return handler !== keyDownHandler; }),
+            }); });
+        };
+        _this.onAddKeyUpHandler = function (keyUpHandler) {
+            _this.setState(function (prev) { return ({ keyUpHandlers: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(prev.keyUpHandlers), false), [keyUpHandler], false) }); });
+        };
+        _this.onRemoveKeyUpHandler = function (keyUpHandler) {
+            _this.setState(function (prev) { return ({
+                keyUpHandlers: prev.keyUpHandlers.filter(function (handler) { return handler !== keyUpHandler; }),
+            }); });
+        };
+        _this.onAddKeyPressHandler = function (keyPressHandler) {
+            _this.setState(function (prev) { return ({ keyPressHandlers: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(prev.keyPressHandlers), false), [keyPressHandler], false) }); });
+        };
+        _this.onRemoveKeyPressHandler = function (keyPressHandler) {
+            _this.setState(function (prev) { return ({
+                keyPressHandlers: prev.keyPressHandlers.filter(function (handler) { return handler !== keyPressHandler; }),
+            }); });
+        };
+        _this.onAddDocClickHandler = function (docClickHandler) {
+            _this.setState(function (prev) { return ({ docClickHandlers: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(prev.docClickHandlers), false), [docClickHandler], false) }); });
+        };
+        _this.onRemoveDocClickHandler = function (docClickHandler) {
+            _this.setState(function (prev) { return ({
+                docClickHandlers: prev.docClickHandlers.filter(function (handler) { return handler !== docClickHandler; }),
+            }); });
+        };
+        _this.state = {
+            escapeKeyHandlers: [],
+            keyDownHandlers: [],
+            keyUpHandlers: [],
+            keyPressHandlers: [],
+            docClickHandlers: [],
+        };
+        return _this;
+    }
+    LayersManager.prototype.componentDidMount = function () {
+        this.forceUpdate();
+        (0, focusVisible_1.initFocusVisible)(this.containerRef.current);
+        if (!exports.isServer) {
+            document.addEventListener('keydown', this.onKeyDown);
+            document.addEventListener('keyup', this.onKeyUp);
+            document.addEventListener('keypress', this.onKeyPress);
+            // using mousedown event so that callback runs before events on children inside of the layer
+            document.addEventListener('mousedown', this.onDocumentClick);
+        }
+    };
+    LayersManager.prototype.componentWillUnmount = function () {
+        if (!exports.isServer) {
+            document.removeEventListener('keydown', this.onKeyDown);
+            document.removeEventListener('keyup', this.onKeyUp);
+            document.removeEventListener('keypress', this.onKeyPress);
+            document.removeEventListener('mousedown', this.onDocumentClick);
+        }
+    };
+    LayersManager.prototype.render = function () {
+        var _this = this;
+        var _a = this.props.overrides, overrides = _a === void 0 ? {} : _a;
+        var _b = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.AppContainer, StyledAppContainer), 2), AppContainer = _b[0], appContainerProps = _b[1];
+        var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(overrides.LayersContainer, StyledLayersContainer), 2), LayersContainer = _c[0], layersContainerProps = _c[1];
+        return ((0, jsx_runtime_1.jsx)(exports.Consumer, { children: function (_a) {
+                var host = _a.host;
+                if (__DEV__) {
+                    if (host !== undefined) {
+                        // eslint-disable-next-line no-console
+                        console.warn('There is a LayersManager already exists in your application. It is not recommended to have more than one LayersManager in an application.');
+                    }
+                }
+                return ((0, jsx_runtime_1.jsxs)(exports.Provider, (0, tslib_1.__assign)({ value: {
+                        host: host || _this.host.current,
+                        zIndex: _this.props.zIndex,
+                        addEscapeHandler: _this.onAddEscapeHandler,
+                        removeEscapeHandler: _this.onRemoveEscapeHandler,
+                        addKeyDownHandler: _this.onAddKeyDownHandler,
+                        removeKeyDownHandler: _this.onRemoveKeyDownHandler,
+                        addKeyUpHandler: _this.onAddKeyUpHandler,
+                        removeKeyUpHandler: _this.onRemoveKeyUpHandler,
+                        addKeyPressHandler: _this.onAddKeyPressHandler,
+                        removeKeyPressHandler: _this.onRemoveKeyPressHandler,
+                        addDocClickHandler: _this.onAddDocClickHandler,
+                        removeDocClickHandler: _this.onRemoveDocClickHandler,
+                    } }, { children: [(0, jsx_runtime_1.jsx)(AppContainer, (0, tslib_1.__assign)({}, appContainerProps, { ref: _this.containerRef }, { children: _this.props.children }), void 0), (0, jsx_runtime_1.jsx)(LayersContainer, (0, tslib_1.__assign)({}, layersContainerProps, { ref: _this.host }), void 0)] }), void 0));
+            } }, void 0));
+    };
+    return LayersManager;
+}(React.Component));
+exports.default = LayersManager;

package/baseui/layer/tether.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Popper from 'popper.js';
+import type { TetherProps, TetherState, PopperDataObject } from './types';
+declare class Tether extends React.Component<TetherProps, TetherState> {
+    static defaultProps: {
+        anchorRef: null;
+        onPopperUpdate: () => null;
+        placement: "auto";
+        popperRef: null;
+        popperOptions: {};
+    };
+    popper?: Popper;
+    popperHeight: number;
+    popperWidth: number;
+    anchorHeight: number;
+    anchorWidth: number;
+    resizeObserver: ResizeObserver | undefined;
+    state: {
+        isMounted: boolean;
+    };
+    defineResizeObserver: () => ResizeObserver;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TetherProps, prevState: TetherState): void;
+    componentWillUnmount(): void;
+    initializePopper(): void;
+    onPopperUpdate: (data: PopperDataObject) => void;
+    destroyPopover(): void;
+    render(): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;
+}
+export default Tether;

package/baseui/layer/tether.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var React = (0, tslib_1.__importStar)(require("react"));
+var popper_js_1 = (0, tslib_1.__importDefault)(require("popper.js"));
+var utils_1 = require("./utils");
+var constants_1 = require("./constants");
+var Tether = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(Tether, _super);
+    function Tether() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.popperHeight = 0;
+        _this.popperWidth = 0;
+        _this.anchorHeight = 0;
+        _this.anchorWidth = 0;
+        _this.state = {
+            isMounted: false,
+        };
+        _this.defineResizeObserver = function () {
+            return new window.ResizeObserver(function (entries) {
+                var shouldUpdate = false;
+                entries.forEach(function (entry) {
+                    var _a = entry.contentRect, width = _a.width, height = _a.height;
+                    if (entry.target === _this.props.anchorRef) {
+                        shouldUpdate = shouldUpdate || _this.anchorHeight !== height || _this.anchorWidth !== width;
+                        _this.anchorHeight = height;
+                        _this.anchorWidth = width;
+                    }
+                    else if (entry.target === _this.props.popperRef) {
+                        shouldUpdate = shouldUpdate || _this.popperHeight !== height || _this.popperWidth !== width;
+                        _this.popperHeight = height;
+                        _this.popperWidth = width;
+                    }
+                });
+                if (shouldUpdate && _this.popper) {
+                    _this.popper.scheduleUpdate();
+                }
+            });
+        };
+        _this.onPopperUpdate = function (data) {
+            var normalizedOffsets = {
+                popper: (0, utils_1.parsePopperOffset)(data.offsets.popper),
+                arrow: data.offsets.arrow ? (0, utils_1.parsePopperOffset)(data.offsets.arrow) : { top: 0, left: 0 },
+            };
+            _this.props.onPopperUpdate(normalizedOffsets, data);
+        };
+        return _this;
+    }
+    Tether.prototype.componentDidMount = function () {
+        this.setState({ isMounted: true });
+        if (!this.props.repositionOnResize) {
+            return;
+        }
+        this.resizeObserver = this.defineResizeObserver();
+        if (this.props.anchorRef) {
+            this.resizeObserver.observe(this.props.anchorRef);
+        }
+        if (this.props.popperRef) {
+            this.resizeObserver.observe(this.props.popperRef);
+        }
+    };
+    Tether.prototype.componentDidUpdate = function (prevProps, prevState) {
+        if (this.props.repositionOnResize) {
+            var hasRefChanged = this.props.popperRef !== prevProps.popperRef || this.props.anchorRef !== prevProps.anchorRef;
+            // reassign targetElement if ref of element changes
+            if (this.resizeObserver && hasRefChanged) {
+                this.resizeObserver.disconnect();
+                if (this.props.anchorRef) {
+                    this.resizeObserver.observe(this.props.anchorRef);
+                }
+                if (this.props.popperRef) {
+                    this.resizeObserver.observe(this.props.popperRef);
+                }
+            }
+        }
+        else {
+            if (this.props.anchorRef) {
+                var _a = this.props.anchorRef.getBoundingClientRect(), height = _a.height, width = _a.width;
+                if (this.anchorHeight !== height || this.anchorWidth !== width) {
+                    this.anchorHeight = height;
+                    this.anchorWidth = width;
+                    this.popper && this.popper.scheduleUpdate();
+                }
+            }
+            if (this.props.popperRef) {
+                var _b = this.props.popperRef.getBoundingClientRect(), height = _b.height, width = _b.width;
+                if (this.popperHeight !== height || this.popperWidth !== width) {
+                    this.popperHeight = height;
+                    this.popperWidth = width;
+                    this.popper && this.popper.scheduleUpdate();
+                }
+            }
+        }
+        if (this.props.popperRef) {
+            if (this.state.isMounted !== prevState.isMounted) {
+                if (!this.props.anchorRef) {
+                    if (process.env.NODE_ENV !== 'production') {
+                        console.warn("[baseui][TetherBehavior] ref has not been passed to the Popper's anchor element.\n              See how to pass the ref to an anchor element in the Popover example\n              https://baseweb.design/components/popover/#anchor-ref-handling-example");
+                    }
+                }
+                else {
+                    this.initializePopper();
+                }
+            }
+        }
+    };
+    Tether.prototype.componentWillUnmount = function () {
+        this.destroyPopover();
+        this.resizeObserver && this.resizeObserver.disconnect();
+    };
+    Tether.prototype.initializePopper = function () {
+        var _a = this.props, placement = _a.placement, popperOptions = _a.popperOptions;
+        var modifiers = popperOptions.modifiers, restOptions = (0, tslib_1.__rest)(popperOptions, ["modifiers"]);
+        if (!this.props.anchorRef || !this.props.popperRef)
+            return;
+        this.popper = new popper_js_1.default(this.props.anchorRef, this.props.popperRef, (0, tslib_1.__assign)({ 
+            // Recommended placement (popper may ignore if it causes a viewport overflow, etc)
+            placement: (0, utils_1.toPopperPlacement)(placement), modifiers: (0, tslib_1.__assign)({ 
+                // Passing the arrow ref will measure the arrow when calculating styles
+                arrow: {
+                    element: this.props.arrowRef,
+                    enabled: !!this.props.arrowRef,
+                }, computeStyle: {
+                    // Make popper use top/left instead of transform translate, this is because
+                    // we use transform for animations and we dont want them to conflict
+                    gpuAcceleration: false,
+                }, applyStyle: {
+                    // Disable default styling modifier, we'll apply styles on our own
+                    enabled: false,
+                }, applyReactStyle: {
+                    enabled: true,
+                    fn: this.onPopperUpdate,
+                    order: 900,
+                }, preventOverflow: { enabled: true } }, modifiers) }, restOptions));
+    };
+    Tether.prototype.destroyPopover = function () {
+        if (this.popper) {
+            this.popper.destroy();
+            delete this.popper;
+        }
+    };
+    Tether.prototype.render = function () {
+        return this.props.children || null;
+    };
+    Tether.defaultProps = {
+        // @ts-ignore
+        anchorRef: null,
+        // @ts-ignore
+        onPopperUpdate: function () { return null; },
+        placement: constants_1.TETHER_PLACEMENT.auto,
+        // @ts-ignore
+        popperRef: null,
+        popperOptions: {},
+    };
+    return Tether;
+}(React.Component));
+exports.default = Tether;