@atlaskit/top-layer 1.6.0 → 1.6.1
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 +8 -0
- package/compass.yml +10 -1
- package/dist/cjs/dialog/dialog-content.compiled.css +0 -10
- package/dist/cjs/dialog/dialog-content.js +5 -28
- package/dist/cjs/entry-points/animations.js +1 -49
- package/dist/cjs/internal/use-animated-visibility.js +14 -17
- package/dist/cjs/popover/animations.js +1 -147
- package/dist/cjs/popover/popover.compiled.css +0 -10
- package/dist/cjs/popover/popover.js +8 -11
- package/dist/cjs/testing/polyfill.js +3 -0
- package/dist/es2019/dialog/dialog-content.compiled.css +0 -10
- package/dist/es2019/dialog/dialog-content.js +4 -28
- package/dist/es2019/entry-points/animations.js +0 -2
- package/dist/es2019/internal/use-animated-visibility.js +14 -18
- package/dist/es2019/popover/animations.js +1 -145
- package/dist/es2019/popover/popover.compiled.css +0 -10
- package/dist/es2019/popover/popover.js +7 -11
- package/dist/es2019/testing/polyfill.js +3 -0
- package/dist/esm/dialog/dialog-content.compiled.css +0 -10
- package/dist/esm/dialog/dialog-content.js +5 -28
- package/dist/esm/entry-points/animations.js +0 -2
- package/dist/esm/internal/use-animated-visibility.js +14 -18
- package/dist/esm/popover/animations.js +1 -144
- package/dist/esm/popover/popover.compiled.css +0 -10
- package/dist/esm/popover/popover.js +8 -11
- package/dist/esm/testing/polyfill.js +3 -0
- package/dist/types/dialog/types.d.ts +5 -5
- package/dist/types/entry-points/animations.d.ts +0 -2
- package/dist/types/internal/use-animated-visibility.d.ts +15 -33
- package/dist/types/popover/animations.d.ts +7 -52
- package/dist/types/popover/types.d.ts +6 -3
- package/package.json +4 -4
- package/dist/cjs/dialog/animations.js +0 -90
- package/dist/es2019/dialog/animations.js +0 -80
- package/dist/esm/dialog/animations.js +0 -82
- package/dist/types/dialog/animations.d.ts +0 -57
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
// `custom` variant currently exists for typing reasons for Drawer
|
|
2
|
-
// not indicative of final API
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Dialog motion animation.
|
|
6
|
-
*
|
|
7
|
-
* Includes backdrop fade animation.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```tsx
|
|
11
|
-
* import { dialogMotion } from '@atlaskit/top-layer/animations';
|
|
12
|
-
*
|
|
13
|
-
* <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
|
|
14
|
-
* ...
|
|
15
|
-
* </Dialog>
|
|
16
|
-
* ```
|
|
17
|
-
*/
|
|
18
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
19
|
-
export function dialogMotion() {
|
|
20
|
-
return {
|
|
21
|
-
kind: 'dialog',
|
|
22
|
-
name: 'motion'
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Slide up + opacity animation for dialogs.
|
|
28
|
-
*
|
|
29
|
-
* Entry slides up from below; exit slides up and out (asymmetric).
|
|
30
|
-
* Includes backdrop fade animation.
|
|
31
|
-
*
|
|
32
|
-
* @param options.distance - Slide distance in pixels. Defaults to `12`.
|
|
33
|
-
*
|
|
34
|
-
* @example
|
|
35
|
-
* ```tsx
|
|
36
|
-
* import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
|
|
37
|
-
*
|
|
38
|
-
* const animation = dialogSlideUpAndFade();
|
|
39
|
-
* <Dialog animate={animation} isOpen={isOpen} onClose={handleClose} label="...">
|
|
40
|
-
* ...
|
|
41
|
-
* </Dialog>
|
|
42
|
-
* ```
|
|
43
|
-
*/
|
|
44
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
45
|
-
export function dialogSlideUpAndFade(options) {
|
|
46
|
-
var _options$distance;
|
|
47
|
-
var distance = (_options$distance = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance !== void 0 ? _options$distance : 12;
|
|
48
|
-
|
|
49
|
-
// The configurable distance is applied via the `--ds-dialog-ty` custom property
|
|
50
|
-
return {
|
|
51
|
-
kind: 'dialog',
|
|
52
|
-
name: 'slide-up-and-fade',
|
|
53
|
-
getStyles: function getStyles() {
|
|
54
|
-
return [{
|
|
55
|
-
property: '--ds-dialog-ty',
|
|
56
|
-
value: "".concat(distance, "px")
|
|
57
|
-
}];
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* Simple opacity transition for dialogs, no transform.
|
|
64
|
-
*
|
|
65
|
-
* Includes backdrop fade animation.
|
|
66
|
-
*
|
|
67
|
-
* @example
|
|
68
|
-
* ```tsx
|
|
69
|
-
* import { dialogFade } from '@atlaskit/top-layer/animations';
|
|
70
|
-
*
|
|
71
|
-
* <Dialog animate={dialogFade()} isOpen={isOpen} onClose={handleClose} label="...">
|
|
72
|
-
* ...
|
|
73
|
-
* </Dialog>
|
|
74
|
-
* ```
|
|
75
|
-
*/
|
|
76
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
77
|
-
export function dialogFade() {
|
|
78
|
-
return {
|
|
79
|
-
kind: 'dialog',
|
|
80
|
-
name: 'fade'
|
|
81
|
-
};
|
|
82
|
-
}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import type { TAnimationPreset } from '../internal/use-animated-visibility';
|
|
2
|
-
export type TDialogAnimationPresetName = 'motion' | 'slide-up-and-fade' | 'fade' | 'custom';
|
|
3
|
-
export type TDialogAnimationPreset = TAnimationPreset<'dialog', TDialogAnimationPresetName>;
|
|
4
|
-
/**
|
|
5
|
-
* Dialog motion animation.
|
|
6
|
-
*
|
|
7
|
-
* Includes backdrop fade animation.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```tsx
|
|
11
|
-
* import { dialogMotion } from '@atlaskit/top-layer/animations';
|
|
12
|
-
*
|
|
13
|
-
* <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
|
|
14
|
-
* ...
|
|
15
|
-
* </Dialog>
|
|
16
|
-
* ```
|
|
17
|
-
*/
|
|
18
|
-
export declare function dialogMotion(): TDialogAnimationPreset;
|
|
19
|
-
/**
|
|
20
|
-
* Slide up + opacity animation for dialogs.
|
|
21
|
-
*
|
|
22
|
-
* Entry slides up from below; exit slides up and out (asymmetric).
|
|
23
|
-
* Includes backdrop fade animation.
|
|
24
|
-
*
|
|
25
|
-
* @param options.distance - Slide distance in pixels. Defaults to `12`.
|
|
26
|
-
*
|
|
27
|
-
* @example
|
|
28
|
-
* ```tsx
|
|
29
|
-
* import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
|
|
30
|
-
*
|
|
31
|
-
* const animation = dialogSlideUpAndFade();
|
|
32
|
-
* <Dialog animate={animation} isOpen={isOpen} onClose={handleClose} label="...">
|
|
33
|
-
* ...
|
|
34
|
-
* </Dialog>
|
|
35
|
-
* ```
|
|
36
|
-
*/
|
|
37
|
-
export declare function dialogSlideUpAndFade(options?: {
|
|
38
|
-
/**
|
|
39
|
-
* Slide distance in pixels. Defaults to `12`.
|
|
40
|
-
*/
|
|
41
|
-
distance?: number;
|
|
42
|
-
}): TDialogAnimationPreset;
|
|
43
|
-
/**
|
|
44
|
-
* Simple opacity transition for dialogs, no transform.
|
|
45
|
-
*
|
|
46
|
-
* Includes backdrop fade animation.
|
|
47
|
-
*
|
|
48
|
-
* @example
|
|
49
|
-
* ```tsx
|
|
50
|
-
* import { dialogFade } from '@atlaskit/top-layer/animations';
|
|
51
|
-
*
|
|
52
|
-
* <Dialog animate={dialogFade()} isOpen={isOpen} onClose={handleClose} label="...">
|
|
53
|
-
* ...
|
|
54
|
-
* </Dialog>
|
|
55
|
-
* ```
|
|
56
|
-
*/
|
|
57
|
-
export declare function dialogFade(): TDialogAnimationPreset;
|