@atlaskit/page-header 10.1.2 → 10.2.2

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/page-header
 
+## 10.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.2.1
+
+### Patch Changes
+
+- [`b3893a2357b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3893a2357b) - Fixes a styling issue that arose in v10.2.0 relating to the lineHeight of the page header's title.
+
+## 10.2.0
+
+### Minor Changes
+
+- [`6b76b1ceab3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6b76b1ceab3) - This change removes the dependency `styled components`. It has been refactored to use `@emotion/core` instead. Some examples have also been updated. There should be no UI or UX change.
+
+### Patch Changes
+
+- [`cd34d8ca8ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd34d8ca8ea) - Internal wiring up to the tokens techstack, no code changes.
+
+## 10.1.3
+
+### Patch Changes
+
+- [`c5785203506`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5785203506) - Updated homepage in package.json
+
 ## 10.1.2
 
 ### Patch Changes

package/dist/cjs/PageHeader/index.js

@@ -11,6 +11,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = require("./styled");
 
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. This can be done in the next lite-mode conversion.
+
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
+
+/**
+ * __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)
+ */
 var PageHeader = function PageHeader(_ref) {
   var innerRef = _ref.innerRef,
       breadcrumbs = _ref.breadcrumbs,
@@ -22,14 +38,13 @@ var PageHeader = function PageHeader(_ref) {
       disableTitleStyles = _ref$disableTitleStyl === void 0 ? false : _ref$disableTitleStyl,
       _ref$truncateTitle = _ref.truncateTitle,
       truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle;
-  return /*#__PURE__*/_react.default.createElement(_styled.Outer, null, breadcrumbs, /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
-    truncate: truncateTitle
+  return /*#__PURE__*/_react.default.createElement(_styled.OuterWrapper, null, breadcrumbs, /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
+    truncateTitle: truncateTitle
   }, /*#__PURE__*/_react.default.createElement(_styled.TitleContainer, {
-    truncate: truncateTitle
-  }, disableTitleStyles ? children : /*#__PURE__*/_react.default.createElement(_styled.StyledTitle, {
-    innerRef: innerRef,
-    tabIndex: -1,
-    truncate: truncateTitle,
+    truncateTitle: truncateTitle
+  }, disableTitleStyles ? children : /*#__PURE__*/_react.default.createElement(_styled.StyledTitleWrapper, {
+    ref: innerRef,
+    truncateTitle: truncateTitle,
     id: id
   }, children)), actions && /*#__PURE__*/_react.default.createElement(_styled.ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/_react.default.createElement(_styled.BottomBarWrapper, null, " ", bottomBar, " "));
 };

package/dist/cjs/PageHeader/styled.js

@@ -5,49 +5,171 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BottomBarWrapper = exports.ActionsWrapper = exports.TitleContainer = exports.TitleWrapper = exports.StyledTitle = exports.Outer = void 0;
+exports.BottomBarWrapper = exports.ActionsWrapper = exports.TitleContainer = exports.TitleWrapper = exports.StyledTitleWrapper = exports.OuterWrapper = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. The prop name concerned here is truncateTitle.
+// This can be done in the next lite-mode conversion.
 
-var getTruncationStyles = function getTruncationStyles(_ref) {
-  var truncate = _ref.truncate;
-  return truncate ? "\n        overflow-x: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      " : null;
-};
-
-var Outer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "px 0 ", "px 0;\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 2);
-
-exports.Outer = Outer;
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 
-var StyledTitle = _styledComponents.default.h1(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  ", " line-height: ", "px;\n  margin-top: 0;\n  outline: none;\n"])), (0, _typography.h700)(), getTruncationStyles, (0, _constants.gridSize)() * 4);
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+var truncateStyles = (0, _core.css)({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var outerStyles = (0, _core.css)({
+  margin: "".concat(gridSize * 3, "px 0 ").concat(gridSize * 2, "px 0")
+});
+var styledTitleStyles = (0, _core.css)({
+  marginTop: 0,
+  lineHeight: "".concat(gridSize * 4, "px"),
+  outline: 'none'
+});
+var titleWrapperStyles = (0, _core.css)({
+  display: 'flex',
+  alignItems: 'flex-start',
+  flexWrap: 'wrap'
+});
+var titleWrapperTruncateStyles = (0, _core.css)({
+  flexWrap: 'nowrap'
+});
+var titleContainerStyles = (0, _core.css)({
+  minWidth: 0,
+  maxWidth: '100%',
+  marginBottom: "".concat(gridSize, "px"),
+  flex: '1 0 auto',
+  flexShrink: undefined
+});
+var actionStyles = (0, _core.css)({
+  maxWidth: '100%',
+  marginBottom: "".concat(gridSize, "px"),
+  marginLeft: 'auto',
+  paddingLeft: "".concat(gridSize * 4, "px"),
+  flex: '0 0 auto',
+  whiteSpace: 'nowrap',
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '>': {
+    textAlign: 'right'
+  }
+});
+var titleContainerTruncateStyles = (0, _core.css)({
+  flexShrink: 1
+});
+var bottomBarStyles = (0, _core.css)({
+  marginTop: "".concat(gridSize * 2, "px")
+});
+/**
+ * __Outer wrapper__
+ *
+ * An outer wrapper that is the outermost component of the PageHeader component. It wraps around the PageHeader, its Actions,
+ * the BottomBar and its Breadcrumbs.
+ *
+ */
+
+var OuterWrapper = function OuterWrapper(_ref) {
+  var children = _ref.children;
+  return (0, _core.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)());
+
+/**
+ * __Styled title wrapper__
+ *
+ * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
+ *
+ */
+var StyledTitleWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      id = _ref2.id,
+      truncateTitle = _ref2.truncateTitle;
+  return (0, _core.jsx)("h1", {
+    css: [h700Styles, styledTitleStyles, truncateTitle && truncateStyles],
+    ref: ref,
+    tabIndex: -1,
+    id: id
+  }, children);
+});
 
-exports.StyledTitle = StyledTitle;
+exports.StyledTitleWrapper = StyledTitleWrapper;
+
+/**
+ * __Title wrapper__
+ *
+ * A title wrapper is a wrapper around the title and the actions.
+ *
+ */
+var TitleWrapper = function TitleWrapper(_ref3) {
+  var children = _ref3.children,
+      truncateTitle = _ref3.truncateTitle;
+  return (0, _core.jsx)("div", {
+    css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
+  }, children);
+};
+/**
+ * Title container
+ *
+ * A title container is a container that wraps around the title and its styles (if applied).
+ *
+ */
 
-var TitleWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: flex-start;\n  display: flex;\n  ", "\n"])), function (_ref2) {
-  var truncate = _ref2.truncate;
-  return truncate ? 'flex-wrap: no-wrap;' : 'flex-wrap: wrap;';
-});
 
 exports.TitleWrapper = TitleWrapper;
 
-var TitleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n  ", "\n  margin-bottom: ", "px;\n  max-width: 100%;\n  min-width: 0;\n"])), function (_ref3) {
-  var truncate = _ref3.truncate;
-  return truncate ? 'flex-shrink: 1;' : null;
-}, (0, _constants.gridSize)());
+var TitleContainer = function TitleContainer(_ref4) {
+  var children = _ref4.children,
+      truncateTitle = _ref4.truncateTitle;
+  return (0, _core.jsx)("div", {
+    css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
+  }, children);
+};
+/**
+ * __Actions wrapper__
+ *
+ * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
+ *
+ */
+
 
 exports.TitleContainer = TitleContainer;
 
-var ActionsWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n  margin-bottom: ", "px;\n  margin-left: auto;\n  max-width: 100%;\n  padding-left: ", "px;\n  white-space: nowrap;\n\n  > {\n    text-align: right;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 4);
+var ActionsWrapper = function ActionsWrapper(_ref5) {
+  var children = _ref5.children;
+  return (0, _core.jsx)("div", {
+    css: actionStyles
+  }, children);
+};
+/**
+ * __Bottom bar wrapper__
+ *
+ * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
+ *
+ */
+
 
 exports.ActionsWrapper = ActionsWrapper;
 
-var BottomBarWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+var BottomBarWrapper = function BottomBarWrapper(_ref6) {
+  var children = _ref6.children;
+  return (0, _core.jsx)("div", {
+    css: bottomBarStyles
+  }, children);
+};
 
 exports.BottomBarWrapper = BottomBarWrapper;

package/dist/cjs/version.json

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

package/dist/es2019/PageHeader/index.js

@@ -1,6 +1,21 @@
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. This can be done in the next lite-mode conversion.
+
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 import React from 'react';
-import { ActionsWrapper, BottomBarWrapper, Outer, StyledTitle, TitleContainer, TitleWrapper } from './styled';
+import { ActionsWrapper, BottomBarWrapper, OuterWrapper, StyledTitleWrapper, TitleContainer, TitleWrapper } from './styled';
 
+/**
+ * __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)
+ */
 const PageHeader = ({
   innerRef,
   breadcrumbs,
@@ -11,14 +26,13 @@ const PageHeader = ({
   disableTitleStyles = false,
   truncateTitle = false
 }) => {
-  return /*#__PURE__*/React.createElement(Outer, null, breadcrumbs, /*#__PURE__*/React.createElement(TitleWrapper, {
-    truncate: truncateTitle
+  return /*#__PURE__*/React.createElement(OuterWrapper, null, breadcrumbs, /*#__PURE__*/React.createElement(TitleWrapper, {
+    truncateTitle: truncateTitle
   }, /*#__PURE__*/React.createElement(TitleContainer, {
-    truncate: truncateTitle
-  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(StyledTitle, {
-    innerRef: innerRef,
-    tabIndex: -1,
-    truncate: truncateTitle,
+    truncateTitle: truncateTitle
+  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(StyledTitleWrapper, {
+    ref: innerRef,
+    truncateTitle: truncateTitle,
     id: id
   }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBarWrapper, null, " ", bottomBar, " "));
 };

package/dist/es2019/PageHeader/styled.js

@@ -1,52 +1,153 @@
-import styled from 'styled-components';
-import { gridSize } from '@atlaskit/theme/constants';
-import { h700 } from '@atlaskit/theme/typography';
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. The prop name concerned here is truncateTitle.
+// This can be done in the next lite-mode conversion.
+
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 
-const getTruncationStyles = ({
-  truncate
-}) => truncate ? `
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      ` : null;
-
-export const Outer = styled.div`
-  margin: ${gridSize() * 3}px 0 ${gridSize() * 2}px 0;
-`;
-export const StyledTitle = styled.h1`
-  ${h700()};
-  ${getTruncationStyles} line-height: ${gridSize() * 4}px;
-  margin-top: 0;
-  outline: none;
-`;
-export const TitleWrapper = styled.div`
-  align-items: flex-start;
-  display: flex;
-  ${({
-  truncate
-}) => truncate ? 'flex-wrap: no-wrap;' : 'flex-wrap: wrap;'}
-`;
-export const TitleContainer = styled.div`
-  flex: 1 0 auto;
-  ${({
-  truncate
-}) => truncate ? 'flex-shrink: 1;' : null}
-  margin-bottom: ${gridSize()}px;
-  max-width: 100%;
-  min-width: 0;
-`;
-export const ActionsWrapper = styled.div`
-  flex: 0 0 auto;
-  margin-bottom: ${gridSize()}px;
-  margin-left: auto;
-  max-width: 100%;
-  padding-left: ${gridSize() * 4}px;
-  white-space: nowrap;
-
-  > {
-    text-align: right;
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h700 } from '@atlaskit/theme/typography';
+const gridSize = getGridSize();
+const truncateStyles = css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const outerStyles = css({
+  margin: `${gridSize * 3}px 0 ${gridSize * 2}px 0`
+});
+const styledTitleStyles = css({
+  marginTop: 0,
+  lineHeight: `${gridSize * 4}px`,
+  outline: 'none'
+});
+const titleWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'flex-start',
+  flexWrap: 'wrap'
+});
+const titleWrapperTruncateStyles = css({
+  flexWrap: 'nowrap'
+});
+const titleContainerStyles = css({
+  minWidth: 0,
+  maxWidth: '100%',
+  marginBottom: `${gridSize}px`,
+  flex: '1 0 auto',
+  flexShrink: undefined
+});
+const actionStyles = css({
+  maxWidth: '100%',
+  marginBottom: `${gridSize}px`,
+  marginLeft: 'auto',
+  paddingLeft: `${gridSize * 4}px`,
+  flex: '0 0 auto',
+  whiteSpace: 'nowrap',
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '>': {
+    textAlign: 'right'
   }
-`;
-export const BottomBarWrapper = styled.div`
-  margin-top: ${gridSize() * 2}px;
-`;
+});
+const titleContainerTruncateStyles = css({
+  flexShrink: 1
+});
+const bottomBarStyles = css({
+  marginTop: `${gridSize * 2}px`
+});
+/**
+ * __Outer wrapper__
+ *
+ * An outer wrapper that is the outermost component of the PageHeader component. It wraps around the PageHeader, its Actions,
+ * the BottomBar and its Breadcrumbs.
+ *
+ */
+
+export const OuterWrapper = ({
+  children
+}) => {
+  return jsx("div", {
+    css: outerStyles
+  }, children);
+}; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const h700Styles = css(h700());
+
+/**
+ * __Styled title wrapper__
+ *
+ * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
+ *
+ */
+export const StyledTitleWrapper = /*#__PURE__*/React.forwardRef(({
+  children,
+  id,
+  truncateTitle
+}, ref) => {
+  return jsx("h1", {
+    css: [h700Styles, styledTitleStyles, truncateTitle && truncateStyles],
+    ref: ref,
+    tabIndex: -1,
+    id: id
+  }, children);
+});
+
+/**
+ * __Title wrapper__
+ *
+ * A title wrapper is a wrapper around the title and the actions.
+ *
+ */
+export const TitleWrapper = ({
+  children,
+  truncateTitle
+}) => {
+  return jsx("div", {
+    css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
+  }, children);
+};
+/**
+ * Title container
+ *
+ * A title container is a container that wraps around the title and its styles (if applied).
+ *
+ */
+
+export const TitleContainer = ({
+  children,
+  truncateTitle
+}) => {
+  return jsx("div", {
+    css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
+  }, children);
+};
+/**
+ * __Actions wrapper__
+ *
+ * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
+ *
+ */
+
+export const ActionsWrapper = ({
+  children
+}) => {
+  return jsx("div", {
+    css: actionStyles
+  }, children);
+};
+/**
+ * __Bottom bar wrapper__
+ *
+ * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
+ *
+ */
+
+export const BottomBarWrapper = ({
+  children
+}) => {
+  return jsx("div", {
+    css: bottomBarStyles
+  }, children);
+};

package/dist/es2019/version.json

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

package/dist/esm/PageHeader/index.js

@@ -1,6 +1,21 @@
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. This can be done in the next lite-mode conversion.
+
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 import React from 'react';
-import { ActionsWrapper, BottomBarWrapper, Outer, StyledTitle, TitleContainer, TitleWrapper } from './styled';
+import { ActionsWrapper, BottomBarWrapper, OuterWrapper, StyledTitleWrapper, TitleContainer, TitleWrapper } from './styled';
 
+/**
+ * __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)
+ */
 var PageHeader = function PageHeader(_ref) {
   var innerRef = _ref.innerRef,
       breadcrumbs = _ref.breadcrumbs,
@@ -12,14 +27,13 @@ var PageHeader = function PageHeader(_ref) {
       disableTitleStyles = _ref$disableTitleStyl === void 0 ? false : _ref$disableTitleStyl,
       _ref$truncateTitle = _ref.truncateTitle,
       truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle;
-  return /*#__PURE__*/React.createElement(Outer, null, breadcrumbs, /*#__PURE__*/React.createElement(TitleWrapper, {
-    truncate: truncateTitle
+  return /*#__PURE__*/React.createElement(OuterWrapper, null, breadcrumbs, /*#__PURE__*/React.createElement(TitleWrapper, {
+    truncateTitle: truncateTitle
   }, /*#__PURE__*/React.createElement(TitleContainer, {
-    truncate: truncateTitle
-  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(StyledTitle, {
-    innerRef: innerRef,
-    tabIndex: -1,
-    truncate: truncateTitle,
+    truncateTitle: truncateTitle
+  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(StyledTitleWrapper, {
+    ref: innerRef,
+    truncateTitle: truncateTitle,
     id: id
   }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBarWrapper, null, " ", bottomBar, " "));
 };

package/dist/esm/PageHeader/styled.js

@@ -1,25 +1,147 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. The prop name concerned here is truncateTitle.
+// This can be done in the next lite-mode conversion.
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 
-import styled from 'styled-components';
-import { gridSize } from '@atlaskit/theme/constants';
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';
+var gridSize = getGridSize();
+var truncateStyles = css({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var outerStyles = css({
+  margin: "".concat(gridSize * 3, "px 0 ").concat(gridSize * 2, "px 0")
+});
+var styledTitleStyles = css({
+  marginTop: 0,
+  lineHeight: "".concat(gridSize * 4, "px"),
+  outline: 'none'
+});
+var titleWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'flex-start',
+  flexWrap: 'wrap'
+});
+var titleWrapperTruncateStyles = css({
+  flexWrap: 'nowrap'
+});
+var titleContainerStyles = css({
+  minWidth: 0,
+  maxWidth: '100%',
+  marginBottom: "".concat(gridSize, "px"),
+  flex: '1 0 auto',
+  flexShrink: undefined
+});
+var actionStyles = css({
+  maxWidth: '100%',
+  marginBottom: "".concat(gridSize, "px"),
+  marginLeft: 'auto',
+  paddingLeft: "".concat(gridSize * 4, "px"),
+  flex: '0 0 auto',
+  whiteSpace: 'nowrap',
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '>': {
+    textAlign: 'right'
+  }
+});
+var titleContainerTruncateStyles = css({
+  flexShrink: 1
+});
+var bottomBarStyles = css({
+  marginTop: "".concat(gridSize * 2, "px")
+});
+/**
+ * __Outer wrapper__
+ *
+ * An outer wrapper that is the outermost component of the PageHeader component. It wraps around the PageHeader, its Actions,
+ * the BottomBar and its Breadcrumbs.
+ *
+ */
+
+export var OuterWrapper = function OuterWrapper(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: outerStyles
+  }, children);
+}; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var h700Styles = css(h700());
+
+/**
+ * __Styled title wrapper__
+ *
+ * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
+ *
+ */
+export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      id = _ref2.id,
+      truncateTitle = _ref2.truncateTitle;
+  return jsx("h1", {
+    css: [h700Styles, styledTitleStyles, truncateTitle && truncateStyles],
+    ref: ref,
+    tabIndex: -1,
+    id: id
+  }, children);
+});
+
+/**
+ * __Title wrapper__
+ *
+ * A title wrapper is a wrapper around the title and the actions.
+ *
+ */
+export var TitleWrapper = function TitleWrapper(_ref3) {
+  var children = _ref3.children,
+      truncateTitle = _ref3.truncateTitle;
+  return jsx("div", {
+    css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
+  }, children);
+};
+/**
+ * Title container
+ *
+ * A title container is a container that wraps around the title and its styles (if applied).
+ *
+ */
+
+export var TitleContainer = function TitleContainer(_ref4) {
+  var children = _ref4.children,
+      truncateTitle = _ref4.truncateTitle;
+  return jsx("div", {
+    css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
+  }, children);
+};
+/**
+ * __Actions wrapper__
+ *
+ * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
+ *
+ */
 
-var getTruncationStyles = function getTruncationStyles(_ref) {
-  var truncate = _ref.truncate;
-  return truncate ? "\n        overflow-x: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      " : null;
+export var ActionsWrapper = function ActionsWrapper(_ref5) {
+  var children = _ref5.children;
+  return jsx("div", {
+    css: actionStyles
+  }, children);
 };
+/**
+ * __Bottom bar wrapper__
+ *
+ * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
+ *
+ */
 
-export var Outer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", "px 0 ", "px 0;\n"])), gridSize() * 3, gridSize() * 2);
-export var StyledTitle = styled.h1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  ", " line-height: ", "px;\n  margin-top: 0;\n  outline: none;\n"])), h700(), getTruncationStyles, gridSize() * 4);
-export var TitleWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-items: flex-start;\n  display: flex;\n  ", "\n"])), function (_ref2) {
-  var truncate = _ref2.truncate;
-  return truncate ? 'flex-wrap: no-wrap;' : 'flex-wrap: wrap;';
-});
-export var TitleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n  ", "\n  margin-bottom: ", "px;\n  max-width: 100%;\n  min-width: 0;\n"])), function (_ref3) {
-  var truncate = _ref3.truncate;
-  return truncate ? 'flex-shrink: 1;' : null;
-}, gridSize());
-export var ActionsWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  margin-bottom: ", "px;\n  margin-left: auto;\n  max-width: 100%;\n  padding-left: ", "px;\n  white-space: nowrap;\n\n  > {\n    text-align: right;\n  }\n"])), gridSize(), gridSize() * 4);
-export var BottomBarWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n"])), gridSize() * 2);
+export var BottomBarWrapper = function BottomBarWrapper(_ref6) {
+  var children = _ref6.children;
+  return jsx("div", {
+    css: bottomBarStyles
+  }, children);
+};

package/dist/esm/version.json

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

package/dist/types/PageHeader/index.d.ts

@@ -1,21 +1,47 @@
 import { ReactElement, ReactNode } from 'react';
-declare type Props = {
-    /** Contents of the action bar to be rendered next to the page title. */
+export 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. */
+    /**
+     * 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. */
+    /**
+     * 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. */
+    /**
+     * 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. */
+    /**
+     * 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. */
+    /**
+     * 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. */
+    /**
+     * 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 */
+    /**
+     * 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;
 };
-declare const PageHeader: ({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles, truncateTitle, }: Props) => JSX.Element;
+/**
+ * __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;

package/dist/types/PageHeader/styled.d.ts

@@ -1,11 +1,54 @@
-/// <reference types="react" />
-interface StyledProps {
-    truncate?: boolean;
+/** @jsx jsx */
+import React from 'react';
+/**
+ * __Outer wrapper__
+ *
+ * An outer wrapper that is the outermost component of the PageHeader component. It wraps around the PageHeader, its Actions,
+ * the BottomBar and its Breadcrumbs.
+ *
+ */
+export declare const OuterWrapper: React.FC<React.ReactNode>;
+interface StyledTitleWrapperProps {
+    children?: React.ReactNode;
+    id?: string;
+    truncateTitle?: boolean;
 }
-export declare const Outer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const StyledTitle: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & StyledProps, any, import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & StyledProps>;
-export declare const TitleWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyledProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyledProps>;
-export declare const TitleContainer: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyledProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyledProps>;
-export declare const ActionsWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const BottomBarWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+/**
+ * __Styled title wrapper__
+ *
+ * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
+ *
+ */
+export declare const StyledTitleWrapper: React.ForwardRefExoticComponent<StyledTitleWrapperProps & React.RefAttributes<HTMLHeadingElement>>;
+interface TitleProps {
+    truncateTitle?: boolean;
+}
+/**
+ * __Title wrapper__
+ *
+ * A title wrapper is a wrapper around the title and the actions.
+ *
+ */
+export declare const TitleWrapper: React.FC<TitleProps>;
+/**
+ * Title container
+ *
+ * A title container is a container that wraps around the title and its styles (if applied).
+ *
+ */
+export declare const TitleContainer: React.FC<TitleProps>;
+/**
+ * __Actions wrapper__
+ *
+ * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
+ *
+ */
+export declare const ActionsWrapper: React.FC;
+/**
+ * __Bottom bar wrapper__
+ *
+ * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
+ *
+ */
+export declare const BottomBarWrapper: React.FC;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-header",
-  "version": "10.1.2",
+  "version": "10.2.2",
   "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/"
@@ -13,11 +13,10 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
-  "atlaskit:designLink": "https://atlassian.design/patterns/page-header",
+  "atlaskit:src": "src/index.tsx",
+  "homepage": "https://atlassian.design/components/page-header",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
@@ -25,24 +24,25 @@
     }
   },
   "dependencies": {
-    "@atlaskit/theme": "^11.4.0",
-    "@babel/runtime": "^7.0.0"
+    "@atlaskit/theme": "^12.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9"
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "styled-components": "^3.2.6"
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/breadcrumbs": "^11.3.0",
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/inline-edit": "^12.0.0",
+    "@atlaskit/inline-edit": "^12.1.0",
     "@atlaskit/page": "^12.0.0",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.0.0",
+    "@atlaskit/textfield": "^5.1.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",
@@ -58,7 +58,20 @@
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "analytics": "analytics-next",
+      "theming": [
+        "new-theming-api",
+        "tokens"
+      ],
+      "styling": "emotion",
+      "design-system": "v1",
+      "deprecation": "no-deprecated-imports"
     }
   },
+  "af:exports": {
+    ".": "./src/index.tsx"
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }