@coinbase/cds-web 8.62.0 → 8.66.0

package/esm/alpha/select/Select.js

@@ -3,7 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { autoUpdate, flip, useFloating } from '@floating-ui/react-dom';
 import { cx } from '../../cx';
 import { useClickOutside } from '../../hooks/useClickOutside';
@@ -93,6 +93,34 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
     ref: refs.floating,
     excludeRefs: [refs.reference]
   });
+  const pendingTypeAheadKeyRef = useRef(null);
+  const handleControlKeyDown = useCallback(event => {
+    if (disabled || open) return;
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    const key = event.key;
+    if (/^[a-z]$/.test(key)) {
+      pendingTypeAheadKeyRef.current = key;
+      setOpen(true);
+    }
+  }, [disabled, open, setOpen]);
+  useEffect(() => {
+    var _accessibilityRoles$o;
+    if (!open || !pendingTypeAheadKeyRef.current) return;
+    const key = pendingTypeAheadKeyRef.current;
+    pendingTypeAheadKeyRef.current = null;
+    const floatingEl = refs.floating.current;
+    if (!floatingEl) return;
+    const optionRole = (_accessibilityRoles$o = accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option) !== null && _accessibilityRoles$o !== void 0 ? _accessibilityRoles$o : 'option';
+    const options = floatingEl.querySelectorAll("[role=\"".concat(optionRole, "\"]"));
+    const matchingOption = Array.from(options).find(option => {
+      var _option$textContent, _firstLetterMatch$;
+      const firstLetterMatch = (_option$textContent = option.textContent) === null || _option$textContent === void 0 ? void 0 : _option$textContent.match(/[a-z]/i);
+      return (firstLetterMatch === null || firstLetterMatch === void 0 || (_firstLetterMatch$ = firstLetterMatch[0]) === null || _firstLetterMatch$ === void 0 ? void 0 : _firstLetterMatch$.toLowerCase()) === key;
+    });
+    if (matchingOption) {
+      matchingOption.focus();
+    }
+  }, [open, refs.floating, accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option]);
   const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
   const controlStyles = useMemo(() => ({
     controlStartNode: styles === null || styles === void 0 ? void 0 : styles.controlStartNode,
@@ -165,6 +193,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       labelVariant: labelVariant,
       maxSelectedOptionsToShow: maxSelectedOptionsToShow,
       onChange: onChange,
+      onKeyDown: handleControlKeyDown,
       open: open,
       options: options,
       placeholder: placeholder,

package/esm/dropdown/Dropdown.js

@@ -170,6 +170,11 @@ const PopoverDropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
     }))
   });
 }));
