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.3.10 to 13.3.11

6

CHANGELOG.md
# @atlaskit/tabs
## 13.3.11
### Patch Changes
- Updated dependencies
## 13.3.10

@@ -4,0 +10,0 @@

55

dist/cjs/components/tab-list.js

@@ -7,19 +7,10 @@ "use strict";

exports.default = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _dsExplorations = require("@atlaskit/ds-explorations");
var _components = require("@atlaskit/theme/components");
var _hooks = require("../hooks");
var _context = require("../internal/context");
var _styles = require("../internal/styles");
var _utils = require("../internal/utils");
/** @jsx jsx */

@@ -38,15 +29,12 @@

var children = props.children;
var _useGlobalTheme = (0, _components.useGlobalTheme)(),
mode = _useGlobalTheme.mode;
mode = _useGlobalTheme.mode;
var _useTabList = (0, _hooks.useTabList)(),
tabsId = _useTabList.tabsId,
selected = _useTabList.selected,
onChange = _useTabList.onChange;
tabsId = _useTabList.tabsId,
selected = _useTabList.selected,
onChange = _useTabList.onChange;
var ref = /*#__PURE__*/(0, _react.createRef)();
var ref = /*#__PURE__*/(0, _react.createRef)(); // Don't include any conditional children
// Don't include any conditional children
var childrenArray = _react.Children.toArray(children).filter(Boolean);
var length = childrenArray.length;

@@ -58,9 +46,6 @@ var tabListStyles = (0, _react.useMemo)(function () {

var _ref$current;
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);

@@ -71,22 +56,19 @@ }, [tabsId, ref, onChange]);

