@atlaskit/tabs 18.1.2 → 18.1.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 (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/components/tab-panel.js +6 -7
  3. package/dist/cjs/components/tab.js +23 -21
  4. package/dist/es2019/components/tab-panel.js +6 -6
  5. package/dist/es2019/components/tab.js +24 -21
  6. package/dist/esm/components/tab-panel.js +6 -6
  7. package/dist/esm/components/tab.js +24 -21
  8. package/package.json +7 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/tabs
2
2
 
3
+ ## 18.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#182316](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/182316)
8
+ [`3e3e11916be69`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e3e11916be69) -
9
+ Migrated the internal usage of @atlaskit/focus-ring which uses Emotion for styling, to the new
10
+ version built with Compiled CSS-in-JS.
11
+
3
12
  ## 18.1.2
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/components/tab-panel.js CHANGED
@@ -1,13 +1,12 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
8
  var _react = _interopRequireWildcard(require("react"));
10
- var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
9
+ var _compiled = require("@atlaskit/primitives/compiled");
11
10
  var _hooks = require("../hooks");
12
11
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
13
12
  // Note this is not being memoized as children is an unstable reference
@@ -29,15 +28,15 @@ var TabPanel = function TabPanel(_ref) {
29
28
  hidden = _useTabPanel.hidden,
30
29
  ariaLabelledBy = _useTabPanel['aria-labelledby'],
31
30
  tabIndex = _useTabPanel.tabIndex;
32
- return /*#__PURE__*/_react.default.createElement(_focusRing.default, {
33
- isInset: true
34
- }, /*#__PURE__*/_react.default.createElement("div", {
35
- "data-testid": testId,
31
+ return /*#__PURE__*/_react.default.createElement(_compiled.Focusable, {
32
+ as: "div",
33
+ isInset: true,
34
+ testId: testId,
36
35
  role: role,
37
36
  id: id,
38
37
  hidden: hidden,
39
38
  "aria-labelledby": ariaLabelledBy,
40
39
  tabIndex: tabIndex
41
- }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children)));
40
+ }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children));
42
41
  };
43
42
  var _default = exports.default = TabPanel;
package/dist/cjs/components/tab.js CHANGED
@@ -1,13 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
8
  var _react = _interopRequireWildcard(require("react"));
10
- var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
11
9
  var _compiled = require("@atlaskit/primitives/compiled");
12
10
  var _hooks = require("../hooks");
13
11
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -33,24 +31,28 @@ var Tab = /*#__PURE__*/(0, _react.forwardRef)(function Tab(_ref, ref) {
33
31
  onKeyDown = _useTab.onKeyDown,
34
32
  role = _useTab.role,
35
33
  tabIndex = _useTab.tabIndex;
36
- return /*#__PURE__*/_react.default.createElement(_focusRing.default, {
37
- isInset: true
38
- }, /*#__PURE__*/_react.default.createElement("div", {
39
- "data-testid": testId,
40
- onClick: onClick,
41
- id: id,
42
- "aria-controls": ariaControls,
43
- "aria-posinset": ariaPosinset,
44
- "aria-selected": ariaSelected,
45
- "aria-setsize": ariaSetsize,
46
- onKeyDown: onKeyDown,
47
- role: role,
48
- tabIndex: tabIndex,
49
- ref: ref
50
- }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
51
- weight: "medium",
52
- color: "inherit",
53
- maxLines: 1
54
- }, children)));
34
+ return (
35
+ /*#__PURE__*/
36
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
37
+ _react.default.createElement(_compiled.Focusable, {
38
+ as: "div",
39
+ isInset: true,
40
+ testId: testId,
41
+ onClick: onClick,
42
+ id: id,
43
+ "aria-controls": ariaControls,
44
+ "aria-posinset": ariaPosinset,
45
+ "aria-selected": ariaSelected,
46
+ "aria-setsize": ariaSetsize,
47
+ onKeyDown: onKeyDown,
48
+ role: role,
49
+ tabIndex: tabIndex,
50
+ ref: ref
51
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
52
+ weight: "medium",
53
+ color: "inherit",
54
+ maxLines: 1
55
+ }, children))
56
+ );
55
57
  });
56
58
  var _default = exports.default = Tab;
package/dist/es2019/components/tab-panel.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { Fragment } from 'react';
2
- import FocusRing from '@atlaskit/focus-ring';
2
+ import { Focusable } from '@atlaskit/primitives/compiled';
3
3
  import { useTabPanel } from '../hooks';
