@atlaskit/tabs 13.3.9 → 13.3.11

package/dist/esm/components/tabs.js

@@ -1,11 +1,8 @@
 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 */
 import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
@@ -18,15 +15,15 @@ import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.9"
+  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, {
       value: {
         role: 'tabpanel',
@@ -40,6 +37,7 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
     }, tabPanel)
   );
 };
+
 /**
  * __Tabs__
  *
@@ -49,49 +47,42 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-
-
 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) {
     if (onChangeProp) {
       onChangeProp(index, analyticsEvent);
     }
-
     setSelected(index);
   }, [onChangeProp]);
   var onChangeAnalytics = usePlatformLeafEventHandler(_objectSpread({
@@ -104,7 +95,8 @@ var Tabs = function 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(function (tabIndex) {
     return getTabPanelWithContext({
       tabPanel: tabPanels[tabIndex],
@@ -116,7 +108,8 @@ var Tabs = function Tabs(props) {
   var tabsStyles = useMemo(function () {
     return 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.
@@ -130,7 +123,8 @@ var Tabs = function 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, {
@@ -142,5 +136,4 @@ var Tabs = function Tabs(props) {
     }, tabList), jsx(Fragment, null, tabPanelsWithContext))
   );
 };
-
 export default Tabs;

package/dist/esm/hooks.js

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

package/dist/esm/internal/styles.js

@@ -1,9 +1,6 @@
 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';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';
@@ -14,8 +11,9 @@ var tabTopBottomPadding = "".concat(gridSize / 2, "px");
 var underlineHeight = '2px';
 var 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
 var highContrastFocusRing = {
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
     '&:focus-visible': highContrastFocusStyles,
@@ -24,7 +22,6 @@ var highContrastFocusRing = {
     }
   }
 };
-
 var tabFocusStyles = function tabFocusStyles(mode) {
   return {
     boxShadow: "0 0 0 2px ".concat(getTabPanelFocusColor(mode), " inset"),
@@ -32,11 +29,9 @@ var tabFocusStyles = function tabFocusStyles(mode) {
     outline: 'none'
   };
 };
-
 var getTabPanelStyles = function getTabPanelStyles(mode) {
   return _objectSpread({
     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
@@ -50,9 +45,9 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
     }
   }, highContrastFocusRing);
 };
-
 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({
       '& [role="tabpanel"]': getTabPanelStyles(mode),
       // The hidden attribute doesn't work on flex elements
@@ -75,7 +70,8 @@ var tabLineStyles = {
   right: tabLeftRightPadding
 };
 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({
       '& [role="tab"]': getTabStyles(mode),
       fontWeight: "var(--ds-font-weight-medium, 500)",
@@ -87,7 +83,6 @@ export var getTabListStyles = function getTabListStyles(mode) {
     })
   );
 };
-
 var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
   var colors = getTabColors(mode);
   return {
@@ -100,7 +95,6 @@ var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
     }
   };
 };
-
 export var getTabStyles = function getTabStyles(mode) {
   var colors = getTabColors(mode);
   return _objectSpread(_objectSpread({

package/dist/esm/internal/utils.js

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

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.3.9",
+  "version": "13.3.11",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,9 +26,9 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/ds-explorations": "^1.7.0",
+    "@atlaskit/ds-explorations": "^2.0.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },