@sprinklrjs/spaceweb 14.14.1 → 14.14.3

package/asyncSelect/hooks/useAsyncSelect.d.ts

@@ -58,6 +58,7 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
         OverlayContentContainer?: import("../../overrides").Override<any> | undefined;
     } | undefined;
     mountNode?: HTMLElement | null | undefined;
+    options?: import("../../select").Options;
     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
     noResultsMsg?: import("react").ReactNode;
     ownerDocument?: Document | undefined;
@@ -156,7 +157,6 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
     onSelectResetsInput?: boolean | undefined;
     openOnClick?: boolean | undefined;
     startOpen?: boolean | undefined;
-    options?: import("../../select").Options;
     searchable?: boolean | undefined;
     valueComponent?: import("react").ComponentType<any> | undefined;
     valueKey?: string | undefined;
@@ -254,6 +254,7 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
         OverlayContentContainer?: import("../../overrides").Override<any> | undefined;
     } | undefined;
     mountNode?: HTMLElement | null | undefined;
+    options?: import("../../select").Options;
     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
     noResultsMsg?: import("react").ReactNode;
     ownerDocument?: Document | undefined;
@@ -352,7 +353,6 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
     onSelectResetsInput?: boolean | undefined;
     openOnClick?: boolean | undefined;
     startOpen?: boolean | undefined;
-    options?: import("../../select").Options;
     searchable?: boolean | undefined;
     valueComponent?: import("react").ComponentType<any> | undefined;
     valueKey?: string | undefined;
@@ -453,6 +453,7 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
         OverlayContentContainer?: import("../../overrides").Override<any> | undefined;
     } | undefined;
     mountNode?: HTMLElement | null | undefined;
+    options?: import("../../select").Options;
     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
     noResultsMsg?: import("react").ReactNode;
     ownerDocument?: Document | undefined;
