@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/baseui/popover/popover.js

@@ -0,0 +1,368 @@
+import { __assign, __extends } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "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.
+*/
+import * as React from 'react';
+import FocusLock, { MoveFocusInside } from 'react-focus-lock';
+import { getOverride, getOverrideProps } from '../helpers/overrides';
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, ANIMATE_OUT_TIME, ANIMATE_IN_TIME, POPOVER_MARGIN, } from './constants';
+import { Layer, TetherBehavior } from '../layer';
+import { Arrow as StyledArrow, Body as StyledBody, Inner as StyledInner, Hidden } from './styled-components';
+import { fromPopperPlacement } from './utils';
+import defaultProps from './default-props';
+import { useUID } from 'react-uid';
+var __DEV__ = process.env.NODE_ENV !== 'production';
+function getDefaultState(props) {
+    return {
+        isAnimating: false,
+        arrowOffset: { left: 0, top: 0 },
+        popoverOffset: { left: 0, top: 0 },
+        placement: props.placement,
+        isMounted: false,
+        isLayerMounted: false,
+        autoFocusAfterPositioning: false,
+    };
+}
+var PopoverInner = /** @class */ (function (_super) {
+    __extends(PopoverInner, _super);
+    function PopoverInner() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.anchorRef = React.createRef();
+        _this.popperRef = React.createRef();
+        _this.arrowRef = React.createRef();
+        /* eslint-enable react/sort-comp */
+        /**
+         * Yes our "Stateless" popover still has state. This is private state that
+         * customers shouldn't have to manage themselves, such as positioning and
+         * other internal flags for managing animation states.
+         */
+        // @ts-ignore
+        _this.state = getDefaultState(_this.props);
+        _this.animateIn = function () {
+            if (_this.props.isOpen) {
+                _this.setState({ isAnimating: true });
+            }
+        };
+        _this.animateOut = function () {
+            if (!_this.props.isOpen) {
+                _this.setState({ isAnimating: true });
+                // Remove the popover from the DOM after animation finishes
+                _this.animateOutCompleteTimer = setTimeout(function () {
+                    _this.setState({
+                        isAnimating: false,
+                        // Reset to ideal placement specified in props
+                        // @ts-ignore
+                        placement: _this.props.placement,
+                    });
+                }, _this.props.animateOutTime || ANIMATE_OUT_TIME);
+            }
+        };
+        _this.onAnchorClick = function (e) {
+            if (_this.props.onClick) {
+                _this.props.onClick(e);
+            }
+        };
+        _this.onAnchorMouseEnter = function (e) {
+            // First clear any existing close timers, this ensures that the user can
+            // move their mouse from the popover back to anchor without it hiding
+            if (_this.onMouseLeaveTimer) {
+                clearTimeout(_this.onMouseLeaveTimer);
+            }
+            _this.triggerOnMouseEnterWithDelay(e);
+        };
+        _this.onAnchorMouseLeave = function (e) {
+            // Clear any existing open timer, otherwise popover could be stuck open
+            if (_this.onMouseEnterTimer) {
+                clearTimeout(_this.onMouseEnterTimer);
+            }
+            _this.triggerOnMouseLeaveWithDelay(e);
+        };
+        _this.onPopoverMouseEnter = function () {
+            if (_this.onMouseLeaveTimer) {
+                clearTimeout(_this.onMouseLeaveTimer);
+            }
+        };
+        _this.onPopoverMouseLeave = function (e) {
+            _this.triggerOnMouseLeaveWithDelay(e);
+        };
+        _this.onPopperUpdate = function (normalizedOffsets, data) {
+            var placement = fromPopperPlacement(data.placement) || PLACEMENT.top;
+            _this.setState({
+                // @ts-ignore
+                arrowOffset: normalizedOffsets.arrow,
+                popoverOffset: normalizedOffsets.popper,
+                placement: placement,
+            });
+            // Now that element has been positioned, we can animate it in
+            _this.animateInTimer = setTimeout(_this.animateIn, ANIMATE_IN_TIME);
+            return data;
+        };
+        _this.triggerOnMouseLeave = function (e) {
+            if (_this.props.onMouseLeave) {
+                _this.props.onMouseLeave(e);
+            }
+        };
+        _this.triggerOnMouseEnter = function (e) {
+            if (_this.props.onMouseEnter) {
+                _this.props.onMouseEnter(e);
+            }
+        };
+        _this.onDocumentClick = function (evt) {
+            var target = evt.composedPath ? evt.composedPath()[0] : evt.target;
+            var popper = _this.popperRef.current;
+            var anchor = _this.anchorRef.current;
+            // Ignore document click if it came from popover or anchor
+            if (!popper || popper === target || (target instanceof Node && popper.contains(target))) {
+                return;
+            }
+            if (!anchor || anchor === target || (target instanceof Node && anchor.contains(target))) {
+                return;
+            }
+            if (_this.props.onClickOutside) {
+                _this.props.onClickOutside(evt);
+            }
+        };
+        return _this;
+    }
+    PopoverInner.prototype.componentDidMount = function () {
+        this.setState({ isMounted: true });
+    };
+    PopoverInner.prototype.componentDidUpdate = function (prevProps, prevState) {
+        this.init(prevProps, prevState);
+        if (this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip &&
+            this.props.autoFocus &&
+            !this.state.autoFocusAfterPositioning &&
+            this.popperRef.current !== null &&
+            this.popperRef.current.getBoundingClientRect().top > 0) {
+            // eslint-disable-next-line react/no-did-update-set-state -- conditional setState
+            this.setState({ autoFocusAfterPositioning: true });
+        }
+        if (__DEV__) {
+            if (!this.anchorRef.current) {
+                // eslint-disable-next-line no-console -- logging error in dev mode
+                console.warn("[baseui][Popover] 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");
+            }
+        }
+    };
+    PopoverInner.prototype.init = function (prevProps, prevState) {
+        if (this.props.isOpen !== prevProps.isOpen ||
+            this.state.isMounted !== prevState.isMounted ||
+            this.state.isLayerMounted !== prevState.isLayerMounted) {
+            // Transition from closed to open.
+            if (this.props.isOpen && this.state.isLayerMounted) {
+                // Clear any existing timers (like previous animateOutCompleteTimer)
+                this.clearTimers();
+                return;
+            }
+            // Transition from open to closed.
+            if (!this.props.isOpen && prevProps.isOpen) {
+                this.animateOutTimer = setTimeout(this.animateOut, 20);
+            }
+        }
+    };
+    PopoverInner.prototype.componentWillUnmount = function () {
+        this.clearTimers();
+    };
+    PopoverInner.prototype.clearTimers = function () {
+        [
+            this.animateInTimer,
+            this.animateOutTimer,
+            this.animateOutCompleteTimer,
+            this.onMouseEnterTimer,
+            this.onMouseLeaveTimer,
+        ].forEach(function (timerId) {
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+        });
+    };
+    PopoverInner.prototype.triggerOnMouseLeaveWithDelay = function (e) {
+        var _this = this;
+        var onMouseLeaveDelay = this.props.onMouseLeaveDelay;
+        if (onMouseLeaveDelay) {
+            this.onMouseLeaveTimer = setTimeout(function () { return _this.triggerOnMouseLeave(e); }, onMouseLeaveDelay);
+            return;
+        }
+        this.triggerOnMouseLeave(e);
+    };
+    PopoverInner.prototype.triggerOnMouseEnterWithDelay = function (e) {
+        var _this = this;
+        var onMouseEnterDelay = this.props.onMouseEnterDelay;
+        if (onMouseEnterDelay) {
+            this.onMouseEnterTimer = setTimeout(function () { return _this.triggerOnMouseEnter(e); }, onMouseEnterDelay);
+            return;
+        }
+        this.triggerOnMouseEnter(e);
+    };
+    PopoverInner.prototype.isClickTrigger = function () {
+        return this.props.triggerType === TRIGGER_TYPE.click;
+    };
+    PopoverInner.prototype.isHoverTrigger = function () {
+        return this.props.triggerType === TRIGGER_TYPE.hover;
+    };
+    PopoverInner.prototype.isAccessibilityTypeMenu = function () {
+        return this.props.accessibilityType === ACCESSIBILITY_TYPE.menu;
+    };
+    PopoverInner.prototype.isAccessibilityTypeTooltip = function () {
+        return this.props.accessibilityType === ACCESSIBILITY_TYPE.tooltip;
+    };
+    PopoverInner.prototype.getAnchorIdAttr = function () {
+        var popoverId = this.getPopoverIdAttr();
+        return popoverId ? "".concat(popoverId, "__anchor") : null;
+    };
+    PopoverInner.prototype.getPopoverIdAttr = function () {
+        return this.props.id || null;
+    };
+    PopoverInner.prototype.getAnchorProps = function () {
+        var isOpen = this.props.isOpen;
+        var anchorProps = {
+            ref: this.anchorRef,
+        };
+        var popoverId = this.getPopoverIdAttr();
+        if (this.isAccessibilityTypeMenu()) {
+            var relationAttr = this.isClickTrigger() ? 'aria-controls' : 'aria-owns';
+            anchorProps[relationAttr] = isOpen ? popoverId : null;
+            anchorProps['aria-haspopup'] = true;
+            anchorProps['aria-expanded'] = Boolean(isOpen);
+        }
+        else if (this.isAccessibilityTypeTooltip()) {
+            anchorProps.id = this.getAnchorIdAttr();
+            anchorProps['aria-describedby'] = isOpen ? popoverId : null;
+        }
+        if (this.isHoverTrigger()) {
+            anchorProps.onMouseEnter = this.onAnchorMouseEnter;
+            anchorProps.onMouseLeave = this.onAnchorMouseLeave;
+            // Make it focusable too
+            anchorProps.onBlur = this.props.onBlur;
+            anchorProps.onFocus = this.props.onFocus;
+        }
+        else {
+            anchorProps.onClick = this.onAnchorClick;
+            // Make it focusable too
+            if (this.props.onBlur) {
+                anchorProps.onBlur = this.props.onBlur;
+            }
+            if (this.props.onFocus) {
+                anchorProps.onFocus = this.props.onFocus;
+            }
+        }
+        return anchorProps;
+    };
+    PopoverInner.prototype.getPopoverBodyProps = function () {
+        var bodyProps = {};
+        var popoverId = this.getPopoverIdAttr();
+        if (this.isAccessibilityTypeMenu()) {
+            // @ts-ignore
+            bodyProps.id = popoverId;
+        }
+        else if (this.isAccessibilityTypeTooltip()) {
+            // @ts-ignore
+            bodyProps.id = popoverId;
+            bodyProps.role = 'tooltip';
+        }
+        if (this.isHoverTrigger()) {
+            bodyProps.onMouseEnter = this.onPopoverMouseEnter;
+            bodyProps.onMouseLeave = this.onPopoverMouseLeave;
+        }
+        return bodyProps;
+    };
+    PopoverInner.prototype.getSharedProps = function () {
+        var _a = this.props, isOpen = _a.isOpen, showArrow = _a.showArrow, _b = _a.popoverMargin, popoverMargin = _b === void 0 ? POPOVER_MARGIN : _b;
+        var _c = this.state, isAnimating = _c.isAnimating, arrowOffset = _c.arrowOffset, popoverOffset = _c.popoverOffset, placement = _c.placement;
+        return {
+            $showArrow: !!showArrow,
+            $arrowOffset: arrowOffset,
+            $popoverOffset: popoverOffset,
+            // @ts-ignore
+            $placement: placement,
+            $isAnimating: isAnimating,
+            $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
+            $isOpen: isOpen,
+            $popoverMargin: popoverMargin,
+            $isHoverTrigger: this.isHoverTrigger(),
+        };
+    };
+    PopoverInner.prototype.getAnchorFromChildren = function () {
+        var children = this.props.children;
+        var childArray = React.Children.toArray(children);
+        if (__DEV__) {
+            if (childArray.length !== 1) {
+                // eslint-disable-next-line no-console -- logging error in dev mode
+                console.error("[baseui] Exactly 1 child must be passed to Popover/Tooltip, found ".concat(childArray.length, " children"));
+            }
+        }
+        return childArray[0];
+    };
+    PopoverInner.prototype.renderAnchor = function () {
+        var anchor = this.getAnchorFromChildren();
+        if (!anchor) {
+            return null;
+        }
+        var isValidElement = React.isValidElement(anchor);
+        var anchorProps = this.getAnchorProps();
+        if (typeof anchor === 'object' && isValidElement) {
+            return React.cloneElement(anchor, anchorProps);
+        }
+        return (
+        // @ts-ignore
+        _jsx("span", __assign({}, anchorProps, { children: anchor }), "popover-anchor"));
+    };
+    PopoverInner.prototype.renderPopover = function (renderedContent) {
+        var _a = this.props, showArrow = _a.showArrow, _b = _a.overrides, overrides = _b === void 0 ? {} : _b;
+        var ArrowOverride = overrides.Arrow, BodyOverride = overrides.Body, InnerOverride = overrides.Inner;
+        var Arrow = getOverride(ArrowOverride) || StyledArrow;
+        var Body = getOverride(BodyOverride) || StyledBody;
+        var Inner = getOverride(InnerOverride) || StyledInner;
+        var sharedProps = this.getSharedProps();
+        var bodyProps = this.getPopoverBodyProps();
+        return (_jsxs(Body, __assign({ ref: this.popperRef, "data-baseweb": this.props['data-baseweb'] || 'popover' }, bodyProps, sharedProps, getOverrideProps(BodyOverride), { children: [showArrow ? (_jsx(Arrow, __assign({ ref: this.arrowRef }, sharedProps, getOverrideProps(ArrowOverride)), "popover-arrow")) : null, _jsx(Inner, __assign({}, sharedProps, getOverrideProps(InnerOverride), { children: renderedContent }), void 0)] }), "popover-body"));
+    };
+    PopoverInner.prototype.renderContent = function () {
+        var content = this.props.content;
+        return typeof content === 'function' ? content() : content;
+    };
+    PopoverInner.prototype.render = function () {
+        var _this = this;
+        var mountedAndOpen = this.state.isMounted && (this.props.isOpen || this.state.isAnimating);
+        var rendered = [this.renderAnchor()];
+        var renderedContent = mountedAndOpen || this.props.renderAll ? this.renderContent() : null;
+        var defaultPopperOptions = {
+            modifiers: {
+                preventOverflow: { enabled: !this.props.ignoreBoundary, padding: 0 },
+            },
+        };
+        // Only render popover on the browser (portals aren't supported server-side)
+        if (renderedContent) {
+            if (mountedAndOpen) {
+                rendered.push(_jsx(Layer, __assign({ mountNode: this.props.mountNode, onEscape: this.props.onEsc, onDocumentClick: this.isHoverTrigger() ? undefined : this.onDocumentClick, isHoverLayer: this.isHoverTrigger(), onMount: function () { return _this.setState({ isLayerMounted: true }); }, onUnmount: function () { return _this.setState({ isLayerMounted: false }); } }, { children: _jsx(TetherBehavior, __assign({ anchorRef: this.anchorRef.current, arrowRef: this.arrowRef.current, popperRef: this.popperRef.current, 
+                        // Remove the `ignoreBoundary` prop in the next major version
+                        // and have it replaced with the TetherBehavior props overrides
+                        popperOptions: __assign(__assign({}, defaultPopperOptions), this.props.popperOptions), onPopperUpdate: this.onPopperUpdate, placement: this.state.placement, repositionOnResize: this.props.repositionOnResize }, { children: this.props.focusLock && this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip ? (_jsx(FocusLock, __assign({ disabled: !this.props.focusLock, noFocusGuards: false, 
+                            // see popover-focus-loop.scenario.js for why hover cannot return focus
+                            returnFocus: !this.isHoverTrigger() && this.props.returnFocus, autoFocus: this.state.autoFocusAfterPositioning, 
+                            // Allow focus to escape when UI is within an iframe
+                            crossFrame: false, focusOptions: this.props.focusOptions }, { children: this.renderPopover(renderedContent) }), void 0)) : (_jsx(MoveFocusInside, __assign({ disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning }, { children: this.renderPopover(renderedContent) }), void 0)) }), void 0) }), "new-layer"));
+            }
+            else {
+                rendered.push(_jsx(Hidden, { children: renderedContent }, "hidden-layer"));
+            }
+        }
+        return rendered;
+    };
+    PopoverInner.defaultProps = defaultProps;
+    return PopoverInner;
+}(React.PureComponent));
+// Remove when Popover is converted to a functional component.
+var Popover = function (props) {
+    var innerRef = props.innerRef;
+    var gID = useUID();
+    return (_jsx(PopoverInner, __assign({ id: props.id || gID, 
+        // @ts-expect-error
+        ref: innerRef }, props), void 0));
+};
+Popover.defaultProps = defaultProps;
+export default Popover;

