@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 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.1";
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.1"
48
- };
49
- var gridSize = (0, _constants.gridSize)();
50
- var doubleGridSize = gridSize * 2;
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
- paddingTop: "".concat(gridSize / 2, "px"),
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
- padding: doubleGridSize,
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)({
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "14.7.1",
3
+ "version": "14.7.3",
4
4
  "sideEffects": false
5
5
  }
@@ -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.1";
8
+ const packageVersion = "14.7.3";
9
9
  export const AUTO_DISMISS_SECONDS = 8;
10
10
  /**
11
11
  * __Auto dismiss flag__
@@ -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, layers } from '@atlaskit/theme/constants';
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.1"
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
- paddingTop: `${gridSize / 2}px`,
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
- padding: doubleGridSize,
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({
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "14.7.1",
3
+ "version": "14.7.3",
4
4
  "sideEffects": false
5
5
  }
@@ -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.1";
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, layers } from '@atlaskit/theme/constants';
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.1"
26
- };
27
- var gridSize = getGridSize();
28
- var doubleGridSize = gridSize * 2;
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
- paddingTop: "".concat(gridSize / 2, "px"),
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
- padding: doubleGridSize,
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({
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "14.7.1",
3
+ "version": "14.7.3",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/flag",
3
- "version": "14.7.1",
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.3.0",
39
+ "@atlaskit/button": "^16.4.0",
46
40
  "@atlaskit/ds-lib": "^2.1.0",
47
- "@atlaskit/focus-ring": "^1.0.0",
48
- "@atlaskit/icon": "^21.10.0",
49
- "@atlaskit/motion": "^1.2.0",
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.10.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.2.0",
64
- "@atlaskit/spinner": "^15.0.0",
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
- export declare type ActionsType = Array<ActionType>;
24
+ // @public (undocumented)
25
+ export type ActionsType = Array<ActionType>;
18
26
 
19
- declare type ActionType = {
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
- export declare type AppearanceTypes =
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
- export declare const AutoDismissFlag: (
38
- props: AutoDismissFlagProps,
39
- ) => JSX.Element;
47
+ // @public
48
+ export const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;
40
49
 
41
- declare interface AutoDismissFlagProps
50
+ // @public (undocumented)
51
+ interface AutoDismissFlagProps
42
52
  extends AutoDismissFlagPropsWithoutId,
43
53
  FlagPropsId {}
44
54
 
45
- declare type AutoDismissFlagPropsWithoutId = {
46
- /** Array of clickable actions to be shown at the bottom of the flag. For flags where appearance
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
- declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
68
+ // @public (undocumented)
69
+ type Combine<First, Second> = Omit<First, keyof Second> & Second;
94
70
 
95
- export declare interface CreateFlagArgs extends FlagPropsWithoutId {
96
- /** A unique identifier used for rendering and onDismissed callbacks.
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
- export declare type DismissFn = () => void;
77
+ // @public (undocumented)
78
+ export type DismissFn = () => void;
106
79
 
107
- declare const Flag: (props: FlagProps) => JSX.Element;
80
+ // @public
81
+ const Flag: (props: FlagProps) => jsx.JSX.Element;
108
82
  export default Flag;
109
83
 
110
- export declare type FlagAPI = {
84
+ // @public (undocumented)
85
+ export type FlagAPI = {
111
86
  showFlag: (args: CreateFlagArgs) => DismissFn;
112
87
  };
113
88
 
114
- export declare type FlagArgs = Combine<
89
+ // @public (undocumented)
90
+ export type FlagArgs = Combine<
115
91
  CreateFlagArgs,
116
92
  {
117
93
  id: FlagId;
118
94
  }
119
95
  >;
120
96
 
121
- export declare const FlagGroup: (props: FlagGroupProps) => JSX.Element;
97
+ // @public
98
+ export const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
122
99
 
123
- declare type FlagGroupProps = {
124
- /** ID attribute used for DOM selection. */
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
- declare type FlagId = string | number;
109
+ // @public (undocumented)
110
+ type FlagId = string | number;
139
111
 
140
- export declare interface FlagProps extends FlagPropsWithoutId, FlagPropsId {}
112
+ // @public (undocumented)
113
+ export interface FlagProps extends FlagPropsWithoutId, FlagPropsId {}
141
114
 
142
- declare type FlagPropsId = {
143
- /** A unique identifier used for rendering and onDismissed callbacks. */
115
+ // @public (undocumented)
116
+ type FlagPropsId = {
144
117
  id: number | string;
145
118
  };
146
119
 
147
- declare interface FlagPropsWithoutId
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
- export declare function FlagsProvider({
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
- export declare function useFlags(): FlagAPI;
143
+ // @public
144
+ export function useFlags(): FlagAPI;
173
145
 
174
- export declare const withFlagsProvider: (
146
+ // @public (undocumented)
147
+ export const withFlagsProvider: (
175
148
  fn: () => React_2.ReactNode,
176
149
  ) => React_2.ReactNode;
177
150
 
178
- export {};
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,2 +0,0 @@
1
- import { AppearanceTypes } from './types';
2
- export declare const DEFAULT_APPEARANCE: AppearanceTypes;
@@ -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,8 +0,0 @@
1
- import { FC } from 'react';
2
- interface DescriptionProps {
3
- testId?: string;
4
- color: string;
5
- isBold: boolean;
6
- }
7
- declare const Description: FC<DescriptionProps>;
8
- export default Description;
@@ -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,8 +0,0 @@
1
- /** @jsx jsx */
2
- import { FC } from 'react';
3
- declare type ExpanderProps = {
4
- isExpanded: boolean;
5
- testId?: string;
6
- };
7
- declare const Expander: FC<ExpanderProps>;
8
- export default Expander;
@@ -1,4 +0,0 @@
1
- export { default as Title } from './title';
2
- export { default as Description } from './description';
3
- export { default as Expander } from './expander';
4
- export { default as DismissButton } from './dismiss-button';
@@ -1,6 +0,0 @@
1
- import { FC } from 'react';
2
- interface TitleProps {
3
- color: string;
4
- }
5
- declare const Title: FC<TitleProps>;
6
- export default Title;
@@ -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 {};