@atlaskit/flag 14.7.2 → 14.7.3
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 +6 -0
- package/dist/cjs/auto-dismiss-flag.js +1 -1
- package/dist/cjs/flag.js +9 -6
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/auto-dismiss-flag.js +1 -1
- package/dist/es2019/flag.js +11 -7
- package/dist/es2019/version.json +1 -1
- package/dist/esm/auto-dismiss-flag.js +1 -1
- package/dist/esm/flag.js +11 -7
- package/dist/esm/version.json +1 -1
- package/package.json +6 -14
- package/report.api.md +52 -146
- package/dist/types-ts4.0/auto-dismiss-flag.d.ts +0 -13
- package/dist/types-ts4.0/constants.d.ts +0 -2
- package/dist/types-ts4.0/flag-actions.d.ts +0 -15
- package/dist/types-ts4.0/flag-group.d.ts +0 -45
- package/dist/types-ts4.0/flag-provider.d.ts +0 -33
- package/dist/types-ts4.0/flag.d.ts +0 -14
- package/dist/types-ts4.0/index.d.ts +0 -6
- package/dist/types-ts4.0/internal/description.d.ts +0 -8
- package/dist/types-ts4.0/internal/dismiss-button.d.ts +0 -12
- package/dist/types-ts4.0/internal/expander.d.ts +0 -8
- package/dist/types-ts4.0/internal/index.d.ts +0 -4
- package/dist/types-ts4.0/internal/title.d.ts +0 -6
- package/dist/types-ts4.0/theme.d.ts +0 -10
- package/dist/types-ts4.0/types.d.ts +0 -101
package/CHANGELOG.md
CHANGED
|
@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
26
26
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
27
|
|
|
28
28
|
var packageName = "@atlaskit/flag";
|
|
29
|
-
var packageVersion = "14.7.
|
|
29
|
+
var packageVersion = "14.7.3";
|
|
30
30
|
var AUTO_DISMISS_SECONDS = 8;
|
|
31
31
|
/**
|
|
32
32
|
* __Auto dismiss flag__
|
package/dist/cjs/flag.js
CHANGED
|
@@ -44,24 +44,27 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
44
44
|
var analyticsAttributes = {
|
|
45
45
|
componentName: 'flag',
|
|
46
46
|
packageName: "@atlaskit/flag",
|
|
47
|
-
packageVersion: "14.7.
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
packageVersion: "14.7.3"
|
|
48
|
+
}; // NOT USED
|
|
49
|
+
// const gridSize = getGridSize();
|
|
50
|
+
// const doubleGridSize = gridSize * 2;
|
|
51
|
+
|
|
51
52
|
var titleGroupStyles = (0, _react2.css)({
|
|
52
53
|
display: 'flex',
|
|
53
54
|
alignItems: 'start'
|
|
54
55
|
});
|
|
55
56
|
var iconTitleStyles = (0, _react2.css)({
|
|
56
57
|
display: 'flex',
|
|
57
|
-
|
|
58
|
+
// TODO Delete this comment after verifying spacing token -> previous value ``${gridSize / 2}px``
|
|
59
|
+
paddingTop: "var(--ds-scale-050, 4px)",
|
|
58
60
|
alignItems: 'start',
|
|
59
61
|
flex: 1
|
|
60
62
|
});
|
|
61
63
|
var flagHeaderStyles = (0, _react2.css)({
|
|
62
64
|
boxSizing: 'border-box',
|
|
63
65
|
width: '100%',
|
|
64
|
-
|
|
66
|
+
// TODO Delete this comment after verifying spacing token -> previous value `doubleGridSize`
|
|
67
|
+
padding: "var(--ds-scale-200, 16px)",
|
|
65
68
|
borderRadius: (0, _constants.borderRadius)()
|
|
66
69
|
});
|
|
67
70
|
var flagContainerStyles = (0, _react2.css)({
|
package/dist/cjs/version.json
CHANGED
|
@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
|
|
|
5
5
|
import Flag from './flag';
|
|
6
6
|
import { useFlagGroup } from './flag-group';
|
|
7
7
|
const packageName = "@atlaskit/flag";
|
|
8
|
-
const packageVersion = "14.7.
|
|
8
|
+
const packageVersion = "14.7.3";
|
|
9
9
|
export const AUTO_DISMISS_SECONDS = 8;
|
|
10
10
|
/**
|
|
11
11
|
* __Auto dismiss flag__
|
package/dist/es2019/flag.js
CHANGED
|
@@ -4,7 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
4
4
|
import { useCallback, useEffect, useState } from 'react';
|
|
5
5
|
import { css, jsx } from '@emotion/react';
|
|
6
6
|
import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
7
|
-
import { borderRadius, gridSize as getGridSize,
|
|
7
|
+
import { borderRadius, //gridSize as getGridSize,
|
|
8
|
+
layers } from '@atlaskit/theme/constants';
|
|
8
9
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
9
10
|
import noop from '@atlaskit/ds-lib/noop';
|
|
10
11
|
import FocusRing from '@atlaskit/focus-ring';
|
|
@@ -16,24 +17,27 @@ import { Title, Description, Expander, DismissButton } from './internal';
|
|
|
16
17
|
const analyticsAttributes = {
|
|
17
18
|
componentName: 'flag',
|
|
18
19
|
packageName: "@atlaskit/flag",
|
|
19
|
-
packageVersion: "14.7.
|
|
20
|
-
};
|
|
21
|
-
const gridSize = getGridSize();
|
|
22
|
-
const doubleGridSize = gridSize * 2;
|
|
20
|
+
packageVersion: "14.7.3"
|
|
21
|
+
}; // NOT USED
|
|
22
|
+
// const gridSize = getGridSize();
|
|
23
|
+
// const doubleGridSize = gridSize * 2;
|
|
24
|
+
|
|
23
25
|
const titleGroupStyles = css({
|
|
24
26
|
display: 'flex',
|
|
25
27
|
alignItems: 'start'
|
|
26
28
|
});
|
|
27
29
|
const iconTitleStyles = css({
|
|
28
30
|
display: 'flex',
|
|
29
|
-
|
|
31
|
+
// TODO Delete this comment after verifying spacing token -> previous value ``${gridSize / 2}px``
|
|
32
|
+
paddingTop: "var(--ds-scale-050, 4px)",
|
|
30
33
|
alignItems: 'start',
|
|
31
34
|
flex: 1
|
|
32
35
|
});
|
|
33
36
|
const flagHeaderStyles = css({
|
|
34
37
|
boxSizing: 'border-box',
|
|
35
38
|
width: '100%',
|
|
36
|
-
|
|
39
|
+
// TODO Delete this comment after verifying spacing token -> previous value `doubleGridSize`
|
|
40
|
+
padding: "var(--ds-scale-200, 16px)",
|
|
37
41
|
borderRadius: borderRadius()
|
|
38
42
|
});
|
|
39
43
|
const flagContainerStyles = css({
|
package/dist/es2019/version.json
CHANGED
|
@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
|
|
|
5
5
|
import Flag from './flag';
|
|
6
6
|
import { useFlagGroup } from './flag-group';
|
|
7
7
|
var packageName = "@atlaskit/flag";
|
|
8
|
-
var packageVersion = "14.7.
|
|
8
|
+
var packageVersion = "14.7.3";
|
|
9
9
|
export var AUTO_DISMISS_SECONDS = 8;
|
|
10
10
|
/**
|
|
11
11
|
* __Auto dismiss flag__
|
package/dist/esm/flag.js
CHANGED
|
@@ -10,7 +10,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
10
10
|
import { useCallback, useEffect, useState } from 'react';
|
|
11
11
|
import { css, jsx } from '@emotion/react';
|
|
12
12
|
import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
13
|
-
import { borderRadius, gridSize as getGridSize,
|
|
13
|
+
import { borderRadius, //gridSize as getGridSize,
|
|
14
|
+
layers } from '@atlaskit/theme/constants';
|
|
14
15
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
|
|
15
16
|
import noop from '@atlaskit/ds-lib/noop';
|
|
16
17
|
import FocusRing from '@atlaskit/focus-ring';
|
|
@@ -22,24 +23,27 @@ import { Title, Description, Expander, DismissButton } from './internal';
|
|
|
22
23
|
var analyticsAttributes = {
|
|
23
24
|
componentName: 'flag',
|
|
24
25
|
packageName: "@atlaskit/flag",
|
|
25
|
-
packageVersion: "14.7.
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
packageVersion: "14.7.3"
|
|
27
|
+
}; // NOT USED
|
|
28
|
+
// const gridSize = getGridSize();
|
|
29
|
+
// const doubleGridSize = gridSize * 2;
|
|
30
|
+
|
|
29
31
|
var titleGroupStyles = css({
|
|
30
32
|
display: 'flex',
|
|
31
33
|
alignItems: 'start'
|
|
32
34
|
});
|
|
33
35
|
var iconTitleStyles = css({
|
|
34
36
|
display: 'flex',
|
|
35
|
-
|
|
37
|
+
// TODO Delete this comment after verifying spacing token -> previous value ``${gridSize / 2}px``
|
|
38
|
+
paddingTop: "var(--ds-scale-050, 4px)",
|
|
36
39
|
alignItems: 'start',
|
|
37
40
|
flex: 1
|
|
38
41
|
});
|
|
39
42
|
var flagHeaderStyles = css({
|
|
40
43
|
boxSizing: 'border-box',
|
|
41
44
|
width: '100%',
|
|
42
|
-
|
|
45
|
+
// TODO Delete this comment after verifying spacing token -> previous value `doubleGridSize`
|
|
46
|
+
padding: "var(--ds-scale-200, 16px)",
|
|
43
47
|
borderRadius: borderRadius()
|
|
44
48
|
});
|
|
45
49
|
var flagContainerStyles = css({
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/flag",
|
|
3
|
-
"version": "14.7.
|
|
3
|
+
"version": "14.7.3",
|
|
4
4
|
"description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,14 +12,6 @@
|
|
|
12
12
|
"module": "dist/esm/index.js",
|
|
13
13
|
"module:es2019": "dist/es2019/index.js",
|
|
14
14
|
"types": "dist/types/index.d.ts",
|
|
15
|
-
"typesVersions": {
|
|
16
|
-
">=4.0 <4.5": {
|
|
17
|
-
"*": [
|
|
18
|
-
"dist/types-ts4.0/*",
|
|
19
|
-
"dist/types-ts4.0/index.d.ts"
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
15
|
"sideEffects": false,
|
|
24
16
|
"atlaskit:src": "src/index.tsx",
|
|
25
17
|
"atlassian": {
|
|
@@ -44,14 +36,14 @@
|
|
|
44
36
|
},
|
|
45
37
|
"dependencies": {
|
|
46
38
|
"@atlaskit/analytics-next": "^8.0.0",
|
|
47
|
-
"@atlaskit/button": "^16.
|
|
39
|
+
"@atlaskit/button": "^16.4.0",
|
|
48
40
|
"@atlaskit/ds-lib": "^2.1.0",
|
|
49
|
-
"@atlaskit/focus-ring": "^1.
|
|
41
|
+
"@atlaskit/focus-ring": "^1.2.0",
|
|
50
42
|
"@atlaskit/icon": "^21.11.0",
|
|
51
|
-
"@atlaskit/motion": "^1.
|
|
43
|
+
"@atlaskit/motion": "^1.3.0",
|
|
52
44
|
"@atlaskit/portal": "^4.0.0",
|
|
53
45
|
"@atlaskit/theme": "^12.2.0",
|
|
54
|
-
"@atlaskit/tokens": "^0.
|
|
46
|
+
"@atlaskit/tokens": "^0.11.0",
|
|
55
47
|
"@atlaskit/visually-hidden": "^1.1.0",
|
|
56
48
|
"@babel/runtime": "^7.0.0",
|
|
57
49
|
"@emotion/react": "^11.7.1"
|
|
@@ -63,7 +55,7 @@
|
|
|
63
55
|
"@atlaskit/docs": "*",
|
|
64
56
|
"@atlaskit/radio": "^5.4.0",
|
|
65
57
|
"@atlaskit/section-message": "^6.3.0",
|
|
66
|
-
"@atlaskit/spinner": "^15.
|
|
58
|
+
"@atlaskit/spinner": "^15.2.0",
|
|
67
59
|
"@atlaskit/ssr": "*",
|
|
68
60
|
"@atlaskit/theme": "^12.2.0",
|
|
69
61
|
"@atlaskit/visual-regression": "*",
|
package/report.api.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
## API Report File for "@atlaskit/flag"
|
|
1
|
+
## API Report File for "@atlaskit/flag"
|
|
2
2
|
|
|
3
|
-
> Do not edit this file.
|
|
3
|
+
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
+
|
|
5
|
+
<!--
|
|
6
|
+
Generated API Report version: 2.0
|
|
7
|
+
-->
|
|
4
8
|
|
|
5
9
|
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
6
10
|
|
|
@@ -17,9 +21,11 @@ import { ReactNode } from 'react';
|
|
|
17
21
|
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
18
22
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
19
23
|
|
|
20
|
-
|
|
24
|
+
// @public (undocumented)
|
|
25
|
+
export type ActionsType = Array<ActionType>;
|
|
21
26
|
|
|
22
|
-
|
|
27
|
+
// @public (undocumented)
|
|
28
|
+
type ActionType = {
|
|
23
29
|
content: ReactNode;
|
|
24
30
|
onClick?: (
|
|
25
31
|
e: React.MouseEvent<HTMLElement>,
|
|
@@ -30,217 +36,117 @@ declare type ActionType = {
|
|
|
30
36
|
testId?: string;
|
|
31
37
|
};
|
|
32
38
|
|
|
33
|
-
|
|
39
|
+
// @public (undocumented)
|
|
40
|
+
export type AppearanceTypes =
|
|
34
41
|
| 'error'
|
|
35
42
|
| 'info'
|
|
36
43
|
| 'normal'
|
|
37
44
|
| 'success'
|
|
38
45
|
| 'warning';
|
|
39
46
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
* - [Examples](https://atlassian.design/components/flag/auto-dismiss-flag/examples)
|
|
46
|
-
* - [Code](https://atlassian.design/components/flag/auto-dismiss-flag/code)
|
|
47
|
-
*/
|
|
48
|
-
export declare const AutoDismissFlag: (
|
|
49
|
-
props: AutoDismissFlagProps,
|
|
50
|
-
) => JSX.Element;
|
|
51
|
-
|
|
52
|
-
declare interface AutoDismissFlagProps
|
|
47
|
+
// @public
|
|
48
|
+
export const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;
|
|
49
|
+
|
|
50
|
+
// @public (undocumented)
|
|
51
|
+
interface AutoDismissFlagProps
|
|
53
52
|
extends AutoDismissFlagPropsWithoutId,
|
|
54
53
|
FlagPropsId {}
|
|
55
54
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
* Array of clickable actions to be shown at the bottom of the flag. For flags where appearance
|
|
59
|
-
* is 'normal', actions will be shown as links. For all other appearance values, actions will
|
|
60
|
-
* shown as buttons.
|
|
61
|
-
* If href is passed the action will be shown as a link with the passed href prop.
|
|
62
|
-
*/
|
|
55
|
+
// @public (undocumented)
|
|
56
|
+
type AutoDismissFlagPropsWithoutId = {
|
|
63
57
|
actions?: ActionsType;
|
|
64
|
-
/**
|
|
65
|
-
* Makes the flag appearance bold. Setting this to anything other than 'normal' hides the
|
|
66
|
-
* dismiss button.
|
|
67
|
-
*/
|
|
68
58
|
appearance?: AppearanceTypes;
|
|
69
|
-
/**
|
|
70
|
-
* The secondary content shown below the flag title
|
|
71
|
-
*/
|
|
72
59
|
description?: ReactNode;
|
|
73
|
-
/**
|
|
74
|
-
* The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
|
|
75
|
-
* Your icon will receive the appropriate default color, which you can override by wrapping the
|
|
76
|
-
* icon in a containing element with CSS `color` set to your preferred icon color.
|
|
77
|
-
*/
|
|
78
60
|
icon: ReactNode;
|
|
79
|
-
/**
|
|
80
|
-
* The bold text shown at the top of the flag.
|
|
81
|
-
*/
|
|
82
61
|
title: ReactNode;
|
|
83
|
-
/**
|
|
84
|
-
* Handler which will be called when a Flag's dismiss button is clicked.
|
|
85
|
-
* Receives the id of the dismissed Flag as a parameter.
|
|
86
|
-
*/
|
|
87
62
|
onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
|
|
88
|
-
/**
|
|
89
|
-
* A link component that is passed down to the `@atlaskit/button` used by actions,
|
|
90
|
-
* to allow custom routers to be used. See the
|
|
91
|
-
* [button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)
|
|
92
|
-
* example of what this component should look like.
|
|
93
|
-
*/
|
|
94
63
|
linkComponent?: ComponentType<CustomThemeButtonProps>;
|
|
95
|
-
/**
|
|
96
|
-
* A `testId` prop is provided for specified elements,
|
|
97
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
98
|
-
* serving as a hook for automated tests.
|
|
99
|
-
*
|
|
100
|
-
* Will set these elements when defined:
|
|
101
|
-
*
|
|
102
|
-
* - Flag root element - `{testId}`
|
|
103
|
-
* - Close button visible on default flags - `{testId}-dismiss`
|
|
104
|
-
* - Toggle button visible on bold flags - `{testId}-toggle`
|
|
105
|
-
* - Flag content which wraps the description and actions - `{testId}-expander`
|
|
106
|
-
* - Flag description - `{testId}-description`
|
|
107
|
-
* - Flag actions - `{testId}-actions`
|
|
108
|
-
*/
|
|
109
64
|
testId?: string;
|
|
110
|
-
/**
|
|
111
|
-
* Additional information to be included in the `context` of analytics events that come from flag
|
|
112
|
-
*/
|
|
113
65
|
analyticsContext?: Record<string, any>;
|
|
114
66
|
};
|
|
115
67
|
|
|
116
|
-
|
|
68
|
+
// @public (undocumented)
|
|
69
|
+
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
117
70
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
* A unique identifier used for rendering and onDismissed callbacks.
|
|
121
|
-
* This will be autogenerated if you don’t supply one.
|
|
122
|
-
* If you don’t want the same flag showing multiple times, provide a unique id.
|
|
123
|
-
*/
|
|
71
|
+
// @public (undocumented)
|
|
72
|
+
export interface CreateFlagArgs extends FlagPropsWithoutId {
|
|
124
73
|
id?: FlagId;
|
|
125
|
-
/**
|
|
126
|
-
* Marks whether the flag should render as an AutoDismissFlag
|
|
127
|
-
*/
|
|
128
74
|
isAutoDismiss?: boolean;
|
|
129
75
|
}
|
|
130
76
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
* A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction,
|
|
137
|
-
* often displayed using a flag group.
|
|
138
|
-
*
|
|
139
|
-
* - [Examples](https://atlassian.design/components/flag/examples)
|
|
140
|
-
* - [Code](https://atlassian.design/components/flag/code)
|
|
141
|
-
* - [Usage](https://atlassian.design/components/flag/usage)
|
|
142
|
-
*/
|
|
143
|
-
declare const Flag: (props: FlagProps) => jsx.JSX.Element;
|
|
77
|
+
// @public (undocumented)
|
|
78
|
+
export type DismissFn = () => void;
|
|
79
|
+
|
|
80
|
+
// @public
|
|
81
|
+
const Flag: (props: FlagProps) => jsx.JSX.Element;
|
|
144
82
|
export default Flag;
|
|
145
83
|
|
|
146
|
-
|
|
84
|
+
// @public (undocumented)
|
|
85
|
+
export type FlagAPI = {
|
|
147
86
|
showFlag: (args: CreateFlagArgs) => DismissFn;
|
|
148
87
|
};
|
|
149
88
|
|
|
150
|
-
|
|
89
|
+
// @public (undocumented)
|
|
90
|
+
export type FlagArgs = Combine<
|
|
151
91
|
CreateFlagArgs,
|
|
152
92
|
{
|
|
153
93
|
id: FlagId;
|
|
154
94
|
}
|
|
155
95
|
>;
|
|
156
96
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
* - [Examples](https://atlassian.design/components/flag/flag-group/examples)
|
|
163
|
-
* - [Code](https://atlassian.design/components/flag/flag-group/code)
|
|
164
|
-
*/
|
|
165
|
-
export declare const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
|
|
166
|
-
|
|
167
|
-
declare type FlagGroupProps = {
|
|
168
|
-
/**
|
|
169
|
-
* ID attribute used for DOM selection.
|
|
170
|
-
*/
|
|
97
|
+
// @public
|
|
98
|
+
export const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
|
|
99
|
+
|
|
100
|
+
// @public (undocumented)
|
|
101
|
+
type FlagGroupProps = {
|
|
171
102
|
id?: string;
|
|
172
|
-
/**
|
|
173
|
-
* Describes the specific role of this FlagGroup for users viewing the page with a screen reader (defaults to `Flag notifications`).
|
|
174
|
-
*/
|
|
175
103
|
label?: string;
|
|
176
|
-
/**
|
|
177
|
-
* Describes the specific tag on which the screen reader text will be rendered (defaults to `h2`).
|
|
178
|
-
*/
|
|
179
104
|
labelTag?: React.ElementType;
|
|
180
|
-
/**
|
|
181
|
-
* Flag elements to be displayed.
|
|
182
|
-
*/
|
|
183
105
|
children?: Array<ReactElement> | ReactElement | null | boolean;
|
|
184
|
-
/**
|
|
185
|
-
* Handler which will be called when a Flag's dismiss button is clicked.
|
|
186
|
-
* Receives the id of the dismissed Flag as a parameter.
|
|
187
|
-
*/
|
|
188
106
|
onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
|
|
189
107
|
};
|
|
190
108
|
|
|
191
|
-
|
|
109
|
+
// @public (undocumented)
|
|
110
|
+
type FlagId = string | number;
|
|
192
111
|
|
|
193
|
-
|
|
112
|
+
// @public (undocumented)
|
|
113
|
+
export interface FlagProps extends FlagPropsWithoutId, FlagPropsId {}
|
|
194
114
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
* A unique identifier used for rendering and onDismissed callbacks.
|
|
198
|
-
*/
|
|
115
|
+
// @public (undocumented)
|
|
116
|
+
type FlagPropsId = {
|
|
199
117
|
id: number | string;
|
|
200
118
|
};
|
|
201
119
|
|
|
202
|
-
|
|
120
|
+
// @public (undocumented)
|
|
121
|
+
interface FlagPropsWithoutId
|
|
203
122
|
extends AutoDismissFlagPropsWithoutId,
|
|
204
123
|
WithAnalyticsEventsProps {
|
|
205
|
-
/**
|
|
206
|
-
* Standard onBlur event, applied to Flag by AutoDismissFlag
|
|
207
|
-
*/
|
|
208
124
|
onBlur?: (
|
|
209
125
|
e: React.FocusEvent<HTMLElement>,
|
|
210
126
|
analyticsEvent: UIAnalyticsEvent,
|
|
211
127
|
) => void;
|
|
212
|
-
/**
|
|
213
|
-
* Standard onFocus event, applied to Flag by AutoDismissFlag
|
|
214
|
-
*/
|
|
215
128
|
onFocus?: (
|
|
216
129
|
e: React.FocusEvent<HTMLElement>,
|
|
217
130
|
analyticsEvent: UIAnalyticsEvent,
|
|
218
131
|
) => void;
|
|
219
|
-
/**
|
|
220
|
-
* Standard onMouseOut event, applied to Flag by AutoDismissFlag
|
|
221
|
-
*/
|
|
222
132
|
onMouseOut?: MouseEventHandler;
|
|
223
|
-
/**
|
|
224
|
-
* Standard onMouseOver event, applied to Flag by AutoDismissFlag
|
|
225
|
-
*/
|
|
226
133
|
onMouseOver?: MouseEventHandler;
|
|
227
134
|
}
|
|
228
135
|
|
|
229
|
-
|
|
136
|
+
// @public (undocumented)
|
|
137
|
+
export function FlagsProvider({
|
|
230
138
|
children,
|
|
231
139
|
}: {
|
|
232
140
|
children: React_2.ReactNode;
|
|
233
141
|
}): JSX.Element;
|
|
234
142
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
* - [Examples](https://atlassian.design/components/flag/flags-provider/examples#using-showflags)
|
|
238
|
-
*/
|
|
239
|
-
export declare function useFlags(): FlagAPI;
|
|
143
|
+
// @public
|
|
144
|
+
export function useFlags(): FlagAPI;
|
|
240
145
|
|
|
241
|
-
|
|
146
|
+
// @public (undocumented)
|
|
147
|
+
export const withFlagsProvider: (
|
|
242
148
|
fn: () => React_2.ReactNode,
|
|
243
149
|
) => React_2.ReactNode;
|
|
244
150
|
|
|
245
|
-
|
|
151
|
+
// (No @packageDocumentation comment for this package)
|
|
246
152
|
```
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { AutoDismissFlagProps } from './types';
|
|
3
|
-
export declare const AUTO_DISMISS_SECONDS = 8;
|
|
4
|
-
/**
|
|
5
|
-
* __Auto dismiss flag__
|
|
6
|
-
*
|
|
7
|
-
* An auto dismiss flag is dismissed automatically after eight seconds.
|
|
8
|
-
*
|
|
9
|
-
* - [Examples](https://atlassian.design/components/flag/auto-dismiss-flag/examples)
|
|
10
|
-
* - [Code](https://atlassian.design/components/flag/auto-dismiss-flag/code)
|
|
11
|
-
*/
|
|
12
|
-
declare const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;
|
|
13
|
-
export default AutoDismissFlag;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import type { ComponentType } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
import type { CustomThemeButtonProps } from '@atlaskit/button/types';
|
|
5
|
-
import type { ThemeModes } from '@atlaskit/theme/types';
|
|
6
|
-
import type { ActionsType, AppearanceTypes } from './types';
|
|
7
|
-
declare type FlagActionsProps = {
|
|
8
|
-
appearance: AppearanceTypes;
|
|
9
|
-
actions: ActionsType;
|
|
10
|
-
linkComponent?: ComponentType<CustomThemeButtonProps>;
|
|
11
|
-
mode: ThemeModes;
|
|
12
|
-
testId?: string;
|
|
13
|
-
};
|
|
14
|
-
declare const FlagActions: (props: FlagActionsProps) => jsx.JSX.Element | null;
|
|
15
|
-
export default FlagActions;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { ReactElement } from 'react';
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
5
|
-
declare type FlagGroupProps = {
|
|
6
|
-
/**
|
|
7
|
-
* ID attribute used for DOM selection.
|
|
8
|
-
*/
|
|
9
|
-
id?: string;
|
|
10
|
-
/**
|
|
11
|
-
* Describes the specific role of this FlagGroup for users viewing the page with a screen reader (defaults to `Flag notifications`).
|
|
12
|
-
*/
|
|
13
|
-
label?: string;
|
|
14
|
-
/**
|
|
15
|
-
* Describes the specific tag on which the screen reader text will be rendered (defaults to `h2`).
|
|
16
|
-
*/
|
|
17
|
-
labelTag?: React.ElementType;
|
|
18
|
-
/**
|
|
19
|
-
* Flag elements to be displayed.
|
|
20
|
-
*/
|
|
21
|
-
children?: Array<ReactElement> | ReactElement | null | boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Handler which will be called when a Flag's dismiss button is clicked.
|
|
24
|
-
* Receives the id of the dismissed Flag as a parameter.
|
|
25
|
-
*/
|
|
26
|
-
onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
|
|
27
|
-
};
|
|
28
|
-
export declare const flagWidth: number;
|
|
29
|
-
export declare const flagAnimationTime = 400;
|
|
30
|
-
declare type FlagGroupAPI = {
|
|
31
|
-
onDismissed: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
|
|
32
|
-
isDismissAllowed: boolean;
|
|
33
|
-
};
|
|
34
|
-
export declare const FlagGroupContext: import("react").Context<FlagGroupAPI>;
|
|
35
|
-
export declare function useFlagGroup(): FlagGroupAPI;
|
|
36
|
-
/**
|
|
37
|
-
* __Flag group__
|
|
38
|
-
*
|
|
39
|
-
* A flag group is used to group a set of related flags, with entry and exit animations.
|
|
40
|
-
*
|
|
41
|
-
* - [Examples](https://atlassian.design/components/flag/flag-group/examples)
|
|
42
|
-
* - [Code](https://atlassian.design/components/flag/flag-group/code)
|
|
43
|
-
*/
|
|
44
|
-
declare const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
|
|
45
|
-
export default FlagGroup;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { FlagPropsWithoutId } from './types';
|
|
3
|
-
declare type FlagId = string | number;
|
|
4
|
-
export declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
5
|
-
export interface CreateFlagArgs extends FlagPropsWithoutId {
|
|
6
|
-
/**
|
|
7
|
-
* A unique identifier used for rendering and onDismissed callbacks.
|
|
8
|
-
* This will be autogenerated if you don’t supply one.
|
|
9
|
-
* If you don’t want the same flag showing multiple times, provide a unique id.
|
|
10
|
-
*/
|
|
11
|
-
id?: FlagId;
|
|
12
|
-
/**
|
|
13
|
-
* Marks whether the flag should render as an AutoDismissFlag
|
|
14
|
-
*/
|
|
15
|
-
isAutoDismiss?: boolean;
|
|
16
|
-
}
|
|
17
|
-
export declare type FlagArgs = Combine<CreateFlagArgs, {
|
|
18
|
-
id: FlagId;
|
|
19
|
-
}>;
|
|
20
|
-
export declare type DismissFn = () => void;
|
|
21
|
-
export declare type FlagAPI = {
|
|
22
|
-
showFlag: (args: CreateFlagArgs) => DismissFn;
|
|
23
|
-
};
|
|
24
|
-
/**
|
|
25
|
-
* useFlags is used to access the `showFlags` function which can be used to programatically display flags.
|
|
26
|
-
* - [Examples](https://atlassian.design/components/flag/flags-provider/examples#using-showflags)
|
|
27
|
-
*/
|
|
28
|
-
export declare function useFlags(): FlagAPI;
|
|
29
|
-
export declare function FlagsProvider({ children }: {
|
|
30
|
-
children: React.ReactNode;
|
|
31
|
-
}): JSX.Element;
|
|
32
|
-
export declare const withFlagsProvider: (fn: () => React.ReactNode) => React.ReactNode;
|
|
33
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@emotion/react';
|
|
2
|
-
import type { FlagProps } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* __Flag__
|
|
5
|
-
*
|
|
6
|
-
* A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction,
|
|
7
|
-
* often displayed using a flag group.
|
|
8
|
-
*
|
|
9
|
-
* - [Examples](https://atlassian.design/components/flag/examples)
|
|
10
|
-
* - [Code](https://atlassian.design/components/flag/code)
|
|
11
|
-
* - [Usage](https://atlassian.design/components/flag/usage)
|
|
12
|
-
*/
|
|
13
|
-
declare const Flag: (props: FlagProps) => jsx.JSX.Element;
|
|
14
|
-
export default Flag;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export { default } from './flag';
|
|
2
|
-
export { default as AutoDismissFlag } from './auto-dismiss-flag';
|
|
3
|
-
export { default as FlagGroup } from './flag-group';
|
|
4
|
-
export { useFlags, withFlagsProvider, FlagsProvider } from './flag-provider';
|
|
5
|
-
export type { CreateFlagArgs, DismissFn, FlagAPI, FlagArgs, } from './flag-provider';
|
|
6
|
-
export type { FlagProps, ActionsType, AppearanceTypes } from './types';
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { jsx } from '@emotion/react';
|
|
3
|
-
import { AppearanceTypes } from '../types';
|
|
4
|
-
interface DismissButtonProps {
|
|
5
|
-
appearance: AppearanceTypes;
|
|
6
|
-
onClick: (...args: any) => void;
|
|
7
|
-
isExpanded: boolean;
|
|
8
|
-
isBold: boolean;
|
|
9
|
-
testId?: string;
|
|
10
|
-
}
|
|
11
|
-
declare const _default: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => jsx.JSX.Element>;
|
|
12
|
-
export default _default;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { ThemeModes } from '@atlaskit/theme/types';
|
|
2
|
-
import { AppearanceTypes } from './types';
|
|
3
|
-
export declare const getFlagBackgroundColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
|
|
4
|
-
export declare const flagBorderColor = "rgba(9, 30, 66, 0.31)";
|
|
5
|
-
export declare const flagShadowColor = "rgba(9, 30, 66, 0.25)";
|
|
6
|
-
export declare const getFlagTextColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
|
|
7
|
-
export declare const getFlagIconColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
|
|
8
|
-
export declare const getFlagFocusRingColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
|
|
9
|
-
export declare const getActionBackground: (appearance: AppearanceTypes, mode: ThemeModes) => string;
|
|
10
|
-
export declare const getActionColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import { ComponentType, MouseEventHandler, ReactNode } from 'react';
|
|
2
|
-
import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
3
|
-
import { CustomThemeButtonProps } from '@atlaskit/button/types';
|
|
4
|
-
export declare type ActionType = {
|
|
5
|
-
content: ReactNode;
|
|
6
|
-
onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
7
|
-
href?: string;
|
|
8
|
-
target?: string;
|
|
9
|
-
testId?: string;
|
|
10
|
-
};
|
|
11
|
-
export declare type ActionsType = Array<ActionType>;
|
|
12
|
-
export declare type AppearanceTypes = 'error' | 'info' | 'normal' | 'success' | 'warning';
|
|
13
|
-
export declare const AppearanceArray: AppearanceTypes[];
|
|
14
|
-
declare type FlagPropsId = {
|
|
15
|
-
/**
|
|
16
|
-
* A unique identifier used for rendering and onDismissed callbacks.
|
|
17
|
-
*/
|
|
18
|
-
id: number | string;
|
|
19
|
-
};
|
|
20
|
-
declare type AutoDismissFlagPropsWithoutId = {
|
|
21
|
-
/**
|
|
22
|
-
* Array of clickable actions to be shown at the bottom of the flag. For flags where appearance
|
|
23
|
-
* is 'normal', actions will be shown as links. For all other appearance values, actions will
|
|
24
|
-
* shown as buttons.
|
|
25
|
-
* If href is passed the action will be shown as a link with the passed href prop.
|
|
26
|
-
*/
|
|
27
|
-
actions?: ActionsType;
|
|
28
|
-
/**
|
|
29
|
-
* Makes the flag appearance bold. Setting this to anything other than 'normal' hides the
|
|
30
|
-
* dismiss button.
|
|
31
|
-
*/
|
|
32
|
-
appearance?: AppearanceTypes;
|
|
33
|
-
/**
|
|
34
|
-
* The secondary content shown below the flag title
|
|
35
|
-
*/
|
|
36
|
-
description?: ReactNode;
|
|
37
|
-
/**
|
|
38
|
-
* The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
|
|
39
|
-
* Your icon will receive the appropriate default color, which you can override by wrapping the
|
|
40
|
-
* icon in a containing element with CSS `color` set to your preferred icon color.
|
|
41
|
-
*/
|
|
42
|
-
icon: ReactNode;
|
|
43
|
-
/**
|
|
44
|
-
* The bold text shown at the top of the flag.
|
|
45
|
-
*/
|
|
46
|
-
title: ReactNode;
|
|
47
|
-
/**
|
|
48
|
-
* Handler which will be called when a Flag's dismiss button is clicked.
|
|
49
|
-
* Receives the id of the dismissed Flag as a parameter.
|
|
50
|
-
*/
|
|
51
|
-
onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
|
|
52
|
-
/**
|
|
53
|
-
* A link component that is passed down to the `@atlaskit/button` used by actions,
|
|
54
|
-
* to allow custom routers to be used. See the
|
|
55
|
-
* [button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)
|
|
56
|
-
* example of what this component should look like.
|
|
57
|
-
*/
|
|
58
|
-
linkComponent?: ComponentType<CustomThemeButtonProps>;
|
|
59
|
-
/**
|
|
60
|
-
* A `testId` prop is provided for specified elements,
|
|
61
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
62
|
-
* serving as a hook for automated tests.
|
|
63
|
-
*
|
|
64
|
-
* Will set these elements when defined:
|
|
65
|
-
*
|
|
66
|
-
* - Flag root element - `{testId}`
|
|
67
|
-
* - Close button visible on default flags - `{testId}-dismiss`
|
|
68
|
-
* - Toggle button visible on bold flags - `{testId}-toggle`
|
|
69
|
-
* - Flag content which wraps the description and actions - `{testId}-expander`
|
|
70
|
-
* - Flag description - `{testId}-description`
|
|
71
|
-
* - Flag actions - `{testId}-actions`
|
|
72
|
-
*/
|
|
73
|
-
testId?: string;
|
|
74
|
-
/**
|
|
75
|
-
* Additional information to be included in the `context` of analytics events that come from flag
|
|
76
|
-
*/
|
|
77
|
-
analyticsContext?: Record<string, any>;
|
|
78
|
-
};
|
|
79
|
-
export interface AutoDismissFlagProps extends AutoDismissFlagPropsWithoutId, FlagPropsId {
|
|
80
|
-
}
|
|
81
|
-
export interface FlagPropsWithoutId extends AutoDismissFlagPropsWithoutId, WithAnalyticsEventsProps {
|
|
82
|
-
/**
|
|
83
|
-
* Standard onBlur event, applied to Flag by AutoDismissFlag
|
|
84
|
-
*/
|
|
85
|
-
onBlur?: (e: React.FocusEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
86
|
-
/**
|
|
87
|
-
* Standard onFocus event, applied to Flag by AutoDismissFlag
|
|
88
|
-
*/
|
|
89
|
-
onFocus?: (e: React.FocusEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
90
|
-
/**
|
|
91
|
-
* Standard onMouseOut event, applied to Flag by AutoDismissFlag
|
|
92
|
-
*/
|
|
93
|
-
onMouseOut?: MouseEventHandler;
|
|
94
|
-
/**
|
|
95
|
-
* Standard onMouseOver event, applied to Flag by AutoDismissFlag
|
|
96
|
-
*/
|
|
97
|
-
onMouseOver?: MouseEventHandler;
|
|
98
|
-
}
|
|
99
|
-
export interface FlagProps extends FlagPropsWithoutId, FlagPropsId {
|
|
100
|
-
}
|
|
101
|
-
export {};
|