@atlaskit/page-header 10.2.2 → 10.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/page-header
 
+## 10.3.0
+
+### Minor Changes
+
+- [`ae50e8dea70`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae50e8dea70) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.2.4
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 10.2.3
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
 ## 10.2.2
 
 ### Patch Changes

package/__perf__/default.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
 import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
+import __noop from '@atlaskit/ds-lib/noop';
 
 import PageHeader from '../src';
 
 const breadcrumbs = (
-  <Breadcrumbs onExpand={() => {}}>
+  <Breadcrumbs onExpand={__noop}>
     <BreadcrumbsItem text="Some project" key="Some project" />
     <BreadcrumbsItem text="Parent page" key="Parent page" />
   </Breadcrumbs>

package/dist/cjs/PageHeader/styled.js

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BottomBarWrapper = exports.ActionsWrapper = exports.TitleContainer = exports.TitleWrapper = exports.StyledTitleWrapper = exports.OuterWrapper = void 0;
+exports.TitleWrapper = exports.TitleContainer = exports.StyledTitleWrapper = exports.OuterWrapper = exports.BottomBarWrapper = exports.ActionsWrapper = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -24,35 +24,35 @@ var _typography = require("@atlaskit/theme/typography");
 
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
-var truncateStyles = (0, _core.css)({
+var truncateStyles = (0, _react2.css)({
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var outerStyles = (0, _core.css)({
+var outerStyles = (0, _react2.css)({
   margin: "".concat(gridSize * 3, "px 0 ").concat(gridSize * 2, "px 0")
 });
-var styledTitleStyles = (0, _core.css)({
+var styledTitleStyles = (0, _react2.css)({
   marginTop: 0,
   lineHeight: "".concat(gridSize * 4, "px"),
   outline: 'none'
 });
-var titleWrapperStyles = (0, _core.css)({
+var titleWrapperStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'flex-start',
   flexWrap: 'wrap'
 });
-var titleWrapperTruncateStyles = (0, _core.css)({
+var titleWrapperTruncateStyles = (0, _react2.css)({
   flexWrap: 'nowrap'
 });
-var titleContainerStyles = (0, _core.css)({
+var titleContainerStyles = (0, _react2.css)({
   minWidth: 0,
   maxWidth: '100%',
   marginBottom: "".concat(gridSize, "px"),
   flex: '1 0 auto',
   flexShrink: undefined
 });
-var actionStyles = (0, _core.css)({
+var actionStyles = (0, _react2.css)({
   maxWidth: '100%',
   marginBottom: "".concat(gridSize, "px"),
   marginLeft: 'auto',
@@ -64,10 +64,10 @@ var actionStyles = (0, _core.css)({
     textAlign: 'right'
   }
 });
-var titleContainerTruncateStyles = (0, _core.css)({
+var titleContainerTruncateStyles = (0, _react2.css)({
   flexShrink: 1
 });
-var bottomBarStyles = (0, _core.css)({
+var bottomBarStyles = (0, _react2.css)({
   marginTop: "".concat(gridSize * 2, "px")
 });
 /**
@@ -80,14 +80,14 @@ var bottomBarStyles = (0, _core.css)({
 
 var OuterWrapper = function OuterWrapper(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: outerStyles
   }, children);
 }; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 
 exports.OuterWrapper = OuterWrapper;
-var h700Styles = (0, _core.css)((0, _typography.h700)());
+var h700Styles = (0, _react2.css)((0, _typography.h700)());
 
 /**
  * __Styled title wrapper__
@@ -99,7 +99,7 @@ var StyledTitleWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2,
   var children = _ref2.children,
       id = _ref2.id,
       truncateTitle = _ref2.truncateTitle;
-  return (0, _core.jsx)("h1", {
+  return (0, _react2.jsx)("h1", {
     css: [h700Styles, styledTitleStyles, truncateTitle && truncateStyles],
     ref: ref,
     tabIndex: -1,
@@ -118,7 +118,7 @@ exports.StyledTitleWrapper = StyledTitleWrapper;
 var TitleWrapper = function TitleWrapper(_ref3) {
   var children = _ref3.children,
       truncateTitle = _ref3.truncateTitle;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
   }, children);
 };
@@ -135,7 +135,7 @@ exports.TitleWrapper = TitleWrapper;
 var TitleContainer = function TitleContainer(_ref4) {
   var children = _ref4.children,
       truncateTitle = _ref4.truncateTitle;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
   }, children);
 };
@@ -151,7 +151,7 @@ exports.TitleContainer = TitleContainer;
 
 var ActionsWrapper = function ActionsWrapper(_ref5) {
   var children = _ref5.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: actionStyles
   }, children);
 };
@@ -167,7 +167,7 @@ exports.ActionsWrapper = ActionsWrapper;
 
 var BottomBarWrapper = function BottomBarWrapper(_ref6) {
   var children = _ref6.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: bottomBarStyles
   }, children);
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-header",
-	"version": "10.2.2",
+	"version": "10.3.0",
 	"sideEffects": false
 }

package/dist/es2019/PageHeader/styled.js

@@ -7,7 +7,7 @@
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';
 const gridSize = getGridSize();

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-header",
-	"version": "10.2.2",
+	"version": "10.3.0",
 	"sideEffects": false
 }

package/dist/esm/PageHeader/styled.js

@@ -7,7 +7,7 @@
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';
 var gridSize = getGridSize();

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-header",
-	"version": "10.2.2",
+	"version": "10.3.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/page-header",
-  "version": "10.2.2",
+  "version": "10.3.0",
   "description": "A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -17,38 +17,38 @@
   "homepage": "https://atlassian.design/components/page-header",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Page header"
+      "name": "Page header",
+      "category": "Components"
     }
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.2.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/breadcrumbs": "^11.3.0",
-    "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/breadcrumbs": "^11.7.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/inline-edit": "^12.1.0",
-    "@atlaskit/page": "^12.0.0",
-    "@atlaskit/section-message": "^6.1.0",
-    "@atlaskit/select": "^15.0.0",
+    "@atlaskit/ds-lib": "^2.0.1",
+    "@atlaskit/inline-edit": "^12.2.0",
+    "@atlaskit/page": "^12.2.0",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.1.0",
+    "@atlaskit/textfield": "^5.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
     "react-test-renderer": "^16.8.0",
-    "typescript": "3.9.6"
+    "typescript": "4.3.5"
   },
   "keywords": [
     "atlaskit",
@@ -60,12 +60,16 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "analytics": "analytics-next",
       "theming": [
-        "new-theming-api",
+        "react-context",
         "tokens"
       ],
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "design-system": "v1",
       "deprecation": "no-deprecated-imports"
     }

package/report.api.md

@@ -0,0 +1,67 @@
+## API Report File for "@atlaskit/page-header"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * __Page header__
+ *
+ * A page header defines the top of a page. It contains a title and can be optionally combined with
+ * breadcrumbs buttons, search, and filters.
+ *
+ * - [Examples](https://atlassian.design/components/page-header/examples)
+ * - [Code](https://atlassian.design/components/page-header/code)
+ * - [Usage](https://atlassian.design/components/page-header/usage)
+ */
+declare const PageHeader: ({
+  innerRef,
+  breadcrumbs,
+  actions,
+  bottomBar,
+  children,
+  id,
+  disableTitleStyles,
+  truncateTitle,
+}: PageHeaderProps) => JSX.Element;
+export default PageHeader;
+
+declare type PageHeaderProps = {
+  /**
+   * Contents of the action bar to be rendered next to the page title.
+   */
+  actions?: ReactElement;
+  /**
+   * Contents of the action bar to be rendered next to the page title. Typically a button group.
+   */
+  bottomBar?: ReactElement;
+  /**
+   * Page breadcrumbs to be rendered above the title.
+   */
+  breadcrumbs?: ReactElement;
+  /**
+   * Contents of the bottom bar to be rendered below the page title. Typically contains a search bar and/or filters.
+   */
+  children?: ReactNode;
+  /**
+   * Content of the page title. The text wraps by default.
+   */
+  disableTitleStyles?: boolean;
+  /**
+   * Returns the inner ref to the DOM element of the title. This is exposed so the focus can be set.
+   */
+  innerRef?: (element: HTMLElement) => void;
+  /**
+   * Prevent the title from wrapping across lines. This should be avoided.
+   */
+  truncateTitle?: boolean;
+  /**
+   * Used as id of inner h1 tag. This is exposed so the header text can be used as label of other element by aria-labeledby
+   */
+  id?: string;
+};
+
+export {};
+```