4
4
  // Note this is not being memoized as children is an unstable reference
5
5
  /**
@@ -22,15 +22,15 @@ const TabPanel = ({
22
22
  'aria-labelledby': ariaLabelledBy,
23
23
  tabIndex
24
24
  } = useTabPanel();
25
- return /*#__PURE__*/React.createElement(FocusRing, {
26
- isInset: true
27
- }, /*#__PURE__*/React.createElement("div", {
28
- "data-testid": testId,
25
+ return /*#__PURE__*/React.createElement(Focusable, {
26
+ as: "div",
27
+ isInset: true,
28
+ testId: testId,
29
29
  role: role,
30
30
  id: id,
31
31
  hidden: hidden,
32
32
  "aria-labelledby": ariaLabelledBy,
33
33
  tabIndex: tabIndex
34
- }, /*#__PURE__*/React.createElement(Fragment, null, children)));
34
+ }, /*#__PURE__*/React.createElement(Fragment, null, children));
35
35
  };
36
36
  export default TabPanel;
package/dist/es2019/components/tab.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { forwardRef } from 'react';
2
- import FocusRing from '@atlaskit/focus-ring';
3
- import { Text } from '@atlaskit/primitives/compiled';
2
+ import { Focusable, Text } from '@atlaskit/primitives/compiled';
4
3
  import { useTab } from '../hooks';
5
4
  /**
6
5
  * __Tab__
@@ -26,24 +25,28 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
26
25
  role,
27
26
  tabIndex
28
27
  } = useTab();
29
- return /*#__PURE__*/React.createElement(FocusRing, {
30
- isInset: true
31
- }, /*#__PURE__*/React.createElement("div", {
32
- "data-testid": testId,
33
- onClick: onClick,
34
- id: id,
35
- "aria-controls": ariaControls,
36
- "aria-posinset": ariaPosinset,
37
- "aria-selected": ariaSelected,
38
- "aria-setsize": ariaSetsize,
39
- onKeyDown: onKeyDown,
40
- role: role,
41
- tabIndex: tabIndex,
42
- ref: ref
43
- }, /*#__PURE__*/React.createElement(Text, {
44
- weight: "medium",
45
- color: "inherit",
46
- maxLines: 1
47
- }, children)));
28
+ return (
29
+ /*#__PURE__*/
30
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
31
+ React.createElement(Focusable, {
32
+ as: "div",
33
+ isInset: true,
34
+ testId: testId,
35
+ onClick: onClick,
36
+ id: id,
37
+ "aria-controls": ariaControls,
38
+ "aria-posinset": ariaPosinset,
39
+ "aria-selected": ariaSelected,
40
+ "aria-setsize": ariaSetsize,
41
+ onKeyDown: onKeyDown,
42
+ role: role,
43
+ tabIndex: tabIndex,
44
+ ref: ref
45
+ }, /*#__PURE__*/React.createElement(Text, {
46
+ weight: "medium",
47
+ color: "inherit",
48
+ maxLines: 1
49
+ }, children))
50
+ );
48
51
  });
49
52
  export default Tab;
package/dist/esm/components/tab-panel.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { Fragment } from 'react';
2
- import FocusRing from '@atlaskit/focus-ring';
2
+ import { Focusable } from '@atlaskit/primitives/compiled';
3
3
  import { useTabPanel } from '../hooks';
4
4
  // Note this is not being memoized as children is an unstable reference
5
5
  /**
@@ -20,15 +20,15 @@ var TabPanel = function TabPanel(_ref) {
20
20
  hidden = _useTabPanel.hidden,
21
21
  ariaLabelledBy = _useTabPanel['aria-labelledby'],
22
22
  tabIndex = _useTabPanel.tabIndex;
23
- return /*#__PURE__*/React.createElement(FocusRing, {
24
- isInset: true
25
- }, /*#__PURE__*/React.createElement("div", {
26
- "data-testid": testId,
23
+ return /*#__PURE__*/React.createElement(Focusable, {
24
+ as: "div",
25
+ isInset: true,
26
+ testId: testId,
27
27
  role: role,
28
28
  id: id,
29
29
  hidden: hidden,
30
30
  "aria-labelledby": ariaLabelledBy,
31
31
  tabIndex: tabIndex
32
- }, /*#__PURE__*/React.createElement(Fragment, null, children)));
32
+ }, /*#__PURE__*/React.createElement(Fragment, null, children));
33
33
  };
