@atlaskit/page-layout 3.3.1 → 3.3.3

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 (14) hide show
  1. package/CHANGELOG.md +526 -515
  2. package/__perf__/utils/product-integration/sample-footer.tsx +1 -2
  3. package/dist/cjs/components/resize-control/grab-area.js +2 -2
  4. package/dist/cjs/components/resize-control/resize-button.js +3 -1
  5. package/dist/cjs/components/skip-links/skip-link-components.js +4 -7
  6. package/dist/es2019/components/resize-control/grab-area.js +2 -2
  7. package/dist/es2019/components/resize-control/resize-button.js +3 -1
  8. package/dist/es2019/components/skip-links/skip-link-components.js +4 -7
  9. package/dist/esm/components/resize-control/grab-area.js +2 -2
  10. package/dist/esm/components/resize-control/resize-button.js +3 -1
  11. package/dist/esm/components/skip-links/skip-link-components.js +4 -7
  12. package/dist/types/components/skip-links/skip-link-components.d.ts +1 -2
  13. package/dist/types-ts4.5/components/skip-links/skip-link-components.d.ts +1 -2
  14. package/package.json +9 -12
package/__perf__/utils/product-integration/sample-footer.tsx CHANGED
@@ -15,8 +15,7 @@ const Container = (props: CustomItemComponentProps) => {
15
15
 
16
16
  const linkStyles = css({
17
17
  color: token('color.text.subtle', N200),
18
- fontSize: 12,
19
- ':hover': {
18
+ '&:hover': {
20
19
  color: token('color.link', B400),
21
20
  cursor: 'pointer',
22
21
  textDecoration: 'none',
package/dist/cjs/components/resize-control/grab-area.js CHANGED
@@ -31,10 +31,10 @@ var grabAreaStyles = (0, _react.css)({
31
31
  '&::-moz-focus-inner': {
32
32
  border: 0
33
33
  },
34
- ':focus': {
34
+ '&:focus': {
35
35
  outline: 0
36
36
  },
37
- ':enabled:hover, :enabled:focus, :enabled:active': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
37
+ '&:enabled:hover, &:enabled:focus, &:enabled:active': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
38
38
  });
39
39
  var grabAreaReducedHeightStyles = (0, _react.css)({
40
40
  height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),
package/dist/cjs/components/resize-control/resize-button.js CHANGED
@@ -82,7 +82,9 @@ var ResizeButton = function ResizeButton(_ref) {
82
82
  // DO NOT remove. used as a CSS selector.
83
83
  "aria-expanded": !isLeftSidebarCollapsed,
84
84
  "aria-label": label,
85
- type: "button",
85
+ type: "button"
86
+ // The error goes away when we remove the spread ...props
87
+ ,
86
88
  css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
87
89
  "data-testid": testId
88
90
  // Prevents focus staying attached to the button when pressed
package/dist/cjs/components/skip-links/skip-link-components.js CHANGED
@@ -11,7 +11,6 @@ var _react = require("@emotion/react");
11
11
  var _link = _interopRequireDefault(require("@atlaskit/link"));
12
12
  var _motion = require("@atlaskit/motion");
13
13
  var _colors = require("@atlaskit/theme/colors");
14
- var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
15
14
  var _constants = require("../../common/constants");
16
15
  var _controllers = require("../../controllers");
17
16
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -31,7 +30,7 @@ var skipLinkStyles = (0, _react.css)({
31
30
  opacity: 0,
32
31
  transform: 'translateY(-50%)',
33
32
  transition: "transform 0.3s ".concat(_motion.easeOut),
34
- ':focus-within': {
33
+ '&:focus-within': {
35
34
  zIndex: 2147483640,
36
35
  insetInlineStart: 0,
37
36
  opacity: 1,
@@ -125,8 +124,7 @@ var SkipLinkWrapper = exports.SkipLinkWrapper = function SkipLinkWrapper(_ref) {
125
124
  return (0, _react.jsx)(SkipLink, {
126
125
  key: id,
127
126
  href: "#".concat(id),
128
- isFocusable: true,
129
- skipToLabel: emptyLabelOverride ? "".concat(_constants.DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
127
+ isFocusable: true
130
128
  }, skipLinkTitle);
131
129
  })));
132
130
  };
@@ -167,13 +165,12 @@ var focusTargetRef = function focusTargetRef(href) {
167
165
  var SkipLink = exports.SkipLink = function SkipLink(_ref3) {
168
166
  var href = _ref3.href,
169
167
  children = _ref3.children,
170
- isFocusable = _ref3.isFocusable,
171
- skipToLabel = _ref3.skipToLabel;
168
+ isFocusable = _ref3.isFocusable;
172
169
  return (0, _react.jsx)("li", {
173
170
  css: skipLinkListItemStyles
174
171
  }, (0, _react.jsx)(_link.default, {
175
172
  tabIndex: isFocusable ? 0 : -1,
176
173
  href: href,
177
174
  onClick: focusTargetRef(href)
178
- }, (0, _react.jsx)(_visuallyHidden.default, null, skipToLabel), children));
175
+ }, children));
179
176
  };
package/dist/es2019/components/resize-control/grab-area.js CHANGED
@@ -22,10 +22,10 @@ const grabAreaStyles = css({
22
22
  '&::-moz-focus-inner': {
23
23
  border: 0
24
24
  },
25
- ':focus': {
25
+ '&:focus': {
26
26
  outline: 0
27
27
  },
28
- ':enabled:hover, :enabled:focus, :enabled:active': {
28
+ '&:enabled:hover, &:enabled:focus, &:enabled:active': {
29
29
  [varLineColor]: `var(--ds-border-selected, ${B200})`
30
30
  }
31
31
  });
package/dist/es2019/components/resize-control/resize-button.js CHANGED
@@ -80,7 +80,9 @@ const ResizeButton = ({
80
80
  // DO NOT remove. used as a CSS selector.
81
81
  "aria-expanded": !isLeftSidebarCollapsed,
82
82
  "aria-label": label,
83
- type: "button",
83
+ type: "button"
84
+ // The error goes away when we remove the spread ...props
85
+ ,
84
86
  css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
85
87
  "data-testid": testId
86
88
  // Prevents focus staying attached to the button when pressed
package/dist/es2019/components/skip-links/skip-link-components.js CHANGED
@@ -5,7 +5,6 @@ import { css, jsx } from '@emotion/react';
5
5
  import Link from '@atlaskit/link';
6
6
  import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
7
7
  import { N30A, N60A } from '@atlaskit/theme/colors';
8
- import VisuallyHidden from '@atlaskit/visually-hidden';
9
8
  import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
10
9
  import { useSkipLinks } from '../../controllers';
11
10
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -23,7 +22,7 @@ const skipLinkStyles = css({
23
22
  opacity: 0,
24
23
  transform: 'translateY(-50%)',
25
24
  transition: `transform 0.3s ${easeOut}`,
26
- ':focus-within': {
25
+ '&:focus-within': {
27
26
  zIndex: 2147483640,
28
27
  insetInlineStart: 0,
29
28
  opacity: 1,
@@ -108,8 +107,7 @@ export const SkipLinkWrapper = ({
108
107
  }) => jsx(SkipLink, {
109
108
  key: id,
110
109
  href: `#${id}`,
111
- isFocusable: true,
112
- skipToLabel: emptyLabelOverride ? `${DEFAULT_I18N_PROPS_SKIP_LINKS} ${skipLinkTitle}` : `${label} ${skipLinkTitle}`
110
+ isFocusable: true
113
111
  }, skipLinkTitle))));
114
112
  };
115
113
  const handleBlur = event => {
@@ -147,8 +145,7 @@ const focusTargetRef = href => event => {
147
145
  export const SkipLink = ({
148
146
  href,
149
147
  children,
150
- isFocusable,
151
- skipToLabel
148
+ isFocusable
152
149
  }) => {
153
150
  return jsx("li", {
154
151
  css: skipLinkListItemStyles
@@ -156,5 +153,5 @@ export const SkipLink = ({
156
153
  tabIndex: isFocusable ? 0 : -1,
157
154
  href: href,
158
155
  onClick: focusTargetRef(href)
159
- }, jsx(VisuallyHidden, null, skipToLabel), children));
156
+ }, children));
160
157
  };
package/dist/esm/components/resize-control/grab-area.js CHANGED
@@ -25,10 +25,10 @@ var grabAreaStyles = css({
25
25
  '&::-moz-focus-inner': {
26
26
  border: 0
27
27
  },
28
- ':focus': {
28
+ '&:focus': {
29
29
  outline: 0
30
30
  },
31
- ':enabled:hover, :enabled:focus, :enabled:active': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
31
+ '&:enabled:hover, &:enabled:focus, &:enabled:active': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
32
32
  });
33
33
  var grabAreaReducedHeightStyles = css({
34
34
  height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),
package/dist/esm/components/resize-control/resize-button.js CHANGED
@@ -76,7 +76,9 @@ var ResizeButton = function ResizeButton(_ref) {
76
76
  // DO NOT remove. used as a CSS selector.
77
77
  "aria-expanded": !isLeftSidebarCollapsed,
78
78
  "aria-label": label,
79
- type: "button",
79
+ type: "button"
80
+ // The error goes away when we remove the spread ...props
81
+ ,
80
82
  css: [resizeIconButtonStyles, mobileStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
81
83
  "data-testid": testId
82
84
  // Prevents focus staying attached to the button when pressed
package/dist/esm/components/skip-links/skip-link-components.js CHANGED
@@ -9,7 +9,6 @@ import { css, jsx } from '@emotion/react';
9
9
  import Link from '@atlaskit/link';
10
10
  import { easeOut, prefersReducedMotion } from '@atlaskit/motion';
11
11
  import { N30A, N60A } from '@atlaskit/theme/colors';
12
- import VisuallyHidden from '@atlaskit/visually-hidden';
13
12
  import { DEFAULT_I18N_PROPS_SKIP_LINKS, PAGE_LAYOUT_CONTAINER_SELECTOR } from '../../common/constants';
14
13
  import { useSkipLinks } from '../../controllers';
15
14
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -27,7 +26,7 @@ var skipLinkStyles = css({
27
26
  opacity: 0,
28
27
  transform: 'translateY(-50%)',
29
28
  transition: "transform 0.3s ".concat(easeOut),
30
- ':focus-within': {
29
+ '&:focus-within': {
31
30
  zIndex: 2147483640,
32
31
  insetInlineStart: 0,
33
32
  opacity: 1,
@@ -121,8 +120,7 @@ export var SkipLinkWrapper = function SkipLinkWrapper(_ref) {
121
120
  return jsx(SkipLink, {
122
121
  key: id,
123
122
  href: "#".concat(id),
124
- isFocusable: true,
125
- skipToLabel: emptyLabelOverride ? "".concat(DEFAULT_I18N_PROPS_SKIP_LINKS, " ").concat(skipLinkTitle) : "".concat(label, " ").concat(skipLinkTitle)
123
+ isFocusable: true
126
124
  }, skipLinkTitle);
127
125
  })));
128
126
  };
@@ -163,13 +161,12 @@ var focusTargetRef = function focusTargetRef(href) {
163
161
  export var SkipLink = function SkipLink(_ref3) {
164
162
  var href = _ref3.href,
165
163
  children = _ref3.children,
166
- isFocusable = _ref3.isFocusable,
167
- skipToLabel = _ref3.skipToLabel;
164
+ isFocusable = _ref3.isFocusable;
168
165
  return jsx("li", {
169
166
  css: skipLinkListItemStyles
170
167
  }, jsx(Link, {
171
168
  tabIndex: isFocusable ? 0 : -1,
172
169
  href: href,
173
170
  onClick: focusTargetRef(href)
174
- }, jsx(VisuallyHidden, null, skipToLabel), children));
171
+ }, children));
175
172
  };
package/dist/types/components/skip-links/skip-link-components.d.ts CHANGED
@@ -10,9 +10,8 @@ import { type SkipLinkWrapperProps } from './types';
10
10
  * themselves.
11
11
  */
12
12
  export declare const SkipLinkWrapper: ({ skipLinksLabel }: SkipLinkWrapperProps) => jsx.JSX.Element | null;
13
- export declare const SkipLink: ({ href, children, isFocusable, skipToLabel, }: {
13
+ export declare const SkipLink: ({ href, children, isFocusable, }: {
14
14
  href: string;
15
15
  children: ReactNode;
16
16
  isFocusable: boolean;
17
- skipToLabel: string;
18
17
  }) => jsx.JSX.Element;
package/dist/types-ts4.5/components/skip-links/skip-link-components.d.ts CHANGED
@@ -10,9 +10,8 @@ import { type SkipLinkWrapperProps } from './types';
10
10
  * themselves.
11
11
  */
12
12
  export declare const SkipLinkWrapper: ({ skipLinksLabel }: SkipLinkWrapperProps) => jsx.JSX.Element | null;
13
- export declare const SkipLink: ({ href, children, isFocusable, skipToLabel, }: {
13
+ export declare const SkipLink: ({ href, children, isFocusable, }: {
14
14
  href: string;
15
15
  children: ReactNode;
16
16
  isFocusable: boolean;
17
- skipToLabel: string;
18
17
  }) => jsx.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "3.3.1",
3
+ "version": "3.3.3",
4
4
  "description": "A collection of components which let you compose an application's page layout.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -41,13 +41,12 @@
41
41
  "dependencies": {
42
42
  "@atlaskit/ds-lib": "^2.3.0",
43
43
  "@atlaskit/icon": "^22.3.0",
44
- "@atlaskit/link": "^0.3.0",
44
+ "@atlaskit/link": "^0.4.0",
45
45
  "@atlaskit/motion": "^1.6.0",
46
46
  "@atlaskit/platform-feature-flags": "^0.2.0",
47
- "@atlaskit/primitives": "^6.3.0",
48
- "@atlaskit/theme": "^12.8.0",
47
+ "@atlaskit/primitives": "^7.0.0",
48
+ "@atlaskit/theme": "^12.9.0",
49
49
  "@atlaskit/tokens": "^1.49.0",
50
- "@atlaskit/visually-hidden": "^1.3.0",
51
50
  "@babel/runtime": "^7.0.0",
52
51
  "@emotion/react": "^11.7.1",
53
52
  "bind-event-listener": "^3.0.0",
@@ -60,20 +59,19 @@
60
59
  "devDependencies": {
61
60
  "@af/accessibility-testing": "*",
62
61
  "@af/integration-testing": "*",
63
- "@atlaskit/atlassian-navigation": "^3.6.0",
62
+ "@atlaskit/atlassian-navigation": "^4.0.0",
64
63
  "@atlaskit/atlassian-notifications": "^0.4.0",
65
- "@atlaskit/drawer": "^7.10.0",
66
- "@atlaskit/logo": "^13.17.0",
67
- "@atlaskit/menu": "^2.3.0",
64
+ "@atlaskit/drawer": "^7.11.0",
65
+ "@atlaskit/logo": "^14.0.0",
66
+ "@atlaskit/menu": "^2.4.0",
68
67
  "@atlaskit/notification-indicator": "^9.2.0",
69
68
  "@atlaskit/notification-log-client": "^6.1.0",
70
69
  "@atlaskit/popup": "^1.17.0",
71
- "@atlaskit/side-navigation": "^3.1.0",
70
+ "@atlaskit/side-navigation": "^3.2.0",
72
71
  "@atlaskit/ssr": "*",
73
72
  "@atlaskit/toggle": "^13.1.0",
74
73
  "@atlaskit/tooltip": "^18.4.0",
75
74
  "@atlaskit/visual-regression": "*",
76
- "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
77
75
  "@testing-library/dom": "^8.17.1",
78
76
  "@testing-library/react": "^12.1.5",
79
77
  "@testing-library/react-hooks": "^8.0.1",
@@ -115,7 +113,6 @@
115
113
  ]
116
114
  }
117
115
  },
118
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
119
116
  "platform-feature-flags": {
120
117
  "platform.design-system-team.page-layout-resize-button-fix_u0qxv": {
121
118
  "type": "boolean"