return;
} // preventing horizontal or vertical scroll
}
// 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
}
// We use aria-posinset so we don't rely on the selected variable
// If we used the selected variable this would regenerate each time
// and create an unstable reference
var selectedIndex = parseInt(e.currentTarget.getAttribute('aria-posinset') || '0') - 1;
var modifier = e.key === 'ArrowRight' ? 1 : -1;
var newSelected = selectedIndex + modifier;
if (newSelected < 0 || newSelected >= length) {

@@ -96,10 +78,10 @@ // Cycling focus to move from last to first and from first to last

}
selectTabByIndex(newSelected);
}, [length, selectTabByIndex]); // Memoized so the function isn't recreated each time
}, [length, selectTabByIndex]);
// Memoized so the function isn't recreated each time
var getTabWithContext = (0, _react.useCallback)(function (_ref) {
var tab = _ref.tab,
isSelected = _ref.isSelected,
index = _ref.index;
isSelected = _ref.isSelected,
index = _ref.index;
return (0, _react2.jsx)(_context.TabContext.Provider, {

@@ -123,3 +105,4 @@ value: {

}, [length, onKeyDown, onChange, tabsId]);
return (// Only styles that affect the TabList itself have been applied via primitives.
return (
// Only styles that affect the TabList itself have been applied via primitives.
// The other styles applied through the CSS prop are there for styling children

@@ -134,3 +117,4 @@ // through inheritance. This is important for custom cases that use the useTab(),

padding: "space.0",
ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
ref: ref
// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
,

@@ -147,4 +131,3 @@ css: tabListStyles

};
var _default = TabList;
exports.default = _default;

12

dist/cjs/components/tab-panel.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -9,16 +8,10 @@ value: true

exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _dsExplorations = require("@atlaskit/ds-explorations");
var _hooks = require("../hooks");
/** @jsx jsx */
/** @jsx jsx */
// Note this is not being memoized as children is an unstable reference
/**

@@ -35,3 +28,3 @@ * __TabPanel__

var children = _ref.children,
testId = _ref.testId;
testId = _ref.testId;
var tabPanelAttributes = (0, _hooks.useTabPanel)();

@@ -43,4 +36,3 @@ return (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({

};
var _default = TabPanel;
exports.default = _default;

8

dist/cjs/components/tab.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -9,11 +8,6 @@ value: true

exports.default = Tab;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("@emotion/react");
var _dsExplorations = require("@atlaskit/ds-explorations");
var _hooks = require("../hooks");
/** @jsx jsx */

@@ -32,3 +26,3 @@

var children = _ref.children,
testId = _ref.testId;
testId = _ref.testId;
var tabAttributes = (0, _hooks.useTab)();

@@ -35,0 +29,0 @@ return (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({

85

dist/cjs/components/tabs.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -9,41 +8,27 @@ value: true

exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _dsExplorations = require("@atlaskit/ds-explorations");
var _components = require("@atlaskit/theme/components");
var _context = require("../internal/context");
var _styles = require("../internal/styles");
var _utils = require("../internal/utils");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var analyticsAttributes = {
componentName: 'tabs',
packageName: "@atlaskit/tabs",
packageVersion: "13.3.10"
packageVersion: "13.3.11"
};
var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
var tabPanel = _ref.tabPanel,
index = _ref.index,
isSelected = _ref.isSelected,
tabsId = _ref.tabsId;
return (// Ensure tabPanel exists in case it has been removed
index = _ref.index,
isSelected = _ref.isSelected,
tabsId = _ref.tabsId;
return (
// Ensure tabPanel exists in case it has been removed
tabPanel && (0, _react2.jsx)(_context.TabPanelContext.Provider, {

@@ -62,2 +47,3 @@ value: {

};
/**

@@ -72,42 +58,34 @@ * __Tabs__

*/
var Tabs = function Tabs(props) {
var _props$shouldUnmountT = props.shouldUnmountTabPanelOnChange,
shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
SelectedType = props.selected,
defaultSelected = props.defaultSelected,
onChangeProp = props.onChange,
id = props.id,
analyticsContext = props.analyticsContext,
children = props.children,
testId = props.testId;
shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
SelectedType = props.selected,
defaultSelected = props.defaultSelected,
onChangeProp = props.onChange,
id = props.id,
analyticsContext = props.analyticsContext,
children = props.children,
testId = props.testId;
var _useGlobalTheme = (0, _components.useGlobalTheme)(),
mode = _useGlobalTheme.mode;
mode = _useGlobalTheme.mode;
var _useState = (0, _react.useState)(SelectedType || defaultSelected || 0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
selectedState = _useState2[0],
setSelected = _useState2[1];
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
selectedState = _useState2[0],
setSelected = _useState2[1];
var selected = SelectedType === undefined ? selectedState : SelectedType;
var childrenArray = _react.Children.toArray(children) // Don't include any conditional children
var childrenArray = _react.Children.toArray(children)
// Don't include any conditional children
.filter(function (child) {
return Boolean(child);
}); // First child should be a tabList followed by tab panels
});
// First child should be a tabList followed by tab panels
var _childrenArray = (0, _toArray2.default)(childrenArray),
tabList = _childrenArray[0],
tabPanels = _childrenArray.slice(1); // Keep track of visited and add to a set
tabList = _childrenArray[0],
tabPanels = _childrenArray.slice(1);
// Keep track of visited and add to a set
var visited = (0, _react.useRef)(new Set([selected]));
if (!visited.current.has(selected)) {
visited.current.add(selected);
}
var onChange = (0, _react.useCallback)(function (index, analyticsEvent) {

@@ -117,3 +95,2 @@ if (onChangeProp) {

}
setSelected(index);

@@ -131,3 +108,4 @@ }, [onChangeProp]);

tabsId: id
}) : // If a panel has already been visited, don't unmount it
}) :
// If a panel has already been visited, don't unmount it
Array.from(visited.current).map(function (tabIndex) {

@@ -144,3 +122,4 @@ return getTabPanelWithContext({

}, [mode]);
return (// Only styles that affect the Tabs container itself have been applied via primitives.
return (
// Only styles that affect the Tabs container itself have been applied via primitives.
// The other styles applied through the CSS prop are there for styling children

@@ -159,3 +138,4 @@ // through inheritance. This is important for custom cases that use the useTabPanel(),

flexGrow: 1
} // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
}
// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
,

@@ -172,4 +152,3 @@ css: tabsStyles

};
var _default = Tabs;
exports.default = _default;

14

dist/cjs/hooks.js

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

exports.useTabPanel = exports.useTabList = exports.useTab = void 0;
var _react = require("react");
var _context = require("./internal/context");
var useTab = function useTab() {
var tabData = (0, _react.useContext)(_context.TabContext);
if (tabData == null || typeof tabData === 'undefined') {
throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
}
return tabData;
};
exports.useTab = useTab;
var useTabList = function useTabList() {
var tabListData = (0, _react.useContext)(_context.TabListContext);
if (tabListData === null || typeof tabListData === 'undefined') {
throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
}
return tabListData;
};
exports.useTabList = useTabList;
var useTabPanel = function useTabPanel() {
var tabPanelData = (0, _react.useContext)(_context.TabPanelContext);
if (tabPanelData === null || typeof tabPanelData === 'undefined') {
throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
}
return tabPanelData;
};
exports.useTabPanel = useTabPanel;

6

dist/cjs/index.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -44,11 +43,6 @@ value: true

});
var _tabs = _interopRequireDefault(require("./components/tabs"));
var _tabPanel = _interopRequireDefault(require("./components/tab-panel"));
var _tab = _interopRequireDefault(require("./components/tab"));
var _tabList = _interopRequireDefault(require("./components/tab-list"));
var _hooks = require("./hooks");

8

dist/cjs/internal/colors.js

@@ -7,5 +7,3 @@ "use strict";

exports.getTabPanelFocusColor = exports.getTabLineColor = exports.getTabColors = void 0;
var _colors = require("@atlaskit/theme/colors");
var tabColorMap = {

@@ -27,7 +25,5 @@ light: {

};
var getTabColors = function getTabColors(mode) {
return tabColorMap[mode];
};
exports.getTabColors = getTabColors;

@@ -48,7 +44,5 @@ var tabLineColorMap = {

};
var getTabLineColor = function getTabLineColor(mode) {
return tabLineColorMap[mode];
};
exports.getTabLineColor = getTabLineColor;

@@ -59,7 +53,5 @@ var tabPanelFocusColorMap = {

};
var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {
return tabPanelFocusColorMap[mode];
};
exports.getTabPanelFocusColor = getTabPanelFocusColor;

3

dist/cjs/internal/context.js

@@ -7,6 +7,5 @@ "use strict";

exports.TabPanelContext = exports.TabListContext = exports.TabContext = void 0;
var _react = require("react");
/* eslint-disable @repo/internal/react/require-jsdoc */
/* eslint-disable @repo/internal/react/require-jsdoc */
var TabContext = /*#__PURE__*/(0, _react.createContext)(null);

@@ -13,0 +12,0 @@ exports.TabContext = TabContext;

27

dist/cjs/internal/styles.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -9,15 +8,8 @@ value: true

exports.getTabsStyles = exports.getTabStyles = exports.getTabListStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
var _constants = require("@atlaskit/theme/constants");
var _colors = require("./colors");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var borderRadius = (0, _constants.borderRadius)();

@@ -30,4 +22,5 @@ var gridSize = (0, _constants.gridSize)();

outline: '1px solid'
}; // Required so the focus ring is visible in high contrast mode
};
// Required so the focus ring is visible in high contrast mode
var highContrastFocusRing = {

@@ -41,3 +34,2 @@ '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {

};
var tabFocusStyles = function tabFocusStyles(mode) {

@@ -50,7 +42,5 @@ return {

};
var getTabPanelStyles = function getTabPanelStyles(mode) {
return _objectSpread({
flexGrow: 1,
/*

@@ -69,5 +59,5 @@ NOTE min-height set to 0% because of Firefox bug

};
var getTabsStyles = function getTabsStyles(mode) {
return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
return (
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
(0, _react.css)({

@@ -84,3 +74,2 @@ '& [role="tabpanel"]': getTabPanelStyles(mode),

};
exports.getTabsStyles = getTabsStyles;

@@ -97,5 +86,5 @@ var tabLineStyles = {

};
var getTabListStyles = function getTabListStyles(mode) {
return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
return (
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
(0, _react.css)({

@@ -112,5 +101,3 @@ '& [role="tab"]': getTabStyles(mode),

};
exports.getTabListStyles = getTabListStyles;
var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {

@@ -128,3 +115,2 @@ var colors = (0, _colors.getTabColors)(mode);

};
var getTabStyles = function getTabStyles(mode) {

@@ -173,3 +159,2 @@ var colors = (0, _colors.getTabColors)(mode);

};
exports.getTabStyles = getTabStyles;

3

dist/cjs/internal/utils.js

@@ -7,3 +7,2 @@ "use strict";

exports.onMouseDownBlur = void 0;
// Prevent a focus ring if clicked

@@ -18,3 +17,2 @@ var onMouseDownBlur = function onMouseDownBlur(e) {

}
if (!focusedDuringMouseDown && document.body.contains(currentTarget)) {

@@ -25,3 +23,2 @@ currentTarget.blur();

};
exports.onMouseDownBlur = onMouseDownBlur;

2

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

30

dist/es2019/components/tab-list.js

@@ -10,3 +10,2 @@ /** @jsx jsx */

import { onMouseDownBlur } from '../internal/utils';
/**

@@ -33,4 +32,5 @@ * __TabList__

} = useTabList();
const ref = /*#__PURE__*/createRef(); // Don't include any conditional children
const ref = /*#__PURE__*/createRef();
// Don't include any conditional children
const childrenArray = Children.toArray(children).filter(Boolean);

@@ -41,9 +41,6 @@ const length = childrenArray.length;

var _ref$current;
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);

@@ -54,8 +51,7 @@ }, [tabsId, ref, onChange]);

return;
} // preventing horizontal or vertical scroll
}
// preventing horizontal or vertical scroll
e.preventDefault();
const lastTabIndex = length - 1;
if (['Home', 'End'].includes(e.key)) {

@@ -65,11 +61,10 @@ const newSelected = e.key === 'Home' ? 0 : lastTabIndex;

return;
} // We use aria-posinset so we don't rely on the selected variable
}
// We use aria-posinset so we don't rely on the selected variable
// If we used the selected variable this would regenerate each time
// and create an unstable reference
const selectedIndex = parseInt(e.currentTarget.getAttribute('aria-posinset') || '0') - 1;
const modifier = e.key === 'ArrowRight' ? 1 : -1;
let newSelected = selectedIndex + modifier;
if (newSelected < 0 || newSelected >= length) {

@@ -79,6 +74,6 @@ // Cycling focus to move from last to first and from first to last

}
selectTabByIndex(newSelected);
}, [length, selectTabByIndex]); // Memoized so the function isn't recreated each time
}, [length, selectTabByIndex]);
// Memoized so the function isn't recreated each time
const getTabWithContext = useCallback(({

@@ -103,3 +98,4 @@ tab,

}, tab), [length, onKeyDown, onChange, tabsId]);
return (// Only styles that affect the TabList itself have been applied via primitives.
return (
// Only styles that affect the TabList itself have been applied via primitives.
// The other styles applied through the CSS prop are there for styling children

@@ -114,3 +110,4 @@ // through inheritance. This is important for custom cases that use the useTab(),

padding: "space.0",
ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
ref: ref
// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
,

@@ -125,3 +122,2 @@ css: tabListStyles

};
export default TabList;

4

dist/es2019/components/tab-panel.js
import _extends from "@babel/runtime/helpers/extends";
/** @jsx jsx */

@@ -8,5 +7,3 @@ import { Fragment } from 'react';

import { useTabPanel } from '../hooks';
// Note this is not being memoized as children is an unstable reference
/**

@@ -31,3 +28,2 @@ * __TabPanel__

};
export default TabPanel;

2

dist/es2019/components/tab.js
import _extends from "@babel/runtime/helpers/extends";
/** @jsx jsx */

@@ -7,3 +6,2 @@ import { jsx } from '@emotion/react';

import { useTab } from '../hooks';
/**

@@ -10,0 +8,0 @@ * __Tab__

32

dist/es2019/components/tabs.js

@@ -13,5 +13,4 @@ /** @jsx jsx */

packageName: "@atlaskit/tabs",
packageVersion: "13.3.10"
packageVersion: "13.3.11"
};
const getTabPanelWithContext = ({

@@ -22,3 +21,4 @@ tabPanel,

tabsId
}) => // Ensure tabPanel exists in case it has been removed
}) =>
// Ensure tabPanel exists in case it has been removed
tabPanel && jsx(TabPanelContext.Provider, {

@@ -35,2 +35,3 @@ value: {

}, tabPanel);
/**

@@ -45,4 +46,2 @@ * __Tabs__

*/
const Tabs = props => {

@@ -64,13 +63,13 @@ const {

const selected = SelectedType === undefined ? selectedState : SelectedType;
const childrenArray = Children.toArray(children) // Don't include any conditional children
.filter(child => Boolean(child)); // First child should be a tabList followed by tab panels
const childrenArray = Children.toArray(children)
// Don't include any conditional children
.filter(child => Boolean(child));
// First child should be a tabList followed by tab panels
const [tabList, ...tabPanels] = childrenArray;
const [tabList, ...tabPanels] = childrenArray; // Keep track of visited and add to a set
// Keep track of visited and add to a set
const visited = useRef(new Set([selected]));
if (!visited.current.has(selected)) {
visited.current.add(selected);
}
const onChange = useCallback((index, analyticsEvent) => {

@@ -80,3 +79,2 @@ if (onChangeProp) {

}
setSelected(index);

@@ -95,3 +93,4 @@ }, [onChangeProp]);

tabsId: id
}) : // If a panel has already been visited, don't unmount it
}) :
// If a panel has already been visited, don't unmount it
Array.from(visited.current).map(tabIndex => getTabPanelWithContext({

@@ -104,3 +103,4 @@ tabPanel: tabPanels[tabIndex],

const tabsStyles = useMemo(() => getTabsStyles(mode), [mode]);
return (// Only styles that affect the Tabs container itself have been applied via primitives.
return (
// Only styles that affect the Tabs container itself have been applied via primitives.
// The other styles applied through the CSS prop are there for styling children

@@ -119,3 +119,4 @@ // through inheritance. This is important for custom cases that use the useTabPanel(),

flexGrow: 1
} // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
}
// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
,

@@ -132,3 +133,2 @@ css: tabsStyles

};
export default Tabs;

6

dist/es2019/hooks.js

@@ -5,7 +5,5 @@ import { useContext } from 'react';

const tabData = useContext(TabContext);
if (tabData == null || typeof tabData === 'undefined') {
throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
}
return tabData;

@@ -15,7 +13,5 @@ };

const tabListData = useContext(TabListContext);
if (tabListData === null || typeof tabListData === 'undefined') {
throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
}
return tabListData;

@@ -25,8 +21,6 @@ };

