@atlaskit/page-header 10.6.1 → 10.7.0

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 (10) hide show
  1. package/CHANGELOG.md +14 -1
  2. package/README.md +4 -2
  3. package/__perf__/default.tsx +5 -7
  4. package/dist/cjs/PageHeader/styled.js +8 -2
  5. package/dist/es2019/PageHeader/styled.js +11 -3
  6. package/dist/esm/PageHeader/styled.js +8 -2
  7. package/dist/types/PageHeader/styled.d.ts +3 -0
  8. package/dist/types-ts4.5/PageHeader/styled.d.ts +3 -0
  9. package/package.json +98 -98
  10. package/report.api.md +20 -19
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/page-header
2
2
 
3
+ ## 10.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#110836](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110836)
8
+ [`a8bd419fd70b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a8bd419fd70b9) -
9
+ Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
10
+ is implicitly set to automatic.
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 10.6.1
4
17
 
5
18
  ### Patch Changes
@@ -12,7 +25,7 @@
12
25
 
13
26
  - [#100748](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100748)
14
27
  [`ff76f4c7a63d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ff76f4c7a63d) -
15
- Add support for React 18.
28
+ Add support for React 18 in non-strict mode.
16
29
 
17
30
  ## 10.5.0
18
31
 
package/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  # Page-header
2
2
 
3
- The page header pattern is a template that helps combine other components (breadcrumbs, headings, actions, and selects) to create a consistent user experience.
3
+ The page header pattern is a template that helps combine other components (breadcrumbs, headings,
4
+ actions, and selects) to create a consistent user experience.
4
5
 
5
6
  ## Installation
6
7
 
@@ -10,4 +11,5 @@ yarn add @atlaskit/page-header
10
11
 
11
12
  ## Usage
12
13
 
