@jetbrains/ring-ui-built 7.0.58 → 7.0.60-beta.0

package/README.md

@@ -4,6 +4,7 @@
 [![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://github.com/JetBrains#jetbrains-on-github)
 
 - [Design guildelines](https://www.jetbrains.com/help/ring-ui/welcome.html)
+- [Figma library](https://www.figma.com/design/j7UivSrGze5xCDKrqzR7Fa/RingUI--Community)
 - [Usage examples in Storybook][docsite]
 - [GitHub repository](https://github.com/JetBrains/ring-ui)
 - [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)

package/components/alert/alert.js

@@ -39,6 +39,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 
 var styles = {"alert":"ring-alert-alert","alertInline":"ring-alert-alertInline","error":"ring-alert-error","icon":"ring-alert-icon","caption":"ring-alert-caption","withCloseButton":"ring-alert-withCloseButton","badge":"ring-alert-badge","loader":"ring-alert-loader","close":"ring-alert-close","animationOpen":"ring-alert-animationOpen","show":"ring-alert-show","animationClosing":"ring-alert-animationClosing","animationShaking":"ring-alert-animationShaking","shaking":"ring-alert-shaking"};
 

package/components/alert-service/alert-service.d.ts

@@ -5,10 +5,11 @@ export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
     message: ReactNode;
     ref?: Ref<Alert>;
 }
+export declare const DEFAULT_ALERT_TIMEOUT = 10000;
 /**
  * @name Alert Service
  */
-declare class AlertService {
+export declare class AlertService {
     defaultTimeout: number;
     showingAlerts: AlertItem[];
     containerElement: HTMLDivElement;

package/components/alert-service/alert-service.js

@@ -41,15 +41,17 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 
 const _excluded = ["message", "key"],
   _excluded2 = ["onCloseRequest", "onClose"];
+const DEFAULT_ALERT_TIMEOUT = 10000; // 10 seconds
 /**
  * @name Alert Service
  */
 class AlertService {
   constructor() {
-    _defineProperty(this, "defaultTimeout", 0);
+    _defineProperty(this, "defaultTimeout", DEFAULT_ALERT_TIMEOUT);
     // This alerts are stored in inverse order (last shown is first in array)
     _defineProperty(this, "showingAlerts", []);
     _defineProperty(this, "containerElement", document.createElement('div'));
@@ -161,4 +163,4 @@ class AlertService {
 }
 const alertService = new AlertService();
 
-export { alertService as default };
+export { AlertService, DEFAULT_ALERT_TIMEOUT, alertService as default };

package/components/auth/auth.js

@@ -47,6 +47,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../alert/container.js';
 import '../link/link.js';
 import '../_helpers/link.js';

package/components/auth/auth__core.js

@@ -55,6 +55,7 @@ import 'sniffr';
 import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../alert/container.js';
 import 'simply-uuid';
 

package/components/auth/down-notification.js

@@ -44,6 +44,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/link.js';
 
 var styles = {"title":"ring-down-notification-title","error":"ring-down-notification-error"};

package/components/auth/iframe-flow.js

@@ -46,6 +46,7 @@ import '../popup/popup.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../loader-screen/loader-screen.js';

package/components/auth/storage.js

@@ -42,6 +42,7 @@ import 'sniffr';
 import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../alert/container.js';
 
 /**

package/components/auth-dialog/auth-dialog.js

@@ -32,6 +32,7 @@ import '../popup/popup.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '@jetbrains/icons/chevron-down';

package/components/auth-dialog-service/auth-dialog-service.js

@@ -43,6 +43,7 @@ import '../popup/popup.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../heading/heading.js';

package/components/avatar-stack/avatar-stack.js

@@ -67,6 +67,7 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 
 var styles = {"avatarStack":"ring-avatar-stack-avatarStack","extraText":"ring-avatar-stack-extraText","item":"ring-avatar-stack-item","size20":"ring-avatar-stack-size20","size24":"ring-avatar-stack-size24","size28":"ring-avatar-stack-size28","size32":"ring-avatar-stack-size32","size40":"ring-avatar-stack-size40","size56":"ring-avatar-stack-size56","hovered":"ring-avatar-stack-hovered","extra":"ring-avatar-stack-extra ring-avatar-stack-item","extraButton":"ring-avatar-stack-extraButton ring-global-resetButton"};
 

package/components/clipboard/clipboard.js

@@ -42,6 +42,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../alert/container.js';
 
 const ALERT_DELAY = 1000;

package/components/confirm/confirm.js

@@ -33,6 +33,7 @@ import 'core-js/modules/es.string.replace.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '@jetbrains/icons/chevron-down';

package/components/confirm-service/confirm-service.js

@@ -44,6 +44,7 @@ import '../popup/popup.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../panel/panel.js';

package/components/data-list/item.js

@@ -122,6 +122,7 @@ class Item extends PureComponent {
     if (showMoreLessButton === moreLessButtonStates.MORE || showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
       moreLessButton = jsxs(Text, {
         info: true,
+        size: Text.Size.S,
         children: [jsx(Link, {
           inherit: true,
           pseudo: true,
@@ -134,6 +135,7 @@ class Item extends PureComponent {
     } else if (showMoreLessButton === moreLessButtonStates.LESS) {
       moreLessButton = jsx(Text, {
         info: true,
+        size: Text.Size.S,
         children: jsx(Link, {
           inherit: true,
           pseudo: true,

package/components/date-picker/date-picker.js

@@ -40,6 +40,7 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-12px-down';
@@ -103,6 +104,7 @@ const PopupComponent = _ref => {
     } = _ref,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return jsx(Popup, _objectSpread2(_objectSpread2({
+    cssPositioning: true,
     hidden: hidden,
     className: className,
     ref: popupRef,
@@ -268,6 +270,7 @@ class DatePicker extends PureComponent {
     }, dropdownProps), {}, {
       children: jsx(PopupComponent, {
         className: popupClassName,
+        cssPositioning: true,
         popupRef: this.popupRef,
         onClear: clear ? this.clear : null,
         datePopupProps: _objectSpread2(_objectSpread2({}, datePopupProps), {}, {

package/components/dialog/dialog.js

@@ -41,6 +41,7 @@ import '../_helpers/button__classes.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import 'scrollbar-width';
 
 const _excluded = ["show", "showCloseButton", "onOverlayClick", "onCloseAttempt", "onEscPress", "onCloseClick", "children", "className", "contentClassName", "trapFocus", "data-test", "closeButtonInside", "portalTarget", "label", "closeButtonTitle", "dense", "shortcutOptions", "native", "modal", "preventBodyScroll"];

package/components/dropdown-menu/dropdown-menu.js

@@ -66,6 +66,7 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 
 const _excluded = ["anchor", "pinned", "active", "activeListItemId", "listId"],
   _excluded2 = ["id", "anchor", "ariaLabel", "data", "onSelect", "menuProps", "children"],

package/components/error-bubble/error-bubble.js

@@ -21,6 +21,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 
 var styles = {"errorBubblePopup":"ring-error-bubble-errorBubblePopup","errorBubbleWrapper":"ring-error-bubble-errorBubbleWrapper","errorBubble":"ring-error-bubble-errorBubble"};
 
@@ -41,6 +42,7 @@ class ErrorBubble extends PureComponent {
       className: styles.errorBubbleWrapper,
       "data-test": "ring-error-bubble-wrapper",
       children: [children && Children.map(children, child => /*#__PURE__*/cloneElement(child, _objectSpread2(_objectSpread2({}, child.props), restProps))), restProps.error && jsx(Popup, {
+        cssPositioning: true,
         trapFocus: false,
         className: styles.errorBubblePopup,
         hidden: false,

package/components/global/theme.js

@@ -22,3 +22,4 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';

package/components/header/header.js

@@ -30,6 +30,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';

package/components/header/profile.js

@@ -69,6 +69,7 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import '../i18n/i18n.js';
 
 const _excluded = ["className", "activeClassName", "closeOnSelect", "hasUpdates", "onLogout", "user", "profileUrl", "LinkComponent", "onSwitchUser", "renderPopupItems", "onRevertPostponement", "showApplyChangedUser", "showName", "showLogIn", "showLogOut", "showSwitchUser", "renderGuest", "translations", "size", "round", "loading", "onLogin", "menuProps", "onShow", "onHide"];

package/components/header/services.js

@@ -39,6 +39,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import '../_helpers/header.js';
 import '../link/link.js';
 import '../_helpers/link.js';
@@ -89,6 +90,7 @@ class Services extends PureComponent {
       anchor: makeAnchor(loading),
       initShown: initShown,
       children: jsxs(Popup, {
+        cssPositioning: true,
         className: classNames(styles.services, {
           [darkStyles.dark]: theme === Theme.DARK
         }),

package/components/header/smart-profile.js

@@ -47,6 +47,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../alert/container.js';
 import '../link/link.js';
 import '../_helpers/link.js';

package/components/header/smart-services.js

@@ -39,6 +39,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import '../_helpers/theme.js';
 import './header-icon.js';
 import '../_helpers/header.js';

package/components/input/input.d.ts

@@ -17,8 +17,8 @@ export interface InputTranslations {
     clear: string;
 }
 export interface InputBaseProps {
-    size: Size;
-    enableShortcuts: boolean | string[];
+    size?: Size;
+    enableShortcuts?: boolean | string[];
     children?: string | undefined;
     inputClassName?: string | null | undefined;
     label?: ReactNode;
@@ -37,11 +37,11 @@ export interface InputBaseProps {
 type Override<D, S> = Omit<D, keyof S> & S;
 export type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
     multiline?: false | undefined;
-    inputRef: Ref<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
 };
 type TextAreaSpecificProps = Override<TextareaHTMLAttributes<HTMLTextAreaElement>, InputBaseProps> & {
     multiline: true;
-    inputRef: Ref<HTMLTextAreaElement>;
+    inputRef?: Ref<HTMLTextAreaElement>;
 };
 export type InputProps = InputSpecificProps | TextAreaSpecificProps;
 export declare class Input extends PureComponent<InputProps> {

package/components/login-dialog/login-dialog.js

@@ -43,6 +43,7 @@ import '../popup/popup.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../loader/loader.js';

package/components/login-dialog/service.js

@@ -43,6 +43,7 @@ import '../popup/popup.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../loader-screen/loader-screen.js';

package/components/message/message.js

@@ -27,6 +27,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
@@ -178,6 +179,7 @@ class Message extends Component {
             var _translations$gotIt, _translations$dismiss;
             return jsx(Popup, _objectSpread2(_objectSpread2({
               ref: this.popupRef,
+              cssPositioning: true,
               hidden: false,
               directions: popupDirections,
               className: classNames(classes, themeClasses),

package/components/old-browsers-message/white-list.js

@@ -8,11 +8,11 @@ const MAJOR_VERSION_INDEX = 0;
 /**
  * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
  */
-if (!["and_chr 137", "and_ff 139", "and_qq 14.9", "and_uc 15.5", "android 137", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 128", "chrome 126", "chrome 125", "chrome 123", "chrome 121", "chrome 109", "edge 137", "edge 136", "edge 135", "firefox 140", "firefox 139", "firefox 138", "firefox 137", "firefox 128", "firefox 115", "ios_saf 18.5", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 17.4", "ios_saf 16.6-16.7", "ios_saf 16.3", "ios_saf 16.1", "ios_saf 15.6-15.8", "ios_saf 14.0-14.4", "ios_saf 12.2-12.5", "ios_saf 11.0-11.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 117", "opera 116", "safari 18.5", "safari 18.4", "safari 18.3", "safari 17.6", "safari 17.1", "safari 16.6", "safari 15.6", "samsung 28", "samsung 27"]) {
+if (!["and_chr 138", "and_ff 140", "and_qq 14.9", "and_uc 15.5", "android 138", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 125", "chrome 123", "chrome 116", "chrome 112", "chrome 109", "edge 138", "edge 137", "edge 136", "firefox 141", "firefox 140", "firefox 139", "firefox 128", "firefox 118", "firefox 115", "ios_saf 18.5", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 17.4", "ios_saf 16.6-16.7", "ios_saf 16.3", "ios_saf 16.1", "ios_saf 15.6-15.8", "ios_saf 11.0-11.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 117", "opera 116", "safari 18.5", "safari 18.4", "safari 18.3", "safari 17.6", "safari 17.1", "safari 16.6", "safari 15.6", "samsung 28", "samsung 27"]) {
   // eslint-disable-next-line no-console
   console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
 }
-const SUPPORTED = ["and_chr 137", "and_ff 139", "and_qq 14.9", "and_uc 15.5", "android 137", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 128", "chrome 126", "chrome 125", "chrome 123", "chrome 121", "chrome 109", "edge 137", "edge 136", "edge 135", "firefox 140", "firefox 139", "firefox 138", "firefox 137", "firefox 128", "firefox 115", "ios_saf 18.5", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 17.4", "ios_saf 16.6-16.7", "ios_saf 16.3", "ios_saf 16.1", "ios_saf 15.6-15.8", "ios_saf 14.0-14.4", "ios_saf 12.2-12.5", "ios_saf 11.0-11.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 117", "opera 116", "safari 18.5", "safari 18.4", "safari 18.3", "safari 17.6", "safari 17.1", "safari 16.6", "safari 15.6", "samsung 28", "samsung 27"] || [];
+const SUPPORTED = ["and_chr 138", "and_ff 140", "and_qq 14.9", "and_uc 15.5", "android 138", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 125", "chrome 123", "chrome 116", "chrome 112", "chrome 109", "edge 138", "edge 137", "edge 136", "firefox 141", "firefox 140", "firefox 139", "firefox 128", "firefox 118", "firefox 115", "ios_saf 18.5", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 17.4", "ios_saf 16.6-16.7", "ios_saf 16.3", "ios_saf 16.1", "ios_saf 15.6-15.8", "ios_saf 11.0-11.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 117", "opera 116", "safari 18.5", "safari 18.4", "safari 18.3", "safari 17.6", "safari 17.1", "safari 16.6", "safari 15.6", "samsung 28", "samsung 27"] || [];
 const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
 const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
   var _item$match;

package/components/pager/pager.js

@@ -53,6 +53,7 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import '../list/list.js';
 import 'core-js/modules/es.symbol.description.js';
 import 'react-virtualized/dist/es/List';

package/components/popup/popup.d.ts

@@ -32,6 +32,7 @@ export interface BasePopupProps {
     withTail?: boolean;
     tailOffset?: number;
     largeBorderRadius?: boolean;
+    cssPositioning?: boolean;
     anchorElement?: HTMLElement | null | undefined;
     target?: string | Element | null | undefined;
     className?: string | null | undefined;
@@ -83,6 +84,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
         trapFocus: boolean;
         autoFocusFirst: boolean;
         legacy: boolean;
+        cssPositioning: boolean;
     };
     state: PopupState;
     componentDidMount(): void;

package/components/popup/popup.js

@@ -15,13 +15,14 @@ import TabTrap from '../tab-trap/tab-trap.js';
 import position from './position.js';
 import { DEFAULT_DIRECTIONS, MaxHeight, MinWidth, Dimension, Directions, Display } from './popup.consts.js';
 import { PopupTargetContext, PopupTarget } from './popup.target.js';
+import { supportsCSSAnchorPositioning, setCSSAnchorPositioning } from './position-css.js';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import 'core-js/modules/es.array.sort.js';
 
-var styles = {"popup":"ring-popup-popup ring-global-font","largeBorderRadius":"ring-popup-largeBorderRadius","hidden":"ring-popup-hidden","showing":"ring-popup-showing","attached":"ring-popup-attached"};
+var styles = {"popup":"ring-popup-popup ring-global-font","jsAnchoredPopup":"ring-popup-jsAnchoredPopup","cssAnchoredPopup":"ring-popup-cssAnchoredPopup","largeBorderRadius":"ring-popup-largeBorderRadius","hidden":"ring-popup-hidden","showing":"ring-popup-showing","attached":"ring-popup-attached"};
 
 const isPossibleClientSideNavigation = event => {
   const target = event.target;
@@ -103,24 +104,39 @@ class Popup extends PureComponent {
     });
     _defineProperty(this, "_updatePosition", () => {
       const popup = this.popup;
+      const anchor = this._getAnchor();
       if (popup) {
-        popup.style.position = 'absolute';
-        if (this.isVisible()) {
-          const {
-            styles: style,
-            direction
-          } = this.position();
-          Object.entries(style).forEach(_ref => {
-            let [key, value] = _ref;
-            const propKey = key;
-            if (typeof value === 'number') {
-              popup.style[propKey] = "".concat(value, "px");
-            } else {
-              popup.style[propKey] = value.toString();
-            }
+        if (this.props.cssPositioning && supportsCSSAnchorPositioning() && anchor) {
+          // Use CSS Anchor positioning
+          setCSSAnchorPositioning({
+            popup,
+            anchor,
+            uid: this.uid,
+            minWidth: this.props.minWidth,
+            top: this.props.top,
+            left: this.props.left,
+            directions: this.props.directions,
+            offset: this.props.offset
           });
-          if (direction != null) {
-            this._updateDirection(direction);
+        } else {
+          popup.style.position = 'absolute';
+          if (this.isVisible()) {
+            const {
+              styles: style,
+              direction
+            } = this.position();
+            Object.entries(style).forEach(_ref => {
+              let [key, value] = _ref;
+              const propKey = key;
+              if (typeof value === 'number') {
+                popup.style[propKey] = "".concat(value, "px");
+              } else {
+                popup.style[propKey] = value.toString();
+              }
+            });
+            if (direction != null) {
+              this._updateDirection(direction);
+            }
           }
         }
         this.setState(this.calculateDisplay);
@@ -229,16 +245,20 @@ class Popup extends PureComponent {
       clearTimeout(this._prevTimeout);
       this._prevTimeout = window.setTimeout(() => {
         this._listenersEnabled = true;
-        this.listeners.add(window, 'resize', this._redraw);
-        if (this.props.autoPositioningOnScroll) {
-          this.listeners.add(window, 'scroll', this._redraw);
+        // CSS positioning doesn't need resize/scroll listeners as it's handled by CSS
+        // But we need them if CSS positioning isn't supported
+        if (!this.props.cssPositioning || !supportsCSSAnchorPositioning()) {
+          this.listeners.add(window, 'resize', this._redraw);
+          if (this.props.autoPositioningOnScroll) {
+            this.listeners.add(window, 'scroll', this._redraw);
+          }
+          let el = this._getAnchor();
+          while (el) {
+            this.listeners.add(el, 'scroll', this._redraw);
+            el = el.parentElement;
+          }
         }
         this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
-        let el = this._getAnchor();
-        while (el) {
-          this.listeners.add(el, 'scroll', this._redraw);
-          el = el.parentElement;
-        }
       }, 0);
       return;
     }
@@ -286,8 +306,11 @@ class Popup extends PureComponent {
       'data-test': dataTest,
       largeBorderRadius
     } = this.props;
+    const useCssPositioning = this.props.cssPositioning && supportsCSSAnchorPositioning();
     const showing = this.state.display === Display.SHOWING;
     const classes = classNames(className, styles.popup, {
+      [styles.jsAnchoredPopup]: !useCssPositioning,
+      [styles.cssAnchoredPopup]: useCssPositioning,
       [styles.attached]: attached,
       [styles.hidden]: hidden,
       [styles.showing]: showing,
@@ -352,7 +375,8 @@ _defineProperty(Popup, "defaultProps", {
   attached: false,
   trapFocus: false,
   autoFocusFirst: false,
-  legacy: false
+  legacy: false,
+  cssPositioning: false
 });
 _defineProperty(Popup, "PopupProps", {
   Directions,

package/components/popup/position-css.d.ts

@@ -0,0 +1,14 @@
+import { Directions } from './popup.consts';
+export declare const supportsCSSAnchorPositioning: () => boolean;
+interface SetCSSAnchorPositioningParams {
+    popup: HTMLElement;
+    anchor: HTMLElement;
+    uid: string;
+    minWidth?: number | 'target' | null;
+    top?: number;
+    left?: number;
+    directions: readonly Directions[];
+    offset?: number;
+}
+export declare const setCSSAnchorPositioning: ({ popup, anchor, uid, minWidth, top, left, directions, offset, }: SetCSSAnchorPositioningParams) => void;
+export {};