@atlaskit/page-header 10.9.6 → 11.0.1

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.
Files changed (15) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/cjs/PageHeader/index.js +4 -2
  3. package/dist/cjs/PageHeader/styled.compiled.css +28 -0
  4. package/dist/cjs/PageHeader/styled.js +39 -79
  5. package/dist/es2019/PageHeader/index.js +4 -2
  6. package/dist/es2019/PageHeader/styled.compiled.css +28 -0
  7. package/dist/es2019/PageHeader/styled.js +31 -74
  8. package/dist/esm/PageHeader/index.js +4 -2
  9. package/dist/esm/PageHeader/styled.compiled.css +28 -0
  10. package/dist/esm/PageHeader/styled.js +34 -74
  11. package/dist/types/PageHeader/index.d.ts +5 -1
  12. package/dist/types/PageHeader/styled.d.ts +6 -6
  13. package/dist/types-ts4.5/PageHeader/index.d.ts +5 -1
  14. package/dist/types-ts4.5/PageHeader/styled.d.ts +6 -6
  15. package/package.json +9 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @atlaskit/page-header
2
2
 
3
+ ## 11.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#169469](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169469)
8
+ [`e9a8deefa644a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e9a8deefa644a) -
9
+ Updated types for PageHeader
10
+ - [#169469](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169469)
11
+ [`9b8b32b12ca1e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b8b32b12ca1e) -
12
+ Added optional test id to page header
13
+
14
+ ## 11.0.0
15
+
16
+ ### Major Changes
17
+
18
+ - [#173248](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173248)
19
+ [`1e25b83888a4a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1e25b83888a4a) -
20
+ Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
21
+ the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
22
+
23
+ Please note, in order to use this version of `@atlaskit/page-header`, you will need to ensure that
24
+ your bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in
25
+ support for `.css` imports, so you may not need to do anything. If you are using a different
26
+ bundler, please refer to the documentation for that bundler to understand how to handle `.css`
27
+ imports.
28
+
29
+ For more information on the migration, please refer to
30
+ [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
31
+
3
32
  ## 10.9.6
4
33
 
5
34
  ### Patch Changes
package/dist/cjs/PageHeader/index.js CHANGED
@@ -32,7 +32,8 @@ var PageHeader = function PageHeader(_ref) {
32
32
  _ref$disableTitleStyl = _ref.disableTitleStyles,
33
33
  disableTitleStyles = _ref$disableTitleStyl === void 0 ? false : _ref$disableTitleStyl,
34
34
  _ref$truncateTitle = _ref.truncateTitle,
35
- truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle;
35
+ truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle,
36
+ testId = _ref.testId;
36
37
  return /*#__PURE__*/_react.default.createElement(_styled.OuterWrapper, null, breadcrumbs, /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
37
38
  truncateTitle: truncateTitle
38
39
  }, /*#__PURE__*/_react.default.createElement(_styled.TitleContainer, {
@@ -40,7 +41,8 @@ var PageHeader = function PageHeader(_ref) {
40
41
  }, disableTitleStyles ? children : /*#__PURE__*/_react.default.createElement(_styled.StyledTitleWrapper, {
41
42
  ref: innerRef,
42
43
  truncateTitle: truncateTitle,
43
- id: id
44
+ id: id,
45
+ testId: testId
44
46
  }, children)), actions && /*#__PURE__*/_react.default.createElement(_styled.ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/_react.default.createElement(_styled.BottomBarWrapper, null, " ", bottomBar, " "));
45
47
  };
46
48
  var _default = exports.default = PageHeader;
package/dist/cjs/PageHeader/styled.compiled.css ADDED
@@ -0,0 +1,28 @@
1
+ ._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._18s87y2j{margin:var(--_1j0v6uy)}
3
+ ._12ji1r31{outline-color:currentColor}
4
+ ._12y31o36{outline-width:medium}
5
+ ._16jlidpf{flex-grow:0}
6
+ ._16jlkb7n{flex-grow:1}
7
+ ._18m915vq{overflow-y:hidden}
8
+ ._1bto1l2s{text-overflow:ellipsis}
9
+ ._1dyz4jg8{letter-spacing:normal}
10
+ ._1e0c1txw{display:flex}
11
+ ._1n261g80{flex-wrap:wrap}
12
+ ._1n261q9c{flex-wrap:nowrap}
13
+ ._1o9zidpf{flex-shrink:0}
14
+ ._1o9zkb7n{flex-shrink:1}
15
+ ._1oblusic >{text-align:right}
16
+ ._1pfhidpf{margin-block-start:0}
17
+ ._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}
18
+ ._1qu2glyw{outline-style:none}
19
+ ._1reo15vq{overflow-x:hidden}
20
+ ._1ul9idpf{min-width:0}
21
+ ._4cvr1y6m{align-items:flex-start}
22
+ ._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
23
+ ._ahbq1wug{margin-inline-start:auto}
24
+ ._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
25
+ ._i0dl1wug{flex-basis:auto}
26
+ ._o5721q9c{white-space:nowrap}
27
+ ._p12f1osq{max-width:100%}
28
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
package/dist/cjs/PageHeader/styled.js CHANGED
@@ -1,3 +1,9 @@
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
2
+ // TODO: Remove this eslint-disable when prop names have been renamed.
3
+ // This rule is here as prop name changes are a major as they are used
4
+ // by our consumers. The prop name concerned here is truncateTitle.
5
+ // This can be done in the next lite-mode conversion.
6
+ /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
1
7
  "use strict";
2
8
 
3
9
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,72 +11,21 @@ Object.defineProperty(exports, "__esModule", {
5
11
  value: true
6
12
  });
7
13
  exports.TitleWrapper = exports.TitleContainer = exports.StyledTitleWrapper = exports.OuterWrapper = exports.BottomBarWrapper = exports.ActionsWrapper = void 0;
14
+ require("./styled.compiled.css");
15
+ var _runtime = require("@compiled/react/runtime");
8
16
  var _react = _interopRequireDefault(require("react"));
9
- var _react2 = require("@emotion/react");
10
- var _primitives = require("@atlaskit/primitives");
11
- // TODO: Remove this eslint-disable when prop names have been renamed.
12
- // This rule is here as prop name changes are a major as they are used
13
- // by our consumers. The prop name concerned here is truncateTitle.
14
- // This can be done in the next lite-mode conversion.
15
- /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
16
- /**
17
- * @jsxRuntime classic
18
- * @jsx jsx
19
- */
20
-
21
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
22
-
23
- var truncateStyles = (0, _react2.css)({
24
- overflowX: 'hidden',
25
- overflowY: 'hidden',
26
- // `overflow-y` necessary to prevent a scrollbar from showing in FF: https://product-fabric.atlassian.net/browse/PYX-1035
27
- textOverflow: 'ellipsis',
28
- whiteSpace: 'nowrap'
29
- });
30
- var outerStyles = (0, _react2.css)({
31
- margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
32
- });
33
- var titleStyles = (0, _react2.css)({
34
- color: "var(--ds-text, #172B4D)",
35
- font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
36
- letterSpacing: 'normal',
37
- marginBlockStart: 0,
38
- outline: 'none'
39
- });
40
- var titleWrapperStyles = (0, _react2.css)({
41
- display: 'flex',
42
- alignItems: 'flex-start',
43
- flexWrap: 'wrap'
44
- });
45
- var titleWrapperTruncateStyles = (0, _react2.css)({
46
- flexWrap: 'nowrap'
47
- });
48
- var titleContainerStyles = (0, _react2.css)({
49
- minWidth: 0,
50
- maxWidth: '100%',
51
- flex: '1 0 auto',
52
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
53
- flexShrink: undefined,
54
- marginBlockEnd: "var(--ds-space-100, 8px)"
55
- });
56
- var actionStyles = (0, _react2.css)({
57
- maxWidth: '100%',
58
- flex: '0 0 auto',
59
- marginBlockEnd: "var(--ds-space-100, 8px)",
60
- marginInlineStart: 'auto',
61
- paddingInlineStart: "var(--ds-space-400, 32px)",
62
- whiteSpace: 'nowrap',
63
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
64
- '>': {
65
- textAlign: 'right'
66
- }
67
- });
68
- var titleContainerTruncateStyles = (0, _react2.css)({
69
- flexShrink: 1
70
- });
71
- var bottomBarStyles = (0, _primitives.xcss)({
72
- marginBlockStart: 'space.200'
73
- });
17
+ var _compiled = require("@atlaskit/primitives/compiled");
18
+ var styles = {
19
+ bottomBar: "_1pfhpxbi"
20
+ };
21
+ var truncateStyles = null;
22
+ var outerStyles = null;
23
+ var titleStyles = null;
24
+ var titleWrapperStyles = null;
25
+ var titleWrapperTruncateStyles = null;
26
+ var titleContainerStyles = null;
27
+ var actionStyles = null;
28
+ var titleContainerTruncateStyles = null;
74
29
 
75
30
  /**
76
31
  * __Outer wrapper__.
@@ -81,8 +36,11 @@ var bottomBarStyles = (0, _primitives.xcss)({
81
36
  */
82
37
  var OuterWrapper = exports.OuterWrapper = function OuterWrapper(_ref) {
83
38
  var children = _ref.children;
84
- return (0, _react2.jsx)("div", {
85
- css: outerStyles
39
+ return /*#__PURE__*/_react.default.createElement("div", {
40
+ className: (0, _runtime.ax)(["_18s87y2j"]),
41
+ style: {
42
+ "--_1j0v6uy": (0, _runtime.ix)("var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0"))
43
+ }
86
44
  }, children);
87
45
  };
88
46
  /**
@@ -94,12 +52,14 @@ var OuterWrapper = exports.OuterWrapper = function OuterWrapper(_ref) {
94
52
  var StyledTitleWrapper = exports.StyledTitleWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
95
53
  var children = _ref2.children,
96
54
  id = _ref2.id,
97
- truncateTitle = _ref2.truncateTitle;
98
- return (0, _react2.jsx)("h1", {
99
- css: [titleStyles, truncateTitle && truncateStyles],
55
+ truncateTitle = _ref2.truncateTitle,
56
+ testId = _ref2.testId;
57
+ return /*#__PURE__*/_react.default.createElement("h1", {
100
58
  ref: ref,
101
59
  tabIndex: -1,
102
- id: id
60
+ id: id,
61
+ "data-testid": testId && "".concat(testId, "--title"),
62
+ className: (0, _runtime.ax)(["_syaz1fxt _11c81p5s _1dyz4jg8 _1pfhidpf _12ji1r31 _1qu2glyw _12y31o36", truncateTitle && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
103
63
  }, children);
104
64
  });
105
65
  /**
@@ -111,8 +71,8 @@ var StyledTitleWrapper = exports.StyledTitleWrapper = /*#__PURE__*/_react.defaul
111
71
  var TitleWrapper = exports.TitleWrapper = function TitleWrapper(_ref3) {
112
72
  var children = _ref3.children,
113
73
  truncateTitle = _ref3.truncateTitle;
114
- return (0, _react2.jsx)("div", {
115
- css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
74
+ return /*#__PURE__*/_react.default.createElement("div", {
75
+ className: (0, _runtime.ax)(["_1e0c1txw _4cvr1y6m _1n261g80", truncateTitle && "_1n261q9c"])
116
76
  }, children);
117
77
  };
118
78
 
@@ -125,8 +85,8 @@ var TitleWrapper = exports.TitleWrapper = function TitleWrapper(_ref3) {
125
85
  var TitleContainer = exports.TitleContainer = function TitleContainer(_ref4) {
126
86
  var children = _ref4.children,
127
87
  truncateTitle = _ref4.truncateTitle;
128
- return (0, _react2.jsx)("div", {
129
- css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
88
+ return /*#__PURE__*/_react.default.createElement("div", {
89
+ className: (0, _runtime.ax)(["_1ul9idpf _p12f1osq _16jlkb7n _1o9zidpf _i0dl1wug _6rthu2gc", truncateTitle && "_1o9zkb7n"])
130
90
  }, children);
131
91
  };
132
92
 
@@ -138,8 +98,8 @@ var TitleContainer = exports.TitleContainer = function TitleContainer(_ref4) {
138
98
  */
139
99
  var ActionsWrapper = exports.ActionsWrapper = function ActionsWrapper(_ref5) {
140
100
  var children = _ref5.children;
141
- return (0, _react2.jsx)("div", {
142
- css: actionStyles
101
+ return /*#__PURE__*/_react.default.createElement("div", {
102
+ className: (0, _runtime.ax)(["_p12f1osq _16jlidpf _1o9zidpf _i0dl1wug _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c _1oblusic"])
143
103
  }, children);
144
104
  };
145
105
 
@@ -151,7 +111,7 @@ var ActionsWrapper = exports.ActionsWrapper = function ActionsWrapper(_ref5) {
151
111
  */
152
112
  var BottomBarWrapper = exports.BottomBarWrapper = function BottomBarWrapper(_ref6) {
153
113
  var children = _ref6.children;
154
- return (0, _react2.jsx)(_primitives.Box, {
155
- xcss: bottomBarStyles
114
+ return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
115
+ xcss: styles.bottomBar
156
116
  }, children);
157
117
  };
package/dist/es2019/PageHeader/index.js CHANGED
@@ -22,7 +22,8 @@ const PageHeader = ({
22
22
  children,
23
23
  id,
24
24
  disableTitleStyles = false,
25
- truncateTitle = false
25
+ truncateTitle = false,
26
+ testId
26
27
  }) => {
27
28
  return /*#__PURE__*/React.createElement(OuterWrapper, null, breadcrumbs, /*#__PURE__*/React.createElement(TitleWrapper, {
28
29
  truncateTitle: truncateTitle
@@ -31,7 +32,8 @@ const PageHeader = ({
31
32
  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(StyledTitleWrapper, {
32
33
  ref: innerRef,
33
34
  truncateTitle: truncateTitle,
34
- id: id
35
+ id: id,
36
+ testId: testId
35
37
  }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBarWrapper, null, " ", bottomBar, " "));
36
38
  };
37
39
  export default PageHeader;
package/dist/es2019/PageHeader/styled.compiled.css ADDED
@@ -0,0 +1,28 @@
1
+ ._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._18s81d9c{margin:var(--ds-space-300,24px) 0 var(--ds-space-200,1pc) 0}
3
+ ._12ji1r31{outline-color:currentColor}
4
+ ._12y31o36{outline-width:medium}
5
+ ._16jlidpf{flex-grow:0}
6
+ ._16jlkb7n{flex-grow:1}
7
+ ._18m915vq{overflow-y:hidden}
8
+ ._1bto1l2s{text-overflow:ellipsis}
9
+ ._1dyz4jg8{letter-spacing:normal}
10
+ ._1e0c1txw{display:flex}
11
+ ._1n261g80{flex-wrap:wrap}
12
+ ._1n261q9c{flex-wrap:nowrap}
13
+ ._1o9zidpf{flex-shrink:0}
14
+ ._1o9zkb7n{flex-shrink:1}
15
+ ._1oblusic >{text-align:right}
16
+ ._1pfhidpf{margin-block-start:0}
17
+ ._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}
18
+ ._1qu2glyw{outline-style:none}
19
+ ._1reo15vq{overflow-x:hidden}
20
+ ._1ul9idpf{min-width:0}
21
+ ._4cvr1y6m{align-items:flex-start}
22
+ ._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
23
+ ._ahbq1wug{margin-inline-start:auto}
24
+ ._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
25
+ ._i0dl1wug{flex-basis:auto}
26
+ ._o5721q9c{white-space:nowrap}
27
+ ._p12f1osq{max-width:100%}
28
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
package/dist/es2019/PageHeader/styled.js CHANGED
@@ -1,69 +1,24 @@
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  // TODO: Remove this eslint-disable when prop names have been renamed.
2
3
  // This rule is here as prop name changes are a major as they are used
3
4
  // by our consumers. The prop name concerned here is truncateTitle.
4
5
  // This can be done in the next lite-mode conversion.
5
6
  /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
6
- /**
7
- * @jsxRuntime classic
8
- * @jsx jsx
9
- */
10
-
7
+ import "./styled.compiled.css";
8
+ import { ax, ix } from "@compiled/react/runtime";
11
9
  import React from 'react';
12
-
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
- import { css, jsx } from '@emotion/react';
15
- import { Box, xcss } from '@atlaskit/primitives';
16
- const truncateStyles = css({
17
- overflowX: 'hidden',
18
- overflowY: 'hidden',
19
- // `overflow-y` necessary to prevent a scrollbar from showing in FF: https://product-fabric.atlassian.net/browse/PYX-1035
20
- textOverflow: 'ellipsis',
21
- whiteSpace: 'nowrap'
22
- });
23
- const outerStyles = css({
24
- margin: `${"var(--ds-space-300, 24px)"} 0 ${"var(--ds-space-200, 16px)"} 0`
25
- });
26
- const titleStyles = css({
27
- color: "var(--ds-text, #172B4D)",
28
- font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
29
- letterSpacing: 'normal',
30
- marginBlockStart: 0,
31
- outline: 'none'
32
- });
33
- const titleWrapperStyles = css({
34
- display: 'flex',
35
- alignItems: 'flex-start',
36
- flexWrap: 'wrap'
37
- });
38
- const titleWrapperTruncateStyles = css({
39
- flexWrap: 'nowrap'
40
- });
41
- const titleContainerStyles = css({
42
- minWidth: 0,
43
- maxWidth: '100%',
44
- flex: '1 0 auto',
45
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
46
- flexShrink: undefined,
47
- marginBlockEnd: "var(--ds-space-100, 8px)"
48
- });
49
- const actionStyles = css({
50
- maxWidth: '100%',
51
- flex: '0 0 auto',
52
- marginBlockEnd: "var(--ds-space-100, 8px)",
53
- marginInlineStart: 'auto',
54
- paddingInlineStart: "var(--ds-space-400, 32px)",
55
- whiteSpace: 'nowrap',
56
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
57
- '>': {
58
- textAlign: 'right'
59
- }
60
- });
61
- const titleContainerTruncateStyles = css({
62
- flexShrink: 1
63
- });
64
- const bottomBarStyles = xcss({
65
- marginBlockStart: 'space.200'
66
- });
10
+ import { Box } from '@atlaskit/primitives/compiled';
11
+ const styles = {
12
+ bottomBar: "_1pfhpxbi"
13
+ };
14
+ const truncateStyles = null;
15
+ const outerStyles = null;
16
+ const titleStyles = null;
17
+ const titleWrapperStyles = null;
18
+ const titleWrapperTruncateStyles = null;
19
+ const titleContainerStyles = null;
20
+ const actionStyles = null;
21
+ const titleContainerTruncateStyles = null;
67
22
 
68
23
  /**
69
24
  * __Outer wrapper__.
@@ -75,8 +30,8 @@ const bottomBarStyles = xcss({
75
30
  export const OuterWrapper = ({
76
31
  children
77
32
  }) => {
78
- return jsx("div", {
79
- css: outerStyles
33
+ return /*#__PURE__*/React.createElement("div", {
34
+ className: ax(["_18s81d9c"])
80
35
  }, children);
81
36
  };
82
37
  /**
@@ -88,13 +43,15 @@ export const OuterWrapper = ({
88
43
  export const StyledTitleWrapper = /*#__PURE__*/React.forwardRef(({
89
44
  children,
90
45
  id,
91
- truncateTitle
46
+ truncateTitle,
47
+ testId
92
48
  }, ref) => {
93
- return jsx("h1", {
94
- css: [titleStyles, truncateTitle && truncateStyles],
49
+ return /*#__PURE__*/React.createElement("h1", {
95
50
  ref: ref,
96
51
  tabIndex: -1,
97
- id: id
52
+ id: id,
53
+ "data-testid": testId && `${testId}--title`,
54
+ className: ax(["_syaz1fxt _11c81p5s _1dyz4jg8 _1pfhidpf _12ji1r31 _1qu2glyw _12y31o36", truncateTitle && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
98
55
  }, children);
99
56
  });
100
57
  /**
@@ -107,8 +64,8 @@ export const TitleWrapper = ({
107
64
  children,
108
65
  truncateTitle
109
66
  }) => {
110
- return jsx("div", {
111
- css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
67
+ return /*#__PURE__*/React.createElement("div", {
68
+ className: ax(["_1e0c1txw _4cvr1y6m _1n261g80", truncateTitle && "_1n261q9c"])
112
69
  }, children);
113
70
  };
114
71
 
@@ -122,8 +79,8 @@ export const TitleContainer = ({
122
79
  children,
123
80
  truncateTitle
124
81
  }) => {
125
- return jsx("div", {
126
- css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
82
+ return /*#__PURE__*/React.createElement("div", {
83
+ className: ax(["_1ul9idpf _p12f1osq _16jlkb7n _1o9zidpf _i0dl1wug _6rthu2gc", truncateTitle && "_1o9zkb7n"])
127
84
  }, children);
128
85
  };
129
86
 
@@ -136,8 +93,8 @@ export const TitleContainer = ({
136
93
  export const ActionsWrapper = ({
137
94
  children
138
95
  }) => {
139
- return jsx("div", {
140
- css: actionStyles
96
+ return /*#__PURE__*/React.createElement("div", {
97
+ className: ax(["_p12f1osq _16jlidpf _1o9zidpf _i0dl1wug _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c _1oblusic"])
141
98
  }, children);
142
99
  };
143
100
 
@@ -150,7 +107,7 @@ export const ActionsWrapper = ({
150
107
  export const BottomBarWrapper = ({
151
108
  children
152
109
  }) => {
153
- return jsx(Box, {
154
- xcss: bottomBarStyles
110
+ return /*#__PURE__*/React.createElement(Box, {
111
+ xcss: styles.bottomBar
155
112
  }, children);
156
113
  };
package/dist/esm/PageHeader/index.js CHANGED
@@ -24,7 +24,8 @@ var PageHeader = function PageHeader(_ref) {
24
24
  _ref$disableTitleStyl = _ref.disableTitleStyles,
25
25
  disableTitleStyles = _ref$disableTitleStyl === void 0 ? false : _ref$disableTitleStyl,
26
26
  _ref$truncateTitle = _ref.truncateTitle,
27
- truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle;
27
+ truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle,
28
+ testId = _ref.testId;
28
29
  return /*#__PURE__*/React.createElement(OuterWrapper, null, breadcrumbs, /*#__PURE__*/React.createElement(TitleWrapper, {
29
30
  truncateTitle: truncateTitle
30
31
  }, /*#__PURE__*/React.createElement(TitleContainer, {
@@ -32,7 +33,8 @@ var PageHeader = function PageHeader(_ref) {
32
33
  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(StyledTitleWrapper, {
33
34
  ref: innerRef,
34
35
  truncateTitle: truncateTitle,
35
- id: id
36
+ id: id,
37
+ testId: testId
36
38
  }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBarWrapper, null, " ", bottomBar, " "));
37
39
  };
38
40
  export default PageHeader;
package/dist/esm/PageHeader/styled.compiled.css ADDED
@@ -0,0 +1,28 @@
1
+ ._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._18s87y2j{margin:var(--_1j0v6uy)}
3
+ ._12ji1r31{outline-color:currentColor}
4
+ ._12y31o36{outline-width:medium}
5
+ ._16jlidpf{flex-grow:0}
6
+ ._16jlkb7n{flex-grow:1}
7
+ ._18m915vq{overflow-y:hidden}
8
+ ._1bto1l2s{text-overflow:ellipsis}
9
+ ._1dyz4jg8{letter-spacing:normal}
10
+ ._1e0c1txw{display:flex}
11
+ ._1n261g80{flex-wrap:wrap}
12
+ ._1n261q9c{flex-wrap:nowrap}
13
+ ._1o9zidpf{flex-shrink:0}
14
+ ._1o9zkb7n{flex-shrink:1}
15
+ ._1oblusic >{text-align:right}
16
+ ._1pfhidpf{margin-block-start:0}
17
+ ._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}
18
+ ._1qu2glyw{outline-style:none}
19
+ ._1reo15vq{overflow-x:hidden}
20
+ ._1ul9idpf{min-width:0}
21
+ ._4cvr1y6m{align-items:flex-start}
22
+ ._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
23
+ ._ahbq1wug{margin-inline-start:auto}
24
+ ._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
25
+ ._i0dl1wug{flex-basis:auto}
26
+ ._o5721q9c{white-space:nowrap}
27
+ ._p12f1osq{max-width:100%}
28
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
package/dist/esm/PageHeader/styled.js CHANGED
@@ -1,69 +1,24 @@
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  // TODO: Remove this eslint-disable when prop names have been renamed.
2
3
  // This rule is here as prop name changes are a major as they are used
3
4
  // by our consumers. The prop name concerned here is truncateTitle.
4
5
  // This can be done in the next lite-mode conversion.
5
6
  /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
6
- /**
7
- * @jsxRuntime classic
8
- * @jsx jsx
9
- */
10
-
7
+ import "./styled.compiled.css";
8
+ import { ax, ix } from "@compiled/react/runtime";
11
9
  import React from 'react';
12
-
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
- import { css, jsx } from '@emotion/react';
15
- import { Box, xcss } from '@atlaskit/primitives';
16
- var truncateStyles = css({
17
- overflowX: 'hidden',
18
- overflowY: 'hidden',
19
- // `overflow-y` necessary to prevent a scrollbar from showing in FF: https://product-fabric.atlassian.net/browse/PYX-1035
20
- textOverflow: 'ellipsis',
21
- whiteSpace: 'nowrap'
22
- });
23
- var outerStyles = css({
24
- margin: "var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0")
25
- });
26
- var titleStyles = css({
27
- color: "var(--ds-text, #172B4D)",
28
- font: "var(--ds-font-heading-large, normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
29
- letterSpacing: 'normal',
30
- marginBlockStart: 0,
31
- outline: 'none'
32
- });
33
- var titleWrapperStyles = css({
34
- display: 'flex',
35
- alignItems: 'flex-start',
36
- flexWrap: 'wrap'
37
- });
38
- var titleWrapperTruncateStyles = css({
39
- flexWrap: 'nowrap'
40
- });
41
- var titleContainerStyles = css({
42
- minWidth: 0,
43
- maxWidth: '100%',
44
- flex: '1 0 auto',
45
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
46
- flexShrink: undefined,
47
- marginBlockEnd: "var(--ds-space-100, 8px)"
48
- });
49
- var actionStyles = css({
50
- maxWidth: '100%',
51
- flex: '0 0 auto',
52
- marginBlockEnd: "var(--ds-space-100, 8px)",
53
- marginInlineStart: 'auto',
54
- paddingInlineStart: "var(--ds-space-400, 32px)",
55
- whiteSpace: 'nowrap',
56
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
57
- '>': {
58
- textAlign: 'right'
59
- }
60
- });
61
- var titleContainerTruncateStyles = css({
62
- flexShrink: 1
63
- });
64
- var bottomBarStyles = xcss({
65
- marginBlockStart: 'space.200'
66
- });
10
+ import { Box } from '@atlaskit/primitives/compiled';
11
+ var styles = {
12
+ bottomBar: "_1pfhpxbi"
13
+ };
14
+ var truncateStyles = null;
15
+ var outerStyles = null;
16
+ var titleStyles = null;
17
+ var titleWrapperStyles = null;
18
+ var titleWrapperTruncateStyles = null;
19
+ var titleContainerStyles = null;
20
+ var actionStyles = null;
21
+ var titleContainerTruncateStyles = null;
67
22
 
68
23
  /**
69
24
  * __Outer wrapper__.
@@ -74,8 +29,11 @@ var bottomBarStyles = xcss({
74
29
  */
75
30
  export var OuterWrapper = function OuterWrapper(_ref) {
76
31
  var children = _ref.children;
77
- return jsx("div", {
78
- css: outerStyles
32
+ return /*#__PURE__*/React.createElement("div", {
33
+ className: ax(["_18s87y2j"]),
34
+ style: {
35
+ "--_1j0v6uy": ix("var(--ds-space-300, 24px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0"))
36
+ }
79
37
  }, children);
80
38
  };
81
39
  /**
@@ -87,12 +45,14 @@ export var OuterWrapper = function OuterWrapper(_ref) {
87
45
  export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
88
46
  var children = _ref2.children,
89
47
  id = _ref2.id,
90
- truncateTitle = _ref2.truncateTitle;
91
- return jsx("h1", {
92
- css: [titleStyles, truncateTitle && truncateStyles],
48
+ truncateTitle = _ref2.truncateTitle,
49
+ testId = _ref2.testId;
50
+ return /*#__PURE__*/React.createElement("h1", {
93
51
  ref: ref,
94
52
  tabIndex: -1,
95
- id: id
53
+ id: id,
54
+ "data-testid": testId && "".concat(testId, "--title"),
55
+ className: ax(["_syaz1fxt _11c81p5s _1dyz4jg8 _1pfhidpf _12ji1r31 _1qu2glyw _12y31o36", truncateTitle && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
96
56
  }, children);
97
57
  });
98
58
  /**
@@ -104,8 +64,8 @@ export var StyledTitleWrapper = /*#__PURE__*/React.forwardRef(function (_ref2, r
104
64
  export var TitleWrapper = function TitleWrapper(_ref3) {
105
65
  var children = _ref3.children,
106
66
  truncateTitle = _ref3.truncateTitle;
107
- return jsx("div", {
108
- css: [titleWrapperStyles, truncateTitle && titleWrapperTruncateStyles]
67
+ return /*#__PURE__*/React.createElement("div", {
68
+ className: ax(["_1e0c1txw _4cvr1y6m _1n261g80", truncateTitle && "_1n261q9c"])
109
69
  }, children);
110
70
  };
111
71
 
@@ -118,8 +78,8 @@ export var TitleWrapper = function TitleWrapper(_ref3) {
118
78
  export var TitleContainer = function TitleContainer(_ref4) {
119
79
  var children = _ref4.children,
120
80
  truncateTitle = _ref4.truncateTitle;
121
- return jsx("div", {
122
- css: [titleContainerStyles, truncateTitle && titleContainerTruncateStyles]
81
+ return /*#__PURE__*/React.createElement("div", {
82
+ className: ax(["_1ul9idpf _p12f1osq _16jlkb7n _1o9zidpf _i0dl1wug _6rthu2gc", truncateTitle && "_1o9zkb7n"])
123
83
  }, children);
124
84
  };
125
85
 
@@ -131,8 +91,8 @@ export var TitleContainer = function TitleContainer(_ref4) {
131
91
  */
132
92
  export var ActionsWrapper = function ActionsWrapper(_ref5) {
133
93
  var children = _ref5.children;
134
- return jsx("div", {
135
- css: actionStyles
94
+ return /*#__PURE__*/React.createElement("div", {
95
+ className: ax(["_p12f1osq _16jlidpf _1o9zidpf _i0dl1wug _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c _1oblusic"])
136
96
  }, children);
137
97
  };
138
98
 
@@ -144,7 +104,7 @@ export var ActionsWrapper = function ActionsWrapper(_ref5) {
144
104
  */
145
105
  export var BottomBarWrapper = function BottomBarWrapper(_ref6) {
146
106
  var children = _ref6.children;
147
- return jsx(Box, {
148
- xcss: bottomBarStyles
107
+ return /*#__PURE__*/React.createElement(Box, {
108
+ xcss: styles.bottomBar
149
109
  }, children);
150
110
  };
package/dist/types/PageHeader/index.d.ts CHANGED
@@ -32,6 +32,10 @@ export type PageHeaderProps = {
32
32
  * Used as the ID of the inner h1 tag. This is exposed so the header text can be used as label of other elements by aria-labelledby.
33
33
  */
34
34
  id?: string;
35
+ /**
36
+ * A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.
37
+ */
38
+ testId?: string;
35
39
  };
36
40
  /**
37
41
  * __Page header__
@@ -43,5 +47,5 @@ export type PageHeaderProps = {
43
47
  * - [Code](https://atlassian.design/components/page-header/code)
44
48
  * - [Usage](https://atlassian.design/components/page-header/usage)
45
49
  */
46
- declare const PageHeader: ({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles, truncateTitle, }: PageHeaderProps) => JSX.Element;
50
+ declare const PageHeader: ({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles, truncateTitle, testId, }: PageHeaderProps) => JSX.Element;
47
51
  export default PageHeader;
package/dist/types/PageHeader/styled.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import React, { type ReactNode } from 'react';
6
- import { jsx } from '@emotion/react';
7
6
  /**
8
7
  * __Outer wrapper__.
9
8
  *
@@ -13,11 +12,12 @@ import { jsx } from '@emotion/react';
13
12
  */
14
13
  export declare const OuterWrapper: ({ children }: {
15
14
  children: ReactNode;
16
- }) => jsx.JSX.Element;
15
+ }) => JSX.Element;
17
16
  interface StyledTitleWrapperProps {
18
17
  children?: React.ReactNode;
19
18
  id?: string;
20
19
  truncateTitle?: boolean;
20
+ testId?: string;
21
21
  }
22
22
  /**
23
23
  * __Styled title wrapper__.
@@ -36,14 +36,14 @@ interface TitleProps {
36
36
  * A title wrapper is a wrapper around the title and the actions.
37
37
  *
38
38
  */
39
- export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
39
+ export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => JSX.Element;
40
40
  /**
41
41
  * Title container.
42
42
  *
43
43
  * A title container is a container that wraps around the title and its styles (if applied).
44
44
  *
45
45
  */
46
- export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
46
+ export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => JSX.Element;
47
47
  /**
48
48
  * __Actions wrapper__.
49
49
  *
@@ -52,7 +52,7 @@ export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) =
52
52
  */
53
53
  export declare const ActionsWrapper: ({ children }: {
54
54
  children: ReactNode;
55
- }) => jsx.JSX.Element;
55
+ }) => JSX.Element;
56
56
  /**
57
57
  * __Bottom bar wrapper__.
58
58
  *
@@ -61,5 +61,5 @@ export declare const ActionsWrapper: ({ children }: {
61
61
  */
62
62
  export declare const BottomBarWrapper: ({ children }: {
63
63
  children: ReactNode;
64
- }) => jsx.JSX.Element;
64
+ }) => JSX.Element;
65
65
  export {};
package/dist/types-ts4.5/PageHeader/index.d.ts CHANGED
@@ -32,6 +32,10 @@ export type PageHeaderProps = {
32
32
  * Used as the ID of the inner h1 tag. This is exposed so the header text can be used as label of other elements by aria-labelledby.
33
33
  */
34
34
  id?: string;
35
+ /**
36
+ * A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.
37
+ */
38
+ testId?: string;
35
39
  };
36
40
  /**
37
41
  * __Page header__
@@ -43,5 +47,5 @@ export type PageHeaderProps = {
43
47
  * - [Code](https://atlassian.design/components/page-header/code)
44
48
  * - [Usage](https://atlassian.design/components/page-header/usage)
45
49
  */
46
- declare const PageHeader: ({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles, truncateTitle, }: PageHeaderProps) => JSX.Element;
50
+ declare const PageHeader: ({ innerRef, breadcrumbs, actions, bottomBar, children, id, disableTitleStyles, truncateTitle, testId, }: PageHeaderProps) => JSX.Element;
47
51
  export default PageHeader;
package/dist/types-ts4.5/PageHeader/styled.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import React, { type ReactNode } from 'react';
6
- import { jsx } from '@emotion/react';
7
6
  /**
8
7
  * __Outer wrapper__.
9
8
  *
@@ -13,11 +12,12 @@ import { jsx } from '@emotion/react';
13
12
  */
14
13
  export declare const OuterWrapper: ({ children }: {
15
14
  children: ReactNode;
16
- }) => jsx.JSX.Element;
15
+ }) => JSX.Element;
17
16
  interface StyledTitleWrapperProps {
18
17
  children?: React.ReactNode;
19
18
  id?: string;
20
19
  truncateTitle?: boolean;
20
+ testId?: string;
21
21
  }
22
22
  /**
23
23
  * __Styled title wrapper__.
@@ -36,14 +36,14 @@ interface TitleProps {
36
36
  * A title wrapper is a wrapper around the title and the actions.
37
37
  *
38
38
  */
39
- export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
39
+ export declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => JSX.Element;
40
40
  /**
41
41
  * Title container.
42
42
  *
43
43
  * A title container is a container that wraps around the title and its styles (if applied).
44
44
  *
45
45
  */
46
- export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => jsx.JSX.Element;
46
+ export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => JSX.Element;
47
47
  /**
48
48
  * __Actions wrapper__.
49
49
  *
@@ -52,7 +52,7 @@ export declare const TitleContainer: ({ children, truncateTitle }: TitleProps) =
52
52
  */
53
53
  export declare const ActionsWrapper: ({ children }: {
54
54
  children: ReactNode;
55
- }) => jsx.JSX.Element;
55
+ }) => JSX.Element;
56
56
  /**
57
57
  * __Bottom bar wrapper__.
58
58
  *
@@ -61,5 +61,5 @@ export declare const ActionsWrapper: ({ children }: {
61
61
  */
62
62
  export declare const BottomBarWrapper: ({ children }: {
63
63
  children: ReactNode;
64
- }) => jsx.JSX.Element;
64
+ }) => JSX.Element;
65
65
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/page-header",
3
- "version": "10.9.6",
3
+ "version": "11.0.1",
4
4
  "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.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -20,15 +20,16 @@
20
20
  "team": "Design System Team",
21
21
  "website": {
22
22
  "name": "Page header",
23
- "category": "Components"
23
+ "category": "Layout and structure"
24
24
  },
25
25
  "runReact18": true
26
26
  },
27
27
  "dependencies": {
28
- "@atlaskit/primitives": "^13.2.0",
29
- "@atlaskit/tokens": "^2.2.0",
28
+ "@atlaskit/css": "^0.7.0",
29
+ "@atlaskit/primitives": "^13.3.0",
30
+ "@atlaskit/tokens": "^2.4.0",
30
31
  "@babel/runtime": "^7.0.0",
31
- "@emotion/react": "^11.7.1"
32
+ "@compiled/react": "^0.18.1"
32
33
  },
33
34
  "peerDependencies": {
34
35
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -36,12 +37,13 @@
36
37
  },
37
38
  "devDependencies": {
38
39
  "@af/accessibility-testing": "*",
40
+ "@af/integration-testing": "*",
39
41
  "@af/visual-regression": "*",
40
42
  "@atlaskit/breadcrumbs": "^14.0.0",
41
- "@atlaskit/ds-lib": "^3.2.0",
43
+ "@atlaskit/ds-lib": "^3.3.0",
42
44
  "@atlaskit/page": "^12.6.0",
43
45
  "@atlaskit/ssr": "*",
44
- "@atlaskit/textfield": "^6.5.0",
46
+ "@atlaskit/textfield": "^6.7.0",
45
47
  "@atlaskit/visual-regression": "*",
46
48
  "@testing-library/react": "^12.1.5",
47
49
  "react-dom": "^16.8.0",