+
+/**
+ * @deprecated Use PopoverPanel for interactive overlays with arbitrary content, or Select / SelectChip when presenting a list of selectable options. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('Dropdown', _props);
   const {

package/esm/dropdown/DropdownContent.js

@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, memo } from 'react';
+import { forwardRef, memo } from 'react';
 import { animateDropdownOpacityInConfig, animateDropdownOpacityOutConfig, animateDropdownTransformInConfig, animateDropdownTransformOutConfig } from '@coinbase/cds-common/animation/dropdown';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { m as motion } from 'framer-motion';
@@ -14,7 +14,18 @@ import { VStack } from '../layout/VStack';
 import { useMotionProps } from '../motion/useMotionProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const dropdownStaticClassName = 'cds-dropdown';
+
+/**
+ * @deprecated Use PopoverPanelContent within a PopoverPanel for interactive overlay content, or Select / SelectChip when presenting a list of selectable options. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
 const MotionVStack = motion(VStack);
+
+/**
+ * @deprecated Use PopoverPanelContent within a PopoverPanel for interactive overlay content, or Select / SelectChip when presenting a list of selectable options. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const DropdownContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       children,

package/esm/dropdown/useResponsiveHeight.js

@@ -3,6 +3,11 @@ import { useIsoEffect } from '../hooks/useIsoEffect';
 import { useTheme } from '../hooks/useTheme';
 import { getBrowserGlobals, isSSR } from '../utils/browser';
 const BOTTOM_GUTTER_SPACE = 2;
+
+/**
+ * @deprecated Import `useResponsivePanelMaxHeight` from `@coinbase/cds-web/popover` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export function useResponsiveHeight(_ref) {
   var _getBrowserGlobals;
   let {

package/esm/overlays/FocusTrap.js

@@ -141,7 +141,7 @@ export const FocusTrap = /*#__PURE__*/memo(_props => {
       event.preventDefault();
       const elementWithMatchingFirstLetter = focusableElements.find(el => {
         var _el$textContent;
-        const textContentFirstLetter = (_el$textContent = el.textContent) === null || _el$textContent === void 0 || (_el$textContent = _el$textContent.at(0)) === null || _el$textContent === void 0 ? void 0 : _el$textContent.toLowerCase();
+        const textContentFirstLetter = (_el$textContent = el.textContent) === null || _el$textContent === void 0 || (_el$textContent = _el$textContent[0]) === null || _el$textContent === void 0 ? void 0 : _el$textContent.toLowerCase();
         const eventKeyLowerCase = event.key.toLowerCase();
         return textContentFirstLetter === eventKeyLowerCase;
       });

package/esm/overlays/Toast.js

@@ -6,10 +6,10 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, memo, useCallback, useContext, useImperativeHandle, useRef, useState } from 'react';
 import { animateInBottomConfig, animateInOpacityConfig, animateOutBottomConfig, animateOutOpacityConfig } from '@coinbase/cds-common/animation/toast';
 import { ToastContext } from '@coinbase/cds-common/overlays/ToastProvider';
-import { m as motion, useAnimation } from 'framer-motion';
+import { m as motion } from 'framer-motion';
 import { Button } from '../buttons/Button';
 import { IconButton } from '../buttons/IconButton';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -48,24 +48,31 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     pauseTimer,
     resumeTimer
   } = useContext(ToastContext);
-  const animationControls = useAnimation();
+  const [motionState, setMotionState] = useState('enter');
+  const exitResolverRef = useRef(null);
   const motionProps = useMotionProps({
     enterConfigs: [animateInOpacityConfig, animateInBottomConfig],
     exitConfigs: [animateOutOpacityConfig, animateOutBottomConfig],
-    animate: animationControls,
+    animate: motionState,
     style: {
       bottom: bottomOffset
     }
   });
-  useEffect(() => {
-    void animationControls.start('enter');
-  }, [animationControls]);
-  const handleClose = useCallback(async () => {
+  const handleAnimationComplete = useCallback(definition => {
+    if (definition === 'exit') {
+      var _exitResolverRef$curr;
+      onDidHide === null || onDidHide === void 0 || onDidHide();
+      (_exitResolverRef$curr = exitResolverRef.current) === null || _exitResolverRef$curr === void 0 || _exitResolverRef$curr.call(exitResolverRef, true);
+      exitResolverRef.current = null;
+    }
+  }, [onDidHide]);
+  const handleClose = useCallback(() => {
     onWillHide === null || onWillHide === void 0 || onWillHide();
-    await animationControls.start('exit');
-    onDidHide === null || onDidHide === void 0 || onDidHide();
-    return true;
-  }, [onWillHide, onDidHide, animationControls]);
+    return new Promise(resolve => {
+      exitResolverRef.current = resolve;
+      setMotionState('exit');
+    });
+  }, [onWillHide]);
   useImperativeHandle(ref, () => ({
     hide: handleClose
   }), [handleClose]);
@@ -79,6 +86,7 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     children: /*#__PURE__*/_jsx(motion.div, _objectSpread(_objectSpread({}, motionProps), {}, {
       className: baseCss,
       "data-testid": "".concat(testID, "-motion"),
+      onAnimationComplete: handleAnimationComplete,
       children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
         justifyContent: "center",
         onMouseEnter: pauseTimer // persist toast when hovering

package/esm/overlays/index.js

@@ -10,6 +10,7 @@ export * from './modal/ModalFooter';
 export * from './modal/ModalHeader';
 export * from './overlay/Overlay';
 export * from './popover/Popover';
+export * from './popover/PopoverPanel';
 export * from './popover/PopoverProps';
 export * from './popover/usePopper';
 export * from './PortalProvider';

package/esm/overlays/modal/ModalHeader.js

@@ -1,4 +1,4 @@
-const _excluded = ["alignItems", "paddingX", "paddingY", "title", "onBackButtonClick", "backAccessibilityLabel", "backAccessibilityHint", "closeAccessibilityLabel", "closeAccessibilityHint"];
+const _excluded = ["alignItems", "paddingX", "paddingY", "font", "title", "onBackButtonClick", "backAccessibilityLabel", "backAccessibilityHint", "closeAccessibilityLabel", "closeAccessibilityHint"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -21,6 +21,7 @@ export const ModalHeader = _props => {
       alignItems = 'center',
       paddingX = 3,
       paddingY = 2,
+      font = 'headline',
       title,
       onBackButtonClick,
       backAccessibilityLabel,
@@ -45,6 +46,7 @@ export const ModalHeader = _props => {
   return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: alignItems,
     borderedBottom: !hideDividers,
+    font: font,
     paddingX: paddingX,
     paddingY: paddingY
   }, props), {}, {
@@ -62,14 +64,14 @@ export const ModalHeader = _props => {
       flexGrow: 1,
       justifyContent: "center",
       paddingX: 2,
-      children: title && /*#__PURE__*/_jsx(Text, {
+      children: title && (typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
         as: "h2",
         display: "block",
-        font: "headline",
+        font: "inherit",
         id: accessibilityLabelledBy,
         textAlign: "center",
         children: title
-      })
+      }) : title)
     }), !hideCloseButton && /*#__PURE__*/_jsx(Box, {
       justifyContent: "flex-end",
       children: /*#__PURE__*/_jsx(IconButton, {

package/esm/overlays/modal/ModalWrapper.js

@@ -11,6 +11,7 @@ import { NewAnimatePresence } from '../../animation/NewAnimatePresence';
 import { cx } from '../../cx';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { useScrollBlocker } from '../../hooks/useScrollBlocker';
+import { VStack } from '../../layout';
 import { Box } from '../../layout/Box';
 import { media } from '../../styles/media';
 import { Overlay } from '../overlay/Overlay';
@@ -65,11 +66,16 @@ export const ModalWrapper = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, r
         width: width
       }, props), {}, {
         children: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [!hideOverlay && /*#__PURE__*/_jsx(Overlay, {
+          children: [!hideOverlay ? /*#__PURE__*/_jsx(Overlay, {
             animated: true,
             className: cx(!dangerouslyDisableResponsiveness && modalOverlayResponsiveCss),
             onClick: !disableOverlayPress ? onOverlayPress : undefined,
             testID: "modal-overlay"
+          }) : /*#__PURE__*/_jsx(VStack, {
+            background: "transparent",
+            onClick: !disableOverlayPress ? onOverlayPress : undefined,
+            pin: "all",
+            position: "fixed"
           }), children]
         })
       }))

package/esm/overlays/popover/Popover.js

@@ -4,17 +4,19 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { forwardRef, memo, useCallback, useMemo } from 'react';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { autoPlacement, autoUpdate, flip, limitShift, offset, shift, useFloating } from '@floating-ui/react-dom';
 import { NewAnimatePresence } from '../../animation/NewAnimatePresence';
 import { cx } from '../../cx';
+import { useTheme } from '../../hooks/useTheme';
 import { Box } from '../../layout/Box';
 import { InvertedThemeProvider } from '../../system/ThemeProvider';
 import { FocusTrap } from '../FocusTrap';
 import { Overlay } from '../overlay/Overlay';
 import { Portal } from '../Portal';
 import { tooltipContainerId } from '../PortalProvider';
-import { usePopper } from './usePopper';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const subjectCss = "subjectCss-s1cgr9z4";
 const defaultContentPosition = {
@@ -27,10 +29,15 @@ const defaultContentPosition = {
 const blockCss = "blockCss-b13rnbro";
 
 /**
- * Popover is the internal recommended base component used for any overlay that is laid out with respect to a subject.
- * It is purposely a flexible component and is reserved for CDS internal usage.
+ * Low-level primitive that positions an arbitrary `content` node relative to a subject (trigger) element.
+ * It handles placement, portal rendering, and open/close wiring, but intentionally renders `content` as-is —
+ * it does not provide a styled surface, animation, or focus management.
+ *
+ * For a fully composed overlay with an animated elevated panel and focus trap, use {@link PopoverPanel} instead.
+ *
+ * @internal Reserved for CDS internal use only.
  */
-export const Popover = /*#__PURE__*/memo(_ref => {
+export const Popover = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     content,
     children,
@@ -57,14 +64,51 @@ export const Popover = /*#__PURE__*/memo(_ref => {
     respectNegativeTabIndex,
     autoFocusDelay,
     restoreFocusOnUnmount,
-    controlledElementAccessibilityProps
+    controlledElementAccessibilityProps,
+    style,
+    className
   } = _ref;
+  const theme = useTheme();
   const {
-    setSubject,
-    setPopper,
-    popperStyles,
-    popperAttributes
-  } = usePopper(contentPosition);
+    placement: rawPlacement = 'bottom',
+    skid = 0,
+    gap = 0,
+    offsetGap,
+    strategy
+  } = contentPosition;
+  const computedSkid = theme.space[skid];
+  const computedGap = theme.space[gap];
+  const getOffsetGap = offsetGap && gap - offsetGap;
+  const isAutoPlacement = typeof rawPlacement === 'string' && rawPlacement.startsWith('auto');
+  const middleware = useMemo(() => {
+    const middlewareList = [offset({
+      crossAxis: computedSkid,
+      mainAxis: getOffsetGap !== null && getOffsetGap !== void 0 ? getOffsetGap : computedGap
+    })];
+    if (isAutoPlacement) {
+      const alignment = rawPlacement === 'auto-start' ? 'start' : rawPlacement === 'auto-end' ? 'end' : undefined;
+      middlewareList.push(autoPlacement(alignment ? {
+        alignment
+      } : undefined));
+    } else {
+      middlewareList.push(flip());
+      middlewareList.push(shift({
+        crossAxis: true,
+        limiter: limitShift()
+      }));
+    }
+    return middlewareList;
+  }, [computedSkid, getOffsetGap, computedGap, isAutoPlacement, rawPlacement]);
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    placement: isAutoPlacement ? undefined : rawPlacement,
+    strategy,
+    middleware,
+    whileElementsMounted: autoUpdate
+  });
+  const mergedRef = useMergeRefs(ref, refs.setReference);
 
   // We use this to infer that hover events are triggering the mounting/dismounting of the content
   const hasHoverInteractions = !!onMouseEnter && !!onMouseLeave && !onPressSubject;
@@ -78,13 +122,13 @@ export const Popover = /*#__PURE__*/memo(_ref => {
   const handleCaptureEvents = useCallback(event => {
     event.stopPropagation();
   }, []);
-  const memoizedContent = useMemo(() => /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    ref: setPopper,
-    style: _objectSpread(_objectSpread({}, popperStyles.popper), {}, {
-      zIndex: zIndex.dropdown
-    })
-  }, popperAttributes.popper), {}, {
+  const memoizedContent = useMemo(() => /*#__PURE__*/_jsx("div", {
+    ref: refs.setFloating,
     onClick: handleCaptureEvents,
+    onMouseDown: handleCaptureEvents,
+    style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+      zIndex: zIndex.dropdown
+    }),
     children: /*#__PURE__*/_jsx(FocusTrap, {
       autoFocusDelay: autoFocusDelay,
       disableAutoFocus: disableAutoFocus,
@@ -101,7 +145,7 @@ export const Popover = /*#__PURE__*/memo(_ref => {
         children: content
       }))
     })
-  })), [setPopper, popperStyles.popper, popperAttributes.popper, handleCaptureEvents, autoFocusDelay, disableAutoFocus, disableFocusTrap, disableTypeFocus, focusTabIndexElements, handleClose, respectNegativeTabIndex, restoreFocusOnUnmount, testID, controlledElementAccessibilityProps, content]);
+  }), [refs.setFloating, floatingStyles, handleCaptureEvents, autoFocusDelay, disableAutoFocus, disableFocusTrap, disableTypeFocus, focusTabIndexElements, handleClose, respectNegativeTabIndex, restoreFocusOnUnmount, testID, controlledElementAccessibilityProps, content]);
   const renderContent = hasHoverInteractions ? memoizedContent : /*#__PURE__*/_jsx(Box, {
     "aria-label": accessibilityLabel,
     "aria-modal": "true",
@@ -114,18 +158,16 @@ export const Popover = /*#__PURE__*/memo(_ref => {
   });
   const Wrapper = invertColorScheme ? InvertedThemeProvider : React.Fragment;
   return /*#__PURE__*/_jsxs("div", {
-    className: block ? blockCss : undefined,
+    ref: mergedRef,
+    className: cx(subjectCss, block && blockCss, className),
     onBlur: onBlur,
+    onClick: disabled ? undefined : onPressSubject,
+    onFocus: disabled ? undefined : onFocus,
+    onMouseDown: disabled ? undefined : onMouseDown,
     onMouseEnter: disabled ? undefined : onMouseEnter,
     onMouseLeave: disabled ? undefined : onMouseLeave,
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: setSubject,
-      className: cx(subjectCss, block && blockCss),
-      onClick: disabled ? undefined : onPressSubject,
-      onFocus: disabled ? undefined : onFocus,
-      onMouseDown: disabled ? undefined : onMouseDown,
-      children: children
-    }), /*#__PURE__*/_jsx(NewAnimatePresence, {
+    style: style,
+    children: [children, /*#__PURE__*/_jsx(NewAnimatePresence, {
       children: shouldShowContent ? /*#__PURE__*/_jsx(Portal, {
         containerId: tooltipContainerId,
         disablePortal: disablePortal,
@@ -143,5 +185,6 @@ export const Popover = /*#__PURE__*/memo(_ref => {
       }) : undefined
     })]
   });
-});
+}));
+Popover.displayName = 'Popover';
 import "./Popover.css";