package/esm/baseui/popover/stateful-container.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { State, StatefulPopoverContainerProps, StateChangeType } from './types';
+declare class StatefulContainer extends React.Component<StatefulPopoverContainerProps, State> {
+    static defaultProps: Partial<StatefulPopoverContainerProps>;
+    state: {
+        isOpen: boolean;
+    };
+    onBlur: (e: React.FocusEvent) => void;
+    onClick: (e: React.SyntheticEvent) => void;
+    onClickOutside: () => void;
+    onEsc: () => void;
+    onFocus: (e: React.FocusEvent) => void;
+    onMouseEnter: (e: React.MouseEvent) => void;
+    onMouseLeave: (e: React.MouseEvent) => void;
+    onContentClose: () => void;
+    open(): void;
+    close(): void;
+    internalSetState(type: StateChangeType, changes: State): void;
+    /**
+     * If user passed a content render prop, we want to give them a
+     * callback to close the Popover. This is useful in any case where
+     * a dev wants to manually close the popover based on some action.
+     *
+     * One simple example is a Popover with a "Dismiss" button in it:
+     * <StatefulPopover content={({close}) => <button onClick={close}>Dismiss</button>}>
+     *  Click me
+     * </StatefulPopover>
+     */
+    renderContent: () => React.ReactNode;
+    render(): React.ReactNode;
+}
+export default StatefulContainer;