13
- Detailed docs and example usage can be found [here](https://atlassian.design/components/page-header).
14
+ Detailed docs and example usage can be found
15
+ [here](https://atlassian.design/components/page-header).
package/__perf__/default.tsx CHANGED
@@ -6,14 +6,12 @@ import __noop from '@atlaskit/ds-lib/noop';
6
6
  import PageHeader from '../src';
7
7
 
8
8
  const breadcrumbs = (
9
- <Breadcrumbs onExpand={__noop}>
10
- <BreadcrumbsItem text="Some project" key="Some project" />
11
- <BreadcrumbsItem text="Parent page" key="Parent page" />
12
- </Breadcrumbs>
9
+ <Breadcrumbs onExpand={__noop}>
10
+ <BreadcrumbsItem text="Some project" key="Some project" />
11
+ <BreadcrumbsItem text="Parent page" key="Parent page" />
12
+ </Breadcrumbs>
13
13
  );
14
14
 
15
15
  export default () => (
16
- <PageHeader breadcrumbs={breadcrumbs}>
17
- Title describing the content
18
- </PageHeader>
16
+ <PageHeader breadcrumbs={breadcrumbs}>Title describing the content</PageHeader>
19
17
  );
package/dist/cjs/PageHeader/styled.js CHANGED
@@ -16,8 +16,13 @@ var _typography = require("@atlaskit/theme/typography");
16
16
  // by our consumers. The prop name concerned here is truncateTitle.
17
17
  // This can be done in the next lite-mode conversion.
18
18
  /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
19
+ /**
20
+ * @jsxRuntime classic
21
+ */
19
22
  /** @jsx jsx */
20
23
 
24
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
25
+
21
26
  var truncateStyles = (0, _react2.css)({
22
27
  overflowX: 'hidden',
23
28
  textOverflow: 'ellipsis',
@@ -50,6 +55,7 @@ var titleContainerStyles = (0, _react2.css)({
50
55
  minWidth: 0,
51
56
  maxWidth: '100%',
52
57
  flex: '1 0 auto',
58
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
53
59
  flexShrink: undefined,
54
60
  marginBlockEnd: "var(--ds-space-100, 8px)"
55
61
  });
@@ -60,7 +66,7 @@ var actionStyles = (0, _react2.css)({
60
66
  marginInlineStart: 'auto',
61
67
  paddingInlineStart: "var(--ds-space-400, 32px)",
62
68
  whiteSpace: 'nowrap',
63
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
69
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
64
70
  '>': {
65
71
  textAlign: 'right'
66
72
  }
@@ -86,7 +92,7 @@ var OuterWrapper = exports.OuterWrapper = function OuterWrapper(_ref) {
86
92
  }, children);
87
93
  };
88
94
 
89
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
95
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
90
96
  var h700Styles = (0, _react2.css)((0, _typography.h700)());
91
97
  /**
92
98
  * __Styled title wrapper__.
package/dist/es2019/PageHeader/styled.js CHANGED
@@ -3,9 +3,14 @@
3
3
  // by our consumers. The prop name concerned here is truncateTitle.
4
4
  // This can be done in the next lite-mode conversion.
5
5
  /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
6
+ /**
7
+ * @jsxRuntime classic
8
+ */
6
9
  /** @jsx jsx */
7
10
 
8
11
  import React from 'react';
12
+
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
14
  import { css, jsx } from '@emotion/react';
10
15
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
11
16
  import { Box, xcss } from '@atlaskit/primitives';
@@ -42,6 +47,7 @@ const titleContainerStyles = css({
42
47
  minWidth: 0,
43
48
  maxWidth: '100%',
44
49
  flex: '1 0 auto',
50
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
45
51
  flexShrink: undefined,
46
52
  marginBlockEnd: "var(--ds-space-100, 8px)"
47
53
  });
@@ -52,7 +58,7 @@ const actionStyles = css({
52
58
  marginInlineStart: 'auto',
53
59
  paddingInlineStart: "var(--ds-space-400, 32px)",
54
60
  whiteSpace: 'nowrap',
55
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
61
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
56
62
  '>': {
57
63
  textAlign: 'right'
58
64
  }
@@ -79,7 +85,7 @@ export const OuterWrapper = ({
79
85
  }, children);
80
86
  };
81
87
 
82
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
88
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
83
89
  const h700Styles = css(h700());
84
90
  /**
85
91
  * __Styled title wrapper__.
@@ -93,7 +99,9 @@ export const StyledTitleWrapper = /*#__PURE__*/React.forwardRef(({
93
99
  truncateTitle
94
100
  }, ref) => {
95
101
  return jsx("h1", {
96
- css: [...(getBooleanFF('platform.design-system-team.page-header-tokenised-typography-styles_lj1ix') ? [titleStyles] : [h700Styles, styledTitleStyles]), truncateTitle && truncateStyles],
102
+ css: [
103
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
104
+ ...(getBooleanFF('platform.design-system-team.page-header-tokenised-typography-styles_lj1ix') ? [titleStyles] : [h700Styles, styledTitleStyles]), truncateTitle && truncateStyles],
97
105
  ref: ref,
98
106
  tabIndex: -1,
99
107
  id: id
package/dist/esm/PageHeader/styled.js CHANGED
@@ -4,9 +4,14 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
4
4
  // by our consumers. The prop name concerned here is truncateTitle.
5
5
  // This can be done in the next lite-mode conversion.
6
6
  /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
7
+ /**
8
+ * @jsxRuntime classic
9
+ */
7
10
  /** @jsx jsx */
8
11
 
9
12
  import React from 'react';
13
+
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
15
  import { css, jsx } from '@emotion/react';
11
16
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
12
17
  import { Box, xcss } from '@atlaskit/primitives';
@@ -43,6 +48,7 @@ var titleContainerStyles = css({
43
48
  minWidth: 0,
44
49
  maxWidth: '100%',
45
50
  flex: '1 0 auto',
51
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
46
52
  flexShrink: undefined,
47
53
  marginBlockEnd: "var(--ds-space-100, 8px)"
48
54
  });
@@ -53,7 +59,7 @@ var actionStyles = css({
53
59
  marginInlineStart: 'auto',
54
60
  paddingInlineStart: "var(--ds-space-400, 32px)",
55
61
  whiteSpace: 'nowrap',
56
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
62
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
57
63
  '>': {
58
64
  textAlign: 'right'
59
65
  }
@@ -79,7 +85,7 @@ export var OuterWrapper = function OuterWrapper(_ref) {
79
85
  }, children);
80
86
  };
81
87
 
82
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
88
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
83
89
  var h700Styles = css(h700());
84
90
  /**
85
91
  * __Styled title wrapper__.
package/dist/types/PageHeader/styled.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
5
  import React, { type ReactNode } from 'react';
3
6
  import { jsx } from '@emotion/react';
package/dist/types-ts4.5/PageHeader/styled.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
5
  import React, { type ReactNode } from 'react';
3
6
  import { jsx } from '@emotion/react';
package/package.json CHANGED
@@ -1,99 +1,99 @@
1
1
  {
2
- "name": "@atlaskit/page-header",
3
- "version": "10.6.1",
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
- "publishConfig": {
6
- "registry": "https://registry.npmjs.org/"
7
- },
8
- "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
9
- "author": "Atlassian Pty Ltd",
10
- "license": "Apache-2.0",
11
- "main": "dist/cjs/index.js",
12
- "module": "dist/esm/index.js",
13
- "module:es2019": "dist/es2019/index.js",
14
- "types": "dist/types/index.d.ts",
15
- "sideEffects": false,
16
- "atlaskit:src": "src/index.tsx",
17
- "atlassian": {
18
- "team": "Design System Team",
19
- "productPushConsumption": [
20
- "jira"
21
- ],
22
- "releaseModel": "continuous",
23
- "website": {
24
- "name": "Page header",
25
- "category": "Components"
26
- },
27
- "runReact18": true
28
- },
29
- "dependencies": {
30
- "@atlaskit/platform-feature-flags": "^0.2.5",
31
- "@atlaskit/primitives": "^7.0.0",
32
- "@atlaskit/theme": "^12.9.0",
33
- "@atlaskit/tokens": "^1.49.0",
34
- "@babel/runtime": "^7.0.0",
35
- "@emotion/react": "^11.7.1"
36
- },
37
- "peerDependencies": {
38
- "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
39
- "react-dom": "^16.8.0"
40
- },
41
- "devDependencies": {
42
- "@af/accessibility-testing": "*",
43
- "@af/visual-regression": "*",
44
- "@atlaskit/breadcrumbs": "^12.1.0",
45
- "@atlaskit/ds-lib": "^2.3.0",
46
- "@atlaskit/page": "^12.4.0",
47
- "@atlaskit/ssr": "*",
48
- "@atlaskit/textfield": "^6.3.0",
49
- "@atlaskit/visual-regression": "*",
50
- "@testing-library/react": "^12.1.5",
51
- "react-dom": "^16.8.0",
52
- "react-test-renderer": "^16.8.0",
53
- "typescript": "~5.4.2"
54
- },
55
- "keywords": [
56
- "atlaskit",
57
- "react",
58
- "ui"
59
- ],
60
- "techstack": {
61
- "@atlassian/frontend": {
62
- "import-structure": "atlassian-conventions"
63
- },
64
- "@repo/internal": {
65
- "dom-events": "use-bind-event-listener",
66
- "analytics": "analytics-next",
67
- "design-tokens": [
68
- "color",
69
- "spacing"
70
- ],
71
- "theming": [
72
- "react-context"
73
- ],
74
- "styling": [
75
- "static",
76
- "emotion"
77
- ],
78
- "design-system": "v1",
79
- "deprecation": "no-deprecated-imports"
80
- }
81
- },
82
- "typesVersions": {
83
- ">=4.5 <4.9": {
84
- "*": [
85
- "dist/types-ts4.5/*",
86
- "dist/types-ts4.5/index.d.ts"
87
- ]
88
- }
89
- },
90
- "homepage": "https://atlassian.design/components/page-header",
91
- "af:exports": {
92
- ".": "./src/index.tsx"
93
- },
94
- "platform-feature-flags": {
95
- "platform.design-system-team.page-header-tokenised-typography-styles_lj1ix": {
96
- "type": "boolean"
97
- }
98
- }
99
- }
2
+ "name": "@atlaskit/page-header",
3
+ "version": "10.7.0",
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
+ "publishConfig": {
6
+ "registry": "https://registry.npmjs.org/"
7
+ },
8
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
9
+ "author": "Atlassian Pty Ltd",
10
+ "license": "Apache-2.0",
11
+ "main": "dist/cjs/index.js",
12
+ "module": "dist/esm/index.js",
13
+ "module:es2019": "dist/es2019/index.js",
14
+ "types": "dist/types/index.d.ts",
15
+ "sideEffects": false,
16
+ "atlaskit:src": "src/index.tsx",
17
+ "atlassian": {
18
+ "team": "Design System Team",
19
+ "productPushConsumption": [
20
+ "jira"
21
+ ],
22
+ "releaseModel": "continuous",
23
+ "website": {
24
+ "name": "Page header",
25
+ "category": "Components"
26
+ },
27
+ "runReact18": true
28
+ },
29
+ "dependencies": {
30
+ "@atlaskit/platform-feature-flags": "^0.2.5",
31
+ "@atlaskit/primitives": "^7.4.0",
32
+ "@atlaskit/theme": "^12.10.0",
33
+ "@atlaskit/tokens": "^1.51.0",
34
+ "@babel/runtime": "^7.0.0",
35
+ "@emotion/react": "^11.7.1"
36
+ },
37
+ "peerDependencies": {
38
+ "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
39
+ "react-dom": "^16.8.0"
40
+ },
41
+ "devDependencies": {
42
+ "@af/accessibility-testing": "*",
43
+ "@af/visual-regression": "*",
44
+ "@atlaskit/breadcrumbs": "^12.1.0",
45
+ "@atlaskit/ds-lib": "^2.3.0",
46
+ "@atlaskit/page": "^12.5.0",
47
+ "@atlaskit/ssr": "*",
48
+ "@atlaskit/textfield": "^6.4.0",
49
+ "@atlaskit/visual-regression": "*",
50
+ "@testing-library/react": "^12.1.5",
51
+ "react-dom": "^16.8.0",
52
+ "react-test-renderer": "^16.8.0",
53
+ "typescript": "~5.4.2"
54
+ },
55
+ "keywords": [
56
+ "atlaskit",
57
+ "react",
58
+ "ui"
59
+ ],
60
+ "techstack": {
61
+ "@atlassian/frontend": {
62
+ "import-structure": "atlassian-conventions"
63
+ },
64
+ "@repo/internal": {
65
+ "dom-events": "use-bind-event-listener",
66
+ "analytics": "analytics-next",
67
+ "design-tokens": [
68
+ "color",
69
+ "spacing"
70
+ ],
71
+ "theming": [
72
+ "react-context"
73
+ ],
74
+ "styling": [
75
+ "static",
76
+ "emotion"
77
+ ],
78
+ "design-system": "v1",
79
+ "deprecation": "no-deprecated-imports"
80
+ }
81
+ },
82
+ "typesVersions": {
83
+ ">=4.5 <4.9": {
84
+ "*": [
85
+ "dist/types-ts4.5/*",
86
+ "dist/types-ts4.5/index.d.ts"
87
+ ]
88
+ }
89
+ },
90
+ "homepage": "https://atlassian.design/components/page-header",
91
+ "af:exports": {
92
+ ".": "./src/index.tsx"
93
+ },
94
+ "platform-feature-flags": {
95
+ "platform.design-system-team.page-header-tokenised-typography-styles_lj1ix": {
96
+ "type": "boolean"
97
+ }
98
+ }
99
+ }
package/report.api.md CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  ## API Report File for "@atlaskit/page-header"
4
4
 
5
- > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
5
+ > Do not edit this file. This report is auto-generated using
6
+ > [API Extractor](https://api-extractor.com/).
6
7
  > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
8
 
8
9
  ### Table of contents
@@ -20,27 +21,27 @@ import { ReactNode } from 'react';
20
21
 
21
22
  // @public
22
23
  const PageHeader: ({
23
- innerRef,
24
- breadcrumbs,
25
- actions,
26
- bottomBar,
27
- children,
28
- id,
29
- disableTitleStyles,
30
- truncateTitle,
24
+ innerRef,
25
+ breadcrumbs,
26
+ actions,
27
+ bottomBar,
28
+ children,
29
+ id,
30
+ disableTitleStyles,
31
+ truncateTitle,
31
32
  }: PageHeaderProps) => JSX.Element;
32
33
  export default PageHeader;
33
34
 
34
35
  // @public (undocumented)
35
36
  type PageHeaderProps = {
36
- actions?: ReactElement;
37
- bottomBar?: ReactElement;
38
- breadcrumbs?: ReactElement;
39
- children?: ReactNode;
40
- disableTitleStyles?: boolean;
41
- innerRef?: (element: HTMLElement) => void;
42
- truncateTitle?: boolean;
43
- id?: string;
37
+ actions?: ReactElement;
38
+ bottomBar?: ReactElement;
39
+ breadcrumbs?: ReactElement;
40
+ children?: ReactNode;
41
+ disableTitleStyles?: boolean;
42
+ innerRef?: (element: HTMLElement) => void;
43
+ truncateTitle?: boolean;
44
+ id?: string;
44
45
  };
45
46
 
46
47
  // (No @packageDocumentation comment for this package)
@@ -54,8 +55,8 @@ type PageHeaderProps = {
54
55
 
55
56
  ```json
56
57
  {
57
- "react": "^16.8.0",
58
- "react-dom": "^16.8.0"
58
+ "react": "^16.8.0",
59
+ "react-dom": "^16.8.0"
59
60
  }
60
61
  ```
61
62