@sprinklrjs/spaceweb 14.14.2 → 14.14.3

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

@@ -112,6 +112,8 @@ export type PopperDataObject = {
         popper: PopperOffset;
     };
     placement: string;
+    /** Set by popper.js `hide` modifier when the reference element is out of bounds. */
+    hide?: boolean;
 };
 export type PopperOptions = {
     placement: string;
@@ -146,6 +148,9 @@ export type TetherProps = {
     repositionOnResize?: boolean;
     /** When true, Popper.js uses fixed positioning math (must match CSS `position: fixed` on the popper). */
     positionFixed?: boolean;
+    /** When true, popper's `hide` modifier checks whether the anchor is clipped by any of its scroll parents
+       or the viewport, and reports it as `data.hide` in `onPopperUpdate`. */
+    hideWhenTargetClipped?: boolean;
 };
 export type TetherState = {
     isMounted: boolean;

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

@@ -4,3 +4,28 @@ export declare function toPopperPlacement(placement: TetherPlacement): string;
  * Takes the offset passed from popper.js and normalizes it
  */
 export declare function parsePopperOffset(offset: PopperOffset): NormalizedOffset;
+/**
+ * Returns true when no part of the reference is visible after clipping it by every
+ * scroll parent (nested scroll containers) and the viewport.
+ */
+export declare function isReferenceClipped(reference: Element, scrollParents?: Array<Element | Window>): boolean;
+type HideModifierData = {
+    hide?: boolean;
+    instance: {
+        reference: Element;
+        scheduleUpdate: () => void;
+        state: {
+            scrollParents?: Array<Element | Window>;
+        };
+        options?: {
+            eventsEnabled?: boolean;
+        };
+    };
+};
+/**
+ * Replacement for popper.js v1 `hide` modifier. The default one only checks the `preventOverflow`
+ * boundary (viewport by default), this one checks all clipping parents.
+ * Popper re-runs modifiers on scroll of any registered parent, including parents with overflow hidden.
+ */
+export declare function hideWhenReferenceClipped<T extends HideModifierData>(data: T): T;
+export {};

package/esm/baseui/layer/utils.js

@@ -1,3 +1,4 @@
+import { __read, __spreadArray } from "tslib";
 export function toPopperPlacement(placement) {
     return placement.replace(/(Top|Left)$/, '-start').replace(/(Right|Bottom)$/, '-end');
 }
@@ -10,3 +11,73 @@ export function parsePopperOffset(offset) {
         left: Math.floor(offset.left || 0),
     };
 }
+// Visible (padding-box) area of a scroll parent, excluding borders and scrollbars
+function getClipRect(scrollParent) {
+    if ('document' in scrollParent) {
+        var _a = scrollParent.document.documentElement, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        return { top: 0, left: 0, bottom: clientHeight, right: clientWidth };
+    }
+    var _b = scrollParent.getBoundingClientRect(), top = _b.top, left = _b.left;
+    var clipTop = top + scrollParent.clientTop;
+    var clipLeft = left + scrollParent.clientLeft;
+    return {
+        top: clipTop,
+        left: clipLeft,
+        bottom: clipTop + scrollParent.clientHeight,
+        right: clipLeft + scrollParent.clientWidth,
+    };
+}
+function getClippingParents(reference) {
+    var _a;
+    var clippingParents = [];
+    var ownerWindow = (_a = reference.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : window;
+    var parent = reference.parentElement;
+    while (parent) {
+        var _b = ownerWindow.getComputedStyle(parent), overflow = _b.overflow, overflowX = _b.overflowX, overflowY = _b.overflowY;
+        if (/(auto|scroll|overlay|hidden|clip)/.test("".concat(overflow, " ").concat(overflowX, " ").concat(overflowY))) {
+            clippingParents.push(parent);
+        }
+        parent = parent.parentElement;
+    }
+    return clippingParents;
+}
+/**
+ * Returns true when no part of the reference is visible after clipping it by every
+ * scroll parent (nested scroll containers) and the viewport.
+ */
+export function isReferenceClipped(reference, scrollParents) {
+    var _a;
+    if (scrollParents === void 0) { scrollParents = []; }
+    var _b = reference.getBoundingClientRect(), top = _b.top, left = _b.left, bottom = _b.bottom, right = _b.right;
+    var viewport = (_a = reference.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : window;
+    // viewport is always a clipping boundary, even when popper event listeners are disabled
+    __spreadArray(__spreadArray([], __read(scrollParents), false), [viewport], false).forEach(function (scrollParent) {
+        var clip = getClipRect(scrollParent);
+        top = Math.max(top, clip.top);
+        left = Math.max(left, clip.left);
+        bottom = Math.min(bottom, clip.bottom);
+        right = Math.min(right, clip.right);
+    });
+    // strict comparison so zero-sized references (e.g. collapsed text anchors) are not treated as clipped
+    return bottom < top || right < left;
+}
+/**
+ * Replacement for popper.js v1 `hide` modifier. The default one only checks the `preventOverflow`
+ * boundary (viewport by default), this one checks all clipping parents.
+ * Popper re-runs modifiers on scroll of any registered parent, including parents with overflow hidden.
+ */
+export function hideWhenReferenceClipped(data) {
+    var _a;
+    var _b = data.instance, reference = _b.reference, scheduleUpdate = _b.scheduleUpdate, state = _b.state, options = _b.options;
+    var scrollParents = (_a = state.scrollParents) !== null && _a !== void 0 ? _a : (state.scrollParents = []);
+    if ((options === null || options === void 0 ? void 0 : options.eventsEnabled) !== false) {
+        getClippingParents(reference).forEach(function (parent) {
+            if (!scrollParents.includes(parent)) {
+                scrollParents.push(parent);
+                parent.addEventListener('scroll', scheduleUpdate, { passive: true });
+            }
+        });
+    }
+    data.hide = isReferenceClipped(reference, scrollParents);
+    return data;
+}

package/esm/baseui/popover/popover.js

@@ -31,6 +31,7 @@ function getDefaultState(props) {
         isLayerMounted: false,
         autoFocusAfterPositioning: false,
         contentHost: null,
+        isTargetClipped: false,
     };
 }
 var PopoverInner = /** @class */ (function (_super) {
@@ -40,13 +41,23 @@ var PopoverInner = /** @class */ (function (_super) {
         _this.anchorRef = React.createRef();
         _this.popperRef = React.createRef();
         _this.arrowRef = React.createRef();
+        _this.focusedBeforeTargetClipped = null;
+        _this.focusMovedWhileTargetClipped = false;
         /**
          * 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
+        // @ts-ignore -- Popover types are a mess
         _this.state = getDefaultState(_this.props);
+        _this.onFocusInWhileTargetClipped = function (event) {
+            if (event.target !== document.body && event.target !== document.documentElement) {
+                _this.focusMovedWhileTargetClipped = true;
+            }
+        };
+        _this.onMouseDownWhileTargetClipped = function () {
+            _this.focusMovedWhileTargetClipped = true;
+        };
         _this.animateIn = function () {
             if (_this.props.isOpen) {
                 _this.setState({ isAnimating: true });
@@ -60,8 +71,9 @@ var PopoverInner = /** @class */ (function (_super) {
                     _this.setState({
                         isAnimating: false,
                         // Reset to ideal placement specified in props
-                        // @ts-ignore
+                        // @ts-ignore -- Popover types are a mess
                         placement: _this.props.placement,
+                        isTargetClipped: false,
                     });
                 }, _this.props.animateOutTime || ANIMATE_OUT_TIME);
             }
@@ -97,10 +109,11 @@ var PopoverInner = /** @class */ (function (_super) {
         _this.onPopperUpdate = function (normalizedOffsets, data) {
             var placement = fromPopperPlacement(data.placement) || PLACEMENT.top;
             _this.setState({
-                // @ts-ignore
+                // @ts-ignore -- Popover types are a mess
                 arrowOffset: normalizedOffsets.arrow,
                 popoverOffset: normalizedOffsets.popper,
                 placement: placement,
+                isTargetClipped: Boolean(_this.props.hideWhenTargetClipped && data.hide),
             });
             // Now that element has been positioned, we can animate it in
             _this.animateInTimer = setTimeout(_this.animateIn, ANIMATE_IN_TIME);
@@ -159,6 +172,9 @@ var PopoverInner = /** @class */ (function (_super) {
         if (prevProps.placement !== this.props.placement) {
             this.setState({ placement: (_a = this.props.placement) !== null && _a !== void 0 ? _a : PLACEMENT.auto });
         }
+        if (prevState.isTargetClipped !== this.state.isTargetClipped) {
+            this.onTargetClippedChange();
+        }
         if (__DEV__) {
             if (!this.anchorRef.current) {
                 // eslint-disable-next-line no-console -- logging error in dev mode
@@ -184,6 +200,40 @@ var PopoverInner = /** @class */ (function (_super) {
     };
     PopoverInner.prototype.componentWillUnmount = function () {
         this.clearTimers();
+        this.stopTrackingFocusWhileTargetClipped();
+    };
+    PopoverInner.prototype.stopTrackingFocusWhileTargetClipped = function () {
+        document.removeEventListener('focusin', this.onFocusInWhileTargetClipped);
+        document.removeEventListener('mousedown', this.onMouseDownWhileTargetClipped);
+    };
+    /**
+     * Browsers blur the focused element when it becomes `visibility: hidden`.
+     * Restore that focus when the popover is shown again, unless the user has moved focus elsewhere meanwhile.
+     */
+    PopoverInner.prototype.onTargetClippedChange = function () {
+        var activeElement = document.activeElement;
+        if (this.state.isTargetClipped) {
+            var popper = this.popperRef.current;
+            this.focusedBeforeTargetClipped =
+                popper && activeElement && popper.contains(activeElement) ? activeElement : null;
+            this.focusMovedWhileTargetClipped = false;
+            if (this.focusedBeforeTargetClipped) {
+                document.addEventListener('focusin', this.onFocusInWhileTargetClipped);
+                document.addEventListener('mousedown', this.onMouseDownWhileTargetClipped);
+            }
+            return;
+        }
+        var elementToFocus = this.focusedBeforeTargetClipped;
+        var shouldRestoreFocus = this.props.isOpen &&
+            !this.focusMovedWhileTargetClipped &&
+            (elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.isConnected) &&
+            (!activeElement || activeElement === document.body || activeElement === document.documentElement);
+        this.stopTrackingFocusWhileTargetClipped();
+        this.focusedBeforeTargetClipped = null;
+        this.focusMovedWhileTargetClipped = false;
+        if (shouldRestoreFocus && elementToFocus) {
+            elementToFocus.focus({ preventScroll: true });
+        }
     };
     PopoverInner.prototype.clearTimers = function () {
         [
@@ -268,14 +318,13 @@ var PopoverInner = /** @class */ (function (_super) {
         return anchorProps;
     };
     PopoverInner.prototype.getPopoverBodyProps = function () {
+        var _a;
         var bodyProps = {};
-        var popoverId = this.getPopoverIdAttr();
+        var popoverId = (_a = this.getPopoverIdAttr()) !== null && _a !== void 0 ? _a : undefined;
         if (this.isAccessibilityTypeMenu()) {
-            // @ts-ignore
             bodyProps.id = popoverId;
         }
         else if (this.isAccessibilityTypeTooltip()) {
-            // @ts-ignore
             bodyProps.id = popoverId;
             bodyProps.role = 'tooltip';
         }
@@ -287,12 +336,11 @@ var PopoverInner = /** @class */ (function (_super) {
     };
     PopoverInner.prototype.getSharedProps = function () {
         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;
+        var _d = this.state, isAnimating = _d.isAnimating, arrowOffset = _d.arrowOffset, popoverOffset = _d.popoverOffset, placement = _d.placement, isTargetClipped = _d.isTargetClipped;
         return {
             $showArrow: !!showArrow,
             $arrowOffset: arrowOffset,
             $popoverOffset: popoverOffset,
-            // @ts-ignore
             $placement: placement,
             $isAnimating: isAnimating,
             $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
@@ -300,6 +348,7 @@ var PopoverInner = /** @class */ (function (_super) {
             $popoverMargin: popoverMargin,
             $isHoverTrigger: this.isHoverTrigger(),
             $positionFixed: positionFixed,
+            $isTargetClipped: isTargetClipped,
         };
     };
     PopoverInner.prototype.getAnchorFromChildren = function () {
@@ -324,7 +373,7 @@ var PopoverInner = /** @class */ (function (_super) {
             return React.cloneElement(anchor, anchorProps);
         }
         return (
-        // @ts-ignore
+        // @ts-expect-error - there's a null in anchorProps.id
         _jsx(Box, __assign({ "$as": "span" }, anchorProps, { children: anchor }), "popover-anchor"));
     };
     PopoverInner.prototype.renderPopover = function (renderedContent) {
@@ -368,7 +417,7 @@ var PopoverInner = /** @class */ (function (_super) {
                         // and have it replaced with the TetherBehavior props overrides
                         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, 
+                        placement: this.props.placement, repositionOnResize: this.props.repositionOnResize, positionFixed: this.props.positionFixed, hideWhenTargetClipped: this.props.hideWhenTargetClipped }, { 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
@@ -387,9 +436,8 @@ var PopoverInner = /** @class */ (function (_super) {
 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)));
+    // @ts-expect-error - ref type mismatch
+    return _jsx(PopoverInner, __assign({ id: props.id || gID, ref: innerRef }, props));
 };
 Popover.defaultProps = defaultProps;
 export default Popover;

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

@@ -117,7 +117,7 @@ var StatefulContainer = /** @class */ (function (_super) {
     };
     StatefulContainer.prototype.render = function () {
         var _this = this;
-        var _a = this.props, accessibilityType = _a.accessibilityType, autoFocus = _a.autoFocus, animateOutTime = _a.animateOutTime, dismissOnClickOutside = _a.dismissOnClickOutside, 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 _a = this.props, accessibilityType = _a.accessibilityType, autoFocus = _a.autoFocus, animateOutTime = _a.animateOutTime, dismissOnClickOutside = _a.dismissOnClickOutside, 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, hideWhenTargetClipped = _a.hideWhenTargetClipped;
         var popoverProps = {
             accessibilityType: accessibilityType,
             animateOutTime: animateOutTime,
@@ -158,6 +158,7 @@ var StatefulContainer = /** @class */ (function (_super) {
             focusOptions: focusOptions,
             repositionOnResize: repositionOnResize,
             positionFixed: positionFixed,
+            hideWhenTargetClipped: hideWhenTargetClipped,
         };
         popoverProps.onEsc = this.onEsc;
         if (dismissOnClickOutside) {

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

@@ -30,6 +30,7 @@ export var popoverBodyStyle = function (_, props) {
         opposite = 'block-end';
     var marginStyles = {};
     if (opposite) {
+        // eslint-disable-next-line @sprinklrjs/hds-no-dynamic-classes -- all of these have been explicitly handled
         var property = "--sw-margin-".concat(opposite);
         marginStyles[property] = "".concat(($showArrow ? ARROW_SIZE : 0) + $popoverMargin, "px");
     }
@@ -46,6 +47,7 @@ export var Body = styled('div', 'absolute top-0 left-[--sw-left-directional] tra
     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
+    // eslint-disable-next-line @sprinklrjs/hds-no-dynamic-classes -- all of these have been explicitly handled
     return _opposite ? "m".concat(_opposite[0], "-[--sw-margin-").concat(opposite, "]") : '';
 }, function (_, _a) {
     var $isOpen = _a.$isOpen;
@@ -59,6 +61,9 @@ export var Body = styled('div', 'absolute top-0 left-[--sw-left-directional] tra
 }, function (_, _a) {
     var $positionFixed = _a.$positionFixed;
     return ($positionFixed ? 'transform-none fixed top-[--sw-top]' : '');
+}, function (_, _a) {
+    var $isTargetClipped = _a.$isTargetClipped;
+    return ($isTargetClipped ? 'invisible pointer-events-none' : '');
 });
 Body.displayName = 'Body';
 export var Arrow = styled('div', 'h-[--sw-height] w-[--sw-width] absolute forced-colors:border-1');

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

@@ -84,6 +84,10 @@ export type BasePopoverProps = {
     repositionOnResize?: boolean;
     /** Uses the position, left and top properties instead of transform to adjust the popover **/
     positionFixed?: boolean;
+    /** Hides (without unmounting) the popover while its target is fully clipped by any scroll container
+     * or the viewport, and shows it again once the target scrolls back into view.
+     */
+    hideWhenTargetClipped?: boolean;
 };
 export type PopoverProps = BasePopoverProps & {
     /** Content that should trigger the popover to be shown (also acts as the anchor against
@@ -138,6 +142,7 @@ export type PopoverPrivateState = {
     isMounted: boolean;
     autoFocusAfterPositioning: boolean;
     contentHost: HTMLElement | null;
+    isTargetClipped: boolean;
 };
 export type ArrowStylePropsArg = {
     $arrowOffset: Offset;
@@ -152,6 +157,8 @@ export type BodyStylePropsArg = {
     $placement: TetherPlacement;
     $showArrow: boolean;
     $popoverMargin: number;
+    $positionFixed: boolean;
+    $isTargetClipped: boolean;
 };
 export type InnerStylePropsArg = {};
 export type SharedStylePropsArg = {} & ArrowStylePropsArg & BodyStylePropsArg;

package/esm/popover/popover.js

@@ -17,7 +17,7 @@ import { getPopperOptions } from './utils';
 // @ts-ignore -- displayName is not typed in BasePopover
 BasePopover.displayName = 'BaseUIPopover';
 var Popover = React.forwardRef(function (_a, ref) {
-    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _g = _a.viewportAsBoundary, viewportAsBoundary = _g === void 0 ? true : _g, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
+    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _g = _a.viewportAsBoundary, viewportAsBoundary = _g === void 0 ? true : _g, hideWhenTargetClipped = _a.hideWhenTargetClipped, restProps = __rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "popperOptions", "ignoreBoundary", "viewportAsBoundary", "hideWhenTargetClipped"]);
     var _h = useStyle(), isRTL = _h.isRTL, theme = _h.theme;
     var focusLockProps = useFocusLock({ returnFocus: returnFocus, focusLock: focusLock });
     var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, StyledArrowTriangle), 2), ArrowTriangle = _j[0], arrowTriangleProps = _j[1];
@@ -57,7 +57,7 @@ var Popover = React.forwardRef(function (_a, ref) {
     }
     var id = useUniqueId();
     var mergedPopperOptions = useMemo(function () { return (__assign(__assign({}, getPopperOptions({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
-    return (_jsx(Layer, __assign({ zIndex: Z_INDEX.POPOVER }, layerProps, { children: _jsx(BasePopover, __assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef }, focusLockProps, { popperOptions: mergedPopperOptions }, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), "CheckCompliance<Popover>") })) })));
+    return (_jsx(Layer, __assign({ zIndex: Z_INDEX.POPOVER }, layerProps, { children: _jsx(BasePopover, __assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef }, focusLockProps, { hideWhenTargetClipped: hideWhenTargetClipped, popperOptions: mergedPopperOptions }, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), "CheckCompliance<Popover>") })) })));
 });
 Popover.displayName = 'Popover';
 Popover.__standard = 'Component<Popover>';

package/esm/tooltip/disabled-tooltip-container.d.ts

@@ -16,6 +16,7 @@ declare const DisabledTooltipContainer: {
         popperOptions?: any;
         repositionOnResize?: boolean | undefined;
         positionFixed?: boolean | undefined;
+        hideWhenTargetClipped?: boolean | undefined;
         accessibilityType?: "none" | "menu" | "tooltip" | undefined;
         animateOutTime?: number | undefined;
         'data-baseweb'?: string | undefined;

package/esm/tooltip/stateful-tooltip-container.d.ts

@@ -16,6 +16,7 @@ declare const StatefulContainer: {
         popperOptions?: any;
         repositionOnResize?: boolean | undefined;
         positionFixed?: boolean | undefined;
+        hideWhenTargetClipped?: boolean | undefined;
         accessibilityType?: "none" | "menu" | "tooltip" | undefined;
         animateOutTime?: number | undefined;
         'data-baseweb'?: string | undefined;

package/esm/tooltip/stateful-tooltip.d.ts

@@ -19,6 +19,7 @@ declare const StatefulTooltip: {
         popperOptions?: any;
         repositionOnResize?: boolean | undefined;
         positionFixed?: boolean | undefined;
+        hideWhenTargetClipped?: boolean | undefined;
         accessibilityType?: "none" | "menu" | "tooltip" | undefined;
         animateOutTime?: number | undefined;
         'data-baseweb'?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.14.2",
+  "version": "14.14.3",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -101,7 +101,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.14.2",
+    "@sprinklrjs/spaceweb-themes": "14.14.3",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

package/popover/popover.js

@@ -19,7 +19,7 @@ var utils_1 = require("./utils");
 // @ts-ignore -- displayName is not typed in BasePopover
 popover_1.Popover.displayName = 'BaseUIPopover';
 var Popover = React.forwardRef(function (_a, ref) {
-    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _g = _a.viewportAsBoundary, viewportAsBoundary = _g === void 0 ? true : _g, restProps = tslib_1.__rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
+    var overrides = _a.overrides, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'auto' : _b, accessibilityType = _a.accessibilityType, _c = _a.triggerType, triggerType = _c === void 0 ? 'click' : _c, _d = _a.showArrow, showArrow = _d === void 0 ? false : _d, targetElement = _a.targetElement, isOpen = _a.isOpen, _e = _a.focusLock, focusLock = _e === void 0 ? false : _e, _f = _a.returnFocus, returnFocus = _f === void 0 ? triggerType === 'click' : _f, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _g = _a.viewportAsBoundary, viewportAsBoundary = _g === void 0 ? true : _g, hideWhenTargetClipped = _a.hideWhenTargetClipped, restProps = tslib_1.__rest(_a, ["overrides", "children", "placement", "accessibilityType", "triggerType", "showArrow", "targetElement", "isOpen", "focusLock", "returnFocus", "popperOptions", "ignoreBoundary", "viewportAsBoundary", "hideWhenTargetClipped"]);
     var _h = (0, style_1.useStyle)(), isRTL = _h.isRTL, theme = _h.theme;
     var focusLockProps = (0, hooks_1.useFocusLock)({ returnFocus: returnFocus, focusLock: focusLock });
     var _j = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ArrowTriangle, styled_components_1.StyledArrowTriangle), 2), ArrowTriangle = _j[0], arrowTriangleProps = _j[1];
@@ -59,7 +59,7 @@ var Popover = React.forwardRef(function (_a, ref) {
     }
     var id = (0, useUniqueId_1.default)();
     var mergedPopperOptions = (0, react_1.useMemo)(function () { return (tslib_1.__assign(tslib_1.__assign({}, (0, utils_1.getPopperOptions)({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
-    return ((0, jsx_runtime_1.jsx)(Layer, tslib_1.__assign({ zIndex: layer_1.Z_INDEX.POPOVER }, layerProps, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover, tslib_1.__assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef }, focusLockProps, { popperOptions: mergedPopperOptions }, { children: (0, jsx_runtime_1.jsx)(PopoverEnhancer_1.PopoverChildEnhancer, tslib_1.__assign({ targetElement: targetElement }, { children: childNode }), "CheckCompliance<Popover>") })) })));
+    return ((0, jsx_runtime_1.jsx)(Layer, tslib_1.__assign({ zIndex: layer_1.Z_INDEX.POPOVER }, layerProps, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover, tslib_1.__assign({ id: id }, restProps, mappedProps, { showArrow: showArrow, isOpen: isOpen, overrides: _overrides, innerRef: combinedRef }, focusLockProps, { hideWhenTargetClipped: hideWhenTargetClipped, popperOptions: mergedPopperOptions }, { children: (0, jsx_runtime_1.jsx)(PopoverEnhancer_1.PopoverChildEnhancer, tslib_1.__assign({ targetElement: targetElement }, { children: childNode }), "CheckCompliance<Popover>") })) })));
 });
 Popover.displayName = 'Popover';
 Popover.__standard = 'Component<Popover>';

package/tooltip/disabled-tooltip-container.d.ts

@@ -16,6 +16,7 @@ declare const DisabledTooltipContainer: {
         popperOptions?: any;
         repositionOnResize?: boolean | undefined;
         positionFixed?: boolean | undefined;
+        hideWhenTargetClipped?: boolean | undefined;
         accessibilityType?: "none" | "menu" | "tooltip" | undefined;
         animateOutTime?: number | undefined;
         'data-baseweb'?: string | undefined;

package/tooltip/stateful-tooltip-container.d.ts

@@ -16,6 +16,7 @@ declare const StatefulContainer: {
         popperOptions?: any;
         repositionOnResize?: boolean | undefined;
         positionFixed?: boolean | undefined;
+        hideWhenTargetClipped?: boolean | undefined;
         accessibilityType?: "none" | "menu" | "tooltip" | undefined;
         animateOutTime?: number | undefined;
         'data-baseweb'?: string | undefined;

package/tooltip/stateful-tooltip.d.ts

@@ -19,6 +19,7 @@ declare const StatefulTooltip: {
         popperOptions?: any;
         repositionOnResize?: boolean | undefined;
         positionFixed?: boolean | undefined;
+        hideWhenTargetClipped?: boolean | undefined;
         accessibilityType?: "none" | "menu" | "tooltip" | undefined;
         animateOutTime?: number | undefined;
         'data-baseweb'?: string | undefined;