const tabPanelData = useContext(TabPanelContext);
if (tabPanelData === null || typeof tabPanelData === 'undefined') {
throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
}
return tabPanelData;
};

27

dist/es2019/internal/styles.js

@@ -11,4 +11,5 @@ import { css } from '@emotion/react';

outline: '1px solid'
}; // Required so the focus ring is visible in high contrast mode
};
// Required so the focus ring is visible in high contrast mode
const highContrastFocusRing = {

@@ -22,3 +23,2 @@ '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {

};
const tabFocusStyles = mode => ({

@@ -29,6 +29,4 @@ boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,

});
const getTabPanelStyles = mode => ({
flexGrow: 1,
/*

@@ -47,4 +45,4 @@ NOTE min-height set to 0% because of Firefox bug

});
export const getTabsStyles = mode => // eslint-disable-next-line @repo/internal/styles/no-exported-styles
export const getTabsStyles = mode =>
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
css({

@@ -69,7 +67,9 @@ '& [role="tabpanel"]': getTabPanelStyles(mode),

};
export const getTabListStyles = mode => // eslint-disable-next-line @repo/internal/styles/no-exported-styles
export const getTabListStyles = mode =>
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
css({
'& [role="tab"]': getTabStyles(mode),
fontWeight: "var(--ds-font-weight-medium, 500)",
'&::before': { ...tabLineStyles,
'&::before': {
...tabLineStyles,
height: underlineHeight,

@@ -80,3 +80,2 @@ // This line is not a border so the selected line is visible in high contrast mode

});
const tabPanelFocusStyles = mode => {

@@ -94,3 +93,2 @@ const colors = getTabColors(mode);

};
export const getTabStyles = mode => {

@@ -111,3 +109,4 @@ const colors = getTabColors(mode);

color: colors.hoverLabelColor,
'&::after': { ...tabLineStyles,
'&::after': {
...tabLineStyles,
borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).hoveredColor}`,

@@ -120,3 +119,4 @@ height: 0

color: colors.activeLabelColor,
'&::after': { ...tabLineStyles,
'&::after': {
...tabLineStyles,
borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).activeColor}`,

@@ -133,3 +133,4 @@ height: 0

color: colors.selectedColor,
'&::after': { ...tabLineStyles,
'&::after': {
...tabLineStyles,
// This line is a border so it is visible in high contrast mode

@@ -136,0 +137,0 @@ borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).selectedColor}`,

1

dist/es2019/internal/utils.js

@@ -10,3 +10,2 @@ // Prevent a focus ring if clicked

}
if (!focusedDuringMouseDown && document.body.contains(currentTarget)) {

@@ -13,0 +12,0 @@ currentTarget.blur();

2

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

46

dist/esm/components/tab-list.js

@@ -10,3 +10,2 @@ /** @jsx jsx */

import { onMouseDownBlur } from '../internal/utils';
/**

@@ -23,13 +22,11 @@ * __TabList__

var children = props.children;
var _useGlobalTheme = useGlobalTheme(),
mode = _useGlobalTheme.mode;
mode = _useGlobalTheme.mode;
var _useTabList = useTabList(),
tabsId = _useTabList.tabsId,
selected = _useTabList.selected,
onChange = _useTabList.onChange;
tabsId = _useTabList.tabsId,
selected = _useTabList.selected,
onChange = _useTabList.onChange;
var ref = /*#__PURE__*/createRef();
var ref = /*#__PURE__*/createRef(); // Don't include any conditional children
// Don't include any conditional children
var childrenArray = Children.toArray(children).filter(Boolean);

@@ -42,9 +39,6 @@ var length = childrenArray.length;

var _ref$current;
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);

@@ -55,22 +49,19 @@ }, [tabsId, ref, onChange]);