34
34
  export default TabPanel;
package/dist/esm/components/tab.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { forwardRef } from 'react';
2
- import FocusRing from '@atlaskit/focus-ring';
3
- import { Text } from '@atlaskit/primitives/compiled';
2
+ import { Focusable, Text } from '@atlaskit/primitives/compiled';
4
3
  import { useTab } from '../hooks';
5
4
  /**
6
5
  * __Tab__
@@ -24,24 +23,28 @@ var Tab = /*#__PURE__*/forwardRef(function Tab(_ref, ref) {
24
23
  onKeyDown = _useTab.onKeyDown,
25
24
  role = _useTab.role,
26
25
  tabIndex = _useTab.tabIndex;
27
- return /*#__PURE__*/React.createElement(FocusRing, {
28
- isInset: true
29
- }, /*#__PURE__*/React.createElement("div", {
30
- "data-testid": testId,
31
- onClick: onClick,
32
- id: id,
33
- "aria-controls": ariaControls,
34
- "aria-posinset": ariaPosinset,
35
- "aria-selected": ariaSelected,
36
- "aria-setsize": ariaSetsize,
37
- onKeyDown: onKeyDown,
38
- role: role,
39
- tabIndex: tabIndex,
40
- ref: ref
41
- }, /*#__PURE__*/React.createElement(Text, {
42
- weight: "medium",
43
- color: "inherit",
44
- maxLines: 1
45
- }, children)));
26
+ return (
27
+ /*#__PURE__*/
28
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
29
+ React.createElement(Focusable, {
30
+ as: "div",
31
+ isInset: true,
32
+ testId: testId,
33
+ onClick: onClick,
34
+ id: id,
35
+ "aria-controls": ariaControls,
36
+ "aria-posinset": ariaPosinset,
37
+ "aria-selected": ariaSelected,
38
+ "aria-setsize": ariaSetsize,
39
+ onKeyDown: onKeyDown,
40
+ role: role,
41
+ tabIndex: tabIndex,
42
+ ref: ref
43
+ }, /*#__PURE__*/React.createElement(Text, {
44
+ weight: "medium",
45
+ color: "inherit",
46
+ maxLines: 1
47
+ }, children))
48
+ );
46
49
  });
47
50
  export default Tab;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "18.1.2",
3
+ "version": "18.1.3",
4
4
  "description": "Tabs are used to organize content by grouping similar information on the same page.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,16 +29,15 @@
29
29
  "website": {
30
30
  "name": "Tabs",
31
31
  "category": "Navigation"
32
- },
33
- "runReact18": true
32
+ }
34
33
  },
35
34
  "dependencies": {
36
35
  "@atlaskit/analytics-next": "^11.1.0",
37
36
  "@atlaskit/focus-ring": "^3.0.0",
38
37
  "@atlaskit/platform-feature-flags": "^1.1.0",
39
- "@atlaskit/primitives": "^14.8.0",
38
+ "@atlaskit/primitives": "^14.10.0",
40
39
  "@atlaskit/theme": "^18.0.0",
41
- "@atlaskit/tokens": "^5.0.0",
40
+ "@atlaskit/tokens": "^5.4.0",
42
41
  "@babel/runtime": "^7.0.0",
43
42
  "@compiled/react": "^0.18.3"
44
43
  },
@@ -50,14 +49,14 @@
50
49
  "@af/integration-testing": "workspace:^",
51
50
  "@af/visual-regression": "workspace:^",
52
51
  "@atlaskit/button": "^23.2.0",
53
- "@atlaskit/css": "^0.10.0",
54
- "@atlaskit/docs": "^10.0.0",
52
+ "@atlaskit/css": "^0.12.0",
53
+ "@atlaskit/docs": "^11.0.0",
55
54
  "@atlaskit/ds-lib": "^4.0.0",
56
55
  "@atlaskit/link": "^3.2.0",
57
56
  "@atlaskit/section-message": "^8.2.0",
58
57
  "@atlaskit/spinner": "^18.0.0",
59
58
  "@atlaskit/ssr": "workspace:^",
60
- "@atlaskit/tooltip": "^20.2.0",
59
+ "@atlaskit/tooltip": "^20.3.0",
61
60
  "@atlaskit/visually-hidden": "^3.0.0",
62
61
  "@atlassian/ssr-tests": "^0.2.0",
63
62
  "@testing-library/react": "^13.4.0",