@atlaskit/empty-state 7.3.12 → 7.4.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/empty-state
 
+## 7.4.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 7.4.0
+
+### Minor Changes
+
+- [`645ec6a64a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/645ec6a64a8) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.3.12
 
 ### Patch Changes

package/dist/cjs/styled/actions-container.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
-var actionsStyles = (0, _core.css)({
+var actionsStyles = (0, _react.css)({
   display: 'flex',
   marginBottom: "".concat(gridSize, "px"),
   paddingLeft: "".concat(5 * gridSize, "px"),
@@ -28,7 +28,7 @@ var actionsStyles = (0, _core.css)({
 
 var ActionsContainer = function ActionsContainer(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: actionsStyles
   }, children);
 };

package/dist/cjs/styled/container.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -14,16 +14,16 @@ var gridSize = (0, _constants.gridSize)();
 var verticalMarginSize = gridSize * 6;
 var columnWidth = gridSize * 8;
 var gutter = gridSize * 2;
-var containerStyles = (0, _core.css)({
+var containerStyles = (0, _react.css)({
   margin: "".concat(verticalMarginSize, "px auto"),
   textAlign: 'center'
 });
 /* Use max-width so the component can shrink on smaller viewports. */
 
-var wideContainerStyles = (0, _core.css)({
+var wideContainerStyles = (0, _react.css)({
   maxWidth: "".concat(columnWidth * 6 + gutter * 5, "px")
 });
-var narrowContainerStyles = (0, _core.css)({
+var narrowContainerStyles = (0, _react.css)({
   maxWidth: "".concat(columnWidth * 4 + gutter * 3, "px")
 });
 /**
@@ -38,7 +38,7 @@ var Container = function Container(_ref) {
   var children = _ref.children,
       width = _ref.width,
       testId = _ref.testId;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": testId,
     css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
   }, children);

package/dist/cjs/styled/description.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
-var descriptionStyles = (0, _core.css)({
+var descriptionStyles = (0, _react.css)({
   marginTop: 0,
   marginBottom: "".concat((0, _constants.gridSize)() * 3, "px"),
   color: "var(--ds-text, ".concat(_colors.N800, ")")
@@ -27,7 +27,7 @@ var descriptionStyles = (0, _core.css)({
 
 var Description = function Description(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("p", {
+  return (0, _react.jsx)("p", {
     css: descriptionStyles
   }, children);
 };

package/dist/cjs/styled/header.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -13,7 +13,7 @@ var _typography = require("@atlaskit/theme/typography");
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var headerStyles = (0, _core.css)([(0, _typography.h600)(), {
+var headerStyles = (0, _react.css)([(0, _typography.h600)(), {
   marginTop: 0,
   marginBottom: "".concat((0, _constants.gridSize)() * 2, "px")
 }]);
@@ -27,7 +27,7 @@ var headerStyles = (0, _core.css)([(0, _typography.h600)(), {
 
 var EmptyStateHeader = function EmptyStateHeader(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("h4", {
+  return (0, _react.jsx)("h4", {
     css: headerStyles
   }, children);
 };

package/dist/cjs/styled/image.js

@@ -9,14 +9,14 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
 var CSS_VAR_MAX_WIDTH = '--max-width';
 var CSS_VAR_MAX_HEIGHT = '--max-height';
-var imageStyles = (0, _core.css)({
+var imageStyles = (0, _react.css)({
   display: 'block',
   maxWidth: "var(".concat(CSS_VAR_MAX_WIDTH, ")"),
   maxHeight: "var(".concat(CSS_VAR_MAX_HEIGHT, ")"),
@@ -40,7 +40,7 @@ var Image = function Image(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? 'auto' : _ref$width,
       src = _ref.src;
-  return (0, _core.jsx)("img", {
+  return (0, _react.jsx)("img", {
     style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), (0, _defineProperty2.default)(_ref2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _ref2),
     width: width,
     height: height,

package/dist/cjs/styled/spinner-container.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
-var spinnerContainerStyles = (0, _core.css)({
+var spinnerContainerStyles = (0, _react.css)({
   width: "".concat(3 * gridSize, "px"),
   marginLeft: "".concat(2 * gridSize, "px")
 });
@@ -25,7 +25,7 @@ var spinnerContainerStyles = (0, _core.css)({
 
 var SpinnerContainer = function SpinnerContainer(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: spinnerContainerStyles
   }, children);
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.3.12",
+	"version": "7.4.1",
 	"sideEffects": false
 }

package/dist/es2019/styled/actions-container.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
 const actionsStyles = css({

package/dist/es2019/styled/container.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
 const verticalMarginSize = gridSize * 6;

package/dist/es2019/styled/description.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const descriptionStyles = css({

package/dist/es2019/styled/header.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 

package/dist/es2019/styled/image.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const CSS_VAR_MAX_WIDTH = '--max-width';
 const CSS_VAR_MAX_HEIGHT = '--max-height';

package/dist/es2019/styled/spinner-container.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
 const spinnerContainerStyles = css({

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.3.12",
+	"version": "7.4.1",
 	"sideEffects": false
 }

package/dist/esm/styled/actions-container.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
 var actionsStyles = css({

package/dist/esm/styled/container.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
 var verticalMarginSize = gridSize * 6;

package/dist/esm/styled/description.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var descriptionStyles = css({

package/dist/esm/styled/header.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 

package/dist/esm/styled/image.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var CSS_VAR_MAX_WIDTH = '--max-width';
 var CSS_VAR_MAX_HEIGHT = '--max-height';

package/dist/esm/styled/spinner-container.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
 var spinnerContainerStyles = css({

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.3.12",
+	"version": "7.4.1",
 	"sideEffects": false
 }

package/dist/types-ts4.0/empty-state.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import type { EmptyStateProps } from './types';
+/**
+ * __Empty state__
+ *
+ * A component used for presenting various empty states.
+ * e.g. (no items, empty search, broken link, welcome screen etc.)
+ *
+ * @example
+ * ```tsx
+ * import EmptyState from '@atlaskit/empty-state';
+ *
+ * // An example of a 404 state
+ * export default () => {
+ *  <EmptyState
+ *   header="Page not found"
+ *   imageUrl="https://cdn.io/images/404"
+ *   description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
+ *   primaryAction={<Button appearance="primary">Home Page</Button>}
+ *   secondaryAction={<Button>Report a problem</Button>}
+ *  />;
+ * };
+ * ```
+ */
+declare const EmptyState: ({ description, header, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, width, size, tertiaryAction, testId, }: EmptyStateProps) => JSX.Element;
+export default EmptyState;

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './empty-state';
+export type { Sizes, Width, RenderImageProps, EmptyStateProps } from './types';

package/dist/types-ts4.0/styled/actions-container.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { FC } from 'react';
+/**
+ * __Actions container__
+ *
+ * A container for actions: primary action, secondary action, and tertiary action.
+ *
+ * @internal
+ */
+declare const ActionsContainer: FC;
+export default ActionsContainer;

package/dist/types-ts4.0/styled/container.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import type { Width } from '../index';
+/**
+ * __Container__
+ *
+ * Upper level container for Empty State.
+ *
+ * @internal
+ */
+declare const Container: FC<{
+    testId?: string;
+    width: Width;
+}>;
+export default Container;

package/dist/types-ts4.0/styled/description.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { FC } from 'react';
+/**
+ * __Description__
+ *
+ * Description of Empty State.
+ *
+ * @internal
+ */
+declare const Description: FC;
+export default Description;

package/dist/types-ts4.0/styled/header.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { FC } from 'react';
+/**
+ * __Header__
+ *
+ * Header of Empty State.
+ *
+ * @internal
+ */
+declare const EmptyStateHeader: FC;
+export default EmptyStateHeader;

package/dist/types-ts4.0/styled/image.d.ts

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { FC } from 'react';
+declare type ImageProps = {
+    height?: number;
+    maxHeight: number;
+    maxWidth: number;
+    width?: number;
+    src: string;
+};
+/**
+ * __Image__
+ *
+ * Image in Empty State.
+ *
+ * @internal
+ */
+declare const Image: FC<ImageProps>;
+export default Image;

package/dist/types-ts4.0/styled/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ActionsContainer } from './actions-container';
+export { default as Container } from './container';
+export { default as Description } from './description';
+export { default as Header } from './header';
+export { default as Image } from './image';
+export { default as SpinnerContainer } from './spinner-container';

package/dist/types-ts4.0/styled/spinner-container.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { FC } from 'react';
+/**
+ * __Spinner container__
+ *
+ * A spinner container for loading state of Empty State.
+ *
+ * @internal
+ */
+declare const SpinnerContainer: FC;
+export default SpinnerContainer;

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+export interface RenderImageProps {
+    maxImageWidth?: number;
+    maxImageHeight?: number;
+    imageWidth?: number;
+    imageHeight?: number;
+}
+export declare type Sizes = 'narrow' | 'wide';
+export declare type Width = Sizes;
+export interface EmptyStateProps {
+    /**
+     * Title that briefly describes the page to the user.
+     */
+    header: string;
+    /**
+     * The main block of text that holds additional supporting information.
+     */
+    description?: ReactNode;
+    /**
+     * Controls how much horizontal space the component fills. Defaults to "wide".
+     */
+    width?: Width;
+    /**
+     * @deprecated
+     * Duplicates the `width` prop. Use `width instead`.
+     */
+    size?: Width;
+    /**
+     * The url of image that will be shown above the title, fed directly into the `src` prop of an <img> element.
+     * Note, this image will be constrained by the `maxWidth` and `maxHeight` props.
+     */
+    imageUrl?: string;
+    /**
+     * Maximum width (in pixels) of the image, default value is 160.
+     */
+    maxImageWidth?: number;
+    /**
+     * Maximum height (in pixels) of the image, default value is 160.
+     */
+    maxImageHeight?: number;
+    /**
+     * Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).
+     */
+    primaryAction?: ReactNode;
+    /**
+     * An alternative API to supply an image using a render prop. Only rendered if no `imageUrl` is supplied.
+     */
+    renderImage?: (props: RenderImageProps) => React.ReactNode;
+    /**
+     * Secondary action button for the page.
+     */
+    secondaryAction?: ReactNode;
+    /**
+     * Button with link to some external resource like documentation or tutorial, it will be opened in a new tab.
+     */
+    tertiaryAction?: ReactNode;
+    /**
+     * A hook for automated testing
+     */
+    testId?: string;
+    /**
+     * Used to indicate a loading state. Will show a spinner next to the action buttons when true.
+     */
+    isLoading?: boolean;
+    /**
+     * Width of the image that is rendered in EmptyState component.
+     * Useful when you want image to be of exact width to stop it bouncing around when loading in.
+     */
+    imageWidth?: number;
+    /**
+     * Height of the image that is rendered in EmptyState component.
+     * Useful when you want image to be of exact height to stop it bouncing around when loading in.
+     * Only set `height` if you want the image to resize down on smaller devices.
+     */
+    imageHeight?: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/empty-state",
-  "version": "7.3.12",
+  "version": "7.4.1",
   "description": "An empty state appears when there is no data to display and describes what the user can do next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,6 +13,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -26,23 +33,24 @@
   "dependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/docs": "^9.0.0",
+    "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.0.1",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }