@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/baseui/popover/popover.js

@@ -1,4 +1,4 @@
-import { __assign, __extends } from "tslib";
+import { __assign, __extends, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -8,23 +8,28 @@ 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 { getOverrides } from '../../overrides';
+import { ACCESSIBILITY_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME, ARROW_WIDTH, PLACEMENT, POPOVER_MARGIN, TRIGGER_TYPE, } 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 { Arrow as StyledArrow, Body as StyledBody, Hidden, Inner as StyledInner, popoverBodyStyle, } from './styled-components';
+import { extractContent, fromPopperPlacement, getArrowPositionStyles } from './utils';
 import defaultProps from './default-props';
 import { useUID } from 'react-uid';
+import { LayersManager } from '../../layer';
+import { combineRefs } from '../../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) {
@@ -116,11 +121,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);
@@ -132,6 +144,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 !== ACCESSIBILITY_TYPE.tooltip &&
             this.props.autoFocus &&
@@ -141,6 +154,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 : PLACEMENT.auto });
+        }
         if (__DEV__) {
             if (!this.anchorRef.current) {
                 // eslint-disable-next-line no-console -- logging error in dev mode
@@ -210,10 +229,6 @@ var PopoverInner = /** @class */ (function (_super) {
     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;
     };
@@ -230,9 +245,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;
@@ -271,8 +287,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 ? 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 ? 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,
@@ -284,6 +300,7 @@ var PopoverInner = /** @class */ (function (_super) {
             $isOpen: isOpen,
             $popoverMargin: popoverMargin,
             $isHoverTrigger: this.isHoverTrigger(),
+            $positionFixed: positionFixed,
         };
     };
     PopoverInner.prototype.getAnchorFromChildren = function () {
@@ -312,18 +329,27 @@ var PopoverInner = /** @class */ (function (_super) {
         _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 _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 = getOverride(ArrowOverride) || StyledArrow;
-        var Body = getOverride(BodyOverride) || StyledBody;
-        var Inner = getOverride(InnerOverride) || StyledInner;
+        var _d = __read(getOverrides(ArrowOverride, StyledArrow), 2), Arrow = _d[0], arrowProps = _d[1];
+        var _e = __read(getOverrides(BodyOverride, StyledBody), 2), Body = _e[0], bodyComponentProps = _e[1];
+        var _f = __read(getOverrides(InnerOverride, StyledInner), 2), Inner = _f[0], innerProps = _f[1];
+        //@ts-ignore -- TODO type errors occurring from internal baseui implementation, needs to be fixed
+        var combinedRef = combineRefs(function (val) { return _this.setState({ contentHost: val }); }, innerProps.ref);
         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"));
+        return (_jsxs(Body, __assign({ ref: this.popperRef, "data-baseweb": this.props['data-baseweb'] || 'popover' }, bodyProps, sharedProps, bodyComponentProps, { style: [popoverBodyStyle, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.style, bodyComponentProps === null || bodyComponentProps === void 0 ? void 0 : bodyComponentProps.style] }, { children: [showArrow ? (_jsx(Arrow, __assign({ ref: this.arrowRef }, sharedProps, arrowProps, { style: [
+                        { '--sw-height': "".concat(ARROW_WIDTH, "px"), '--sw-width': "".concat(ARROW_WIDTH, "px") },
+                        getArrowPositionStyles(this.state.arrowOffset, (_a = this.state.placement) !== null && _a !== void 0 ? _a : 'auto'),
+                        arrowProps.style,
+                    ] }), "popover-arrow")) : null, _jsx(Inner, __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 = extractContent(content);
+        return _content ? _jsx(LayersManager, __assign({ host: this.state.contentHost }, { children: _content })) : null;
     };
     PopoverInner.prototype.render = function () {
         var _this = this;
@@ -341,11 +367,13 @@ var PopoverInner = /** @class */ (function (_super) {
                 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, 
+                        popperOptions: __assign(__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 !== 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"));
+                            crossFrame: false, focusOptions: this.props.focusOptions }, { children: this.renderPopover(renderedContent) }))) : (_jsx(MoveFocusInside, __assign({ disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning }, { children: this.renderPopover(renderedContent) }))) })) }), "new-layer"));
             }
             else {
                 rendered.push(_jsx(Hidden, { children: renderedContent }, "hidden-layer"));
@@ -362,7 +390,7 @@ var Popover = function (props) {
     var gID = useUID();
     return (_jsx(PopoverInner, __assign({ id: props.id || gID, 
         // @ts-expect-error
-        ref: innerRef }, props), void 0));
+        ref: innerRef }, props)));
 };
 Popover.defaultProps = defaultProps;
 export default Popover;

