@atlaskit/popup 1.17.1 → 1.18.0

package/dist/cjs/popup.js

@@ -12,6 +12,7 @@ var _reactUid = require("react-uid");
 var _layering = require("@atlaskit/layering");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
 var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
 var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger-ref");
@@ -19,6 +20,9 @@ var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger
 /** @jsx jsx */
 
 var defaultLayer = _constants.layers.layer();
+var wrapperStyles = (0, _primitives.xcss)({
+  position: 'relative'
+});
 var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var isOpen = _ref.isOpen,
     providedId = _ref.id,
@@ -44,6 +48,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
+    _ref$shouldFitContain = _ref.shouldFitContainer,
+    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
     strategy = _ref.strategy,
@@ -74,15 +80,16 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onClose: onClose,
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-    shouldRenderToParent: shouldRenderToParent,
+    shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
+    shouldFitContainer: shouldFitContainer,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy,
+    strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
     titleId: titleId
   }));
-  return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
+  var popupContent = (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
       ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
@@ -90,8 +97,14 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && (shouldRenderToParent ? renderPopperWrapper : (0, _react2.jsx)(_portal.default, {
+  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : (0, _react2.jsx)(_portal.default, {
     zIndex: zIndex
   }, renderPopperWrapper)));
+  if (shouldFitContainer) {
+    return (0, _react2.jsx)(_primitives.Box, {
+      xcss: wrapperStyles
+    }, popupContent);
+  }
+  return popupContent;
 });
 var _default = exports.default = Popup;

package/dist/es2019/popper-wrapper.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -11,6 +13,9 @@ import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { RepositionOnUpdate } from './reposition-on-update';
 import { useCloseManager } from './use-close-manager';
 import { useFocusManager } from './use-focus-manager';
+const popupFullWidthStyles = css({
+  width: '100%'
+});
 const popupStyles = css({
   display: 'block',
   boxSizing: 'border-box',
@@ -20,7 +25,7 @@ const popupStyles = css({
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   [CURRENT_SURFACE_CSS_VAR]: `var(--ds-surface-overlay, ${N0})`,
-  ':focus': {
+  '&:focus': {
     outline: 'none'
   }
 });
@@ -31,7 +36,7 @@ const popupOverflowStyles = css({
 // disables iframe pointer events while popup is open, except if iframe is nested inside popup
 // solves an issue of popup not being closed on iframe click
 const blockPointerEventsOnExternalIframeStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   'iframe:not([data-ds--level] iframe)': {
     pointerEvents: 'none'
   }
@@ -39,11 +44,12 @@ const blockPointerEventsOnExternalIframeStyles = css({
 const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     shouldRenderToParent,
+    shouldFitContainer,
     children,
     ...htmlAttributes
   } = props;
   return jsx("div", _extends({
-    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
+    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles, shouldFitContainer && popupFullWidthStyles]
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -65,6 +71,7 @@ function PopperWrapper({
   triggerRef,
   shouldUseCaptureOnOutsideClick,
   shouldRenderToParent,
+  shouldFitContainer,
   shouldDisableFocusLock,
   strategy,
   role,
@@ -130,13 +137,16 @@ function PopperWrapper({
           }
           setPopupRef(node);
         }
-      },
+      }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: style
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ,
       tabIndex: autoFocus ? 0 : undefined,
-      shouldRenderToParent: shouldRenderToParent
+      shouldRenderToParent: shouldRenderToParent,
+      shouldFitContainer: shouldFitContainer
     }, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
       styles: blockPointerEventsOnExternalIframeStyles
     }), jsx(RepositionOnUpdate, {

package/dist/es2019/popup.js

@@ -6,10 +6,14 @@ import { useUID } from 'react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
+import { Box, xcss } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from './popper-wrapper';
 import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
 const defaultLayer = layers.layer();
+const wrapperStyles = xcss({
+  position: 'relative'
+});
 export const Popup = /*#__PURE__*/memo(({
   isOpen,
   id: providedId,
@@ -28,6 +32,7 @@ export const Popup = /*#__PURE__*/memo(({
   zIndex = defaultLayer,
   shouldUseCaptureOnOutsideClick = false,
   shouldRenderToParent = false,
+  shouldFitContainer = false,
   shouldDisableFocusLock = false,
   strategy,
   role,
@@ -55,15 +60,16 @@ export const Popup = /*#__PURE__*/memo(({
     onClose: onClose,
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-    shouldRenderToParent: shouldRenderToParent,
+    shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
+    shouldFitContainer: shouldFitContainer,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy,
+    strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
     titleId: titleId
   }));
-  return jsx(Manager, null, jsx(Reference, null, ({
+  const popupContent = jsx(Manager, null, jsx(Reference, null, ({
     ref
   }) => {
     return trigger({
@@ -72,8 +78,14 @@ export const Popup = /*#__PURE__*/memo(({
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && (shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
+  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : jsx(Portal, {
     zIndex: zIndex
   }, renderPopperWrapper)));
+  if (shouldFitContainer) {
+    return jsx(Box, {
+      xcss: wrapperStyles
+    }, popupContent);
+  }
+  return popupContent;
 });
 export default Popup;

package/dist/esm/popper-wrapper.js

@@ -2,10 +2,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["shouldRenderToParent", "children"];
+var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children"];
 var _css;
 /** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -16,6 +18,9 @@ import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { RepositionOnUpdate } from './reposition-on-update';
 import { useCloseManager } from './use-close-manager';
 import { useFocusManager } from './use-focus-manager';
+var popupFullWidthStyles = css({
+  width: '100%'
+});
 var popupStyles = css((_css = {
   display: 'block',
   boxSizing: 'border-box',
@@ -24,7 +29,7 @@ var popupStyles = css((_css = {
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
-}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, ':focus', {
+}, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, '&:focus', {
   outline: 'none'
 }), _css));
 var popupOverflowStyles = css({
@@ -34,17 +39,18 @@ var popupOverflowStyles = css({
 // disables iframe pointer events while popup is open, except if iframe is nested inside popup
 // solves an issue of popup not being closed on iframe click
 var blockPointerEventsOnExternalIframeStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   'iframe:not([data-ds--level] iframe)': {
     pointerEvents: 'none'
   }
 });
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,
+    shouldFitContainer = props.shouldFitContainer,
     children = props.children,
     htmlAttributes = _objectWithoutProperties(props, _excluded);
   return jsx("div", _extends({
-    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
+    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles, shouldFitContainer && popupFullWidthStyles]
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -69,6 +75,7 @@ function PopperWrapper(_ref) {
     triggerRef = _ref.triggerRef,
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
     shouldRenderToParent = _ref.shouldRenderToParent,
+    shouldFitContainer = _ref.shouldFitContainer,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
     strategy = _ref.strategy,
     role = _ref.role,
@@ -139,13 +146,16 @@ function PopperWrapper(_ref) {
           }
           setPopupRef(node);
         }
-      },
+      }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: style
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ,
       tabIndex: autoFocus ? 0 : undefined,
-      shouldRenderToParent: shouldRenderToParent
+      shouldRenderToParent: shouldRenderToParent,
+      shouldFitContainer: shouldFitContainer
     }, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
       styles: blockPointerEventsOnExternalIframeStyles
     }), jsx(RepositionOnUpdate, {

package/dist/esm/popup.js

@@ -7,10 +7,14 @@ import { useUID } from 'react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
+import { Box, xcss } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from './popper-wrapper';
 import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
 var defaultLayer = layers.layer();
+var wrapperStyles = xcss({
+  position: 'relative'
+});
 export var Popup = /*#__PURE__*/memo(function (_ref) {
   var isOpen = _ref.isOpen,
     providedId = _ref.id,
@@ -36,6 +40,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
     _ref$shouldRenderToPa = _ref.shouldRenderToParent,
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
+    _ref$shouldFitContain = _ref.shouldFitContainer,
+    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
     strategy = _ref.strategy,
@@ -66,15 +72,16 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     onClose: onClose,
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-    shouldRenderToParent: shouldRenderToParent,
+    shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
+    shouldFitContainer: shouldFitContainer,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy,
+    strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
     titleId: titleId
   }));
-  return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
+  var popupContent = jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
       ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
@@ -82,8 +89,14 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && (shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
+  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : jsx(Portal, {
     zIndex: zIndex
   }, renderPopperWrapper)));
+  if (shouldFitContainer) {
+    return jsx(Box, {
+      xcss: wrapperStyles
+    }, popupContent);
+  }
+  return popupContent;
 });
 export default Popup;

package/dist/types/compositional/popup.d.ts

@@ -24,7 +24,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id: providedId, isOpen, }: PopupProps) => JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen }: PopupProps) => JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };

package/dist/types/entry-points/experimental/compositional.d.ts

@@ -1,2 +1,2 @@
 export { Popup, PopupContent, PopupTrigger } from '../../compositional/popup';
-export type { PopupProps, PopupContentProps, PopupTriggerProps, } from '../../compositional/popup';
+export type { PopupProps, PopupContentProps, PopupTriggerProps } from '../../compositional/popup';

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 import { Popup } from './popup';
-export type { ContentProps, PopupComponentProps, PopupProps, TriggerProps, } from './types';
+export type { ContentProps, PopupComponentProps, PopupProps, TriggerProps } from './types';
 export { Popup };
 export default Popup;

package/dist/types/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
-import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
+import { type PopperWrapperProps } from './types';
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/reposition-on-update.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { RepositionOnUpdateProps } from './types';
-export declare const RepositionOnUpdate: ({ children, update, }: RepositionOnUpdateProps) => JSX.Element;
+import { type RepositionOnUpdateProps } from './types';
+export declare const RepositionOnUpdate: ({ children, update }: RepositionOnUpdateProps) => JSX.Element;

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentType, CSSProperties, Dispatch, PropsWithChildren, ReactNode, Ref, SetStateAction } from 'react';
-import { Placement, PopperChildrenProps } from '@atlaskit/popper';
+import { type ComponentType, type CSSProperties, type Dispatch, type PropsWithChildren, type default as React, type ReactNode, type Ref, type SetStateAction } from 'react';
+import { type Placement, type PopperChildrenProps } from '@atlaskit/popper';
 export interface TriggerProps {
     ref: Ref<any>;
     'aria-controls'?: string;
@@ -61,6 +61,13 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * This fits the popup width to its parent's width.
+     * When set to `true`, the trigger and popup elements will be wrapped in a `div` with `position: relative`.
+     * The popup will be rendered as a sibling to the trigger element, and will be full width.
+     * The default is `false`.
+     */
+    shouldFitContainer?: boolean;
     /**
      * Use this to set the accessibility role for the popup.
      * We strongly recommend using only `menu` or `dialog`.
@@ -149,6 +156,13 @@ interface BaseProps {
      * Defaults to `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * This fits the popup width to its parent's width.
+     * When set to `true`, the trigger and popup elements will be wrapped in a `div` with `position: relative`.
+     * The popup will be rendered as a sibling to the trigger element, and will be full width.
+     * The default is `false`.
+     */
+    shouldFitContainer?: boolean;
     /**
      * This allows the popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
@@ -176,7 +190,7 @@ interface BaseProps {
      */
     titleId?: string;
 }
-export interface PopupProps extends BaseProps {
+interface InternalPopupProps extends BaseProps {
     /**
      * Render props used to anchor the popup to your content.
      * Make this an interactive element,
@@ -190,6 +204,15 @@ export interface PopupProps extends BaseProps {
      */
     zIndex?: number;
 }
+type StandardPopupProps = InternalPopupProps & {
+    shouldFitContainer?: false;
+};
+type ShouldFitContainerPopupProps = InternalPopupProps & {
+    shouldFitContainer: true;
+    shouldRenderToParent?: true;
+    strategy?: 'absolute';
+};
+export type PopupProps = StandardPopupProps | ShouldFitContainerPopupProps;
 export interface PopperWrapperProps extends BaseProps {
     triggerRef: TriggerRef;
 }

package/dist/types/use-focus-manager.d.ts

@@ -1,2 +1,2 @@
-import { FocusManagerHook } from './types';
+import { type FocusManagerHook } from './types';
 export declare const useFocusManager: ({ initialFocusRef, popupRef, shouldCloseOnTab, }: FocusManagerHook) => void;

package/dist/types/use-get-memoized-merged-trigger-ref.d.ts

@@ -1,2 +1,2 @@
-import { Dispatch, SetStateAction } from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
 export declare const useGetMemoizedMergedTriggerRef: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;

package/dist/types-ts4.5/compositional/popup.d.ts

@@ -24,7 +24,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id: providedId, isOpen, }: PopupProps) => JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen }: PopupProps) => JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };

package/dist/types-ts4.5/entry-points/experimental/compositional.d.ts

@@ -1,2 +1,2 @@
 export { Popup, PopupContent, PopupTrigger } from '../../compositional/popup';
-export type { PopupProps, PopupContentProps, PopupTriggerProps, } from '../../compositional/popup';
+export type { PopupProps, PopupContentProps, PopupTriggerProps } from '../../compositional/popup';

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
 import { Popup } from './popup';
-export type { ContentProps, PopupComponentProps, PopupProps, TriggerProps, } from './types';
+export type { ContentProps, PopupComponentProps, PopupProps, TriggerProps } from './types';
 export { Popup };
 export default Popup;

package/dist/types-ts4.5/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
-import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
+import { type PopperWrapperProps } from './types';
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types-ts4.5/reposition-on-update.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { RepositionOnUpdateProps } from './types';
-export declare const RepositionOnUpdate: ({ children, update, }: RepositionOnUpdateProps) => JSX.Element;
+import { type RepositionOnUpdateProps } from './types';
+export declare const RepositionOnUpdate: ({ children, update }: RepositionOnUpdateProps) => JSX.Element;

package/dist/types-ts4.5/types.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentType, CSSProperties, Dispatch, PropsWithChildren, ReactNode, Ref, SetStateAction } from 'react';
-import { Placement, PopperChildrenProps } from '@atlaskit/popper';
+import { type ComponentType, type CSSProperties, type Dispatch, type PropsWithChildren, type default as React, type ReactNode, type Ref, type SetStateAction } from 'react';
+import { type Placement, type PopperChildrenProps } from '@atlaskit/popper';
 export interface TriggerProps {
     ref: Ref<any>;
     'aria-controls'?: string;
@@ -61,6 +61,13 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * This fits the popup width to its parent's width.
+     * When set to `true`, the trigger and popup elements will be wrapped in a `div` with `position: relative`.
+     * The popup will be rendered as a sibling to the trigger element, and will be full width.
+     * The default is `false`.
+     */
+    shouldFitContainer?: boolean;
     /**
      * Use this to set the accessibility role for the popup.
      * We strongly recommend using only `menu` or `dialog`.
@@ -152,6 +159,13 @@ interface BaseProps {
      * Defaults to `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * This fits the popup width to its parent's width.
+     * When set to `true`, the trigger and popup elements will be wrapped in a `div` with `position: relative`.
+     * The popup will be rendered as a sibling to the trigger element, and will be full width.
+     * The default is `false`.
+     */
+    shouldFitContainer?: boolean;
     /**
      * This allows the popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
@@ -179,7 +193,7 @@ interface BaseProps {
      */
     titleId?: string;
 }
-export interface PopupProps extends BaseProps {
+interface InternalPopupProps extends BaseProps {
     /**
      * Render props used to anchor the popup to your content.
      * Make this an interactive element,
@@ -193,6 +207,15 @@ export interface PopupProps extends BaseProps {
      */
     zIndex?: number;
 }
+type StandardPopupProps = InternalPopupProps & {
+    shouldFitContainer?: false;
+};
+type ShouldFitContainerPopupProps = InternalPopupProps & {
+    shouldFitContainer: true;
+    shouldRenderToParent?: true;
+    strategy?: 'absolute';
+};
+export type PopupProps = StandardPopupProps | ShouldFitContainerPopupProps;
 export interface PopperWrapperProps extends BaseProps {
     triggerRef: TriggerRef;
 }

package/dist/types-ts4.5/use-focus-manager.d.ts

@@ -1,2 +1,2 @@
-import { FocusManagerHook } from './types';
+import { type FocusManagerHook } from './types';
 export declare const useFocusManager: ({ initialFocusRef, popupRef, shouldCloseOnTab, }: FocusManagerHook) => void;

package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref.d.ts

@@ -1,2 +1,2 @@
-import { Dispatch, SetStateAction } from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
 export declare const useGetMemoizedMergedTriggerRef: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;