@atlaskit/tabs 13.3.9 → 13.3.11

package/dist/es2019/components/tab-list.js

@@ -7,7 +7,6 @@ import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';
 import { getTabListStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
-
 /**
  * __TabList__
  *
@@ -29,52 +28,48 @@ const TabList = props => {
     selected,
     onChange
   } = 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);
   const length = childrenArray.length;
   const tabListStyles = useMemo(() => getTabListStyles(mode), [mode]);
   const selectTabByIndex = useCallback(index => {
     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);
   }, [tabsId, ref, onChange]);
   const onKeyDown = useCallback(e => {
     if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key)) {
       return;
-    } // preventing horizontal or vertical scroll
-
+    }
 
+    // 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
+    }
+
+    // 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) {
       // Cycling focus to move from last to first and from first to last
       newSelected = newSelected < 0 ? lastTabIndex : 0;
     }
-
     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(({
     tab,
     isSelected,
@@ -94,7 +89,8 @@ const TabList = props => {
     },
     key: index
   }, 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
     // through inheritance. This is important for custom cases that use the useTab(),
     // which applies accessibility atributes that we use as a styling hook.
@@ -103,8 +99,9 @@ const TabList = props => {
       role: "tablist",
       display: "flex",
       position: "relative",
-      padding: "scale.0",
-      ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      padding: "space.0",
+      ref: ref
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: tabListStyles
     }, childrenArray.map((child, index) => getTabWithContext({
@@ -114,5 +111,4 @@ const TabList = props => {
     })))
   );
 };
-
 export default TabList;

package/dist/es2019/components/tab-panel.js

@@ -1,13 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { useTabPanel } from '../hooks';
-
 // Note this is not being memoized as children is an unstable reference
-
 /**
  * __TabPanel__
  *
@@ -27,5 +24,4 @@ const TabPanel = ({
     as: "div"
   }, tabPanelAttributes), jsx(Fragment, null, children));
 };
-
 export default TabPanel;

package/dist/es2019/components/tab.js

@@ -1,10 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { useTab } from '../hooks';
-
 /**
  * __Tab__
  *

package/dist/es2019/components/tabs.js

@@ -10,15 +10,15 @@ import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.9"
+  packageVersion: "13.3.11"
 };
-
 const getTabPanelWithContext = ({
   tabPanel,
   index,
   isSelected,
   tabsId
-}) => // Ensure tabPanel exists in case it has been removed
+}) =>
+// Ensure tabPanel exists in case it has been removed
 tabPanel && jsx(TabPanelContext.Provider, {
   value: {
     role: 'tabpanel',
@@ -30,6 +30,7 @@ tabPanel && jsx(TabPanelContext.Provider, {
   },
   key: index
 }, tabPanel);
+
 /**
  * __Tabs__
  *
@@ -39,8 +40,6 @@ tabPanel && jsx(TabPanelContext.Provider, {
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-
-
 const Tabs = props => {
   const {
     shouldUnmountTabPanelOnChange = false,
@@ -57,22 +56,21 @@ const Tabs = props => {
   } = useGlobalTheme();
   const [selectedState, setSelected] = useState(SelectedType || defaultSelected || 0);
   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 [tabList, ...tabPanels] = childrenArray; // Keep track of visited and add to a set
+  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;
 
+  // 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) => {
     if (onChangeProp) {
       onChangeProp(index, analyticsEvent);
     }
-
     setSelected(index);
   }, [onChangeProp]);
   const onChangeAnalytics = usePlatformLeafEventHandler({
@@ -86,7 +84,8 @@ const Tabs = props => {
     index: selected,
     isSelected: true,
     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({
     tabPanel: tabPanels[tabIndex],
     index: tabIndex,
@@ -94,7 +93,8 @@ const Tabs = props => {
     tabsId: id
   }));
   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
     // through inheritance. This is important for custom cases that use the useTabPanel(),
     // which applies accessibility atributes that we use as a styling hook.
@@ -108,7 +108,8 @@ const Tabs = props => {
         minHeight: '0%',
         flexBasis: '100%',
         flexGrow: 1
-      } // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      }
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: tabsStyles
     }, jsx(TabListContext.Provider, {
@@ -120,5 +121,4 @@ const Tabs = props => {
     }, tabList), jsx(Fragment, null, tabPanelsWithContext))
   );
 };
-
 export default Tabs;

package/dist/es2019/hooks.js

@@ -2,28 +2,22 @@ import { useContext } from 'react';
 import { TabContext, TabListContext, TabPanelContext } from './internal/context';
 export const useTab = () => {
   const tabData = useContext(TabContext);
-
   if (tabData == null || typeof tabData === 'undefined') {
     throw Error('@atlaskit/tabs: A Tab must have a TabList parent.');
   }
-
   return tabData;
 };
 export const useTabList = () => {
   const tabListData = useContext(TabListContext);
-
   if (tabListData === null || typeof tabListData === 'undefined') {
     throw Error('@atlaskit/tabs: A TabList must have a Tabs parent.');
   }
-
   return tabListData;
 };
 export const useTabPanel = () => {
   const tabPanelData = useContext(TabPanelContext);
-
   if (tabPanelData === null || typeof tabPanelData === 'undefined') {
     throw Error('@atlaskit/tabs:  A TabPanel must have a Tabs parent.');
   }
-
   return tabPanelData;
 };

package/dist/es2019/internal/styles.js

@@ -8,8 +8,9 @@ const tabTopBottomPadding = `${gridSize / 2}px`;
 const underlineHeight = '2px';
 const highContrastFocusStyles = {
   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 = {
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': highContrastFocusStyles,
@@ -18,16 +19,13 @@ const highContrastFocusRing = {
     }
   }
 };
-
 const tabFocusStyles = mode => ({
   boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,
   borderRadius: borderRadius,
   outline: 'none'
 });
-
 const getTabPanelStyles = mode => ({
   flexGrow: 1,
-
   /*
     NOTE min-height set to 0% because of Firefox bug
     FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
@@ -41,8 +39,8 @@ const getTabPanelStyles = mode => ({
   },
   ...highContrastFocusRing
 });
-
-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({
   '& [role="tabpanel"]': getTabPanelStyles(mode),
   // The hidden attribute doesn't work on flex elements
@@ -62,17 +60,18 @@ const tabLineStyles = {
   left: tabLeftRightPadding,
   right: tabLeftRightPadding
 };
-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,
     // This line is not a border so the selected line is visible in high contrast mode
     backgroundColor: getTabLineColor(mode).lineColor
   }
 });
-
 const tabPanelFocusStyles = mode => {
   const colors = getTabColors(mode);
   return {
@@ -85,7 +84,6 @@ const tabPanelFocusStyles = mode => {
     }
   };
 };
-
 export const getTabStyles = mode => {
   const colors = getTabColors(mode);
   return {
@@ -101,7 +99,8 @@ export const getTabStyles = mode => {
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,
-      '&::after': { ...tabLineStyles,
+      '&::after': {
+        ...tabLineStyles,
         borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).hoveredColor}`,
         height: 0
       }
@@ -109,7 +108,8 @@ export const getTabStyles = mode => {
     '&:active': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.activeLabelColor,
-      '&::after': { ...tabLineStyles,
+      '&::after': {
+        ...tabLineStyles,
         borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).activeColor}`,
         height: 0
       }
@@ -121,7 +121,8 @@ export const getTabStyles = mode => {
     ...highContrastFocusRing,
     '&[aria-selected="true"]': {
       color: colors.selectedColor,
-      '&::after': { ...tabLineStyles,
+      '&::after': {
+        ...tabLineStyles,
         // This line is a border so it is visible in high contrast mode
         borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).selectedColor}`,
         height: 0

package/dist/es2019/internal/utils.js

@@ -7,7 +7,6 @@ export const onMouseDownBlur = e => {
       currentTarget.focus();
       return;
     }
-
     if (!focusedDuringMouseDown && document.body.contains(currentTarget)) {
       currentTarget.blur();
     }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tabs",
-	"version": "13.3.9",
+	"version": "13.3.11",
 	"sideEffects": false
 }

package/dist/esm/components/tab-list.js

@@ -7,7 +7,6 @@ import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';
 import { getTabListStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
-
 /**
  * __TabList__
  *
@@ -19,17 +18,15 @@ import { onMouseDownBlur } from '../internal/utils';
  */
 var TabList = function TabList(props) {
   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;
-
-  var ref = /*#__PURE__*/createRef(); // Don't include any conditional children
+    tabsId = _useTabList.tabsId,
+    selected = _useTabList.selected,
+    onChange = _useTabList.onChange;
+  var ref = /*#__PURE__*/createRef();
 
+  // Don't include any conditional children
   var childrenArray = Children.toArray(children).filter(Boolean);
   var length = childrenArray.length;
   var tabListStyles = useMemo(function () {
@@ -37,50 +34,44 @@ var TabList = function TabList(props) {
   }, [mode]);
   var selectTabByIndex = useCallback(function (index) {
     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);
   }, [tabsId, ref, onChange]);
   var onKeyDown = useCallback(function (e) {
     if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key)) {
       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) {
       // Cycling focus to move from last to first and from first to last
       newSelected = newSelected < 0 ? lastTabIndex : 0;
     }
-
     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, {
       value: {
         onClick: function onClick() {
@@ -99,7 +90,8 @@ var TabList = function TabList(props) {
       key: index
     }, 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
     // through inheritance. This is important for custom cases that use the useTab(),
     // which applies accessibility atributes that we use as a styling hook.
@@ -108,8 +100,9 @@ var TabList = function TabList(props) {
       role: "tablist",
       display: "flex",
       position: "relative",
-      padding: "scale.0",
-      ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      padding: "space.0",
+      ref: ref
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       ,
       css: tabListStyles
     }, childrenArray.map(function (child, index) {
@@ -121,5 +114,4 @@ var TabList = function TabList(props) {
     }))
   );
 };
-
 export default TabList;

package/dist/esm/components/tab-panel.js

@@ -1,13 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { useTabPanel } from '../hooks';
-
 // Note this is not being memoized as children is an unstable reference
-
 /**
  * __TabPanel__
  *
@@ -19,12 +16,11 @@ import { useTabPanel } from '../hooks';
  */
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
-      testId = _ref.testId;
+    testId = _ref.testId;
   var tabPanelAttributes = useTabPanel();
   return jsx(Box, _extends({
     testId: testId,
     as: "div"
   }, tabPanelAttributes), jsx(Fragment, null, children));
 };
-
 export default TabPanel;

package/dist/esm/components/tab.js

@@ -1,10 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { useTab } from '../hooks';
-
 /**
  * __Tab__
  *
@@ -16,7 +14,7 @@ import { useTab } from '../hooks';
  */
 export default function Tab(_ref) {
   var children = _ref.children,
-      testId = _ref.testId;
+    testId = _ref.testId;
   var tabAttributes = useTab();
   return jsx(Box, _extends({
     as: "div",