package/esm/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

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

@@ -14,6 +14,7 @@ var StatefulContainer = /** @class */ (function (_super) {
     function StatefulContainer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = __assign({ isOpen: false }, _this.props.initialState);
+        _this.returnFocusOverride = undefined;
         _this.onBlur = function (e) {
             if (_this.props.onBlur) {
                 _this.props.onBlur(e);
@@ -38,7 +39,12 @@ var StatefulContainer = /** @class */ (function (_super) {
             _this.close();
         };
         _this.onEsc = function () {
-            _this.close();
+            var _a, _b;
+            var dismissOnEsc = _this.props.dismissOnEsc;
+            if (dismissOnEsc) {
+                _this.close();
+            }
+            (_b = (_a = _this.props).onEsc) === null || _b === void 0 ? void 0 : _b.call(_a, !!dismissOnEsc);
         };
         _this.onFocus = function (e) {
             if (_this.props.onFocus) {
@@ -60,8 +66,9 @@ var StatefulContainer = /** @class */ (function (_super) {
             }
             _this.close();
         };
-        _this.onContentClose = function () {
-            _this.close();
+        _this.onContentClose = function (returnFocus) {
+            var passReturnFocus = typeof returnFocus === 'function' || typeof returnFocus === 'boolean' ? returnFocus : undefined;
+            _this.close(passReturnFocus);
         };
         /**
          * If user passed a content render prop, we want to give them a
@@ -83,6 +90,7 @@ var StatefulContainer = /** @class */ (function (_super) {
         return _this;
     }
     StatefulContainer.prototype.open = function () {
+        this.returnFocusOverride = undefined;
         this.internalSetState(STATE_CHANGE_TYPE.open, {
             isOpen: true,
         });
@@ -90,7 +98,8 @@ var StatefulContainer = /** @class */ (function (_super) {
             this.props.onOpen();
         }
     };
-    StatefulContainer.prototype.close = function () {
+    StatefulContainer.prototype.close = function (returnFocus) {
+        this.returnFocusOverride = returnFocus;
         this.internalSetState(STATE_CHANGE_TYPE.close, {
             isOpen: false,
         });
@@ -107,7 +116,8 @@ var StatefulContainer = /** @class */ (function (_super) {
         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 _this = this;
+        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, positionFixed = _a.positionFixed;
         var popoverProps = {
             accessibilityType: accessibilityType,
             animateOutTime: animateOutTime,
@@ -128,19 +138,31 @@ var StatefulContainer = /** @class */ (function (_super) {
             placement: placement,
             popperOptions: popperOptions,
             renderAll: renderAll,
-            returnFocus: returnFocus,
+            returnFocus: returnFocus
+                ? // useFocusLock() forces focusLock to true if returnFocus is truthy
+                    // To counteract this, returnFocus's override checking function only applies if returnFocus is initially truthy
+                    function (returnTo) {
+                        var _a;
+                        var calculatedReturnFocus = (_a = _this.returnFocusOverride) !== null && _a !== void 0 ? _a : returnFocus;
+                        if (calculatedReturnFocus) {
+                            return typeof calculatedReturnFocus === 'function'
+                                ? calculatedReturnFocus(returnTo)
+                                : calculatedReturnFocus;
+                        }
+                        return false;
+                    }
+                : returnFocus,
             showArrow: showArrow,
             triggerType: triggerType,
             popoverMargin: popoverMargin,
             focusOptions: focusOptions,
             repositionOnResize: repositionOnResize,
+            positionFixed: positionFixed,
         };
+        popoverProps.onEsc = this.onEsc;
         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;

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

@@ -5,7 +5,7 @@ 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));
+    return (_jsx(StatefulContainer, __assign({}, restProps, { children: function (popoverProps) { return _jsx(Popover, __assign({}, popoverProps, { children: children })); } })));
 }
 StatefulPopover.defaultProps = {
     accessibilityType: ACCESSIBILITY_TYPE.menu,

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

@@ -1,27 +1,17 @@
-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;
+export declare const popoverBodyStyle: (_: any, props: any) => {};
+export declare const Body: import("../../style").StyledComponent;
+export declare const Arrow: import("../../style").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;
+export declare const Inner: import("../../style").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;
+export declare const Padding: import("../../style").StyledComponent;
+export declare const Hidden: import("../../style").StyledComponent;

package/esm/baseui/popover/styled-components.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __read } from "tslib";
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -6,36 +6,62 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../../style';
-import { ARROW_SIZE, ARROW_WIDTH } from './constants';
-import { getPopoverMarginStyles, getArrowPositionStyles, getStartPosition, getEndPosition } from './utils';
-/**
- * Main popover container element that gets positioned next to the anchor
- */
-export function getBodyStyles(_, props) {
-    var $animationDuration = props.$animationDuration, $isOpen = props.$isOpen, $isAnimating = props.$isAnimating, $placement = props.$placement, $popoverOffset = props.$popoverOffset, $showArrow = props.$showArrow, $popoverMargin = props.$popoverMargin, $isHoverTrigger = props.$isHoverTrigger;
-    return __assign(__assign({ position: 'absolute', top: 0, left: '0px /* @noflip */', transitionProperty: 'opacity,transform', transitionDuration: $isAnimating ? ($isOpen ? '0.1s' : "".concat($animationDuration, "ms")) : '0s', transitionTimingFunction: $isOpen ? 'ease-out' : 'ease-in', opacity: $isAnimating && $isOpen ? 1 : 0, transform: $isAnimating && $isOpen
+import { ARROW_SIZE } from './constants';
+import { getStartPosition, getEndPosition, splitPlacement, getOppositePosition } from './utils';
+export var popoverBodyStyle = function (_, props) {
+    var $animationDuration = props.$animationDuration, $isOpen = props.$isOpen, $isAnimating = props.$isAnimating, $placement = props.$placement, $popoverOffset = props.$popoverOffset, $showArrow = props.$showArrow, $popoverMargin = props.$popoverMargin, $positionFixed = props.$positionFixed;
+    var styleObj = {};
+    styleObj['--sw-left-directional'] = $positionFixed ? "".concat($popoverOffset.left, "px") : '0px';
+    // eslint-disable-next-line no-nested-ternary -- required here
+    styleObj['--sw-duration'] = $isAnimating ? ($isOpen ? '0.1s' : "".concat($animationDuration, "ms")) : '0s';
+    styleObj['--sw-transform'] =
+        $isAnimating && $isOpen
             ? getEndPosition($popoverOffset)
-            : getStartPosition($popoverOffset, $placement, $showArrow ? ARROW_SIZE : 0, $popoverMargin) }, getPopoverMarginStyles($showArrow ? ARROW_SIZE : 0, $placement, $popoverMargin)), ($isHoverTrigger
-        ? {
-            animationDuration: '.1s',
-            animationName: {
-                '0%': { pointerEvents: 'none' },
-                '99%': { pointerEvents: 'none' },
-                '100%': { pointerEvents: 'auto' },
-            },
-        }
-        : {}));
-}
-export var Body = styled('div', getBodyStyles);
+            : getStartPosition($popoverOffset, $placement, $showArrow ? ARROW_SIZE : 0, $popoverMargin);
+    if ($positionFixed) {
+        styleObj['--sw-top'] = "".concat($popoverOffset.top, "px");
+    }
+    var _a = __read(splitPlacement($placement), 1), position = _a[0];
+    var opposite = getOppositePosition(position);
+    // use logical props only for block margins, inline margins should not be flipped in rtl
+    if (opposite === 'top')
+        opposite = 'block-start';
+    if (opposite === 'bottom')
+        opposite = 'block-end';
+    var marginStyles = {};
+    if (opposite) {
+        var property = "--sw-margin-".concat(opposite);
+        marginStyles[property] = "".concat(($showArrow ? ARROW_SIZE : 0) + $popoverMargin, "px");
+    }
+    return __assign(__assign({}, styleObj), marginStyles);
+};
+export var Body = styled('div', 'absolute top-0 left-[--sw-left-directional] transition-[transform-opacity] duration-[--sw-duration] st-trans-[--sw-transform]', function (_, _a) {
+    var $placement = _a.$placement;
+    var _b = __read(splitPlacement($placement), 1), position = _b[0];
+    var _opposite = getOppositePosition(position);
+    var opposite = _opposite;
+    // use logical props only for block margins, inline margins should not be flipped in rtl
+    if (opposite === 'top')
+        opposite = 'block-start';
+    if (opposite === 'bottom')
+        opposite = 'block-end';
+    // only one of the ml-[--sw-margin-left] mr-[--sw-margin-right] mt-[--sw-margin-block-start] mb-[--sw-margin-block-end] class should be applied
+    return _opposite ? "m".concat(_opposite[0], "-[--sw-margin-").concat(opposite, "]") : '';
+}, function (_, _a) {
+    var $isOpen = _a.$isOpen;
+    return ($isOpen ? 'ease-out' : 'ease-in');
+}, function (_, _a) {
+    var $isOpen = _a.$isOpen, $isAnimating = _a.$isAnimating;
+    return ($isAnimating && $isOpen ? 'opacity-100' : 'opacity-0');
+}, function (_, _a) {
+    var $isHoverTrigger = _a.$isHoverTrigger;
+    return ($isHoverTrigger ? 'sw-popover-hover-animation' : '');
+}, function (_, _a) {
+    var $positionFixed = _a.$positionFixed;
+    return ($positionFixed ? 'transform-none fixed top-[--sw-top]' : '');
+});
 Body.displayName = 'Body';
-/**
- * Arrow shown between the popover and the anchor element
- */
-export function getArrowStyles(_, props) {
-    var $arrowOffset = props.$arrowOffset, $placement = props.$placement;
-    return __assign({ width: "".concat(ARROW_WIDTH, "px"), height: "".concat(ARROW_WIDTH, "px"), transform: 'rotate(45deg) /* @noflip */', position: 'absolute' }, getArrowPositionStyles($arrowOffset, $placement));
-}
-export var Arrow = styled('div', getArrowStyles);
+export var Arrow = styled('div', 'h-[--sw-height] w-[--sw-width] absolute forced-colors:border-1');
 Arrow.displayName = 'Arrow';
 /**
  * Extra div that holds the popover content. This extra element
@@ -43,26 +69,14 @@ Arrow.displayName = 'Arrow';
  * and rendering this extra element on top with a solid background
  * clips the part of the arrow that extends into the popover.
  */
-export function getInnerStyles() {
-    return {
-        position: 'relative',
-    };
-}
-export var Inner = styled('div', getInnerStyles);
+export var Inner = styled('div', 'relative');
 Inner.displayName = 'Inner';
 /**
  * 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 var Padding = styled('div', {
-    paddingLeft: '12px /* @noflip */',
-    paddingTop: '12px',
-    paddingRight: '12px /* @noflip */',
-    paddingBottom: '12px',
-});
+export var Padding = styled('div', 'p-3');
 Padding.displayName = 'Padding';
-export var Hidden = styled('div', {
-    display: 'none',
-});
+export var Hidden = styled('div', 'hidden');
 Hidden.displayName = 'Hidden';

package/esm/baseui/popover/types.d.ts

@@ -1,28 +1,30 @@
 import type * as React from 'react';
-import type { Override } from '../helpers/overrides';
+import type { Override } from '../../overrides';
 import type { TetherPlacement } from '../layer';
 import type { ACCESSIBILITY_TYPE, STATE_CHANGE_TYPE, TRIGGER_TYPE } from './constants';
+import type { ReactFocusLockProps } from 'react-focus-lock/interfaces';
 export type { PopperDataObject, PopperOffset, PopperOptions } from '../layer';
-export declare type PopoverPlacement = TetherPlacement;
-export declare type TriggerType = keyof typeof TRIGGER_TYPE;
-export declare type AccessibilityType = keyof typeof ACCESSIBILITY_TYPE;
-export declare type State = {
+export type PopoverPlacement = TetherPlacement;
+export type TriggerType = keyof typeof TRIGGER_TYPE;
+export type AccessibilityType = keyof typeof ACCESSIBILITY_TYPE;
+export type State = {
     isOpen: boolean;
 };
-export declare type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
-export declare type StateReducer = (stateChangeType: StateChangeType, nextState: State, currentState: State) => State;
-export declare type ContentRenderProp = () => React.ReactNode;
-export declare type StatefulContentRenderProp = (a: {
-    close: () => void;
+export type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
+export type StateReducer = (stateChangeType: StateChangeType, nextState: State, currentState: State) => State;
+export type ContentRenderProp = () => React.ReactNode;
+export type StatefulPopoverRenderFocusOverride = ReactFocusLockProps['returnFocus'] | MouseEvent | KeyboardEvent;
+export type StatefulContentRenderProp = (a: {
+    close: (returnFocus?: StatefulPopoverRenderFocusOverride) => void;
 }) => React.ReactNode;
-export declare type PopoverOverrides = {
-    Body?: Override;
-    Arrow?: Override;
-    Inner?: Override;
+export type PopoverOverrides = {
+    Body?: Override<Record<string, any>>;
+    Arrow?: Override<Record<string, any>>;
+    Inner?: Override<Record<string, any>>;
 };
-export declare type Child = React.ReactNode;
-export declare type Children = Array<Child> | Child;
-export declare type BasePopoverProps = {
+export type Child = React.ReactNode;
+export type Children = Array<Child> | Child;
+export type BasePopoverProps = {
     /** Controls how this popover behaves for screen readers and other assistive devices.
      * See the A11Y section at the bottom of this document for more details.
      */
@@ -42,7 +44,7 @@ export declare type BasePopoverProps = {
     /** If true, popover element will not avoid element boundaries. */
     ignoreBoundary?: boolean;
     /** Where to mount the popover */
-    mountNode?: HTMLElement;
+    mountNode?: HTMLElement | null;
     /** Handler for blur events on trigger element. */
     onBlur?: (e: React.FocusEvent) => unknown;
     /** Handler for click events on trigger element. */
@@ -80,8 +82,10 @@ export declare type BasePopoverProps = {
     popoverMargin?: number;
     /** Reposition popover whenever dimension of popup content or targetElement changes **/
     repositionOnResize?: boolean;
+    /** Uses the position, left and top properties instead of transform to adjust the popover **/
+    positionFixed?: boolean;
 };
-export declare type PopoverProps = BasePopoverProps & {
+export type PopoverProps = BasePopoverProps & {
     /** Content that should trigger the popover to be shown (also acts as the anchor against
      * which the popover will be positioned).
      */
@@ -95,7 +99,7 @@ export declare type PopoverProps = BasePopoverProps & {
     /** Handler for click events on trigger element. */
     onEsc?: () => unknown;
 };
-export declare type StatefulPopoverProps = BasePopoverProps & {
+export type StatefulPopoverProps = BasePopoverProps & {
     /** Content that should trigger the popover to be shown (also acts as the anchor against
      * which the popover will be positioned).
      */
@@ -114,16 +118,18 @@ export declare type StatefulPopoverProps = BasePopoverProps & {
     onOpen?: () => unknown;
     /** Reducer function to manipulate internal state updates. */
     stateReducer?: StateReducer;
+    /** Handler for click events on trigger element. */
+    onEsc?: (dismissOnEsc: boolean) => void;
 };
-export declare type StatefulPopoverContainerProps = Omit<StatefulPopoverProps, 'children'> & {
+export type StatefulPopoverContainerProps = Omit<StatefulPopoverProps, 'children'> & {
     children: (props: Omit<PopoverProps, 'children'>) => React.ReactNode;
 };
-export declare type PopoverPropsWithoutChildren = Omit<PopoverProps, 'children'>;
-export declare type Offset = {
+export type PopoverPropsWithoutChildren = Omit<PopoverProps, 'children'>;
+export type Offset = {
     top: number;
     left: number;
 };
-export declare type PopoverPrivateState = {
+export type PopoverPrivateState = {
     isAnimating: boolean;
     arrowOffset: Offset;
     popoverOffset: Offset;
@@ -131,12 +137,13 @@ export declare type PopoverPrivateState = {
     isLayerMounted: boolean;
     isMounted: boolean;
     autoFocusAfterPositioning: boolean;
+    contentHost: HTMLElement | null;
 };
-export declare type ArrowStylePropsArg = {
+export type ArrowStylePropsArg = {
     $arrowOffset: Offset;
     $placement: TetherPlacement;
 };
-export declare type BodyStylePropsArg = {
+export type BodyStylePropsArg = {
     $animationDuration: number;
     $isAnimating: boolean;
     $isHoverTrigger: boolean;
@@ -146,9 +153,9 @@ export declare type BodyStylePropsArg = {
     $showArrow: boolean;
     $popoverMargin: number;
 };
-export declare type InnerStylePropsArg = {};
-export declare type SharedStylePropsArg = {} & ArrowStylePropsArg & BodyStylePropsArg;
-export declare type AnchorProps = {
+export type InnerStylePropsArg = {};
+export type SharedStylePropsArg = {} & ArrowStylePropsArg & BodyStylePropsArg;
+export type AnchorProps = {
     'aria-controls'?: string | null;
     'aria-describedby'?: string | null;
     'aria-expanded'?: boolean;

package/esm/baseui/popover/utils.d.ts

@@ -45,3 +45,4 @@ export declare function getEndPosition(offset: Offset): string;
 export declare function getArrowPositionStyles(offsets: Offset, placement: PopoverPlacement): {
     [x: string]: string;
 } | null;
+export declare const extractContent: (content: any) => any;