package/esm/baseui/popover/stateful-container.js

@@ -0,0 +1,172 @@
+import { __assign, __extends } from "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.
+*/
+import * as React from 'react';
+import { ACCESSIBILITY_TYPE, PLACEMENT, STATE_CHANGE_TYPE, TRIGGER_TYPE, POPOVER_MARGIN } from './constants';
+import { isFocusVisible } from '../utils/focusVisible';
+var defaultStateReducer = function (type, nextState) { return nextState; };
+var StatefulContainer = /** @class */ (function (_super) {
+    __extends(StatefulContainer, _super);
+    function StatefulContainer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = __assign({ isOpen: false }, _this.props.initialState);
+        _this.onBlur = function (e) {
+            if (_this.props.onBlur) {
+                _this.props.onBlur(e);
+            }
+            if (_this.props.focusLock || _this.props.autoFocus) {
+                return;
+            }
+            _this.close();
+        };
+        _this.onClick = function (e) {
+            if (_this.props.onClick) {
+                _this.props.onClick(e);
+            }
+            if (_this.state.isOpen) {
+                _this.close();
+            }
+            else {
+                _this.open();
+            }
+        };
+        _this.onClickOutside = function () {
+            _this.close();
+        };
+        _this.onEsc = function () {
+            _this.close();
+        };
+        _this.onFocus = function (e) {
+            if (_this.props.onFocus) {
+                _this.props.onFocus(e);
+            }
+            if (isFocusVisible(e)) {
+                _this.open();
+            }
+        };
+        _this.onMouseEnter = function (e) {
+            if (_this.props.onMouseEnter) {
+                _this.props.onMouseEnter(e);
+            }
+            _this.open();
+        };
+        _this.onMouseLeave = function (e) {
+            if (_this.props.onMouseLeave) {
+                _this.props.onMouseLeave(e);
+            }
+            _this.close();
+        };
+        _this.onContentClose = function () {
+            _this.close();
+        };
+        /**
+         * If user passed a content render prop, we want to give them a
+         * callback to close the Popover. This is useful in any case where
+         * a dev wants to manually close the popover based on some action.
+         *
+         * One simple example is a Popover with a "Dismiss" button in it:
+         * <StatefulPopover content={({close}) => <button onClick={close}>Dismiss</button>}>
+         *  Click me
+         * </StatefulPopover>
+         */
+        _this.renderContent = function () {
+            var content = _this.props.content;
+            if (typeof content === 'function') {
+                return content({ close: _this.onContentClose });
+            }
+            return content;
+        };
+        return _this;
+    }
+    StatefulContainer.prototype.open = function () {
+        this.internalSetState(STATE_CHANGE_TYPE.open, {
+            isOpen: true,
+        });
+        if (this.props.onOpen) {
+            this.props.onOpen();
+        }
+    };
+    StatefulContainer.prototype.close = function () {
+        this.internalSetState(STATE_CHANGE_TYPE.close, {
+            isOpen: false,
+        });
+        if (this.props.onClose) {
+            this.props.onClose();
+        }
+    };
+    StatefulContainer.prototype.internalSetState = function (type, changes) {
+        var stateReducer = this.props.stateReducer;
+        if (typeof stateReducer !== 'function') {
+            this.setState(changes);
+            return;
+        }
+        this.setState(function (prevState) { return stateReducer(type, changes, prevState); });
+    };
+    StatefulContainer.prototype.render = function () {
+        var _a = this.props, accessibilityType = _a.accessibilityType, autoFocus = _a.autoFocus, animateOutTime = _a.animateOutTime, dismissOnClickOutside = _a.dismissOnClickOutside, dismissOnEsc = _a.dismissOnEsc, focusLock = _a.focusLock, ignoreBoundary = _a.ignoreBoundary, mountNode = _a.mountNode, onBlur = _a.onBlur, onClick = _a.onClick, onFocus = _a.onFocus, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onMouseEnterDelay = _a.onMouseEnterDelay, onMouseLeaveDelay = _a.onMouseLeaveDelay, overrides = _a.overrides, placement = _a.placement, popperOptions = _a.popperOptions, renderAll = _a.renderAll, returnFocus = _a.returnFocus, showArrow = _a.showArrow, triggerType = _a.triggerType, popoverMargin = _a.popoverMargin, focusOptions = _a.focusOptions, repositionOnResize = _a.repositionOnResize;
+        var popoverProps = {
+            accessibilityType: accessibilityType,
+            animateOutTime: animateOutTime,
+            autoFocus: autoFocus,
+            content: this.renderContent,
+            focusLock: focusLock,
+            ignoreBoundary: ignoreBoundary,
+            isOpen: this.state.isOpen,
+            mountNode: mountNode,
+            onBlur: onBlur,
+            onClick: onClick,
+            onFocus: onFocus,
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            onMouseEnterDelay: onMouseEnterDelay,
+            onMouseLeaveDelay: onMouseLeaveDelay,
+            overrides: overrides,
+            placement: placement,
+            popperOptions: popperOptions,
+            renderAll: renderAll,
+            returnFocus: returnFocus,
+            showArrow: showArrow,
+            triggerType: triggerType,
+            popoverMargin: popoverMargin,
+            focusOptions: focusOptions,
+            repositionOnResize: repositionOnResize,
+        };
+        if (dismissOnClickOutside) {
+            popoverProps.onClickOutside = this.onClickOutside;
+        }
+        if (dismissOnEsc) {
+            popoverProps.onEsc = this.onEsc;
+        }
+        if (triggerType === TRIGGER_TYPE.hover) {
+            popoverProps.onBlur = this.onBlur;
+            popoverProps.onFocus = this.onFocus;
+            popoverProps.onMouseEnter = this.onMouseEnter;
+            popoverProps.onMouseLeave = this.onMouseLeave;
+        }
+        else {
+            popoverProps.onClick = this.onClick;
+        }
+        return this.props.children(popoverProps);
+    };
+    StatefulContainer.defaultProps = {
+        accessibilityType: ACCESSIBILITY_TYPE.menu,
+        ignoreBoundary: false,
+        overrides: {},
+        onMouseEnterDelay: 200,
+        onMouseLeaveDelay: 200,
+        placement: PLACEMENT.auto,
+        popperOptions: {},
+        showArrow: false,
+        triggerType: TRIGGER_TYPE.click,
+        dismissOnClickOutside: true,
+        dismissOnEsc: true,
+        stateReducer: defaultStateReducer,
+        popoverMargin: POPOVER_MARGIN,
+    };
+    return StatefulContainer;
+}(React.Component));
+export default StatefulContainer;