package/esm/overlays/popover/PopoverPanel.css

@@ -0,0 +1,2 @@
+@layer cds{.triggerContainerCss-tkun82{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+.blockCss-bqzogy1{width:100%;}}

package/esm/overlays/popover/PopoverPanel.js

@@ -0,0 +1,220 @@
+const _excluded = ["content", "showOverlay", "children", "visible", "onClose", "onOpen", "panelWidth", "minPanelWidth", "maxPanelWidth", "maxPanelHeight", "panelHeight", "testID", "disablePortal", "onBlur", "contentPosition", "block", "disabled", "restoreFocusOnUnmount", "style", "styles", "className", "classNames"],
+  _excluded2 = ["children", "content", "maxPanelHeight", "enableMobileModal", "onOpen", "onClose", "restoreFocusOnUnmount"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import useMeasure from 'react-use-measure';
+import { cx } from '../../cx';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import { useComponentConfig } from '../../hooks/useComponentConfig';
+import { FocusTrap } from '../FocusTrap';
+import { ModalWrapper } from '../modal/ModalWrapper';
+import { Popover } from './Popover';
+import { PopoverPanelContent } from './PopoverPanelContent';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const POPOVER_PANEL_MAX_HEIGHT = 300;
+export const popoverPanelClassNames = {
+  /** Elevated panel surface (`PopoverPanelContent`). */
+  content: 'cds-PopoverPanel-content',
+  /** Wrapper around `children` (the `Popover` root in floating layout, or the trigger `div` in the mobile modal). */
+  triggerContainer: 'cds-PopoverPanel-triggerContainer'
+};
+const NOOP = () => {};
+const defaultPopoverContentPositionConfig = {
+  gap: 0.5,
+  placement: 'bottom-start'
+};
+function usePopoverPanelImperativeHandle(ref, onOpen, onClose) {
+  useImperativeHandle(ref, () => ({
+    openPopover: onOpen,
+    closePopover: onClose
+  }), [onOpen, onClose]);
+}
+const triggerContainerCss = "triggerContainerCss-tkun82";
+const blockCss = "blockCss-bqzogy1";
+const MobilePopoverPanel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    onOpen = NOOP,
+    onClose = NOOP,
+    block,
+    content,
+    disablePortal,
+    visible,
+    panelWidth,
+    showOverlay,
+    minPanelWidth,
+    maxPanelWidth,
+    maxPanelHeight,
+    disabled,
+    controlledElementAccessibilityProps,
+    respectNegativeTabIndex,
+    restoreFocusOnUnmount,
+    style,
+    styles,
+    className,
+    classNames,
+    onBlur,
+    testID,
+    disableAutoFocus,
+    focusTabIndexElements,
+    autoFocusDelay
+  } = _ref;
+  usePopoverPanelImperativeHandle(ref, onOpen, onClose);
+  const handleCaptureEvents = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    _jsxs("div", {
+      className: cx(block ? blockCss : triggerContainerCss, popoverPanelClassNames.triggerContainer, className, classNames === null || classNames === void 0 ? void 0 : classNames.triggerContainer),
+      onBlur: onBlur,
+      onClick: disabled ? undefined : onOpen,
+      style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.triggerContainer),
+      children: [children, /*#__PURE__*/_jsx(ModalWrapper, _objectSpread(_objectSpread({
+        dangerouslyDisableResponsiveness: true,
+        disablePortal: disablePortal,
+        hideOverlay: !showOverlay,
+        onClick: handleCaptureEvents,
+        onOverlayPress: onClose,
+        testID: testID,
+        visible: visible
+      }, controlledElementAccessibilityProps), {}, {
+        children: /*#__PURE__*/_jsx(FocusTrap, {
+          autoFocusDelay: autoFocusDelay,
+          disableAutoFocus: disableAutoFocus,
+          focusTabIndexElements: focusTabIndexElements,
+          onEscPress: onClose,
+          respectNegativeTabIndex: respectNegativeTabIndex,
+          restoreFocusOnUnmount: restoreFocusOnUnmount,
+          children: /*#__PURE__*/_jsx(PopoverPanelContent, {
+            className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
+            maxHeight: maxPanelHeight,
+            maxWidth: maxPanelWidth,
+            minWidth: minPanelWidth,
+            style: styles === null || styles === void 0 ? void 0 : styles.content,
+            width: panelWidth,
+            children: content
+          })
+        })
+      }))]
+    })
+  );
+}));
+const FloatingPopoverPanel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      content,
+      showOverlay,
+      children,
+      visible,
+      onClose = NOOP,
+      onOpen = NOOP,
+      panelWidth: width,
+      minPanelWidth: minWidth,
+      maxPanelWidth: maxWidth,
+      maxPanelHeight: maxHeight = POPOVER_PANEL_MAX_HEIGHT,
+      panelHeight: height,
+      testID,
+      disablePortal,
+      onBlur,
+      contentPosition = defaultPopoverContentPositionConfig,
+      block,
+      disabled,
+      restoreFocusOnUnmount,
+      style,
+      styles,
+      className,
+      classNames
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  const [triggerRef, triggerBounds] = useMeasure();
+  const combinedContentPosition = useMemo(() => _objectSpread(_objectSpread({}, defaultPopoverContentPositionConfig), contentPosition), [contentPosition]);
+  const memoizedContent = useMemo(() => /*#__PURE__*/_jsx(PopoverPanelContent, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
+    height: height,
+    maxHeight: maxHeight,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    placement: combinedContentPosition.placement,
+    style: styles === null || styles === void 0 ? void 0 : styles.content,
+    width: width !== null && width !== void 0 ? width : triggerBounds.width,
+    children: content
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.content, height, maxHeight, maxWidth, minWidth, combinedContentPosition.placement, styles === null || styles === void 0 ? void 0 : styles.content, width, triggerBounds.width, content]);
+  usePopoverPanelImperativeHandle(ref, onOpen, onClose);
+  return /*#__PURE__*/_jsx(Popover, _objectSpread(_objectSpread({
+    ref: triggerRef,
+    block: block,
+    className: cx(!block && triggerContainerCss, popoverPanelClassNames.triggerContainer, className, classNames === null || classNames === void 0 ? void 0 : classNames.triggerContainer),
+    content: disabled ? undefined : memoizedContent,
+    contentPosition: combinedContentPosition,
+    disablePortal: disablePortal,
+    disabled: disabled,
+    onBlur: onBlur,
+    onClose: onClose,
+    onPressSubject: !visible ? onOpen : undefined,
+    restoreFocusOnUnmount: restoreFocusOnUnmount,
+    showOverlay: showOverlay,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.triggerContainer),
+    testID: testID,
+    visible: disabled ? false : visible
+  }, props), {}, {
+    children: children
+  }));
+}));
+
+/**
+ * Anchored floating panel  built on {@link Popover} and {@link PopoverPanelContent} without select context. Use for custom panel content.
+ * Imperative `openPopover` / `closePopover` are implemented in the floating and modal subcomponents (Dropdown continues to use `openMenu` / `closeMenu` on its ref).
+ */
+export const PopoverPanel = /*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('PopoverPanel', _props);
+  const {
+      children,
+      content,
+      maxPanelHeight = POPOVER_PANEL_MAX_HEIGHT,
+      enableMobileModal,
+      onOpen,
+      onClose,
+      restoreFocusOnUnmount = true
+    } = mergedProps,
+    props = _objectWithoutProperties(mergedProps, _excluded2);
+  const {
+    isPhone
+  } = useBreakpoints();
+  const [visible, setVisible] = useState(false);
+  const handleOpenPopover = useCallback(() => {
+    setVisible(true);
+    onOpen === null || onOpen === void 0 || onOpen();
+  }, [onOpen]);
+  const handleClosePopover = useCallback(() => {
+    setVisible(false);
+    onClose === null || onClose === void 0 || onClose();
+  }, [onClose]);
+  const resolvedContent = useMemo(() => typeof content === 'function' ? content({
+    closePopover: handleClosePopover
+  }) : content, [content, handleClosePopover]);
+  const sharedProps = _objectSpread({
+    maxPanelHeight,
+    onClose: handleClosePopover,
+    onOpen: handleOpenPopover,
+    restoreFocusOnUnmount,
+    visible,
+    content: resolvedContent
+  }, props);
+  return isPhone && enableMobileModal ? /*#__PURE__*/_jsx(MobilePopoverPanel, _objectSpread(_objectSpread({
+    ref: ref
+  }, sharedProps), {}, {
+    children: children
+  })) : /*#__PURE__*/_jsx(FloatingPopoverPanel, _objectSpread(_objectSpread({
+    ref: ref
+  }, sharedProps), {}, {
+    children: children
+  }));
+});
+import "./PopoverPanel.css";