New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@atlaskit/tabs

Package Overview
Dependencies
Maintainers
1
Versions
185
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlaskit/tabs - npm Package Compare versions

Comparing version

13.0.1
to
13.1.0

24

CHANGELOG.md
# @atlaskit/tabs
## 13.1.0
### Minor Changes
- [`4f40ecb4471`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f40ecb4471) - [ux] Added `Home` and `End` keys handlers for tablist. Changed arrow keys handlers to make tabs cycled. Now when you press the left arrow key on the first tab the last tab will be selected and when you press right arrow key on the last tab the first tab will be selected
### Patch Changes
- Updated dependencies
## 13.0.1

@@ -108,5 +118,5 @@

<div
style={{
fontSize: 16;
}}
css={css`
font-size: 16px;
`}
{...tabAttributes}

@@ -123,3 +133,3 @@ >

```
import { useTab } from '@atlaskit/tabs';
import { useTabPanel } from '@atlaskit/tabs';

@@ -131,5 +141,5 @@ const CustomTabPanel = ({ body }: { body: string }) => {

<div
style={{
margin: 12
}}
css={css`
margin: 12px;
`}
{...tabPanelAttributes}

@@ -136,0 +146,0 @@ >

36

codemods/__tests__/13.0.0-lite-mode.ts

@@ -65,3 +65,4 @@ import transformer from '../13.0.0-lite-mode';

The codemod has added a random ID but you can add one that makes sense for your use case. */
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -82,3 +83,4 @@ The type of onChange has also changed from

of the selected tab as it also doesn't accept TabData anymore. */
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -93,3 +95,4 @@ This file uses \`Tabs\`’s \`component\` prop. This has been removed as part of moving to

https://atlassian.design/components/tabs/examples#customizing-tab-panel */
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -183,3 +186,4 @@ This file uses \`Tabs\`’s \`isSelectedTest\` prop. This has been removed as it is a second way

The codemod has added a random ID but you can add one that makes sense for your use case. */
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -200,3 +204,4 @@ The type of onChange has also changed from

of the selected tab as it also doesn't accept TabData anymore. */
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -211,3 +216,4 @@ This file uses \`Tabs\`’s \`component\` prop. This has been removed as part of moving to

https://atlassian.design/components/tabs/examples#customizing-tab-panel */
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -306,3 +312,4 @@ This file uses \`Tabs\`’s \`isSelectedTest\` prop. This has been removed as it is a second way

The codemod has added a random ID but you can add one that makes sense for your use case. */
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -392,3 +399,4 @@ The type of onChange has also changed from

The codemod has added a random ID but you can add one that makes sense for your use case. */
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -409,3 +417,4 @@ The type of onChange has also changed from

of the selected tab as it also doesn't accept TabData anymore. */
/* TODO: (from codemod) This file is spreading props on the Tabs component.
/* TODO: (from codemod)
This file is spreading props on the Tabs component.

@@ -491,3 +500,4 @@ The API has changed to be composable and a number of props have changed.

The codemod has added a random ID but you can add one that makes sense for your use case. */
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -508,3 +518,4 @@ The type of onChange has also changed from

of the selected tab as it also doesn't accept TabData anymore. */
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -519,3 +530,4 @@ This file uses \`Tabs\`’s \`component\` prop. This has been removed as part of moving to

https://atlassian.design/components/tabs/examples#customizing-tab-panel */
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -522,0 +534,0 @@ This file uses \`Tabs\`’s \`isSelectedTest\` prop. This has been removed as it is a second way

3

codemods/__tests__/map-tabs-prop.ts

@@ -273,3 +273,4 @@ import { createTransformer } from '@atlaskit/codemod-utils';

`
/* TODO: (from codemod) This file is spreading props on the Tabs component.
/* TODO: (from codemod)
This file is spreading props on the Tabs component.

@@ -276,0 +277,0 @@ The API has changed to be composable and a number of props have changed.

21

codemods/__tests__/onSelect-to-onChange.ts

@@ -38,3 +38,4 @@ import { createTransformer } from '@atlaskit/codemod-utils';

`
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -109,3 +110,4 @@ The type of onChange has also changed from

`
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -189,3 +191,4 @@ The type of onChange has also changed from

`
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -266,3 +269,4 @@ The type of onChange has also changed from

`
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -349,3 +353,4 @@ The type of onChange has also changed from

`
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -421,3 +426,4 @@ The type of onChange has also changed from

`
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -490,3 +496,4 @@ The type of onChange has also changed from

`
/* TODO: (from codemod) This file uses onSelect and this prop has been changed names to onChange.
/* TODO: (from codemod)
This file uses onSelect and this prop has been changed names to onChange.

@@ -493,0 +500,0 @@ The type of onChange has also changed from

6

codemods/__tests__/remove-components-prop.ts

@@ -42,3 +42,4 @@ import { createTransformer } from '@atlaskit/codemod-utils';

`
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -113,3 +114,4 @@ This file uses \`Tabs\`’s \`component\` prop. This has been removed as part of moving to

`
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -116,0 +118,0 @@ This file uses \`Tabs\`’s \`component\` prop. This has been removed as part of moving to

6

codemods/__tests__/remove-isSelectedTest-prop.ts

@@ -43,3 +43,4 @@ import { createTransformer } from '@atlaskit/codemod-utils';

`
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -112,3 +113,4 @@ This file uses \`Tabs\`’s \`isSelectedTest\` prop. This has been removed as it is a second way

`
/* TODO: (from codemod) We could not automatically convert this code to the new API.
/* TODO: (from codemod)
We could not automatically convert this code to the new API.

@@ -115,0 +117,0 @@ This file uses \`Tabs\`’s \`isSelectedTest\` prop. This has been removed as it is a second way

37

dist/cjs/components/tab-list.js

@@ -44,7 +44,27 @@ "use strict";

}, [mode]);
var onKeyDown = (0, _react.useCallback)(function (e) {
var selectTabByIndex = (0, _react.useCallback)(function (index) {
var _ref$current;
if (!['ArrowRight', 'ArrowLeft'].includes(e.key)) {
var newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[id='".concat(tabsId, "-").concat(index, "']"));
if (newSelectedNode) {
newSelectedNode.focus();
}
onChange(index);
}, [tabsId, ref, onChange]);
var onKeyDown = (0, _react.useCallback)(function (e) {
if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key)) {
return;
} // preventing horizontal or vertical scroll
e.preventDefault();
var lastTabIndex = length - 1;
if (['Home', 'End'].includes(e.key)) {
var _newSelected = e.key === 'Home' ? 0 : lastTabIndex;
selectTabByIndex(_newSelected);
return;
} // We use aria-posinset so we don't rely on the selected variable

@@ -60,14 +80,9 @@ // If we used the selected variable this would regenerate each time

if (newSelected < 0 || newSelected >= length) {
return;
// Cycling focus to move from last to first and from first to last
newSelected = newSelected < 0 ? lastTabIndex : 0;
}
var newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[id='".concat(tabsId, "-").concat(newSelected, "']"));
selectTabByIndex(newSelected);
}, [length, selectTabByIndex]); // Memoized so the function isn't recreated each time
if (newSelectedNode) {
newSelectedNode.focus();
}
onChange(newSelected);
}, [length, onChange, tabsId, ref]); // Memoized so the function isn't recreated each time
var getTabWithContext = (0, _react.useCallback)(function (_ref) {

@@ -74,0 +89,0 @@ var tab = _ref.tab,

2

dist/cjs/components/tabs.js

@@ -39,3 +39,3 @@ "use strict";

packageName: "@atlaskit/tabs",
packageVersion: "13.0.1"
packageVersion: "13.1.0"
};

@@ -42,0 +42,0 @@

2

dist/cjs/version.json
{
"name": "@atlaskit/tabs",
"version": "13.0.1",
"version": "13.1.0",
"sideEffects": false
}

38

dist/es2019/components/tab-list.js

@@ -27,7 +27,26 @@ import _extends from "@babel/runtime/helpers/extends";

const styles = useMemo(() => getTabListStyles(mode), [mode]);
const onKeyDown = useCallback(e => {
const selectTabByIndex = useCallback(index => {
var _ref$current;
if (!['ArrowRight', 'ArrowLeft'].includes(e.key)) {
const newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(`[id='${tabsId}-${index}']`);
if (newSelectedNode) {
newSelectedNode.focus();
}
onChange(index);
}, [tabsId, ref, onChange]);
const onKeyDown = useCallback(e => {
if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key)) {
return;
} // preventing horizontal or vertical scroll
e.preventDefault();
const lastTabIndex = length - 1;
if (['Home', 'End'].includes(e.key)) {
const newSelected = e.key === 'Home' ? 0 : lastTabIndex;
selectTabByIndex(newSelected);
return;
} // We use aria-posinset so we don't rely on the selected variable

@@ -40,17 +59,12 @@ // If we used the selected variable this would regenerate each time

const modifier = e.key === 'ArrowRight' ? 1 : -1;
const newSelected = selectedIndex + modifier;
let newSelected = selectedIndex + modifier;
if (newSelected < 0 || newSelected >= length) {
return;
// Cycling focus to move from last to first and from first to last
newSelected = newSelected < 0 ? lastTabIndex : 0;
}
const newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(`[id='${tabsId}-${newSelected}']`);
selectTabByIndex(newSelected);
}, [length, selectTabByIndex]); // Memoized so the function isn't recreated each time
if (newSelectedNode) {
newSelectedNode.focus();
}
onChange(newSelected);
}, [length, onChange, tabsId, ref]); // Memoized so the function isn't recreated each time
const getTabWithContext = useCallback(({

@@ -57,0 +71,0 @@ tab,

2

dist/es2019/components/tabs.js

@@ -14,3 +14,3 @@ import _extends from "@babel/runtime/helpers/extends";

packageName: "@atlaskit/tabs",
packageVersion: "13.0.1"
packageVersion: "13.1.0"
};

@@ -17,0 +17,0 @@

2

dist/es2019/version.json
{
"name": "@atlaskit/tabs",
"version": "13.0.1",
"version": "13.1.0",
"sideEffects": false
}

37

dist/esm/components/tab-list.js

@@ -28,7 +28,27 @@ import _extends from "@babel/runtime/helpers/extends";

}, [mode]);
var onKeyDown = useCallback(function (e) {
var selectTabByIndex = useCallback(function (index) {
var _ref$current;
if (!['ArrowRight', 'ArrowLeft'].includes(e.key)) {
var newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[id='".concat(tabsId, "-").concat(index, "']"));
if (newSelectedNode) {
newSelectedNode.focus();
}
onChange(index);
}, [tabsId, ref, onChange]);
var onKeyDown = useCallback(function (e) {
if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key)) {
return;
} // preventing horizontal or vertical scroll
e.preventDefault();
var lastTabIndex = length - 1;
if (['Home', 'End'].includes(e.key)) {
var _newSelected = e.key === 'Home' ? 0 : lastTabIndex;
selectTabByIndex(_newSelected);
return;
} // We use aria-posinset so we don't rely on the selected variable

@@ -44,14 +64,9 @@ // If we used the selected variable this would regenerate each time

if (newSelected < 0 || newSelected >= length) {
return;
// Cycling focus to move from last to first and from first to last
newSelected = newSelected < 0 ? lastTabIndex : 0;
}
var newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[id='".concat(tabsId, "-").concat(newSelected, "']"));
selectTabByIndex(newSelected);
}, [length, selectTabByIndex]); // Memoized so the function isn't recreated each time
if (newSelectedNode) {
newSelectedNode.focus();
}
onChange(newSelected);
}, [length, onChange, tabsId, ref]); // Memoized so the function isn't recreated each time
var getTabWithContext = useCallback(function (_ref) {

@@ -58,0 +73,0 @@ var tab = _ref.tab,

2

dist/esm/components/tabs.js

@@ -21,3 +21,3 @@ import _extends from "@babel/runtime/helpers/extends";

packageName: "@atlaskit/tabs",
packageVersion: "13.0.1"
packageVersion: "13.1.0"
};

@@ -24,0 +24,0 @@

2

dist/esm/version.json
{
"name": "@atlaskit/tabs",
"version": "13.0.1",
"version": "13.1.0",
"sideEffects": false
}

10

package.json
{
"name": "@atlaskit/tabs",
"version": "13.0.1",
"version": "13.1.0",
"description": "Tabs are used to organize content by grouping similar information on the same page.",

@@ -27,3 +27,3 @@ "publishConfig": {

"@atlaskit/analytics-next": "^8.0.0",
"@atlaskit/codemod-utils": "^3.0.0",
"@atlaskit/codemod-utils": "^3.2.0",
"@atlaskit/theme": "^11.1.0",

@@ -45,2 +45,3 @@ "@babel/runtime": "^7.0.0",

"@atlaskit/webdriver-runner": "*",
"@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
"@testing-library/react": "^8.0.1",

@@ -51,3 +52,3 @@ "enzyme": "^3.10.0",

"react-lorem-component": "^0.13.0",
"storybook-addon-performance": "0.13.0",
"storybook-addon-performance": "^0.15.1",
"typescript": "3.9.6",

@@ -80,3 +81,4 @@ "wait-for-expect": "^1.2.0"

},
"homepage": "https://atlassian.design/components/tabs/"
"homepage": "https://atlassian.design/components/tabs/",
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
}