package/esm/baseui/popover/stateful-popover.d.ts

@@ -0,0 +1,19 @@
+import type { StatefulPopoverProps } from './types';
+declare function StatefulPopover(props: StatefulPopoverProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StatefulPopover {
+    var defaultProps: {
+        accessibilityType: "menu";
+        ignoreBoundary: boolean;
+        overrides: {};
+        onMouseEnterDelay: number;
+        onMouseLeaveDelay: number;
+        placement: "auto";
+        showArrow: boolean;
+        triggerType: "click";
+        dismissOnClickOutside: boolean;
+        dismissOnEsc: boolean;
+        stateReducer: (_: any, nextState: any) => any;
+        popoverMargin: number;
+    };
+}
+export default StatefulPopover;

package/esm/baseui/popover/stateful-popover.js

@@ -0,0 +1,25 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, POPOVER_MARGIN } from './constants';
+import StatefulContainer from './stateful-container';
+import Popover from './popover';
+function StatefulPopover(props) {
+    var children = props.children, restProps = __rest(props, ["children"]);
+    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (popoverProps) { return _jsx(Popover, __assign({}, popoverProps, { children: children }), void 0); } }), void 0));
+}
+StatefulPopover.defaultProps = {
+    accessibilityType: ACCESSIBILITY_TYPE.menu,
+    ignoreBoundary: false,
+    overrides: {},
+    onMouseEnterDelay: 200,
+    onMouseLeaveDelay: 200,
+    placement: PLACEMENT.auto,
+    showArrow: false,
+    triggerType: TRIGGER_TYPE.click,
+    dismissOnClickOutside: true,
+    dismissOnEsc: true,
+    // @ts-ignore
+    stateReducer: function (_, nextState) { return nextState; },
+    popoverMargin: POPOVER_MARGIN,
+};
+export default StatefulPopover;

