@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/baseui/modal/modal.js

@@ -9,17 +9,16 @@ 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_focus_lock_1 = (0, tslib_1.__importDefault)(require("react-focus-lock"));
-var locale_1 = require("../locale");
-var overrides_1 = require("../helpers/overrides");
+var React = tslib_1.__importStar(require("react"));
+var react_focus_lock_1 = tslib_1.__importDefault(require("react-focus-lock"));
+var overrides_1 = require("../../overrides");
 var layer_1 = require("../layer");
 var constants_1 = require("./constants");
 var styled_components_1 = require("./styled-components");
 var close_icon_1 = require("./close-icon");
 var focusVisible_1 = require("../utils/focusVisible");
 var Modal = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Modal, _super);
+    tslib_1.__extends(Modal, _super);
     function Modal() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.mounted = false;
@@ -30,6 +29,7 @@ var Modal = /** @class */ (function (_super) {
         _this.rootRef = React.createRef();
         _this.state = {
             isVisible: false,
+            // eslint-disable-next-line react/no-unused-state -- legacy baseui code that I REALLY don't want to touch
             mounted: false,
             isFocusVisible: false,
         };
@@ -38,7 +38,6 @@ var Modal = /** @class */ (function (_super) {
                 _this.setState({ isFocusVisible: true });
             }
         };
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         _this.handleBlur = function (event) {
             if (_this.state.isFocusVisible !== false) {
                 _this.setState({ isFocusVisible: false });
@@ -72,12 +71,14 @@ var Modal = /** @class */ (function (_super) {
         return _this;
     }
     Modal.prototype.componentDidMount = function () {
+        // eslint-disable-next-line react/no-unused-state -- legacy baseui code that I REALLY don't want to touch
         this.setState({ mounted: true });
         this.prevMounted = this.mounted;
         this.mounted = true;
         if (process.env.NODE_ENV !== 'production') {
             // @ts-expect-error checking for property with incorrect name
             if (this.props.closable) {
+                // eslint-disable-next-line no-console -- warning in dev mode only
                 console.warn('The property `closable` is not supported on the Modal. Did you mean `closeable`?');
             }
         }
@@ -163,13 +164,10 @@ var Modal = /** @class */ (function (_super) {
     Modal.prototype.getSharedProps = function () {
         var _a = this.props, animate = _a.animate, isOpen = _a.isOpen, size = _a.size, role = _a.role, closeable = _a.closeable;
         return {
-            // @ts-ignore
             $animate: animate,
             $isVisible: this.state.isVisible,
             $isOpen: !!isOpen,
-            // @ts-ignore
             $size: size,
-            // @ts-ignore
             $role: role,
             $closeable: !!closeable,
             $isFocusVisible: this.state.isFocusVisible,
@@ -177,11 +175,8 @@ var Modal = /** @class */ (function (_super) {
     };
     Modal.prototype.getMountNode = function () {
         var mountNode = this.props.mountNode;
-        if (mountNode) {
+        if (mountNode)
             return mountNode;
-        }
-        // Flow thinks body could be null (cast through any)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return document.body;
     };
     Modal.prototype.getChildren = function () {
@@ -189,21 +184,29 @@ var Modal = /** @class */ (function (_super) {
         return typeof children === 'function' ? children() : children;
     };
     Modal.prototype.renderModal = function (renderedContent) {
-        var _this = this;
         var _a = this.props, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, closeable = _a.closeable, role = _a.role, autoFocus = _a.autoFocus, focusLock = _a.focusLock, returnFocus = _a.returnFocus;
         var RootOverride = overrides.Root, DialogOverride = overrides.Dialog, DialogContainerOverride = overrides.DialogContainer, CloseOverride = overrides.Close;
-        var _c = (0, tslib_1.__read)((0, overrides_1.getOverrides)(RootOverride, styled_components_1.Root), 2), Root = _c[0], rootProps = _c[1];
-        var _d = (0, tslib_1.__read)((0, overrides_1.getOverrides)(DialogContainerOverride, styled_components_1.DialogContainer), 2), DialogContainer = _d[0], dialogContainerProps = _d[1];
-        var _e = (0, tslib_1.__read)((0, overrides_1.getOverrides)(DialogOverride, styled_components_1.Dialog), 2), Dialog = _e[0], dialogProps = _e[1];
-        var _f = (0, tslib_1.__read)((0, overrides_1.getOverrides)(CloseOverride, styled_components_1.Close), 2), Close = _f[0], closeProps = _f[1];
+        var _c = tslib_1.__read((0, overrides_1.getOverrides)(RootOverride, styled_components_1.Root), 2), Root = _c[0], rootProps = _c[1];
+        var _d = tslib_1.__read((0, overrides_1.getOverrides)(DialogContainerOverride, styled_components_1.DialogContainer), 2), DialogContainer = _d[0], dialogContainerProps = _d[1];
+        var _e = tslib_1.__read((0, overrides_1.getOverrides)(DialogOverride, styled_components_1.Dialog), 2), Dialog = _e[0], dialogProps = _e[1];
+        var _f = tslib_1.__read((0, overrides_1.getOverrides)(CloseOverride, function () { return null; }), 2), Close = _f[0], closeProps = _f[1];
         var sharedProps = this.getSharedProps();
-        return ((0, jsx_runtime_1.jsx)(locale_1.LocaleContext.Consumer, { children: function (locale) { return ((0, jsx_runtime_1.jsx)(react_focus_lock_1.default, (0, tslib_1.__assign)({ disabled: !focusLock, 
-                // Allow focus to escape when UI is within an iframe
-                crossFrame: false, returnFocus: returnFocus, autoFocus: autoFocus }, { children: (0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-baseweb": "modal", 
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    ref: _this.rootRef }, sharedProps, rootProps, { children: (0, jsx_runtime_1.jsx)(DialogContainer, (0, tslib_1.__assign)({ "data-testid": "spaceweb-modal-dialog-container", 
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        ref: _this.dialogContainerRef }, sharedProps, dialogContainerProps, { children: (0, jsx_runtime_1.jsxs)(Dialog, (0, tslib_1.__assign)({ tabIndex: -1, "aria-modal": true, "aria-label": "dialog", role: role }, sharedProps, dialogProps, { children: [renderedContent, closeable ? ((0, jsx_runtime_1.jsx)(Close, (0, tslib_1.__assign)({ "aria-label": locale.modal.close, onClick: _this.onCloseClick }, sharedProps, closeProps, { onFocus: (0, focusVisible_1.forkFocus)(closeProps, _this.handleFocus), onBlur: (0, focusVisible_1.forkBlur)(closeProps, _this.handleBlur) }, { children: (0, jsx_runtime_1.jsx)(close_icon_1.CloseIcon, {}, void 0) }), void 0)) : null] }), void 0) }), void 0) }), void 0) }), void 0)); } }, void 0));
+        var dialogueWidth;
+        var size = this.props.size;
+        if (size) {
+            if (typeof size === 'number') {
+                dialogueWidth = "".concat(size, "px");
+            }
+            else if (constants_1.SIZE[size]) {
+                dialogueWidth = constants_1.SIZE_WIDTHS[size];
+            }
+            else if (typeof size === 'string') {
+                dialogueWidth = size;
+            }
+        }
+        return ((0, jsx_runtime_1.jsx)(react_focus_lock_1.default, tslib_1.__assign({ disabled: !focusLock, 
+            // Allow focus to escape when UI is within an iframe
+            crossFrame: false, returnFocus: returnFocus, autoFocus: autoFocus }, { children: (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-baseweb": constants_1.BASEWEB_NAME, ref: this.rootRef }, sharedProps, rootProps, { children: (0, jsx_runtime_1.jsx)(DialogContainer, tslib_1.__assign({ "data-testid": "spaceweb-modal-dialog-container", ref: this.dialogContainerRef }, sharedProps, dialogContainerProps, { children: (0, jsx_runtime_1.jsxs)(Dialog, tslib_1.__assign({ tabIndex: -1, "aria-modal": true, role: role }, sharedProps, dialogProps, { style: [dialogueWidth ? { '--sw-width': dialogueWidth } : {}, dialogProps === null || dialogProps === void 0 ? void 0 : dialogProps.style] }, { children: [renderedContent, closeable ? ((0, jsx_runtime_1.jsx)(Close, tslib_1.__assign({ onClick: this.onCloseClick }, sharedProps, closeProps, { onFocus: (0, focusVisible_1.forkFocus)(closeProps, this.handleFocus), onBlur: (0, focusVisible_1.forkBlur)(closeProps, this.handleBlur) }, { children: (0, jsx_runtime_1.jsx)(close_icon_1.CloseIcon, {}) }))) : null] })) })) })) })));
     };
     Modal.prototype.render = function () {
         // Only render an open and non-renderAll modal on the browser (portals aren't supported server-side)
@@ -211,10 +214,10 @@ var Modal = /** @class */ (function (_super) {
         var renderedContent = mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
         if (renderedContent) {
             if (mountedAndOpen) {
-                return ((0, jsx_runtime_1.jsx)(layer_1.Layer, (0, tslib_1.__assign)({ onEscape: this.onEscape, onDocumentClick: this.onDocumentClick, mountNode: this.props.mountNode }, { children: this.renderModal(renderedContent) }), void 0));
+                return ((0, jsx_runtime_1.jsx)(layer_1.Layer, tslib_1.__assign({ onEscape: this.onEscape, onDocumentClick: this.onDocumentClick, mountNode: this.props.mountNode }, { children: this.renderModal(renderedContent) })));
             }
             else {
-                return (0, jsx_runtime_1.jsx)(styled_components_1.Hidden, { children: renderedContent }, void 0);
+                return (0, jsx_runtime_1.jsx)(styled_components_1.Hidden, { children: renderedContent });
             }
         }
         else {
@@ -236,4 +239,6 @@ var Modal = /** @class */ (function (_super) {
     };
     return Modal;
 }(React.Component));
+// @ts-ignore -- Add displayName for BaseModal
+Modal.displayName = 'BaseUIModal';
 exports.default = Modal;

package/baseui/modal/styled-components.d.ts

@@ -1,5 +1,4 @@
-export declare const Root: import("../../style/styled").StyledComponent;
-export declare const DialogContainer: import("../../style/styled").StyledComponent;
-export declare const Dialog: import("../../style/styled").StyledComponent;
-export declare const Close: import("../../style/styled").StyledComponent;
-export declare const Hidden: import("../../style/styled").StyledComponent;
+export declare const Root: import("../../style").StyledComponent;
+export declare const DialogContainer: import("../../style").StyledComponent;
+export declare const Dialog: import("../../style").StyledComponent;
+export declare const Hidden: import("../../style").StyledComponent;

package/baseui/modal/styled-components.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Hidden = exports.Close = exports.Dialog = exports.DialogContainer = exports.Root = void 0;
-var tslib_1 = require("tslib");
+exports.Hidden = exports.Dialog = exports.DialogContainer = exports.Root = void 0;
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -10,66 +9,26 @@ LICENSE file in the root directory of this source tree.
 */
 var style_1 = require("../../style");
 var constants_1 = require("./constants");
-function getSizeStyles($size) {
-    var styles = {
-        maxWidth: '100%',
-        // @ts-ignore
-        width: null,
-    };
-    if (typeof $size === 'number') {
-        styles.width = "".concat($size, "px");
-        // @ts-ignore
-    }
-    else if (constants_1.SIZE[$size]) {
-        // @ts-ignore
-        styles.width = constants_1.SIZE_WIDTHS[$size];
-    }
-    else if (typeof $size === 'string') {
-        styles.width = $size;
-    }
-    if ($size === constants_1.SIZE.full) {
-        styles.alignSelf = 'stretch';
-    }
-    return styles;
-}
-exports.Root = (0, style_1.styled)('div', function (_, props) {
-    var $isOpen = props.$isOpen;
-    return {
-        position: 'fixed',
-        overflow: 'auto',
-        right: 0,
-        bottom: 0,
-        top: 0,
-        left: 0,
-        pointerEvents: $isOpen ? 'auto' : 'none',
-    };
+exports.Root = (0, style_1.styled)('div', 'fixed overflow-auto right-0 left-0 top-0 bottom-0', function (_, _a) {
+    var $isOpen = _a.$isOpen;
+    return $isOpen ? 'pointer-events-auto' : 'pointer-events-none';
 });
 exports.Root.displayName = 'Root';
-exports.DialogContainer = (0, style_1.styled)('div', 'flex justify-center items-center w-full min-h-full select-none pointer-events-auto', function (_, $animate) { return ($animate ? 'transition-opacity ease-out' : ''); }, function (_, props) {
-    var $isOpen = props.$isOpen, $isVisible = props.$isVisible;
-    return {
-        // Remove grey highlight
-        WebkitTapHighlightColor: 'transparent',
-        opacity: $isVisible && $isOpen ? 1 : 0,
-    };
+exports.DialogContainer = (0, style_1.styled)('div', 'flex justify-center items-center w-full min-h-full select-none pointer-events-auto webkit-tap-highlight-transparent', function (_, $animate) { return ($animate ? 'transition-opacity ease-out' : ''); }, function (_, _a) {
+    var $isOpen = _a.$isOpen, $isVisible = _a.$isVisible;
+    return ($isVisible && $isOpen ? 'opacity-100' : 'opacity-0');
 });
 exports.DialogContainer.displayName = 'DialogContainer';
-exports.Dialog = (0, style_1.styled)('div', 'spr-popup rounded-16 m-4 relative select-text', function (_, $animate) { return ($animate ? 'transition-opacity ease-out' : ''); }, function (_, props) {
-    var $isOpen = props.$isOpen, $isVisible = props.$isVisible, $size = props.$size;
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, getSizeStyles($size)), { 
-        // Animation
-        opacity: $isVisible && $isOpen ? 1 : 0, 
-        // Reset interactivity properties set by container
-        pointerEvents: $isOpen ? 'all' : 'none', 
-        // We move focus to the modal, but we don't want the blue outline style
-        ':focus': {
-            outline: 'none',
-        } });
+exports.Dialog = (0, style_1.styled)('div', 'spr-bg-primary rounded-16 m-4 relative select-text focus:outline-none max-w-full w-[--sw-width]', function (_, $animate) { return ($animate ? 'transition-opacity ease-out' : ''); }, function (_, _a) {
+    var $isOpen = _a.$isOpen, $isVisible = _a.$isVisible;
+    return ($isVisible && $isOpen ? 'opacity-100' : 'opacity-0');
+}, function (_, _a) {
+    var $isOpen = _a.$isOpen;
+    return ($isOpen ? 'pointer-events-all' : 'pointer-events-none');
+}, function (_, _a) {
+    var $size = _a.$size;
+    return ($size === constants_1.SIZE.full ? 'self-stretch' : '');
 });
 exports.Dialog.displayName = 'Dialog';
-exports.Close = (0, style_1.styled)('button');
-exports.Close.displayName = 'Close';
-exports.Hidden = (0, style_1.styled)('div', {
-    display: 'none',
-});
+exports.Hidden = (0, style_1.styled)('div', 'hidden');
 exports.Hidden.displayName = 'Hidden';

package/baseui/modal/types.d.ts

@@ -1,18 +1,18 @@
 import type * as React from 'react';
-import type { Override } from '../helpers/overrides';
+import type { Override } from '../../overrides';
 import type { SIZE, ROLE, CLOSE_SOURCE } from './constants';
-export declare type Size = keyof typeof SIZE;
-export declare type SizeProp = Size | number | string;
-export declare type Role = keyof typeof ROLE;
-export declare type RoleProp = Role | string;
-export declare type CloseSource = keyof typeof CLOSE_SOURCE;
-export declare type ModalOverrides = {
-    Root?: Override;
-    Dialog?: Override;
-    DialogContainer?: Override;
-    Close?: Override;
+export type Size = keyof typeof SIZE;
+export type SizeProp = Size | number | string;
+export type Role = keyof typeof ROLE;
+export type RoleProp = Role | string;
+export type CloseSource = keyof typeof CLOSE_SOURCE;
+export type ModalOverrides = {
+    Root?: Override<Record<string, any>>;
+    Dialog?: Override<Record<string, any>>;
+    DialogContainer?: Override<Record<string, any>>;
+    Close?: Override<Record<string, any>>;
 };
-export declare type ModalProps = {
+export type ModalProps = {
     /** Sets whether the Modal should be displayed by easing in and out */
     animate?: boolean;
     /** If true, focus will shift to the first interactive element within the modal.
@@ -57,18 +57,18 @@ export declare type ModalProps = {
      */
     renderAll?: boolean;
 };
-export declare type ModalPropsWithoutChildren = Omit<ModalProps, 'children'>;
-export declare type ModalState = {
+export type ModalPropsWithoutChildren = Omit<ModalProps, 'children'>;
+export type ModalState = {
     isVisible: boolean;
     mounted: boolean;
     isFocusVisible: boolean;
 };
-export declare type SharedStylePropsArg = {
-    $animate: boolean;
+export type SharedStylePropsArg = {
+    $animate?: boolean;
     $isVisible: boolean;
     $isOpen: boolean;
-    $size: SizeProp;
-    $role: RoleProp;
+    $size?: SizeProp;
+    $role?: RoleProp;
     $closeable: boolean;
     $isFocusVisible: boolean;
 };

package/baseui/modal/utils.d.ts

@@ -0,0 +1 @@
+export declare const isModalOpen: () => boolean;

package/baseui/modal/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isModalOpen = void 0;
+var constants_1 = require("./constants");
+var isModalOpen = function () { var _a; return Boolean((_a = document.querySelectorAll("[data-baseweb=\"".concat(constants_1.BASEWEB_NAME, "\"]"))) === null || _a === void 0 ? void 0 : _a.length); };
+exports.isModalOpen = isModalOpen;

package/baseui/popover/index.js

@@ -9,11 +9,11 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 var stateful_popover_1 = require("./stateful-popover");
-Object.defineProperty(exports, "StatefulPopover", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_popover_1).default; } });
+Object.defineProperty(exports, "StatefulPopover", { enumerable: true, get: function () { return tslib_1.__importDefault(stateful_popover_1).default; } });
 var stateful_container_1 = require("./stateful-container");
-Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_container_1).default; } });
+Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return tslib_1.__importDefault(stateful_container_1).default; } });
 var popover_1 = require("./popover");
-Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(popover_1).default; } });
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return tslib_1.__importDefault(popover_1).default; } });
 // Constants
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "ACCESSIBILITY_TYPE", { enumerable: true, get: function () { return constants_1.ACCESSIBILITY_TYPE; } });
@@ -29,4 +29,4 @@ Object.defineProperty(exports, "StyledBody", { enumerable: true, get: function (
 Object.defineProperty(exports, "StyledInner", { enumerable: true, get: function () { return styled_components_1.Inner; } });
 Object.defineProperty(exports, "StyledPadding", { enumerable: true, get: function () { return styled_components_1.Padding; } });
 // Flow
-(0, tslib_1.__exportStar)(require("./types"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/baseui/popover/popover.js

@@ -8,29 +8,34 @@ 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 react_focus_lock_1 = (0, tslib_1.__importStar)(require("react-focus-lock"));
-var overrides_1 = require("../helpers/overrides");
+var React = tslib_1.__importStar(require("react"));
+var react_focus_lock_1 = tslib_1.__importStar(require("react-focus-lock"));
+var overrides_1 = require("../../overrides");
 var constants_1 = require("./constants");
 var layer_1 = require("../layer");
 var styled_components_1 = require("./styled-components");
 var utils_1 = require("./utils");
-var default_props_1 = (0, tslib_1.__importDefault)(require("./default-props"));
+var default_props_1 = tslib_1.__importDefault(require("./default-props"));
 var react_uid_1 = require("react-uid");
+var layer_2 = require("../../layer");
+var useCombinedRef_1 = require("../../hooks/useCombinedRef");
 var __DEV__ = process.env.NODE_ENV !== 'production';
 function getDefaultState(props) {
     return {
         isAnimating: false,
         arrowOffset: { left: 0, top: 0 },
         popoverOffset: { left: 0, top: 0 },
+        // Use placement from props to initialize state
+        // this will be updated later by Popper.js when actual placement is resolved
         placement: props.placement,
         isMounted: false,
         isLayerMounted: false,
         autoFocusAfterPositioning: false,
+        contentHost: null,
     };
 }
 var PopoverInner = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PopoverInner, _super);
+    tslib_1.__extends(PopoverInner, _super);
     function PopoverInner() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.anchorRef = React.createRef();
@@ -118,11 +123,18 @@ var PopoverInner = /** @class */ (function (_super) {
             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;
+            try {
+                if (!popper || popper === target || popper.contains(target)) {
+                    return;
+                }
+                if (!anchor || anchor === target || anchor.contains(target)) {
+                    return;
+                }
             }
-            if (!anchor || anchor === target || (target instanceof Node && anchor.contains(target))) {
-                return;
+            catch (err) {
+                if (__DEV__) {
+                    console.error(err);
+                }
             }
             if (_this.props.onClickOutside) {
                 _this.props.onClickOutside(evt);
@@ -134,6 +146,7 @@ var PopoverInner = /** @class */ (function (_super) {
         this.setState({ isMounted: true });
     };
     PopoverInner.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
         this.init(prevProps, prevState);
         if (this.props.accessibilityType !== constants_1.ACCESSIBILITY_TYPE.tooltip &&
             this.props.autoFocus &&
@@ -143,6 +156,12 @@ var PopoverInner = /** @class */ (function (_super) {
             // eslint-disable-next-line react/no-did-update-set-state -- conditional setState
             this.setState({ autoFocusAfterPositioning: true });
         }
+        // Update placement in state if a new placement value is received from props,
+        // since the initial placement from props was only used for state initialization.
+        if (prevProps.placement !== this.props.placement) {
+            // eslint-disable-next-line react/no-did-update-set-state -- conditional setState
+            this.setState({ placement: (_a = this.props.placement) !== null && _a !== void 0 ? _a : constants_1.PLACEMENT.auto });
+        }
         if (__DEV__) {
             if (!this.anchorRef.current) {
                 // eslint-disable-next-line no-console -- logging error in dev mode
@@ -212,10 +231,6 @@ var PopoverInner = /** @class */ (function (_super) {
     PopoverInner.prototype.isAccessibilityTypeTooltip = function () {
         return this.props.accessibilityType === constants_1.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;
     };
@@ -232,9 +247,10 @@ var PopoverInner = /** @class */ (function (_super) {
             anchorProps['aria-expanded'] = Boolean(isOpen);
         }
         else if (this.isAccessibilityTypeTooltip()) {
-            anchorProps.id = this.getAnchorIdAttr();
             anchorProps['aria-describedby'] = isOpen ? popoverId : null;
         }
+        if (this.props.onClick)
+            anchorProps.onClick = this.onAnchorClick;
         if (this.isHoverTrigger()) {
             anchorProps.onMouseEnter = this.onAnchorMouseEnter;
             anchorProps.onMouseLeave = this.onAnchorMouseLeave;
@@ -273,8 +289,8 @@ var PopoverInner = /** @class */ (function (_super) {
         return bodyProps;
     };
     PopoverInner.prototype.getSharedProps = function () {
-        var _a = this.props, isOpen = _a.isOpen, showArrow = _a.showArrow, _b = _a.popoverMargin, popoverMargin = _b === void 0 ? constants_1.POPOVER_MARGIN : _b;
-        var _c = this.state, isAnimating = _c.isAnimating, arrowOffset = _c.arrowOffset, popoverOffset = _c.popoverOffset, placement = _c.placement;
+        var _a = this.props, isOpen = _a.isOpen, showArrow = _a.showArrow, _b = _a.popoverMargin, popoverMargin = _b === void 0 ? constants_1.POPOVER_MARGIN : _b, _c = _a.positionFixed, positionFixed = _c === void 0 ? false : _c;
+        var _d = this.state, isAnimating = _d.isAnimating, arrowOffset = _d.arrowOffset, popoverOffset = _d.popoverOffset, placement = _d.placement;
         return {
             $showArrow: !!showArrow,
             $arrowOffset: arrowOffset,
@@ -286,6 +302,7 @@ var PopoverInner = /** @class */ (function (_super) {
             $isOpen: isOpen,
             $popoverMargin: popoverMargin,
             $isHoverTrigger: this.isHoverTrigger(),
+            $positionFixed: positionFixed,
         };
     };
     PopoverInner.prototype.getAnchorFromChildren = function () {
@@ -311,21 +328,30 @@ var PopoverInner = /** @class */ (function (_super) {
         }
         return (
         // @ts-ignore
-        (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({}, anchorProps, { children: anchor }), "popover-anchor"));
+        (0, jsx_runtime_1.jsx)("span", tslib_1.__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 _this = this;
+        var _a;
+        var _b = this.props, showArrow = _b.showArrow, _c = _b.overrides, overrides = _c === void 0 ? {} : _c;
         var ArrowOverride = overrides.Arrow, BodyOverride = overrides.Body, InnerOverride = overrides.Inner;
-        var Arrow = (0, overrides_1.getOverride)(ArrowOverride) || styled_components_1.Arrow;
-        var Body = (0, overrides_1.getOverride)(BodyOverride) || styled_components_1.Body;
-        var Inner = (0, overrides_1.getOverride)(InnerOverride) || styled_components_1.Inner;
+        var _d = tslib_1.__read((0, overrides_1.getOverrides)(ArrowOverride, styled_components_1.Arrow), 2), Arrow = _d[0], arrowProps = _d[1];
+        var _e = tslib_1.__read((0, overrides_1.getOverrides)(BodyOverride, styled_components_1.Body), 2), Body = _e[0], bodyComponentProps = _e[1];
+        var _f = tslib_1.__read((0, overrides_1.getOverrides)(InnerOverride, styled_components_1.Inner), 2), Inner = _f[0], innerProps = _f[1];
+        //@ts-ignore -- TODO type errors occurring from internal baseui implementation, needs to be fixed
+        var combinedRef = (0, useCombinedRef_1.combineRefs)(function (val) { return _this.setState({ contentHost: val }); }, innerProps.ref);
         var sharedProps = this.getSharedProps();
         var bodyProps = this.getPopoverBodyProps();
-        return ((0, jsx_runtime_1.jsxs)(Body, (0, tslib_1.__assign)({ ref: this.popperRef, "data-baseweb": this.props['data-baseweb'] || 'popover' }, bodyProps, sharedProps, (0, overrides_1.getOverrideProps)(BodyOverride), { children: [showArrow ? ((0, jsx_runtime_1.jsx)(Arrow, (0, tslib_1.__assign)({ ref: this.arrowRef }, sharedProps, (0, overrides_1.getOverrideProps)(ArrowOverride)), "popover-arrow")) : null, (0, jsx_runtime_1.jsx)(Inner, (0, tslib_1.__assign)({}, sharedProps, (0, overrides_1.getOverrideProps)(InnerOverride), { children: renderedContent }), void 0)] }), "popover-body"));
+        return ((0, jsx_runtime_1.jsxs)(Body, tslib_1.__assign({ ref: this.popperRef, "data-baseweb": this.props['data-baseweb'] || 'popover' }, bodyProps, sharedProps, bodyComponentProps, { style: [styled_components_1.popoverBodyStyle, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.style, bodyComponentProps === null || bodyComponentProps === void 0 ? void 0 : bodyComponentProps.style] }, { children: [showArrow ? ((0, jsx_runtime_1.jsx)(Arrow, tslib_1.__assign({ ref: this.arrowRef }, sharedProps, arrowProps, { style: [
+                        { '--sw-height': "".concat(constants_1.ARROW_WIDTH, "px"), '--sw-width': "".concat(constants_1.ARROW_WIDTH, "px") },
+                        (0, utils_1.getArrowPositionStyles)(this.state.arrowOffset, (_a = this.state.placement) !== null && _a !== void 0 ? _a : 'auto'),
+                        arrowProps.style,
+                    ] }), "popover-arrow")) : null, (0, jsx_runtime_1.jsx)(Inner, tslib_1.__assign({}, sharedProps, innerProps, { ref: combinedRef }, { children: renderedContent }))] }), "popover-body"));
     };
     PopoverInner.prototype.renderContent = function () {
         var content = this.props.content;
-        return typeof content === 'function' ? content() : content;
+        var _content = (0, utils_1.extractContent)(content);
+        return _content ? (0, jsx_runtime_1.jsx)(layer_2.LayersManager, tslib_1.__assign({ host: this.state.contentHost }, { children: _content })) : null;
     };
     PopoverInner.prototype.render = function () {
         var _this = this;
@@ -340,14 +366,16 @@ var PopoverInner = /** @class */ (function (_super) {
         // Only render popover on the browser (portals aren't supported server-side)
         if (renderedContent) {
             if (mountedAndOpen) {
-                rendered.push((0, jsx_runtime_1.jsx)(layer_1.Layer, (0, tslib_1.__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: (0, jsx_runtime_1.jsx)(layer_1.TetherBehavior, (0, tslib_1.__assign)({ anchorRef: this.anchorRef.current, arrowRef: this.arrowRef.current, popperRef: this.popperRef.current, 
+                rendered.push((0, jsx_runtime_1.jsx)(layer_1.Layer, tslib_1.__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: (0, jsx_runtime_1.jsx)(layer_1.TetherBehavior, tslib_1.__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: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultPopperOptions), this.props.popperOptions), onPopperUpdate: this.onPopperUpdate, placement: this.state.placement, repositionOnResize: this.props.repositionOnResize }, { children: this.props.focusLock && this.props.accessibilityType !== constants_1.ACCESSIBILITY_TYPE.tooltip ? ((0, jsx_runtime_1.jsx)(react_focus_lock_1.default, (0, tslib_1.__assign)({ disabled: !this.props.focusLock, noFocusGuards: false, 
+                        popperOptions: tslib_1.__assign(tslib_1.__assign({}, defaultPopperOptions), this.props.popperOptions), onPopperUpdate: this.onPopperUpdate, 
+                        // Placement is passed via props instead of state and used only for Popper.js configuration
+                        placement: this.props.placement, repositionOnResize: this.props.repositionOnResize, positionFixed: this.props.positionFixed }, { children: this.props.focusLock && this.props.accessibilityType !== constants_1.ACCESSIBILITY_TYPE.tooltip ? ((0, jsx_runtime_1.jsx)(react_focus_lock_1.default, tslib_1.__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)) : ((0, jsx_runtime_1.jsx)(react_focus_lock_1.MoveFocusInside, (0, tslib_1.__assign)({ disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning }, { children: this.renderPopover(renderedContent) }), void 0)) }), void 0) }), "new-layer"));
+                            crossFrame: false, focusOptions: this.props.focusOptions }, { children: this.renderPopover(renderedContent) }))) : ((0, jsx_runtime_1.jsx)(react_focus_lock_1.MoveFocusInside, tslib_1.__assign({ disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning }, { children: this.renderPopover(renderedContent) }))) })) }), "new-layer"));
             }
             else {
                 rendered.push((0, jsx_runtime_1.jsx)(styled_components_1.Hidden, { children: renderedContent }, "hidden-layer"));
@@ -362,9 +390,9 @@ var PopoverInner = /** @class */ (function (_super) {
 var Popover = function (props) {
     var innerRef = props.innerRef;
     var gID = (0, react_uid_1.useUID)();
-    return ((0, jsx_runtime_1.jsx)(PopoverInner, (0, tslib_1.__assign)({ id: props.id || gID, 
+    return ((0, jsx_runtime_1.jsx)(PopoverInner, tslib_1.__assign({ id: props.id || gID, 
         // @ts-expect-error
-        ref: innerRef }, props), void 0));
+        ref: innerRef }, props)));
 };
 Popover.defaultProps = default_props_1.default;
 exports.default = Popover;

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import type { State, StatefulPopoverContainerProps, StateChangeType } from './types';
+import type { State, StatefulPopoverContainerProps, StateChangeType, StatefulPopoverRenderFocusOverride } from './types';
+import type { ReactFocusLockProps } from 'react-focus-lock/interfaces';
 declare class StatefulContainer extends React.Component<StatefulPopoverContainerProps, State> {
     static defaultProps: Partial<StatefulPopoverContainerProps>;
     state: {
         isOpen: boolean;
     };
+    returnFocusOverride: ReactFocusLockProps['returnFocus'] | undefined;
     onBlur: (e: React.FocusEvent) => void;
     onClick: (e: React.SyntheticEvent) => void;
     onClickOutside: () => void;
@@ -12,9 +14,9 @@ declare class StatefulContainer extends React.Component<StatefulPopoverContainer
     onFocus: (e: React.FocusEvent) => void;
     onMouseEnter: (e: React.MouseEvent) => void;
     onMouseLeave: (e: React.MouseEvent) => void;
-    onContentClose: () => void;
+    onContentClose: (returnFocus?: StatefulPopoverRenderFocusOverride) => void;
     open(): void;
-    close(): void;
+    close(returnFocus?: ReactFocusLockProps['returnFocus']): void;
     internalSetState(type: StateChangeType, changes: State): void;
     /**
      * If user passed a content render prop, we want to give them a