return;
} // preventing horizontal or vertical scroll
}
// 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
}
// We use aria-posinset so we don't rely on the selected variable
// If we used the selected variable this would regenerate each time
// and create an unstable reference
var selectedIndex = parseInt(e.currentTarget.getAttribute('aria-posinset') || '0') - 1;
var modifier = e.key === 'ArrowRight' ? 1 : -1;
var newSelected = selectedIndex + modifier;
if (newSelected < 0 || newSelected >= length) {

@@ -80,10 +71,10 @@ // Cycling focus to move from last to first and from first to last

}
selectTabByIndex(newSelected);
}, [length, selectTabByIndex]); // Memoized so the function isn't recreated each time
}, [length, selectTabByIndex]);
// Memoized so the function isn't recreated each time
var getTabWithContext = useCallback(function (_ref) {
var tab = _ref.tab,
isSelected = _ref.isSelected,
index = _ref.index;
isSelected = _ref.isSelected,
index = _ref.index;
return jsx(TabContext.Provider, {

@@ -107,3 +98,4 @@ value: {

}, [length, onKeyDown, onChange, tabsId]);
return (// Only styles that affect the TabList itself have been applied via primitives.
return (
// Only styles that affect the TabList itself have been applied via primitives.
// The other styles applied through the CSS prop are there for styling children

@@ -118,3 +110,4 @@ // through inheritance. This is important for custom cases that use the useTab(),

padding: "space.0",
ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
ref: ref
// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
,

@@ -131,3 +124,2 @@ css: tabListStyles

};
export default TabList;

6

dist/esm/components/tab-panel.js
import _extends from "@babel/runtime/helpers/extends";
/** @jsx jsx */

@@ -8,5 +7,3 @@ import { Fragment } from 'react';

import { useTabPanel } from '../hooks';
// Note this is not being memoized as children is an unstable reference
/**

@@ -23,3 +20,3 @@ * __TabPanel__

var children = _ref.children,
testId = _ref.testId;
testId = _ref.testId;
var tabPanelAttributes = useTabPanel();

@@ -31,3 +28,2 @@ return jsx(Box, _extends({

};
export default TabPanel;

4

dist/esm/components/tab.js
import _extends from "@babel/runtime/helpers/extends";
/** @jsx jsx */

@@ -7,3 +6,2 @@ import { jsx } from '@emotion/react';

import { useTab } from '../hooks';
/**

@@ -20,3 +18,3 @@ * __Tab__

var children = _ref.children,
testId = _ref.testId;
testId = _ref.testId;
var tabAttributes = useTab();

@@ -23,0 +21,0 @@ return jsx(Box, _extends({

71

dist/esm/components/tabs.js
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toArray from "@babel/runtime/helpers/toArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/** @jsx jsx */

@@ -21,11 +18,11 @@ import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';

packageName: "@atlaskit/tabs",
packageVersion: "13.3.10"
packageVersion: "13.3.11"
};
var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
var tabPanel = _ref.tabPanel,
index = _ref.index,
isSelected = _ref.isSelected,
tabsId = _ref.tabsId;
return (// Ensure tabPanel exists in case it has been removed
index = _ref.index,
isSelected = _ref.isSelected,
tabsId = _ref.tabsId;
return (
// Ensure tabPanel exists in case it has been removed
tabPanel && jsx(TabPanelContext.Provider, {

@@ -44,2 +41,3 @@ value: {

};
/**

@@ -54,40 +52,34 @@ * __Tabs__

*/
var Tabs = function Tabs(props) {
var _props$shouldUnmountT = props.shouldUnmountTabPanelOnChange,
shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
SelectedType = props.selected,
defaultSelected = props.defaultSelected,
onChangeProp = props.onChange,
id = props.id,
analyticsContext = props.analyticsContext,
children = props.children,
testId = props.testId;
shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
SelectedType = props.selected,
defaultSelected = props.defaultSelected,
onChangeProp = props.onChange,
id = props.id,
analyticsContext = props.analyticsContext,
children = props.children,
testId = props.testId;
var _useGlobalTheme = useGlobalTheme(),
mode = _useGlobalTheme.mode;
mode = _useGlobalTheme.mode;
var _useState = useState(SelectedType || defaultSelected || 0),
_useState2 = _slicedToArray(_useState, 2),
selectedState = _useState2[0],
setSelected = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
selectedState = _useState2[0],
setSelected = _useState2[1];
var selected = SelectedType === undefined ? selectedState : SelectedType;
var childrenArray = Children.toArray(children) // Don't include any conditional children
var childrenArray = Children.toArray(children)
// Don't include any conditional children
.filter(function (child) {
return Boolean(child);
}); // First child should be a tabList followed by tab panels
});
// First child should be a tabList followed by tab panels
var _childrenArray = _toArray(childrenArray),
tabList = _childrenArray[0],
tabPanels = _childrenArray.slice(1); // Keep track of visited and add to a set
tabList = _childrenArray[0],
tabPanels = _childrenArray.slice(1);
// Keep track of visited and add to a set
var visited = useRef(new Set([selected]));
if (!visited.current.has(selected)) {
visited.current.add(selected);
}
var onChange = useCallback(function (index, analyticsEvent) {

@@ -97,3 +89,2 @@ if (onChangeProp) {

}
setSelected(index);

@@ -111,3 +102,4 @@ }, [onChangeProp]);

tabsId: id
}) : // If a panel has already been visited, don't unmount it
}) :
// If a panel has already been visited, don't unmount it
Array.from(visited.current).map(function (tabIndex) {

@@ -124,3 +116,4 @@ return getTabPanelWithContext({

}, [mode]);
return (// Only styles that affect the Tabs container itself have been applied via primitives.
return (
// Only styles that affect the Tabs container itself have been applied via primitives.
// The other styles applied through the CSS prop are there for styling children

@@ -139,3 +132,4 @@ // through inheritance. This is important for custom cases that use the useTabPanel(),

flexGrow: 1
} // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
}
// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
,

@@ -152,3 +146,2 @@ css: tabsStyles

};
export default Tabs;

6

dist/esm/hooks.js

@@ -5,7 +5,5 @@ import { useContext } from 'react';

var tabData = useContext(TabContext);
if (tabData == null || typeof tabData === 'undefined') {
throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
}
return tabData;

@@ -15,7 +13,5 @@ };

var tabListData = useContext(TabListContext);
if (tabListData === null || typeof tabListData === 'undefined') {
throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
}
return tabListData;

@@ -25,8 +21,6 @@ };

var tabPanelData = useContext(TabPanelContext);
if (tabPanelData === null || typeof tabPanelData === 'undefined') {
throw Error('@atlaskit/tabs: A TabPanel must have a Tabs parent.');
}
return tabPanelData;
};

