@atlaskit/flag 14.7.1 → 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 +12 -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 +10 -15
- package/report.api.md +50 -77
- 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
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/flag
|
|
2
2
|
|
|
3
|
+
## 14.7.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 14.7.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
|
|
14
|
+
|
|
3
15
|
## 14.7.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -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,16 +12,10 @@
|
|
|
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
|
-
]
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
15
|
"sideEffects": false,
|
|
23
16
|
"atlaskit:src": "src/index.tsx",
|
|
24
17
|
"atlassian": {
|
|
18
|
+
"disableProductCI": true,
|
|
25
19
|
"team": "Design System Team",
|
|
26
20
|
"releaseModel": "scheduled",
|
|
27
21
|
"website": {
|
|
@@ -42,14 +36,14 @@
|
|
|
42
36
|
},
|
|
43
37
|
"dependencies": {
|
|
44
38
|
"@atlaskit/analytics-next": "^8.0.0",
|
|
45
|
-
"@atlaskit/button": "^16.
|
|
39
|
+
"@atlaskit/button": "^16.4.0",
|
|
46
40
|
"@atlaskit/ds-lib": "^2.1.0",
|
|
47
|
-
"@atlaskit/focus-ring": "^1.
|
|
48
|
-
"@atlaskit/icon": "^21.
|
|
49
|
-
"@atlaskit/motion": "^1.
|
|
41
|
+
"@atlaskit/focus-ring": "^1.2.0",
|
|
42
|
+
"@atlaskit/icon": "^21.11.0",
|
|
43
|
+
"@atlaskit/motion": "^1.3.0",
|
|
50
44
|
"@atlaskit/portal": "^4.0.0",
|
|
51
45
|
"@atlaskit/theme": "^12.2.0",
|
|
52
|
-
"@atlaskit/tokens": "^0.
|
|
46
|
+
"@atlaskit/tokens": "^0.11.0",
|
|
53
47
|
"@atlaskit/visually-hidden": "^1.1.0",
|
|
54
48
|
"@babel/runtime": "^7.0.0",
|
|
55
49
|
"@emotion/react": "^11.7.1"
|
|
@@ -60,8 +54,8 @@
|
|
|
60
54
|
"devDependencies": {
|
|
61
55
|
"@atlaskit/docs": "*",
|
|
62
56
|
"@atlaskit/radio": "^5.4.0",
|
|
63
|
-
"@atlaskit/section-message": "^6.
|
|
64
|
-
"@atlaskit/spinner": "^15.
|
|
57
|
+
"@atlaskit/section-message": "^6.3.0",
|
|
58
|
+
"@atlaskit/spinner": "^15.2.0",
|
|
65
59
|
"@atlaskit/ssr": "*",
|
|
66
60
|
"@atlaskit/theme": "^12.2.0",
|
|
67
61
|
"@atlaskit/visual-regression": "*",
|
|
@@ -83,6 +77,7 @@
|
|
|
83
77
|
"@repo/internal": {
|
|
84
78
|
"dom-events": "use-bind-event-listener",
|
|
85
79
|
"design-system": "v1",
|
|
80
|
+
"design-tokens": "spacing",
|
|
86
81
|
"ui-components": [
|
|
87
82
|
"lite-mode"
|
|
88
83
|
],
|
package/report.api.md
CHANGED
|
@@ -2,11 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
4
|
|
|
5
|
+
<!--
|
|
6
|
+
Generated API Report version: 2.0
|
|
7
|
+
-->
|
|
8
|
+
|
|
9
|
+
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
10
|
+
|
|
5
11
|
```ts
|
|
6
12
|
/// <reference types="react" />
|
|
7
13
|
|
|
8
14
|
import { ComponentType } from 'react';
|
|
9
15
|
import { CustomThemeButtonProps } from '@atlaskit/button/types';
|
|
16
|
+
import { jsx } from '@emotion/react';
|
|
10
17
|
import { MouseEventHandler } from 'react';
|
|
11
18
|
import { default as React_2 } from 'react';
|
|
12
19
|
import { ReactElement } from 'react';
|
|
@@ -14,9 +21,11 @@ import { ReactNode } from 'react';
|
|
|
14
21
|
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
15
22
|
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
16
23
|
|
|
17
|
-
|
|
24
|
+
// @public (undocumented)
|
|
25
|
+
export type ActionsType = Array<ActionType>;
|
|
18
26
|
|
|
19
|
-
|
|
27
|
+
// @public (undocumented)
|
|
28
|
+
type ActionType = {
|
|
20
29
|
content: ReactNode;
|
|
21
30
|
onClick?: (
|
|
22
31
|
e: React.MouseEvent<HTMLElement>,
|
|
@@ -27,153 +36,117 @@ declare type ActionType = {
|
|
|
27
36
|
testId?: string;
|
|
28
37
|
};
|
|
29
38
|
|
|
30
|
-
|
|
39
|
+
// @public (undocumented)
|
|
40
|
+
export type AppearanceTypes =
|
|
31
41
|
| 'error'
|
|
32
42
|
| 'info'
|
|
33
43
|
| 'normal'
|
|
34
44
|
| 'success'
|
|
35
45
|
| 'warning';
|
|
36
46
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
) => JSX.Element;
|
|
47
|
+
// @public
|
|
48
|
+
export const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;
|
|
40
49
|
|
|
41
|
-
|
|
50
|
+
// @public (undocumented)
|
|
51
|
+
interface AutoDismissFlagProps
|
|
42
52
|
extends AutoDismissFlagPropsWithoutId,
|
|
43
53
|
FlagPropsId {}
|
|
44
54
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
* is 'normal', actions will be shown as links. For all other appearance values, actions will
|
|
48
|
-
* shown as buttons.
|
|
49
|
-
* If href is passed the action will be shown as a link with the passed href prop.
|
|
50
|
-
*/
|
|
55
|
+
// @public (undocumented)
|
|
56
|
+
type AutoDismissFlagPropsWithoutId = {
|
|
51
57
|
actions?: ActionsType;
|
|
52
|
-
/** Makes the flag appearance bold. Setting this to anything other than 'normal' hides the
|
|
53
|
-
* dismiss button.
|
|
54
|
-
*/
|
|
55
58
|
appearance?: AppearanceTypes;
|
|
56
|
-
/** The secondary content shown below the flag title */
|
|
57
59
|
description?: ReactNode;
|
|
58
|
-
/** The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
|
|
59
|
-
* Your icon will receive the appropriate default color, which you can override by wrapping the
|
|
60
|
-
* icon in a containing element with CSS `color` set to your preferred icon color.
|
|
61
|
-
*/
|
|
62
60
|
icon: ReactNode;
|
|
63
|
-
/** The bold text shown at the top of the flag. */
|
|
64
61
|
title: ReactNode;
|
|
65
|
-
/** Handler which will be called when a Flag's dismiss button is clicked.
|
|
66
|
-
* Receives the id of the dismissed Flag as a parameter.
|
|
67
|
-
*/
|
|
68
62
|
onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
|
|
69
|
-
/** A link component that is passed down to the `@atlaskit/button` used by actions,
|
|
70
|
-
to allow custom routers to be used. See the
|
|
71
|
-
[button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)
|
|
72
|
-
example of what this component should look like. */
|
|
73
63
|
linkComponent?: ComponentType<CustomThemeButtonProps>;
|
|
74
|
-
/**
|
|
75
|
-
* A `testId` prop is provided for specified elements,
|
|
76
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
77
|
-
* serving as a hook for automated tests.
|
|
78
|
-
|
|
79
|
-
* Will set these elements when defined:
|
|
80
|
-
|
|
81
|
-
* - Flag root element - `{testId}`
|
|
82
|
-
* - Close button visible on default flags - `{testId}-dismiss`
|
|
83
|
-
* - Toggle button visible on bold flags - `{testId}-toggle`
|
|
84
|
-
* - Flag content which wraps the description and actions - `{testId}-expander`
|
|
85
|
-
* - Flag description - `{testId}-description`
|
|
86
|
-
* - Flag actions - `{testId}-actions`
|
|
87
|
-
*/
|
|
88
64
|
testId?: string;
|
|
89
|
-
/** Additional information to be included in the `context` of analytics events that come from flag */
|
|
90
65
|
analyticsContext?: Record<string, any>;
|
|
91
66
|
};
|
|
92
67
|
|
|
93
|
-
|
|
68
|
+
// @public (undocumented)
|
|
69
|
+
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
94
70
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
* This will be autogenerated if you don’t supply one.
|
|
98
|
-
* If you don’t want the same flag showing multiple times, provide a unique id.
|
|
99
|
-
*/
|
|
71
|
+
// @public (undocumented)
|
|
72
|
+
export interface CreateFlagArgs extends FlagPropsWithoutId {
|
|
100
73
|
id?: FlagId;
|
|
101
|
-
/** Marks whether the flag should render as an AutoDismissFlag */
|
|
102
74
|
isAutoDismiss?: boolean;
|
|
103
75
|
}
|
|
104
76
|
|
|
105
|
-
|
|
77
|
+
// @public (undocumented)
|
|
78
|
+
export type DismissFn = () => void;
|
|
106
79
|
|
|
107
|
-
|
|
80
|
+
// @public
|
|
81
|
+
const Flag: (props: FlagProps) => jsx.JSX.Element;
|
|
108
82
|
export default Flag;
|
|
109
83
|
|
|
110
|
-
|
|
84
|
+
// @public (undocumented)
|
|
85
|
+
export type FlagAPI = {
|
|
111
86
|
showFlag: (args: CreateFlagArgs) => DismissFn;
|
|
112
87
|
};
|
|
113
88
|
|
|
114
|
-
|
|
89
|
+
// @public (undocumented)
|
|
90
|
+
export type FlagArgs = Combine<
|
|
115
91
|
CreateFlagArgs,
|
|
116
92
|
{
|
|
117
93
|
id: FlagId;
|
|
118
94
|
}
|
|
119
95
|
>;
|
|
120
96
|
|
|
121
|
-
|
|
97
|
+
// @public
|
|
98
|
+
export const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
|
|
122
99
|
|
|
123
|
-
|
|
124
|
-
|
|
100
|
+
// @public (undocumented)
|
|
101
|
+
type FlagGroupProps = {
|
|
125
102
|
id?: string;
|
|
126
|
-
/** Describes the specific role of this FlagGroup for users viewing the page with a screen reader (defaults to `Flag notifications`). */
|
|
127
103
|
label?: string;
|
|
128
|
-
/** Describes the specific tag on which the screen reader text will be rendered (defaults to `h2`). */
|
|
129
104
|
labelTag?: React.ElementType;
|
|
130
|
-
/** Flag elements to be displayed. */
|
|
131
105
|
children?: Array<ReactElement> | ReactElement | null | boolean;
|
|
132
|
-
/** Handler which will be called when a Flag's dismiss button is clicked.
|
|
133
|
-
* Receives the id of the dismissed Flag as a parameter.
|
|
134
|
-
*/
|
|
135
106
|
onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
|
|
136
107
|
};
|
|
137
108
|
|
|
138
|
-
|
|
109
|
+
// @public (undocumented)
|
|
110
|
+
type FlagId = string | number;
|
|
139
111
|
|
|
140
|
-
|
|
112
|
+
// @public (undocumented)
|
|
113
|
+
export interface FlagProps extends FlagPropsWithoutId, FlagPropsId {}
|
|
141
114
|
|
|
142
|
-
|
|
143
|
-
|
|
115
|
+
// @public (undocumented)
|
|
116
|
+
type FlagPropsId = {
|
|
144
117
|
id: number | string;
|
|
145
118
|
};
|
|
146
119
|
|
|
147
|
-
|
|
120
|
+
// @public (undocumented)
|
|
121
|
+
interface FlagPropsWithoutId
|
|
148
122
|
extends AutoDismissFlagPropsWithoutId,
|
|
149
123
|
WithAnalyticsEventsProps {
|
|
150
|
-
/** Standard onBlur event, applied to Flag by AutoDismissFlag */
|
|
151
124
|
onBlur?: (
|
|
152
125
|
e: React.FocusEvent<HTMLElement>,
|
|
153
126
|
analyticsEvent: UIAnalyticsEvent,
|
|
154
127
|
) => void;
|
|
155
|
-
/** Standard onFocus event, applied to Flag by AutoDismissFlag */
|
|
156
128
|
onFocus?: (
|
|
157
129
|
e: React.FocusEvent<HTMLElement>,
|
|
158
130
|
analyticsEvent: UIAnalyticsEvent,
|
|
159
131
|
) => void;
|
|
160
|
-
/** Standard onMouseOut event, applied to Flag by AutoDismissFlag */
|
|
161
132
|
onMouseOut?: MouseEventHandler;
|
|
162
|
-
/** Standard onMouseOver event, applied to Flag by AutoDismissFlag */
|
|
163
133
|
onMouseOver?: MouseEventHandler;
|
|
164
134
|
}
|
|
165
135
|
|
|
166
|
-
|
|
136
|
+
// @public (undocumented)
|
|
137
|
+
export function FlagsProvider({
|
|
167
138
|
children,
|
|
168
139
|
}: {
|
|
169
140
|
children: React_2.ReactNode;
|
|
170
141
|
}): JSX.Element;
|
|
171
142
|
|
|
172
|
-
|
|
143
|
+
// @public
|
|
144
|
+
export function useFlags(): FlagAPI;
|
|
173
145
|
|
|
174
|
-
|
|
146
|
+
// @public (undocumented)
|
|
147
|
+
export const withFlagsProvider: (
|
|
175
148
|
fn: () => React_2.ReactNode,
|
|
176
149
|
) => React_2.ReactNode;
|
|
177
150
|
|
|
178
|
-
|
|
151
|
+
// (No @packageDocumentation comment for this package)
|
|
179
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 {};
|