package/esm/baseui/popover/styled-components.d.ts

@@ -0,0 +1,27 @@
+import type { ArrowStylePropsArg, BodyStylePropsArg } from './types';
+import type { StyleObject } from 'styletron-standard';
+/**
+ * Main popover container element that gets positioned next to the anchor
+ */
+export declare function getBodyStyles(_: any, props: BodyStylePropsArg): StyleObject;
+export declare const Body: import("../../style/styled").StyledComponent;
+/**
+ * Arrow shown between the popover and the anchor element
+ */
+export declare function getArrowStyles(_: any, props: ArrowStylePropsArg): StyleObject;
+export declare const Arrow: import("../../style/styled").StyledComponent;
+/**
+ * Extra div that holds the popover content. This extra element
+ * is needed for the arrow–the arrow is just a 45deg rotated div,
+ * and rendering this extra element on top with a solid background
+ * clips the part of the arrow that extends into the popover.
+ */
+export declare function getInnerStyles(): StyleObject;
+export declare const Inner: import("../../style/styled").StyledComponent;
+/**
+ * A drop-in component that provides the recommended padding
+ * for popovers. Mostly a convenience for users so they don't
+ * have to define this themselves.
+ */
+export declare const Padding: import("../../style/styled").StyledComponent;
+export declare const Hidden: import("../../style/styled").StyledComponent;