18

dist/esm/internal/styles.js
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import { css } from '@emotion/react';

@@ -17,4 +14,5 @@ import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';

outline: '1px solid'
}; // Required so the focus ring is visible in high contrast mode
};
// Required so the focus ring is visible in high contrast mode
var highContrastFocusRing = {

@@ -28,3 +26,2 @@ '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {

};
var tabFocusStyles = function tabFocusStyles(mode) {

@@ -37,7 +34,5 @@ return {

};
var getTabPanelStyles = function getTabPanelStyles(mode) {
return _objectSpread({
flexGrow: 1,
/*

@@ -56,5 +51,5 @@ NOTE min-height set to 0% because of Firefox bug

};
export var getTabsStyles = function getTabsStyles(mode) {
return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
return (
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
css({

@@ -82,3 +77,4 @@ '& [role="tabpanel"]': getTabPanelStyles(mode),

export var getTabListStyles = function getTabListStyles(mode) {
return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
return (
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
css({

@@ -95,3 +91,2 @@ '& [role="tab"]': getTabStyles(mode),

};
var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {

@@ -109,3 +104,2 @@ var colors = getTabColors(mode);

};
export var getTabStyles = function getTabStyles(mode) {

@@ -112,0 +106,0 @@ var colors = getTabColors(mode);

1

dist/esm/internal/utils.js

@@ -10,3 +10,2 @@ // Prevent a focus ring if clicked

}
if (!focusedDuringMouseDown && document.body.contains(currentTarget)) {

@@ -13,0 +12,0 @@ currentTarget.blur();

2

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

4

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

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

"@atlaskit/theme": "^12.2.0",
"@atlaskit/tokens": "^0.13.0",
"@atlaskit/tokens": "^1.0.0",
"@babel/runtime": "^7.0.0",

@@ -34,0 +34,0 @@ "@emotion/react": "^11.7.1"

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc