@atlaskit/popup 4.25.0 → 4.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/__tests__/playwright/top-layer-focus.spec.tsx +274 -0
  3. package/compositional/popup/package.json +1 -8
  4. package/compositional/popup-content/package.json +1 -8
  5. package/compositional/popup-trigger/package.json +1 -8
  6. package/dist/cjs/compositional/popup-content-top-layer.js +91 -6
  7. package/dist/cjs/internal/top-layer-bridge.js +14 -9
  8. package/dist/cjs/popup-top-layer.js +89 -5
  9. package/dist/es2019/compositional/popup-content-top-layer.js +92 -4
  10. package/dist/es2019/internal/top-layer-bridge.js +14 -9
  11. package/dist/es2019/popup-top-layer.js +90 -3
  12. package/dist/esm/compositional/popup-content-top-layer.js +92 -7
  13. package/dist/esm/internal/top-layer-bridge.js +14 -9
  14. package/dist/esm/popup-top-layer.js +90 -6
  15. package/dist/types/internal/top-layer-bridge.d.ts +14 -0
  16. package/experimental/package.json +1 -8
  17. package/package.json +2 -2
  18. package/popup/package.json +1 -8
  19. package/types/package.json +1 -8
  20. package/dist/types-ts4.5/compositional/id-context.d.ts +0 -2
  21. package/dist/types-ts4.5/compositional/is-inside-popup-context.d.ts +0 -11
  22. package/dist/types-ts4.5/compositional/is-open-context.d.ts +0 -11
  23. package/dist/types-ts4.5/compositional/popup-content-top-layer.d.ts +0 -20
  24. package/dist/types-ts4.5/compositional/popup-content.d.ts +0 -35
  25. package/dist/types-ts4.5/compositional/popup-trigger.d.ts +0 -13
  26. package/dist/types-ts4.5/compositional/popup.d.ts +0 -27
  27. package/dist/types-ts4.5/compositional/role-context.d.ts +0 -2
  28. package/dist/types-ts4.5/compositional/set-trigger-ref-context.d.ts +0 -2
  29. package/dist/types-ts4.5/compositional/trigger-ref-context.d.ts +0 -2
  30. package/dist/types-ts4.5/compositional/trigger-ref-object-context.d.ts +0 -10
  31. package/dist/types-ts4.5/compositional/use-ensure-is-inside-popup.d.ts +0 -1
  32. package/dist/types-ts4.5/entry-points/compositional-popup-content.d.ts +0 -2
  33. package/dist/types-ts4.5/entry-points/compositional-popup-trigger.d.ts +0 -2
  34. package/dist/types-ts4.5/entry-points/compositional-popup.d.ts +0 -2
  35. package/dist/types-ts4.5/entry-points/experimental/compositional.d.ts +0 -6
  36. package/dist/types-ts4.5/entry-points/popup.d.ts +0 -1
  37. package/dist/types-ts4.5/entry-points/types.d.ts +0 -1
  38. package/dist/types-ts4.5/index.d.ts +0 -4
  39. package/dist/types-ts4.5/internal/top-layer-bridge.d.ts +0 -29
  40. package/dist/types-ts4.5/popper-wrapper.d.ts +0 -3
  41. package/dist/types-ts4.5/popup-top-layer.d.ts +0 -16
  42. package/dist/types-ts4.5/popup.d.ts +0 -7
  43. package/dist/types-ts4.5/reposition-on-update.d.ts +0 -3
  44. package/dist/types-ts4.5/types.d.ts +0 -357
  45. package/dist/types-ts4.5/use-appearance.d.ts +0 -15
  46. package/dist/types-ts4.5/use-close-manager.d.ts +0 -2
  47. package/dist/types-ts4.5/use-focus-manager.d.ts +0 -2
  48. package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref-new.d.ts +0 -9
  49. package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref.d.ts +0 -3
  50. package/dist/types-ts4.5/utils/is-element-interactive.d.ts +0 -1
  51. package/dist/types-ts4.5/utils/use-animation-frame.d.ts +0 -5
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/entry-points/popup.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/entry-points/popup.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/entry-points/popup.d.ts"
17
10
  }
@@ -6,12 +6,5 @@
6
6
  "sideEffects": [
7
7
  "**/*.compiled.css"
8
8
  ],
9
- "types": "../dist/types/entry-points/types.d.ts",
10
- "typesVersions": {
11
- ">=4.5 <5.9": {
12
- "*": [
13
- "../dist/types-ts4.5/entry-points/types.d.ts"
14
- ]
15
- }
16
- }
9
+ "types": "../dist/types/entry-points/types.d.ts"
17
10
  }
@@ -1,2 +0,0 @@
1
- import { type Context } from 'react';
2
- export declare const IdContext: Context<string | undefined>;
@@ -1,11 +0,0 @@
1
- import { type Context } from 'react';
2
- /**
3
- * __Ensure is inside popup context__
4
- *
5
- * An ensure is inside popup context {description}.
6
- *
7
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
8
- * - [Code](https://atlassian.design/components/{packageName}/code)
9
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
10
- */
11
- export declare const EnsureIsInsidePopupContext: Context<boolean>;
@@ -1,11 +0,0 @@
1
- import { type Context } from 'react';
2
- /**
3
- * __Is open context__
4
- *
5
- * An is open context {description}.
6
- *
7
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
8
- * - [Code](https://atlassian.design/components/{packageName}/code)
9
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
10
- */
11
- export declare const IsOpenContext: Context<boolean>;
@@ -1,20 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type ReactNode } from 'react';
6
- import { type ContentProps, type PopupProps } from '../types';
7
- /**
8
- * Top-layer implementation of the compositional PopupContent.
9
- *
10
- * Reads isOpen, id, triggerRef from the legacy compositional Popup context,
11
- * then renders via @atlaskit/top-layer's Popup compound.
12
- *
13
- * Gated behind the `platform-dst-top-layer` feature flag.
14
- */
15
- export declare function PopupContentTopLayer({ xcss, children, offset: offsetProp, onClose, testId, placement, fallbackPlacements: _fallbackPlacements, popupComponent: PopupContainer, autoFocus, shouldFitContainer, shouldFitViewport, role, label, titleId, isOpen, id: providedId, zIndex: _zIndex, shouldRenderToParent: _shouldRenderToParent, strategy: _strategy, boundary: _boundary, rootBoundary: _rootBoundary, shouldUseCaptureOnOutsideClick: _shouldUseCaptureOnOutsideClick, shouldDisableFocusLock: _shouldDisableFocusLock, shouldFlip: _shouldFlip, appearance: _appearance, shouldDisableGpuAcceleration: _shouldDisableGpuAcceleration, }: Omit<PopupProps, 'content' | 'trigger'> & {
16
- children: (props: ContentProps) => ReactNode;
17
- shouldDisableGpuAcceleration?: boolean;
18
- isOpen: boolean;
19
- id: string | undefined;
20
- }): ReactNode;
@@ -1,35 +0,0 @@
1
- import React from 'react';
2
- import { type ContentProps, type PopupProps as LegacyPopupProps } from '../types';
3
- type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldIgnoreCloseEvent' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'label' | 'titleId'> & {
4
- children: (props: ContentProps) => React.ReactNode;
5
- /**
6
- * ___Use with caution___
7
- *
8
- * Disables popper.js GPU acceleration for this popup.
9
- * This means only positioning will be used, without any transforms.
10
- *
11
- * Performance will be degraded if the popup is expected to move.
12
- *
13
- * This should almost never be used, but is sometimes needed
14
- * to resolve layering issues.
15
- */
16
- shouldDisableGpuAcceleration?: boolean;
17
- };
18
- type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
19
- shouldFitContainer: true;
20
- shouldRenderToParent?: true;
21
- strategy?: 'absolute';
22
- };
23
- type StandardPopupContentProps = CommonContentPopupProps & {
24
- shouldFitContainer?: false;
25
- };
26
- export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPopupContentProps;
27
- /**
28
- * __Popup content__
29
- *
30
- * Popup content is the component that renders the content of the popup.
31
- *
32
- * It must be a child of the Popup component.
33
- */
34
- export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldIgnoreCloseEvent, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, label, titleId, }: PopupContentProps) => React.JSX.Element | null;
35
- export {};
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import type { TriggerProps } from '../types';
3
- export type PopupTriggerProps = {
4
- children: (props: TriggerProps) => React.ReactNode;
5
- };
6
- /**
7
- * __Popup trigger__
8
- *
9
- * Popup trigger is the component that renders the trigger for the popup.
10
- *
11
- * It must be a child of the Popup component.
12
- */
13
- export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
@@ -1,27 +0,0 @@
1
- import React from 'react';
2
- export type PopupProps = {
3
- children: React.ReactNode;
4
- isOpen?: boolean;
5
- id?: string;
6
- role?: 'dialog';
7
- };
8
- /**
9
- * __Popup__
10
- *
11
- * Popup is a composable component that provides the context for the trigger and content components.
12
- *
13
- * Usage example:
14
- * ```jsx
15
- * <Popup>
16
- * <PopupTrigger>
17
- * {(props) => (
18
- * <button type="button" {...props}>Click me</button>
19
- * )}
20
- * </PopupTrigger>
21
- * <PopupContent>
22
- * {(props) => <div>Hello world</div>}
23
- * </PopupContent>
24
- * </Popup>
25
- * ```
26
- */
27
- export declare const Popup: ({ children, id: providedId, isOpen, role, }: PopupProps) => React.JSX.Element;
@@ -1,2 +0,0 @@
1
- import { type Context } from 'react';
2
- export declare const RoleContext: Context<string | undefined>;
@@ -1,2 +0,0 @@
1
- import { type Context, type Dispatch, type SetStateAction } from 'react';
2
- export declare const SetTriggerRefContext: Context<Dispatch<SetStateAction<HTMLElement | null>>>;
@@ -1,2 +0,0 @@
1
- import { type Context } from 'react';
2
- export declare const TriggerRefContext: Context<HTMLElement | null>;
@@ -1,10 +0,0 @@
1
- import { type Context, type MutableRefObject } from 'react';
2
- /**
3
- * Provides the trigger element as a stable `MutableRefObject<HTMLElement | null>`
4
- * for the top-layer path. Unlike `TriggerRefContext` (which provides
5
- * `HTMLElement | null` as React state and causes a re-render when the trigger
6
- * mounts), this context provides a ref object whose identity is stable across
7
- * renders — allowing `useAnchorPosition` to receive a stable `anchorRef`
8
- * without needing to create a new ref wrapper on every `triggerRef` state change.
9
- */
10
- export declare const TriggerRefObjectContext: Context<MutableRefObject<HTMLElement | null>>;
@@ -1 +0,0 @@
1
- export declare function useEnsureIsInsidePopup(): void;
@@ -1,2 +0,0 @@
1
- export { PopupContent } from '../compositional/popup-content';
2
- export type { PopupContentProps } from '../compositional/popup-content';
@@ -1,2 +0,0 @@
1
- export { PopupTrigger } from '../compositional/popup-trigger';
2
- export type { PopupTriggerProps } from '../compositional/popup-trigger';
@@ -1,2 +0,0 @@
1
- export { Popup } from '../compositional/popup';
2
- export type { PopupProps } from '../compositional/popup';
@@ -1,6 +0,0 @@
1
- export { Popup } from '../../compositional/popup';
2
- export { PopupContent } from '../../compositional/popup-content';
3
- export { PopupTrigger } from '../../compositional/popup-trigger';
4
- export type { PopupProps } from '../../compositional/popup';
5
- export type { PopupContentProps } from '../../compositional/popup-content';
6
- export type { PopupTriggerProps } from '../../compositional/popup-trigger';
@@ -1 +0,0 @@
1
- export { Popup } from '../popup';
@@ -1 +0,0 @@
1
- export type { ContentProps, PopupComponentProps, PopupProps, TriggerProps } from '../types';
@@ -1,4 +0,0 @@
1
- import { Popup } from './popup';
2
- export type { ContentProps, PopupComponentProps, PopupProps, TriggerProps } from './types';
3
- export { Popup };
4
- export default Popup;
@@ -1,29 +0,0 @@
1
- type TRestrictedDialogRole = 'dialog' | 'alertdialog' | 'menu';
2
- type TWcagSupplementalRole = 'tooltip' | 'listbox' | 'tree' | 'grid' | 'note' | 'status' | 'alert' | 'log';
3
- /**
4
- * Props shape passed from legacy `role` / `label` / `titleId` into `@atlaskit/top-layer` `Popup.Content`.
5
- */
6
- export type TUseRolePropsResult = {
7
- role: TRestrictedDialogRole;
8
- labelledBy: string;
9
- } | {
10
- role: TRestrictedDialogRole;
11
- label: string;
12
- } | {
13
- role: TWcagSupplementalRole;
14
- label: string | undefined;
15
- };
16
- /**
17
- * Maps legacy popup role/label/titleId props to the discriminated union
18
- * that `Popup.Content` expects.
19
- *
20
- * `Popup.Content` enforces at the type level that dialog/alertdialog/menu
21
- * roles must have `label` or `labelledBy`. This hook bridges the legacy
22
- * flat-prop API (`role`, `label`, `titleId`) to that shape.
23
- */
24
- export declare function useRoleProps({ role, label, titleId, }: {
25
- role: string | undefined;
26
- label: string | undefined;
27
- titleId: string | undefined;
28
- }): TUseRolePropsResult;
29
- export {};
@@ -1,3 +0,0 @@
1
- import { type PopperWrapperProps } from './types';
2
- declare function PopperWrapper({ xcss, isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldIgnoreCloseEvent, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, shouldReturnFocus, strategy, role, label, titleId, modifiers, shouldFitViewport, appearance, zIndex, }: PopperWrapperProps): JSX.Element;
3
- export default PopperWrapper;
@@ -1,16 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type FC } from 'react';
6
- import { type PopupProps } from './types';
7
- /**
8
- * Top-layer implementation of Popup.
9
- *
10
- * Replaces the legacy @atlaskit/popup rendering pipeline
11
- * (Popper.js + Portal + focus-trap + @atlaskit/layering)
12
- * with the native Popover API + CSS Anchor Positioning via @atlaskit/top-layer.
13
- *
14
- * Gated behind the `platform-dst-top-layer` feature flag.
15
- */
16
- export declare const PopupTopLayer: FC<PopupProps>;
@@ -1,7 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import { type FC } from 'react';
6
- import { type PopupProps } from './types';
7
- export declare const Popup: FC<PopupProps>;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import { type RepositionOnUpdateProps } from './types';
3
- export declare const RepositionOnUpdate: ({ children, update, }: RepositionOnUpdateProps) => React.JSX.Element;
@@ -1,357 +0,0 @@
1
- import { type ComponentType, type CSSProperties, type Dispatch, type PropsWithChildren, type default as React, type ReactNode, type Ref, type SetStateAction } from 'react';
2
- import { type StrictXCSSProp } from '@atlaskit/css';
3
- import { type Modifier, type Placement, type PopperChildrenProps } from '@atlaskit/popper';
4
- export interface TriggerProps {
5
- /**
6
- * React ref that will be attached to the trigger element.
7
- */
8
- ref: Ref<any>;
9
- /**
10
- * Identifies the popup element that the trigger controls.
11
- * Should match the `id` of the popup content for screen readers to understand the relationship.
12
- */
13
- 'aria-controls'?: string;
14
- /**
15
- * Announces to assistive technology whether the popup is currently open or closed.
16
- */
17
- 'aria-expanded': boolean;
18
- /**
19
- * Informs assistive technology that this element triggers a popup.
20
- */
21
- 'aria-haspopup': boolean | 'dialog';
22
- 'data-ds--level'?: string;
23
- }
24
- export type PopupRef = HTMLDivElement | null;
25
- export type TriggerRef = HTMLElement | HTMLButtonElement | null;
26
- export interface ContentProps {
27
- /**
28
- * This will reposition the popup if any of the content has changed.
29
- * This is useful when positions change, and the popup wasn't aware.
30
- */
31
- update: PopperChildrenProps['update'];
32
- /**
33
- * Passed through from the parent popup.
34
- */
35
- isOpen: boolean;
36
- /**
37
- * Passed through from the parent popup.
38
- */
39
- onClose?: BaseProps['onClose'];
40
- /**
41
- * Escape hatch to set the initial focus for a specific element, when the popup is opened.
42
- *
43
- * The specified element needs to be available in the DOM as soon as the popup is opened, otherwise it
44
- * will not be focused upon. This means it will not work for content that renders into the popup content
45
- * after it has already opened (e.g. async or lazy loaded content).
46
- */
47
- setInitialFocusRef: Dispatch<SetStateAction<HTMLElement | null>>;
48
- }
49
- export interface PopupComponentProps {
50
- /**
51
- * Children passed through by the parent popup.
52
- */
53
- children: ReactNode;
54
- /**
55
- * Placement passed through by the parent popup.
56
- */
57
- 'data-placement': Placement;
58
- /**
59
- * Test ID passed through by the parent popup.
60
- */
61
- 'data-testid'?: string;
62
- /**
63
- * ID passed through by the parent popup.
64
- */
65
- id?: string;
66
- /**
67
- * Style that should be assigned to the root element.
68
- */
69
- style: CSSProperties;
70
- xcss?: StrictXCSSProp<'padding' | 'paddingInline' | 'paddingBlock' | 'width', never>;
71
- /**
72
- * Tab index passed through by the parent popup.
73
- */
74
- tabIndex: number | undefined;
75
- /**
76
- * Controls whether the popup is rendered inline within its parent component or in a portal at the document root.
77
- * `true` renders the popup in the DOM node closest to the trigger; focus is not trapped inside the element.
78
- * `false` renders the popup in React.Portal and focus is trapped inside the element.
79
- * The default is `false`.
80
- */
81
- shouldRenderToParent?: boolean;
82
- /**
83
- * This fits the popup width to its parent's width.
84
- * When set to `true`, the trigger and popup elements will be wrapped in a `div` with `position: relative`.
85
- * The popup will be rendered as a sibling to the trigger element, and will be full width.
86
- * The default is `false`.
87
- */
88
- shouldFitContainer?: boolean;
89
- /**
90
- * Determines if the popup will have a `max-width` and `max-height` set to
91
- * constrain it to the viewport.
92
- */
93
- shouldFitViewport?: boolean;
94
- /**
95
- * The "default" appearance is used for standard popups.
96
- * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
97
- * The appearance should only be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
98
- */
99
- appearance?: 'default' | 'UNSAFE_modal-below-sm';
100
- /**
101
- * Class name to apply to the popup container element.
102
- */
103
- className?: string;
104
- /**
105
- * Boolean to indicate if the reference element is hidden.
106
- */
107
- isReferenceHidden?: boolean;
108
- /**
109
- * Use this to set the accessibility role for the popup.
110
- * We strongly recommend using only `menu` or `dialog`.
111
- */
112
- role?: string;
113
- }
114
- interface BaseProps {
115
- /**
116
- * The "default" appearance is used for standard popups.
117
- * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
118
- */
119
- appearance?: 'default' | 'UNSAFE_modal-below-sm';
120
- /**
121
- * Bounded style overrides.
122
- */
123
- xcss?: StrictXCSSProp<'padding' | 'paddingInline' | 'paddingBlock' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlockStart' | 'paddingBlockEnd' | 'width', never>;
124
- /**
125
- * Use this to either show or hide the popup.
126
- * When set to `false` the popup will not render anything to the DOM.
127
- */
128
- isOpen: boolean;
129
- /**
130
- * Render props for content that is displayed inside the popup.
131
- */
132
- content: (props: ContentProps) => React.ReactNode;
133
- /**
134
- * ID that is assigned to the popup container element.
135
- */
136
- id?: string;
137
- /**
138
- * The distance the popup should be offset from the reference in the format of [along, away] (units in px).
139
- * The default is `[0, 8]`, which means the popup will be `8px` away from the edge of the reference specified
140
- * by the `placement` prop.
141
- *
142
- * @private
143
- * Note: when `platform-dst-top-layer` is enabled, both the `along` and `away`
144
- * values are passed through to the top-layer placement (via `fromLegacyPlacement`),
145
- * matching the legacy popper-js behaviour.
146
- */
147
- offset?: [
148
- number,
149
- number
150
- ];
151
- /**
152
- * Placement of where the popup should be displayed relative to the trigger element.
153
- * The default is `"auto"`.
154
- */
155
- placement?: Placement;
156
- /**
157
- * This is a list of backup placements for the popup to try.
158
- * When the preferred placement doesn't have enough space,
159
- * the modifier will test the ones provided in the list, and use the first suitable one.
160
- * If no fallback placements are suitable, it reverts back to the original placement.
161
- *
162
- * @private
163
- * @deprecated No-op when `platform-dst-top-layer` is enabled — CSS Anchor Positioning
164
- * generates fallbacks automatically via `position-try-fallbacks`.
165
- */
166
- fallbackPlacements?: Placement[];
167
- /**
168
- * The boundary element that the popup will check for overflow.
169
- * The default is `"clippingParents"` which are parent scroll containers,
170
- * but can be set to any element.
171
- *
172
- * @private
173
- * @deprecated No-op when `platform-dst-top-layer` is enabled — the viewport
174
- * is the natural boundary for top-layer elements.
175
- */
176
- boundary?: 'clippingParents' | HTMLElement;
177
- /**
178
- * The root boundary that the popup will check for overflow.
179
- * The default is `"viewport"` but it can be set to `"document"`.
180
- *
181
- * @private
182
- * @deprecated No-op when `platform-dst-top-layer` is enabled — the viewport
183
- * is the natural boundary for top-layer elements.
184
- */
185
- rootBoundary?: 'viewport' | 'document';
186
- /**
187
- * Allows the popup to be placed on the opposite side of its trigger if it doesn't fit in the viewport.
188
- * The default is `true`.
189
- *
190
- * @private
191
- * @deprecated No-op when `platform-dst-top-layer` is enabled — CSS Anchor Positioning
192
- * handles flipping natively via `position-try-fallbacks`.
193
- */
194
- shouldFlip?: boolean;
195
- /**
196
- * A `testId` prop is provided for specified elements,
197
- * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
198
- * serving as a hook for automated tests.
199
- */
200
- testId?: string;
201
- /**
202
- * Handler that is called when the popup wants to close itself.
203
- * This can happen when:
204
- * - the user clicks away from the popup
205
- * - the user presses the escape key
206
- * - the popup is closed programatically. In this case, the `event` argument will be `null`.
207
- *
208
- * You'll want to use this to set open state accordingly, and then pump it back into the `isOpen` prop.
209
- */
210
- onClose?(
211
- /**
212
- * The event that triggered the close.
213
- * The argument value will be `null` when the popup is closed programatically and has no corresponding event.
214
- */
215
- event: Event | React.MouseEvent | React.KeyboardEvent | null, currentLevel?: number | any): void;
216
- /**
217
- * The element that is shown when `isOpen` prop is `true`.
218
- * The result of the `content` prop will be placed as children here.
219
- * The default is an element with an elevation of `e200` with _no padding_.
220
- */
221
- popupComponent?: ComponentType<PopupComponentProps> | React.ForwardRefExoticComponent<React.PropsWithoutRef<PopupComponentProps> & React.RefAttributes<HTMLDivElement>>;
222
- /**
223
- * This controls whether the popup takes focus when opening.
224
- * This changes the `popupComponent` component tabIndex to `null`.
225
- * The default is `true`.
226
- */
227
- autoFocus?: boolean;
228
- /**
229
- * This controls if the event which handles clicks outside the popup is be bound with
230
- * `capture: true`.
231
- */
232
- shouldUseCaptureOnOutsideClick?: boolean;
233
- /**
234
- * Allows consumers to ignore specific close events, for example when an external overlay
235
- * should be treated as part of the popup interaction.
236
- */
237
- shouldIgnoreCloseEvent?: (event: Event | React.MouseEvent | React.KeyboardEvent) => boolean;
238
- /**
239
- * The root element where the popup should be rendered.
240
- * Defaults to `false`.
241
- *
242
- * @private
243
- * @deprecated No-op when `platform-dst-top-layer` is enabled — content always
244
- * renders in the browser's top layer.
245
- */
246
- shouldRenderToParent?: boolean;
247
- /**
248
- * This fits the popup width to its parent's width.
249
- * When set to `true`, the trigger and popup elements will be wrapped in a `div` with `position: relative`.
250
- * The popup will be rendered as a sibling to the trigger element, and will be full width.
251
- * The default is `false`.
252
- */
253
- shouldFitContainer?: boolean;
254
- /**
255
- * This makes the popup close on Tab key press. It will only work when `shouldRenderToParent` is `true`.
256
- * The default is `false`.
257
- *
258
- * @private
259
- * @deprecated No-op when `platform-dst-top-layer` is enabled — focus trapping
260
- * is role-based in the top-layer path.
261
- */
262
- shouldDisableFocusLock?: boolean;
263
- /**
264
- * This determines whether the popup trigger will be focused when the popup content closes.
265
- * The default is `true`.
266
- */
267
- shouldReturnFocus?: boolean;
268
- /**
269
- * This controls the positioning strategy to use. Can vary between `absolute` and `fixed`.
270
- * The default is `fixed`.
271
- *
272
- * @private
273
- * @deprecated No-op when `platform-dst-top-layer` is enabled — CSS Anchor Positioning
274
- * replaces Popper's positioning strategy.
275
- */
276
- strategy?: 'absolute' | 'fixed';
277
- /**
278
- * Use this to set the accessibility role for the popup.
279
- * We strongly recommend using only `menu` or `dialog`.
280
- * Must be used along with `label` or `titleId`.
281
- */
282
- role?: string;
283
- /**
284
- * Refers to an `aria-label` attribute. Sets an accessible name for the popup to announce it to users of assistive technology.
285
- * Usage of either this, or the `titleId` attribute is strongly recommended.
286
- */
287
- label?: string;
288
- /**
289
- * Id referenced by the popup `aria-labelledby` attribute.
290
- * Usage of either this, or the `label` attribute is strongly recommended.
291
- */
292
- titleId?: string;
293
- /**
294
- * Additional modifiers and modifier overwrites.
295
- * for more details - https://popper.js.org/docs/v1/#modifiers
296
- */
297
- modifiers?: Partial<Modifier<string, object>>[];
298
- /**
299
- * Determines if the popup will have a `max-width` and `max-height` set to
300
- * constrain it to the viewport.
301
- */
302
- shouldFitViewport?: boolean;
303
- }
304
- interface InternalPopupProps extends BaseProps {
305
- /**
306
- * Render props used to anchor the popup to your content.
307
- * Make this an interactive element,
308
- * such as an `@atlaskit/button` component.
309
- */
310
- trigger: (props: TriggerProps) => React.ReactNode;
311
- /**
312
- * Z-index that the popup should be displayed in.
313
- * This is passed to the portal component.
314
- * The default is 400.
315
- *
316
- * @private
317
- * @deprecated No-op when `platform-dst-top-layer` is enabled — the browser's
318
- * top layer manages stacking without z-index.
319
- */
320
- zIndex?: number;
321
- }
322
- type StandardPopupProps = InternalPopupProps & {
323
- shouldFitContainer?: false;
324
- };
325
- type ShouldFitContainerPopupProps = InternalPopupProps & {
326
- shouldFitContainer: true;
327
- shouldRenderToParent?: true;
328
- strategy?: 'absolute';
329
- };
330
- export type PopupProps = StandardPopupProps | ShouldFitContainerPopupProps;
331
- export interface PopperWrapperProps extends BaseProps {
332
- zIndex?: number;
333
- triggerRef: TriggerRef;
334
- }
335
- export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose' | 'shouldIgnoreCloseEvent'> & {
336
- popupRef: PopupRef;
337
- triggerRef: TriggerRef;
338
- shouldUseCaptureOnOutsideClick?: boolean;
339
- shouldCloseOnTab?: boolean;
340
- shouldDisableFocusTrap: boolean;
341
- shouldRenderToParent?: boolean;
342
- autoFocus: boolean;
343
- };
344
- export type FocusManagerHook = {
345
- initialFocusRef: HTMLElement | null;
346
- popupRef: PopupRef;
347
- shouldCloseOnTab?: boolean;
348
- triggerRef: TriggerRef;
349
- autoFocus: boolean;
350
- shouldDisableFocusTrap: boolean;
351
- shouldReturnFocus: boolean;
352
- shouldRenderToParent?: boolean;
353
- };
354
- export type RepositionOnUpdateProps = PropsWithChildren<{
355
- update: PopperChildrenProps['update'];
356
- }>;
357
- export {};
@@ -1,15 +0,0 @@
1
- /**
2
- * **usePopupAppearance()**
3
- *
4
- * Abstracts away calculating the appearance for a popup including if it should
5
- * be portalled or not, this is done to ensure that if the popup needs to render
6
- * as a modal that it is also forcibly portalled. If it's not portalled when rendering
7
- * as a modal it will appear below the top bar.
8
- */
9
- export declare function usePopupAppearance({ appearance: _appearance, shouldRenderToParent: _shouldRenderToParent, }: {
10
- appearance: 'default' | 'UNSAFE_modal-below-sm';
11
- shouldRenderToParent?: boolean;
12
- }): {
13
- appearance: 'default' | 'UNSAFE_modal-below-sm';
14
- shouldRenderToParent: boolean | undefined;
15
- };