@atlaskit/empty-state 7.4.2 → 7.4.4
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/version.json +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/version.json +1 -1
- package/package.json +4 -12
- package/report.api.md +34 -92
- package/dist/types-ts4.0/empty-state.d.ts +0 -26
- package/dist/types-ts4.0/index.d.ts +0 -2
- package/dist/types-ts4.0/styled/actions-container.d.ts +0 -11
- package/dist/types-ts4.0/styled/container.d.ts +0 -15
- package/dist/types-ts4.0/styled/description.d.ts +0 -11
- package/dist/types-ts4.0/styled/header.d.ts +0 -11
- package/dist/types-ts4.0/styled/image.d.ts +0 -18
- package/dist/types-ts4.0/styled/index.d.ts +0 -6
- package/dist/types-ts4.0/styled/spinner-container.d.ts +0 -11
- package/dist/types-ts4.0/types.d.ts +0 -76
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/empty-state
|
|
2
2
|
|
|
3
|
+
## 7.4.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 7.4.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
|
|
14
|
+
|
|
3
15
|
## 7.4.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/version.json
CHANGED
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/empty-state",
|
|
3
|
-
"version": "7.4.
|
|
3
|
+
"version": "7.4.4",
|
|
4
4
|
"description": "An empty state appears when there is no data to display and describes what the user can do next.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -13,14 +13,6 @@
|
|
|
13
13
|
"module": "dist/esm/index.js",
|
|
14
14
|
"module:es2019": "dist/es2019/index.js",
|
|
15
15
|
"types": "dist/types/index.d.ts",
|
|
16
|
-
"typesVersions": {
|
|
17
|
-
">=4.0 <4.5": {
|
|
18
|
-
"*": [
|
|
19
|
-
"dist/types-ts4.0/*",
|
|
20
|
-
"dist/types-ts4.0/index.d.ts"
|
|
21
|
-
]
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
16
|
"sideEffects": false,
|
|
25
17
|
"atlaskit:src": "src/index.tsx",
|
|
26
18
|
"atlassian": {
|
|
@@ -33,10 +25,10 @@
|
|
|
33
25
|
}
|
|
34
26
|
},
|
|
35
27
|
"dependencies": {
|
|
36
|
-
"@atlaskit/button": "^16.
|
|
37
|
-
"@atlaskit/spinner": "^15.
|
|
28
|
+
"@atlaskit/button": "^16.4.0",
|
|
29
|
+
"@atlaskit/spinner": "^15.2.0",
|
|
38
30
|
"@atlaskit/theme": "^12.2.0",
|
|
39
|
-
"@atlaskit/tokens": "^0.
|
|
31
|
+
"@atlaskit/tokens": "^0.11.0",
|
|
40
32
|
"@babel/runtime": "^7.0.0",
|
|
41
33
|
"@emotion/react": "^11.7.1"
|
|
42
34
|
},
|
package/report.api.md
CHANGED
|
@@ -1,37 +1,20 @@
|
|
|
1
|
-
## API Report File for "@atlaskit/empty-state"
|
|
1
|
+
## API Report File for "@atlaskit/empty-state"
|
|
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
|
|
|
7
|
-
|
|
11
|
+
```ts
|
|
8
12
|
/// <reference types="react" />
|
|
9
13
|
|
|
10
14
|
import type { ReactNode } from 'react';
|
|
11
15
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*
|
|
15
|
-
* A component used for presenting various empty states.
|
|
16
|
-
* e.g. (no items, empty search, broken link, welcome screen etc.)
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* ```tsx
|
|
20
|
-
* import EmptyState from '@atlaskit/empty-state';
|
|
21
|
-
*
|
|
22
|
-
* // An example of a 404 state
|
|
23
|
-
* export default () => {
|
|
24
|
-
* <EmptyState
|
|
25
|
-
* header="Page not found"
|
|
26
|
-
* imageUrl="https://cdn.io/images/404"
|
|
27
|
-
* description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
|
|
28
|
-
* primaryAction={<Button appearance="primary">Home Page</Button>}
|
|
29
|
-
* secondaryAction={<Button>Report a problem</Button>}
|
|
30
|
-
* />;
|
|
31
|
-
* };
|
|
32
|
-
* ```
|
|
33
|
-
*/
|
|
34
|
-
declare const EmptyState: ({
|
|
16
|
+
// @public
|
|
17
|
+
const EmptyState: ({
|
|
35
18
|
description,
|
|
36
19
|
header,
|
|
37
20
|
imageHeight,
|
|
@@ -50,84 +33,43 @@ declare const EmptyState: ({
|
|
|
50
33
|
}: EmptyStateProps) => JSX.Element;
|
|
51
34
|
export default EmptyState;
|
|
52
35
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
* Title that briefly describes the page to the user.
|
|
56
|
-
*/
|
|
57
|
-
header: string;
|
|
58
|
-
/**
|
|
59
|
-
* The main block of text that holds additional supporting information.
|
|
60
|
-
*/
|
|
36
|
+
// @public (undocumented)
|
|
37
|
+
export interface EmptyStateProps {
|
|
61
38
|
description?: ReactNode;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
*/
|
|
65
|
-
width?: Width;
|
|
66
|
-
/**
|
|
67
|
-
* @deprecated
|
|
68
|
-
* Duplicates the `width` prop. Use `width instead`.
|
|
69
|
-
*/
|
|
70
|
-
size?: Width;
|
|
71
|
-
/**
|
|
72
|
-
* The url of image that will be shown above the title, fed directly into the `src` prop of an <img> element.
|
|
73
|
-
* Note, this image will be constrained by the `maxWidth` and `maxHeight` props.
|
|
74
|
-
*/
|
|
39
|
+
header: string;
|
|
40
|
+
imageHeight?: number;
|
|
75
41
|
imageUrl?: string;
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
*/
|
|
79
|
-
maxImageWidth?: number;
|
|
80
|
-
/**
|
|
81
|
-
* Maximum height (in pixels) of the image, default value is 160.
|
|
82
|
-
*/
|
|
42
|
+
imageWidth?: number;
|
|
43
|
+
isLoading?: boolean;
|
|
83
44
|
maxImageHeight?: number;
|
|
84
|
-
|
|
85
|
-
* Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).
|
|
86
|
-
*/
|
|
45
|
+
maxImageWidth?: number;
|
|
87
46
|
primaryAction?: ReactNode;
|
|
88
|
-
/**
|
|
89
|
-
* An alternative API to supply an image using a render prop. Only rendered if no `imageUrl` is supplied.
|
|
90
|
-
*/
|
|
91
47
|
renderImage?: (props: RenderImageProps) => React.ReactNode;
|
|
92
|
-
/**
|
|
93
|
-
* Secondary action button for the page.
|
|
94
|
-
*/
|
|
95
48
|
secondaryAction?: ReactNode;
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
*/
|
|
49
|
+
// @deprecated (undocumented)
|
|
50
|
+
size?: Width;
|
|
99
51
|
tertiaryAction?: ReactNode;
|
|
100
|
-
/**
|
|
101
|
-
* A hook for automated testing
|
|
102
|
-
*/
|
|
103
52
|
testId?: string;
|
|
104
|
-
|
|
105
|
-
* Used to indicate a loading state. Will show a spinner next to the action buttons when true.
|
|
106
|
-
*/
|
|
107
|
-
isLoading?: boolean;
|
|
108
|
-
/**
|
|
109
|
-
* Width of the image that is rendered in EmptyState component.
|
|
110
|
-
* Useful when you want image to be of exact width to stop it bouncing around when loading in.
|
|
111
|
-
*/
|
|
112
|
-
imageWidth?: number;
|
|
113
|
-
/**
|
|
114
|
-
* Height of the image that is rendered in EmptyState component.
|
|
115
|
-
* Useful when you want image to be of exact height to stop it bouncing around when loading in.
|
|
116
|
-
* Only set `height` if you want the image to resize down on smaller devices.
|
|
117
|
-
*/
|
|
118
|
-
imageHeight?: number;
|
|
53
|
+
width?: Width;
|
|
119
54
|
}
|
|
120
55
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
imageWidth?: number;
|
|
56
|
+
// @public (undocumented)
|
|
57
|
+
export interface RenderImageProps {
|
|
58
|
+
// (undocumented)
|
|
125
59
|
imageHeight?: number;
|
|
60
|
+
// (undocumented)
|
|
61
|
+
imageWidth?: number;
|
|
62
|
+
// (undocumented)
|
|
63
|
+
maxImageHeight?: number;
|
|
64
|
+
// (undocumented)
|
|
65
|
+
maxImageWidth?: number;
|
|
126
66
|
}
|
|
127
67
|
|
|
128
|
-
|
|
68
|
+
// @public (undocumented)
|
|
69
|
+
export type Sizes = 'narrow' | 'wide';
|
|
129
70
|
|
|
130
|
-
|
|
71
|
+
// @public (undocumented)
|
|
72
|
+
export type Width = Sizes;
|
|
131
73
|
|
|
132
|
-
|
|
133
|
-
|
|
74
|
+
// (No @packageDocumentation comment for this package)
|
|
75
|
+
```
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { EmptyStateProps } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* __Empty state__
|
|
5
|
-
*
|
|
6
|
-
* A component used for presenting various empty states.
|
|
7
|
-
* e.g. (no items, empty search, broken link, welcome screen etc.)
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```tsx
|
|
11
|
-
* import EmptyState from '@atlaskit/empty-state';
|
|
12
|
-
*
|
|
13
|
-
* // An example of a 404 state
|
|
14
|
-
* export default () => {
|
|
15
|
-
* <EmptyState
|
|
16
|
-
* header="Page not found"
|
|
17
|
-
* imageUrl="https://cdn.io/images/404"
|
|
18
|
-
* description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
|
|
19
|
-
* primaryAction={<Button appearance="primary">Home Page</Button>}
|
|
20
|
-
* secondaryAction={<Button>Report a problem</Button>}
|
|
21
|
-
* />;
|
|
22
|
-
* };
|
|
23
|
-
* ```
|
|
24
|
-
*/
|
|
25
|
-
declare const EmptyState: ({ description, header, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, width, size, tertiaryAction, testId, }: EmptyStateProps) => JSX.Element;
|
|
26
|
-
export default EmptyState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { FC } from 'react';
|
|
3
|
-
/**
|
|
4
|
-
* __Actions container__
|
|
5
|
-
*
|
|
6
|
-
* A container for actions: primary action, secondary action, and tertiary action.
|
|
7
|
-
*
|
|
8
|
-
* @internal
|
|
9
|
-
*/
|
|
10
|
-
declare const ActionsContainer: FC;
|
|
11
|
-
export default ActionsContainer;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { FC } from 'react';
|
|
3
|
-
import type { Width } from '../index';
|
|
4
|
-
/**
|
|
5
|
-
* __Container__
|
|
6
|
-
*
|
|
7
|
-
* Upper level container for Empty State.
|
|
8
|
-
*
|
|
9
|
-
* @internal
|
|
10
|
-
*/
|
|
11
|
-
declare const Container: FC<{
|
|
12
|
-
testId?: string;
|
|
13
|
-
width: Width;
|
|
14
|
-
}>;
|
|
15
|
-
export default Container;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import { FC } from 'react';
|
|
3
|
-
declare type ImageProps = {
|
|
4
|
-
height?: number;
|
|
5
|
-
maxHeight: number;
|
|
6
|
-
maxWidth: number;
|
|
7
|
-
width?: number;
|
|
8
|
-
src: string;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* __Image__
|
|
12
|
-
*
|
|
13
|
-
* Image in Empty State.
|
|
14
|
-
*
|
|
15
|
-
* @internal
|
|
16
|
-
*/
|
|
17
|
-
declare const Image: FC<ImageProps>;
|
|
18
|
-
export default Image;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export { default as ActionsContainer } from './actions-container';
|
|
2
|
-
export { default as Container } from './container';
|
|
3
|
-
export { default as Description } from './description';
|
|
4
|
-
export { default as Header } from './header';
|
|
5
|
-
export { default as Image } from './image';
|
|
6
|
-
export { default as SpinnerContainer } from './spinner-container';
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
export interface RenderImageProps {
|
|
3
|
-
maxImageWidth?: number;
|
|
4
|
-
maxImageHeight?: number;
|
|
5
|
-
imageWidth?: number;
|
|
6
|
-
imageHeight?: number;
|
|
7
|
-
}
|
|
8
|
-
export declare type Sizes = 'narrow' | 'wide';
|
|
9
|
-
export declare type Width = Sizes;
|
|
10
|
-
export interface EmptyStateProps {
|
|
11
|
-
/**
|
|
12
|
-
* Title that briefly describes the page to the user.
|
|
13
|
-
*/
|
|
14
|
-
header: string;
|
|
15
|
-
/**
|
|
16
|
-
* The main block of text that holds additional supporting information.
|
|
17
|
-
*/
|
|
18
|
-
description?: ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* Controls how much horizontal space the component fills. Defaults to "wide".
|
|
21
|
-
*/
|
|
22
|
-
width?: Width;
|
|
23
|
-
/**
|
|
24
|
-
* @deprecated
|
|
25
|
-
* Duplicates the `width` prop. Use `width instead`.
|
|
26
|
-
*/
|
|
27
|
-
size?: Width;
|
|
28
|
-
/**
|
|
29
|
-
* The url of image that will be shown above the title, fed directly into the `src` prop of an <img> element.
|
|
30
|
-
* Note, this image will be constrained by the `maxWidth` and `maxHeight` props.
|
|
31
|
-
*/
|
|
32
|
-
imageUrl?: string;
|
|
33
|
-
/**
|
|
34
|
-
* Maximum width (in pixels) of the image, default value is 160.
|
|
35
|
-
*/
|
|
36
|
-
maxImageWidth?: number;
|
|
37
|
-
/**
|
|
38
|
-
* Maximum height (in pixels) of the image, default value is 160.
|
|
39
|
-
*/
|
|
40
|
-
maxImageHeight?: number;
|
|
41
|
-
/**
|
|
42
|
-
* Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).
|
|
43
|
-
*/
|
|
44
|
-
primaryAction?: ReactNode;
|
|
45
|
-
/**
|
|
46
|
-
* An alternative API to supply an image using a render prop. Only rendered if no `imageUrl` is supplied.
|
|
47
|
-
*/
|
|
48
|
-
renderImage?: (props: RenderImageProps) => React.ReactNode;
|
|
49
|
-
/**
|
|
50
|
-
* Secondary action button for the page.
|
|
51
|
-
*/
|
|
52
|
-
secondaryAction?: ReactNode;
|
|
53
|
-
/**
|
|
54
|
-
* Button with link to some external resource like documentation or tutorial, it will be opened in a new tab.
|
|
55
|
-
*/
|
|
56
|
-
tertiaryAction?: ReactNode;
|
|
57
|
-
/**
|
|
58
|
-
* A hook for automated testing
|
|
59
|
-
*/
|
|
60
|
-
testId?: string;
|
|
61
|
-
/**
|
|
62
|
-
* Used to indicate a loading state. Will show a spinner next to the action buttons when true.
|
|
63
|
-
*/
|
|
64
|
-
isLoading?: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* Width of the image that is rendered in EmptyState component.
|
|
67
|
-
* Useful when you want image to be of exact width to stop it bouncing around when loading in.
|
|
68
|
-
*/
|
|
69
|
-
imageWidth?: number;
|
|
70
|
-
/**
|
|
71
|
-
* Height of the image that is rendered in EmptyState component.
|
|
72
|
-
* Useful when you want image to be of exact height to stop it bouncing around when loading in.
|
|
73
|
-
* Only set `height` if you want the image to resize down on smaller devices.
|
|
74
|
-
*/
|
|
75
|
-
imageHeight?: number;
|
|
76
|
-
}
|