@@ -551,7 +552,6 @@ export declare const useAsyncSelect: ({ loadOptions, initialOptions, resolveSele
     onSelectResetsInput?: boolean | undefined;
     openOnClick?: boolean | undefined;
     startOpen?: boolean | undefined;
-    options?: import("../../select").Options;
     searchable?: boolean | undefined;
     valueComponent?: import("react").ComponentType<any> | undefined;
     valueKey?: string | undefined;

package/asyncSelect/hooks/useGroupedAsyncSelect.d.ts

@@ -28,6 +28,7 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     onChange?: ((params: import("../../select").OnChangeParams) => unknown) | undefined;
     $as?: import("react").ElementType | undefined;
     mountNode?: HTMLElement | null | undefined;
+    options?: import("../../select").Options;
     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
     noResultsMsg?: import("react").ReactNode;
     ownerDocument?: Document | undefined;
@@ -124,7 +125,6 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     onSelectResetsInput?: boolean | undefined;
     openOnClick?: boolean | undefined;
     startOpen?: boolean | undefined;
-    options?: import("../../select").Options;
     searchable?: boolean | undefined;
     valueComponent?: import("react").ComponentType<any> | undefined;
     valueKey?: string | undefined;
@@ -192,6 +192,7 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     onChange?: ((params: import("../../select").OnChangeParams) => unknown) | undefined;
     $as?: import("react").ElementType | undefined;
     mountNode?: HTMLElement | null | undefined;
+    options?: import("../../select").Options;
     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
     noResultsMsg?: import("react").ReactNode;
     ownerDocument?: Document | undefined;
@@ -288,7 +289,6 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     onSelectResetsInput?: boolean | undefined;
     openOnClick?: boolean | undefined;
     startOpen?: boolean | undefined;
-    options?: import("../../select").Options;
     searchable?: boolean | undefined;
     valueComponent?: import("react").ComponentType<any> | undefined;
     valueKey?: string | undefined;
@@ -358,6 +358,7 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     onChange?: ((params: import("../../select").OnChangeParams) => unknown) | undefined;
     $as?: import("react").ElementType | undefined;
     mountNode?: HTMLElement | null | undefined;
+    options?: import("../../select").Options;
     placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
     noResultsMsg?: import("react").ReactNode;
     ownerDocument?: Document | undefined;
@@ -454,7 +455,6 @@ export declare const useGroupedAsyncSelect: ({ onChange, showSelectAll, selectAl
     onSelectResetsInput?: boolean | undefined;
     openOnClick?: boolean | undefined;
     startOpen?: boolean | undefined;
-    options?: import("../../select").Options;
     searchable?: boolean | undefined;
     valueComponent?: import("react").ComponentType<any> | undefined;
     valueKey?: string | undefined;

package/baseui/layer/tether.js

@@ -100,7 +100,8 @@ var Tether = /** @class */ (function (_super) {
         if (this.props.popperRef &&
             (this.state.isMounted !== prevState.isMounted ||
                 (prevProps === null || prevProps === void 0 ? void 0 : prevProps.placement) !== this.props.placement ||
-                (prevProps === null || prevProps === void 0 ? void 0 : prevProps.positionFixed) !== this.props.positionFixed)) {
+                (prevProps === null || prevProps === void 0 ? void 0 : prevProps.positionFixed) !== this.props.positionFixed ||
+                (prevProps === null || prevProps === void 0 ? void 0 : prevProps.hideWhenTargetClipped) !== this.props.hideWhenTargetClipped)) {
             if (!this.props.anchorRef) {
                 if (process.env.NODE_ENV !== 'production') {
                     // eslint-disable-next-line no-console -- debug logging
@@ -124,7 +125,7 @@ var Tether = /** @class */ (function (_super) {
             return;
         var popperInitOptions = tslib_1.__assign({ 
             // Recommended placement (popper may ignore if it causes a viewport overflow, etc)
-            placement: (0, utils_1.toPopperPlacement)(placement), modifiers: tslib_1.__assign({ 
+            placement: (0, utils_1.toPopperPlacement)(placement), modifiers: tslib_1.__assign(tslib_1.__assign({ 
                 // Passing the arrow ref will measure the arrow when calculating styles
                 arrow: {
                     element: this.props.arrowRef,
@@ -140,7 +141,9 @@ var Tether = /** @class */ (function (_super) {
                     enabled: true,
                     fn: this.onPopperUpdate,
                     order: 900,
-                }, preventOverflow: { enabled: true } }, modifiers), positionFixed: this.props.positionFixed }, restOptions);
+                }, preventOverflow: { enabled: true } }, modifiers), (this.props.hideWhenTargetClipped && {
+                hide: tslib_1.__assign(tslib_1.__assign({}, modifiers === null || modifiers === void 0 ? void 0 : modifiers.hide), { enabled: true, fn: utils_1.hideWhenReferenceClipped }),
+            })), positionFixed: this.props.positionFixed }, restOptions);
         this.popper = new popper_js_1.default(this.props.anchorRef, this.props.popperRef, popperInitOptions);
     };
     Tether.prototype.destroyPopover = function () {

package/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/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/baseui/layer/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parsePopperOffset = exports.toPopperPlacement = void 0;
+exports.hideWhenReferenceClipped = exports.isReferenceClipped = exports.parsePopperOffset = exports.toPopperPlacement = void 0;
+var tslib_1 = require("tslib");
 function toPopperPlacement(placement) {
     return placement.replace(/(Top|Left)$/, '-start').replace(/(Right|Bottom)$/, '-end');
 }
@@ -15,3 +16,75 @@ function parsePopperOffset(offset) {
     };
 }
 exports.parsePopperOffset = parsePopperOffset;
+// 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.
+ */
+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
+    tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__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;
+}
+exports.isReferenceClipped = isReferenceClipped;
+/**
+ * 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.
+ */
+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;
+}
+exports.hideWhenReferenceClipped = hideWhenReferenceClipped;

package/baseui/popover/popover.js

@@ -33,6 +33,7 @@ function getDefaultState(props) {
         isLayerMounted: false,
         autoFocusAfterPositioning: false,
         contentHost: null,
+        isTargetClipped: false,
     };
 }
 var PopoverInner = /** @class */ (function (_super) {
@@ -42,13 +43,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 });
@@ -62,8 +73,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 || constants_1.ANIMATE_OUT_TIME);
             }
@@ -99,10 +111,11 @@ var PopoverInner = /** @class */ (function (_super) {
         _this.onPopperUpdate = function (normalizedOffsets, data) {
             var placement = (0, utils_1.fromPopperPlacement)(data.placement) || constants_1.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, constants_1.ANIMATE_IN_TIME);
@@ -161,6 +174,9 @@ var PopoverInner = /** @class */ (function (_super) {
         if (prevProps.placement !== this.props.placement) {
             this.setState({ placement: (_a = this.props.placement) !== null && _a !== void 0 ? _a : constants_1.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
@@ -186,6 +202,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 () {
         [
@@ -270,14 +320,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';
         }
@@ -289,12 +338,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 ? 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;
+        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 || constants_1.ANIMATE_OUT_TIME,
@@ -302,6 +350,7 @@ var PopoverInner = /** @class */ (function (_super) {
             $popoverMargin: popoverMargin,
             $isHoverTrigger: this.isHoverTrigger(),
             $positionFixed: positionFixed,
+            $isTargetClipped: isTargetClipped,
         };
     };
     PopoverInner.prototype.getAnchorFromChildren = function () {
@@ -326,7 +375,7 @@ var PopoverInner = /** @class */ (function (_super) {
             return React.cloneElement(anchor, anchorProps);
         }
         return (
-        // @ts-ignore
+        // @ts-expect-error - there's a null in anchorProps.id
         (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "$as": "span" }, anchorProps, { children: anchor }), "popover-anchor"));
     };
     PopoverInner.prototype.renderPopover = function (renderedContent) {
@@ -370,7 +419,7 @@ var PopoverInner = /** @class */ (function (_super) {
                         // and have it replaced with the TetherBehavior props overrides
                         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, 
+                        placement: this.props.placement, repositionOnResize: this.props.repositionOnResize, positionFixed: this.props.positionFixed, hideWhenTargetClipped: this.props.hideWhenTargetClipped }, { 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
@@ -389,9 +438,8 @@ 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, tslib_1.__assign({ id: props.id || gID, 
-        // @ts-expect-error
-        ref: innerRef }, props)));
+    // @ts-expect-error - ref type mismatch
+    return (0, jsx_runtime_1.jsx)(PopoverInner, tslib_1.__assign({ id: props.id || gID, ref: innerRef }, props));
 };
 Popover.defaultProps = default_props_1.default;
 exports.default = Popover;

package/baseui/popover/stateful-container.js

@@ -119,7 +119,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,
@@ -160,6 +160,7 @@ var StatefulContainer = /** @class */ (function (_super) {
             focusOptions: focusOptions,
             repositionOnResize: repositionOnResize,
             positionFixed: positionFixed,
+            hideWhenTargetClipped: hideWhenTargetClipped,
         };
         popoverProps.onEsc = this.onEsc;
         if (dismissOnClickOutside) {

package/baseui/popover/styled-components.js

@@ -33,6 +33,7 @@ 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 ? constants_1.ARROW_SIZE : 0) + $popoverMargin, "px");
     }
@@ -50,6 +51,7 @@ exports.Body = (0, style_1.styled)('div', 'absolute top-0 left-[--sw-left-direct
     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;
@@ -63,6 +65,9 @@ exports.Body = (0, style_1.styled)('div', 'absolute top-0 left-[--sw-left-direct
 }, 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' : '');
 });
 exports.Body.displayName = 'Body';
 exports.Arrow = (0, style_1.styled)('div', 'h-[--sw-height] w-[--sw-width] absolute forced-colors:border-1');

package/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/color-picker/CustomColorSelector.js

@@ -10,6 +10,7 @@ var stack_1 = require("../stack");
 var box_1 = require("../box");
 var colors_1 = require("../helpers/colors");
 var transparentBackground_1 = tslib_1.__importDefault(require("../icon/components/transparentBackground"));
+var constants_1 = require("./constants");
 var CustomPointer = function () { return ((0, jsx_runtime_1.jsx)(box_1.Box, { style: function (_a) {
         var rtlCompatible = _a.rtlCompatible;
         return rtlCompatible({ transform: 'translate(-50%, -2px)' });
@@ -64,6 +65,11 @@ var CustomEditableInput = function (_a) {
         // @ts-ignore -- @types/react-color doesn't properly include types for input
         var input = editableInput.input;
         var fireChange = function () {
+            var inputValue = input.value;
+            if (inputValue === String(value))
+                return;
+            if (label === 'Hex' && (0, colors_1.normalizeHex)(inputValue) === (0, colors_1.normalizeHex)(String(value)))
+                return;
             onChange(typedValue.current);
         };
         var keydownHandler = function (event) {
@@ -76,16 +82,15 @@ var CustomEditableInput = function (_a) {
             input.removeEventListener('blur', fireChange);
             input.removeEventListener('keydown', keydownHandler);
         };
-    }, [editableInput, label, onChange]);
+    }, [editableInput, label, onChange, value]);
     return ((0, jsx_runtime_1.jsx)(common_1.EditableInput, { style: EDITABLE_INPUT_STYLES, label: label, value: value, onChange: handleChange, ref: setInput }));
 };
 function getNumberWithFallback(input, fallback) {
-    var _fallback = fallback !== null && fallback !== void 0 ? fallback : 0;
-    if (!input)
-        return _fallback;
-    if (Number.isNaN(+input))
-        return _fallback;
-    return parseInt(input);
+    if (fallback === void 0) { fallback = 0; }
+    var trimmedInput = input === null || input === void 0 ? void 0 : input.trim();
+    if (!trimmedInput || Number.isNaN(+trimmedInput))
+        return fallback;
+    return parseInt(trimmedInput);
 }
 var ColorPickerComponent = function (_props) {
     // react-color intercepts the onChange function, wraps the data, and forwards it accordingly
@@ -99,8 +104,9 @@ var ColorPickerComponent = function (_props) {
     // color which cause a flickering issue
     //https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/components/sketch/SketchFields.js#L51
     var _a = rgb !== null && rgb !== void 0 ? rgb : {}, r = _a.r, g = _a.g, b = _a.b, a = _a.a;
+    var hexInput = (_hex === null || _hex === void 0 ? void 0 : _hex.toLowerCase()) === 'transparent' ? '#000000' : _hex;
     // react-color doesn't support alpha hexes, so we need to insert it ourselves
-    var hex = (0, colors_1.normalizeHexWithAlpha)(_hex, a);
+    var hex = (0, colors_1.normalizeHexWithAlpha)(hexInput, a);
     var handleHueChange = (0, react_1.useCallback)(function (data) {
         // If alpha was zero and the saturation/lightness is changed, reset alpha to full
         if ('a' in data && data.a === 0) {
@@ -113,15 +119,19 @@ var ColorPickerComponent = function (_props) {
         // react-color emitted data is very dynamic and uses properties from labels
         if ('Hex' in data) {
             var newHex = data.Hex;
-            var parsedRgba = (0, colors_1.hexToRgb)(data.Hex);
+            if (newHex.toLowerCase() === 'transparent' && hex !== constants_1.TRANSPARENT_HEX) {
+                onChange(constants_1.TRANSPARENT_RGBA);
+                onChangeComplete({ rgb: constants_1.TRANSPARENT_RGBA });
+                return;
+            }
+            if (!(0, colors_1.isValidHex)(newHex))
+                return;
+            var parsedRgba = (0, colors_1.hexToRgb)(newHex);
             var newRgba = enableAlphaSelector ? parsedRgba : tslib_1.__assign(tslib_1.__assign({}, parsedRgba), { a: 1 }); // No alpha values when enableAlphaSelector is disabled
             onChange(newRgba);
-            // No need to invoke onChange based on isValidHex as onChange is standard handler for react-color
-            // CustomPicker HOC takes care that onChange is invoked with correct values in case of invalid value of rgba.
-            if ((0, colors_1.isValidHex)(newHex))
-                onChangeComplete({ rgb: newRgba });
+            onChangeComplete({ rgb: newRgba });
         }
-        else if (data.R || data.G || data.B || data.A) {
+        else if ('R' in data || 'G' in data || 'B' in data || 'A' in data) {
             var _a = tslib_1.__read(Object.keys(data), 1), changedKey = _a[0];
             // Reset alpha IF:
             // Changed value is R/G/B AND current alpha is 0 AND new value is different from old value
@@ -135,7 +145,7 @@ var ColorPickerComponent = function (_props) {
             onChange(newRgba);
             onChangeComplete({ rgb: newRgba });
         }
-    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a]);
+    }, [onChange, onChangeComplete, enableAlphaSelector, r, g, b, a, hex]);
     return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 4 }, { children: [renderColorSuggestionPanel ? renderColorSuggestionPanel(hex) : null, (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative w-full h-32 rounded-16 overflow-hidden", style: { height: '150px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Saturation, tslib_1.__assign({}, props, { onChange: handleHueChange })) })), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: "vertical", gap: 2 }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "flex gap-2 justify-between ml-2" }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex flex-col items-start gap-2" }, { children: [(0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "flex items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: enableAlphaSelector ? '261px' : '228px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Hue, tslib_1.__assign({ pointer: CustomPointer, radius: "24px" }, props, { onChange: handleHueChange })) })), (0, jsx_runtime_1.jsx)(exports.ColorPreview, { color: rgb })] })), enableAlphaSelector ? ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: "relative h-3", style: { width: '261px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Alpha, tslib_1.__assign({ pointer: CustomPointer, radius: "24px", style: { container: { margin: 0 } } }, props)) }))) : null] })) })), (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "grid w-full gap-2", 
                         // 5 columns with alpha, 4 columns without
                         style: {

package/color-picker/constants.d.ts

@@ -1,3 +1,4 @@
+import type { RGBColor } from 'react-color';
 export declare const GRADIENT_TYPE: {
     LINEAR: string;
     RADIAL: string;
@@ -12,3 +13,5 @@ export declare const COLOR_TYPE: {
     readonly GRADIENT: "gradient";
 };
 export declare const SWATCHES_PER_ROW = 10;
+export declare const TRANSPARENT_HEX = "#00000000";
+export declare const TRANSPARENT_RGBA: RGBColor;

package/color-picker/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SWATCHES_PER_ROW = exports.COLOR_TYPE = exports.TAB_IDS = exports.GRADIENT_TYPE = void 0;
+exports.TRANSPARENT_RGBA = exports.TRANSPARENT_HEX = exports.SWATCHES_PER_ROW = exports.COLOR_TYPE = exports.TAB_IDS = exports.GRADIENT_TYPE = void 0;
 exports.GRADIENT_TYPE = {
     LINEAR: 'linear',
     RADIAL: 'radial',
@@ -11,3 +11,5 @@ exports.COLOR_TYPE = {
     GRADIENT: 'gradient',
 };
 exports.SWATCHES_PER_ROW = 10;
+exports.TRANSPARENT_HEX = '#00000000';
+exports.TRANSPARENT_RGBA = { r: 0, g: 0, b: 0, a: 0 };