@atlaskit/popper 7.2.0 → 8.0.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.
- package/CHANGELOG.md +22 -0
- package/package.json +8 -15
- package/popper/package.json +1 -8
- package/popper.docs.tsx +41 -39
- package/react-popper/package.json +1 -8
- package/dist/types-ts4.5/entry-points/popper.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/react-popper.d.ts +0 -1
- package/dist/types-ts4.5/index.d.ts +0 -3
- package/dist/types-ts4.5/max-size.d.ts +0 -29
- package/dist/types-ts4.5/popper.d.ts +0 -44
- package/offerings.json +0 -33
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/popper
|
|
2
2
|
|
|
3
|
+
## 8.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
|
|
8
|
+
Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
|
|
9
|
+
|
|
10
|
+
Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
|
|
11
|
+
|
|
12
|
+
Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
|
|
13
|
+
|
|
14
|
+
```diff
|
|
15
|
+
- "typesVersions": {
|
|
16
|
+
- ">=4.5 <4.9": {
|
|
17
|
+
- "*": [
|
|
18
|
+
- "dist/types-ts4.5/*",
|
|
19
|
+
- "dist/types-ts4.5/index.d.ts"
|
|
20
|
+
- ]
|
|
21
|
+
- }
|
|
22
|
+
- },
|
|
23
|
+
```
|
|
24
|
+
|
|
3
25
|
## 7.2.0
|
|
4
26
|
|
|
5
27
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/popper",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0",
|
|
4
4
|
"description": "A wrapper for React Popper for situations which require a bespoke popup where other ADS components are deemed unsuitable",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -42,18 +42,19 @@
|
|
|
42
42
|
"@af/accessibility-testing": "workspace:^",
|
|
43
43
|
"@af/integration-testing": "workspace:^",
|
|
44
44
|
"@af/visual-regression": "workspace:^",
|
|
45
|
-
"@atlaskit/button": "^
|
|
46
|
-
"@atlaskit/docs": "^
|
|
47
|
-
"@atlaskit/ds-lib": "^
|
|
48
|
-
"@atlaskit/link": "^
|
|
49
|
-
"@atlaskit/section-message": "^
|
|
50
|
-
"@atlaskit/tokens": "^
|
|
45
|
+
"@atlaskit/button": "^24.0.0",
|
|
46
|
+
"@atlaskit/docs": "^12.0.0",
|
|
47
|
+
"@atlaskit/ds-lib": "^8.0.0",
|
|
48
|
+
"@atlaskit/link": "^4.0.0",
|
|
49
|
+
"@atlaskit/section-message": "^9.0.0",
|
|
50
|
+
"@atlaskit/tokens": "^14.0.0",
|
|
51
51
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
52
52
|
"@atlassian/ssr-tests": "workspace:^",
|
|
53
53
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
54
54
|
"@compiled/react": "^0.20.0",
|
|
55
55
|
"@testing-library/react": "^16.3.0",
|
|
56
56
|
"@testing-library/user-event": "^14.4.3",
|
|
57
|
+
"react": "^18.2.0",
|
|
57
58
|
"react-dom": "^18.2.0",
|
|
58
59
|
"react-lorem-component": "^0.13.0"
|
|
59
60
|
},
|
|
@@ -81,13 +82,5 @@
|
|
|
81
82
|
]
|
|
82
83
|
}
|
|
83
84
|
},
|
|
84
|
-
"typesVersions": {
|
|
85
|
-
">=4.5 <4.9": {
|
|
86
|
-
"*": [
|
|
87
|
-
"dist/types-ts4.5/*",
|
|
88
|
-
"dist/types-ts4.5/index.d.ts"
|
|
89
|
-
]
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
85
|
"homepage": "https://atlassian.design/components/popper"
|
|
93
86
|
}
|
package/popper/package.json
CHANGED
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/popper.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/popper.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/popper.d.ts"
|
|
17
10
|
}
|
package/popper.docs.tsx
CHANGED
|
@@ -1,46 +1,48 @@
|
|
|
1
1
|
import path from 'path';
|
|
2
2
|
|
|
3
|
-
import type {
|
|
3
|
+
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
4
4
|
|
|
5
|
-
const documentation:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
description: 'A component for positioning elements relative to other elements.',
|
|
9
|
-
status: 'general-availability',
|
|
10
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
11
8
|
name: 'Popper',
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
'Handle responsive positioning',
|
|
21
|
-
'Use appropriate z-index management',
|
|
22
|
-
],
|
|
23
|
-
contentGuidelines: [
|
|
24
|
-
'Ensure positioned content is accessible',
|
|
25
|
-
'Use appropriate positioning strategies',
|
|
26
|
-
'Consider content visibility and readability',
|
|
27
|
-
],
|
|
28
|
-
accessibilityGuidelines: [
|
|
29
|
-
'Ensure proper positioning and visibility',
|
|
30
|
-
'Consider screen reader accessibility',
|
|
31
|
-
'Use appropriate ARIA attributes',
|
|
32
|
-
'Handle focus management',
|
|
33
|
-
],
|
|
34
|
-
examples: [
|
|
35
|
-
{
|
|
36
|
-
name: '00 Basic Positioning',
|
|
37
|
-
description: '00 Basic Positioning example',
|
|
38
|
-
source: path.resolve(__dirname, './examples/00-basic-positioning.tsx'),
|
|
9
|
+
description: 'A component for positioning elements relative to other elements.',
|
|
10
|
+
status: 'general-availability',
|
|
11
|
+
import: {
|
|
12
|
+
name: 'Popper',
|
|
13
|
+
package: '@atlaskit/popper',
|
|
14
|
+
type: 'named',
|
|
15
|
+
packagePath: path.resolve(__dirname),
|
|
16
|
+
packageJson: require('./package.json'),
|
|
39
17
|
},
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
18
|
+
usageGuidelines: [
|
|
19
|
+
'Use for positioning overlays and tooltips',
|
|
20
|
+
'Consider positioning constraints',
|
|
21
|
+
'Handle responsive positioning',
|
|
22
|
+
'Use appropriate z-index management',
|
|
23
|
+
],
|
|
24
|
+
contentGuidelines: [
|
|
25
|
+
'Ensure positioned content is accessible',
|
|
26
|
+
'Use appropriate positioning strategies',
|
|
27
|
+
'Consider content visibility and readability',
|
|
28
|
+
],
|
|
29
|
+
accessibilityGuidelines: [
|
|
30
|
+
'Ensure proper positioning and visibility',
|
|
31
|
+
'Consider screen reader accessibility',
|
|
32
|
+
'Use appropriate ARIA attributes',
|
|
33
|
+
'Handle focus management',
|
|
34
|
+
],
|
|
35
|
+
examples: [
|
|
36
|
+
{
|
|
37
|
+
name: '00 Basic Positioning',
|
|
38
|
+
description: '00 Basic Positioning example',
|
|
39
|
+
source: path.resolve(__dirname, './examples/00-basic-positioning.tsx'),
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
keywords: ['popper', 'positioning', 'tooltip', 'popup', 'overlay'],
|
|
43
|
+
categories: ['utility'],
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
};
|
|
45
47
|
|
|
46
48
|
export default documentation;
|
|
@@ -6,12 +6,5 @@
|
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"**/*.compiled.css"
|
|
8
8
|
],
|
|
9
|
-
"types": "../dist/types/entry-points/react-popper.d.ts"
|
|
10
|
-
"typesVersions": {
|
|
11
|
-
">=4.5 <5.9": {
|
|
12
|
-
"*": [
|
|
13
|
-
"../dist/types-ts4.5/entry-points/react-popper.d.ts"
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
9
|
+
"types": "../dist/types/entry-points/react-popper.d.ts"
|
|
17
10
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Manager, Reference } from 'react-popper';
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import type { ModifierArguments } from '@popperjs/core';
|
|
2
|
-
export declare function getMaxSizeModifiers({ viewportPadding }: {
|
|
3
|
-
viewportPadding: number;
|
|
4
|
-
}): [
|
|
5
|
-
{
|
|
6
|
-
/**
|
|
7
|
-
* Performing DOM measurements in the 'read' phase,
|
|
8
|
-
* which is the convention for popper modifiers
|
|
9
|
-
*/
|
|
10
|
-
readonly name: 'maxSizeData';
|
|
11
|
-
readonly enabled: true;
|
|
12
|
-
readonly phase: 'read';
|
|
13
|
-
readonly fn: ({ state, name }: ModifierArguments<any>) => void;
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
/**
|
|
17
|
-
* Applying max size CSS
|
|
18
|
-
*/
|
|
19
|
-
readonly name: 'maxSize';
|
|
20
|
-
readonly enabled: true;
|
|
21
|
-
readonly phase: 'beforeWrite';
|
|
22
|
-
readonly requiresIfExists: [
|
|
23
|
-
'offset',
|
|
24
|
-
'preventOverflow',
|
|
25
|
-
'flip'
|
|
26
|
-
];
|
|
27
|
-
readonly fn: ({ state }: ModifierArguments<any>) => void;
|
|
28
|
-
}
|
|
29
|
-
];
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type Placement, type VirtualElement } from '@popperjs/core';
|
|
3
|
-
import { type PopperChildrenProps, type PopperProps } from 'react-popper';
|
|
4
|
-
export { placements } from '@popperjs/core';
|
|
5
|
-
export type { Placement, VirtualElement } from '@popperjs/core';
|
|
6
|
-
export type { ManagerProps, ReferenceProps, PopperProps, PopperArrowProps, PopperChildrenProps, StrictModifier, Modifier, } from 'react-popper';
|
|
7
|
-
type Offset = [
|
|
8
|
-
number | null | undefined,
|
|
9
|
-
number | null | undefined
|
|
10
|
-
];
|
|
11
|
-
export interface CustomPopperProps<Modifiers> {
|
|
12
|
-
/**
|
|
13
|
-
* Returns the element to be positioned.
|
|
14
|
-
*/
|
|
15
|
-
children?: (childrenProps: PopperChildrenProps) => React.ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* Distance the popup should be offset from the reference in the format of [along, away] (units in px).
|
|
18
|
-
* Defaults to [0, 8] - which means the popup will be 8px away from the edge of the reference specified
|
|
19
|
-
* by the `placement` prop.
|
|
20
|
-
*/
|
|
21
|
-
offset?: Offset;
|
|
22
|
-
/**
|
|
23
|
-
* Which side of the Reference to show on.
|
|
24
|
-
*/
|
|
25
|
-
placement?: Placement;
|
|
26
|
-
/**
|
|
27
|
-
* Replacement reference element to position popper relative to.
|
|
28
|
-
*/
|
|
29
|
-
referenceElement?: HTMLElement | VirtualElement;
|
|
30
|
-
/**
|
|
31
|
-
* Additional modifiers and modifier overwrites.
|
|
32
|
-
*/
|
|
33
|
-
modifiers?: PopperProps<Modifiers>['modifiers'];
|
|
34
|
-
/**
|
|
35
|
-
* Placement strategy used. Can be 'fixed' or 'absolute'
|
|
36
|
-
*/
|
|
37
|
-
strategy?: PopperProps<Modifiers>['strategy'];
|
|
38
|
-
/**
|
|
39
|
-
* Determines if the popper will have a `max-width` and `max-height` set to
|
|
40
|
-
* constrain it to the viewport.
|
|
41
|
-
*/
|
|
42
|
-
shouldFitViewport?: boolean;
|
|
43
|
-
}
|
|
44
|
-
export declare function Popper<CustomModifiers>({ children, offset, placement, referenceElement, modifiers, strategy, shouldFitViewport, }: CustomPopperProps<CustomModifiers>): React.JSX.Element;
|
package/offerings.json
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
[
|
|
2
|
-
{
|
|
3
|
-
"name": "Popper",
|
|
4
|
-
"package": "@atlaskit/popper",
|
|
5
|
-
"import": {
|
|
6
|
-
"name": "Popper",
|
|
7
|
-
"package": "@atlaskit/popper",
|
|
8
|
-
"type": "named"
|
|
9
|
-
},
|
|
10
|
-
"keywords": ["popper", "positioning", "tooltip", "popup", "overlay"],
|
|
11
|
-
"categories": ["utility"],
|
|
12
|
-
"shortDescription": "A component for positioning elements relative to other elements.",
|
|
13
|
-
"status": "general-availability",
|
|
14
|
-
"accessibilityGuidelines": [
|
|
15
|
-
"Ensure proper positioning and visibility",
|
|
16
|
-
"Consider screen reader accessibility",
|
|
17
|
-
"Use appropriate ARIA attributes",
|
|
18
|
-
"Handle focus management"
|
|
19
|
-
],
|
|
20
|
-
"usageGuidelines": [
|
|
21
|
-
"Use for positioning overlays and tooltips",
|
|
22
|
-
"Consider positioning constraints",
|
|
23
|
-
"Handle responsive positioning",
|
|
24
|
-
"Use appropriate z-index management"
|
|
25
|
-
],
|
|
26
|
-
"contentGuidelines": [
|
|
27
|
-
"Ensure positioned content is accessible",
|
|
28
|
-
"Use appropriate positioning strategies",
|
|
29
|
-
"Consider content visibility and readability"
|
|
30
|
-
],
|
|
31
|
-
"examples": ["./examples/00-basic-positioning.tsx"]
|
|
32
|
-
}
|
|
33
|
-
]
|